/* ---------- Caratteri: serviti dal sito, mai da server di terzi ---------- */
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  src: url("/assets/caratteri/sofia-sans-extra-condensed-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Sofia Sans";
  src: url("/assets/caratteri/sofia-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Sans";
  src: url("/assets/caratteri/sofia-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Gettoni del design system (gli stessi della home) ---------- */
:root {
  --nero: #000000;
  --luce: #EDEDED;
  --bianco: #FFFFFF;
  --cenere: #9A9A9A;
  --nome: #6E6E6E;

  --f-nome: "Sofia Sans Extra Condensed", "Avenir Next Condensed", "Arial Narrow",
            "Roboto Condensed", sans-serif-condensed, sans-serif;
  --f-testo: "Sofia Sans", "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --t-m1: 0.944rem;   /* 15,1 px */
  --t-0: 1.0625rem;   /* 17 px   */
  --t-p1: 1.195rem;   /* 19,1 px */
  --t-p3: 1.513rem;   /* 24,2 px: marchio nella barra */
  --t-p4: 1.702rem;   /* 27,2 px: titoli di sezione */
  --t-p8: 2.726rem;   /* 43,6 px: titolo della pagina, telefono e tablet */
  --t-p10: 3.451rem;  /* 55,2 px: titolo della pagina, computer */

  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --margine: 20px;
  --barra-h: 56px;
  --colonna: 38rem;          /* colonna di lettura: circa 70 caratteri a 17 px */
}

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

html {
  background: var(--nero);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra-h) + var(--s-4));   /* i salti dell'indice non finiscono sotto la barra */
}

body {
  margin: 0;
  background: var(--nero);
  color: var(--luce);
  font-family: var(--f-testo);
  font-size: var(--t-0);
  line-height: 1.6;
  overflow-x: hidden;               /* F4: niente scorrimento laterale (ripiego) */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--luce);
  outline-offset: 3px;
}

a { color: var(--luce); }