/* ============================================================
   AutomatitzaIA · brand.css — BASE COMUNA A TOTES LES PÀGINES
   ============================================================
   Aquí hi va tot el que qualsevol pàgina del lloc necessitarà:
   tokens, reset, tipografia, la marca (logo i lockup), els
   components compartits (botons, targetes, graella, eyebrow) i
   les peces d'estructura que es repeteixen a cada pàgina (nav,
   peu, franja de signatura, botó flotant de WhatsApp).

   Les tipografies NO es declaren aquí: venen de
   /assets/fonts/fonts.css, que es carrega abans amb el seu propi
   <link>. No dupliquis els @font-face.

   El CSS propi d'una pàgina concreta va al seu fitxer (la
   portada, per exemple, a home.css).

   Tokens segons el Manual d'identitat v1.1 i el Sistema gràfic (§2, §7).
   Regla d'or: mint i ambre són colors d'accent i il·lustració (fons, punts
   d'estat, icones). Com a TEXT sobre blanc no compleixen AA — per a això
   hi ha --mint-ink. Els cians de l'isotip pertanyen a la marca gràfica i
   no s'usen mai com a color d'interfície.
   ============================================================ */
:root{
  /* text i neutres */
  --ink:#0A1020;
  --ink-2:#121B33;
  --slate:#5A6786;
  --slate-2:#8391AB;
  --line:#E4E9F2;

  /* fons */
  --bg:#FFFFFF;
  --bg-soft:#F6F8FC;
  --bg-tint:#EEF3FF;
  --paper:#EFEDE7;          /* superfície de marca (papereria) */
  --paper-line:#DED9CE;     /* filet del patró "ritme fi" */

  /* marca */
  --brand:#3B5BFF;
  --brand-dark:#2540D9;
  --brand-soft:#E8EDFF;

  /* accents — mai text pla sobre blanc */
  --mint:#0FB999;
  --mint-soft:#DFF7F1;
  --mint-ink:#08745F;       /* variant llegible del mint (5,7:1 sobre blanc) */
  --amber:#F5A524;
  --amber-soft:#FFF3DC;

  /* degradat de marca (isotip i patró "tall") — 123°, l'angle de l'asta del 7 */
  --mark-1:#07208F;
  --mark-2:#1663C1;
  --mark-3:#1FB8D6;
  --mark-4:#22F2FF;
  --lema:#2A3346;           /* lema sobre paper/blanc */
  --lema-dark:#C7D0E0;      /* lema sobre ink */

  --radius:18px;
  --radius-sm:12px;
  --shadow:0 1px 2px rgba(10,16,32,.04),0 12px 32px -12px rgba(10,16,32,.14);
  --shadow-lg:0 2px 4px rgba(10,16,32,.04),0 28px 60px -24px rgba(10,16,32,.24);
  --shadow-brand:0 1px 2px rgba(10,16,32,.06),0 14px 28px -14px rgba(10,16,32,.34);
  --max:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.65;
  -webkit-font-smoothing:antialiased;font-size:16.5px;
}
h1,h2,h3,h4,.font-display{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.021em;line-height:1.18;font-weight:800}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section--soft{background:var(--bg-soft)}
.section--tint{background:linear-gradient(180deg,#FFF 0%,var(--bg-tint) 100%)}

/* ---------- shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);
  padding:7px 14px;border-radius:99px;margin-bottom:18px;
}
.eyebrow--mint{color:#08745F;background:var(--mint-soft)}
.h2{font-size:clamp(28px,4vw,42px);margin-bottom:16px}
.lede{font-size:clamp(16.5px,1.6vw,19px);color:var(--slate);max-width:64ch}
.section-head{margin-bottom:52px;max-width:760px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center .lede{margin-left:auto;margin-right:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15.5px;
  padding:14px 26px;border-radius:12px;border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow-brand)}
.btn--primary:hover{background:var(--brand-dark);box-shadow:0 2px 4px rgba(10,16,32,.08),0 18px 34px -16px rgba(10,16,32,.42)}
.btn--ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn--wa{background:#1FAF54;color:#fff;box-shadow:var(--shadow-brand)}
.btn--wa:hover{background:#18913F}
.btn--lg{padding:17px 32px;font-size:16.5px}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#D3DCF0}
.card h3{font-size:17.5px;margin-bottom:8px}
.card p{color:var(--slate);font-size:15px}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 6px 20px -14px rgba(10,16,32,.5)}
/* Barra de progrés de scroll. Només s'anima transform: scaleX, que el JS
   actualitza dins d'un rAF a partir de --sp (0 a 1). */
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--mark-2),var(--mark-3));
  transform:scaleX(var(--sp,0));transform-origin:0 50%;
  transition:opacity .2s ease;opacity:.92;pointer-events:none
}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
/* ---------- lockup de marca (Manual d'identitat v1.1, §2) ----------
   Logotip a l'esquerra, isotip a la dreta. Alçada de l'isotip = 2,15× l'alçada
   de majúscula del logotip. Les mides en píxels d'aquí sota es van calcular
   amb la cap height de Plus Jakarta Sans (0,73 em); en passar el logotip a
   Bricolage Grotesque s'han mantingut perquè visualment segueixen quadrant,
   però si algun dia es refà el manual, cal recalcular-les amb la cap height
   de Bricolage.
   Zona de seguretat = 40 % de l'alçada de l'isotip → és el `gap`.
   Mida mínima de l'isotip: 32 px en pantalla. */
.logo{display:inline-flex;align-items:center;gap:13px;text-decoration:none}
.logo__word{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:21px;
  letter-spacing:-.035em;line-height:1.1;color:var(--ink);white-space:nowrap
}
.logo__mark{display:block;height:33px;width:29.8px;flex:none}
/* «Dibuixat» de l'isotip en carregar: una escombrada que revela la marca
   d'esquerra a dreta amb l'arestа inclinada a 123°, l'angle de l'asta del 7.
   Sobre 100 % d'alçada, la vora de baix queda un 72 % de l'amplada a
   l'esquerra de la de dalt: és el pendent que dona aquell angle en una peça
   de 29,8 × 33 px. Es fa un sol cop i no cal JS. */
@keyframes isotipDraw{
  from{clip-path:polygon(-10% 0%, -10% 0%, -82% 100%, -82% 100%)}
  to  {clip-path:polygon(-10% 0%, 210% 0%, 138% 100%, -82% 100%)}
}
.logo__mark{animation:isotipDraw 1.25s cubic-bezier(.22,.7,.28,1) both}

/* versió completa, amb lema — footer i signatura */
.lockup{display:inline-flex;align-items:center;gap:21px}
.lockup__txt{display:flex;flex-direction:column;gap:4px}
.lockup__word{
  font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
  font-size:clamp(27px,3.4vw,34px);letter-spacing:-.035em;line-height:1;color:var(--ink)
}
.lockup__lema{font-size:15.5px;font-weight:400;color:var(--lema);line-height:1.35}
.lockup__mark{display:block;height:53px;width:47.9px;flex:none}
.lockup--dark .lockup__word{color:#fff}
.lockup--dark .lockup__lema{color:var(--lema-dark)}
.nav__links{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:500;color:var(--slate)}
.nav__links a{transition:color .16s ease}
.nav__links a:hover{color:var(--ink)}
/* Pàgina activa. Mentre la web és d'una sola pàgina no s'aplica a res; quan
   hi hagi pàgines reals, el JS (site.js) hi posa .is-current comparant
   data-page amb el <body data-page="…"> de cada pàgina. */
.nav__links a.is-current{color:var(--ink);font-weight:700}
.nav__right{display:flex;align-items:center;gap:14px}
.lang{display:flex;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.lang button{
  border:none;background:transparent;cursor:pointer;font-family:'Bricolage Grotesque',sans-serif;
  font-weight:700;font-size:13px;color:var(--slate);padding:6px 11px;border-radius:7px;transition:.16s
}
.lang button.is-active{background:#fff;color:var(--brand);box-shadow:0 1px 3px rgba(10,16,32,.12)}
.burger{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 11px;cursor:pointer}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.burger span+span{margin-top:4px}

/* ---------- icones ----------
   Joc propi en duotò: silueta plena en currentColor (mai stroke com a cos),
   amb un traç només als pocs elements lineals de cada glif (ja fixat a cada
   <symbol>). fill:currentColor és el que fa que la mateixa icona surti bé en
   blau sobre fons clar, en gris als chips i en cian sobre el degradat de la
   promoció, sense necessitat de cap variant de color. */
.ico{width:22px;height:22px;flex:none;fill:currentColor;stroke:none}
.ico--lg{width:28px;height:28px}
.ico--sm{width:19px;height:19px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#93A0BC;padding:64px 0 28px;font-size:14.5px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer .lockup{margin-bottom:18px}
.footer h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;font-weight:700}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer a:hover{color:#fff}
.footer__bot{padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13.5px;color:#6E7C99}

/* ---------- WhatsApp float ---------- */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:80;display:flex;align-items:center;gap:11px;
  background:#1FAF54;color:#fff;padding:14px 20px 14px 16px;border-radius:99px;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:15px;
  box-shadow:0 4px 8px rgba(10,16,32,.1),0 16px 34px -12px rgba(10,16,32,.44);transition:transform .2s ease
}
.wa-float:hover{transform:translateY(-3px) scale(1.02)}
.wa-float svg{width:23px;height:23px;fill:#fff}

/* ---------- signatura de marca ----------
   Superfície de paper #EFEDE7. El patró "ritme fi" (manual §3.1) —filets de
   2 px cada 15 px a 123°, l'angle de l'asta del 7— es fa servir com una cinta
   estreta a la vora superior, no com a fons general: així el lockup se sosté
   sobre paper net i no queda mai text ni logotip a sobre del patró. */
.signature{position:relative;background:var(--paper);padding:56px 0}
.signature::before{
  content:"";position:absolute;top:0;left:0;right:0;height:9px;
  background:repeating-linear-gradient(123deg,var(--paper-line) 0 2px,transparent 2px 15px);
  animation:ribbon 64s linear infinite
}
/* La cinta llisca molt a poc a poc. El desplaçament ha de ser múltiple exacte
   del període del patró perquè el bucle no faci salt: el patró es repeteix
   cada 15 px sobre l'eix del degradat, i desplaçar-lo 17,885 px en horitzontal
   equival a un període (15 / sin 123°). 143,08 px = 8 períodes. */
@keyframes ribbon{to{background-position:143.08px 0}}
.signature__inner{display:flex;justify-content:center}
/* El lockup és marcatge viu, no cap actiu exportat: abans hi havia un MP4 de
   464 KB amb un PNG de base, i tots dos van quedar desfasats el dia que va
   canviar la tipografia. Dibuixant-lo aquí, el logotip d'aquesta franja i el
   del peu no poden divergir mai. */
.signature__logo{width:min(760px,100%);display:flex;justify-content:center}
.signature .lockup{gap:28px}
.signature .lockup__word{font-size:clamp(34px,5vw,52px)}
.signature .lockup__lema{font-size:clamp(15px,1.7vw,18px)}
.signature .lockup__mark{height:clamp(56px,7.6vw,82px);width:auto;aspect-ratio:271/300}

/* Entrada: primer l'isotip amb la mateixa escombrada diagonal a 123° de
   l'animació original, després el logotip i el lema. Es dispara un sol cop,
   quan la franja entra a pantalla (la classe .is-in la posa site.js). */
.signature .lockup__word,
.signature .lockup__lema,
.signature .lockup__mark{opacity:0}
.signature__logo.is-in .lockup__mark{animation:markDraw 1.25s cubic-bezier(.22,.7,.28,1) .1s both}
.signature__logo.is-in .lockup__word{animation:signRise .7s cubic-bezier(.22,.7,.28,1) .5s both}
.signature__logo.is-in .lockup__lema{animation:signRise .7s cubic-bezier(.22,.7,.28,1) .78s both}
@keyframes markDraw{
  from{opacity:1;clip-path:polygon(-10% 0%, -10% 0%, -82% 100%, -82% 100%)}
  to  {opacity:1;clip-path:polygon(-10% 0%, 210% 0%, 138% 100%, -82% 100%)}
}
@keyframes signRise{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:none}
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ---------- franja CTA de tancament ----------
   Patró reutilitzable per tancar les pàgines interiors amb una crida a
   l'acció. Encara no s'usa a la portada (ja tanca amb el formulari de
   contacte i la signatura); existeix perquè /serveis/, /preus/ i les
   pàgines de sector tanquin totes igual.

   Ús:
     <section class="cta-strip">
       <div class="wrap cta-strip__inner">
         <div>
           <h2 class="cta-strip__h" data-ca="…" data-es="…">…</h2>
           <p class="cta-strip__p" data-ca="…" data-es="…">…</p>
         </div>
         <a href="/#contacte" class="btn btn--primary btn--lg" data-ca="…" data-es="…">…</a>
       </div>
     </section> */
.cta-strip{background:var(--bg-soft);border-top:1px solid var(--line);padding:56px 0}
.cta-strip__inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-strip__h{font-size:clamp(22px,2.6vw,30px);margin-bottom:6px}
.cta-strip__p{color:var(--slate);font-size:16px;max-width:52ch}
@media(max-width:640px){
  .cta-strip{padding:44px 0}
  .cta-strip__inner{flex-direction:column;align-items:flex-start;gap:22px}
  .cta-strip__inner .btn{width:100%}
}

/* ---------- reveal ----------
   Al translate i l'opacitat s'hi suma un desenfocament que es va aclarint:
   dona sensació d'entrada en focus sense moure gaire res. L'esglaonat el
   posa site.js, i és per secció, no global. */
.reveal{
  opacity:0;transform:translateY(22px);filter:blur(6px);
  transition:opacity .6s ease,transform .6s ease,filter .6s ease
}
.reveal.is-in{opacity:1;transform:none;filter:blur(0)}

/* ---------- tilt de les targetes ----------
   Només amb ratolí o llapis: en una pantalla tàctil no hi ha cursor i el
   "hover" es quedaria enganxat. El JS escriu el transform en línia.
   El will-change va només a la targeta que té el cursor a sobre: posar-lo a
   totes crearia una capa de composició per cada targeta de la pàgina (n'hi
   ha quaranta) sense guanyar res. */
@media(pointer:fine){
  .card:hover{will-change:transform}
}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
  .nav__links{display:none}
  .nav__links.is-open{
    display:flex;flex-direction:column;position:absolute;top:72px;left:0;right:0;
    background:#fff;border-bottom:1px solid var(--line);padding:22px 24px;gap:18px;
    box-shadow:0 20px 40px -20px rgba(10,16,32,.4)
  }
  .burger{display:block}
  .nav__right .btn{display:none}
}
@media(max-width:640px){
  .section{padding:70px 0}
  .g-2,.g-4{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .wa-float span{display:none}
  .wa-float{padding:16px;border-radius:50%}
  .lockup{flex-direction:column-reverse;gap:16px}
  .lockup__txt{align-items:center;text-align:center}
  .footer__grid .lockup{flex-direction:row;gap:18px}
  .footer__grid .lockup__txt{align-items:flex-start;text-align:left}
}

/* ---------- moviment reduït ----------
   Kill-switch general. Qualsevol efecte nou que s'afegeixi a qualsevol
   pàgina ha de quedar neutralitzat aquí. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none;filter:none}
  /* El que no es cobreix desactivant animacions i transicions: estats finals
     forçats i efectes que depenen del JS. Els comptadors, el paral·laxi i el
     tilt no s'arriben a registrar (site.js/home.js miren AIA.reduced). */
  .logo__mark{animation:none;clip-path:none}
  /* El lockup de la signatura parteix d'opacity:0 i el fa visible l'animació.
     Si l'observador no arribés a disparar-se, es quedaria invisible: aquí
     forcem l'estat final perquè no depengui de res. */
  .signature .lockup__word,
  .signature .lockup__lema,
  .signature .lockup__mark{opacity:1;animation:none;clip-path:none;transform:none}
  .nav::after{display:none}
  .card:hover{will-change:auto}
  .mock{transform:none!important}
}