/* ═══════════════════════════════════════════════════════════
   Josep Moulines · josepmoulines.cat
   Sistema visual (Bloc 5 + 6B):
   — Tipografia única: Georgia (sistema, zero càrrega)
   — Navy #131E29 dominant · paper #FCFCFA · gold #9F7D23
     (un element per peça, mai text ni logo) · gris #5B6570
   — Numerals old-style per defecte (Georgia); lnum en dades
   — Molt d'aire: el blanc forma part del sistema
   ═══════════════════════════════════════════════════════════ */

:root {
  --navy: #131E29;
  --paper: #FCFCFA;
  --gold: #9F7D23;
  --gris: #5B6570;
  --paper-sobre-navy: rgba(252, 252, 250, 0.92);
  --gris-sobre-navy: rgba(252, 252, 250, 0.64);
  --amplada-max: 72rem;
  --amplada-text: 38em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: Georgia, 'Times New Roman', serif;
  background: var(--paper);
  color: var(--navy);
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* Numerals: old-style per defecte (Georgia ja ho és);
   lining per a taules i dades si mai n'hi ha. */
table, .lnum { font-variant-numeric: lining-nums; }

/* ─── Capçalera sticky ─────────────────────────────────── */

.capcalera {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Capçalera en contrast amb el bloc de sota: sobre seccions navy
   es torna clara (banda paper, lletra navy); sobre paper, navy.
   El canvi el fa un script mínim al peu de la pàgina; sense JS,
   es queda navy sempre. */
.capcalera--clara {
  background: var(--paper);
  box-shadow: inset 0 -1px 0 rgba(19, 30, 41, 0.14);
}

.menu-logo .logo-fosc { display: none; }
.capcalera--clara .logo-clar { display: none; }
.capcalera--clara .logo-fosc { display: block; }

.capcalera--clara .menu a { color: rgba(19, 30, 41, 0.78); }

.capcalera--clara .menu ul a:hover,
.capcalera--clara .menu ul a:focus-visible { color: var(--navy); }

.capcalera--clara .idiomes { color: rgba(19, 30, 41, 0.55); }
.capcalera--clara .idiomes .idioma-actual { color: var(--navy); }
.capcalera--clara .idiomes a { color: rgba(19, 30, 41, 0.55); }

.capcalera--clara .idiomes a:hover,
.capcalera--clara .idiomes a:focus-visible { color: var(--navy); }

.menu {
  max-width: var(--amplada-max);
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.menu-logo img {
  width: auto;
  height: 2rem;
}

.menu ul {
  list-style: none;
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.menu a {
  color: var(--paper-sobre-navy);
  text-decoration: none;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.menu ul a:hover,
.menu ul a:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* Selector d'idioma: discret, a l'extrem de la capçalera. */
.idiomes {
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  color: var(--gris-sobre-navy);
  white-space: nowrap;
}

.idiomes-sep { margin: 0 0.45em; }

.idiomes .idioma-actual { color: var(--paper); }

.idiomes a {
  font-size: inherit; /* que no l'engreixi la regla general del menú */
  color: var(--gris-sobre-navy);
  text-decoration: none;
}

.idiomes a:hover,
.idiomes a:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ─── Seccions ─────────────────────────────────────────── */

.seccio {
  scroll-margin-top: 4.5rem;
}

.seccio-paper {
  background: var(--paper);
  color: var(--navy);
  padding: 6rem 0;
}

.seccio-navy {
  background: var(--navy);
  color: var(--paper-sobre-navy);
  padding: 6rem 0;
}

/* Entre dos apartats seguits sobre paper, l'aire no s'ha de duplicar. */
.seccio-paper + .seccio-paper {
  padding-top: 1.5rem;
}

.contenidor {
  max-width: var(--amplada-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* L'element gold de cada secció de lectura: un filet curt. */
.filet-or {
  width: 3.5rem;
  height: 2px;
  background: var(--gold);
  margin-bottom: 2.5rem;
}

h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.15rem);
  line-height: 1.15;
  font-weight: normal;
  color: var(--paper);
  margin-bottom: 2rem;
}

h2 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.3;
  font-weight: normal;
  max-width: var(--amplada-text);
  margin-bottom: 2.25rem;
}

.seccio-navy h2 { color: var(--paper); }

p {
  max-width: var(--amplada-text);
  margin-bottom: 1.4rem;
}

p:last-child { margin-bottom: 0; }

/* ─── Hero (Home) ──────────────────────────────────────── */

.hero {
  padding: 5.5rem 0 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3.5rem;
  align-items: end;
}

.hero-text {
  padding-bottom: 5.5rem;
}

/* Clau + signatura formen un sol bloc, com una firma. */
.hero-clau {
  margin-top: 2.5rem;
  margin-bottom: 0.35rem;
  font-size: 1.3rem;
  color: var(--paper);
}

.hero-signatura {
  color: var(--gris-sobre-navy);
  font-size: 1rem;
  margin-bottom: 2.25rem;
}

.hero-cta { margin-bottom: 0; }

.hero-foto {
  order: -1;            /* foto a l'esquerra, text a la dreta */
  align-self: end;
  max-width: 26rem;
  justify-self: start;
}

.hero-foto img {
  display: block;
}

/* El botó és l'element gold de la peça (fons, mai text). */
.boto-or {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  text-decoration: none;
  font-family: inherit;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0.9rem 1.6rem;
  border: none;
  cursor: pointer;
}

.boto-or:hover,
.boto-or:focus-visible {
  background: #8a6c1e;
}

/* ─── Columnes text + foto ─────────────────────────────── */

.dues-columnes {
  display: grid;
  grid-template-columns: minmax(0, var(--amplada-text)) minmax(14rem, 22rem);
  gap: 4rem;
  align-items: start;
}

.dues-columnes .columna-foto {
  position: sticky;
  top: 6rem;
}

/* Secció 3: foto a l'esquerra — alterna amb la secció 2 (foto a la dreta). */
.invertida {
  margin-top: 1rem;
  grid-template-columns: minmax(14rem, 22rem) minmax(0, var(--amplada-text));
}

.invertida .columna-foto { order: -1; }

/* ─── Secció 4 · Prova ─────────────────────────────────── */

.seccio-prova {
  padding-bottom: 5.5rem;
}

.microtext {
  color: var(--gris);
  font-style: italic;
  font-size: 1.125rem;
  max-width: none;
  margin-bottom: 3.5rem;
}

.paret-logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem 3rem;
}

/* Paret de logos: alçades diferents, pes visual igual. Els logos amb símbol
   + paraula (Minuartia, FVF, Jovi) o amb accent per sobre (Certis) necessiten
   més alçada perquè la paraula quedi al nivell dels wordmarks purs (Entec). */
.paret-logos img {
  height: 3.5rem;
  width: auto;
}

.paret-logos li:nth-child(1) img { height: 3.75rem; } /* Certis */
.paret-logos li:nth-child(2) img { height: 4rem; }    /* Minuartia */
.paret-logos li:nth-child(3) img { height: 4rem; }    /* FVF */
.paret-logos li:nth-child(4) img { height: 4.4rem; }  /* Jovi */

/* Separació logos ↔ testimonis: filet fi neutre (el gold de la secció
   ja és al filet d'obertura; només un element gold per peça). */
.testimonis {
  margin-top: 4.5rem;
  border-top: 1px solid rgba(19, 30, 41, 0.14);
  padding-top: 3rem;
}

/* Un sol testimoni: a tota l'amplada, al cos general del text.
   Quan n'hi hagi més, revisar la disposició. */
.testimoni {
  max-width: none;
}

.testimoni p {
  max-width: none;
}

/* Quan hi hagi més d'un testimoni, mateix llenguatge de separació. */
.testimoni + .testimoni {
  border-top: 1px solid rgba(19, 30, 41, 0.14);
  padding-top: 2.5rem;
  margin-top: 2.5rem;
}

.testimoni footer {
  margin-top: 1rem;
  color: var(--gris);
  font-size: 0.95rem;
}

/* ─── Secció 5 · Contacte ──────────────────────────────── */

.contacte h2 { max-width: 34em; }

.formulari {
  max-width: 34rem;
  margin: 3.5rem 0 3rem;
}

.camp {
  margin-bottom: 1.5rem;
}

.camp label {
  display: block;
  font-size: 1.125rem;
  color: var(--gris-sobre-navy);
  margin-bottom: 0.45rem;
}

.camp input,
.camp textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1.05rem;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid transparent;
  padding: 0.7rem 0.85rem;
  border-radius: 0;
}

.camp input:focus,
.camp textarea:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.camp textarea { resize: vertical; }

.contacte-tanca {
  color: var(--gris-sobre-navy);
  font-style: italic;
}

/* ─── Pàgina de rebut (redirecció post-formulari) ──────── */

.pagina-gracies {
  background: var(--navy);
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.gracies {
  text-align: center;
  padding: 2rem 1.5rem;
}

.gracies-logo {
  width: auto;
  height: 2rem;
  margin: 0 auto 3rem;
}

.gracies-text {
  color: var(--paper);
  font-size: 1.35rem;
  max-width: 26em;
  margin: 0 auto 2.5rem;
}

.gracies-tornar a {
  color: var(--gris-sobre-navy);
  font-size: 0.95rem;
  text-decoration: none;
}

.gracies-tornar a:hover,
.gracies-tornar a:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ─── Peu ──────────────────────────────────────────────── */

.peu {
  background: var(--navy);
  border-top: 1px solid rgba(252, 252, 250, 0.12);
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.peu a {
  color: var(--gris-sobre-navy);
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.peu svg {
  width: 1.15em;
  height: 1.15em;
  display: block;
}

.peu a:hover,
.peu a:focus-visible {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ─── Mòbil ────────────────────────────────────────────── */

@media (max-width: 56rem) {
  .hero-grid,
  .dues-columnes {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .hero { padding-top: 4rem; }
  .hero-text { padding-bottom: 0; }

  .hero-foto {
    order: 0;           /* en mòbil, primer el text, després la foto */
    justify-self: center;
    max-width: 22rem;
  }

  .dues-columnes .columna-foto {
    position: static;
    max-width: 22rem;
  }

  .dues-columnes.invertida .columna-foto { order: -1; }

  .seccio-paper,
  .seccio-navy { padding: 4rem 0; }

  .seccio-paper + .seccio-paper { padding-top: 1.25rem; }

  .menu-logo img { height: 1.6rem; }

  /* En mòbil la foto de la secció 3 va sota el títol, com fins ara. */
  .invertida { grid-template-columns: 1fr; }

  .menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.8rem 1.5rem;
    position: relative;
  }

  /* En mòbil, el selector puja a la primera línia, oposat al wordmark. */
  .idiomes {
    position: absolute;
    top: 0.85rem;
    right: 1.5rem;
  }

  .seccio { scroll-margin-top: 6rem; }

  .paret-logos {
    justify-content: center;
  }

  .paret-logos img { height: 2.5rem; }
  .paret-logos li:nth-child(1) img { height: 2.7rem; }
  .paret-logos li:nth-child(2) img { height: 2.85rem; }
  .paret-logos li:nth-child(3) img { height: 3rem; }
  .paret-logos li:nth-child(4) img { height: 3.2rem; }
}

@media (max-width: 34rem) {
  .menu ul {
    flex-wrap: wrap;
    gap: 0.35rem 1.4rem;
    overflow-x: visible;
  }

  .menu a { font-size: 1rem; }

  .seccio { scroll-margin-top: 7.5rem; }
}