/* ============================================================
   DESIGN SYSTEM — contrast i ritme
   Es carrega DESPRÉS de site-chrome.css a totes les pàgines.
   No reescriu res del que ja funciona: només afegeix la paleta
   ampliada del CV (navy + sorra) i les utilitats de banda.
   ============================================================ */

:root{
  --navy:#1A2148;
  --navy-deep:#0E1330;
  --blue-light:#8FA3F7;
  --sand:#F7F4EE;
  --sand-line:#E8E1D3;
}

/* ===== 1. BANDA FOSCA — una per pàgina, mai dues =====
   Marca el punt de la pàgina que ha de pesar més. */
section.band-dark{
  background:var(--navy) !important;
  color:#E7E9F5;
}
section.band-dark.band-deep{background:var(--navy-deep) !important}
section.band-dark h1,
section.band-dark h2,
section.band-dark h3,
section.band-dark h4{color:#fff}
section.band-dark p,
section.band-dark li,
section.band-dark small{color:#AEB5D4}
section.band-dark .label,
section.band-dark .eyebrow,
section.band-dark .sec-label{color:var(--blue-light)}
section.band-dark strong,
section.band-dark b{color:#fff}
/* Targetes dins d'una banda fosca.
   IMPORTANT: si una targeta es queda amb fons blanc dins de la banda, el seu
   text (gris clar) es torna il·legible. Qualsevol targeta nova que s'afegeixi
   a una secció .band-dark s'ha de llistar aquí. */
section.band-dark .svc-card,
section.band-dark .use-card,
section.band-dark .phase-card,
section.band-dark .del-card,
section.band-dark .value-card,
section.band-dark .faq-item,
section.band-dark .puntual-card,
section.band-dark .problem-card,
section.band-dark .svc-item,
section.band-dark .res-card,
section.band-dark .fmt{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.13);
  box-shadow:none;
}
section.band-dark .svc-card:hover,
section.band-dark .use-card:hover,
section.band-dark .phase-card:hover,
section.band-dark .del-card:hover,
section.band-dark .value-card:hover,
section.band-dark .puntual-card:hover,
section.band-dark .problem-card:hover,
section.band-dark .svc-item:hover,
section.band-dark .fmt:hover{
  background:rgba(255,255,255,0.085);
  border-color:rgba(143,163,247,0.42);
}
/* el text de dins ha de pujar de to, no heretar el gris del fons clar */
section.band-dark .problem-card,
section.band-dark .problem-card p,
section.band-dark .svc-item,
section.band-dark .svc-item p,
section.band-dark .use-card p,
section.band-dark .phase-card p,
section.band-dark .puntual-card p{color:#C3C9E4}
section.band-dark .problem-card h3,
section.band-dark .svc-item h3,
section.band-dark .svc-item h4{color:#fff}
/* icones sobre fons clar dins la banda: se'ls treu el pa blanc */
section.band-dark .problem-icon,
section.band-dark .puntual-icon,
section.band-dark .svc-item-icon,
section.band-dark .use-icon{background:rgba(255,255,255,0.09)}
/* l'accent blau fosc no es llegeix sobre navy */
section.band-dark .highlight,
section.band-dark .accent,
section.band-dark a:not(.btn){color:var(--blue-light)}
section.band-dark .problem-close{color:#D5DAEE}
/* el blau de marca (#4967E9) sobre navy es queda en 3,4:1. Sobre fons fosc
   sempre la variant clara. */
section.band-dark .problem-close span,
section.band-dark .svc-tag,
section.band-dark em,
section.band-dark .num,
section.band-dark [class*="-num"]{color:var(--blue-light)}
section.band-dark .sector-pill,
section.band-dark .aud-pill,
section.band-dark .svc-tag,
section.band-dark .area-chips span{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.16);
  color:#C6CCE6;
}
section.band-dark .btn-outline{
  border-color:rgba(255,255,255,0.30);
  color:#fff;
  background:rgba(255,255,255,0.06);
}
section.band-dark .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,0.14)}

/* ===== 2. SORRA — el tercer fons =====
   Abans l'alternança era blanc / #f8f8fa, que és gairebé blanc:
   no es percebia. El sorra sí es llegeix i escalfa la pàgina. */
section.band-sand{background:var(--sand) !important}
section.band-sand .svc-card,
section.band-sand .value-card,
section.band-sand .puntual-card,
section.band-sand .phase-card,
section.band-sand .del-card,
section.band-sand .faq-item,
section.band-sand .fmt{border-color:var(--sand-line)}

/* ===== 3. FILETS EN COMPTES D'OMBRES =====
   Les targetes de llistat porten totes la mateixa ombra difusa i
   això aplana la lectura. El filet dona un aire més de consultoria. */
.svc-card,.use-card,.puntual-card,.del-card,.faq-item{
  box-shadow:none;
  border:1px solid var(--gray-200);
  transition:border-color .3s,transform .3s,background .3s;
}
.svc-card:hover,.use-card:hover,.puntual-card:hover,.del-card:hover{
  border-color:rgba(73,103,233,0.38);
  transform:translateY(-2px);
  box-shadow:none;
}

/* ===== 4. NUMERACIÓ I ETIQUETES AMB PES =====
   Estaven en gris clar i desapareixien; articulen la pàgina de franc. */
.svc-num,.phase-num,.step-num,.area-num{
  color:var(--blue);
  font-weight:800;
  letter-spacing:.04em;
}
/* .phase-num porta opacity:0.15 (número fantasma). Sobre fons clar funciona;
   sobre navy desapareix del tot. Només s'apuja dins de la banda fosca. */
section.band-dark .phase-num{opacity:.45;color:var(--blue-light)}
.label,.sec-label,.eyebrow{font-weight:700}

/* ===== 5. DINAMISME — entrada escalonada =====
   Abans tot entrava alhora. 70 ms de diferència entre germans
   fa que una fila es llegeixi d'esquerra a dreta. */
.svc-grid > .reveal:nth-child(2),.use-grid > .reveal:nth-child(2),
.values-grid > .reveal:nth-child(2),.puntual-grid > .reveal:nth-child(2),
.res-grid > .reveal:nth-child(2),.fmt-grid > .reveal:nth-child(2){transition-delay:.07s}
.svc-grid > .reveal:nth-child(3),.use-grid > .reveal:nth-child(3),
.values-grid > .reveal:nth-child(3),.puntual-grid > .reveal:nth-child(3),
.res-grid > .reveal:nth-child(3),.fmt-grid > .reveal:nth-child(3){transition-delay:.14s}
.svc-grid > .reveal:nth-child(4),.use-grid > .reveal:nth-child(4),
.values-grid > .reveal:nth-child(4),.puntual-grid > .reveal:nth-child(4),
.res-grid > .reveal:nth-child(4),.fmt-grid > .reveal:nth-child(4){transition-delay:.21s}
.svc-grid > .reveal:nth-child(5),.values-grid > .reveal:nth-child(5),
.res-grid > .reveal:nth-child(5){transition-delay:.28s}
.svc-grid > .reveal:nth-child(6),.values-grid > .reveal:nth-child(6),
.res-grid > .reveal:nth-child(6){transition-delay:.35s}

/* ===== 6. FORA LES ANIMACIONS AMBIENTALS EN BUCLE =====
   Els orbes amb filter:blur animats en loop gasten bateria i no
   aporten res. El degradat es queda; el moviment perpetu, no. */
.hero::before,.hero::after,.hero-orb,
.page-hero::before,.page-hero::after{animation:none !important}

@media(prefers-reduced-motion:reduce){
  [class*="-grid"] > .reveal{transition-delay:0s !important}
}

/* ============================================================
   MÒBIL — indicador de lliscar i hero de la home a 2 columnes
   ============================================================ */
@media(max-width:768px){

  /* ---- 1. "Llisca" molt més visible ----
     Estava a sota, en gris clar i petit: no s'entenia que calgués
     arrossegar. Ara va a sobre del carrusel, en blau, amb la fletxa
     desplaçant-se i una vora esvaïda que insinua que hi ha més. */
  .mob-scroll-hint{
    order:1;   /* just abans del carrusel, no a dalt de tot de la secció */
    margin:0 0 14px !important;
    color:var(--blue) !important;
    font-size:11.5px !important;
    animation:none !important;
    justify-content:flex-start !important;
  }
  .mob-scroll-hint svg{animation:hintSlide 1.6s ease-in-out infinite}
  @keyframes hintSlide{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
  /* el hint és germà del grid; cal que el contenidor sigui flex per fer order */
  .svc-grid,.puntual-grid,.use-grid,.phase-grid,.del-grid,.values-grid,.portfolio-grid{scroll-padding-left:20px}
  section:has(> .container > .mob-scroll-hint) .container,
  .container:has(> .mob-scroll-hint){display:flex;flex-direction:column}
  /* vora dreta esvaïda: es veu que el contingut continua */
  .mob-carousel{order:2;position:relative;-webkit-mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.15));mask-image:linear-gradient(90deg,#000 88%,rgba(0,0,0,.15))}

  /* ---- 2. Hero de la home: foto integrada amb el text ----
     Abans la foto quedava al final, sota un titular i un subtítol
     llarguíssims. Ara comparteix fila amb el subtítol i les xifres. */
  .hero-inner{
    display:grid;
    grid-template-columns:140px 1fr;
    grid-template-areas:"b b" "t t" "p s" "p f" "c c";
    gap:0 16px;
    text-align:left !important;
  }
  .hero-text{display:contents}
  /* etiqueta i titular centrats al mòbil (la resta del bloc, alineat) */
  .hero-badge{grid-area:b;margin-bottom:12px;font-size:10.5px;letter-spacing:1.8px;text-align:center;display:block;width:100%}
  /* El titular portava salts de línia FORÇATS per CSS (.hl-1/.hl-2/.accent
     a display:block). Al mòbil això el trencava en 4 línies, dues d'elles
     molt curtes, i semblava una llista. Es deixa fluir i s'equilibra. */
  .hero h1{grid-area:t;margin:0 0 20px;line-height:1.16;
    font-size:clamp(23px,6.4vw,30px);letter-spacing:-0.025em;text-wrap:balance;text-align:center}
  .hero h1 .hl-1,.hero h1 .hl-2,.hero h1 .accent{display:inline}
    .hero-visual{grid-area:p;max-width:140px;margin:0;align-self:stretch}
  .hero-visual img{height:100%;aspect-ratio:auto;min-height:210px}
  .hero-visual::before{inset:8px -6px -6px 9px;border-radius:6px}
  .hero-sub{grid-area:s;margin:0 0 12px !important;font-size:14.5px;line-height:1.6;text-align:left}
  .hero-proof{grid-area:f;margin-top:0;padding-top:11px;flex-direction:column;gap:7px;align-items:flex-start;justify-content:flex-start !important;font-size:12.5px}
  .hero-proof span{flex:0 0 auto}
  .hero-proof span:nth-child(4){display:none}  /* al mòbil, tres xifres */
  .hero-ctas{grid-area:c;margin-top:26px;gap:10px;justify-content:stretch}
  .hero-ctas .btn{flex:1 1 100%;justify-content:center}

  /* el text llarg del subhero es reserva per a l'escriptori */
  .hero-sub--long{display:none}
}
@media(min-width:769px){ .hero-sub--mob{display:none} }