/*
Theme Name: Testart Studio
Theme URI: https://testartstudio.com
Author: Testart Studio
Author URI: https://testartstudio.com
Description: Tema WordPress a mida per a Testart Studio. Disseny Figma "Web Testart Studio" implementat amb ACF/SCF Flexible Content.
Version: 1.1.2
Update URI: https://packages.testartstudio.com/wp-update/testart-studio/info.json
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ts-theme
Tags: one-column, custom-menu, featured-images, full-width-template, custom-logo
Requires at least: 6.0
Requires PHP: 8.1

Aquest tema requereix ACF Pro (o SCF) per a la gestio de continguts.
*/


/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colors — superfícies */
  --c-bg:            #1a1a1a;
  --c-bg-deep:       #0d0d0d;
  --c-surface:       #232320;
  --c-border:        #3a3935;

  /* Colors — text */
  --c-text:          #ffffff;
  --c-text-muted:    #a3a198;
  --c-text-dim:      #6b6960;

  /* Colors — accent */
  --c-accent:        #ffd400;
  --c-accent-ink:    #1a1a1a;

  /* Tipografia */
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Escala tipogràfica (mida / interlineat / interlletratge) */
  --fs-display: 110px;  --lh-display: 104.5px;  --ls-display: -3.3px;
  --fs-d180:    180px;  --lh-d180:    165px;    --ls-d180:    -5.4px;
  --fs-h1:       72px;  --lh-h1:      70.56px;  --ls-h1:      -0.32px;
  --fs-h2:       48px;  --lh-h2:      56px;     --ls-h2:      -1.44px;
  --fs-42:       42px;  --lh-42:      50.4px;   --ls-42:      -1.26px;
  --fs-40:       40px;  --lh-40:      48px;     --ls-40:      -0.8px;
  --fs-32:       32px;  --lh-32:      40px;     --ls-32:      -0.64px;
  --fs-h3:       28px;  --lh-h3:      36px;     --ls-h3:      -0.36px;
  --fs-22:       22px;  --lh-22:      28px;
  --fs-lg:       20px;  --lh-lg:      30px;
  --fs-19:       19px;  --lh-19:      28px;
  --fs-base:     18px;  --lh-base:    28px;
  --fs-16:       16px;  --lh-16:      25.6px;
  --fs-sm:       15px;  --lh-sm:      22.5px;
  --fs-ui:       14px;  --lh-ui:      21px;
  --fs-xs:       13px;  --lh-xs:      19.5px;
  --fs-2xs:      12px;  --lh-2xs:     16px;

  /* Espaiat */
  --sp-1:   4px;   --sp-2:   8px;   --sp-3:  12px;   --sp-4:  16px;
  --sp-5:  20px;   --sp-6:  24px;   --sp-8:  32px;   --sp-10: 40px;
  --sp-12: 48px;   --sp-16: 64px;   --sp-20: 80px;   --sp-24: 96px;
  --sp-32:128px;   --sp-40:160px;

  /* Layout — l'ample de contingut real és 1200px
     (1280px de contenidor menys 40px de padding intern a cada costat) */
  --container:     1280px;
  --gutter:          80px;   /* marge exterior de pàgina */
  --inner:           40px;   /* padding intern del contenidor */
  --grid-gap:        24px;
  --section-y:      128px;

  /* Radis */
  --r-sm:   8px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-full: 9999px;

  /* Moviment */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  0.3s;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 400;
  letter-spacing: -0.32px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: -100px; left: var(--sp-4); z-index: 200;
  background: var(--c-accent); color: var(--c-accent-ink);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm);
  font-size: var(--fs-ui); font-weight: 500;
}
.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
/* Amplada de pàgina: gutter exterior + contenidor 1280 + padding intern 40 */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--inner);
}

.page-pad { padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--sp-16); }
.section--top-0 { padding-top: 0; }

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }

/* --------------------------------------------------------------------------
   4. Tipografia
   -------------------------------------------------------------------------- */
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: 300;
}
.display strong { font-weight: 600; }

.h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 600; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 600; }
.h2 .is-light { font-weight: 300; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 600; }
.h4 { font-size: var(--fs-22); line-height: var(--lh-22); font-weight: 500; }

.lead  { font-size: var(--fs-lg);   line-height: var(--lh-lg);   color: var(--c-text-muted); }
.body  { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--c-text-muted); }
.body-16 { font-size: var(--fs-16); line-height: var(--lh-16); color: var(--c-text-muted); }
.small { font-size: var(--fs-sm);   line-height: var(--lh-sm);   color: var(--c-text-muted); }

.muted  { color: var(--c-text-muted); }
.dim    { color: var(--c-text-dim); }
.accent { color: var(--c-accent); }

/* Eyebrow — "» ESTUDI DE DISSENY A GIRONA" */
.eyebrow {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  letter-spacing: 1.04px;
  text-transform: uppercase;
  color: var(--c-text);
  font-weight: 400;
}
.eyebrow::before { content: '» '; color: var(--c-accent); }

.section-title .is-dim { color: var(--c-border); }

/* --------------------------------------------------------------------------
   5. Botons i enllaços
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 52px;
  padding-inline: var(--sp-6);
  border-radius: var(--r-sm);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: -0.32px;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn .icon { width: 10.5px; height: 12px; flex: none; }

.btn--primary { background: var(--c-accent); color: var(--c-accent-ink); font-weight: 600; font-size: var(--fs-sm); }
.btn--primary:hover { background: #ffdf3d; transform: translateY(-2px); }

.btn--ghost { border: 1px solid var(--c-border); color: var(--c-text); height: 48px; padding-inline: 21px; }
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Enllaç subratllat en groc */
.link-underline {
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: -0.32px;
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--dur) var(--ease);
}
.link-underline:hover { color: var(--c-accent); }

/* Enllaç amb fletxa "→ Veure el servei" */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-ui); font-weight: 500;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow::before { content: '→'; color: var(--c-accent); }
.link-arrow:hover { gap: var(--sp-3); color: var(--c-accent); }

/* Botó circular amb fletxa */
.btn-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  border: 1px solid var(--c-accent);
  border-radius: var(--r-full);
  color: var(--c-accent);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-circle:hover { background: var(--c-accent); color: var(--c-accent-ink); }

/* --------------------------------------------------------------------------
   6. Etiquetes / llistes de característiques
   -------------------------------------------------------------------------- */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.tag {
  display: inline-flex; align-items: center;
  height: 26px; padding-inline: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  color: var(--c-text-muted); white-space: nowrap;
}

/* Llista amb marcador "«" groc */
.feature-list { display: flex; flex-direction: column; gap: 11px; }
.feature-list li {
  display: flex; gap: var(--sp-2);
  font-size: var(--fs-ui); line-height: var(--lh-ui);
  color: var(--c-text-muted);
}
.feature-list li::before { content: '«'; color: var(--c-accent); flex: none; }

.badge {
  display: inline-flex; align-items: center;
  height: 24px; padding-inline: var(--sp-3);
  background: var(--c-surface); border-radius: var(--r-sm);
  font-size: var(--fs-2xs); letter-spacing: 0.3px;
  text-transform: uppercase; color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   7. Capçalera — 80px, sticky
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: 80px;
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border);
}

.site-header__inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 80px;
}

.site-nav { display: flex; align-items: center; gap: var(--sp-8); }
.site-nav a {
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  font-weight: 500; letter-spacing: -0.32px;
  transition: color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--c-accent); }
.site-nav a[aria-current="page"] { color: var(--c-accent); }

/* Marca — isotip "rL" + paraula */
.brand {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--c-text);
}
/* L'isotip fa 596x276: a 24px d'alcada ocupa ~52px d'ample, els mateixos
   que ocupaven els dos quadrats de la maqueta, aixi la capcalera no es mou. */
.brand__mark { display: flex; align-items: center; flex: none; }
.brand__mark svg { display: block; height: 24px; width: auto; }

/* Els quadrats encara els fa servir l'avatar de l'autor de l'article. */
.brand__sq { width: 24px; height: 24px; border-radius: 6px; flex: none; }
.brand__sq--white  { background: var(--c-text); }
.brand__sq--yellow { background: var(--c-accent); }
.brand__name {
  font-size: var(--fs-base); line-height: var(--lh-base);
  letter-spacing: -0.32px; font-weight: 600; white-space: nowrap;
}
.brand__name span { font-weight: 300; }

.site-header__actions { display: flex; align-items: center; gap: var(--sp-5); }

.lang-switch {
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  letter-spacing: 0.325px; color: var(--c-text-muted);
  white-space: nowrap;
}

.social-links { display: flex; align-items: center; gap: var(--sp-4); }
.social-links a {
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.85; transition: opacity var(--dur) var(--ease);
}
.social-links a:hover { opacity: 1; }
.social-links img { width: 13.13px; height: 15px; }

/* Botó hamburguesa */
.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle__bars { position: relative; width: 22px; height: 2px; background: var(--c-text); transition: background var(--dur) var(--ease); }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--c-text);
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. Hero (inici)
   -------------------------------------------------------------------------- */
.hero { padding-top: 63px; padding-bottom: 0; }
.hero__title { margin-bottom: 40px; }

.hero__meta {
  display: grid;
  /* minmax perquè les columnes puguin encongir-se quan no hi caben */
  grid-template-columns: minmax(0, 300px) minmax(0, 400px) minmax(0, 1fr);
  gap: var(--sp-12);
  align-items: start;
  padding-top: 33px;
  border-top: 1px solid var(--c-border);
}
.hero__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-5); }

/* El visual del hero ocupa tot l'ample del contenidor (1280), no només el contingut (1200) */
.hero__visual {
  position: relative;
  margin-top: 40px;
  margin-inline: calc(var(--inner) * -1);
  aspect-ratio: 1280 / 700;
  border-radius: var(--r-md);
  overflow: hidden;
  background:
    radial-gradient(circle 990px at 384px 280px, rgba(255, 212, 0, 0.35), rgba(255, 212, 0, 0) 45%),
    radial-gradient(circle 1005px at 896px 455px, rgba(159, 133, 14, 0.35), rgba(159, 133, 14, 0) 50%),
    radial-gradient(circle 948px at 640px 700px, rgba(102, 99, 82, 0.25), rgba(102, 99, 82, 0) 60%),
    var(--c-bg-deep);
}
.hero__shapes { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }

/* Showreel dins de la mateixa caixa del visual del hero. El fons de
   degradats es queda al darrere i fa de cartell mentre el video carrega. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Al mobil la caixa passa a vertical per encabir-hi el showreel 9:16. */
@media (max-width: 640px) {
  .hero__visual--video { aspect-ratio: 9 / 16; }
}

/* --------------------------------------------------------------------------
   9. Manifest
   -------------------------------------------------------------------------- */
.manifest__text { max-width: 1000px; }
.manifest__text .is-dim { color: var(--c-border); }
.manifest__note { max-width: 360px; margin-left: auto; text-align: right; margin-top: var(--sp-10); }

/* --------------------------------------------------------------------------
   10. Mosaic de projectes
   -------------------------------------------------------------------------- */
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }

.mosaic__item {
  position: relative; overflow: hidden;
  border-radius: var(--r-md); background: var(--c-surface);
}
.mosaic__item > a { display: block; width: 100%; height: 100%; }
.mosaic__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.mosaic__item:hover img { transform: scale(1.04); }

/* Inici */
.mosaic__item--a { grid-column: 1 / span 8;  height: 640px; }
.mosaic__item--b { grid-column: 9 / span 4;  height: 640px; }
.mosaic__item--c { grid-column: 1 / span 6;  height: 520px; }
.mosaic__item--d { grid-column: 7 / span 6;  height: 520px; }
.mosaic__item--e { grid-column: 1 / span 4;  height: 480px; }
.mosaic__item--f { grid-column: 5 / span 8;  height: 480px; }

/* Pàgina de projectes */
.mosaic--projects .m-8-640  { grid-column: 1 / span 8; height: 640px; }
.mosaic--projects .m-4-640  { grid-column: 9 / span 4; height: 640px; }
.mosaic--projects .m-6-560a { grid-column: 1 / span 6; height: 560px; }
.mosaic--projects .m-6-560b { grid-column: 7 / span 6; height: 560px; }
.mosaic--projects .m-4-520  { grid-column: 1 / span 4; height: 520px; }
.mosaic--projects .m-8-520  { grid-column: 5 / span 8; height: 520px; }
.mosaic--projects .m-6-680a { grid-column: 1 / span 6; height: 680px; }
.mosaic--projects .m-6-680b { grid-column: 7 / span 6; height: 680px; }

.mosaic__overlay {
  position: absolute; inset: auto 0 0 0;
  padding: var(--sp-8);
  background: linear-gradient(to top, rgba(13, 13, 13, 0.92), rgba(13, 13, 13, 0));
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mosaic__item:hover .mosaic__overlay,
.mosaic__item:focus-within .mosaic__overlay { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   11. Targetes de servei (revelen el detall en passar-hi per sobre)
   -------------------------------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }

.service-card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 420px;
  padding: var(--sp-10);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle 420px at 78% 62%, rgba(255, 212, 0, 0.10), rgba(255, 212, 0, 0) 62%),
    var(--c-bg-deep);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.service-card:hover,
.service-card:focus-within { border-color: rgba(255, 212, 0, 0.5); }

/* Número i títol: baix per defecte, puja en obrir-se */
.service-card__body { margin-top: auto; }
.service-card__num {
  font-size: var(--fs-40); line-height: var(--lh-40);
  letter-spacing: var(--ls-40); font-weight: 600;
  color: var(--c-accent);
}
.service-card__title {
  font-size: var(--fs-40); line-height: var(--lh-40);
  letter-spacing: var(--ls-40); font-weight: 600;
}
/* El titol es un enllac als projectes de la disciplina, pero ha de semblar
   text: el subratllat i el color de l'enllac trencarien la targeta. */
.service-card__title a { color: inherit; text-decoration: none; }
.service-card__title a:hover { color: var(--c-accent); }

/* Detall revelat */
.service-card__reveal {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease), opacity 0.45s var(--ease);
  opacity: 0;
}
.service-card__reveal > div { overflow: hidden; }
.service-card:hover .service-card__reveal,
.service-card:focus-within .service-card__reveal { grid-template-rows: 1fr; opacity: 1; }

.service-card__desc { margin-top: var(--sp-4); color: var(--c-text-muted); font-size: var(--fs-ui); line-height: var(--lh-ui); }
.service-card__list { margin-top: var(--sp-5); }

.service-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); margin-top: var(--sp-8);
}
.service-card__foot .link-underline { text-decoration: none; }

/* Marca d'aigua de fons — patró discret de signes «» */
.service-card__watermark {
  position: absolute; inset: 0;
  opacity: 0.16; pointer-events: none;
  background-repeat: repeat;
  background-size: 96px 66px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='96' height='66'><text x='0' y='22' font-family='Outfit,sans-serif' font-size='20' fill='%23ffd400'>«</text><text x='30' y='22' font-family='Outfit,sans-serif' font-size='20' fill='%23ffd400'>»</text><text x='48' y='56' font-family='Outfit,sans-serif' font-size='20' fill='%23ffd400'>«</text><text x='78' y='56' font-family='Outfit,sans-serif' font-size='20' fill='%23ffd400'>»</text></svg>");
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 78%);
}

/* --------------------------------------------------------------------------
   12. Franja de logotips
   -------------------------------------------------------------------------- */
.clients { padding-block: var(--sp-16); }
.clients__label {
  text-align: center; color: var(--c-text-muted);
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  letter-spacing: 1.04px; text-transform: uppercase;
}
.clients__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--sp-6) var(--sp-12); margin-top: var(--sp-10);
}
.clients__list li {
  font-size: var(--fs-22); line-height: var(--lh-22);
  font-weight: 500; color: var(--c-border);
  transition: color var(--dur) var(--ease);
}
.clients__list li:hover { color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   13. Procés
   -------------------------------------------------------------------------- */
.process {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px; padding-top: 60px;
  border-top: 1px solid var(--c-border);
}
.process__step { position: relative; }
.process__step::before {
  content: ''; position: absolute; top: -64px; left: 0;
  width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c-accent);
}
.process__title { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 500; }
.process__title span { color: var(--c-text-dim); margin-right: var(--sp-2); }
.process__desc { margin-top: var(--sp-4); color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 28px; }

/* Dues maneres de treballar (serveis) */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }
.way {
  padding: var(--sp-10);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease);
}
.way:hover { border-color: rgba(255, 212, 0, 0.5); }
.way__key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: rgba(255, 212, 0, 0.12); color: var(--c-accent);
  font-size: var(--fs-sm); font-weight: 600;
}
.way__title { margin-top: var(--sp-6); font-size: var(--fs-32); line-height: var(--lh-32); letter-spacing: var(--ls-32); font-weight: 600; }
.way__desc  { margin-top: var(--sp-4); color: var(--c-text-muted); font-size: var(--fs-16); line-height: var(--lh-16); }

/* --------------------------------------------------------------------------
   14. Targetes d'article
   -------------------------------------------------------------------------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); }

.post-card { display: flex; flex-direction: column; }
.post-card__media { aspect-ratio: 378 / 256; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__badge { margin-top: var(--sp-6); align-self: flex-start; }
.post-card__title {
  margin-top: var(--sp-4);
  font-size: var(--fs-22); line-height: 30px;
  font-weight: 500; letter-spacing: -0.36px;
  transition: color var(--dur) var(--ease);
}
.post-card:hover .post-card__title { color: var(--c-accent); }
.post-card__meta { margin-top: var(--sp-4); font-size: var(--fs-ui); color: var(--c-text-dim); }

/* Llista d'articles (blog) */
.post-row {
  display: grid; grid-template-columns: 280px 1fr auto;
  gap: var(--sp-10); align-items: center;
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--c-border);
  transition: background var(--dur) var(--ease);
}
.post-row:hover { background: rgba(255, 255, 255, 0.02); }
.post-row__media { aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; background: var(--c-surface); }
.post-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   15. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; grid-template-columns: 568px 568px; gap: var(--sp-16); align-items: start; justify-content: space-between; }
.faq__list { width: 100%; }
.faq__item { border-bottom: 1px solid var(--c-border); }
.faq__item:first-child { border-top: 1px solid var(--c-border); }

.faq__trigger {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); width: 100%;
  padding-block: var(--sp-6);
  text-align: left;
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3); font-weight: 500;
  transition: color var(--dur) var(--ease);
}
.faq__trigger:hover { color: var(--c-accent); }
.faq__icon { flex: none; width: 14px; height: 16px; transition: transform var(--dur) var(--ease); }
.faq__trigger[aria-expanded="true"] .faq__icon { transform: rotate(45deg); }

.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.faq__panel[data-open="true"] { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__answer { padding-bottom: var(--sp-6); color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   16. Bloc CTA
   -------------------------------------------------------------------------- */
.cta {
  position: relative; padding-block: 127px 128px;
  text-align: center; overflow: hidden;
  background:
    radial-gradient(circle 773px at 720px 121px, rgba(255, 212, 0, 0.28), rgba(159, 133, 14, 0.16) 35%, rgba(102, 99, 82, 0.08) 60%, rgba(102, 99, 82, 0) 78%),
    var(--c-bg);
}
/* Quadrats decoratius de contorn */
.cta__deco {
  position: absolute; border: 1px solid rgba(255, 212, 0, 0.35);
  border-radius: var(--r-lg); pointer-events: none;
}
.cta__deco--left  { width: 256px; height: 256px; left: -64px; top: 40px; }
.cta__deco--right { width: 288px; height: 288px; right: -64px; bottom: 0; }
/* Sobresurten expressament: el contenidor els retalla perquè no facin scroll */
.cta { overflow: hidden; }

.cta__inner { position: relative; }
.cta__title { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -1.44px; font-weight: 600; }
.cta__title .is-light { font-weight: 300; }
.cta__text { margin-top: var(--sp-5); color: var(--c-text-muted); }
.cta__actions { margin-top: var(--sp-10); display: flex; align-items: center; justify-content: center; gap: var(--sp-6); }

/* --------------------------------------------------------------------------
   17. Peu
   -------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--c-border); padding-top: 81px; overflow: hidden; }

.site-footer__top {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sp-12);
}
.site-footer__brand { grid-column: 1 / span 4; }
.site-footer__col-a  { grid-column: 6 / span 2; }
.site-footer__col-b  { grid-column: 8 / span 2; }
.site-footer__col-c  { grid-column: 10 / span 3; }

.site-footer__tagline { margin-top: 23px; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 24.38px; max-width: 280px; }
.site-footer__social { display: flex; gap: var(--sp-4); margin-top: 23px; }
.site-footer__social a { display: inline-flex; opacity: 0.85; transition: opacity var(--dur) var(--ease); }
.site-footer__social a:hover { opacity: 1; }
.site-footer__social img { width: 14px; height: 16px; }

.site-footer__col-title {
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--c-text-muted);
}
.site-footer__list { margin-top: 19px; display: flex; flex-direction: column; gap: 11px; }
.site-footer__list a,
.site-footer__list span { font-size: var(--fs-sm); line-height: var(--lh-sm); letter-spacing: -0.32px; }
.site-footer__list a { transition: color var(--dur) var(--ease); }
.site-footer__list a:hover { color: var(--c-accent); }

/* Marca gran del peu — 220px, #232320 */
.site-footer__wordmark {
  margin-top: var(--sp-10);
  font-size: 220px; line-height: 220px;
  letter-spacing: -0.32px; font-weight: 600;
  color: var(--c-surface);
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

.site-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); flex-wrap: wrap;
  padding-block: 25px 24px;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  color: var(--c-text-muted);
}
.site-footer__legal { display: flex; gap: var(--sp-6); }
.site-footer__legal a { transition: color var(--dur) var(--ease); }
.site-footer__legal a:hover { color: var(--c-text); }

/* --------------------------------------------------------------------------
   18. Capçalera de pàgina interior
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative; overflow: hidden;
  padding-block: 64px 56px;
  background:
    radial-gradient(circle 1137px at 1123px 45px, rgba(255, 212, 0, 0.3), rgba(159, 133, 14, 0.18) 32%, rgba(102, 99, 82, 0.1) 55%, rgba(102, 99, 82, 0) 75%),
    var(--c-bg);
}
.page-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-10); }
.page-hero__title { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 600; }
.page-hero__aside { display: flex; align-items: flex-end; gap: var(--sp-10); padding-bottom: 12px; }
.page-hero__text { max-width: 380px; font-size: var(--fs-16); line-height: var(--lh-16); color: var(--c-text-muted); }
.page-hero__count { font-size: var(--fs-sm); line-height: var(--lh-sm); font-weight: 600; color: var(--c-accent); }

/* Filtres */
.filters-bar { border-bottom: 1px solid var(--c-border); }
.filters { display: flex; gap: var(--sp-3); padding-block: var(--sp-5); overflow-x: auto; }
.filter {
  /* inline-flex i no block: els filtres son enllacos (<a>) perque funcionin
     sense JS, i un enllac no centra el text dins d'una alcada fixa com ho
     faria un <button>. Amb aixo el text queda centrat als dos eixos i
     l'etiqueta activa, que canvia de mida de lletra, no es desplaca. */
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; height: 40px; padding-inline: 21px;
  border: 1px solid var(--c-border); border-radius: var(--r-full);
  font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: 500;
  letter-spacing: -0.32px; color: var(--c-text);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.filter:hover { border-color: var(--c-text-muted); }
.filter[aria-pressed="true"] {
  background: var(--c-text); border-color: var(--c-text);
  color: var(--c-bg); font-size: var(--fs-16); line-height: 24px;
}

/* --------------------------------------------------------------------------
   19. Pàgina de projecte
   -------------------------------------------------------------------------- */
.project-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-8); padding-block: var(--sp-12);
  border-block: 1px solid var(--c-border);
}
.project-meta__label { font-size: var(--fs-xs); letter-spacing: 1.04px; text-transform: uppercase; color: var(--c-text-muted); }
.project-meta__value { margin-top: var(--sp-3); font-size: var(--fs-16); line-height: var(--lh-16); }

.project-figure { margin-top: var(--sp-16); }
/* height: auto acompanya sempre width: 100%. A la maqueta els atributs de
   les imatges ja coincidien amb la mida pintada i no calia, pero WordPress
   emet les dimensions reals del fitxer i sense aixo la imatge es deforma. */
.project-figure img { width: 100%; height: auto; border-radius: var(--r-md); }
.project-figure figcaption { margin-top: var(--sp-4); font-size: var(--fs-ui); color: var(--c-text-muted); }
.project-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); }

.quote {
  padding-block: var(--sp-24);
  font-size: var(--fs-h2); line-height: var(--lh-h2);
  letter-spacing: -1.44px; font-weight: 300;
  max-width: 960px;
}
.quote cite { display: block; margin-top: var(--sp-8); font-size: var(--fs-ui); font-style: normal; color: var(--c-text-muted); }

/* --------------------------------------------------------------------------
   20. Article
   -------------------------------------------------------------------------- */
.article { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-16); align-items: start; }

.prose { max-width: 68ch; font-size: var(--fs-lg); line-height: 32px; color: var(--c-text-muted); }
.prose > * + * { margin-top: var(--sp-6); }
.prose h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--c-text); font-weight: 600; margin-top: var(--sp-16); }
.prose h3 { font-size: var(--fs-22); line-height: var(--lh-22); color: var(--c-text); font-weight: 500; margin-top: var(--sp-12); }
.prose strong { color: var(--c-text); font-weight: 500; }
.prose a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { display: flex; flex-direction: column; gap: var(--sp-3); padding-left: var(--sp-5); }
.prose li { list-style: disc; }
.prose li::marker { color: var(--c-accent); }
.prose blockquote {
  padding-left: var(--sp-8); border-left: 2px solid var(--c-accent);
  font-size: var(--fs-22); line-height: 32px; color: var(--c-text);
}
.prose figure img { width: 100%; border-radius: var(--r-md); }
.prose figcaption { margin-top: var(--sp-3); font-size: var(--fs-ui); color: var(--c-text-muted); }

.toc { position: sticky; top: 120px; }
.toc__title { font-size: var(--fs-xs); letter-spacing: 1.04px; text-transform: uppercase; color: var(--c-text-muted); }
.toc__list { margin-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.toc__list a { font-size: var(--fs-sm); color: var(--c-text-muted); transition: color var(--dur) var(--ease); }
.toc__list a:hover, .toc__list a.is-active { color: var(--c-accent); }

/* --------------------------------------------------------------------------
   21. Contacte
   -------------------------------------------------------------------------- */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); align-items: start; }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field + .field { margin-top: var(--sp-6); }
.field label { font-size: var(--fs-ui); color: var(--c-text-muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  color: var(--c-text); font: inherit; font-size: var(--fs-sm);
  transition: border-color var(--dur) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-accent); }
.field textarea { min-height: 160px; resize: vertical; }

.field--check { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
.field--check input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--c-accent); }
.field--check label { font-size: var(--fs-ui); }

.contact-info__item + .contact-info__item { margin-top: var(--sp-8); }
.contact-info__label { font-size: var(--fs-xs); letter-spacing: 1.04px; text-transform: uppercase; color: var(--c-text-muted); }
.contact-info__value { margin-top: var(--sp-2); font-size: var(--fs-22); line-height: var(--lh-22); }
.contact-info__value a { transition: color var(--dur) var(--ease); }
.contact-info__value a:hover { color: var(--c-accent); }

/* --------------------------------------------------------------------------
   22. Animació d'entrada
   -------------------------------------------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   22b. Classes que substitueixen els estils inline de la maqueta
   Els valors son identics als atributs style="" dels fitxers HTML originals;
   passats a classes perque els blocs ACF no hagin d'escriure estils inline.
   -------------------------------------------------------------------------- */

/* Capcalera partida: eyebrow + titol a l'esquerra, enllac a la dreta.
   Identica a index.html (blog) i serveis.html (feina recent). */
.section-header--split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-header--split .h2 { margin-top: 20px; }

/* Enllac centrat sota una graella (index.html, sota el mosaic). */
.section-more { margin-top: 48px; text-align: center; }

/* Marca del peu: el .brand global es absolut i centrat; al peu es estatic. */
.brand--static { position: static; transform: none; }

/* Overlay del mosaic sempre visible (bloc "seguent projecte"). */
.mosaic__item--static { display: block; margin-top: 24px; height: 480px; }
.mosaic__overlay--static { opacity: 1; transform: none; }
.mosaic__overlay--static .h2 { display: block; }

/* Fitxa de projecte: intro a dues columnes. */
.project-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; margin-top: 32px; }
.project-intro__lead { font-weight: 300; }

/* Article: CTA enmig del text. */
.prose-cta { padding: 40px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-bg-deep); }
.prose-cta__title { color: var(--c-text); }
.prose-cta__text { margin-top: 12px; font-size: var(--fs-16); line-height: var(--lh-16); }
.prose-cta__action { margin-top: 24px; }

/* Article: bloc de compartir al final del cos. */
.article-share { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--c-border); }
.article-share .site-footer__social { margin-top: 16px; }

/* Article: caixa d'autor. */
.article-author { display: flex; gap: 24px; align-items: flex-start; padding: 40px; border: 1px solid var(--c-border); border-radius: var(--r-lg); }
.article-author__avatar { width: 56px; height: 56px; border-radius: var(--r-full); flex: none; }
.article-author__bio { margin-top: 8px; max-width: 60ch; }

/* Fitxa de projecte i article: titol amb amplada limitada. */
.title--900 { max-width: 900px; }
.title--672 { max-width: 672px; }

/* Capcalera de fitxa: titol sota el fil d'Ariadna. */
.page-hero__title--breadcrumb { margin-top: 24px; }

/* Barra d'admin de WordPress: compensa els elements sticky.
   Sense aixo la capcalera del tema queda amagada darrere la barra. */
.admin-bar .site-header { top: 32px; }
.admin-bar .toc { top: 152px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .toc { top: 166px; }
}

/* Entradetes: l'article la limita a 720px i la fitxa de projecte no.
   A la maqueta son dos estils inline diferents. */
.lead--article { margin-top: 24px; max-width: 720px; }
.lead--project { margin-top: 16px; }

/* Imatge principal de la fitxa de projecte, sense el marge superior. */
.project-figure--flush { margin-top: 0; }

/* Autoria a la capcalera de l'article. */
.article-byline { display: flex; align-items: center; gap: 12px; margin-top: 40px; }
.article-byline__avatar { width: 40px; height: 40px; border-radius: var(--r-full); flex: none; }
.article-byline__name { display: block; font-size: var(--fs-sm); font-weight: 500; }

/* La fitxa de dades duia el simbol escrit a l'HTML mentre que .eyebrow el
   posa amb CSS; unificat aqui perque l'editor no l'hagi d'escriure. */
.project-meta__label::before { content: '» '; }

/* Imatge limitada a l'amplada del text dins d'un article. */
.project-figure--prose { max-width: 68ch; }

/* Formulari de contacte: classes que substitueixen els estils inline. */
.contact-form { margin-top: 32px; }
.contact-form__fieldset { border: 0; padding: 0; margin: 24px 0 0; }
.contact-form__legend { padding: 0; }
.contact-form__tags { margin-top: 12px; }
.contact-form .tag { cursor: pointer; height: 36px; }
.contact-form .tag input { margin-right: 8px; accent-color: var(--c-accent); }
.contact-form .field--spaced { margin-top: 24px; }
.contact-form__submit { margin-top: 32px; }
.contact-form__status { margin-top: 16px; color: var(--c-accent); }
.contact-form__note { margin-top: 16px; }

/* Contact Form 7: els embolcalls que afegeix, amb l'aspecte de la maqueta */
.contact-form .wpcf7-form-control-wrap { display: block; }
.contact-form .wpcf7-form-control-wrap > textarea { display: block; } /* sense l'espai de sota dels elements en línia */
.contact-form .wpcf7-list-item { margin: 0; }
.contact-form .wpcf7-checkbox .wpcf7-list-item > label {
  display: inline-flex; align-items: center; cursor: pointer;
  height: 36px; padding-inline: var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--r-full);
  font-size: var(--fs-2xs); line-height: var(--lh-2xs);
  color: var(--c-text-muted); white-space: nowrap;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.contact-form .wpcf7-checkbox .wpcf7-list-item > label:has(input:checked) { border-color: var(--c-accent); color: var(--c-text); }
/* 8px com .contact-form .tag input, més l'espai que allà hi ha entre la casella i el text */
.contact-form .wpcf7-checkbox input { width: auto; padding: 0; margin: 0 12px 0 0; accent-color: var(--c-accent); }
.contact-form .field--check .wpcf7-list-item > label { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-ui); color: var(--c-text-muted); cursor: pointer; }
.contact-form .field--check input { padding: 0; }
.contact-form .wpcf7-not-valid { border-color: var(--c-accent); }
.contact-form .wpcf7-not-valid-tip { display: block; margin-top: var(--sp-2); font-size: var(--fs-2xs); color: var(--c-accent); }
.contact-form .wpcf7-submit:disabled { opacity: .6; cursor: progress; transform: none; }
.contact-form .wpcf7-spinner { margin: 0 0 0 16px; vertical-align: middle; }
.contact-form .wpcf7 form .wpcf7-response-output { margin: 16px 0 0; padding: 0; border: 0; font-size: var(--fs-ui); color: var(--c-accent); }
.contact-form .wpcf7 form.sent .wpcf7-response-output { color: var(--c-text); }
.contact-form .wpcf7[hidden] { display: none; }

/* Panell de confirmació que substitueix el formulari un cop enviat */
.contact-success {
  padding: var(--sp-10);
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  scroll-margin-top: 120px;
  animation: ts-success-in .5s var(--ease) both;
}
/* Rep el focus perquè el lector de pantalla el llegeixi; no és un control, sense contorn */
.contact-success:focus { outline: none; }
.contact-form.is-sent .contact-form__note { display: none; }
.contact-success__icon { display: block; margin-bottom: var(--sp-6); }
.contact-success__icon circle { fill: var(--c-accent); }
.contact-success__icon path {
  fill: none; stroke: var(--c-accent-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: ts-success-check .45s .25s var(--ease) forwards;
}
.contact-success__title { margin-top: var(--sp-3); }
.contact-success__text { margin-top: var(--sp-4); color: var(--c-text-muted); }
.contact-success__text strong { color: var(--c-text); font-weight: 500; word-break: break-all; }
.contact-success__summary { margin-top: var(--sp-3); color: var(--c-text-dim); }
.contact-success__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); margin-top: var(--sp-8); }
.contact-success__reset { background: none; border: 0; padding: 0; color: var(--c-text-muted); cursor: pointer; font-family: inherit; }
.wpcf7-submit[aria-busy="true"] { cursor: progress; }

@keyframes ts-success-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ts-success-check { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .contact-success { animation: none; }
  .contact-success__icon path { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 600px) { .contact-success { padding: var(--sp-6); } }

/* Passos en llista vertical (contacte, "que passa despres"). */
.steps-list { display: flex; flex-direction: column; gap: 32px; margin-top: 32px; }
.steps-list__key { font-size: 20px; line-height: 28px; font-weight: 600; }
.steps-list li > * + * { margin-top: 8px; }

/* Bloc amb separador superior dins d'una columna. */
.stack-divider { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--c-border); }

/* Capcalera de pagina apilada (contacte). */
.page-hero--stacked .page-hero__title { margin-top: 20px; }
.page-hero--stacked .page-hero__text { margin-top: 24px; max-width: 520px; }
.page-hero__title .is-light { font-weight: 300; }

/* Fitxa destacada del blog: metadades i cos. */
.post-row { border-top: 1px solid var(--c-border); }
.post-row__meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.post-row__title { margin-top: 16px; }
.post-row__excerpt { margin-top: 12px; max-width: 60ch; }

/* Graella de targetes amb separacio respecte de la capcalera de seccio. */
.posts--spaced { margin-top: 48px; }

/* Paginacio de WordPress dins de .filters (paginate_links retorna <a>/<span>). */
.filters .page-numbers { display: inline-flex; align-items: center; justify-content: center; }
.filters .page-numbers.current { color: var(--c-accent); border-color: var(--c-accent); }
.filters .page-numbers.dots { border: 0; }

/* --------------------------------------------------------------------------
   23. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1440px) {
  .site-footer__wordmark { font-size: 15.3vw; line-height: 1; }
}

@media (max-width: 1200px) {
  /* A tauleta horitzontal les tres columnes del hero van justes: en fem dues */
  .hero__meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); }
  .hero__actions { grid-column: 1 / -1; justify-content: flex-start; }

  :root {
    --fs-display: 84px; --lh-display: 82px; --ls-display: -2.5px;
    --fs-h1: 56px; --lh-h1: 56px;
    --fs-h2: 40px; --lh-h2: 46px;
    --fs-40: 34px; --lh-40: 40px;
    --gutter: 48px; --section-y: 96px;
  }
  .faq { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
}

@media (max-width: 1024px) {
  :root {
    --fs-display: 64px; --lh-display: 62px; --ls-display: -2px;
    --fs-h1: 44px; --lh-h1: 46px;
    --fs-h2: 34px; --lh-h2: 40px;
    --fs-h3: 24px; --lh-h3: 32px;
    --fs-32: 26px; --lh-32: 32px;
    --gutter: 32px; --inner: 24px; --section-y: 80px;
  }

  .site-nav {
    position: fixed; inset: 80px 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: var(--sp-5);
    padding: var(--sp-8) var(--gutter) var(--sp-10);
    background: var(--c-bg); border-bottom: 1px solid var(--c-border);
    transform: translateY(-120%); visibility: hidden;
    transition: transform var(--dur) var(--ease);
  }
  .site-nav.is-open { transform: none; visibility: visible; }
  .site-nav a { font-size: var(--fs-22); }
  .nav-toggle { display: inline-flex; }
  .brand { position: static; transform: none; }
  .site-header__inner { justify-content: space-between; }
  .site-header__actions .lang-switch,
  .site-header__actions .social-links { display: none; }

  .hero__meta { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero__actions { justify-content: flex-start; }

  .mosaic__item, .mosaic--projects .mosaic__item { grid-column: 1 / -1 !important; height: 420px !important; }

  .services { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .service-card__reveal { grid-template-rows: 1fr; opacity: 1; }
  .ways     { grid-template-columns: 1fr; }
  .process  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
  .posts    { grid-template-columns: 1fr; gap: var(--sp-10); }
  .faq      { grid-template-columns: 1fr; gap: var(--sp-10); }
  .article  { grid-template-columns: 1fr; gap: var(--sp-10); }
  .toc      { position: static; }
  .contact  { grid-template-columns: 1fr; gap: var(--sp-10); }
  .project-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .project-figures { grid-template-columns: 1fr; }
  .page-hero__row { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
  .page-hero__aside { padding-bottom: 0; }
  .post-row { grid-template-columns: 200px 1fr; }
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
  .site-footer__brand, .site-footer__col-a, .site-footer__col-b, .site-footer__col-c { grid-column: auto; }
  .manifest__note { text-align: left; margin-left: 0; }
  .cta__deco { display: none; }
}

/* --------------------------------------------------------------------------
   Tàctil: a mòbil i tauleta, tot el que es prem ha de tenir prou àrea.
   El mínim recomanat és 44px; ho aconseguim amb padding i àrea virtual,
   sense tocar la mida visible del text.
   -------------------------------------------------------------------------- */
@media (hover: none), (pointer: coarse), (max-width: 1200px) {
  .site-nav a,
  .link-underline,
  .link-arrow,
  .site-footer__list a,
  .site-footer__legal a,
  .toc__list a,
  .lang-switch a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Àrea de toc més ampla que el text, sense desplaçar res.
     Només creix cap amunt i avall: cap als costats desbordaria la pàgina. */
  .site-nav a::after,
  .link-underline::after,
  .site-footer__list a::after,
  .site-footer__legal a::after {
    content: '';
    position: absolute;
    inset: -11px 0;
  }

  .social-links a,
  .site-footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px;
  }

  /* El logotip també és un enllaç cap a l'inici */
  .brand { min-height: 44px; }

  .tag { min-height: 32px; }
  .filter { height: 44px; }
  .faq__trigger { min-height: 56px; }

  /* Fil d'Ariadna, dades de contacte i enllaços de compartir: també es premen */
  nav[aria-label="Fil d'Ariadna"] a,
  .contact-info__value a,
  .toc__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Els enllaços de dins d'un paràgraf no han de trencar l'interlineat.
     N'exceptuem els d'icona, que sí que necessiten àrea de toc. */
  .prose p > a,
  .prose li > a,
  .faq__answer a,
  .card__desc a { min-height: 0; display: inline; }
}

@media (max-width: 640px) {
  :root {
    --fs-display: 44px; --lh-display: 46px; --ls-display: -1.2px;
    --fs-h1: 34px; --lh-h1: 38px;
    --fs-h2: 28px; --lh-h2: 34px;
    --fs-h3: 21px; --lh-h3: 28px;
    --fs-22: 19px; --lh-22: 26px;
    --fs-base: 16px; --lh-base: 26px;
    --fs-lg: 17px; --lh-lg: 27px;
    --gutter: 20px; --inner: 0px; --section-y: 64px; --grid-gap: 16px;
  }

  .hero__actions { flex-direction: column; align-items: stretch; }
  .mosaic__item, .mosaic--projects .mosaic__item { height: 260px !important; }
  .service-card { padding: var(--sp-6); }
  .way { padding: var(--sp-6); }
  .process { grid-template-columns: 1fr; gap: var(--sp-8); }
  .process__step::before { top: -48px; }
  .clients__list { gap: var(--sp-5) var(--sp-8); }
  .clients__list li { font-size: var(--fs-lg); }
  .post-row { grid-template-columns: 1fr; gap: var(--sp-5); }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .cta__actions { flex-direction: column; align-items: stretch; }
  .quote { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}

/* --------------------------------------------------------------------------
   24. Preferències i impressió
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer__wordmark, .nav-toggle, .cta { display: none; }
  body { background: #fff; color: #000; }
}