/* 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
 *   --fons-atenuat  4,9:1 sobre --tinta  ✔ text secundari NOMÉS sobre la capçalera
 *                   (1,6:1 sobre --fons: mai sobre crema; ho vigila el test)
 *
 * ⚠️ 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 */
  --fons-atenuat: #CCC4B7; /* 4,9:1 sobre --tinta — els idiomes inactius de la capçalera */

  /* ⚠️ 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; }
/* ⚠️ Sense `opacity` (A1, auditoria 2026-09-06): amb 0.6, el text de 12,5 px
   quedava a 3,94:1 i cap test ho veia, perquè una opacitat no és un color.
   L'atenuació és un to documentat que sí que es pot calcular. */
.idiomes a {
  text-decoration: none; font-size: 0.78rem; letter-spacing: 0.14em; color: var(--fons-atenuat);
}
.idiomes a[aria-current] { color: var(--fons); text-decoration: underline; text-underline-offset: 0.3em; }
.idiomes a:hover { color: var(--fons); }

.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 */

/* Missatges d'una acció (base.html, A4 del 06/09). --pedra de fons amb --tinta
   a sobre fa 4,9:1 (afirmat a test_contrast); la vora és decoració.
   ⚠️ La MATEIXA amplada i el MATEIX encoixinat que `main > section` amb
   `.portal`/`.entrada` (--ample-text), que és on surten: amb --ample, la franja
   feia el doble que la columna de text i no s'hi alineava (revisió 06/09). */
.missatges { list-style: none; max-width: var(--ample-text); margin: 0 auto; padding: var(--pas) clamp(1rem, 3vw, 2.5rem) 0; }
.missatge { background: var(--pedra); color: var(--tinta); border-left: 3px solid var(--cuir-fosc); padding: 0.7rem 1rem; margin: 0 0 0.5rem; }
.missatge.error, .missatge.warning { border-left-color: var(--tinta); font-weight: 600; }
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; }

/* ── 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; }
}

/* ── Entrada ───────────────────────────────────────────────────────── */
/* ⚠️ La classe és `.entrada` i NO `.entrar`: `.entrar` és el BOTÓ de la
 *    capçalera (`white-space: nowrap`, majúscules, `letter-spacing`, vora).
 *    Posant-la a la <section> de la pàgina, tot allò s'aplicava a la pàgina
 *    SENCERA: caixa amb vora, tot en majúscules i el text d'ajuda sense
 *    poder tallar línia (scrollWidth 891px en una finestra de 390).
 *    Va sortir així a producció el 2026-09-06 amb 336 tests verds. NO ho va
 *    trobar la suite: ho va trobar `verifica-responsive.js` i mirar la
 *    captura. Abans d'inventar un nom de classe, mira si ja és al CSS.
 *
 * ⚠️ Els colors respecten la paleta del capdamunt: `--cuir-text` (5,0:1) per
 *    a text petit i `--sorra` NOMÉS com a vora, mai com a fons de text.
 */
.entrada { max-width: var(--ample-text); margin: 0 auto; }
.entrada form p { margin: 0 0 var(--pas); }
.entrada label {
  display: block; margin-bottom: 0.35rem;
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cuir-text);
}
.entrada input {
  width: 100%; padding: 0.6rem 0.75rem; font: inherit;
  /* Vora amb --cuir-fosc (A2): és l'únic que distingeix el camp del paper
     (el fons és el mateix) i l'1.4.11 demana 3:1; amb --sorra feia 1,74:1. */
  color: var(--tinta); background: var(--fons); border: 1px solid var(--cuir-fosc);
}
.entrada input:focus-visible { outline: 2px solid var(--cuir-text); outline-offset: 1px; }
.entrada button {
  padding: 0.7rem 1.6rem; font: inherit; font-size: 0.8rem; cursor: pointer;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta); background: transparent; border: 1px solid currentColor;
}
.entrada button:hover { background: var(--tinta); color: var(--fons); }
.entrada .error { margin-bottom: var(--pas); padding-left: 0.75rem;
                  border-left: 3px solid var(--cuir-fosc); color: var(--tinta); }
/* Els errors DE CAMP (C11): la llista que pinta Django sota el camp, amb el
   mateix aspecte que l'error de conjunt de dalt. */
.entrada .errorlist { list-style: none; margin: 0.4rem 0 0; padding-left: 0.75rem;
                      border-left: 3px solid var(--cuir-fosc); color: var(--tinta);
                      font-size: 0.9rem; }
.entrada .ajuda { margin-top: var(--pas); font-size: 0.9rem; color: var(--cuir-text); }

/* ── Portal ────────────────────────────────────────────────────────── */
/* ⚠️ Cap d'aquestes classes tenia CAP regla: el portal es va lliurar amb
 *    l'aspecte per defecte del navegador. NO era una col·lisió com la de
 *    `.entrar` (Ruling 43), era absència — i el resultat es veia igual de
 *    malament. Ho va trobar mirar la captura de `verifica-entrada.js`,
 *    perquè cap test pot veure on cau un botó.
 */
.portal { max-width: var(--ample-text); margin: 0 auto; }
.portal .rol {
  margin: 0 0 var(--pas);
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cuir-text);
}
.eines { list-style: none; margin: 0; padding: 0; }
.eines li { margin-bottom: var(--pas); }
.eines .boto {
  display: inline-block; padding: 0.7rem 1.6rem;
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--sorra); color: var(--cuir-text);
}
.eines small { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: var(--cuir-text); }
/* ⚠️ Una eina que JA existeix és un <a class="boto"> i s'ha de veure VIVA: sense el
 *    subratllat de l'enllaç i amb el fons ple, com el botó d'entrar de la capçalera.
 *    Sense aquesta regla heretaria només `.eines .boto` (vora sola) i seria
 *    indistingible de la que encara no hi és — el mateix error de la fase 2 que va
 *    treure la pàgina d'entrada tota en majúscules, però al revés: no una col·lisió,
 *    absència. La combinació --tinta/--fons ja té el contrast comprovat. */
.eines a.boto {
  text-decoration: none;
  background: var(--tinta); color: var(--fons); border-color: var(--tinta);
}
.eines a.boto:hover { background: var(--fons); color: var(--tinta); }
/* La llista buida (`{% empty %}`): un text, no un buit mut. */
.eines .cap-eina { color: var(--cuir-text); font-style: italic; }

/* ⚠️ El formulari de sortir viu FORA de la <section>, o sigui que NO rep el
 *    `padding` de `main > section`: sense això el botó quedava enganxat a la
 *    vora esquerra de la finestra, a x=0.
 *
 * ⚠️ I porta EXACTAMENT el mateix `max-width` i `padding` que la secció, no un
 *    `calc()` que els sumi. `section.portal` ÉS el `main > section`: rep el
 *    `max-width` d'aquí i el `padding` d'allà alhora, i amb `border-box` la
 *    columna de text li queda 80px més estreta que `--ample-text`. Mesurat al
 *    navegador: secció x=448 w=544, però l'h1 x=488 w=464. Amb el `calc()` el
 *    botó queia a 448 i quedava 40px a l'esquerra del text.
 */
.sortir {
  max-width: var(--ample-text);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2.5rem) clamp(2.5rem, 5.5vw, 5rem);
}
.sortir button {
  padding: 0.6rem 1.4rem; font: inherit; font-size: 0.78rem; cursor: pointer;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta); background: transparent; border: 1px solid currentColor;
}
.sortir button:hover { background: var(--tinta); color: var(--fons); }