/* ════════════════════════════════════════════════════════════
   motion.css — Capa 2 d'INNOVO: textura, profunditat i moviment.

   Dues regles que no es negocien:
   1. Res depèn del JS per ser llegible. Sense JS tot es veu igual, quiet.
   2. Tot el moviment s'apaga sol amb prefers-reduced-motion. En un centre
      que atén persones amb dificultats d'atenció, això no és un detall.
   ════════════════════════════════════════════════════════════ */

/* ── Patró geomètric de marca (el dels seus carrusels) ────── */
.pattern{position:relative;isolation:isolate}
.pattern::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("/assets/img/patro-fosc.svg") repeat;
  background-size:520px 520px;opacity:.05;
}
.bg-ink.pattern::after,.bg-mint.pattern::after{
  background-image:url("/assets/img/patro-clar.svg");opacity:.10
}
.bg-mint.pattern::after{opacity:.30}

/* ── Revelat en scroll ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
/* XARXA DE SEGURETAT: si el JS no arriba, el revelat no pot deixar la pagina
   en blanc. Amb .no-js tot es veu, quiet. El H1 de l'inici es el LCP. */
.no-js .reveal{opacity:1;transform:none;transition:none}
.reveal-d1{transition-delay:.08s}
.reveal-d2{transition-delay:.16s}
.reveal-d3{transition-delay:.24s}
.reveal-d4{transition-delay:.32s}
.reveal-d5{transition-delay:.40s}
.reveal-d6{transition-delay:.48s}

/* El traç del titular es dibuixa quan la secció entra en pantalla */
.underline-brand::after{transform-origin:left center;transform:scaleX(0);
  transition:transform .8s cubic-bezier(.22,1,.36,1) .12s}
.reveal.in .underline-brand::after{transform:scaleX(1)}
.no-js .underline-brand::after,
.hero .underline-brand::after{transform:scaleX(1)}

/* Les imatges entren amb una cortina, no apareixent de cop */
.curtain{position:relative;overflow:hidden}
.curtain img{transform:scale(1.06);transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.curtain::before{
  content:"";position:absolute;inset:0;z-index:2;background:var(--beige);
  transform:scaleY(1);transform-origin:bottom;
  transition:transform .9s cubic-bezier(.76,0,.24,1)
}
.curtain.in::before{transform:scaleY(0)}
.curtain.in img{transform:none}
.bg-ink .curtain::before{background:var(--ink)}
.no-js .curtain::before{display:none}
.no-js .curtain img{transform:none}

/* ── Hero: la foto sagna cap a la vora dreta ──────────────── */
@media (min-width:1024px){
  .hero{padding-bottom:0}
  .hero-grid{grid-template-columns:1fr 1fr;gap:64px;align-items:center}
  .hero-media{margin-right:calc((100vw - var(--shell)) / -2 - var(--pad));margin-bottom:-1px}
  .hero-media img{aspect-ratio:4/5;width:100%}
}
.hero-badge{z-index:3;opacity:0;transform:translateY(14px);
  transition:transform .5s cubic-bezier(.22,1,.36,1) .55s,opacity .5s ease .55s}
.hero-media.in .hero-badge,.no-js .hero-badge{opacity:1;transform:none}

/* ── Banda duotó a sang amb titular a sobre ───────────────── */
.band{position:relative;min-height:clamp(340px,50vh,540px);display:grid;
  align-items:center;overflow:hidden;background:var(--ink)}
.band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.5;z-index:0;transform:scale(1.05);
  transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.band.in > img{transform:none}
.band .shell{position:relative;z-index:2;color:var(--white)}
.band h2,.band h1{color:var(--white)}
.band .lead{color:#e6e4e0}
.band .eyebrow{color:var(--mint);opacity:1}

/* ── Seccions partides: imatge + text ─────────────────────── */
.split{display:grid;gap:36px;align-items:center}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:64px}
  .split.rev > *:first-child{order:2}
}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* ── Mosaic d'espais ──────────────────────────────────────── */
.mosaic{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
.mosaic .cell{overflow:hidden;position:relative;aspect-ratio:1}
@media (min-width:900px){
  .mosaic{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px}
  .mosaic .cell{aspect-ratio:auto;height:100%}
  .mosaic .m-big{grid-column:span 2;grid-row:span 2}
  .mosaic .m-wide{grid-column:span 2}
}
.mosaic img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.mosaic .cell:hover img{transform:scale(1.06)}
.mosaic figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;
  background:linear-gradient(transparent,rgba(45,42,41,.85));color:#fff;
  font-size:.82rem;opacity:0;transition:opacity .3s ease}
.mosaic .cell:hover figcaption{opacity:1}

/* ── Targetes amb imatge ──────────────────────────────────── */
.card{position:relative;overflow:hidden;transition:background .3s ease}
.card-media{margin:-32px -28px 20px;overflow:hidden;aspect-ratio:16/9}
.card-media img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.22,1,.36,1)}
.card:hover .card-media img{transform:scale(1.06)}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--mint);transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.card:hover::after{transform:scaleX(1)}

/* ── Passos amb número gegant ─────────────────────────────── */
.step{position:relative;overflow:hidden}
.step .n{font-size:clamp(3.4rem,7vw,5.2rem)}
.step::before{content:"";position:absolute;right:-34px;top:-34px;width:124px;
  height:124px;border:1px solid rgba(255,255,255,.14);transform:rotate(18deg)}

/* ── Enllaç de text amb subratllat que creix ────────────────
   Ha d'estar subratllat JA en repòs: un enllaç dins d'un paràgraf que només
   es distingeix en passar-hi el ratolí no existeix per a qui llegeix (i per a
   qui va amb el dit, directament no es veu mai). En hover engreixa. */
.link-u{text-decoration:none;background-image:linear-gradient(var(--mint-deep),var(--mint-deep));
  background-repeat:no-repeat;background-size:100% 1px;background-position:0 100%;
  transition:background-size .35s cubic-bezier(.22,1,.36,1);padding-bottom:2px}
.link-u:hover{background-size:100% 3px}
.bg-ink .link-u,.band .link-u{background-image:linear-gradient(var(--mint),var(--mint))}

/* ── Navegació d'àrees enganxosa al hub ───────────────────── */
.areanav{position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--rule)}
@media (min-width:1024px){ .areanav{top:76px} }
.areanav ul{display:flex;gap:26px;list-style:none;margin:0;padding:14px 0;
  overflow-x:auto}
.areanav a{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.1em;font-size:.76rem;text-decoration:none;white-space:nowrap;
  padding-bottom:4px;border-bottom:2px solid transparent}
.areanav a:hover,.areanav a.active{border-color:var(--mint)}

/* ── Botons: el farciment puja des de baix ────────────────── */
.btn{position:relative;overflow:hidden;z-index:0}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  transform:translateY(101%);transition:transform .38s cubic-bezier(.76,0,.24,1)}
.btn:hover::before{transform:translateY(0)}
.btn:hover{transform:none}
.btn-ink::before{background:var(--mint)}
.btn-ink:hover{color:var(--ink);border-color:var(--mint)}
.btn-mint::before{background:var(--ink)}
.btn-mint:hover{color:var(--white);border-color:var(--ink)}
.btn-outline::before{background:var(--ink)}
.btn-outline:hover{color:var(--white)}
.bg-ink .btn-outline::before{background:var(--white)}
.bg-ink .btn-outline:hover{color:var(--ink)}

/* ── Xips amb vida ────────────────────────────────────────── */
.chips li{transition:transform .25s ease,border-color .25s ease}
.chips li:hover{transform:translateY(-3px);border-color:var(--mint-deep)}

/* ── Capçalera que s'amaga en baixar i torna en pujar ─────── */
.masthead{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .2s ease}
.masthead.is-hidden{transform:translateY(-100%)}

/* ── Barra de progrés de lectura ──────────────────────────── */
.progress{position:fixed;left:0;top:0;height:3px;background:var(--mint);
  width:0;z-index:120;transition:width .12s linear}

/* ── Entrada de pàgina ────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  main{animation:fadein .5s ease both}
  @keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .curtain::before{display:none}
  .curtain img,.band > img{transform:none}
  .hero-badge{opacity:1;transform:none}
  .underline-brand::after{transform:scaleX(1);transition:none}
  main{animation:none}
}

/* ── Arreglat: scroll horitzontal al mòbil ────────────────────
   La capçalera enganxosa s'amagava amb transform. Un ancestre amb
   transform converteix els fills position:fixed en absoluts respecte
   d'ell, i el panell del menú (que viu fora de pantalla a la dreta)
   passava a estirar l'amplada del document: 780px en una pantalla de 390.
   L'amagat de la capçalera queda NOMÉS per a escriptori, on aquest panell
   no existeix. Res d'overflow-x:hidden: això tapa el símptoma. */
.masthead.is-hidden{transform:none}
@media (min-width:1024px){
  .masthead.is-hidden{transform:translateY(-100%)}
}
@media (max-width:1023px){
  .nav{visibility:hidden}
  .nav.is-open{visibility:visible}
}

/* ── Arreglat: la banda no cobria ────────────────────────────
   La imatge va dins d'un <picture>, i era el <picture> qui feia de
   cel·la del grid: la foto quedava a dalt i el titular a sota, en comptes
   de tenir-lo a sobre. Ara qui s'absolutitza es el <picture>, i s'hi afegeix
   un vel de tinta perque el text blanc tingui contrast real sobre qualsevol
   foto, no nomes sobre les fosques. */
.band > picture{position:absolute;inset:0;z-index:0;display:block}
.band > picture img{width:100%;height:100%;object-fit:cover;opacity:1;
  transform:scale(1.05);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}
.band.in > picture img{transform:none}
.band::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(45,42,41,.92) 0%,rgba(45,42,41,.78) 46%,rgba(45,42,41,.42) 100%)}
.band .shell{z-index:2}
.band{padding-block:64px}
@media (prefers-reduced-motion:reduce){ .band > picture img{transform:none} }

/* Dada pendent i avís de pàgina legal incompleta */
.pendent{background:var(--mint);color:var(--ink);padding:1px 8px;font-size:.9em;
  white-space:nowrap}
.avis{border-left:4px solid var(--mint-deep);background:var(--beige);
  padding:16px 18px;margin:0 0 28px;font-size:.98rem}