/* ════════════════════════════════════════════════════════════
   directori.css — L'índex de serveis, i els acabats fins.

   El directori substitueix la cinta en moviment. Fa la mateixa feina
   —ensenyar tot el catàleg de cop— però enllaça, es pot rastrejar i
   té forma d'índex imprès, que és el llenguatge de la marca.
   ════════════════════════════════════════════════════════════ */

.directori{padding-block:64px}
@media (min-width:768px){ .directori{padding-block:96px} }
.dir-head{margin-bottom:40px}

.dir-cols{display:grid;gap:44px}
@media (min-width:860px){ .dir-cols{grid-template-columns:1fr 1fr;gap:56px} }
@media (min-width:1180px){ .dir-cols{grid-template-columns:1.1fr 1fr .8fr;gap:52px} }

.dir-col > h3{font-size:.76rem;letter-spacing:.2em;color:var(--gray);
  padding-bottom:14px;border-bottom:2px solid var(--ink);margin:0 0 6px}
.dir-col ol{list-style:none;margin:0;padding:0}
.dir-col li{border-bottom:1px solid var(--rule)}

.dir-col a{display:flex;align-items:baseline;gap:14px;padding:15px 0;
  text-decoration:none;color:var(--ink)}
.dir-n{font-family:var(--font-display);font-size:.72rem;letter-spacing:.1em;
  color:var(--gray);flex:0 0 auto;transition:color .25s ease}
.dir-t{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(.95rem,1.35vw,1.12rem);letter-spacing:.02em;line-height:1.2;
  flex:0 1 auto}
/* Els punts de guia de l'índex: creixen i omplen el que queda de línia */
.dir-lead{flex:1 1 auto;height:1px;min-width:18px;align-self:center;
  background-image:radial-gradient(circle,var(--rule) 1px,transparent 1px);
  background-size:6px 2px;background-repeat:repeat-x;background-position:0 center}
.dir-flag{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.08em;font-size:.62rem;background:var(--mint);color:var(--ink);
  padding:3px 8px;flex:0 0 auto;align-self:center}
.dir-go{flex:0 0 auto;color:var(--gray);transform:translateX(-6px);opacity:0;
  transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .28s ease}

.dir-col a:hover .dir-go{transform:none;opacity:1}
.dir-col a:hover .dir-t{color:var(--gray)}
.dir-col a:hover .dir-n{color:var(--ink)}
.dir-col a:focus-visible{outline-offset:-3px}
.dir-out{margin:44px 0 0;font-size:1.02rem}

/* ── Índex de la pàgina, a les fitxes ─────────────────────── */
.pagenav{border-bottom:1px solid var(--rule);background:var(--white);
  position:sticky;top:0;z-index:58}
@media (min-width:1024px){ .pagenav{top:76px} }
.pagenav ul{display:flex;gap:24px;list-style:none;margin:0;padding:13px 0;
  overflow-x:auto;scrollbar-width:none}
.pagenav ul::-webkit-scrollbar{display:none}
.pagenav li:first-child{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.16em;font-size:.68rem;color:var(--gray);white-space:nowrap;
  align-self:center}
.pagenav a{font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.09em;font-size:.74rem;text-decoration:none;white-space:nowrap;
  padding-bottom:3px;border-bottom:2px solid transparent}
.pagenav a:hover,.pagenav a.active{border-color:var(--mint)}

/* ── Peu editorial ────────────────────────────────────────── */
.foot-top{display:grid;gap:28px;padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:44px}
@media (min-width:900px){ .foot-top{grid-template-columns:1.3fr .7fr;align-items:end} }
.foot-claim-big{font-family:var(--font-hand);color:var(--white);
  font-size:clamp(1.8rem,4.4vw,3.1rem);line-height:1.2;margin:0;max-width:18ch}
.foot-cta{display:flex;flex-wrap:wrap;gap:12px}
.foot-word{margin-top:52px;line-height:0}
.foot-word img{width:100%;max-width:none;opacity:.14}

/* ── Marcadors de secció numerats a la home ───────────────── */
.mark{display:flex;align-items:center;gap:14px;margin:0 0 12px;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.2em;
  font-size:.72rem;color:var(--gray)}
.mark::before{content:attr(data-n);color:var(--ink);letter-spacing:.06em}
.mark::after{content:"";height:1px;flex:1 1 auto;background:var(--rule);max-width:120px}
.bg-ink .mark{color:rgba(255,255,255,.6)}
.bg-ink .mark::before{color:var(--mint)}
.bg-ink .mark::after{background:rgba(255,255,255,.22)}

/* El peu pinta tots els enllaços en gris clar i s'emportava també el text
   dels botons: el de menta es quedava sense text llegible. */
.foot .btn-mint{color:var(--ink)}
.foot .btn-mint:hover{color:var(--white)}
.foot .btn-outline{color:var(--white);border-color:rgba(255,255,255,.5)}
.foot .btn-outline:hover{color:var(--ink)}

/* La marca gran del peu ha d'acompanyar, no dominar. Sencera i molt
   tènue: retallada semblava un error d'impressió, no un gest. */
.foot-word{margin-top:40px}
.foot-word img{opacity:.05}

/* Amb dues barres enganxoses a sobre (capçalera i índex), una àncora
   aterrava amagada. Cada secció reserva el seu espai. */
section[id]{scroll-margin-top:132px}
@media (max-width:1023px){ section[id]{scroll-margin-top:110px} }
.contact[aria-labelledby]{scroll-margin-top:132px}

/* Els titols de targeta anaven amb el tracking dels titulars grans i,
   a mida petita, la condensada es llegia esparracada. */
.card h3,.tile h3{letter-spacing:0}