/* =========================================================
   J.M. GARGALLO — Estils principals
   Gòtic gris amb accents "Calma retro".
   Instrument Serif + General Sans + Bungee (destacats curts).
   Les @font-face són a css/fonts.css (fonts autoallotjades).
   ========================================================= */

:root{
  --bg: #D1D0D0;
  --bg-alt: #C9C7C5;
  --bg-elevated: #BDB8B5;
  --ink: #17110F;
  --ink-dim: #514545;          /* enfosquit: 7.4:1 sobre --bg (abans 5C4E4E) */
  --ink-faint: #575050;        /* 5,2:1 sobre --bg i 4,7:1 sobre --bg-alt (abans 8C8080, 3,2:1) */
  --line: rgba(23,17,15,.14);

  --brown: #5C4E4E;
  --mauve: #988686;
  --teal: #81D8D0;
  --terracotta: #D99E82;
  --terracotta-ink: #87492D;   /* variant llegible del terracota per a TEXT: 4,5:1 sobre --bg.
                                  El to pastel --terracotta té 1,8:1 i només val com a fons. */
  --mustard: #D7D982;
  --lavender: #AE82D9;
  --cobalt: #6C8FB0;           /* blau retro per al collage de fons del hero */

  --pill-ink: #17110F;
  --danger: #8E3A27;
  --ok: #2F6D64;

  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-punch: "Bungee", var(--font-body);

  /* ---- Escala tipogràfica fluida ----
     Les mides petites en versaleta (etiquetes, botons, peu) eren de 10-12 px
     reals: en una pantalla de densitat normal (una 3440x1440 ronda els
     110 ppp) un caràcter en majúscules d'11 px amb letter-spacing ampli té
     massa poques files de píxels per dibuixar-se net. Aquí el terra puja a
     ~12,5 px i creix amb l'amplada de la finestra.

     Compte: aquests valors són en rem i l'arrel també creix (vegeu html{}),
     de manera que els dos efectes es multipliquen. Per això els marges
     d'aquests clamp són curts: el gruix del creixement el fa l'arrel i aquí
     només s'ajusta la proporció entre nivells. */
  --fs-micro: clamp(.75rem, .04vw + .74rem, .8rem);
  --fs-label: clamp(.8rem, .05vw + .78rem, .85rem);
  --fs-small: clamp(.86rem, .06vw + .84rem, .92rem);
  --fs-body:  clamp(1rem, .04vw + .98rem, 1.02rem);

  --container: 1240px;
  --gap: clamp(1rem, 3vw, 2.5rem);
  --radius: 10px;
  --radius-pill: 100px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-slow: cubic-bezier(.2,.7,.2,1);
  --focus: 2px solid var(--ink);
}

/* Panoràmiques i monitors grans: el contenidor creix perquè el text no quedi
   reduït a una columna estreta enmig de 3440 px de pantalla. */
@media (min-width: 1500px){ :root{ --container: 1360px; } }
@media (min-width: 1900px){ :root{ --container: 1480px; } }
@media (min-width: 2600px){ :root{ --container: 1620px; } }

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  /* Base en rem (no en px) per no trepitjar la mida de lletra que la persona
     usuària hagi configurat al navegador; el terme en vw fa que creixi en
     pantalles amples. */
  font-size: clamp(1rem, .3vw + .76rem, 1.125rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  /* Sense -webkit-font-smoothing: antialiased. Aprimava els traços i, als
     navegadors que l'apliquen, desactivava l'antialiàsing de subpíxel, que és
     justament el que dóna definició a les vores de les lletres. */
  overflow-x: hidden;
}

img, video{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin:0; padding:0; }
button{ font-family: inherit; }
em{ font-style: italic; }

/* Focus visible per a navegació amb teclat (abans no n'hi havia cap). */
:focus-visible{
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Enllaç per saltar-se la capçalera. Només apareix en rebre el focus. */
.skip-link{
  position: absolute; left: 1rem; top: -4rem; z-index: 1100;
  background: var(--ink); color: var(--bg);
  padding: .75em 1.25em; border-radius: var(--radius);
  font-size: var(--fs-label); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top: 1rem; }

.container{
  width:100%;
  max-width: var(--container);
  margin-inline:auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size: var(--fs-micro);
  letter-spacing:.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 1rem;
  font-weight: 600;
}

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0 0 1rem;
  text-wrap: balance;
  color: var(--ink);
  /* Instrument Serif porta itàlica real i un sol pes: sense síntesi el
     navegador no inventa cursives ni negretes falses (traços deformats). */
  font-synthesis: none;
}
h2{ font-size: clamp(2rem, 3.4vw, 3.1rem); }
p{ margin: 0 0 1rem; color: var(--ink-dim); text-wrap: pretty; }
.lede{ font-size: clamp(1.08rem, .5vw + .95rem, 1.28rem); max-width: 46em; }
.lede-narrow{ max-width: 28em; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 1em 1.9em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 700;
  cursor:pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn-accent{ background: var(--terracotta); color: var(--pill-ink); }
.btn-accent:hover{ background: var(--teal); transform: translateY(-2px); }
.btn-ghost{ border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover{ background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.btn[disabled]{ opacity:.55; cursor: progress; transform:none; }

/* =========================== Header / Nav =========================== */
.site-header{
  position: fixed; top:0; left:0; right:0;
  z-index: 500;
  padding: 1.2rem 0;
  transition: background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  /* Fons OPAC a posta. Abans era rgba(...,.9) + backdrop-filter: blur(10px):
     una capa translúcida amb filtre obliga el navegador a compondre el header
     en una textura pròpia i, en fer-ho, renuncia a l'antialiàsing de subpíxel,
     de manera que el menú es veia clarament menys definit que la resta de la
     pàgina. Per recuperar l'efecte vidre n'hi hauria prou amb tornar a posar
     el rgba i el backdrop-filter aquí, assumint aquesta pèrdua de nitidesa. */
  background: var(--bg);
  padding: .85rem 0;
  border-color: var(--line);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap: 1.5rem;
}
.logo{ display:flex; align-items:center; }
.logo img{ display:block; height: 1.6rem; width:auto; }

.nav-primary{ display:flex; align-items:center; gap: 2.2rem; }
.nav-links{ display:flex; gap: 1.9rem; }
.nav-links a{
  font-size: var(--fs-label);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-dim);
  position: relative;
  padding-bottom: .3rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--teal); transition: right .3s var(--ease);
}
.nav-links a:hover{ color: var(--ink); }
.nav-links a:hover::after{ right:0; }

.lang-switch{ display:flex; gap:.4rem; }
.lang-switch button{
  background:none; border:1px solid var(--line); color: var(--ink-dim);
  font-size: var(--fs-micro); letter-spacing:.05em; padding:.4em .7em;
  border-radius: var(--radius-pill); cursor:pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.lang-switch button:hover{ color: var(--ink); border-color: var(--ink-dim); }
.lang-switch button[aria-current="true"]{ color: var(--pill-ink); background: var(--teal); border-color: var(--teal); }

/* Capçalera de les pàgines legals: només logo i selector d'idioma, sense el
   panell lateral del menú mòbil. Substitueix els style="" en línia, que
   obligaven a obrir la CSP amb 'unsafe-inline'. */
.nav-primary--static{
  position: static;
  transform: none;
  background: none;
  border: none;
  padding: 0;
  flex-direction: row;
  width: auto;
}

.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem;
  position: relative; z-index: 600;
}
.nav-toggle span{
  width:22px; height:2px; background: var(--ink); display:block;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
/* En obrir el menú, les tres barres es converteixen en una X. */
.nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity: 0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* =========================== Hero =========================== */
/* El hero ja no ocupa tota la finestra: primer el vídeo, a sota la frase en
   tres tipografies i la cita definitòria, i al final l'indicador de
   desplaçament. */
/* El coixí inferior ha de deixar lloc a l'indicador de desplaçament, que va
   posicionat en absolut: ~3,5rem d'alçada del propi indicador + 1,75rem fins a
   la vora + l'aire que el separa del text de sobre. */
.hero{
  position: relative;
  padding-top: clamp(6rem, 12vh, 8.5rem);
  padding-bottom: clamp(8.5rem, 15vh, 11rem);
}

/* Marc del vídeo del hero. Mentre no hi hagi fitxer es queda negre amb la
   proporció definitiva, de manera que el pes visual del bloc ja és el bo i
   afegir-hi el vídeo després no mou res de la pàgina. */
.hero-video{
  position: relative;
  width:100%; aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-video video, .hero-video img{ width:100%; height:100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   Rètol "Reel under construction..." — 100% CSS
   ---------------------------------------------------------------------------
   Cap vídeo, cap imatge, cap GIF: la caixa negra, les línies de escombrat, la
   parpellejada i la separació de canals de color són degradats i pseudo-
   elements animats amb @keyframes. Zero bytes de descàrrega i res a la CSP.

   Les animacions estan construïdes amb `steps()` i amb trams llargs en repòs a
   posta: el glitch només passa en dues finestres curtes de cada cicle i la
   resta del temps els fotogrames són idèntics, de manera que el navegador no
   es passa el dia repintant una capçalera que ningú no mira.

   Per treure-ho tot: esborrar aquest bloc i el .reel-placeholder del marcatge.
   --------------------------------------------------------------------------- */
.reel-placeholder{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  /* Lleugera il·luminació central, com un monitor encès sense senyal. */
  background:
    radial-gradient(120% 90% at 50% 50%, #17110F 0%, #0B0908 55%, #000 100%);
}

/* Línies d'escombrat: es desplacen molt lentament de dalt a baix. El bucle és
   exacte perquè el patró es repeteix cada 4px i el desplaçament és de 4px. */
.reel-placeholder::before{
  content:"";
  position:absolute; inset:-2px 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.055) 0 1px,
    rgba(255,255,255,0) 1px 4px
  );
  animation: reel-scanlines 1.1s linear infinite;
  pointer-events:none;
}

/* Barra de desincronització: una franja més clara que baixa de tant en tant,
   com quan un senyal analògic perd l'enganxada. */
.reel-placeholder::after{
  content:"";
  position:absolute; left:0; right:0; height:14%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.07) 45%,
    rgba(255,255,255,.02) 55%,
    rgba(255,255,255,0) 100%
  );
  animation: reel-rollbar 6.5s linear infinite;
  pointer-events:none;
}

.reel-glitch{
  position: relative;
  font-family: var(--font-punch);
  text-transform: uppercase;
  font-size: clamp(.85rem, 2.4vw, 1.9rem);
  letter-spacing: .05em;
  line-height: 1.1;
  text-align: center;
  color: #EDEAE7;
  padding-inline: 1rem;
  animation: reel-flicker 5.3s steps(1, end) infinite;
}

/* Les dues còpies desplaçades que fan la separació de canals. Van retallades
   amb clip-path a bandes horitzontals: fora de les finestres de glitch,
   inset(100% 0 0 0) les amaga del tot. */
.reel-glitch::before,
.reel-glitch::after{
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  padding-inline: inherit;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
}
.reel-glitch::before{
  color: var(--terracotta);
  animation: reel-split-a 5.3s steps(1, end) infinite;
}
.reel-glitch::after{
  color: var(--teal);
  animation: reel-split-b 5.3s steps(1, end) infinite;
}

@keyframes reel-scanlines{
  from{ transform: translateY(0); }
  to  { transform: translateY(4px); }
}

@keyframes reel-rollbar{
  from{ transform: translateY(-120%); }
  to  { transform: translateY(820%); }
}

/* Parpellejada del text principal: dues baixades de lluminositat molt curtes
   per cicle. La resta del temps es queda quiet a opacitat 1. */
@keyframes reel-flicker{
  0%, 13%, 16%, 47%, 49%, 100%{ opacity: 1; }
  14%{ opacity: .35; }
  15%{ opacity: .85; }
  48%{ opacity: .5; }
}

/* Finestres de glitch: 13-16% i 47-50% del cicle. Fora d'aquests trams les
   dues còpies queden amagades i no hi ha res per repintar. */
@keyframes reel-split-a{
  0%, 13%, 16%, 47%, 50%, 100%{ clip-path: inset(100% 0 0 0); transform: translate(0); }
  13.5%{ clip-path: inset(14% 0 66% 0); transform: translate(-5px); }
  14.5%{ clip-path: inset(52% 0 30% 0); transform: translate(4px); }
  15.5%{ clip-path: inset(30% 0 52% 0); transform: translate(-2px); }
  47.5%{ clip-path: inset(66% 0 14% 0); transform: translate(6px); }
  48.5%{ clip-path: inset(22% 0 58% 0); transform: translate(-6px); }
  49.5%{ clip-path: inset(44% 0 38% 0); transform: translate(3px); }
}
@keyframes reel-split-b{
  0%, 13%, 16%, 47%, 50%, 100%{ clip-path: inset(100% 0 0 0); transform: translate(0); }
  13.5%{ clip-path: inset(48% 0 34% 0); transform: translate(5px); }
  14.5%{ clip-path: inset(18% 0 62% 0); transform: translate(-4px); }
  15.5%{ clip-path: inset(62% 0 18% 0); transform: translate(3px); }
  47.5%{ clip-path: inset(26% 0 56% 0); transform: translate(-6px); }
  48.5%{ clip-path: inset(58% 0 22% 0); transform: translate(6px); }
  49.5%{ clip-path: inset(36% 0 46% 0); transform: translate(-3px); }
}

.hero-intro{
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3.2rem);
}

/* ----- "Creativity takes courage." en tres tipografies -----
   "Creativity" i "takes" comparteixen línia i línia de base; "courage." baixa a
   la següent (flex-basis:100%). Les separacions es fan amb gap i no amb marges
   negatius: amb marges negatius les caixes se solapaven. */
.hero-statement{
  margin:0; display:flex; flex-wrap:wrap; align-items:baseline;
  column-gap:.75rem; row-gap:.55rem;
  line-height:1.04;
}
.hs-serif{
  font-family: var(--font-display); font-style: italic; font-weight:400;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  color: var(--ink);
}
.hs-sans{
  font-family: var(--font-body); font-weight:500;
  font-size: clamp(1.9rem, 4.2vw, 3.2rem);
  color: var(--ink-faint);
}
.hs-punch{
  flex-basis: 100%;
  font-family: var(--font-punch); text-transform: uppercase;
  font-size: clamp(2.1rem, 4.8vw, 3.8rem); letter-spacing:.01em;
  color: var(--terracotta-ink);
}

/* ----- Cita definitòria ----- */
.hero-intro-text{ padding-top:.4rem; }
.hero-quote{
  margin:0; max-width: 34em;
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(1.1rem, .6vw + .95rem, 1.45rem);
  line-height: 1.45;
  color: var(--ink-dim);
}

/* =========================== Presentació =========================== */
/* Tres capes superposades, de baix a dalt:
     1. .intro-marquees — tres línies de paraules que llisquen lentament,
        alternant el sentit, amb una opacitat molt baixa;
     2. .intro-formats  — VERTICAL i HORITZONTAL, amb una mica més de presència;
     3. .intro-text     — el text de presentació.
   Les dues primeres són decoratives (aria-hidden al marcatge) i no reben
   punters, de manera que no interfereixen amb la selecció del text. */
/* El coixí de sota és curt a posta: el bloc de paraules i el "Què faig?" han
   d'anar seguits. Entre els dos hi ha, a més, el padding-block de .intro-inner
   (l'aire que necessita el collage) i el padding superior de .services, de
   manera que tres valors se sumen i qualsevol d'ells generós deixa un buit
   enorme, sobretot en mòbil, on els clamp cauen al mínim. */
.intro{
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(.75rem, 1.5vw, 1.25rem);
}
.intro-inner{
  position: relative;
  padding-block: clamp(1.5rem, 3.5vw, 3rem);
}
.services{ padding-top: clamp(2rem, 4vw, 3.5rem); }

/* ----- Capa 1: línies de paraules en moviment ----- */
.intro-marquees{
  position:absolute; inset:0; z-index:0;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow:hidden; pointer-events:none;
  font-family: var(--font-punch); text-transform:uppercase;
  font-size: clamp(1.6rem, 4vw, 3.1rem); line-height:1;
  color: var(--ink);
  opacity:.07;
}
.marquee{ overflow:hidden; }
/* La pista conté el mateix text dues vegades i es desplaça exactament un 50%:
   en acabar, el segon exemplar és on era el primer i el salt no es veu. */
.marquee-track{
  display:flex; width:max-content;
  animation: marquee-left 95s linear infinite;
}
.marquee--rev .marquee-track{ animation-name: marquee-right; }
/* La separació entre una repetició i la següent va aquí i no com a espais al
   final del text: en una caixa de flex els espais finals es retallen i les dues
   còpies quedarien enganxades. */
.marquee-track span{ white-space:nowrap; padding-right:.4em; }
@keyframes marquee-left{  from{ transform: translateX(0); }    to{ transform: translateX(-50%); } }
@keyframes marquee-right{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }

/* ----- Capa 2: VERTICAL i HORITZONTAL ----- */
.intro-formats{
  position:absolute; inset:0; z-index:1;
  overflow:hidden; pointer-events:none;
  font-family: var(--font-punch); text-transform:uppercase; line-height:1;
}
.intro-formats .fmt{
  position:absolute; white-space:nowrap;
  font-size: clamp(2.4rem, 6.5vw, 5rem);
}
.fmt-v{ top:14%; left:20%; color: var(--cobalt);     opacity:.22; }
.fmt-h{ top:46%; left:9%;  color: var(--terracotta); opacity:.26; }

/* ----- Capa 3: el text ----- */
.intro-text{
  position: relative; z-index:2;
  margin:0; max-width: 30em;
  font-size: clamp(1.3rem, 1.9vw, 2.05rem);
  line-height: 1.35;
  color: var(--ink);
}

/* Centrat amb inset + margin en comptes de translateX(-50%): amb una amplada
   imparella, el 50% queia a mig píxel i el text es dibuixava desplaçat mig
   píxel, que és exactament com es veu una lletra borrosa. */
.scroll-cue{
  position:absolute; bottom: 1.75rem; left:0; right:0;
  z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color: var(--ink-faint);
  font-size: var(--fs-micro); letter-spacing:.18em; text-transform:uppercase;
  pointer-events:none;
}
/* Variant que fa de separador entre seccions (p. ex. "Portfolio" abans del
   mosaic): mateixa forma, però dins del flux i no ancorada al peu del bloc. */
.scroll-cue--static{ position: static; margin-bottom: clamp(2rem, 4vw, 3rem); }
.scroll-cue .line{
  width:1px; height: 34px; background: linear-gradient(var(--terracotta), transparent);
  animation: scrollcue 1.8s infinite ease-in-out;
}
@keyframes scrollcue{
  0%{ transform: scaleY(.2); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  50.01%{ transform-origin: bottom; }
  100%{ transform: scaleY(.2); transform-origin: bottom; }
}

/* =========================== Seccions generals =========================== */
section{ padding: clamp(5rem, 10vw, 8rem) 0; position:relative; }
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}
/* Encapçalament curt: un títol petit a l'esquerra i una línia de suport a la
   dreta, sense el buit d'un titular gran (p. ex. "Què faig?"). */
.section-head--tight{ align-items: baseline; margin-bottom: 1.6rem; }
.h-small{ font-family: var(--font-display); font-size: 1.5rem; margin:0; }
.services-sub{ margin:0; font-size: var(--fs-small); color: var(--ink-faint); }

/* El desplaçament s'expressa en píxels sencers i acaba en none, de manera que
   la capa de composició es descarta i el text queda net en repòs. */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .9s var(--ease-slow), transform .9s var(--ease-slow); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ----- Sobre (about.html) ----- */
.about-page{ padding-top: 7rem; }
.about{ background: var(--bg-alt); border-bottom:1px solid var(--line); }
.about-grid{ max-width: 52em; }
.about h1{ font-style: italic; }

.about-projects .section-head{ margin-bottom: 2.5rem; }
.project-groups{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem,4vw,3.5rem); align-items:start; }
.project-group h3{
  font-size: var(--fs-label); letter-spacing:.07em; text-transform:uppercase; font-weight:700;
  color: var(--terracotta-ink); margin-bottom:1.2rem;
}
.project-group ul{ display:flex; flex-direction:column; gap:1rem; }
.project-group li{ font-size: var(--fs-small); color: var(--ink-dim); line-height:1.5; }
/* Títols que porten al vídeo. Obren el visor del lloc, però continuen sent
   enllaços de debò cap a la plataforma (vegeu initProjectLinks a main.js). */
.proj-link{
  color: var(--ink); font-weight:600;
  text-decoration: underline; text-underline-offset:.18em;
  text-decoration-color: var(--terracotta);
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.proj-link:hover{ color: var(--terracotta-ink); text-decoration-color: var(--terracotta-ink); }

/* ----- Serveis ----- */
.services-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
}
.service-card{
  background: var(--bg); padding: 2.4rem 1.8rem; transition: background .3s var(--ease);
}
.service-card:hover{ background: var(--bg-elevated); }
.service-card h3{ font-size:1.15rem; margin: 0 0 .6rem; letter-spacing:.005em; }
.service-card p{ font-size: var(--fs-small); margin:0; }

/* ----- Treball / Portfolio (mosaic) ----- */
.filters{ display:flex; gap:.6rem; flex-wrap:wrap; }
.filters button{
  background:none; border:1px solid var(--line); color: var(--ink-dim);
  padding:.5em 1.1em; font-size: var(--fs-micro); letter-spacing:.05em; text-transform:uppercase; font-weight: 600;
  border-radius: var(--radius-pill); cursor:pointer;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.filters button:hover{ color: var(--ink); border-color: var(--ink-dim); }
.filters button[aria-pressed="true"]{ background: var(--ink); color: var(--bg); border-color: var(--ink); }


/* Mosaic en columnes: les targetes hi cauen en ordre i cada columna creix pel
   seu compte, de manera que el peu del bloc queda irregular a posta. La
   separació és més ajustada que la --gap general perquè el conjunt es llegeixi
   com un sol mosaic i no com targetes soltes. */
.portfolio-grid{
  --portfolio-gap: clamp(.7rem, 1.3vw, 1.1rem);
  column-count: 4; column-gap: var(--portfolio-gap);
  margin-top: 2.5rem;
}
@media (max-width:980px){ .portfolio-grid{ column-count: 3; } }
@media (max-width:700px){ .portfolio-grid{ column-count: 2; } }
@media (max-width:460px){ .portfolio-grid{ column-count: 1; } }

.portfolio-item{
  position:relative; overflow:hidden; cursor:pointer;
  background: var(--bg-elevated);
  border-radius: var(--radius);
  break-inside: avoid; margin-bottom: var(--portfolio-gap); width:100%;
}
.portfolio-item.r-tall{ aspect-ratio: 9/16; }
.portfolio-item.r-port{ aspect-ratio: 3/4; }
.portfolio-item.r-square{ aspect-ratio: 1/1; }
.portfolio-item.r-wide{ aspect-ratio: 16/9; }
.portfolio-item.r-wideish{ aspect-ratio: 4/3; }

.portfolio-item img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease-slow), filter .5s var(--ease);
}
.portfolio-item:hover img{ transform: scale(1.05); }

.portfolio-overlay{
  position:absolute; inset:0; padding: 1.4rem;
  display:flex; flex-direction:column; justify-content:flex-end; z-index:2;
  background: linear-gradient(0deg, rgba(23,17,15,.82) 0%, rgba(23,17,15,0) 58%);
}
.portfolio-overlay .cat{ font-size: var(--fs-micro); letter-spacing:.09em; text-transform:uppercase; color: rgba(255,255,255,.82); margin-bottom:.3rem; }
.portfolio-overlay h3{ font-size:1.2rem; margin:0; color:#F6F3F1; font-style: italic; }

.play-icon{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8);
  width:56px; height:56px; border-radius:50%; z-index:3;
  border:1px solid rgba(255,255,255,.7);
  background: rgba(23,17,15,.35);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.portfolio-item:hover .play-icon,
.portfolio-item:focus-visible .play-icon{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.play-icon svg{ width:16px; height:16px; fill: #fff; margin-left:2px; }

/* ----- Lightbox ----- */
.lightbox{
  position: fixed; inset:0; z-index: 1000;
  background: rgba(23,17,15,.94);
  display:flex; align-items:center; justify-content:center;
  padding: 4vh 4vw;
  opacity:0; visibility:hidden; transition: opacity .3s var(--ease), visibility .3s var(--ease);
}
/* `display:flex` guanyaria a la regla `[hidden]{display:none}` del navegador:
   cal declarar-ho explícitament perquè l'atribut `hidden` que posa main.js
   tregui de debò el diàleg de l'arbre d'accessibilitat i de l'ordre de tabulació. */
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-inner{ max-width: min(1100px, 92vw); width:100%; }
.lightbox-media{ width:100%; aspect-ratio:16/9; background:#000; overflow:hidden; border-radius: var(--radius); }
/* Marc vertical per als reels i la resta de contingut 9:16. Aquí mana l'alçada
   i l'amplada surt de la proporció: a l'inrevés, en una pantalla panoràmica el
   marc sortiria més alt que la finestra. */
.lightbox-inner.is-portrait{ max-width: min(520px, 92vw); }
.lightbox-inner.is-portrait .lightbox-media{
  aspect-ratio: 9/16;
  height: min(74vh, 780px);
  width: auto; max-width: 100%;
  margin-inline: auto;
}
.lightbox-media img, .lightbox-media video, .lightbox-media iframe{ width:100%; height:100%; border:0; }
.lightbox-media img, .lightbox-media video{ object-fit:cover; }
.lightbox-caption{ display:flex; justify-content:space-between; align-items:baseline; margin-top:1.2rem; gap:1rem; flex-wrap:wrap; }
.lightbox-caption h3{ margin:0; font-size:1.4rem; color:#F6F3F1; font-style: italic; }
.lightbox-caption .eyebrow{ margin: 0 0 .3rem; color: rgba(255,255,255,.8); }
.lightbox-close{
  position:absolute; top: 1.5rem; right: 1.5rem;
  background:none; border:1px solid rgba(255,255,255,.4); color:#F6F3F1;
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{ border-color: var(--teal); color: var(--teal); }
.lightbox :focus-visible{ outline: 2px solid var(--teal); outline-offset: 3px; }

/* ----- Contacte ----- */
.contact{ background: var(--bg-alt); border-top:1px solid var(--line); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem,5vw,5rem); }
.contact-info{ margin: 1.75rem 0; }
.contact-info dt{ font-size: var(--fs-micro); text-transform:uppercase; letter-spacing:.07em; color: var(--ink-faint); margin-top:1.1rem; font-weight:600; }
.contact-info dd{ margin:.25rem 0 0; font-size:1.08rem; }
.contact-info dd a:hover{ color: var(--terracotta-ink); }
.social-row{ display:flex; gap:.9rem; margin-top:1.5rem; }
.social-row a{
  width:42px; height:42px; border:1px solid var(--line); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.social-row a:hover{ border-color: var(--terracotta); color: var(--terracotta-ink); background: var(--bg); }
.social-row svg{ width:16px; height:16px; fill:currentColor; }

/* ----- Contacte directe per correu -----
   Ocupa la columna on hi havia el formulari. L'adreça és el protagonista del
   bloc i és alhora l'enllaç: no cal buscar cap botó per saber on escriure. */
.contact-direct{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
}
.contact-direct-label{
  margin: 0;
  font-size: var(--fs-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-faint);
}
.contact-direct-mail{
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.15;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  /* L'adreça és llarga i no té espais: sense això, en mòbil desborda la
     targeta en comptes de partir-se. */
  overflow-wrap: anywhere;
  transition: color .25s var(--ease);
}
.contact-direct-mail:hover{ color: var(--terracotta-ink); }
.contact-direct-note{
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-dim);
  max-width: 34em;
}

/* ---------------------------------------------------------------------------
   Formulari de contacte — APARCAT
   El formulari s'ha retirat del marcatge mentre no es decideixi on s'allotja
   el processament. Aquests estils es conserven perquè tornar-lo a posar sigui
   només recuperar l'HTML; si es descarta definitivament, es poden esborrar des
   d'aquí fins a .hp-field.
   --------------------------------------------------------------------------- */
form.contact-form{ display:flex; flex-direction:column; gap:1.1rem; }
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size: var(--fs-micro); letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint); font-weight:600; }
.field input, .field textarea, .field select{
  background: var(--bg); border:1px solid var(--line); color: var(--ink);
  padding: .85em 1em; font-family: inherit; font-size: var(--fs-small); border-radius: var(--radius);
  transition: border-color .25s var(--ease);
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{
  outline: var(--focus); outline-offset: 1px; border-color: var(--ink);
}
.field textarea{ resize: vertical; min-height: 130px; }
.field-check{ flex-direction:row; align-items:flex-start; gap:.6rem; }
.field-check input{ width:auto; margin-top:.2rem; }
.field-check label{ text-transform:none; letter-spacing:0; font-size: var(--fs-small); color: var(--ink-dim); font-weight:400; }
.field-check a{ color: var(--ink); text-decoration:underline; }
.form-msg{ font-size: var(--fs-small); margin-top:.5rem; display:none; }
.form-msg.is-visible{ display:block; }
.form-msg.ok{ color: var(--ok); font-weight:600; }
.form-msg.err{ color: var(--danger); font-weight:600; }
/* Camp trampa: fora de pantalla però no display:none, perquè els bots que
   interpreten CSS no el descartin. aria-hidden i tabindex el treuen del pas
   de qui navega amb teclat o amb lector de pantalla. */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; overflow:hidden; }

/* =========================== Footer =========================== */
.site-footer{ padding: 3.5rem 0 2rem; border-top:1px solid var(--line); }
.footer-top{ display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom: 2.5rem; }
.footer-nav{ display:flex; gap:1.75rem; flex-wrap:wrap; }
.footer-nav a{ font-size: var(--fs-small); color: var(--ink-dim); }
.footer-nav a:hover{ color: var(--ink); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-top: 1.5rem; border-top:1px solid var(--line);
  font-size: var(--fs-small); color: var(--ink-faint);
}
.footer-bottom p{ color: inherit; margin: 0; }
.footer-legal{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.footer-legal a:hover{ color: var(--ink); }

/* =========================== Cookie banner =========================== */
.cookie-banner{
  position: fixed; left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
  max-width: 640px; margin-inline:auto;
  background: var(--bg-elevated); border:1px solid var(--line);
  padding: 1.5rem; z-index: 900; border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(23,17,15,.25);
  transform: translateY(140%); transition: transform .5s var(--ease);
}
.cookie-banner[hidden]{ display: none; }
.cookie-banner.is-visible{ transform: translateY(0); }
.cookie-banner p{ font-size: var(--fs-small); margin: 0 0 1rem; color: var(--ink-dim); }
.cookie-banner a{ color: var(--ink); text-decoration: underline; }
.cookie-actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
.cookie-actions .btn{ padding:.75em 1.4em; font-size: var(--fs-micro); }

/* =========================== Pàgines legals =========================== */
.legal-page main{ padding-top: 9rem; padding-bottom: 6rem; }
.legal-page .container{ max-width: min(78ch, 900px); }
.legal-page h1{ font-size: clamp(2.1rem,3.4vw,3rem); font-style: italic; }
.legal-page h2{ font-size: 1.35rem; margin-top:2.6rem; }
.legal-page h3{ font-size: 1.1rem; margin-top:1.8rem; }
.legal-page p, .legal-page li{ color: var(--ink-dim); font-size: var(--fs-body); }
.legal-page li{ margin-bottom:.4rem; }
.legal-page ul{ padding-left:1.2rem; list-style:disc; margin:0 0 1rem; }
.legal-page a{ color: var(--ink); text-decoration: underline; text-underline-offset: .18em; }
.legal-page .updated{ color: var(--ink-faint); font-size: var(--fs-small); margin-bottom:2.5rem; }
.legal-page table{
  width:100%; border-collapse: collapse; margin: 0 0 1.5rem;
  font-size: var(--fs-small);
}
.legal-page th, .legal-page td{
  text-align:left; vertical-align: top;
  padding:.7em .9em; border:1px solid var(--line); color: var(--ink-dim);
}
.legal-page th{ background: var(--bg-alt); color: var(--ink); font-weight:600; }
.legal-table-wrap{ overflow-x:auto; }
.back-link{
  display:inline-flex; align-items:center; gap:.5em; font-size: var(--fs-micro);
  letter-spacing:.06em; text-transform:uppercase; color: var(--ink-faint);
  margin-bottom:2rem; font-weight:600;
}
.back-link:hover{ color: var(--ink); }

/* =========================== Responsive =========================== */
@media (max-width: 980px){
  .contact-grid, .hero-intro{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
  .project-groups{ grid-template-columns: 1fr; gap: 2rem; }
  .hero-intro-text{ padding-top: 0; }
  /* Amb una sola columna el text ja ocupa tota l'amplada: les dues capes
     decoratives s'aclareixen encara més per no restar-li llegibilitat. */
  .intro-marquees{ opacity:.05; }
  .fmt-v{ opacity:.16; }
  .fmt-h{ opacity:.19; }
  .intro-text{ max-width: none; }
}
@media (max-width: 760px){
  /* El menú mòbil ocupa tota la pantalla (no només un panell lateral) i es
     tanca amb el mateix botó, que es transforma en una X (vegeu .nav-toggle
     més amunt), amb Escape o en triar un enllaç. */
  .nav-primary{
    position: fixed; inset: 0; width: 100%;
    background: var(--bg-alt);
    flex-direction: column; align-items:center; justify-content:center;
    padding: 2rem; gap: 2.5rem;
    transform: translateX(100%); transition: transform .4s var(--ease);
  }
  .nav-primary.is-open{ transform: translateX(0); }
  .nav-primary--static{ position: static; transform:none; width:auto; padding:0; background:none; border:none; }
  .nav-links{ flex-direction:column; gap: 1.4rem; align-items:center; }
  .nav-toggle{ display:flex; }
  /* En mòbil el bloc de paraules i el "Què faig?" han de quedar ben seguits:
     amb tres coixins encadenats, mantenir-los als mínims dels clamp encara
     deixava massa aire. */
  .intro{ padding-bottom: .25rem; }
  .intro-inner{ padding-block: 1.25rem; }
  .services{ padding-top: 1.5rem; }
  .form-row{ grid-template-columns: 1fr; }
  .services-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .scroll-cue .line{ animation:none; }
  /* Les línies de paraules es queden quietes al punt de partida. Sense això, la
     regla general de sobre els encongiria l'animació a 0,01 ms i saltarien
     directament al fotograma final. */
  .marquee-track{ animation:none !important; transform:none !important; }

  /* El rètol del hero es queda com un cartell fix: text llegible sobre negre,
     amb les línies d'escombrat quietes. Sense la primera regla, la barra de
     desincronització es pararia a mitja pantalla i quedaria una franja clara
     immòbil enmig de la caixa. */
  .reel-placeholder::after{ display:none; }
  .reel-placeholder::before{ animation:none !important; transform:none !important; }
  .reel-glitch{ animation:none !important; opacity:1; }
  .reel-glitch::before, .reel-glitch::after{ content:none; }
}