/* ==========================================================================
   DERIVA · web industrial (tallers de subcontractació, mòdul Ofertes) · v2

   Marca: 00-Agencia/identitat/manual-de-marca.md (04/10). Base blanca i només
   tres blocs foscos: la declaració, el contacte i el peu. Sora als titulars i a
   les xifres grans, Inter a la resta. La retícula de rombes (la genera
   tools/reticula.py) entra per la dreta a la portada i al contacte. El magenta
   és l'únic color: marca la dada trobada, ratlla el que canvia, omple el que avança.

   Regles:
   - Un sol accent: el degradat del rombe (#f0457f → #b8174f, en diagonal) als
     botons i als plens; #d83a6e pla als filets rectes (un degradat sobre una
     recta no es veu); #b8174f / #f0457f al text (AA sobre blanc / sobre fosc).
   - Sense tema fosc del sistema: la pàgina es veu igual per a tothom (decisió
     del 04/10). Cap brillantor que segueixi el cursor, cap desplaçament segrestat.
   - Cantonades rectes a la web (l'aplicació d'exemple i el formulari porten els
     radis d'una aplicació de veritat; els globus són rodons perquè en un plànol
     ho són).
   - Cada secció diu el seu to amb data-tema="fosc|clar"; els components fan
     servir tokens i s'adapten sols.
   - CSP del lloc: style-src 'self'. Res en línia. El JS només posa classes i
     propietats personalitzades (--v) des del CSSOM.
   - Tot el moviment respecta prefers-reduced-motion.
   ========================================================================== */

@font-face{font-family:'Sora';src:url('../fonts/sora.woff2') format('woff2');font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/inter.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* manual-de-marca.md §3 (tools/marca.py els té per als generadors) */
  --fons:#ffffff; --fons-2:#f6f7f9; --fons-3:#eceef2;
  --tinta:#0e1116; --tinta-2:#5a6270; --tinta-3:#5a6270;       /* 6,1:1 sobre blanc, 5,7:1 sobre #f6f7f9 */
  --linia:#e4e7ec; --linia-2:#c3c8d0;
  --g1:#f0457f; --g2:#b8174f;
  --accent-grad:linear-gradient(135deg,var(--g1),var(--g2));   /* botons i plens */
  --accent:#b8174f;          /* ple pla on no hi cap un degradat (SVG, selecció): blanc a sobre, 6,4:1 */
  --accent-linia:#d83a6e;    /* filets rectes */
  --accent-text:#b8174f;     /* text i traços sobre clar: 6,4:1 */
  --accent-suau:rgba(184,23,79,.07);
  --ok:#1f7a4d;

  --display:'Sora','Helvetica Neue',Arial,sans-serif;
  --sans:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:var(--sans);          /* sense monoespaiada: les etiquetes i les dades, amb la mateixa lletra */

  --wrap:1200px;
  --cap-h:3.5rem;           /* alçada de la capçalera */
  --gutter:max(clamp(1rem,4vw,2rem),env(safe-area-inset-left),env(safe-area-inset-right));
  --seccio:clamp(4.5rem,10vw,9rem);
  --e-out:cubic-bezier(.23,1,.32,1);
  --e-expo:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,0,.35,1);
  color-scheme:light;
}

/* Escenari fosc (i la capçalera quan hi passa per sobre) */
[data-tema="fosc"],.capcalera[data-sobre="fosc"]{
  --fons:#0b0c0e; --fons-2:#15171a; --fons-3:#1d2024;
  --tinta:#eef0f2; --tinta-2:#9aa2aa; --tinta-3:#9aa2aa;       /* 7,6:1 sobre #0b0c0e */
  --linia:#262a2f; --linia-2:#3a3f46;
  --accent-text:#f0457f;     /* 5,5:1 sobre #0b0c0e */
  --accent-suau:rgba(240,69,127,.14);
  --ok:#5fb38b;
  color-scheme:dark;
}


/* --- Base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--cap-h);interpolate-size:allow-keywords}
body{margin:0;background:var(--fons);color:var(--tinta);font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis-weight:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a,button,summary,label,input,textarea{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:650;letter-spacing:-.025em;line-height:1.1;text-wrap:balance}
p{margin:0;text-wrap:pretty}
p+p{margin-top:1em}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd{margin:0}
table{border-collapse:collapse;width:100%}
::selection{background:var(--accent);color:#fff}
[hidden]{display:none!important}
/* Saltar a una secció la deixa just a dalt: la capçalera tapa el seu padding,
   no el títol. El focus que passa per sota de la capçalera sí que es desplaça. */
main>section[id]{scroll-margin-top:calc(-1 * var(--cap-h))}
[tabindex="-1"]:focus:not(:focus-visible){outline:0}

.salta{position:absolute;left:-9999px;top:.5rem;z-index:100;padding:.75rem 1rem;background:var(--accent);color:#fff;text-decoration:none}
.salta:focus{left:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.gem{padding:0 .06em} /* ela geminada: la posa tools/tipografia.py */
.nw{white-space:nowrap} /* verb i pronom («passa-li»): el posa tools/tipografia.py */

.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto;position:relative}
.seccio{padding-block:var(--seccio);background:var(--fons);color:var(--tinta);position:relative}
.seccio--ratlla{border-top:1px solid var(--linia)}
.seccio--gris{--fons:var(--fons-2);background:var(--fons-2)}

.etiqueta,.eti{font-family:var(--mono);font-size:.75rem;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-3)}
.eti--quadre{display:flex;align-items:baseline;gap:.75rem}
.eti--quadre::before{content:"";flex:none;width:.45rem;height:.45rem;background:var(--accent-grad);transform:rotate(45deg) translateY(-.05rem)}   /* el rombe de la marca */

.h1{font-size:clamp(2.6rem,.9rem + 4.1vw,4.9rem);font-weight:650;letter-spacing:-.04em;line-height:1}
.h2{font-size:clamp(2.1rem,1.2rem + 3.1vw,3.8rem);font-weight:650;letter-spacing:-.035em;line-height:1.04}
.h3{font-size:1.25rem;letter-spacing:-.015em;line-height:1.25}
.entrada{font-size:clamp(1.125rem,1rem + .45vw,1.3125rem);line-height:1.5;color:var(--tinta-2);max-width:40rem}
.text{color:var(--tinta-2);max-width:38rem}
.text+.text{margin-top:1em}
.peu-nota{font-size:.875rem;line-height:1.5;color:var(--tinta-3)}
.h2+.entrada,.h2+.text{margin-top:1.5rem}

/* Cap fill de rejilla no pot eixamplar la seva columna (les taules amples
   fan scroll dins de la seva capsa, no a la pàgina). */
.cap>*,.obertes>*,.fundadors>*,.contacte>*,.preguntes>*,.portada__graella>*,.xifres__cap>*,.gran>*{min-width:0}
.cap{display:grid;gap:1.5rem 4rem;align-items:end}
@media (min-width:900px){.cap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.cap .entrada{max-width:34rem}}
@media (min-width:900px){.cap--apilat{grid-template-columns:minmax(0,1fr)}.cap--apilat .entrada{max-width:44rem}}
.cap .h2+.entrada{margin-top:0}
/* Titulars curts i frases grans sense paraula òrfena a l'última línia */
.garanties dt,.garantia blockquote,.faq summary,.comparacio tbody th,.gran__text,.cta-linia__q,.intercanvi li,.menu__d{text-wrap:balance}

/* --- Botons --------------------------------------------------------------- */
/* El degradat de la marca amb una ombra fixa del 14 %: el blanc hi fa 4,6:1 fins i tot a la punta
   clara (#f0457f sol, 3,9:1, no passa AA en text de 16 px). Decisió del 04/10 → decisiones-de-marca.md */
.boto{display:inline-flex;align-items:stretch;min-height:3rem;background:var(--accent);background-image:var(--accent-grad);color:#fff;
  box-shadow:inset 0 0 0 100vmax rgba(14,17,22,.14);
  font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:box-shadow .2s var(--e-out),transform .12s var(--e-out)}
.boto__text{display:flex;align-items:center;padding:.8rem 1.1rem .8rem 1.25rem}
.boto__fletxa{display:grid;place-items:center;width:3rem;background:rgba(14,17,22,.12);border-left:1px solid rgba(255,255,255,.22)}
.boto__fletxa svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;transition:transform .35s var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .boto:hover{color:#fff;box-shadow:inset 0 0 0 100vmax rgba(14,17,22,.26)}
  .boto:hover .boto__fletxa svg{transform:translateX(3px)}
}
.boto:active{transform:scale(.97)}
.boto--gran{min-height:3.5rem;font-size:1.0625rem}
.boto--gran .boto__text{padding-inline:1.5rem 1.25rem}
.boto--gran .boto__fletxa{width:3.5rem}
.boto[aria-busy="true"]{pointer-events:none;opacity:.75}
.enllac{font-weight:600;text-decoration:underline;text-decoration-color:var(--linia-2)}
.enllac:hover{text-decoration-color:currentColor;color:var(--accent-text)}

/* --- Capçalera: el cajetín ------------------------------------------------- */
/* Una barra opaca a tota amplada amb un filet a sota, com el cajetín d'un
   plànol: cel·les separades per filets verticals. En repòs, damunt de la
   portada, és transparent i es fon amb l'escenari; en baixar 8 px agafa el
   fons de la secció que té a sota (data-sobre). Res de vidre ni desenfocat. */
.capcalera{position:fixed;inset:0 0 auto;z-index:50;color:var(--tinta);transition:transform .3s var(--e-out)}
.capcalera::before{content:"";position:absolute;inset:0;background:var(--fons);border-bottom:1px solid var(--linia);
  box-shadow:0 10px 24px -18px rgba(14,17,22,.3);opacity:0;transition:opacity .24s var(--e-out)}
.capcalera[data-estat="flota"]::before{opacity:1}
.capcalera.amagada{transform:translateY(calc(-100% - 2px))}
.capcalera:focus-within{transform:none}                  /* mai amagada amb el focus a dins */
.capcalera__barra{position:relative;height:var(--cap-h);display:flex;align-items:stretch;
  width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}

/* El logo (tools/marca.py): el nom DERIVA pren el color del text; el rombe porta sempre el degradat */
.marca{flex:none;display:inline-flex;align-items:center;padding-right:1.25rem;text-decoration:none;color:var(--tinta)}
.logo{display:block;flex:none;width:auto;height:1.3rem}
.logo__desc{fill:#5a6270}
[data-tema="fosc"] .logo__desc,.capcalera[data-sobre="fosc"] .logo__desc{fill:#c4c9d0}

/* Els filets de les cel·les només es veuen quan la barra té fons */
.nav,.idioma,.capcalera__menu{border-left:1px solid transparent;transition:border-color .24s var(--e-out),color .2s var(--e-out)}
.capcalera[data-estat="flota"] :is(.nav,.idioma,.capcalera__menu){border-left-color:var(--linia)}

.nav{display:none}
@media (min-width:1200px){.nav{display:flex}}
.nav ul{display:flex;align-items:stretch}
.nav li{display:flex}
.nav a{position:relative;display:flex;align-items:center;padding:0 .95rem;white-space:nowrap;font-size:.9375rem;
  color:var(--tinta-2);text-decoration:none;transition:color .2s var(--e-out)}
.nav a::after{content:"";position:absolute;left:.95rem;right:.95rem;bottom:-1px;height:2px;background:var(--accent-linia);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e-out)}
.nav a[aria-current="true"]{color:var(--tinta)}
.nav a[aria-current="true"]::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--tinta)}.nav a:hover::after{transform:scaleX(1)}}

.capcalera__accions{margin-left:auto;display:flex;align-items:stretch}
.idioma{display:grid;place-items:center;min-width:2.75rem;padding:0 .6rem;font-family:var(--mono);font-size:.8125rem;
  letter-spacing:.06em;color:var(--tinta-2);text-decoration:none}
@media (hover:hover){.idioma:hover{color:var(--accent-text)}}

/* El CTA i, quan ja ets al formulari, «Resposta en un dia laborable» al seu lloc */
.capcalera__cta{display:grid;align-items:center;margin-left:.75rem}
.capcalera__cta>*{grid-area:1 / 1;justify-self:end}
.boto--cap{min-height:2.5rem;font-size:.9375rem;
  transition:opacity .2s var(--e-out),visibility 0s,background-color .2s var(--e-out),transform .12s var(--e-out)}
.boto--cap .boto__text{padding:.5rem .9rem .5rem 1rem}
.boto--cap .boto__fletxa{width:2.5rem}
.capcalera__resposta{justify-self:end;margin:0;font-size:.875rem;letter-spacing:0;
  color:var(--tinta-2);white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .2s var(--e-out),visibility 0s linear .2s}
.capcalera[data-contacte="si"] .boto--cap{opacity:0;visibility:hidden;transition:opacity .2s var(--e-out),visibility 0s linear .2s}
@media (min-width:1200px){
  .capcalera[data-contacte="si"] .capcalera__resposta{opacity:1;visibility:visible;transition:opacity .3s var(--e-out) .1s,visibility 0s}
}
@media (max-width:1199px){.capcalera__resposta{display:none}}

.capcalera__menu{display:flex;align-items:center;gap:.65rem;padding:0 0 0 1rem;margin-left:.75rem;font-family:var(--mono);
  font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta)}
.icona-menu{width:1.05rem;height:.65rem;border-block:1.5px solid currentColor}
@media (min-width:1200px){.capcalera__menu{display:none}}
html:not(.js) .capcalera__menu,html.sense-dialog .capcalera__menu{display:none}   /* sense JS o sense <dialog>: les àncores del peu */

/* Mòbil: el CTA passa a la barra de baix (només a la portada, i només amb JS) */
@media (max-width:767px){
  html.js [data-capcalera] .capcalera__cta{display:none}
  .capcalera__menu{margin-left:0}
}
/* Pàgines secundàries molt estretes: només marca i idioma */
@media (max-width:479px){.capcalera:not([data-capcalera]) .capcalera__cta{display:none}}

/* el progrés de la lectura: a tota l'amplada, sobre el filet de la barra */
.capcalera__progres{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--accent-linia);
  transform:scaleX(0);transform-origin:left;opacity:0;transition:opacity .24s}
.capcalera[data-estat="flota"] .capcalera__progres{opacity:1}
@supports (animation-timeline:scroll()){
  .capcalera__progres{animation:omple-x linear both;animation-timeline:scroll(root)}
}

/* --- El menú (dialog natiu: focus atrapat, Esc i fons inert de sèrie) ---------- */
.menu{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;
  padding:0 var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));border:0;
  background:var(--fons);color:var(--tinta);overflow-y:auto;overscroll-behavior:contain}
.menu:not([open]){display:none}                    /* també on <dialog> no és natiu */
.menu[open]{display:flex;flex-direction:column}
.menu::backdrop{background:transparent}
html:has(.menu[open]){overflow:hidden}
.menu__barra{display:flex;align-items:stretch;justify-content:space-between;height:var(--cap-h);flex:none;
  border-bottom:1px solid var(--linia)}
.menu__tanca{display:flex;align-items:center;gap:.65rem;padding-left:1rem;border-left:1px solid var(--linia);
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase}
.icona-x{position:relative;width:1rem;height:1rem}
.icona-x::before,.icona-x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;
  background:currentColor;transform:rotate(45deg)}
.icona-x::after{transform:rotate(-45deg)}
.menu__llista{margin-top:.5rem}
.menu__llista a{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:.25rem .75rem;padding:1.15rem 0;
  border-bottom:1px solid var(--linia);text-decoration:none}
.menu__n{grid-row:span 2;padding-top:.55rem;font-family:var(--mono);font-size:.8125rem;color:var(--accent-text)}
.menu__t{font-family:var(--display);font-size:clamp(1.5rem,1.2rem + 1.1vw,1.95rem);font-weight:600;letter-spacing:-.03em;line-height:1.12}
.menu__d{font-size:.9375rem;color:var(--tinta-2)}
@media (hover:hover){.menu__llista a:hover .menu__t{color:var(--accent-text)}}
.menu__peu{margin-top:auto;padding-top:2rem;display:grid;gap:.9rem}
.menu__alt{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.9375rem}
.menu__alt a{color:var(--tinta-2);text-decoration:none}
.boto--ample{display:flex;width:100%;justify-content:space-between}
@media (prefers-reduced-motion:no-preference){
  .menu[open]{animation:menu-entra .32s var(--e-expo)}
  .menu[open] .menu__llista li{animation:puja .4s var(--e-out) both}
  .menu[open] .menu__llista li:nth-child(1){animation-delay:.06s}
  .menu[open] .menu__llista li:nth-child(2){animation-delay:.1s}
  .menu[open] .menu__llista li:nth-child(3){animation-delay:.14s}
  .menu[open] .menu__llista li:nth-child(4){animation-delay:.18s}
  .menu.tancant{animation:menu-surt .18s cubic-bezier(.4,0,1,1) forwards}
}
@keyframes menu-entra{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0)}}
@keyframes menu-surt{to{opacity:0}}

/* --- La barra del mòbil ------------------------------------------------------ */
.barra-cta{position:fixed;left:.75rem;right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom));z-index:45;
  box-shadow:0 14px 34px -10px rgba(14,17,22,.45);transform:translateY(calc(100% + 1.5rem));visibility:hidden;
  transition:transform .28s var(--e-out),visibility 0s linear .28s}
.barra-cta.visible{transform:none;visibility:visible;transition:transform .28s var(--e-out),visibility 0s}
.barra-cta .boto{min-height:3.5rem}
.barra-cta .boto__text{flex-direction:column;align-items:flex-start;justify-content:center}
.barra-cta small{display:block;margin-top:.1rem;font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.03em;opacity:.88}
@media (min-width:768px){.barra-cta{display:none}.menu__peu{max-width:30rem}}
html:not(.js) .barra-cta{display:none}
html.barra-visible{scroll-padding-bottom:5.5rem}           /* WCAG 2.4.11: la barra no tapa el focus */
@media (prefers-reduced-motion:reduce){.barra-cta{transform:none;opacity:0}.barra-cta.visible{opacity:1}}

/* --- Escena (una secció amb capes: retícula, demo fixada) ------------------ */
.escena{position:relative;background:var(--fons);color:var(--tinta);padding-block:var(--seccio);overflow:clip;isolation:isolate}
.escena.seccio--gris{background:var(--fons-2)}
/* La retícula de rombes: una franja que entra per la dreta i s'esvaeix cap al text.
   Els SVG, amb la mida real (no s'escalen): els genera tools/reticula.py. Al mòbil,
   una franja estreta, només al marge. */
.reticula{position:absolute;inset:0;z-index:-1;pointer-events:none;background:no-repeat right 0 top calc(var(--cap-h) + 1.5rem)}
.reticula--contacte{background-position:right 0 top 0}
.reticula--portada{background-image:url('../img/reticula-portada.svg')}
.reticula--contacte{background-image:url('../img/reticula-contacte.svg')}
@media (max-width:767px){
  /* al mòbil, la de la portada comença just sota la primera pantalla, al costat del plànol: a dalt
     hi ha el text, i si la retícula hi fos, seria ella (i no el titular) la pintura més gran (LCP) */
  .reticula--portada{background-image:url('../img/reticula-portada-mobil.svg');background-position:right 0 top 100svh}
  .reticula--contacte{background-image:url('../img/reticula-contacte-mobil.svg')}
}

/* --- Portada -------------------------------------------------------------- */
.portada{min-height:min(100svh,62rem);display:flex;flex-direction:column;padding:calc(var(--cap-h) + clamp(2.5rem,5vw,4rem)) 0 0}
.portada>.wrap{flex:1}
.portada .eti{margin-bottom:1.5rem}
.portada__titol{color:var(--tinta)}
@media (min-width:1024px){.portada__titol .linia>span{white-space:nowrap}}
.portada__titol .linia{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.portada__titol .linia>span{display:block}
.portada__graella{display:grid;gap:clamp(2rem,4vw,3.5rem);margin-top:clamp(2rem,4vw,3rem);align-items:start}
@media (min-width:1024px){.portada__graella{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.portada__sub{font-size:clamp(1.125rem,1rem + .5vw,1.3125rem);line-height:1.5;color:var(--tinta-2);max-width:30rem;padding-top:.25rem}
.portada__accio{margin-top:2rem;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
/* Tres compromisos de «Les vostres dades», abans de baixar */
.portada__confianca{display:grid;gap:.45rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--linia);
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.03em;line-height:1.4;color:var(--tinta-2)}
.portada__confianca li{display:flex;align-items:center;gap:.6rem}
.portada__confianca li::before{content:"";flex:none;width:.4rem;height:.4rem;background:var(--ok)}

/* El plànol: sense caixa, amb marques de tall i lectures al marge */
.planol{position:relative;margin:0;padding:3.9rem 1.6rem 0}
.planol__canto{position:absolute;width:14px;height:14px;border:0 solid var(--linia-2)}
.planol__canto.tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.planol__canto.tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.planol__canto.bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.planol__canto.br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}
.hud{position:absolute;margin:0;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);white-space:nowrap}
.hud--tl{top:.75rem;left:1.5rem}
.hud--tr{top:.75rem;right:1.5rem;color:var(--accent-text)}
.hud--bl{bottom:.5rem;left:0}
.hud--br{bottom:.5rem;right:0;color:var(--accent-text)}
/* El registre del sistema: tres línies visibles, les noves empenyen */
/* sense majúscules: «ISO 2768-mK» (m lineal, K geomètrica) no pot passar a «2768-MK» */
.registre{top:.8rem;right:1.5rem;height:48px;overflow:hidden;text-transform:none;letter-spacing:.03em;color:var(--tinta-3)}
.registre__linies{transform:translateY(-32px)}
.registre li{height:16px;line-height:16px;white-space:nowrap}
.registre .r5{color:var(--accent-text)}
.registre .r5::after{content:"";display:inline-block;width:.55em;height:.95em;margin-left:.4em;background:currentColor;vertical-align:-.12em}
/* El cajetín: les dades del plànol en cel·les, i les coordenades del punter */
.cajeti-hud{display:flex;border:1px solid var(--linia-2);text-transform:uppercase}
.cajeti-hud>span{padding:.3rem .55rem;border-right:1px solid var(--linia)}
.cajeti-hud>span:last-child{border-right:0}
.cajeti-hud__coords{color:var(--accent-text);font-variant-numeric:tabular-nums;min-width:12ch}
@media (max-width:1180px){.cajeti-hud>span:nth-child(2),.cajeti-hud>span:nth-child(4){display:none}}
.planol__dibuix{position:relative;padding-bottom:2rem}
@media (max-width:640px){.hud--tl,.hud--bl,.registre{display:none}.planol{padding:2rem .5rem 0}}
/* Portàtils baixos (1080p al 125–150 %): el plànol puja perquè la revisió trobada (4) i la
   fila de confiança entrin al primer pantallazo. El H1 no es toca. (Després de .planol, perquè guanyi.) */
@media (min-width:1024px) and (max-height:760px){
  .portada{padding-top:calc(var(--cap-h) + 2rem)}
  .portada .eti{margin-bottom:1rem}
  .portada__graella{margin-top:1.5rem}
  .planol{padding-top:2.75rem}
  .portada__sub{font-size:1.1875rem;line-height:1.45}   /* el castellà, més llarg: 4 línies i no 5 */
  .portada__accio{margin-top:1.5rem;gap:.6rem}
  .portada__confianca{margin-top:1.1rem;padding-top:.8rem;gap:.35rem}
}
/* Encara més baixos (1280 × 610): el subtítol de quatre línies, més just, i menys aire
   entre blocs; així els tres compromisos també hi caben. El registre no es toca: el padding
   de dalt del plànol és el que li deixa lloc sobre el full. */
@media (min-width:1024px) and (max-height:640px){
  .portada{padding-top:calc(var(--cap-h) + 1.25rem)}
  .portada .eti{margin-bottom:.75rem}
  .portada__graella{margin-top:1.1rem}
  .portada__sub{line-height:1.42}
  .portada__accio{margin-top:1.25rem}
  .portada__accio .boto--gran{min-height:3.25rem}
}

/* --- El plànol de la portada (el genera tools/planol.py) ----------------------
   El plànol d'exemple de la brida BR-2210 rev. C tal com arriba adjunt a la
   petició: un PDF escanejat, una mica tort. Línia clara sobre l'escenari fosc;
   la jerarquia la donen els gruixos, com en un plànol de veritat: contorn
   gruixut, cotes i eixos fins, ratllat tènue. El magenta és només la capa del
   sistema (globus, mira, etiqueta) i la revisió que troba (la C, la mateixa del correu).
   Els colors són tokens: a l'escenari fosc són clars i, en imprimir, tinta. */
.despiece{width:100%;height:auto;overflow:visible}
.despiece .pl-paper{fill:var(--fons-2);stroke:var(--linia);stroke-width:.6}   /* opac: la retícula no es veu a través del full */
.despiece .pl-marc{fill:none;stroke:var(--tinta-2);stroke-width:.9}
.despiece .pl-zona,.despiece .pl-centratge{stroke-width:.6}
.despiece .pl-taula{fill:none;stroke:var(--tinta-3);stroke-width:.5}
.despiece .pl-taula--g{stroke:var(--tinta-2);stroke-width:.9}
.despiece .pl-c{fill:none;stroke:var(--tinta);stroke-width:1.15;stroke-linejoin:round}   /* contorn vist */
.despiece .pl-c--fi{stroke-width:.6}
.despiece .pl-tall{stroke:var(--tinta);stroke-width:1.6}                                 /* el pla de tall A-A */
.despiece .pl-iso{fill:none;stroke:var(--tinta-2);stroke-width:.75;stroke-linejoin:round}
.despiece .pl-iso--fi{stroke-width:.5}
.despiece .pl-eix{fill:none;stroke:var(--tinta-3);stroke-width:.45;stroke-dasharray:10 2.4 1.6 2.4}  /* traç i punt */
.despiece .pl-eix--petit{stroke-dasharray:4 1.4 1 1.4}
.despiece .pl-r{stroke:var(--tinta-3);stroke-width:.4;opacity:.85}                      /* ratllat de la secció */
.despiece .pl-f{fill:none;stroke:var(--tinta-2);stroke-width:.45}                        /* cotes, línies de referència */
.despiece .pl-fl{fill:var(--tinta-2)}                                                    /* puntes de cota */
/* La lletra del plànol: inclinada, com la ISO 3098 dels plànols de taller */
.despiece .pl-t{font-family:var(--sans);font-style:italic;fill:var(--tinta-2)}
.despiece .pl-t--z{font-size:5px;font-style:normal;fill:var(--tinta-3)}                  /* zones del marc */
.despiece .pl-t--e{font-size:4.2px;fill:var(--tinta-3)}                                  /* nom del camp */
.despiece .pl-t--n{font-size:5.2px}                                                      /* notes i taula */
.despiece .pl-t--c{font-size:7.2px;fill:var(--tinta)}                                    /* xifres de cota */
.despiece .pl-t--a{font-size:8px;font-weight:600}
.despiece .pl-t--s{font-size:6.4px;font-weight:600;letter-spacing:.08em}
.despiece .pl-t--r{font-size:5.6px}
.despiece .pl-t--v{font-size:7.2px;fill:var(--tinta)}                                    /* valor del caixetí */
.despiece .pl-t--p{font-size:6.2px}
.despiece .pl-t--b{font-size:7.4px}
.despiece .pl-t--g{font-size:11.5px;font-weight:600;font-style:normal;fill:var(--tinta)}
.despiece .pl-t--nt{letter-spacing:.1em}
.despiece .pl-taca{fill:var(--tinta);opacity:.7}                                         /* l'escaneig, sobre el pes */
/* Les dades que el sistema n'ha tret: la caixa de lectura, fina */
.despiece .pos__caixa{fill:none;stroke:var(--accent-text);stroke-width:.55;opacity:.7}
.despiece .pos-5 .pos__caixa{stroke-dasharray:1.6 1.2}
/* La revisió trobada (la C de la taula de revisions): l'única lletra magenta del full */
.despiece .pos-4 .pl-t{fill:var(--accent-text);font-weight:600}
.despiece .pos,.despiece .balloon{cursor:pointer}
.despiece .pl-fons,.despiece .pos{transition:opacity .25s var(--e-out)}

/* Els globus: la capa del sistema, recta damunt del full girat */
.despiece .leader{stroke:var(--accent-linia);stroke-width:.8;stroke-dasharray:1;stroke-dashoffset:0}
.despiece .dot{fill:var(--accent-text)}
.despiece .ring{fill:var(--fons);stroke:var(--accent-text);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:0;transition:fill .2s var(--e-out)}
.despiece .balloon text{font-family:var(--mono);font-size:11px;fill:var(--accent-text);text-anchor:middle;transition:fill .2s var(--e-out)}
/* el 5, el pes: el sistema no l'ha pogut llegir bé. Discontinu i amb «?», sense cap altre color */
.despiece .balloon[data-pos="5"] .ring{stroke-dasharray:.035 .025}
.despiece .balloon[data-pos="5"] .leader{stroke-dasharray:.08 .06}
.despiece .balloon .dubte{font-size:9px;font-weight:600;text-anchor:start}
.escaneig{color:var(--accent-text)}
.feix{opacity:0}
.feix__linia{fill:var(--accent-linia)}
.mira path{fill:none;stroke:var(--accent-linia);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
.etiqueta-peca rect{fill:var(--accent)}
.etiqueta-peca text{fill:#fff;font-size:8.6px;font-weight:600;letter-spacing:.02em;text-anchor:middle}
/* El pols de la dada trobada: l'única cosa que continua viva */
.despiece .pols{fill:none;stroke:var(--accent-text);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}

/* Mòbil: fora el detall que no es llegeix (zones, noms dels camps, taula de revisions);
   els globus, l'etiqueta i la revisió trobada, més grans */
@media (max-width:640px){
  /* visibility i no display:none: amb display:none dins d'aquesta media query, Chrome deixa de
     pintar els .pl-fi a l'escriptori quan acaba l'animació «apareix» de la primera visita */
  .despiece .pl-fi{visibility:hidden}
  .despiece .balloon__cap{transform-box:fill-box;transform-origin:center;scale:1.45}
  .despiece .balloon .dubte{translate:4px -1px;font-size:12px}
  .etiqueta-peca{transform-box:fill-box;transform-origin:0 0;scale:1.4}
  .despiece .pos-4 .pl-t{font-size:9.6px}
  .despiece .pl-t--g{font-size:13px}
  .despiece .pos .pl-t--v{font-size:8.4px}
}

/* La fitxa de la dada: surt al costat del globus, des del globus */
.fitxa-peca{position:absolute;z-index:3;left:0;top:0;display:grid;gap:.15rem;min-width:13rem;padding:.75rem .9rem .8rem;
  background:var(--fons);border:1px solid var(--linia-2);box-shadow:0 20px 40px -18px rgba(14,17,22,.35);pointer-events:none;
  transform:translate(var(--fx,0px),var(--fy,0px));transform-origin:top left;scale:.96;opacity:0;visibility:hidden;
  transition:opacity .16s var(--e-out),scale .16s var(--e-out),visibility 0s linear .16s}
.fitxa-peca.visible{opacity:1;scale:1;visibility:visible;transition:opacity .16s var(--e-out),scale .16s var(--e-out),visibility 0s}
.fitxa-peca__pos,.fitxa-peca__ref,.fitxa-peca__ex{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em}
.fitxa-peca__pos{color:var(--accent-text);text-transform:uppercase}
.fitxa-peca__pos b{font-weight:400}
.fitxa-peca strong{font-size:1rem;font-weight:600;color:var(--tinta)}
.fitxa-peca__ref{color:var(--tinta-2);font-size:.8125rem}
.fitxa-peca__ex{margin-top:.35rem;color:var(--tinta-3);text-transform:uppercase}
@media (max-width:640px){.fitxa-peca{display:none}}

/* Ressaltar una dada (llegenda o globus): el full s'apaga i la dada queda encesa */
.planol[data-actiu] .pl-fons{opacity:.35}
.planol[data-actiu] .pos{opacity:.35}
.planol[data-actiu="1"] .pos-1,.planol[data-actiu="2"] .pos-2,.planol[data-actiu="3"] .pos-3,
.planol[data-actiu="4"] .pos-4,.planol[data-actiu="5"] .pos-5{opacity:1}
.planol[data-actiu="1"] .pos-1 .pl-t,.planol[data-actiu="2"] .pos-2 .pl-t,.planol[data-actiu="3"] .pos-3 .pl-t,
.planol[data-actiu="5"] .pos-5 .pl-t{fill:var(--accent-text)}
.planol[data-actiu="1"] .pos-1 .pos__caixa,.planol[data-actiu="2"] .pos-2 .pos__caixa,.planol[data-actiu="3"] .pos-3 .pos__caixa,
.planol[data-actiu="4"] .pos-4 .pos__caixa,.planol[data-actiu="5"] .pos-5 .pos__caixa{opacity:1;stroke-width:.9}
.planol[data-actiu="1"] .balloon[data-pos="1"] .ring,.planol[data-actiu="2"] .balloon[data-pos="2"] .ring,
.planol[data-actiu="3"] .balloon[data-pos="3"] .ring,.planol[data-actiu="4"] .balloon[data-pos="4"] .ring,
.planol[data-actiu="5"] .balloon[data-pos="5"] .ring{fill:var(--accent)}
.planol[data-actiu="1"] .balloon[data-pos="1"] text,.planol[data-actiu="2"] .balloon[data-pos="2"] text,
.planol[data-actiu="3"] .balloon[data-pos="3"] text,.planol[data-actiu="4"] .balloon[data-pos="4"] text,
.planol[data-actiu="5"] .balloon[data-pos="5"] text:not(.dubte){fill:#fff}
.planol[data-actiu]:not([data-actiu="4"]) .escaneig{opacity:0;transition:opacity .2s}

.llegenda{display:flex;flex-wrap:wrap;border-top:1px solid var(--linia)}
.llegenda li{flex:1 1 auto}
.llegenda button{display:flex;align-items:baseline;gap:.5rem;width:100%;padding:.75rem .9rem;text-align:left;font-size:.875rem;line-height:1.3;color:var(--tinta-2);
  border-right:1px solid var(--linia);transition:background-color .2s var(--e-out),color .2s var(--e-out)}
.llegenda li:last-child button{border-right:0}
.llegenda .n{font-family:var(--mono);font-size:.75rem;color:var(--accent-text)}
.llegenda button[aria-pressed="true"]{background:var(--accent-suau);color:var(--tinta)}
@media (hover:hover) and (pointer:fine){.llegenda button:hover{background:var(--accent-suau);color:var(--tinta)}}
@media (max-width:640px){.llegenda li{flex:1 1 50%}.llegenda button{border-bottom:1px solid var(--linia)}}
/* El valor llegit: a l'escriptori el diu la fitxa (i el lector, aquí); al mòbil, on no hi ha
   fitxa, es veu sota el nom */
.llegenda__val{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:640px){
  .llegenda button{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.5rem;row-gap:.15rem;align-items:baseline}
  .llegenda__val{position:static;width:auto;height:auto;overflow:visible;clip-path:none;white-space:normal;grid-column:2;
    font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;line-height:1.35;color:var(--tinta-2)}
  .llegenda li:last-child .llegenda__val{color:var(--accent-text)}   /* el pes, per confirmar */
}

/* La coreografia d'entrada (≈3 s), una sola vegada per sessió: qui torna a la portada
   (html.ja-vist, ho posa abans.js) la veu ja feta. Sense JS es veu sencera cada vegada;
   amb moviment reduït no n'hi ha cap: el plànol surt quiet i acabat.
     0,1–1,1 s  el plànol es traça: marc i caixetí, vistes, cotes; després ratllat i textos
     1,15–2,05  el feix el llegeix d'esquerra a dreta
     1,95–2,6   surten els globus en ordre: 1 material, 2 tolerància, 3 tractament,
                4 la revisió C (mira a 2,45 i etiqueta a 2,6), 5 el pes amb «?»
     2,3        la llegenda de sota, quan ja hi ha globus als quals es refereix
     3,0        dos polsos al 4 i para */
@media (prefers-reduced-motion:no-preference){
  html:not(.ja-vist) .portada__titol .linia>span{animation:puja-linia .9s var(--e-expo) both}
  html:not(.ja-vist) .portada__titol .l2{animation-delay:.07s}
  html:not(.ja-vist) .revela-carrega{animation:puja .7s var(--e-out) .25s both}
  html:not(.ja-vist) .revela-carrega.r2{animation-delay:.35s}
  html:not(.ja-vist) .portada .hud,html:not(.ja-vist) .planol__canto{animation:apareix .6s var(--e-out) .4s both}
  html:not(.ja-vist) .planol .llegenda{animation:apareix .4s var(--e-out) 2.3s both}

  /* el traç: cada línia es dibuixa sencera (pathLength="1"), capa per capa */
  html:not(.ja-vist) .despiece .pl-paper{animation:apareix .5s var(--e-out) .05s both}
  html:not(.ja-vist) .despiece :is(.pl-marc,.pl-taula),
  html:not(.ja-vist) .despiece :is(.pl-c,.pl-tall,.pl-iso),
  html:not(.ja-vist) .despiece .pl-f{stroke-dasharray:1;stroke-dashoffset:1;animation:traca .7s var(--e-io) .1s forwards}
  html:not(.ja-vist) .despiece :is(.pl-c,.pl-tall,.pl-iso){animation-duration:.8s;animation-delay:.3s}
  html:not(.ja-vist) .despiece .pl-f{animation-duration:.5s;animation-delay:.6s}
  /* el que no es traça (traç i punt, ratllat, puntes, text) apareix al seu torn */
  html:not(.ja-vist) .despiece .pl-eix{animation:apareix .5s var(--e-out) .45s both}
  html:not(.ja-vist) .despiece .pl-r{animation:apareix .5s var(--e-out) .75s both}
  html:not(.ja-vist) .despiece .pl-fl{animation:apareix .3s var(--e-out) .95s both}
  html:not(.ja-vist) .despiece :is(.pl-t,.pl-taca){animation:apareix .4s var(--e-out) .85s both}
  /* els símbols petits sense traç (diedre, rugositat) entren amb el text */
  html:not(.ja-vist) .despiece :is(.pl-c,.pl-f):not([pathLength]){stroke-dasharray:none;animation:apareix .4s var(--e-out) .85s both}

  /* el feix llegeix el full; després surten els globus, en ordre. El torn de cada globus
     (--torn) el porten el globus i la seva dada; el shorthand l'agafa amb var() */
  html:not(.ja-vist) .feix{animation:escombra .9s var(--e-io) 1.15s forwards}
  .despiece [data-pos="1"]{--torn:1.95s}
  .despiece [data-pos="2"]{--torn:2.1s}
  .despiece [data-pos="3"]{--torn:2.25s}
  .despiece [data-pos="4"]{--torn:2.4s}
  .despiece [data-pos="5"]{--torn:2.6s}
  html:not(.ja-vist) .despiece .balloon:not([data-pos="5"]) .leader{stroke-dashoffset:1;animation:traca .35s var(--e-expo) var(--torn) forwards}
  /* l'anella es traça i el seu fons (que tapa el full) no hi és fins que li toca */
  html:not(.ja-vist) .despiece .balloon:not([data-pos="5"]) .ring{stroke-dashoffset:1;
    animation:traca .35s var(--e-expo) var(--torn) forwards,apareix .12s linear var(--torn) both}
  html:not(.ja-vist) .despiece .balloon .dot,html:not(.ja-vist) .despiece .balloon text,
  html:not(.ja-vist) .despiece .balloon[data-pos="5"] :is(.leader,.ring){opacity:0;animation:apareix .25s var(--e-out) var(--torn) forwards}
  html:not(.ja-vist) .despiece .balloon .dubte{animation-delay:2.8s}
  html:not(.ja-vist) .despiece .pos__caixa{opacity:0;animation:llegeix .6s var(--e-out) var(--torn) forwards}

  /* la revisió C: surt amb la resta del text i es torna magenta quan la mira la troba */
  html:not(.ja-vist) .despiece .pos-4 .pl-t{fill:var(--tinta);font-weight:400;animation:apareix .4s var(--e-out) .85s both,marca-text .35s var(--e-out) 2.45s forwards}
  html:not(.ja-vist) .mira path{stroke-dashoffset:1;animation:traca .3s var(--e-expo) 2.45s forwards}
  html:not(.ja-vist) .etiqueta-peca{opacity:0;animation:apareix .25s var(--e-out) 2.6s forwards}

  /* el registre: una línia per cada cosa que llegeix, al ritme dels globus */
  html:not(.ja-vist) .registre li{opacity:0;animation:apareix .2s var(--e-out) forwards}
  html:not(.ja-vist) .registre .r1{animation-delay:1.15s}
  html:not(.ja-vist) .registre .r2{animation-delay:1.95s}
  html:not(.ja-vist) .registre .r3{animation-delay:2.1s}
  html:not(.ja-vist) .registre .r4{animation-delay:2.6s}
  html:not(.ja-vist) .registre .r5{animation-delay:2.9s}
  html:not(.ja-vist) .registre__linies{transform:none;animation:registre-puja 1.8s linear 1.15s forwards}

  /* viu: el pols de la dada trobada i el cursor del registre (parats fora de pantalla) */
  .despiece .balloon .pols{animation:pols 2.4s var(--e-out) 3s 2}            /* dos polsos i para */
  html.ja-vist .despiece .balloon .pols{animation-delay:.4s}
  .registre .r5::after{animation:parpelleja 1s steps(1) 3s 4}       /* quatre segons */
  .portada.fora .pols,.portada.fora .registre .r5::after{animation-play-state:paused}
}
@keyframes registre-puja{0%,78%{transform:translateY(0)}81%,94%{transform:translateY(-16px)}97%,100%{transform:translateY(-32px)}}
@keyframes pols{from{opacity:.65;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}
@keyframes parpelleja{50%{opacity:0}}
@keyframes llegeix{0%{opacity:0}40%{opacity:1}100%{opacity:.7}}
@keyframes marca-text{to{fill:var(--accent-text);font-weight:600}}
/* Profunditat en sortir: el plànol puja més a poc a poc que el text. Es mou la figura sencera
   (full, HUD i llegenda junts): si només es mogués el dibuix, el caixetí del HUD trepitjaria
   la llegenda. Per sota hi ha la cinta, a més de 28 px (el marge de dalt de .ticker). */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference) and (min-width:1024px){
    .planol{animation:deriva-planol linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  }
}
@keyframes deriva-planol{to{transform:translateY(28px)}}
@keyframes puja-linia{from{transform:translateY(105%)}}
@keyframes puja{from{opacity:0;transform:translateY(18px)}}
@keyframes apareix{from{opacity:0}to{opacity:1}}
@keyframes traca{to{stroke-dashoffset:0}}
@keyframes escombra{0%{opacity:0;transform:translateX(8px)}8%{opacity:1}90%{opacity:1;transform:translateX(552px)}100%{opacity:0;transform:translateX(552px)}}
@keyframes omple-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes omple-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Les peticions que entren, en diversos idiomes */
.ticker{position:relative;display:flex;align-items:stretch;height:3.75rem;margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--linia);border-bottom:1px solid var(--linia)}
.ticker__eti{flex:none;display:flex;align-items:center;margin:0;padding-inline:max(var(--gutter),calc((100vw - var(--wrap))/2)) 1.25rem;border-right:1px solid var(--linia);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);white-space:nowrap}
.ticker__finestra{flex:1;display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 92%,transparent)}
.ticker__pista{flex:none;display:flex;align-items:center;gap:3.5rem;padding-inline:1.75rem;white-space:nowrap}
.ticker__pista li{display:flex;align-items:baseline;gap:.9rem}
.ticker__cita{font-size:.9375rem;color:var(--tinta-2)}
.ticker__meta{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;color:var(--accent-text)}
/* Velocitat constant (~40 px/s): la durada la calcula el JS segons la llargada.
   Es para amb el botó, amb el ratoli a sobre, amb el focus i fora de pantalla. */
@media (prefers-reduced-motion:no-preference){
  .ticker__pista{animation:passa var(--durada-cinta,60s) linear infinite}
  .ticker:focus-within .ticker__pista,.ticker.aturat .ticker__pista{animation-play-state:paused}
}
@keyframes passa{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ticker__finestra{overflow-x:auto}.ticker__pista[aria-hidden]{display:none}.ticker .ticker__pausa{display:none}}
.ticker__pausa{flex:none;display:grid;place-items:center;width:3.75rem;border-right:1px solid var(--linia);color:var(--tinta-3);transition:color .15s var(--e-out)}
.ticker__pausa:focus-visible{outline-offset:-4px}
/* amb moviment reduït la finestra es desplaça a mà: rep el focus (tabindex) i l'anell va a tota la
   cinta, perquè la màscara de les vores el tallaria. Amb moviment, el focus també la para */
.ticker__finestra:focus-visible{outline:0}
.ticker:has(.ticker__finestra:focus-visible){outline:2px solid var(--accent-text);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.ticker__pausa:hover{color:var(--tinta)}}
.ticker__eti-curt{display:none}
@media (max-width:640px){
  .ticker__eti{padding-inline:var(--gutter) .8rem;font-size:.6875rem;color:var(--accent-text)}
  .ticker__eti-llarg{display:none}.ticker__eti-curt{display:inline}
}

/* La icona de pausa i de reproducció (cinta i demostració) */
.icona-pausa{position:relative;display:inline-block;width:.7rem;height:.7rem}
.icona-pausa::before,.icona-pausa::after{content:"";position:absolute;top:0;bottom:0;width:3px;background:currentColor}
.icona-pausa::before{left:1px}.icona-pausa::after{right:1px}
[aria-pressed="true"]>.icona-pausa::before{left:1px;width:0;height:0;background:none;border-style:solid;border-width:5.5px 0 5.5px 9px;border-color:transparent transparent transparent currentColor}
[aria-pressed="true"]>.icona-pausa::after{display:none}

/* --- El vídeo del taller ------------------------------------------------------ */
/* Una banda grisa just després de la portada: a l'esquerra el titular i la transcripció
   plegada; a la dreta, el vídeo (16:9, amb el pòster). Sense reproducció automàtica. */
.video{padding-block:clamp(3.5rem,7vw,6rem)}
.video__graella{display:grid;gap:2rem 4rem;align-items:center}
@media (min-width:1024px){.video__graella{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.video__graella>*{min-width:0}
.video .eti{margin-bottom:1.25rem}
.video__titol{font-size:clamp(1.75rem,1.1rem + 2vw,2.6rem);max-width:18ch}
.video .text{margin-top:1.25rem}
.video__marc{margin:0}
.video__marc video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:#fff;border-radius:12px;
  box-shadow:0 0 0 1px rgba(16,24,40,.07),0 40px 80px -30px rgba(16,24,40,.32),0 12px 30px -16px rgba(16,24,40,.18)}
.video__marc figcaption{margin-top:.75rem}
.transcripcio{margin-top:1.75rem;border-top:1px solid var(--linia)}
.transcripcio summary{display:flex;align-items:center;gap:.6rem;min-height:2.75rem;padding-top:.6rem;cursor:pointer;list-style:none;
  font-size:.9375rem;font-weight:600;color:var(--tinta);transition:color .2s var(--e-out)}
.transcripcio summary::-webkit-details-marker{display:none}
.transcripcio summary::after{content:"";flex:none;width:.6rem;height:.6rem;margin-top:-.2rem;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg);transition:transform .3s var(--e-out)}
.transcripcio[open] summary::after{transform:rotate(-135deg);margin-top:.25rem}
@media (hover:hover) and (pointer:fine){.transcripcio summary:hover{color:var(--accent-text)}}
.transcripcio__text{padding:.5rem 0 .25rem;max-width:36rem;color:var(--tinta-2);font-size:.9688rem;line-height:1.6}

/* --- Un dimarts qualsevol: la petició, les hores i les xifres --------------- */
.gran{display:grid;gap:.5rem 2.5rem;align-items:end;margin-top:clamp(3rem,6vw,5rem);padding-bottom:1.25rem;border-bottom:1px solid var(--tinta)}
@media (min-width:760px){.gran{grid-template-columns:auto minmax(0,1fr)}}
.gran__n{font-family:var(--display);font-size:clamp(6.5rem,2.3rem + 15.5vw,16rem);font-weight:700;letter-spacing:-.065em;line-height:.8;font-variant-numeric:tabular-nums;color:var(--tinta)}
.gran__u{font-size:.32em;letter-spacing:-.03em;color:var(--accent-text)}
.gran__text{font-family:var(--display);font-size:clamp(1.2rem,1rem + 1vw,1.85rem);font-weight:600;letter-spacing:-.025em;line-height:1.15;max-width:15ch;padding-bottom:.35em}

.cronologia{margin-top:clamp(3rem,6vw,4.5rem);position:relative}
.cronologia__passos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--tinta)}
.cronologia__pas{position:relative;padding:1.5rem 1.5rem 0 0}
.cronologia__pas::before{content:"";position:absolute;left:0;top:-7px;width:1px;height:13px;background:var(--tinta)}
.cronologia__hora{display:block;font-family:var(--mono);font-size:.875rem;color:var(--tinta)}
.cronologia__pas p{margin-top:.5rem;font-size:1rem;line-height:1.5;color:var(--tinta-2);max-width:17rem}
.cronologia__pas--final p{color:var(--tinta);font-weight:600}
.cronologia__pas--final .cronologia__hora{color:var(--accent-text)}
.cotes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:.9rem}
.cota{position:relative;height:2.75rem;color:var(--accent-text)}
.cota::before{content:"";position:absolute;left:0;right:0;bottom:.5rem;height:1px;background:currentColor}
.cota::after{content:"";position:absolute;left:0;right:0;bottom:.15rem;height:.75rem;border-left:1px solid currentColor;border-right:1px solid currentColor}
.cota span{position:absolute;left:50%;bottom:.85rem;transform:translateX(-50%);padding:0 .5rem;background:var(--fons);font-family:var(--mono);font-size:1rem;white-space:nowrap}
.cota--1{grid-column:1 / 2}
.cota--2{grid-column:2 / 3}
.cota--total{grid-column:1 / 3;color:var(--tinta)}
.cota--total span{font-size:1.125rem}
.cronologia .peu-nota{margin-top:2rem}
.cronologia__durada{display:none}
@media (max-width:767px){
  .cotes{display:none}
  .cronologia__passos{grid-template-columns:1fr;margin-left:.4rem}
  .cronologia__pas{padding:0 0 1.75rem 1.5rem}
  .cronologia__pas::before{left:-7px;top:.55rem;width:13px;height:1px}
  .cronologia__pas p{max-width:none}
  .cronologia__durada{display:inline-block;margin-left:.6rem;font-family:var(--mono);font-size:.875rem;color:var(--accent-text)}
}

.xifres{margin-top:clamp(5rem,10vw,8rem)}
.xifres__cap{display:grid;gap:1rem 4rem;align-items:end}
@media (min-width:900px){.xifres__cap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.xifres__cap .h3{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.5rem);letter-spacing:-.03em;line-height:1.08}
.xifres__cap p{color:var(--tinta-2);max-width:30rem}
.stats{display:grid;margin-top:2.5rem;border-top:1px solid var(--tinta)}
@media (min-width:600px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Les xifres comencen a la vora del titular a totes les mides: la primera columna sense sagnat */
.stat{padding:1.5rem 1.5rem 1.75rem 0;border-bottom:1px solid var(--linia);display:flex;flex-direction:column}
@media (min-width:600px){.stat{border-right:1px solid var(--linia)}}
@media (min-width:600px) and (max-width:1023px){.stat:nth-child(even){padding-left:1.5rem;border-right:0}}
@media (min-width:1024px){.stat{border-bottom:0}.stat+.stat{padding-left:1.5rem}.stat:last-child{border-right:0}}
.stat__n{font-family:var(--display);font-size:clamp(2.3rem,1.6rem + 2.1vw,3.5rem);font-weight:700;letter-spacing:-.05em;line-height:1;white-space:nowrap}
[data-compta]{display:inline-block;text-align:right}
.stat__pre,.stat__suf{color:var(--accent-text)}
.stat__suf{font-size:.45em;letter-spacing:-.01em}
.stat__text{margin-top:1rem;color:var(--tinta-2);font-size:1rem;line-height:1.5}
.stat__font{margin-top:auto;padding-top:1.25rem;font-family:var(--mono);font-size:.75rem}
.stat__font a{display:inline-block;padding-block:.35rem;color:var(--tinta-3)}
.stat__font a:hover{color:var(--accent-text)}

/* --- Com funciona: el recorregut amb el scroll --------------------------------- */
/* La secció es fixa i el scroll avança els cinc passos (un tram per pas). A
   l'esquerra, el pas i un índex amb el progrés; a la dreta, l'aplicació, que
   canvia de pantalla. Sense secuestrar el scroll: la roda, les tecles i el
   lector de pantalla van com sempre. Sense JS, o en pantalles molt baixes, es
   llegeix de dalt a baix. */
.recorregut{position:relative;margin-top:clamp(2rem,4vw,3rem)}
.recorregut__graella{display:grid;gap:1.25rem 4rem;align-items:center}
@media (min-width:1024px){.recorregut__graella{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.recorregut__text{display:grid;gap:2.25rem;align-content:center;min-width:0}
.recorregut__app{min-width:0;container-type:inline-size}
.funciona__peu{margin-top:clamp(2rem,4vw,3rem)}

/* L'índex dels passos: una línia per pas que s'omple amb el scroll (--p, de 0 a 1) */
.rec-nav ol{display:grid;border-left:1px solid var(--linia)}
.rec-nav li{position:relative}
.rec-nav li:nth-child(1){--j:0}.rec-nav li:nth-child(2){--j:1}.rec-nav li:nth-child(3){--j:2}.rec-nav li:nth-child(4){--j:3}.rec-nav li:nth-child(5){--j:4}
.rec-nav button{display:flex;align-items:baseline;gap:.85rem;width:100%;min-height:2.75rem;padding:.55rem 0 .55rem 1.25rem;text-align:left;
  color:var(--tinta-3);font-size:.9375rem;transition:color .3s var(--e-out)}
.rec-nav__n{font-size:.75rem;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.rec-nav button i{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--accent-linia);transform-origin:top;
  transform:scaleY(clamp(0,calc(var(--p,0) * 5 - var(--j)),1))}
.rec-nav button.fet{color:var(--tinta-2)}
.rec-nav button[aria-current="step"]{color:var(--tinta)}
@media (hover:hover) and (pointer:fine){.rec-nav button:hover{color:var(--tinta)}}
html:not(.js) .rec-nav{display:none}
/* Sense JS, la finestra acompanya el text des del pas 1 (i no queda a mitja columna) */
@media (min-width:1024px){
  html:not(.js) .recorregut__graella{align-items:start}
  html:not(.js) .recorregut__app{position:sticky;top:calc(var(--cap-h) + 1.5rem)}
}

/* Els passos: tots a la mateixa cel·la; només es veu l'actiu. Els altres
   segueixen al DOM (el lector de pantalla els llegeix tots). */
.pas__n{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.pas__h{margin-top:.75rem;font-family:var(--display);font-size:clamp(1.45rem,1rem + 1.45vw,2.15rem);font-weight:650;letter-spacing:-.03em;line-height:1.08;color:var(--tinta);text-wrap:balance}
.pas__p{margin-top:1rem;font-size:clamp(1rem,.95rem + .25vw,1.125rem);line-height:1.55;color:var(--tinta-2);max-width:34rem}
.pas .peu-nota{margin-top:.85rem}
.rec-passos{display:grid;gap:2.5rem}

@media (min-height:560px){
  html.js .recorregut{height:calc(100svh + 4 * var(--tram,112svh))}
  html.js .recorregut__escena{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding-top:var(--cap-h)}
  html.js .recorregut__escena>.wrap{width:min(var(--wrap),100% - 2*var(--gutter))}
  html.js .rec-passos{gap:0}
  html.js .pas{grid-area:1 / 1;opacity:0;transform:translateY(12px);pointer-events:none;
    transition:opacity .3s var(--e-out),transform .45s var(--e-out)}
  html.js .pas.actiu{opacity:1;transform:none;pointer-events:auto;transition:opacity .45s var(--e-out) .1s,transform .6s var(--e-expo) .1s}
}

/* El contingut de la demo fixada no puja mai per sota de la capçalera */
html.js .recorregut__escena{align-items:safe center}
/* L'índex comença a la mateixa altura que la finestra de l'aplicació */
@media (min-width:1024px) and (min-height:560px){html.js .recorregut__graella{align-items:start}}
/* Portàtils baixos (1080p al 125–150 %): índex i pas més compactes */
@media (min-width:1024px) and (max-height:720px){
  html.js .recorregut__text{gap:1.25rem}
  html.js .rec-nav button{min-height:2.25rem;padding-block:.3rem}
  html.js .pas__h{margin-top:.5rem;font-size:clamp(1.35rem,.9rem + 1.2vw,1.85rem)}
  html.js .pas__p{margin-top:.6rem;font-size:1rem;line-height:1.5}
  html.js .pas .peu-nota{margin-top:.6rem}
}
/* Pantalles d'escriptori molt baixes (sense fixar): l'aplicació acompanya el pas */
@media (min-width:1024px) and (max-height:559px){
  html.js .recorregut__graella{align-items:start}
  html.js .recorregut__app{position:sticky;top:calc(var(--cap-h) + 1rem)}
  html.js .pas:not(.actiu){opacity:.45}
}

/* Mòbil i tauleta: l'índex a dalt, l'aplicació al mig, el pas a sota */
@media (max-width:1023px){
  .recorregut__text{display:contents}
  .rec-nav{order:1}.recorregut__app{order:2}.rec-passos{order:3}
  .rec-nav ol{grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;border:0}
  .rec-nav li::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--linia)}
  .rec-nav button{justify-content:center;min-height:2.75rem;padding:.7rem 0 .2rem}
  .rec-nav button i{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;transform-origin:left;
    transform:scaleX(clamp(0,calc(var(--p,0) * 5 - var(--j)),1))}
  .rec-nav__nom{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .pas__h{font-size:clamp(1.3rem,1.05rem + 1.2vw,1.75rem)}
  .pas__p{margin-top:.6rem;font-size:.9688rem}
  /* amb la demo fixada no hi caben: fora de la vista, però el lector les llegeix (sense JS, es veuen) */
  html.js .pas .peu-nota{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:1023px) and (min-height:560px){
  html.js .recorregut{--tram:100svh}
  html.js .recorregut__escena{align-items:stretch;padding-top:calc(var(--cap-h) + .5rem);padding-bottom:max(.75rem,env(safe-area-inset-bottom))}
  html.js .recorregut__graella{display:flex;flex-direction:column;align-items:stretch;gap:.75rem}
  html.js .recorregut__app{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  html.js .recorregut__app .app{flex:1 1 auto;height:auto;min-height:0;max-height:40rem}
}
@media (max-width:1023px) and (max-height:760px){
  .pas__n{font-size:.6875rem}
  .pas__h{margin-top:.35rem;font-size:1.2rem}
  .pas__p{margin-top:.4rem;font-size:.9063rem;line-height:1.45}
}
/* Mòbils baixos: fora la barra de cerca de dins l'app (el títol de la finestra ja diu «Ofertes») */
@media (max-width:1023px) and (max-height:700px){html.js .recorregut .app__barra{display:none}}

/* --- L'aplicació d'exemple: «Ofertes» ------------------------------------------- */
/* L'HTML el genera tools/app_ofertes.py (app_html; la pantalla d'«Ofertes obertes»,
   obertes_html, té el seu bloc més avall). Fora d'aquest bloc, deriva.css encara parla
   de l'aplicació en tres llocs: .recorregut__app .app (alçada en mòbil),
   .recorregut .app__barra (mòbils baixos) i .informe (impressió).

   Una aplicació d'escriptori de veritat: la lletra del sistema del visitant (en un
   Mac, la d'un Mac; a Windows, la de Windows), un blau sobri, radis petits i ombres
   fines. No porta el magenta de Deriva: és el programa del taller.

   Regla del moviment: l'estat per defecte de cada pantalla és el FINAL (enviada,
   escrit, confirmada). Les animacions, només amb .recorregut.viu i sense
   prefers-reduced-motion, hi arriben des de l'estat d'abans (animation-fill-mode:
   both). Així, amb moviment reduït, sense JS o fora de la vista, es veu el final. */
.app,.informe{--a-bg:#fff;--a-bg-2:#f7f7f8;--a-bg-3:#efeff2;--a-line:#e6e6ea;--a-line-2:#d2d2d9;
  --a-text:#17171a;--a-text-2:#4b4b55;--a-text-3:#6b6b76;
  --a-blau:#2f5bea;--a-blau-2:#2448c8;--a-blau-suau:#edf1ff;
  --a-verd:#12743a;--a-verd-suau:#e7f6ec;--a-ambre:#9a4d08;--a-ambre-suau:#fff3e0;
  --a-vermell:#b42318;--a-vermell-suau:#fdecec;--a-paper:#f4f2ec;
  --a-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.app p+p,.informe p+p{margin-top:0}
.app{position:relative;display:flex;flex-direction:column;height:min(34rem,calc(100svh - var(--cap-h) - 5rem));min-height:25rem;
  font-family:var(--a-sans);font-size:13px;line-height:1.45;letter-spacing:0;
  color:var(--a-text);background:var(--a-bg);border-radius:12px;overflow:hidden;text-align:left;color-scheme:light;
  box-shadow:0 0 0 1px rgba(16,24,40,.07),0 40px 80px -30px rgba(16,24,40,.32),0 12px 30px -16px rgba(16,24,40,.18)}
.app b{font-weight:600}
.a-ico{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* el plànol escanejat es dibuixa un sol cop (symbol); la miniatura i els retalls en són finestres */
.a-defs{position:absolute;width:0;height:0;overflow:hidden}

/* La finestra: títol amb semàfor, barra lateral i barra superior */
.app__titol{flex:none;display:flex;align-items:center;gap:12px;height:38px;padding:0 14px;background:linear-gradient(#f7f7f8,#efeff1);border-bottom:1px solid var(--a-line)}
.app__semafor{display:flex;gap:8px}
.app__semafor i{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.14)}
.app__semafor i:nth-child(2){background:#febc2e}.app__semafor i:nth-child(3){background:#28c840}
.app__nom{flex:1;text-align:center;font-size:12.5px;font-weight:600;color:var(--a-text-2)}
.app__ex{flex:none;padding:1px 8px;border:1px solid var(--a-line-2);border-radius:999px;background:#fff;font-size:12px;color:var(--a-text-3);white-space:nowrap}

.app__cos{flex:1;min-height:0;display:grid;grid-template-columns:190px minmax(0,1fr)}
.app__lateral{display:flex;flex-direction:column;gap:14px;min-width:0;padding:12px 10px;background:var(--a-bg-2);border-right:1px solid var(--a-line)}
.app__org{display:flex;align-items:center;gap:9px;padding:2px 6px;min-width:0}
.app__org>span:last-child{min-width:0}
.app__logo{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--a-blau,#2f5bea);color:#fff;
  font-family:var(--a-sans,system-ui,sans-serif);font-size:13px;font-weight:700;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.app__org b,.app__usuari b{display:block;font-size:13px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app__org small,.app__usuari small{display:block;font-size:12px;line-height:1.3;color:var(--a-text-3)}
/* La navegació: la píndola baixa d'una entrada a l'altra amb --v (el posa deriva.js, bloc 7) */
.app__nav{position:relative;display:grid;gap:2px}
.app__nav::before{content:"";position:absolute;left:0;right:0;top:0;height:30px;border-radius:7px;background:#fff;
  box-shadow:0 0 0 1px var(--a-line),0 1px 2px rgba(16,24,40,.06);transform:translateY(calc(var(--v,0) * 32px));transition:transform .5s var(--e-expo)}
.app__nav li{position:relative;display:flex;align-items:center;gap:9px;height:30px;padding:0 8px;border-radius:7px;color:var(--a-text-2);white-space:nowrap;transition:color .25s var(--e-out)}
.app__nav li span{overflow:hidden;text-overflow:ellipsis}
.app[data-vista="0"] .app__nav [data-v="0"],.app[data-vista="1"] .app__nav [data-v="1"],.app[data-vista="2"] .app__nav [data-v="2"],
.app[data-vista="3"] .app__nav [data-v="3"],.app[data-vista="4"] .app__nav [data-v="4"]{color:var(--a-text);font-weight:600}
/* Els comptadors diuen la veritat de cada moment: Safata, 1 petició nova fins que
   s'obre (pas 1); Ofertes, 1 esborrany per aprovar des que hi ha preu (final del
   pas 3) fins al clic (pas 4); Seguiment, 1 resultat per confirmar al pas 5. */
.app__nav em{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--a-blau);color:#fff;
  font-style:normal;font-size:11px;font-weight:650;line-height:18px;text-align:center;font-variant-numeric:tabular-nums;
  opacity:0;transform:scale(.6);transition:opacity .2s var(--e-out),transform .3s var(--e-expo)}
.app[data-vista="0"] .app__nav [data-v="0"] em,.app[data-vista="2"] .app__nav [data-v="3"] em{opacity:1;transform:none}
.app__usuari{display:flex;align-items:center;gap:9px;margin-top:auto;padding:8px 6px 2px;border-top:1px solid var(--a-line)}

.app__main{display:flex;flex-direction:column;min-width:0;min-height:0}
.app__barra{flex:none;display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;border-bottom:1px solid var(--a-line)}
.app__menu,.app__marca-mobil{display:none}
.app__cerca{flex:1;max-width:330px;display:flex;align-items:center;gap:8px;height:30px;padding:0 10px;overflow:hidden;
  border:1px solid var(--a-line);border-radius:7px;background:var(--a-bg-2);color:var(--a-text-3);font-size:12.5px;white-space:nowrap}
.app__cerca span{overflow:hidden;text-overflow:ellipsis}
.app__campana{position:relative;display:grid;margin-left:auto;color:var(--a-text-2)}
.app__campana i{position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 2px #fff}

/* Peces comunes: avatars, píndoles i botons */
.a-av{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e6e8ee;color:#3f3f46;font-size:11px;font-weight:600;letter-spacing:.02em}
.a-av--petit{width:24px;height:24px;font-size:10.5px}
.a-av--blau{background:#dfe6ff;color:#2442b8}.a-av--ambre{background:#fdeccf;color:#86470a}.a-av--verd{background:#d9f3e2;color:#14622f}
.a-av--gris{background:#ececf0;color:#5b5b66}
.a-pill{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.a-pill .a-ico{width:13px;height:13px;stroke-width:2}
.a-pill--blau{background:var(--a-blau-suau);color:var(--a-blau-2)}
.a-pill--verd{background:var(--a-verd-suau);color:var(--a-verd)}
.a-pill--ambre{background:var(--a-ambre-suau);color:var(--a-ambre)}
.a-pill--vermell{background:var(--a-vermell-suau);color:var(--a-vermell)}
.a-pill--gris{background:var(--a-bg-3);color:var(--a-text-2)}
.a-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--a-line-2);border-radius:8px;
  background:#fff;font-size:12.5px;font-weight:600;color:var(--a-text);white-space:nowrap;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.a-btn--pri{background:var(--a-blau);border-color:var(--a-blau-2);color:#fff;box-shadow:0 1px 2px rgba(36,72,200,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.a-btn--petit{height:24px;padding:0 9px;font-size:12px;border-radius:7px}
.a-btn .a-ico{width:14px;height:14px}
/* Dos estats al mateix lloc (abans i després d'un clic): es veu el segon */
.a-estat,.a-canvi{display:grid}
.a-estat>*,.a-canvi>*{grid-area:1 / 1}
.a-estat>*{justify-self:end}
.a-estat__a,.a-canvi__a{opacity:0}

/* Les cinc pantalles: totes al mateix lloc; només es veu la del pas actiu */
/* La pantalla de l'app és un contenidor d'alçada: el que hi cap no depèn de la
   finestra del navegador sinó del lloc que li deixen el pas i l'índex (que canvien
   amb l'idioma i el text). Les mides d'amplada es pregunten a .recorregut__app («app»). */
.recorregut__app{container-name:app}
/* content-visibility: les cinc pantalles no es maqueten fins que la demo és a prop de la vista. En carregar,
   la portada en surt el doble de lleugera (Layout, mòbil amb CPU ×4: ~1300 → ~750 ms). La mida no canvia:
   ja la fixa el contenidor (size), no el contingut. */
.app__vistes{position:relative;flex:1;min-height:0;container:vistes / size;content-visibility:auto}
.a-vista{position:absolute;inset:0;overflow:hidden;padding:16px 18px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s var(--e-out),transform .35s var(--e-out),visibility 0s linear .25s}
.app[data-vista="0"] .a-vista--0,.app[data-vista="1"] .a-vista--1,.app[data-vista="2"] .a-vista--2,
.app[data-vista="3"] .a-vista--3,.app[data-vista="4"] .a-vista--4{opacity:1;visibility:visible;transform:none;
  transition:opacity .4s var(--e-out) .06s,transform .55s var(--e-expo) .06s,visibility 0s}
.a-cap{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.a-cap>div{min-width:0}
.a-titol{font-size:15px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.a-sub{margin-top:1px;font-size:12.5px;color:var(--a-text-3)}

/* 1 · Entra: la safata, amb les pestanyes de sempre i el correu obert */
.a-vista--0{padding:0;display:flex;flex-direction:column}
.a-pestanyes{flex:none;display:flex;gap:2px;padding:0 8px;border-bottom:1px solid var(--a-line)}
.a-pestanyes span{position:relative;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 10px;font-size:12.5px;font-weight:500;color:var(--a-text-3);white-space:nowrap}
.a-pestanyes .si{color:var(--a-text);font-weight:600}
.a-pestanyes .si::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;border-radius:2px;background:var(--a-blau)}
.a-pestanyes em{min-width:18px;padding:0 6px;border-radius:999px;background:var(--a-bg-3);font-style:normal;font-size:11px;font-weight:600;line-height:17px;text-align:center;color:var(--a-text-2)}
.a-pestanyes .si em{background:var(--a-blau-suau);color:var(--a-blau-2)}
.a-safata{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);grid-template-rows:minmax(0,1fr)}
.a-safata__llista{min-width:0;min-height:0;overflow:hidden;border-right:1px solid var(--a-line)}
.a-it{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;padding:11px 14px;border-bottom:1px solid var(--a-line);background:#fff}
.a-it--nou{background:var(--a-blau-suau);box-shadow:inset 2px 0 0 var(--a-blau)}
.a-it--nou .a-pill--blau{background:var(--a-blau);color:#fff}
.a-it__cos{min-width:0}
.a-it__l1{display:flex;align-items:center;gap:6px}
.a-it__l1 b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-it__l1 time{margin-left:auto;padding-left:6px;font-size:12px;color:var(--a-text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.a-it__l2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--a-text-2)}
.a-it__l2>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-it__l3{display:flex;align-items:center;gap:4px;margin-top:1px;font-size:12px;color:var(--a-text-3)}
.a-it__l3 .a-ico{width:12px;height:12px}
.a-it__l3 span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* el que no és una petició no entra a la feina, però queda registrat: apagat */
.a-it--fora .a-it__l1 b,.a-it--fora .a-it__l2>span:first-child{font-weight:500;color:var(--a-text-3)}
.a-it--fora .a-av{opacity:.7}
.a-it__mobil{display:none}
.a-lector{min-width:0;min-height:0;display:flex;flex-direction:column;padding:14px 16px;overflow:hidden}
.a-lector__assumpte{font-size:14.5px;font-weight:650;letter-spacing:-.01em;line-height:1.3}
.a-lector__de{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"av nom quan" "av adr adr";column-gap:10px;align-items:center;
  margin-top:10px;padding-bottom:10px;border-bottom:1px solid var(--a-line)}
.a-lector__de .a-av{grid-area:av}
.a-lector__de b{grid-area:nom;min-width:0;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-lector__de time{grid-area:quan;font-size:12px;color:var(--a-text-3);white-space:nowrap}
.a-lector__adreca{grid-area:adr;min-width:0;font-size:12px;color:var(--a-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-lector__xips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.a-lector__cos{margin-top:8px;font-size:12.5px;line-height:1.55}
.a-adjunt{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;max-width:100%;margin-top:12px;padding:5px 12px 5px 5px;border:1px solid var(--a-line);border-radius:10px;background:var(--a-bg-2)}
.a-adjunt>span:last-child{min-width:0}
.a-adjunt__foto{flex:none;display:block;width:60px;height:42px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px var(--a-line-2)}
.a-adjunt__foto svg,.a-it__mini svg{width:100%;height:100%}
.a-adjunt b{display:block;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-adjunt small{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--a-text-3);white-space:nowrap}
.a-adjunt small .a-ico{width:12px;height:12px}
.a-lector__peu{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:12px;color:var(--a-verd)}
.a-lector__peu .a-ico{width:14px;height:14px;stroke-width:2}

/* 2 · Llegeix: la fitxa, cada dada amb la seva prova al costat (el retall del
   plànol o el tros del correu). Verd: comprovat. Groc: dubtós, amb el motiu. */
.a-cap__pill{flex:none}
.a-fitxa{border:1px solid var(--a-line);border-radius:10px;overflow:hidden}
.a-dada{display:grid;grid-template-columns:106px minmax(0,1fr);gap:8px;align-items:center;min-height:34px;padding:4px 8px 4px 12px;border-bottom:1px solid var(--a-line)}
.a-dada:last-child{border-bottom:0}
.a-dada dt{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;color:var(--a-text-3);white-space:nowrap}
.a-dada dt::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#30a46c}
.a-dada--dubte{background:var(--a-ambre-suau)}
.a-dada--dubte dt::before{background:#f5a524}
.a-dada dd{display:flex;align-items:center;gap:10px;min-width:0}
.a-dada__v{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;font-weight:550;font-variant-numeric:tabular-nums}
.a-dada__avis{max-width:100%;height:auto;min-height:22px;padding:2px 7px;font-size:11.5px;line-height:1.3;white-space:normal;border-radius:11px}
.a-ev{flex:none;display:flex;align-items:center;width:148px;height:24px;border-radius:5px;overflow:hidden}
.a-ev--planol{justify-content:center;background:var(--a-paper);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.a-ev--planol svg{flex:none;width:112px;height:100%}       /* 4,6 : 1, com el viewBox: el retall no es deforma */
.a-ev--borros svg{filter:blur(.45px)}
.a-ev--correu{gap:5px;padding:0 8px;background:var(--a-bg-2);box-shadow:inset 0 0 0 1px var(--a-line);font-size:11.5px;color:var(--a-text-2)}
.a-ev--correu .a-ico{width:12px;height:12px;color:var(--a-text-3)}
.a-ev--correu span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 3 · Peces semblants: les tres més properes del seu històric, i el preu, buit,
   que hi posa una persona. Ofertes no calcula cap preu. */
.a-peces__cap{display:grid;grid-template-columns:minmax(0,1fr) 128px 76px 116px;column-gap:10px;padding:0 13px 5px;font-size:11.5px;color:var(--a-text-3);white-space:nowrap}
.a-peces__cap span:nth-child(n+2){text-align:right}
.a-peces{display:grid;gap:6px}
.a-peca{display:grid;grid-template-columns:minmax(0,1fr) 128px 76px 116px;grid-template-areas:"ref preu h res" "perque perque perque perque";
  align-items:center;column-gap:10px;padding:7px 12px 8px;border:1px solid var(--a-line);border-radius:9px}
.a-peca__ref{grid-area:ref;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-peca__ref span{margin-left:8px;font-size:12px;color:var(--a-text-3)}
.a-peca__preu{grid-area:preu;text-align:right;white-space:nowrap}
.a-peca__h{grid-area:h;text-align:right;white-space:nowrap}
.a-peca__preu b,.a-peca__h b{font-variant-numeric:tabular-nums}
.a-peca__preu span{font-size:12px;color:var(--a-text-3)}
.a-peca__h--sense b{font-weight:500;color:var(--a-text-3)}
.a-peca__res{grid-area:res;justify-self:end}
.a-peca__perque{grid-area:perque;margin-top:1px;font-size:12px;color:var(--a-text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-peca__mob{display:none}
.a-preu{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;margin-top:12px;padding:11px 14px 12px;
  border:1px solid var(--a-line-2);border-radius:10px;background:var(--a-bg-2)}
.a-preu__titol{grid-column:1 / 3;display:flex;align-items:center;gap:7px;min-height:30px;font-size:13px;font-weight:650}
.a-preu__titol .a-ico{color:var(--a-blau)}
.a-preu__camps,.a-preu__motiu{display:contents}
.a-preu__q{min-width:2.6em;font-size:12.5px;font-weight:600;color:var(--a-text-2);white-space:nowrap}
.a-preu__camps .a-preu__q:nth-of-type(2){margin-left:6px}
.a-preu__motiu .a-input{grid-column:2 / -1}
.a-preu__peu{grid-row:1;grid-column:3 / -1;display:flex;justify-content:flex-end}   /* l'acció, a dalt a la dreta */
.a-input__u{margin-left:auto;padding-left:6px;font-size:12px;color:var(--a-text-3);white-space:nowrap}
.a-input{position:relative;display:flex;align-items:center;min-width:0;height:30px;padding:0 9px;border:1px solid var(--a-line-2);border-radius:7px;background:#fff;
  overflow:hidden;font-variant-numeric:tabular-nums}
.a-input__ph{position:absolute;left:9px;right:9px;top:50%;transform:translateY(-50%);color:var(--a-text-3);opacity:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a-teclat{flex:none;max-width:100%;overflow:hidden;white-space:nowrap;font-weight:600;border-right:1.5px solid transparent;margin-right:-1.5px}
.a-input--3 .a-teclat{font-weight:500}

/* 4 · Aprova: l'oferta a la seva plantilla, el correu en el mateix fil i el clic */
.a-aprova{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--a-line);border-radius:10px;background:var(--a-bg-2)}
.a-aprova__qui{display:flex;align-items:center;gap:8px;min-width:0;color:var(--a-text-2)}
.a-canvi__b{display:flex;align-items:center;gap:5px}
.a-aprova .a-canvi__b{color:var(--a-verd);font-weight:600}
.a-aprova .a-canvi__b .a-ico{width:14px;height:14px;stroke-width:2}
.a-aprova .a-canvi>*{white-space:nowrap}
.a-aprova__botons{position:relative;display:flex;gap:8px}
.a-aprova__botons .a-btn{opacity:.4}                      /* després del clic: ja no es pot tornar a enviar */
.a-cursor{position:absolute;right:30px;bottom:-12px;z-index:2;width:18px;height:24px;fill:#fff;stroke:#111;stroke-width:1.2;stroke-linejoin:round;opacity:0;pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.a-docs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
.a-pdf{min-width:0;padding:8px 10px 10px;border-radius:10px;background:#e9eaee}
.a-pdf__nom{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:11.5px;color:var(--a-text-2)}
.a-pdf__nom .a-ico{width:13px;height:13px}
.a-pdf__nom span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-full{padding:11px 12px 12px;border-radius:3px;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.14),0 0 0 1px rgba(16,24,40,.05);font-size:10.5px;line-height:1.4;color:#26262b}
.a-full__cap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;align-items:center;padding-bottom:7px;border-bottom:1.5px solid #26262b}
.a-full__logo{display:grid;place-items:center;width:22px;height:22px;border-radius:4px;background:#26262b;color:#fff;font-size:8.5px;font-weight:700}
.a-full__cap b{display:block;font-size:11px;white-space:nowrap}
.a-full__cap span{display:block;font-size:10px;color:#6b6b76}
.a-full__num{text-align:right}
.a-full__per{margin-top:7px;color:#4b4b55}
.a-full__peca{margin-top:2px}
.a-full table{margin-top:7px;font-variant-numeric:tabular-nums}
.a-full th{padding:3px 0;border-bottom:1px solid #d2d2d9;text-align:right;font-size:10px;font-weight:500;color:#6b6b76;white-space:nowrap}
.a-full td{padding:4px 0;border-bottom:1px solid #ececf0;text-align:right;white-space:nowrap}
.a-full th:first-child,.a-full td:first-child{text-align:left}
.a-full td:last-child{font-weight:650}
.a-full__cond{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:7px;font-size:10px;color:#4b4b55}
.a-correu{min-width:0;padding:10px 12px;border:1px solid var(--a-line);border-radius:10px}
.a-correu__fil{display:flex;align-items:center;gap:6px;margin-bottom:7px;font-size:11.5px;color:var(--a-text-3)}
.a-correu__fil .a-ico{width:13px;height:13px}
.a-correu__f{display:grid;grid-template-columns:58px minmax(0,1fr);gap:6px;padding-bottom:4px;font-size:12px}
.a-correu__f span{color:var(--a-text-3)}
.a-correu__f b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-correu__cos{margin-top:3px;padding-top:8px;border-top:1px solid var(--a-line);font-size:12px;line-height:1.5;color:var(--a-text-2)}
.a-adjunt--pdf{margin-top:9px;padding:4px 10px 4px 4px}
.a-adjunt__pdf{flex:none;display:grid;place-items:center;width:26px;height:32px;border-radius:4px;background:#fdecec;color:#c9353a;font-size:8.5px;font-weight:700}
.a-toast{position:absolute;bottom:16px;right:16px;z-index:3;display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:10px 14px 10px 10px;border-radius:12px;
  background:#18181b;color:#fff;box-shadow:0 16px 40px -10px rgba(0,0,0,.45)}
.a-toast__ico{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#22a355}
.a-toast__ico .a-ico{width:15px;height:15px;stroke-width:2.2}
.a-toast b{display:block;font-size:12.5px}
.a-toast p>span{display:block;font-size:12px;color:#c4c4cc}

/* 5 · Segueix: la cronologia de l'oferta, el motiu si es perd i el panell */
.a-crono{display:grid}
.a-fita{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr) auto;column-gap:12px;align-items:center;min-height:44px;padding:6px 0 6px 22px}
.a-fita::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:var(--a-line)}
.a-fita:first-child::before{top:50%}.a-fita:last-child::before{bottom:50%}
.a-fita::after{content:"";position:absolute;left:1px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--a-verd);box-shadow:0 0 0 3px #fff}
.a-fita--resposta::after{background:var(--a-blau)}
.a-fita time{font-size:12px;font-weight:600;color:var(--a-text-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.a-fita p{min-width:0}
.a-fita p b{display:block;font-size:12.5px;line-height:1.35}
.a-fita__det{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.4;color:var(--a-text-3)}
.a-fita__det i{display:none;font-style:normal}
.a-fita--resposta .a-fita__txt{color:var(--a-text);font-weight:550}
.a-fita__estat{justify-self:end}
.a-fita__estat .a-canvi>*{justify-self:end}
.a-seg-peu{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px;margin-top:10px;align-items:start}
.a-motius{padding:9px 12px 11px;border:1px solid var(--a-line);border-radius:10px}
.a-motius p,.a-panell>p{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--a-text-3)}
.a-motius ul{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.a-motius li{display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1px solid var(--a-line-2);border-radius:999px;background:#fff;font-size:12px;color:var(--a-text-2);white-space:nowrap}
.a-panell{padding:9px 12px 10px;border:1px solid var(--a-line);border-radius:10px;background:var(--a-bg-2)}
.a-panell>p .a-ico{width:14px;height:14px}
.a-panell dl{display:grid;gap:3px;margin-top:6px}
.a-panell dl>div{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:8px}
.a-panell dd{flex:none;min-width:5.4em;font-size:14px;font-weight:650;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-panell dt{min-width:0;font-size:12px;color:var(--a-text-2)}

/* L'aplicació, estreta (mòbil): sense barra lateral, cada pantalla en una columna */
@container app (max-width:620px){
  .app{font-size:12.5px}
  .app__cos{grid-template-columns:minmax(0,1fr)}
  .app__lateral{display:none}
  .app__menu,.app__marca-mobil{display:grid}
  .app__marca-mobil{font-weight:650}
  .app__cerca{display:none}
  .app__ex{font-size:11px}
  .a-vista{padding:12px 14px}
  .a-vista--0{padding:0}
  .a-cap{margin-bottom:10px}
  .a-titol{font-size:14px}
  .a-sub{font-size:12px}
  /* 1 · sense lector: l'adjunt i el «llegida» van a la mateixa fila */
  .a-pestanyes{padding:0 4px}
  .a-pestanyes span{padding:0 8px;gap:5px;font-size:12px}
  .a-safata{grid-template-columns:minmax(0,1fr)}
  .a-safata__llista{border-right:0}
  .a-lector{display:none}
  .a-it{padding:10px 14px}
  .a-it__mobil{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-top:7px;font-size:12px;font-weight:600;color:var(--a-text-2)}
  .a-it__mini{flex:none;width:34px;height:24px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px var(--a-line-2)}
  .a-it__llegida{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--a-verd)}
  .a-it__llegida .a-ico{width:13px;height:13px;stroke-width:2}
  /* 2 · la prova, més estreta: el retall a la mateixa escala (es veu el principi);
     del correu, només la icona */
  .a-dada{grid-template-columns:84px minmax(0,1fr);gap:6px;min-height:32px;padding:3px 6px 3px 10px}
  .a-dada dt{gap:7px;font-size:12px}
  .a-dada dd{gap:8px}
  .a-ev{width:88px;height:19px}
  .a-ev--planol svg{width:100%}
  .a-ev--correu{width:24px;height:22px;padding:0;justify-content:center}
  .a-ev--correu span{display:none}
  /* 3 · cada peça en dues ratlles (any, material i quantitat passen a la segona);
     el preu, en una fila; el motiu i el botó, a sota */
  .a-peca{grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"ref preu h res" "perque perque perque perque";column-gap:8px;padding:6px 10px 7px}
  .a-peces__cap{display:none}
  .a-peca__ref span,.a-peca__preu span{display:none}
  .a-peca__h{text-align:left;overflow:hidden;text-overflow:ellipsis}
  .a-peca__mob{display:inline}
  .a-preu{gap:7px;margin-top:10px;padding:10px 12px}
  .a-preu__camps .a-preu__q:nth-of-type(2){margin-left:2px}
  .a-preu__motiu .a-preu__q{display:none}
  .a-preu__motiu .a-input{grid-column:1 / -1}
  .a-preu__titol{grid-column:1 / -1;min-height:0}
  .a-preu__peu{grid-row:auto;grid-column:1 / -1}
  .a-input{padding:0 8px}
  /* 4 · el full, i el correu a sota (retallat a tres ratlles) */
  .a-aprova{padding:8px 10px}
  .a-docs{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px}
  .a-pdf{padding:7px 8px 8px}
  .a-pdf__nom{display:none}
  .a-correu__cos,.a-correu .a-adjunt,.a-correu__fil+.a-correu__f,.a-full__per{display:none}
  .a-aprova{row-gap:6px}
  .a-correu{padding:8px 10px}
  .a-correu__f{padding-bottom:2px}
  .a-aprova .a-av{display:none}
  .a-aprova .a-canvi__v{display:none}
  /* l'avís tapa la taula de l'oferta: en mòbil entra i se'n va, com un avís de veritat
     (l'estat final, «Aprovada per Jordi · 10:41» i «Enviada», ja ho diu) */
  .a-toast{left:12px;right:12px;bottom:12px;max-width:none;opacity:0;visibility:hidden}
  /* 5 · sense columna de l'hora: el títol i l'estat a la primera ratlla, l'hora i el
     detall a la segona; el panell en tres caselles; els motius, fora (ho diu el pas) */
  .a-fita{grid-template-columns:minmax(0,1fr) auto;column-gap:8px;padding:5px 0 5px 20px}
  .a-fita time{display:none}
  .a-fita p b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .a-fita__det{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .a-fita__det i{display:inline;font-weight:600;color:var(--a-text-2)}
  .a-fita__txt::before{content:" · ";font-weight:400;color:var(--a-text-3)}
  .a-fita--enviada .a-fita__txt{display:none}
  .a-fita__estat .a-pill,.a-fita__estat .a-btn{font-size:11.5px}
  .a-panell>p{display:none}
  .a-panell{padding:8px 10px}
  .a-seg-peu{grid-template-columns:minmax(0,1fr)}
  .a-motius{display:none}
  .a-panell dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .a-panell dl>div{flex-direction:column-reverse;justify-content:flex-start;gap:0}
  .a-panell dd{min-width:0}
  .a-panell dt{font-size:11px;line-height:1.3}
}
@container app (max-width:380px){
  .app__nom{text-align:left}
  .a-pestanyes span{padding:0 7px}
  .a-pestanyes span:last-child{display:none}               /* «Tancades»: no hi cap i no hi passa res */
  .a-it__l3{display:none}
  .a-dada{grid-template-columns:78px minmax(0,1fr)}
  .a-aprova__botons .a-btn:not(.a-btn--pri){display:none}   /* «Editar»: el que importa és el clic d'aprovar */
}
/* Poca alçada (mòbils baixos, portàtils de 600 px d'alt): tres graons, segons
   l'alçada real de la pantalla de l'app. Primer s'estreny l'aire; després marxa
   el que és secundari; al final, el que el pas ja diu amb paraules. */
@container vistes (max-height:430px){
  .a-vista{padding:12px 14px}
  .a-vista--0{padding:0}
  .a-cap{margin-bottom:8px}
  .a-pestanyes span{height:34px}
  .a-it{padding-block:9px}
  .a-docs{margin-top:10px}
  .a-preu{margin-top:10px;padding:9px 12px 10px}
  .a-fita{min-height:0;padding-block:4px}
  .a-seg-peu{margin-top:8px}
  .a-motius,.a-panell{padding:7px 10px 8px}
}
@container vistes (max-height:400px){
  .a-sub{display:none}
  .a-lector__xips{display:none}
  .a-dada{min-height:28px;padding-block:2px}
  .a-ev{height:20px}
  .a-peces{gap:5px}
  .a-peces__cap{padding-bottom:3px}
  .a-peca{padding-block:6px}
  .a-preu{gap:6px;padding:8px 10px}
  .a-input{height:28px}
  .a-btn{height:30px}
  .a-aprova{padding:7px 10px}
  .a-full{padding:9px 10px 10px}
  .a-full__per{display:none}
  .a-correu{padding:8px 10px}
  .a-correu__fil{display:none}
}
@container vistes (max-height:340px){
  .a-it__l3{display:none}
  .a-dada{min-height:25px;padding-block:1px}
  .a-dada__avis{height:20px;font-size:11px}
  .a-ev{height:17px}
  .a-ev--correu{height:19px}
  .a-lector__cos{font-size:12px;line-height:1.45}
  .a-pdf__nom{display:none}
  /* 5 · el que el títol ja diu («Oferta enviada», «Resposta de Marta») no repeteix la píndola;
     els motius de pèrdua, fora (ho diu el pas) */
  .a-fita--enviada .a-fita__estat,.a-fita--resposta .a-fita__estat,.a-fita--recordatori .a-fita__txt{display:none}
  .a-seg-peu{grid-template-columns:minmax(0,1fr)}
  .a-motius{display:none}
  .a-peces{gap:4px}
  .a-peca{padding-block:5px}
  .a-preu{gap:5px;padding:6px 10px}
  .a-input{height:26px}
  .a-btn{height:28px}
  .a-full{padding:7px 9px 8px}
  .a-full__cap{padding-bottom:5px}
  .a-full table,.a-full__cond{margin-top:5px}
  .a-full td{padding-block:3px}
}
@container app (max-width:620px){
  /* els motius de pèrdua tornen al mòbil quan hi ha alçada de sobres */
  @container vistes (min-height:425px){
    .a-motius{display:block;padding:7px 10px 8px}
    .a-motius ul{gap:4px;margin-top:5px}
    .a-motius li{height:22px;padding:0 8px;font-size:11.5px}
  }
  @container vistes (max-height:400px){
    .a-peca__perque{display:none}                          /* en mòbil, primer marxa el «per què» */
  }
  @container vistes (max-height:340px){
    .a-correu{display:none}                                /* el correu ja el diu el pas */
    .a-ev--planol{width:80px}
    .a-it{padding-block:7px}
    .a-it__mobil{margin-top:5px}
    .a-it__mini{width:28px;height:20px}
  }
}
@media (max-width:1023px){
  .app{height:clamp(16rem,52svh,30rem);min-height:0}
}
/* Mòbils de 640 px d'alt (360 × 640, 320 × 640): la pantalla de l'app fa menys de 290 px.
   Un quart graó: files i marges més justos, i fora el panell del pas 5 (el pas no en parla).
   Res del que el pas diu amb paraules no desapareix: el pes en groc del pas 2, el preu del 3
   i el clic del 4 continuen a la vista. */
@container app (max-width:620px){
  @container vistes (max-height:290px){
    .a-vista{padding:8px 10px}
    .a-vista--0{padding:0}
    .a-cap{margin-bottom:6px}
    .a-titol{font-size:13px}
    .a-cap .a-pill{height:20px;padding:0 7px;font-size:11px}
    .a-it{padding-block:6px}
    .a-it__mobil{margin-top:3px}
    .a-dada{min-height:23px;padding-block:0}
    .a-dada dt{font-size:11.5px}
    .a-ev{height:16px}
    .a-ev--correu{width:22px;height:17px}
    .a-dada__avis{min-height:0;padding:1px 6px;font-size:10.5px}
    .a-dada--dubte .a-ev{display:none}     /* el pes: el motiu en groc sencer, en una ratlla, val més que el retall borrós */
    .a-peces{gap:3px}
    .a-peca{padding-block:3px}
    .a-preu{margin-top:6px;gap:4px;padding:5px 8px}
    .a-preu__titol{font-size:12px}
    .a-input{height:24px}
    .a-btn{height:26px}
    .a-aprova{padding:5px 8px}
    .a-docs{margin-top:6px}
    .a-full{padding:6px 8px 7px}
    .a-full__cond{display:none}
    .a-fita{padding-block:3px}
    .a-panell{display:none}
  }
}
/* Mòbils de 320 px: la barra de títol, més baixa, i el retall del plànol, més estret, perquè cada
   dada de la fitxa càpiga en una ratlla */
@container app (max-width:300px){
  .app__titol{height:32px}
  .a-dada{grid-template-columns:70px minmax(0,1fr);gap:5px;min-height:21px;padding-inline:8px 5px}
  .a-dada dt{gap:6px}
  .a-dada dd{gap:5px}
  .a-dada__v{font-size:12px}
  .a-ev{width:58px}
}
/* Pantalles altes: la finestra creix amb l'escenari (fins a 38rem) */
@media (min-width:1024px) and (min-height:900px){.app{height:min(38rem,calc(100svh - var(--cap-h) - 5rem))}}

/* Què passa dins de cada pantalla quan s'hi arriba (només amb la secció a la vista).
   L'estat per defecte és el final: aquí només es dibuixa el camí des de l'abans. */
@media (prefers-reduced-motion:no-preference){
  /* La primera vegada, la finestra puja i s'enfoca, com quan s'obre una aplicació */
  html.js .recorregut .app{transition:opacity .9s var(--e-out),transform 1.1s var(--e-expo),filter .9s var(--e-out)}
  html.js .recorregut:not(.entrat) .app{opacity:0;transform:translateY(28px) scale(.97);filter:blur(4px)}

  /* 1 · arriba la petició: entra per dalt, les altres baixen, s'obre el correu */
  .recorregut.viu .app[data-vista="0"] .a-it--nou{animation:a-arriba .55s var(--e-expo) .6s both,a-ressalta 1.6s var(--e-out) 1s both}
  .recorregut.viu .app[data-vista="0"] .a-it:not(.a-it--nou){animation:a-baixa .55s var(--e-expo) .6s both}
  .recorregut.viu .app[data-vista="0"] .a-pestanyes .si em{animation:a-pica .4s var(--e-expo) .75s both}
  .recorregut.viu .app[data-vista="0"] .a-lector{animation:a-puja .5s var(--e-out) .9s both}
  .recorregut.viu .app[data-vista="0"] .a-lector__peu,
  .recorregut.viu .app[data-vista="0"] .a-it__mobil{animation:a-apareix .4s var(--e-out) 1.45s both}

  /* 2 · la fitxa s'omple de dalt a baix; al final, el pes, en groc */
  .recorregut.viu .app[data-vista="1"] .a-dada{animation:a-omple .45s var(--e-out) both}
  .recorregut.viu .app[data-vista="1"] .a-dada:nth-child(1){animation-delay:.1s}
  .recorregut.viu .app[data-vista="1"] .a-dada:nth-child(2){animation-delay:.18s}
  .recorregut.viu .app[data-vista="1"] .a-dada:nth-child(3){animation-delay:.26s}
  .recorregut.viu .app[data-vista="1"] .a-dada:nth-child(4){animation-delay:.34s}
  .recorregut.viu .app[data-vista="1"] .a-dada:nth-child(5){animation-delay:.42s}
  .recorregut.viu .app[data-vista="1"] .a-dada:nth-child(6){animation-delay:.5s}
  .recorregut.viu .app[data-vista="1"] .a-dada:nth-child(7){animation-delay:.58s}
  .recorregut.viu .app[data-vista="1"] .a-dada:nth-child(8){animation-delay:.66s}
  .recorregut.viu .app[data-vista="1"] .a-dada:nth-child(9){animation-delay:.74s}
  .recorregut.viu .app[data-vista="1"] .a-dada>*{animation-delay:inherit}
  .recorregut.viu .app[data-vista="1"] .a-dada dt::before{animation:a-pica .35s var(--e-expo) both;animation-delay:inherit}
  .recorregut.viu .app[data-vista="1"] .a-ev{animation:a-apareix .4s var(--e-out) both;animation-delay:inherit}
  .recorregut.viu .app[data-vista="1"] .a-dada--dubte{animation:a-omple .45s var(--e-out) .74s both,a-avisa 1.2s var(--e-out) 1.15s}
  .recorregut.viu .app[data-vista="1"] .a-dada__avis{animation:a-pica .4s var(--e-expo) 1.15s both}
  .recorregut.viu .app[data-vista="1"] .a-cap__pill{animation:a-pica .4s var(--e-expo) .9s both}

  /* 3 · les peces semblants, i en Jordi escriu el preu i el motiu */
  .recorregut.viu .app[data-vista="2"] .a-peca{animation:a-puja .45s var(--e-out) both}
  .recorregut.viu .app[data-vista="2"] .a-peca:nth-child(1){animation-delay:.1s}
  .recorregut.viu .app[data-vista="2"] .a-peca:nth-child(2){animation-delay:.2s}
  .recorregut.viu .app[data-vista="2"] .a-peca:nth-child(3){animation-delay:.3s}
  .recorregut.viu .app[data-vista="2"] .a-preu{animation:a-puja .45s var(--e-out) .45s both}
  .recorregut.viu .app[data-vista="2"] .a-input__ph{animation:a-hi-es 0s linear backwards}
  .recorregut.viu .app[data-vista="2"] .a-input--1 .a-input__ph{animation-delay:1s}
  .recorregut.viu .app[data-vista="2"] .a-input--2 .a-input__ph{animation-delay:1.55s}
  .recorregut.viu .app[data-vista="2"] .a-input--3 .a-input__ph{animation-delay:2.1s}
  .recorregut.viu .app[data-vista="2"] .a-input--1{animation:a-focus .5s linear 1s}
  .recorregut.viu .app[data-vista="2"] .a-input--2{animation:a-focus .5s linear 1.55s}
  .recorregut.viu .app[data-vista="2"] .a-input--3{animation:a-focus 1.05s linear 2.1s}
  .recorregut.viu .app[data-vista="2"] .a-input--1 .a-teclat{animation:a-escriu .4s steps(5,end) 1s both,a-cursor-text .5s linear 1s}
  .recorregut.viu .app[data-vista="2"] .a-input--2 .a-teclat{animation:a-escriu .4s steps(5,end) 1.55s both,a-cursor-text .5s linear 1.55s}
  .recorregut.viu .app[data-vista="2"] .a-input--3 .a-teclat{animation:a-escriu .95s steps(33,end) 2.1s both,a-cursor-text 1.05s linear 2.1s}
  .recorregut.viu .app[data-vista="2"] .a-preu__btn{animation:a-inactiu 3.15s linear,a-prem .3s var(--e-out) 3.15s}
  .recorregut.viu .app[data-vista="2"] .app__nav [data-v="3"] em{animation:a-pica .4s var(--e-expo) 3.2s both}

  /* 4 · el cursor ve, prem «Aprovar i enviar» i surt l'avís */
  .recorregut.viu .app[data-vista="3"] .a-cursor{animation:a-cursor-ve .7s var(--e-io) .45s both,a-cursor-prem .16s var(--e-out) 1.2s both,a-cursor-marxa .35s var(--e-out) 2.1s forwards}
  .recorregut.viu .app[data-vista="3"] .a-aprova .a-btn--pri{animation:a-prem .22s var(--e-out) 1.2s,a-apaga .3s var(--e-out) 1.5s both}
  .recorregut.viu .app[data-vista="3"] .a-aprova__botons .a-btn:not(.a-btn--pri){animation:a-apaga .3s var(--e-out) 1.5s both}
  .recorregut.viu .app[data-vista="3"] .a-vista--3 .a-canvi__a,
  .recorregut.viu .app[data-vista="3"] .a-vista--3 .a-estat__a{animation:a-surt .2s var(--e-out) 1.4s both}
  .recorregut.viu .app[data-vista="3"] .a-vista--3 .a-canvi__b{animation:a-entra .35s var(--e-out) 1.45s both}
  .recorregut.viu .app[data-vista="3"] .a-vista--3 .a-estat__b{animation:a-pica .4s var(--e-expo) 1.45s both}
  .recorregut.viu .app[data-vista="3"] .a-docs{animation:a-puja .45s var(--e-out) .2s both}
  .recorregut.viu .app[data-vista="3"] .a-toast{animation:a-toast .5s var(--e-expo) 1.4s both}
  .recorregut.viu .app[data-vista="3"] .app__nav [data-v="3"] em{animation:a-compte-surt .25s var(--e-out) 1.4s both}
  @container app (max-width:620px){
    .recorregut.viu .app[data-vista="3"] .a-toast{animation:a-toast-mobil 3.4s var(--e-out) 1.4s both}
  }

  /* 5 · el recordatori s'aprova, la Marta contesta, l'oferta es dona per guanyada */
  .recorregut.viu .app[data-vista="4"] .a-fita{animation:a-puja .45s var(--e-out) both}
  .recorregut.viu .app[data-vista="4"] .a-fita:nth-child(1){animation-delay:.1s}
  .recorregut.viu .app[data-vista="4"] .a-fita:nth-child(2){animation-delay:.3s}
  .recorregut.viu .app[data-vista="4"] .a-fita:nth-child(3){animation-delay:1.4s}
  .recorregut.viu .app[data-vista="4"] .a-fita:nth-child(4){animation-delay:1.75s}
  .recorregut.viu .app[data-vista="4"] .a-fita--recordatori .a-canvi__a{animation:a-surt .2s var(--e-out) 1.05s both}
  .recorregut.viu .app[data-vista="4"] .a-fita--recordatori .a-canvi__b{animation:a-pica .4s var(--e-expo) 1.1s both}
  .recorregut.viu .app[data-vista="4"] .a-fita--proposta .a-canvi__a{animation:a-surt .2s var(--e-out) 2.5s both}
  .recorregut.viu .app[data-vista="4"] .a-fita--proposta .a-canvi__b{animation:a-pica .4s var(--e-expo) 2.55s both}
  .recorregut.viu .app[data-vista="4"] .a-vista--4 .a-estat__a{animation:a-surt .2s var(--e-out) 2.55s both}
  .recorregut.viu .app[data-vista="4"] .a-vista--4 .a-estat__b{animation:a-pica .4s var(--e-expo) 2.6s both}
  .recorregut.viu .app[data-vista="4"] .a-seg-peu{animation:a-apareix .45s var(--e-out) .6s both}
  .recorregut.viu .app[data-vista="4"] .app__nav [data-v="4"] em{animation:a-entra-surt 2.8s linear both}
}
@keyframes a-arriba{from{opacity:0;transform:translateY(-14px)}}
@keyframes a-baixa{from{transform:translateY(-64px)}}
@keyframes a-ressalta{from{background:#d7e0ff}}
@keyframes a-puja{from{opacity:0;transform:translateY(10px)}}
@keyframes a-apareix{from{opacity:0}}
@keyframes a-omple{from{opacity:0;transform:translateX(-6px)}}
@keyframes a-pica{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes a-avisa{from{background:#ffe2b8}}
@keyframes a-hi-es{from,to{opacity:1}}
@keyframes a-focus{from,to{border-color:var(--a-blau);box-shadow:0 0 0 3px rgba(47,91,234,.16)}}
@keyframes a-escriu{from{width:0}}
@keyframes a-cursor-text{from,to{border-right-color:var(--a-blau)}}
@keyframes a-inactiu{from,to{opacity:.45;box-shadow:none}}
@keyframes a-cursor-ve{from{opacity:0;transform:translate(90px,70px)}to{opacity:1;transform:none}}
@keyframes a-cursor-prem{50%{transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes a-cursor-marxa{from{opacity:1}to{opacity:0;transform:translate(12px,10px)}}
@keyframes a-prem{50%{transform:scale(.96);background:var(--a-blau-2)}}
@keyframes a-toast{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes a-entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes a-apaga{from{opacity:1}to{opacity:.4}}
@keyframes a-surt{from{opacity:1}to{opacity:0}}
@keyframes a-toast-mobil{0%{opacity:0;visibility:visible;transform:translateY(10px) scale(.98)}12%,82%{opacity:1;visibility:visible;transform:none}100%{opacity:0;visibility:hidden;transform:translateY(6px)}}
@keyframes a-entra-surt{0%,93%{opacity:1;transform:none}100%{opacity:0;transform:scale(.6)}}
@keyframes a-compte-surt{from{opacity:1;transform:none}to{opacity:0;transform:scale(.6)}}
/* «width:0 → auto» l'interpola interpolate-size (Chrome); on no hi és, el text surt de cop */

/* Un CTA lleuger: una pregunta i un enllaç al formulari, amb un filet a sobre */
.cta-linia{margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.25rem;border-top:1px solid var(--linia);display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:.5rem 2rem}
.cta-linia__q{font-size:clamp(1.125rem,1rem + .45vw,1.3125rem);letter-spacing:-.01em;color:var(--tinta-2)}
.cta-linia__a{display:inline-flex;align-items:center;gap:.6rem;padding-block:.5rem .35rem;font-weight:600;font-size:1.0625rem;
  color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--accent-linia);transition:color .2s var(--e-out)}
.cta-linia__f svg{width:1rem;height:1rem;fill:none;stroke:var(--accent-text);stroke-width:1.6;stroke-linecap:square;transition:transform .35s var(--e-out)}
@media (hover:hover) and (pointer:fine){.cta-linia__a:hover{color:var(--accent-text)}.cta-linia__a:hover .cta-linia__f svg{transform:translateX(3px)}}

/* --- Què canvia ----------------------------------------------------------- */
.comparacio{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--tinta)}
.comparacio th,.comparacio td{padding:1.25rem 1.5rem 1.25rem 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--linia);font-weight:400;line-height:1.5}
.comparacio thead th{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);padding-block:.9rem}
.comparacio tbody th{font-weight:600;color:var(--tinta);width:34%;font-size:1.0625rem}
.comparacio .avui{color:var(--tinta-3);width:30%}
.comparacio .despres{color:var(--tinta);font-weight:500}
.comparacio thead .despres{color:var(--accent-text);font-weight:400}
.comparacio tbody tr{transition:background-color .2s var(--e-out)}
@media (hover:hover){.comparacio tbody tr:hover{background:var(--fons-2)}}
/* La columna «Avui» no es ratlla: és la feina del taller, no un error. El contrast el fa
   «Amb Ofertes», en tinta i més pes */
@media (max-width:767px){
  .comparacio thead{display:none}
  .comparacio tr{display:block;padding:1.1rem 0;border-bottom:1px solid var(--linia)}
  .comparacio th,.comparacio td{display:block;width:auto!important;padding:0;border:0}
  .comparacio td{margin-top:.5rem;padding-left:5.5rem;position:relative}
  .comparacio td::before{content:attr(data-label);position:absolute;left:0;top:.2rem;font-family:var(--mono);font-size:.75rem;color:var(--tinta-3)}
  .comparacio td.despres::before{color:var(--accent-text)}
}

/* --- Ofertes obertes ------------------------------------------------------------ */
/* La mateixa aplicació, a la pantalla de les ofertes enviades que encara no tenen
   resultat. La secció: <div class="wrap obertes"> amb el text i aquest .informe. */
.obertes{display:grid;gap:2.5rem 4rem;align-items:start}
@media (min-width:1024px){.obertes{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.obertes .h2{max-width:14ch}
.informe{container:informe / inline-size;overflow:hidden;font-family:var(--a-sans);font-size:13px;line-height:1.45;
  color:var(--a-text);background:#fff;border:1px solid #e4e4e8;border-radius:12px;color-scheme:light;
  box-shadow:0 1px 2px rgba(16,24,40,.05),0 18px 40px -18px rgba(16,24,40,.22)}
.informe__titol{height:34px}
.informe__barra{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #ececf0}
.informe__barra p{flex:1;min-width:0}
.informe__barra b{display:block;font-size:13.5px;font-weight:650}
.informe__barra p>span{display:block;font-size:12px;color:var(--a-text-3)}
.informe .app__ex{align-self:flex-start}
.informe__filtres{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid #ececf0;background:#fafafb}
.informe__filtres span{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border:1px solid #e0e0e6;border-radius:999px;background:#fff;font-size:12px;color:var(--a-text-2)}
.informe__filtres em{font-style:normal;font-weight:600;color:var(--a-text-3)}
.informe__filtres .si{border-color:var(--a-blau);background:var(--a-blau-suau);color:var(--a-blau-2);font-weight:600}
.informe__filtres .si em{color:var(--a-blau-2)}
.informe table{width:100%;font-variant-numeric:tabular-nums}
.informe th{padding:8px 10px;border-bottom:1px solid #ececf0;background:#fafafb;text-align:left;font-size:12px;font-weight:500;color:var(--a-text-3);white-space:nowrap}
.informe td{padding:9px 10px;border-bottom:1px solid #f0f0f3;color:var(--a-text-2);white-space:nowrap;vertical-align:middle}
.informe th:first-child,.informe td:first-child{padding-left:14px}
.informe th:last-child,.informe td:last-child{padding-right:14px}
.informe tr:last-child td{border-bottom:0}
@media (hover:hover){.informe tbody tr:hover td{background:#fafafb}}
.informe td.o-client{color:var(--a-text);font-weight:600}
.o-client .a-av{margin-right:8px;vertical-align:middle}
.o-client__nom{display:inline-block;vertical-align:middle}
.o-client__nom small{display:none;font-size:11.5px;font-weight:400;color:var(--a-text-3)}
.informe .o-imp{text-align:right}
.d__cel{display:inline-flex;align-items:center;gap:8px}
.d__barra{position:relative;width:52px;height:6px;border-radius:999px;background:#efeff2;overflow:hidden}
.d__barra::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#30a46c;transform:scaleX(var(--v,1));transform-origin:left}
.d-ambre .d__barra::after{background:#f5a524}
.d-vermell .d__barra::after{background:#e5484d}
.d__n{min-width:2ch;text-align:right;font-weight:600;color:var(--a-text)}
.d-vermell .d__n{color:#c9353a}
.o-estat small{display:block;margin-top:1px;font-size:11.5px;color:var(--a-text-3)}
/* La llargada de cada barra: dies laborables sense resposta sobre 14 (ESCALA_DIES de
   tools/app_ofertes.py). Del CSS, no del JS: es veu igual sense JS. */
[data-dies="0"]{--v:.02}[data-dies="1"]{--v:.071}[data-dies="2"]{--v:.143}[data-dies="3"]{--v:.214}[data-dies="4"]{--v:.286}
[data-dies="5"]{--v:.357}[data-dies="6"]{--v:.429}[data-dies="7"]{--v:.5}[data-dies="8"]{--v:.571}[data-dies="9"]{--v:.643}
[data-dies="10"]{--v:.714}[data-dies="11"]{--v:.786}[data-dies="12"]{--v:.857}[data-dies="13"]{--v:.929}
@media (prefers-reduced-motion:no-preference){
  html.js .informe .d__barra::after{transform:scaleX(0);transition:transform .8s var(--e-out)}
  html.js .informe.vist .d__barra::after{transform:scaleX(var(--v,1))}
  .informe tbody tr:nth-child(2) .d__barra::after{transition-delay:.06s}
  .informe tbody tr:nth-child(3) .d__barra::after{transition-delay:.12s}
  .informe tbody tr:nth-child(4) .d__barra::after{transition-delay:.18s}
  .informe tbody tr:nth-child(5) .d__barra::after{transition-delay:.24s}
  .informe tbody tr:nth-child(6) .d__barra::after{transition-delay:.3s}
}
/* En paper, les barres plenes encara que l'informe no s'hagi vist a la pantalla */
@media print{.informe .d__barra::after{transform:scaleX(var(--v,1))!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}}
/* Estret: la referència passa sota el client; fora la data i, més estret, l'import */
@container informe (max-width:640px){
  .informe .o-ref,.informe .o-env{display:none}
  .o-client__nom small{display:block}
}
@container informe (max-width:440px){
  .informe .o-imp,.informe .o-client .a-av{display:none}
  .informe th,.informe td{padding-inline:8px}
  .informe th:first-child,.informe td:first-child{padding-left:12px}
  .informe th:last-child,.informe td:last-child{padding-right:12px}
  .d__barra{width:34px}
  .d__cel{gap:6px}
  .informe th,.o-estat small{white-space:normal}
  .informe__barra{flex-wrap:wrap;row-gap:6px}
  .informe__barra p{flex:1 1 200px}
  .informe__barra .app__ex{margin-left:36px}
}

/* --- Declaració ------------------------------------------------------------- */
.declaracio{padding-block:clamp(4rem,14vw,12rem)}
.declaracio__text{font-family:var(--display);font-size:clamp(2.5rem,.6rem + 6.4vw,6.6rem);font-weight:700;letter-spacing:-.045em;line-height:.98;max-width:18ch;text-wrap:balance}
.declaracio .frase{display:block}              /* una frase per línia: «El sistema prepara. / El preu, el poseu vosaltres.» */
/* Al mòbil, una mida que deixa «El preu, / el poseu vosaltres.» en dues línies (el pronom no queda penjat) */
@media (max-width:479px){.declaracio__text{font-size:clamp(1.9rem,8.6vw,2.5rem)}}
.declaracio .frase--1{color:var(--tinta-3)}
.declaracio .frase--2{color:var(--tinta)}
/* Cada paraula s'entinta a mesura que la frase travessa la pantalla */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .declaracio__text{view-timeline:--decl block}
    /* la primera frase ja es llegeix (tinta-3); la segona s'entinta fins al negre */
    .declaracio .frase--2{color:var(--tinta-3);animation:entinta-b linear both;animation-timeline:--decl;animation-range:cover 30% cover 50%}
  }
}
@keyframes entinta-b{to{color:var(--tinta)}}

/* --- Les vostres dades ------------------------------------------------------ */
.garanties{margin-top:clamp(2.5rem,5vw,4rem);display:grid;border-top:1px solid var(--tinta);border-left:1px solid var(--linia)}
@media (min-width:640px){.garanties{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.garanties{grid-template-columns:repeat(4,minmax(0,1fr))}}
.garantia-cel{position:relative;padding:1.5rem 1.4rem 1.75rem;border-right:1px solid var(--linia);border-bottom:1px solid var(--linia);transition:background-color .25s var(--e-out)}
.garantia-cel::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent-linia);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--e-out)}
@media (hover:hover){.garantia-cel:hover{background:var(--fons-2)}.garantia-cel:hover::before{transform:scaleX(1)}}
.garantia-cel__codi{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--accent-text);margin-bottom:1.75rem}
.garanties dt{font-weight:650;font-size:1.125rem;letter-spacing:-.015em;line-height:1.25;color:var(--tinta)}
.garanties dd{margin-top:.6rem;color:var(--tinta-2);font-size:.9688rem;line-height:1.55}
/* Al mòbil, les cel·les més justes: la secció no ocupa dues pantalles i mitja */
@media (max-width:639px){.garantia-cel{padding:1.25rem 1.1rem 1.4rem}.garantia-cel__codi{margin-bottom:.75rem}}

/* --- Com treballem ---------------------------------------------------------- */
.proces{margin-top:clamp(2.5rem,5vw,4rem);position:relative}
.proces li{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:0 1.75rem;padding-bottom:3rem}
.proces li:last-child{padding-bottom:0}
.proces li:not(:last-child)::before{content:"";position:absolute;left:1.3rem;top:2.6rem;bottom:0;border-left:1px dashed var(--linia-2)}
.proces li:not(:last-child)::after{content:"";position:absolute;left:calc(1.3rem - .5px);top:2.6rem;bottom:0;width:2px;background:var(--accent-linia);transform-origin:top}
.proces .globus{display:grid;place-items:center;width:2.6rem;height:2.6rem;border:1.25px solid var(--accent-text);border-radius:50%;background:var(--fons);
  font-family:var(--mono);font-size:.875rem;color:var(--accent-text);position:relative;z-index:1}
.proces__cos{display:grid;gap:.5rem 3rem;padding-top:.4rem}
@media (min-width:900px){.proces__cos{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}}
.proces h3{font-size:clamp(1.3rem,1.1rem + .6vw,1.6rem);letter-spacing:-.025em}
.proces .durada{display:block;margin-top:.45rem;font-family:var(--mono);font-size:.8125rem;font-weight:400;letter-spacing:0;color:var(--tinta-2);font-variant-numeric:tabular-nums}
.proces p{color:var(--tinta-2);max-width:40rem}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .proces li:not(:last-child)::after{transform:scaleY(0);animation:omple-y linear both;animation-timeline:view();animation-range:cover 18% cover 58%}
    .proces .globus{animation:encen steps(1,jump-end) both;animation-timeline:view();animation-range:entry 70% cover 42%}
  }
}
@media (prefers-reduced-motion:no-preference){
  html.sense-sda .proces li:not(:last-child)::after{transform:scaleY(0);transition:transform .9s var(--e-out)}
  html.sense-sda .proces.vist li:not(:last-child)::after{transform:none}
  html.sense-sda .proces .globus{transition:background-color .35s var(--e-out),color .35s var(--e-out),border-color .35s var(--e-out)}
  html.sense-sda .proces.vist .globus{background:var(--accent);background-image:var(--accent-grad);color:#fff;border-color:var(--accent)}
  html.sense-sda .proces.vist li:nth-child(2) .globus,html.sense-sda .proces.vist li:nth-child(1)::after{transition-delay:.35s}
  html.sense-sda .proces.vist li:nth-child(3) .globus,html.sense-sda .proces.vist li:nth-child(2)::after{transition-delay:.7s}
  html.sense-sda .proces.vist li:nth-child(4) .globus,html.sense-sda .proces.vist li:nth-child(3)::after{transition-delay:1.05s}
  html.sense-sda .proces.vist li:nth-child(5) .globus,html.sense-sda .proces.vist li:nth-child(4)::after{transition-delay:1.4s}
}
@keyframes encen{from{background:var(--fons);color:var(--accent-text)}to{background:var(--accent);color:#fff;border-color:var(--accent)}}
.proces .globus{background-clip:padding-box}

/* --- Places de fundador ----------------------------------------------------- */
.fundadors{display:grid;gap:3rem 5rem;align-items:start;grid-template-areas:"text" "garantia" "inter" "accio"}
@media (min-width:1024px){.fundadors{grid-template-columns:minmax(0,5fr) minmax(0,7fr);row-gap:2rem;
  grid-template-areas:"text garantia" "accio garantia" "inter inter";grid-template-rows:auto 1fr auto}}
.fundadors__text{grid-area:text}.fundadors .garantia{grid-area:garantia}.fundadors .intercanvi{grid-area:inter}
.fundadors .accio{grid-area:accio;margin-top:0;align-self:start}
@media (min-width:1024px){.fundadors .intercanvi{margin-top:1rem}}
.fundadors .entrada{margin-top:1.5rem}
.garantia{position:relative;padding:clamp(1.75rem,3.5vw,2.75rem);border:1px solid var(--linia-2);background:var(--fons)}
.garantia::before,.garantia::after{content:"";position:absolute;width:14px;height:14px;border:0 solid var(--accent-text)}
.garantia::before{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.garantia::after{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.garantia .etiqueta{color:var(--accent-text)}
.garantia__gran{margin-top:1.25rem;font-family:var(--display);font-size:clamp(5rem,2.8rem + 7.2vw,9rem);font-weight:700;letter-spacing:-.065em;line-height:.8;color:var(--tinta);font-variant-numeric:tabular-nums}
.garantia__u{font-size:.3em;letter-spacing:-.02em;margin-left:.12em;color:var(--accent-text)}
.garantia blockquote{margin:1.75rem 0 0;font-family:var(--display);font-size:clamp(1.3rem,1.05rem + .9vw,1.75rem);font-weight:600;letter-spacing:-.022em;line-height:1.25;color:var(--tinta)}
.garantia .metrica{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--linia);color:var(--tinta-2);font-size:1rem}
.garantia .metrica strong{color:var(--tinta);font-weight:600}
.intercanvi{display:grid;gap:2rem 5rem;border-top:1px solid var(--linia);padding-top:2rem}
@media (min-width:768px){.intercanvi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.intercanvi h3{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3)}
.intercanvi li{padding:.9rem 0;border-bottom:1px solid var(--linia);color:var(--tinta);font-size:1.0625rem}
.accio{margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}

/* --- Preguntes -------------------------------------------------------------- */
.preguntes{display:grid;gap:2rem 4rem}
@media (min-width:1024px){.preguntes{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}}
.preguntes__cap .text{margin-top:1.25rem}
.preguntes__accio{margin-top:2rem;display:grid;justify-items:start;gap:.8rem}
.faq{border-top:1px solid var(--tinta)}
.faq details{border-bottom:1px solid var(--linia)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1.2rem 0;cursor:pointer;list-style:none;
  font-weight:600;font-size:1.1875rem;letter-spacing:-.015em;line-height:1.35;transition:color .2s var(--e-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.8rem;height:.8rem;margin-top:.35rem;
  background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  color:var(--tinta-3);transition:transform .3s var(--e-out),color .2s}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--accent-text)}
@media (hover:hover) and (pointer:fine){.faq summary:hover{color:var(--accent-text)}}
.faq .resposta{padding:0 2.5rem 1.5rem 0;color:var(--tinta-2);max-width:44rem}
@media (prefers-reduced-motion:no-preference){
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--e-out),content-visibility .35s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* --- Contacte ---------------------------------------------------------------- */
/* Escriptori: a l'esquerra, el titular i «Què passa després»; a la dreta, el
   formulari. Mòbil: titular, formulari i després la resta, perquè el CTA et
   deixi a menys d'una pantalla del primer camp.

   El formulari és una targeta d'aplicació, clara sobre l'escenari fosc (com
   la finestra de la demo). Una sola lletra, Inter; cap majúscula
   espaiada. Radis propis i coherents entre ells: targeta 16 px, controls
   (camps, opcions, botó) 10 px, distintius 6 px. Les vores dels camps fan
   3,2:1 sobre blanc (WCAG 1.4.11); el focus és de tinta (el magenta és de
   l'error i del botó, i així no es confonen). */
.contacte{display:grid;gap:2.5rem;grid-template-areas:"cap" "form" "despres"}
@media (min-width:1024px){.contacte{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(3rem,6vw,5rem);
  grid-template-areas:"cap form" "despres form";grid-template-rows:auto 1fr;align-items:start}}
.contacte__cap{grid-area:cap}.contacte__form{grid-area:form}.contacte__despres{grid-area:despres}
.contacte .entrada{margin-top:1.25rem}
.contacte .ico{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contacte__eti{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.5rem;padding:.35rem .85rem .35rem .7rem;
  border:1px solid var(--linia-2);border-radius:999px;background:rgba(255,255,255,.03);
  font-size:.875rem;font-weight:550;line-height:1.35;color:var(--tinta-2)}
.contacte__punt{flex:none;width:.45rem;height:.45rem;border-radius:50%;background:var(--accent-text);box-shadow:0 0 0 3px var(--accent-suau)}
@media (max-width:639px){.contacte__eti{display:none}}   /* al mòbil, el primer camp més amunt */

/* La targeta: capçalera, cos, botó i, a baix, la franja de privacitat */
.formulari{--fons:#fff;--fons-2:#f6f7f9;--tinta:#0e1116;--tinta-2:#4a515c;--tinta-3:#5a6270;
  --linia:#e4e7ec;--vora:#878e99;--vora-fort:#5a6270;--accent-text:#b8174f;--ok:#1f7a4d;
  --r-targeta:16px;--r-control:10px;--pad:clamp(1.25rem,3.2vw,2.25rem);
  color-scheme:light;position:relative;display:grid;background:var(--fons);color:var(--tinta);border-radius:var(--r-targeta);
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 90px -30px rgba(0,0,0,.8),0 14px 36px -18px rgba(0,0,0,.55);
  font-size:1rem;line-height:1.5}
.formulari__cap{padding:var(--pad) var(--pad) 1.25rem;border-bottom:1px solid var(--linia)}
.formulari__titol{font-family:var(--display);font-size:1.25rem;font-weight:650;letter-spacing:-.022em;line-height:1.25;color:var(--tinta)}
.formulari__sub{margin-top:.35rem;font-size:.9375rem;line-height:1.45;color:var(--tinta-2)}
.formulari__sub .obl{margin:0 .05em 0 .1em}
.formulari__cos{container-type:inline-size;display:grid;gap:1.375rem;min-width:0;padding:1.5rem var(--pad) 1.75rem}

/* Camps: etiqueta a dalt, sempre visible. A dins, només la plantilla del format (612 345 678,
   nom@empresa.cat), en gris: no és cap dada */
.camp{display:grid;gap:.5rem;align-content:start;min-width:0}
.camp label,.xips legend{display:block;font-size:.9375rem;font-weight:560;line-height:1.35;color:var(--tinta)}
.obl{margin-left:.15em;font-weight:600;color:var(--accent-text)}
.opc{margin-left:.2rem;padding:.14rem .42rem;border-radius:6px;background:#eef0f3;white-space:nowrap;
  font-size:.75rem;font-weight:500;letter-spacing:.01em;color:var(--tinta-3);vertical-align:.08em}
.ajuda{margin:0;font-size:.875rem;line-height:1.45;color:var(--tinta-3)}
.camp input,.camp textarea{width:100%;min-height:3rem;margin:0;padding:.7rem .875rem;font:inherit;font-size:1rem;line-height:1.5;color:var(--tinta);
  background:#fff;border:1px solid var(--vora);border-radius:var(--r-control);box-shadow:0 1px 2px rgba(16,24,40,.05);
  -webkit-appearance:none;appearance:none;
  transition:border-color .15s var(--e-out),box-shadow .15s var(--e-out),background-color .15s var(--e-out)}
.camp textarea{min-height:6rem;resize:vertical}
.camp input::placeholder{color:#6f777e;opacity:1}   /* 4,5:1 sobre blanc, i prou clar perquè no sembli escrit */
/* La caixa de cada camp: hi viuen el +34 del telèfon i el check de «correcte» */
.camp__caixa{position:relative;min-width:0}
/* El telèfon: el +34 fix al davant, com una cel·la del mateix camp; a dins, només xifres */
.camp__prefix{position:absolute;z-index:1;left:1px;top:1px;bottom:1px;display:flex;align-items:center;padding:0 .7rem 0 .875rem;
  border-right:1px solid var(--linia);border-radius:calc(var(--r-control) - 1px) 0 0 calc(var(--r-control) - 1px);
  background:var(--fons-2);color:var(--tinta-2);font-variant-numeric:tabular-nums;pointer-events:none}
.camp__tel input{padding-left:4.25rem;font-variant-numeric:tabular-nums;letter-spacing:.01em}
/* Camp bo en sortir-ne: un check fi a la dreta, del color --ok, com els de les garanties (el posa
   deriva.js amb .camp--ok; se'n va si el camp torna a fallar). És un ::after de la caixa pintat amb
   màscara, perquè prengui el color del token; entra amb una fosa curta, sense rebot. */
.camp__caixa::after{content:"";position:absolute;top:50%;right:.95rem;width:1rem;height:1rem;margin-top:-.5rem;pointer-events:none;
  background:var(--ok);opacity:0;transform:scale(.7);transition:opacity .16s var(--e-out),transform .2s var(--e-out);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.3 3.3 7.1-7.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.8 8.6l3.3 3.3 7.1-7.3' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.camp--ok .camp__caixa::after{opacity:1;transform:none}
.camp--ok input{padding-right:2.75rem}
@media (prefers-reduced-motion:reduce){.camp__caixa::after{transform:none;transition:opacity .16s linear}}
@media (forced-colors:active){.camp__caixa::after{forced-color-adjust:none;background:CanvasText}}
/* «Volies dir …@gmail.com?»: un clic ho corregeix */
.suggeriment{margin:0;font-size:.875rem;line-height:1.45;color:var(--tinta-2)}
.suggeriment:empty{display:none}
.suggeriment button{font:inherit;font-weight:600;color:var(--tinta);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.suggeriment button:focus-visible{outline:2px solid var(--tinta);outline-offset:2px;border-radius:2px}
@media (hover:hover){.camp input:hover,.camp textarea:hover{border-color:var(--vora-fort)}}
.camp input:focus,.camp textarea:focus{outline:0;border-color:var(--tinta);box-shadow:0 0 0 1px var(--tinta),0 0 0 5px rgba(14,17,22,.1)}
/* Amb error: vora magenta de 2 px i fons rosat. Si a més té el focus, un
   anell de tinta a fora: es distingeix dels altres camps amb error. */
.camp [aria-invalid="true"],.camp [aria-invalid="true"]:hover{border-color:var(--accent-text);background:#fff8fa;box-shadow:0 0 0 1px var(--accent-text)}
.camp [aria-invalid="true"]:focus{border-color:var(--accent-text);box-shadow:0 0 0 1px var(--accent-text);outline:2px solid var(--tinta);outline-offset:3px}
.error{display:flex;gap:.45rem;align-items:flex-start;margin:0;font-size:.875rem;font-weight:500;line-height:1.4;color:var(--accent-text)}
.error:empty{display:none}
.error::before,.formulari__estat::before{content:"";flex:none;width:1rem;height:1rem;margin-top:.1rem;background:center/contain no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23b8174f'/%3E%3Cpath d='M8 4.3v4.4' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.5' r='1.05' fill='%23fff'/%3E%3C/svg%3E")}
.parany{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

/* La pregunta d'un toc: ràdios natius (fletxes, espai, estat) amb aspecte
   d'opció. Els quatre rangs fan una escala; «No ho sé», a sota, és la sortida. */
.xips{border:0;margin:0;padding:0;min-width:0}
.xips legend{padding:0;margin-bottom:.7rem}
.xips__llista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
@container (min-width:35rem){.xips__llista{grid-template-columns:repeat(4,minmax(0,1fr))}}
.xip{position:relative;display:flex;min-width:0}
.xip input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.xip span{flex:1;display:flex;align-items:center;gap:.55rem;min-width:0;min-height:2.875rem;padding:.55rem .75rem;
  border:1px solid var(--vora);border-radius:var(--r-control);background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05);
  font-size:.9375rem;font-weight:500;line-height:1.25;color:var(--tinta);white-space:nowrap;
  transition:border-color .15s var(--e-out),background-color .15s var(--e-out),box-shadow .15s var(--e-out),color .15s var(--e-out),transform .12s var(--e-out)}
.xip span::before{content:"";flex:none;width:1.0625rem;height:1.0625rem;border-radius:50%;border:1.5px solid var(--vora);background:#fff;
  transition:border-color .15s var(--e-out),background-color .15s var(--e-out),box-shadow .15s var(--e-out)}
@media (hover:hover){.xip input:hover+span,.xip input:hover+span::before{border-color:var(--vora-fort)}}
.xip input:checked+span{border-color:var(--tinta);background:var(--fons-2);box-shadow:0 0 0 1px var(--tinta)}
.xip input:checked+span::before{border-color:var(--tinta);background:var(--tinta);box-shadow:inset 0 0 0 3px #fff}
.xip input:focus-visible+span{outline:2px solid var(--tinta);outline-offset:3px}
.xip input:active+span{transform:scale(.98)}
.xip--no{display:inline-flex;margin-top:.5rem}
.xip--no span,.xip--no input:checked+span{min-height:2.75rem;padding:.25rem .5rem .25rem .1rem;border-color:transparent;background:none;box-shadow:none;color:var(--tinta-2)}
.xip--no input:checked+span{color:var(--tinta)}
@media (hover:hover){.xip--no input:hover+span{border-color:transparent;color:var(--tinta)}}
@container (max-width:18rem){
  .xips__llista .xip span{gap:.4rem;padding-inline:.5rem;font-size:.875rem}
  .xip span::before{width:.9375rem;height:.9375rem}
}

/* Enviar: el botó a tota l'amplada, l'estat i, a sota, el que el fa segur */
.formulari__enviar{container-type:inline-size;display:grid;gap:.9rem;padding:0 var(--pad) var(--pad)}
.formulari__boto{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:3.25rem;padding:.8rem 1.25rem;
  border-radius:var(--r-control);background:var(--accent);background-image:var(--accent-grad);color:#fff;font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;
  box-shadow:inset 0 0 0 100vmax rgba(14,17,22,.14),inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(16,24,40,.14),0 8px 20px -8px rgba(184,23,79,.55);
  transition:box-shadow .15s var(--e-out),transform .12s var(--e-out)}
.formulari__boto-ico{display:grid;place-items:center;width:1.1rem;height:1.1rem}
.formulari__boto-ico svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--e-out)}
@media (hover:hover) and (pointer:fine){
  .formulari__boto:hover{box-shadow:inset 0 0 0 100vmax rgba(14,17,22,.26),0 1px 2px rgba(16,24,40,.14),0 8px 20px -8px rgba(184,23,79,.55)}
  .formulari__boto:hover .formulari__boto-ico svg{transform:translateX(3px)}
}
.formulari__boto:active{transform:scale(.985)}
.formulari__boto:focus-visible{outline:2px solid var(--tinta);outline-offset:3px}
/* Enviant: el botó no es torna a prémer i la fletxa passa a ser una roda */
.formulari__boto[aria-busy="true"]{pointer-events:none;box-shadow:inset 0 0 0 100vmax rgba(14,17,22,.26)}
.formulari__boto[aria-busy="true"] .formulari__boto-ico svg{display:none}
.formulari__boto[aria-busy="true"] .formulari__boto-ico::after{content:"";width:1rem;height:1rem;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:fm-gira .7s linear infinite}
@keyframes fm-gira{to{transform:rotate(360deg)}}
/* «T'escriurem a …»: l'última comprovació, sota el botó, quan el correu ja és bo */
.formulari__desti{margin:0;text-align:center;font-size:.875rem;line-height:1.45;color:var(--tinta-2);overflow-wrap:anywhere}
.formulari__desti:empty{display:none}
.formulari__desti b{font-weight:600;color:var(--tinta)}
.formulari__estat{display:flex;gap:.55rem;align-items:flex-start;margin:0;padding:.7rem .85rem;border:1px solid rgba(184,23,79,.28);border-radius:var(--r-control);
  background:rgba(184,23,79,.05);color:#9c1443;font-size:.9063rem;line-height:1.45}
.formulari__estat:empty{display:none}
.formulari__estat[data-to="info"]{border-color:var(--linia);background:var(--fons-2);color:var(--tinta-2)}
.formulari__estat[data-to="info"]::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.2' fill='none' stroke='%23474e55' stroke-width='1.4'/%3E%3Cpath d='M8 4.6V8l2.2 1.4' fill='none' stroke='%23474e55' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
/* «Enviant…» el diu el botó; el lector de pantalla el sent per aquí */
.formulari__estat[data-to="enviant"]{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Si tarda: el correu, clicable (el posa deriva.js, bloc 8) */
.formulari__estat a{color:inherit;font-weight:600;text-decoration:underline;overflow-wrap:anywhere}
.formulari__garanties{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.1rem;font-size:.8438rem;line-height:1.4;color:var(--tinta-2);text-align:center}
.formulari__garanties li{display:inline-flex;align-items:center;gap:.4rem}
.formulari__garanties .ico{flex:none;width:1rem;height:1rem;color:var(--ok);stroke-width:2.2}
@container (max-width:30rem){
  .formulari__garanties{flex-direction:column;align-items:flex-start;gap:.45rem;text-align:left}
  .formulari__garanties li{align-items:flex-start}
  .formulari__garanties .ico{margin-top:.1rem}
}
.privacitat{margin:0;padding:1rem var(--pad) 1.15rem;border-top:1px solid var(--linia);border-radius:0 0 var(--r-targeta) var(--r-targeta);
  background:var(--fons-2);font-size:.8125rem;line-height:1.55;color:var(--tinta-3)}
.privacitat a{color:var(--tinta-2);text-decoration-color:currentColor}
@media (prefers-reduced-motion:reduce){
  .formulari__boto:active,.xip input:active+span{transform:none}
  .formulari__boto:hover .formulari__boto-ico svg{transform:none}
}

/* Què passa després: una línia de temps de tres passos */
.contacte__titolet{margin-bottom:1.25rem;font-size:1.0625rem;font-weight:620;letter-spacing:-.012em;line-height:1.3;color:var(--tinta)}
.passos{display:grid}
.passos li{position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr);column-gap:1rem;padding-bottom:1.5rem;color:var(--tinta-2)}
.passos li:last-child{padding-bottom:0}
.passos li:not(:last-child)::after{content:"";position:absolute;left:1rem;top:2.5rem;bottom:.5rem;width:1px;margin-left:-.5px;background:var(--linia-2)}
.passos .n{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--linia-2);background:var(--fons-2);
  font-size:.875rem;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--tinta)}
.passos li>:last-child{margin:0;padding-top:.25rem;line-height:1.55}
.passos strong{display:block;margin-bottom:.1rem;font-weight:600;color:var(--tinta)}
.contacte__no{display:flex;gap:.8rem;align-items:flex-start;margin-top:2.25rem;padding:1rem 1.15rem;border:1px solid var(--linia-2);border-radius:12px;
  background:rgba(255,255,255,.03);color:var(--tinta-2);font-size:.9375rem;line-height:1.5}
.contacte__no .ico{flex:none;width:1.25rem;height:1.25rem;margin-top:.1rem;color:var(--accent-text)}
.contacte__no strong{font-weight:600;color:var(--tinta)}
.contacte__alt{display:grid;gap:1rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--linia);font-size:.9375rem;line-height:1.5;color:var(--tinta-2)}
.contacte__alt li{display:flex;gap:.8rem;align-items:flex-start}
.contacte__alt p{margin:0}
.contacte__alt .ico{flex:none;width:1.25rem;height:1.25rem;margin-top:.1rem;color:var(--tinta-3)}
.contacte__alt strong{font-weight:600;color:var(--tinta)}
.contacte__alt .enllac{overflow-wrap:anywhere}

/* --- Peu --------------------------------------------------------------------- */
.peu{background:var(--fons);color:var(--tinta-2);border-top:1px solid var(--linia);padding-block:4rem 2.5rem;font-size:.9375rem;overflow:clip}
.peu__graella{display:grid;gap:2rem}
/* El correu no trepitja mai la columna del costat: tres columnes amb la marca a sobre fins a
   1199 px; a partir de 1200, quatre, i la del correu tan ampla com el correu */
@media (min-width:640px){
  .peu__graella{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:2rem}
  .peu__marca{grid-column:1 / -1}
}
@media (min-width:1200px){
  .peu__graella{grid-template-columns:minmax(0,4fr) minmax(max-content,3fr) minmax(0,2fr) minmax(0,2fr)}
  .peu__marca{grid-column:auto}
}
.peu__marca .logo{height:2.6rem}
.peu__marca p{margin-top:1.25rem;max-width:22rem;color:var(--tinta-3)}
.peu__frase{font-family:var(--display);font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;line-height:1.35;color:var(--tinta)}
.peu__frase span{display:block}
.peu__marca .peu__frase{color:var(--tinta)}
.peu h2{font-family:var(--mono);font-size:.75rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:.9rem}
.peu li>a{display:inline-block;padding-block:.4rem}
.peu li:not(:has(>a)){padding-block:.4rem}
.peu a{text-decoration:none;color:var(--tinta-2)}
.peu a:hover{color:var(--accent-text)}
/* La marca gravada, com la placa d'una màquina: de cantell a cantell de la retícula
   (34,13cqi = la tinta de «Deriva» fa l'amplada de la retícula; -.0625em compensa el
   blanc de l'esquerra de la «D»; mesurat amb la lletra carregada a 390, 1024, 1366 i 1920) */
.peu .wrap{container-type:inline-size}
.peu__marca-gran{margin:clamp(3rem,6vw,5rem) 0 0 var(--peu-marca-x,-.03em);font-family:var(--display);font-size:clamp(4rem,1rem + 19vw,19rem);font-size:var(--peu-marca-mida,26cqi);font-weight:800;letter-spacing:-.02em;line-height:.74;
  color:var(--fons-2);text-shadow:0 1px 0 rgba(255,255,255,.035);user-select:none;white-space:nowrap}
.peu__marca-gran::before{content:attr(data-marca)}
.peu__baix a{color:inherit;text-decoration:underline;text-decoration-color:var(--linia-2)}
.peu__baix{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--linia);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem;font-size:.8125rem;color:var(--tinta-3)}

/* --- Revelat en entrar a la pantalla ---------------------------------------- */
/* html.js el posa assets/js/abans.js abans de pintar: sense JS, tot es veu. */
@media (prefers-reduced-motion:no-preference){
  html.js .revela{opacity:0;transform:translateY(12px);transition:opacity .6s var(--e-out),transform .6s var(--e-out)}
  html.js .revela.vist{opacity:1;transform:none}
}

/* --- El traç de delineant ---------------------------------------------------- */
/* En lloc d’aparèixer, les coses es dibuixen: els filets de dalt es tracen
   d’esquerra a dreta i les cotes s’acoten (línies de referència, línia de cota
   des del centre i, al final, la xifra). */
.stats,.faq,.garanties,.comparacio,.cronologia__passos,.intercanvi{border-top:0;
  background-image:linear-gradient(var(--filet,var(--tinta)),var(--filet,var(--tinta)));background-repeat:no-repeat;background-position:0 0;background-size:100% 1px}
.intercanvi{--filet:var(--linia)}
@media (max-width:767px){.cronologia__passos{background-size:1px 100%}}
@media (prefers-reduced-motion:no-preference){
  html.js :is(.stats,.faq,.garanties,.comparacio,.intercanvi){background-size:0 1px;transition:background-size .7s var(--e-out)}
  html.js :is(.stats,.faq,.garanties,.comparacio,.intercanvi).vist{background-size:100% 1px}
  html.js .cronologia__passos{background-size:0 1px;transition:background-size .8s var(--e-out) .45s}
  html.js .cronologia.vist .cronologia__passos{background-size:100% 1px}
  html.js .cronologia__pas::before{opacity:0;transition:opacity .2s var(--e-out)}
  html.js .cronologia.vist .cronologia__pas::before{opacity:1}
  html.js .cronologia.vist .cronologia__pas:nth-child(2)::before{transition-delay:.7s}
  html.js .cronologia.vist .cronologia__pas:nth-child(3)::before{transition-delay:.95s}
  html.js .cronologia.vist .cronologia__pas:nth-child(4)::before{transition-delay:1.2s}
  html.js .cronologia .cota::after{opacity:0;transition:opacity .2s var(--e-out)}
  html.js .cronologia .cota::before{transform:scaleX(0);transition:transform .7s var(--e-out)}
  html.js .cronologia .cota span{opacity:0;transition:opacity .3s var(--e-out)}
  html.js .cronologia.vist .cota::after,html.js .cronologia.vist .cota span{opacity:1}
  html.js .cronologia.vist .cota::before{transform:none}
  html.js .cronologia.vist .cota--1::before{transition-delay:.1s}
  html.js .cronologia.vist .cota--1 span{transition-delay:.55s}
  html.js .cronologia.vist .cota--2::after{transition-delay:.15s}
  html.js .cronologia.vist .cota--2::before{transition-delay:.25s}
  html.js .cronologia.vist .cota--2 span{transition-delay:.7s}
  html.js .cronologia.vist .cota--total::after{transition-delay:.4s}
  html.js .cronologia.vist .cota--total::before{transition-delay:.5s}
  html.js .cronologia.vist .cota--total span{transition-delay:.95s}
  @media (max-width:767px){
    html.js .cronologia__passos{background-size:1px 0;transition:background-size 1s var(--e-out)}
    html.js .cronologia.vist .cronologia__passos{background-size:1px 100%}
  }
}

/* --- Pàgines de text (legals, gràcies, 404) --------------------------------- */
.document{padding-block:calc(var(--cap-h) + clamp(3rem,7vw,5.5rem)) var(--seccio)}
.document__cos{max-width:44rem}
.document .h1{font-size:clamp(2.4rem,1.5rem + 3.2vw,4rem);max-width:none}
.document .entrada{margin-top:1.5rem}
.document h2{font-size:1.25rem;letter-spacing:-.015em;margin-top:2.75rem;padding-top:1.25rem;border-top:1px solid var(--linia)}
.document p,.document li{color:var(--tinta-2)}
.document h2+p,.document h2+ul,.document h2+dl{margin-top:.75rem}
.document ul{margin-top:.75rem}
.document ul li{position:relative;padding-left:1.25rem}
.document ul li::before{content:"";position:absolute;left:0;top:.7em;width:.5rem;height:1px;background:var(--tinta-3)}
.document ul li+li{margin-top:.4rem}
.document ul+p,.document dl+p{margin-top:1em}
.document dl{display:grid;grid-template-columns:minmax(8rem,auto) 1fr;border-top:1px solid var(--linia)}
.document dt,.document dd{padding:.65rem 0;border-bottom:1px solid var(--linia)}
.document dt{font-family:var(--mono);font-size:.8125rem;color:var(--tinta-3);padding-right:1.25rem}
.document dd{color:var(--tinta)}
.document a{color:var(--tinta)}
.document a:hover{color:var(--accent-text)}
.document .actualitzat{margin-top:3rem;font-family:var(--mono);font-size:.8125rem;color:var(--tinta-3)}
.document .accio{margin-top:2.25rem}
.document .accio .boto{color:#fff}
.document .eti{margin-bottom:1.25rem}
/* Gràcies: l'estat de la sol·licitud en una targeta (la línia de temps és la
   de «Què passa després», bloc Contacte) i els enllaços en una llista agrupada */
.passos--estat,.document ul.enllacos{--targeta:#fff}
.passos--estat{margin-top:2.25rem;padding:1.5rem 1.5rem 1.4rem;border:1px solid var(--linia);border-radius:16px;background:var(--targeta);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 34px -20px rgba(16,24,40,.22)}
.document .passos+h2{border-top:0;padding-top:0}
.passos--estat .n{background:var(--targeta)}
.passos--estat .fet .n{position:relative;border-color:var(--ok);background:var(--ok);font-size:0}
.passos--estat .fet .n::after{content:"";position:absolute;left:50%;top:46%;width:.34rem;height:.64rem;
  border:solid #fff;border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg)}
.passos--estat .fet::after{background:var(--ok)}
.passos--estat .ara .n{border-color:var(--accent-text);color:var(--accent-text);box-shadow:0 0 0 4px var(--accent-suau)}
.document ul.enllacos{margin-top:.9rem;border:1px solid var(--linia);border-radius:12px;background:var(--targeta);overflow:hidden}
.document ul.enllacos li{padding-left:0}
.document ul.enllacos li::before{display:none}
.document ul.enllacos li+li{margin-top:0;border-top:1px solid var(--linia)}
.enllacos a{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:3.25rem;padding:.8rem 1.1rem;font-weight:500;
  text-decoration:none;transition:background-color .15s var(--e-out),color .15s var(--e-out)}
.enllacos a:focus-visible{outline-offset:-3px}
.enllacos svg{flex:none;width:1rem;height:1rem;fill:none;stroke:var(--tinta-3);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--e-out),stroke .15s var(--e-out)}
@media (hover:hover){.enllacos a:hover{background:var(--fons)}.enllacos a:hover svg{transform:translateX(3px);stroke:var(--accent-text)}}
.pendent{background:var(--accent-suau);color:var(--accent-text);padding:0 .25rem}
@media (max-width:560px){.document dl{grid-template-columns:1fr}.document dt{border-bottom:0;padding-bottom:0}}

/* --- Transicions entre pàgines (ca / es, legals) ---------------------------- */
/* Chrome 126+ i Safari 18.2+. Firefox navega com sempre. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
.capcalera{view-transition-name:capcalera}

/* --- Moviment reduït i impressió ------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
  /* la demo canvia de pas i de pantalla només amb fos, sense desplaçament */
  html.js .pas,.a-vista,.app__nav em{transform:none!important}
  .app__nav::before{transition:none}
}
/* Impressió: la pàgina per portar a la reunió. Tinta sobre paper, res invisible, els comptadors
   amb el valor final, la demo com a text seguit i, al final, la web i el correu. */
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  /* tot en tinta sobre paper, també els escenaris foscos i el tema fosc del sistema */
  :root,[data-tema="fosc"],.capcalera[data-sobre="fosc"]{
    --fons:#fff;--fons-2:#f6f7f9;--fons-3:#eceef2;--tinta:#0e1116;--tinta-2:#333;--tinta-3:#555;
    --linia:#c9cdd4;--linia-2:#9aa0a8;--accent-text:#b8174f;--accent-linia:#b8174f;--accent-suau:#f7e3ea;--ok:#1f7a4d;color-scheme:light}
  html{font-size:12px}
  body,.escena,.seccio,.peu{background:#fff!important;color:#111!important}
  /* fora el que no serveix en paper */
  .capcalera,.menu,.barra-cta,.formulari,.salta,.ticker,.reticula,.video,.rec-nav,.recorregut__app,
  .cta-linia,.portada__accio .boto,.preguntes__accio,.fundadors .accio,.peu__marca-gran,.fitxa-peca,
  .registre,.planol__canto,.hud:not(.hud--br),.contacte__alt li:last-child{display:none!important}   /* del HUD, al paper només queda «Exemple» */
  /* res invisible: ni el que es revela en fer scroll ni els passos de la demo */
  .revela,.revela-carrega,.pas,.portada__titol .linia>span{opacity:1!important;transform:none!important;animation:none!important}
  html.js .recorregut{height:auto!important}
  html.js .recorregut__escena{position:static!important;height:auto!important;padding:0!important;display:block!important}
  .recorregut__graella{display:block!important}
  html.js .rec-passos{display:grid!important;gap:1.25rem!important}
  html.js .pas{grid-area:auto!important;pointer-events:auto}
  .pas .peu-nota{display:block!important}
  /* els comptadors, amb el valor final (el .sr que posa deriva.js ja el porta) */
  [data-compta][aria-hidden="true"]{display:none!important}
  .stat__n .sr,.gran__n .sr,.garantia__gran .sr{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;white-space:nowrap}
  /* el plànol, en línia sobre paper: els tokens ja el passen a tinta; aquí, el que no és un token.
     La revisió trobada (4) i els globus continuen en magenta, com a la pantalla */
  .despiece .pl-paper{fill:none;stroke:none}
  .despiece .feix,.despiece .pols{display:none!important}
  .despiece .pl-taca{fill:#111}
  /* les marques petites que diuen alguna cosa (els quadrets de la confiança) surten encara
     que el navegador no imprimeixi els fons */
  .portada__confianca li::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  /* ritme: menys aire, i cap bloc partit per la meitat */
  .escena,.seccio,.declaracio{padding-block:10mm!important;min-height:0!important}
  .portada{padding-top:0!important}
  .xifres{margin-top:8mm}
  .cap,.xifres__cap,.preguntes__cap,.fundadors__text,.contacte__cap{break-after:avoid}
  h2,h3,.pas__h{break-after:avoid}
  .stat,.garantia-cel,.proces li,.faq details,.comparacio tr,.cronologia__pas,.informe,.garantia,.passos li,.pas{break-inside:avoid}
  /* les respostes de les preguntes, obertes (Firefox i Safari: ho fa deriva.js, bloc 9) */
  .faq details::details-content{content-visibility:visible!important;block-size:auto!important}
  .faq summary::after{display:none}
  /* les fonts de les xifres, amb l'adreça */
  .stat__font a::after{content:" · " attr(href);display:inline!important;word-break:break-all;font-size:.8em}
  a{color:inherit!important}
  /* al final, on es demana el diagnòstic: la web i el correu (el <p> el genera portada-industria.py) */
  .nomes-paper{display:block!important;margin-top:6mm;font-weight:600;color:#111}
}
/* fora de la impressió, la línia del paper no es veu */
.nomes-paper{display:none}