/* ════════════════════════════════════════════════════════════════
   RENOVATIO WORKERS — styles.css
   Paleta «maragda i porcellana» + Source Serif 4 / Sora
   (vegeu PLA.md per la justificació de cada decisió)
   ════════════════════════════════════════════════════════════════ */

/* ─── 1. Tokens ─────────────────────────────────────────────── */
:root {
  /* Color — derivat del logo real (esfera maragda, gris WORKERS)
     i de l'ofici (porcellànic/marbre dels acabats premium) */
  --maragda:       #007747;
  --maragda-fosc:  #005B36;
  --maragda-clar:  #48C68E;
  --nit:           #0E1512;
  --nit-capa:      #182420;
  --porcellana:    #F8F6F2;
  --pedra:         #ECE7DF;
  --tinta:         #1B211E;
  --grafit:        #575B59;
  --clar:          #EFEDE8;
  --blanc:         #FFFFFF;
  --linia:         rgba(27, 33, 30, 0.14);
  --linia-nit:     rgba(239, 237, 232, 0.16);

  /* Tipografia */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Sora", "Segoe UI", Arial, sans-serif;
  --track-ample: 0.18em;   /* kickers i labels en majúscules */
  --track-fi: 0.01em;      /* cos */

  /* Escala d'espais */
  --esp-1: 0.5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.5rem;
  --esp-5: 4rem;
  --esp-6: 6.5rem;

  /* Forma */
  --radi-s: 3px;
  --radi-m: 6px;
  --ombra: 0 18px 45px -18px rgba(14, 21, 18, 0.35);

  /* Amplades */
  --contenidor: 1160px;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: var(--track-fi);
  line-height: 1.65;
  color: var(--tinta);
  background: var(--porcellana);
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0;
  margin: 0 0 var(--esp-2);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
h4 {
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 var(--esp-1);
}

p { margin: 0 0 var(--esp-2); }
p:last-child { margin-bottom: 0; }

a { color: var(--maragda-fosc); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--maragda); }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 var(--esp-2); padding-left: 1.3rem; }

strong { font-weight: 600; }

em { font-family: var(--font-display); font-style: italic; }

:focus-visible {
  outline: 3px solid var(--maragda);
  outline-offset: 2px;
  border-radius: 2px;
}
.band-nit :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--maragda-clar);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--nit);
  color: var(--clar);
  padding: 0.6rem 1rem;
  z-index: 200;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ─── 3. Utilitats de maquetació ────────────────────────────── */
.contenidor {
  width: min(var(--contenidor), 92vw);
  margin-inline: auto;
}

.seccio { padding-block: var(--esp-6); }
.seccio-compacta { padding-block: var(--esp-5); }

.band-pedra { background: var(--pedra); }

.band-nit {
  background: var(--nit);
  color: var(--clar);
}
.band-nit h2, .band-nit h3 { color: var(--blanc); }
.band-nit a { color: var(--maragda-clar); }
.band-nit a:hover { color: var(--clar); }

/* Kicker: majúscules espaiades, eco del «W̃ORKERS» del logo */
.kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-ample);
  text-transform: uppercase;
  color: var(--maragda-fosc);
  margin-bottom: var(--esp-2);
}
.kicker::before { content: "~ "; color: var(--maragda); }
.band-nit .kicker { color: var(--maragda-clar); }
.band-nit .kicker::before { color: var(--maragda-clar); }

.encap { max-width: 46rem; margin-bottom: var(--esp-4); }
.encap-centrat { margin-inline: auto; text-align: center; }

.sub { color: var(--grafit); font-size: 1.06rem; }
.band-nit .sub { color: rgba(239, 237, 232, 0.78); }

/* Marcador esfera: el punt-logo com a vinyeta de llista */
.llista-esfera { list-style: none; padding: 0; }
.llista-esfera li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.7rem;
}
.llista-esfera li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.72em;
  height: 0.72em;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #00874D 0%, #005F1F 78%);
}

/* ─── 4. Botons ─────────────────────────────────────────────── */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: var(--track-fi);
  text-decoration: none;
  text-align: center;
  padding: 0.85rem 1.7rem;
  border-radius: var(--radi-s);
  border: 1px solid var(--maragda);
  background: var(--maragda);
  color: var(--blanc);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:hover { background: var(--maragda-fosc); border-color: var(--maragda-fosc); color: var(--blanc); }

.btn-contorn {
  background: transparent;
  border-color: var(--tinta);
  color: var(--tinta);
}
.btn-contorn:hover { background: var(--tinta); border-color: var(--tinta); color: var(--porcellana); }

.band-nit .btn-contorn {
  border-color: var(--clar);
  color: var(--clar);
  background: transparent;
}
.band-nit .btn-contorn:hover { background: var(--clar); color: var(--nit); }

.accions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
}

/* ─── 5. Capçalera ──────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 246, 242, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linia);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  min-height: 74px;
}

.marca { display: inline-flex; align-items: center; }
.marca img { width: auto; height: 42px; }

.nav-principal > ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
}

.nav-principal a,
.nav-principal .sub-toggle {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
}
.nav-principal a:hover { color: var(--maragda-fosc); }
.nav-principal a[aria-current="page"] {
  color: var(--maragda-fosc);
  text-decoration: underline;
  text-decoration-color: var(--maragda);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Submenú Servicios */
.has-sub { position: relative; }
.sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-body);
  cursor: pointer;
}
.sub-toggle::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.submenu {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: -1rem;
  min-width: 15.5rem;
  background: var(--blanc);
  border: 1px solid var(--linia);
  border-radius: var(--radi-m);
  box-shadow: var(--ombra);
  padding: 0.5rem;
  display: none;
  flex-direction: column;
  gap: 0;
}
.has-sub.oberta .submenu { display: flex; }
.submenu li { width: 100%; }
.submenu a {
  display: block;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radi-s);
}
.submenu a:hover { background: var(--pedra); }

.header-cta { white-space: nowrap; padding: 0.7rem 1.2rem; }

/* Menú mòbil */
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--linia);
  border-radius: var(--radi-s);
  padding: 0.55rem 0.65rem;
  cursor: pointer;
}
.menu-toggle .barra {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--tinta);
  margin: 4px 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 979px) {
  .menu-toggle { display: block; }

  .nav-principal {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--porcellana);
    border-bottom: 1px solid var(--linia);
    display: none;
    padding: var(--esp-2) 4vw var(--esp-3);
  }
  .nav-principal.oberta { display: block; }

  .nav-principal ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
  }
  .nav-principal > ul > li { width: 100%; border-bottom: 1px solid var(--linia); }
  .nav-principal > ul > li:last-child { border-bottom: 0; }
  .nav-principal a, .nav-principal .sub-toggle { display: block; width: 100%; padding: 0.8rem 0; font-size: 1rem; }

  .submenu {
    position: static;
    display: flex;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 0.6rem 1rem;
    min-width: 0;
  }
  .sub-toggle { display: none; }
  .header-cta { padding: 0.55rem 0.9rem; font-size: 0.85rem; }
  .marca img { height: 34px; }
}

/* ─── 6. Hero ───────────────────────────────────────────────── */
.hero { padding-block: var(--esp-5) var(--esp-6); }

.hero-graella {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--esp-5);
  align-items: center;
}

.hero h1 { margin-bottom: var(--esp-3); }
.hero .sub { max-width: 34rem; margin-bottom: var(--esp-3); }

.hero-fiabilitat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: var(--esp-3);
  padding: 0;
  list-style: none;
  font-size: 0.86rem;
  color: var(--grafit);
}
.hero-fiabilitat li { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0; }
.hero-fiabilitat li::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #00874D 0%, #005F1F 78%);
  flex: none;
}

.hero-figura { position: relative; margin: 0; }
.hero-figura img {
  width: 100%;
  border-radius: var(--radi-m);
  box-shadow: var(--ombra);
  object-fit: cover;
}

/* Fitxa de sala: etiqueta museística sota les imatges destacades */
.fitxa {
  position: absolute;
  left: -1.2rem;
  bottom: 1.4rem;
  background: var(--blanc);
  border-left: 3px solid var(--maragda);
  border-radius: 0 var(--radi-s) var(--radi-s) 0;
  box-shadow: var(--ombra);
  padding: 0.7rem 1.1rem;
  max-width: 85%;
}
.fitxa .fitxa-titol {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  display: block;
  color: var(--tinta);
}
.fitxa .fitxa-meta {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-ample);
  text-transform: uppercase;
  color: var(--grafit);
  margin-top: 0.2rem;
}

@media (max-width: 899px) {
  .hero-graella { grid-template-columns: 1fr; gap: var(--esp-4); }
  .fitxa { left: 0.9rem; bottom: 0.9rem; }
}

/* Hero compacte (pàgines interiors) */
.hero-compacte { padding-block: var(--esp-4) var(--esp-5); }
.hero-compacte h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }

.ruta {
  font-size: 0.8rem;
  color: var(--grafit);
  margin-bottom: var(--esp-2);
}
.ruta a { color: var(--grafit); }
.ruta a:hover { color: var(--maragda-fosc); }

/* ─── 7. Xifres (stats) ─────────────────────────────────────── */
.xifres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--esp-3);
}
.xifra { border-top: 2px solid var(--maragda); padding-top: var(--esp-2); }
.xifra-valor {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1;
  display: block;
  color: var(--tinta);
}
.xifra-etiqueta {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: var(--track-ample);
  text-transform: uppercase;
  color: var(--grafit);
}
@media (max-width: 767px) {
  .xifres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ─── 8. Targetes de servei ─────────────────────────────────── */
.serveis-graella {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
}
.targeta-servei {
  display: flex;
  flex-direction: column;
  background: var(--blanc);
  border: 1px solid var(--linia);
  border-radius: var(--radi-m);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.targeta-servei:hover { transform: translateY(-4px); box-shadow: var(--ombra); color: inherit; }
.targeta-servei img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; }
.targeta-cos { padding: var(--esp-3); }
.targeta-cos h3 { margin-bottom: 0.5rem; }
.targeta-cos p { color: var(--grafit); font-size: 0.95rem; margin-bottom: var(--esp-2); }
.targeta-enllac {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: var(--track-ample);
  text-transform: uppercase;
  color: var(--maragda-fosc);
}
.targeta-servei:hover .targeta-enllac { color: var(--maragda); }
@media (max-width: 767px) {
  .serveis-graella { grid-template-columns: 1fr; }
}

/* ─── 9. El mètode (3 fases) ────────────────────────────────── */
.metode-graella {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-3);
  counter-reset: fase;
}
.fase {
  background: var(--nit-capa);
  border: 1px solid var(--linia-nit);
  border-radius: var(--radi-m);
  padding: var(--esp-3);
  counter-increment: fase;
}
.fase h3::before {
  content: "Fase " counter(fase);
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-ample);
  text-transform: uppercase;
  color: var(--maragda-clar);
  margin-bottom: 0.6rem;
}
.fase p { color: rgba(239, 237, 232, 0.78); font-size: 0.95rem; }
@media (max-width: 899px) {
  .metode-graella { grid-template-columns: 1fr; }
}

/* ─── 10. Prova social ──────────────────────────────────────── */
.ressenyes-caixa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-5);
  background: var(--blanc);
  border: 1px solid var(--linia);
  border-radius: var(--radi-m);
  padding: var(--esp-4);
}
.ressenyes-nota {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--tinta);
}
.estrelles { color: var(--maragda); font-size: 1.25rem; letter-spacing: 0.15em; }
.ressenyes-detall { color: var(--grafit); font-size: 0.92rem; }

/* ─── 11. Graella de mostres (teaser i pàgines de servei) ───── */
.mostra-graella {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-3);
}
.mostra-graella figure { margin: 0; position: relative; }
.mostra-graella img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radi-m);
}
.mostra-graella figcaption {
  margin-top: 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-ample);
  text-transform: uppercase;
  color: var(--grafit);
}
@media (max-width: 767px) {
  .mostra-graella { grid-template-columns: 1fr; }
  .mostra-graella img { aspect-ratio: 16 / 10; }
}

/* ─── 12. LA GALERÍA — element signatura (proyectos.html) ────
   Scroll vertical → travelling horitzontal (panell sticky).
   Amb prefers-reduced-motion o pantalla petita: carrusel natiu. */
.galeria-marc { position: relative; }

.galeria-pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: var(--esp-4);
}

.galeria-capcalera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}

.galeria-controls { display: flex; gap: 0.6rem; }
.galeria-fletxa {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--linia-nit);
  background: var(--nit-capa);
  color: var(--clar);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.galeria-fletxa:hover { background: var(--maragda-fosc); border-color: var(--maragda-fosc); }
.galeria-fletxa:disabled { opacity: 0.35; cursor: default; }

.galeria-pista {
  display: flex;
  gap: var(--esp-3);
  will-change: transform;
}

.obra {
  flex: none;
  width: min(64vw, 760px);
  margin: 0;
}
.obra img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radi-m);
}
.obra figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin-top: 0.9rem;
  border-left: 3px solid var(--maragda-clar);
  padding-left: 0.9rem;
}
.obra .obra-titol {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--blanc);
}
.obra .obra-meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-ample);
  text-transform: uppercase;
  color: rgba(239, 237, 232, 0.65);
}

.galeria-progres {
  margin-top: var(--esp-3);
  height: 2px;
  background: var(--linia-nit);
  border-radius: 1px;
  overflow: hidden;
}
.galeria-progres-barra {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--maragda-clar);
}

/* Mode carrusel (mòbil / reduced motion / sense JS) */
.galeria-marc.mode-carrusel .galeria-pin {
  position: static;
  min-height: 0;
  overflow: visible;
}
.galeria-marc.mode-carrusel .galeria-pista {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--esp-2);
}
.galeria-marc.mode-carrusel .obra {
  width: min(82vw, 620px);
  scroll-snap-align: start;
}
.galeria-marc.mode-carrusel .galeria-progres { display: none; }
/* Sense JS: carrusel natiu sempre */
html:not(.te-js) .galeria-pin { position: static; min-height: 0; overflow: visible; }
html:not(.te-js) .galeria-pista { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--esp-2); }
html:not(.te-js) .galeria-progres, html:not(.te-js) .galeria-controls { display: none; }

/* ─── 13. FAQ ───────────────────────────────────────────────── */
.faq-llista { max-width: 50rem; }
.faq-item {
  border-bottom: 1px solid var(--linia);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-2);
  padding: 1.1rem 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--maragda);
  flex: none;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-resposta { padding: 0 0 1.2rem; color: var(--grafit); max-width: 44rem; }

.band-nit .faq-item { border-color: var(--linia-nit); }
.band-nit .faq-item .faq-resposta { color: rgba(239, 237, 232, 0.78); }
.band-nit .faq-item summary::after { color: var(--maragda-clar); }

/* ─── 14. Formulari ─────────────────────────────────────────── */
.form-graella {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-2) var(--esp-3);
}
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field-ample { grid-column: 1 / -1; }

.form-field label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: var(--track-fi);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem; /* ≥16px: evita el zoom d'iOS */
  color: var(--tinta);
  background: var(--blanc);
  border: 1px solid var(--linia);
  border-radius: var(--radi-s);
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.form-field textarea { min-height: 8.5rem; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 3px solid var(--maragda);
  outline-offset: 1px;
}
.form-field.te-error input,
.form-field.te-error select,
.form-field.te-error textarea { border-color: #B3261E; }

.form-error {
  display: none;
  font-size: 0.8rem;
  color: #B3261E;
}
.form-field.te-error .form-error { display: block; }

.form-consentiment {
  grid-column: 1 / -1;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--grafit);
}
.form-consentiment input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.2rem;
  flex: none;
  accent-color: var(--maragda);
}

.form-estat {
  grid-column: 1 / -1;
  display: none;
  border-radius: var(--radi-s);
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
}
.form-estat.ok { display: block; background: #E2F2E9; color: #114B30; }
.form-estat.ko { display: block; background: #F9E4E2; color: #7C1D16; }

/* Honeypot antispam: fora de la vista, mai display:none (els bots ho detecten) */
.camp-mel {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 767px) {
  .form-graella { grid-template-columns: 1fr; }
}

/* ─── 15. Contacte ──────────────────────────────────────────── */
.contacte-graella {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--esp-5);
  align-items: start;
}
@media (max-width: 899px) {
  .contacte-graella { grid-template-columns: 1fr; }
}

.contacte-dades {
  background: var(--blanc);
  border: 1px solid var(--linia);
  border-radius: var(--radi-m);
  padding: var(--esp-3);
}
.contacte-dades ul { list-style: none; padding: 0; margin: 0; }
.contacte-dades li { padding: 0.7rem 0; border-bottom: 1px solid var(--linia); }
.contacte-dades li:last-child { border-bottom: 0; }
.contacte-dades .dada-etiqueta {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--track-ample);
  text-transform: uppercase;
  color: var(--grafit);
  margin-bottom: 0.15rem;
}

.mapa-marc {
  margin-top: var(--esp-3);
  border-radius: var(--radi-m);
  overflow: hidden;
  border: 1px solid var(--linia);
}
.mapa-marc iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

/* ─── 16. CTA final ─────────────────────────────────────────── */
.cta-final { text-align: center; }
.cta-final h2 { margin-bottom: var(--esp-2); }
.cta-final .sub { margin-inline: auto; max-width: 38rem; margin-bottom: var(--esp-3); }
.cta-final .accions { justify-content: center; }
.cta-telefon {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
}

/* ─── 17. Peu ───────────────────────────────────────────────── */
.site-footer {
  background: var(--nit);
  color: rgba(239, 237, 232, 0.78);
  padding-block: var(--esp-5) var(--esp-3);
  font-size: 0.92rem;
}
.site-footer a { color: var(--clar); }
.site-footer a:hover { color: var(--maragda-clar); }

.footer-graella {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--esp-4);
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--linia-nit);
}
.footer-graella h4 {
  color: var(--blanc);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: var(--track-ample);
  text-transform: uppercase;
  margin-bottom: var(--esp-2);
}
.footer-graella ul { list-style: none; margin: 0; padding: 0; }
.footer-graella li { margin-bottom: 0.55rem; }
.footer-graella a { text-decoration: none; }
.footer-graella a:hover { text-decoration: underline; }
.footer-marca img { height: 40px; width: auto; margin-bottom: var(--esp-2); }
.footer-marca p { max-width: 24rem; }

.footer-final {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-2);
  padding-top: var(--esp-3);
  font-size: 0.8rem;
  color: rgba(239, 237, 232, 0.55);
}
@media (max-width: 899px) {
  .footer-graella { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .footer-graella { grid-template-columns: 1fr; }
}

/* ─── 18. WhatsApp flotant ──────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(14, 21, 18, 0.3);
  animation: puls-whatsapp 2.6s ease-in-out infinite;
}
.whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }
.whatsapp-float:hover { background: #1EBE5B; }

@keyframes puls-whatsapp {
  0%, 100% { box-shadow: 0 8px 24px rgba(14, 21, 18, 0.3), 0 0 0 0 rgba(37, 211, 102, 0.45); }
  50% { box-shadow: 0 8px 24px rgba(14, 21, 18, 0.3), 0 0 0 12px rgba(37, 211, 102, 0); }
}

/* ─── 19. Reveals (un sol tret; controlats per js/main.js) ──── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible { opacity: 1; transform: none; }
/* Sense JS, tot visible */
html:not(.te-js) .reveal { opacity: 1; transform: none; }

/* ─── 20. Pàgines legals ────────────────────────────────────── */
.pagina-legal { max-width: 46rem; }
.pagina-legal h2 { font-size: 1.45rem; margin-top: var(--esp-4); }

/* ─── 21. Enllaços creuats de serveis ───────────────────────── */
.tambe-fem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}
.tambe-fem a {
  display: inline-block;
  border: 1px solid var(--linia);
  border-radius: var(--radi-s);
  background: var(--blanc);
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.6rem 1.1rem;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.tambe-fem a:hover { border-color: var(--maragda); color: var(--maragda-fosc); }

/* ─── 22. Dues columnes genèriques ──────────────────────────── */
.dues-columnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-5);
  align-items: center;
}
.dues-columnes img {
  width: 100%;
  border-radius: var(--radi-m);
  object-fit: cover;
}
@media (max-width: 899px) {
  .dues-columnes { grid-template-columns: 1fr; gap: var(--esp-4); }
}

/* ─── 23. prefers-reduced-motion: mata TOT el moviment ──────── */
@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;
  }
  .whatsapp-float { animation: none; }
  .reveal { opacity: 1; transform: none; }
}