/* dcmargentona.com — sistema visual.
 *
 * ⚠️ TOT el CSS viu aquí. La CSP porta `style-src 'self'`: ni <style> ni
 *    style="...". Si la pàgina es veu trencada, la reparació NO és afegir
 *    'unsafe-inline' a la CSP: és treure l'estil de línia.
 *
 * La paleta surt de la web d'avui, mesurada el 2026-09-04 amb
 * `magick ... -colors 8 -unique-colors`. Contrast calculat sobre --fons:
 *   --tinta      7,6:1   ✔ text de cos
 *   --cuir-text  5,0:1   ✔ text secundari
 *   --cuir-fosc  4,0:1   ✘ MAI per a text: només accents i decoració
 *   --cuir       3,1:1   ✘ només elements no textuals (els punts de la cronologia)
 *   --pedra 1,6:1 · --sorra 1,7:1   ✘ només vores i fons
 *
 * ⚠️ Ho guarda tests/test_contrast.py. El 2026-09-04 vaig escriure aquest avís
 *    i tot seguit vaig fer servir --cuir-fosc per als països, els subtítols de
 *    la cronologia i el correu. El test hi és perquè no torni a passar.
 */

:root {
  --fons:      #F5F2ED;
  --tinta:     #574A41;
  --pedra:     #CCC4B7;
  --sorra:     #C7B8A5;
  --cuir:      #9A8876;
  --cuir-fosc: #8B725F;   /* 4,0:1 — NOMÉS accents i decoració, MAI text */
  --cuir-text: #796453;   /* 5,0:1 — el mateix to, apte per a text petit */

  /* ⚠️ Pila de sistema, provisional. La tipografia de marca està pendent de
     decisió d'Andreu; el logotip ja no en depèn perquè és un SVG. */
  --serif: Georgia, "Times New Roman", "Liberation Serif", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --pas: 1.5rem;
  --ample: 68rem;
  --ample-text: 34rem;
}

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

/* Peu al fons de la finestra encara que la pàgina sigui curta: sense això,
   /entrar/ i l'avís legal deixen el peu surant al mig de la pantalla. */
html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--fons);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1.1em; }

:focus-visible { outline: 3px solid var(--cuir-fosc); outline-offset: 3px; }

/* ── Tipografia de titular ─────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0 0 0.6em; }

h2 {
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  line-height: 1.3;
}
h3 { font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Utilitats ─────────────────────────────────────────────────────── */
.visualment-ocult {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.salta {
  position: absolute; left: -100vw; top: 0; z-index: 10;
  background: var(--tinta); color: var(--fons); padding: 0.75rem 1.25rem;
}
.salta:focus { left: 0; }

/* ── Capçalera ─────────────────────────────────────────────────────── */
.capcalera {
  display: flex; align-items: center; gap: var(--pas);
  padding: 1rem clamp(1rem, 3vw, 2.5rem);
  background: var(--tinta); color: var(--fons);
}
.marca { display: block; margin-right: auto; color: var(--fons); line-height: 0; }
.logotip { display: block; height: 2.1rem; width: auto; }

.idiomes { display: flex; gap: 0.85rem; }
.idiomes a {
  text-decoration: none; font-size: 0.78rem; letter-spacing: 0.14em; opacity: 0.6;
}
.idiomes a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }
.idiomes a:hover { opacity: 1; }

.entrar {
  border: 1px solid currentColor; padding: 0.45rem 1.15rem; text-decoration: none;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
}
.entrar:hover { background: var(--fons); color: var(--tinta); }

/* ── Contenidors i ritme ───────────────────────────────────────────── */
main { flex: 1; }   /* empeny el peu al fons en pàgines curtes */
main > section { padding: clamp(2.5rem, 5.5vw, 5rem) clamp(1rem, 3vw, 2.5rem); }
main > .hero, main > .foto-ampla { padding: 0; }

.hero img, .foto-ampla img { width: 100%; }

/* ── Lema ──────────────────────────────────────────────────────────── */
.lema { text-align: center; }
.lema h1 {
  margin: 0 auto; max-width: 30rem;
  font-weight: 400; text-transform: none;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.6rem);
  letter-spacing: 0.14em; line-height: 1.8;
}

/* ── Qui som ───────────────────────────────────────────────────────── */
.about { max-width: var(--ample); margin: 0 auto; }
.about h2 { margin-bottom: 2rem; }
.columnes { columns: 2; column-gap: 3rem; }
.columnes p { break-inside: avoid; }

/* ── Cronologia ────────────────────────────────────────────────────── */
.cronologia { max-width: var(--ample); margin: 0 auto; }
.cronologia-cos { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cronologia-foto { min-width: 0; }

.fites { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 1px solid var(--pedra); min-width: 0; }
.fites li { position: relative; padding: 0 0 1.9rem; }
.fites li::before {
  content: ""; position: absolute; left: -1.8rem; top: 0.55rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cuir);
}
.fites .any {
  display: block; font-family: var(--serif); font-size: 1.15rem;
  letter-spacing: 0.1em; color: var(--cuir-text);
}
.fites h3 { font-size: 0.95rem; margin: 0.15rem 0 0.2rem; }
.fites p { margin: 0; font-size: 0.92rem; font-style: italic; color: var(--cuir-text); }

/* ── Fites 2026 ────────────────────────────────────────────────────── */
.highlights {
  max-width: var(--ample); margin: 0 auto;
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.highlights-text, .highlights-foto { min-width: 0; }
.any-gran { display: block; font-size: 0.6em; letter-spacing: 0.3em; color: var(--cuir-text); }
.destacat { font-size: 1.1rem; max-width: var(--ample-text); }
.paisos { max-width: var(--ample-text); color: var(--cuir-text); }

.xifres { margin: 2rem 0 1.5rem; }
.xifres dt { font-family: var(--serif); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.95rem; }
.xifres dt strong { font-size: 1.5rem; letter-spacing: 0; }
.xifres dd { margin: 0 0 1.2rem; color: var(--cuir-text); }

.marketplaces { font-size: 0.92rem; }
.canals { display: block; font-family: var(--serif); letter-spacing: 0.16em; margin-top: 0.3rem; }

/* ── Missió, visió, valors ─────────────────────────────────────────── */
.mvv {
  max-width: var(--ample); margin: 0 auto;
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.mvv-foto, .mvv-text { min-width: 0; }
.mvv article + article { margin-top: 2.2rem; }
.mvv p { max-width: var(--ample-text); }

/* ── Arquitectura de marca ─────────────────────────────────────────── */
.linies { max-width: var(--ample); margin: 0 auto; }
.linies-text { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.linies-text .subtitol {
  display: block; font-size: 0.55em; font-style: italic;
  letter-spacing: 0.2em; text-transform: none; color: var(--cuir-text); margin-top: 0.4em;
}
.graella-linies {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.graella-linies li { min-width: 0; }
.graella-linies img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* ── Oficines ──────────────────────────────────────────────────────── */
.oficines {
  max-width: var(--ample); margin: 0 auto;
  display: grid; grid-template-columns: 7fr 5fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.oficines-foto, .oficines-text { min-width: 0; }
.seu { font-size: 1.05rem; }
.correu a { color: var(--cuir-text); text-underline-offset: 0.25em; }

/* ── Pàgina «arriba aviat» ─────────────────────────────────────────── */
.aviat { max-width: var(--ample-text); margin: 0 auto; text-align: center; }
.aviat h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); letter-spacing: 0.16em; text-transform: uppercase; }

/* ── Avís legal ───────────────────────────────────────────────────── */
.legal { max-width: 46rem; margin: 0 auto; }
.legal h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem);
  letter-spacing: 0.2em; text-transform: uppercase;
}
.legal h2 { font-size: 1rem; margin-top: 2.5rem; }
.legal dt { font-family: var(--serif); letter-spacing: 0.1em; text-transform: uppercase;
            font-size: 0.85rem; color: var(--cuir-text); margin-top: 1.1rem; }
.legal dd { margin: 0.15rem 0 0; }

.legal-enllac { margin-top: 0.6rem; }
.legal-enllac a { text-underline-offset: 0.25em; }

/* ── Peu ───────────────────────────────────────────────────────────── */
.peu {
  background: var(--tinta); color: var(--fons);
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem);
  font-size: 0.85rem;
}
.peu p { margin: 0; }

/* ── Mòbil i tauleta ───────────────────────────────────────────────── */
@media (max-width: 60rem) {
  .cronologia-cos, .highlights, .mvv, .oficines { grid-template-columns: 1fr; }

  /* Les fotos verticals, en una sola columna, s'estirarien a tota l'amplada:
     a 768 px la pàgina passava de 7.037 a 8.835 px d'alçada i les imatges
     decoratives es menjaven la pantalla. Acotades i centrades. */
  .cronologia-foto, .mvv-foto, .highlights-foto {
    max-width: 24rem;
    margin-inline: auto;
  }
  .columnes { columns: 1; }
  .about p, .destacat, .paisos, .mvv p { max-width: none; }
}

@media (max-width: 40rem) {
  .capcalera { flex-wrap: wrap; row-gap: 0.9rem; }
  .marca { margin-right: 0; width: 100%; }
  .logotip { height: 1.8rem; }
  .graella-linies { grid-template-columns: repeat(2, 1fr); }
  h2 { letter-spacing: 0.16em; }
}