/* ═══════════════════════════════════════════════════════════════════════════
   NEW LIFE — BASE (strato comune, «La croce evoluta»)
   Font, azzeramento, accessibilità, impaginato, tipografia.
   Regole: DESIGN.md. Token: css/token.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stevie Sans (brand book pag. 8) e Montserrat (pag. 9, OFL): file locali,
   nessuna chiamata a Google Fonts. */
@font-face { font-family: "Stevie Sans"; src: url("../assets/font/stevie-sans-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Stevie Sans"; src: url("../assets/font/stevie-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Stevie Sans"; src: url("../assets/font/stevie-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Stevie Sans"; src: url("../assets/font/stevie-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Stevie Sans"; src: url("../assets/font/stevie-sans-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../assets/font/montserrat-latin-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` vince sempre: senza questa riga un display dato da una classe
   tiene visibile ciò che lo script ha nascosto. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--nl-testata) + 1rem); scroll-padding-bottom: calc(var(--nl-barra) + 1rem); }
html.blocca-scorrimento { overflow: hidden; }

body {
  margin: 0;
  font: 400 var(--nl-t-corpo)/1.6 var(--nl-font-testo);
  color: var(--nl-ink);
  background: var(--nl-bianco);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, address { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Focus in blu notte: l'accento non regge il 3:1 su tutti i fondi (sul
   pesca l'arancione fa 2.97:1, il teal di Odontoiatria 2.76:1 sul bianco). */
:focus-visible { outline: 3px solid var(--nl-blu-notte); outline-offset: 3px; border-radius: var(--nl-r-campo); }
.su-scuro :focus-visible { outline-color: var(--nl-bianco); }

/* Icone a tratto (selezione-rebrand/04-asset/icone): lo stile sta qui, non nel file. */
.icona {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Accessibilità ──────────────────────────────────────────────────────── */
.visivamente-nascosto {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.salta {
  position: absolute; left: 1rem; top: -10rem; z-index: 100;
  padding: .75rem 1.25rem;
  border-radius: var(--nl-r-campo);
  background: var(--nl-blu-notte); color: var(--nl-bianco);
  font: 700 var(--nl-t-piccolo)/1.2 var(--nl-font-marchio);
}
.salta:focus { top: 1rem; }

.senza-js { margin: 0; padding: 1rem var(--nl-margine); background: var(--nl-accento-tinta); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* ── Impaginato ─────────────────────────────────────────────────────────── */
.contenitore { width: min(100% - 2 * var(--nl-margine), var(--nl-contenitore)); margin-inline: auto; }

.sezione { padding-block: var(--nl-sezione); }
.sezione--ghiaccio { background: var(--nl-ghiaccio); }
.sezione--carta    { background: var(--nl-carta); }
.sezione--tinta    { background: var(--nl-accento-tinta); }
/* Le tre fasce scure. Sul blu New Life solo testo grande (3.61:1): i
   paragrafi stanno sul blu inchiostro o sul blu notte (DESIGN.md). */
.sezione--inchiostro { background: var(--nl-blu-ink); color: var(--nl-bianco); }
.sezione--notte      { background: var(--nl-blu-notte); color: var(--nl-bianco); }
.sezione--blu        { background: var(--nl-blu); color: var(--nl-bianco); }

/* Una sezione con una forma nell'angolo: la forma non esce dalla sezione. */
.con-forma { position: relative; overflow: hidden; isolation: isolate; }

.testa { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
@media (min-width: 64em) { .testa--riga { grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; } }

/* ── Tipografia: il doppio peso ─────────────────────────────────────────
   Dai pannelli del Lab («CHECK-UP / UOMO UNDER 40») e dal mockup web del
   brand book («LA TUA SALUTE, / AL CENTRO.»): prima riga Black maiuscola,
   seconda Light e blu. Il maiuscolo è CSS: il testo resta com'è nei
   contenuti. Il blu New Life va bene perché il titolo supera i 24px. */
.titolo {
  font-size: var(--nl-t-titolo);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.titolo--display { font-size: var(--nl-t-display); line-height: .98; }
/* Un titolo lungo su una riga sola (es. «Rimani aggiornato sul tuo benessere»). */
.titolo--medio { font-size: var(--nl-t-scheda); line-height: 1.05; }
.leggero { display: block; font-weight: 300; letter-spacing: 0; color: var(--nl-blu); }
.su-scuro .leggero { color: var(--nl-bianco); }

/* Il trattino d'accento (brand book, mockup web e social): dal 5/10 solo sotto
   il titolo della pagina, l'h1. Ripetuto sotto ogni sezione smetteva di
   essere un segno e diventava un modello. */
.trattino::after {
  content: ""; display: block;
  width: 3.5rem; height: .3rem; margin-top: 1.25rem;
  border-radius: var(--nl-r-pillola);
  background: var(--nl-accento);
}
.su-scuro .trattino::after { background: var(--nl-bianco); }

.lead { font-size: var(--nl-t-lead); line-height: 1.55; color: var(--nl-ink); }
.su-scuro .lead { color: var(--nl-ink-su-scuro-2); }
.lead + .lead { margin-top: .75rem; }

.sottotitolo { font-size: var(--nl-t-sottotitolo); font-weight: 500; line-height: 1.25; color: var(--nl-blu-ink); }
.su-scuro .sottotitolo { color: var(--nl-ink-su-scuro-2); }

/* Titolo di una voce: risposte, ingressi, motivi, righe. Dal 5/10 in
   tondo e grassetto: in maiuscolo, frasi come «Visite specialistiche nello
   stesso centro» si leggevano a fatica. Il maiuscolo Black resta ai titoli. */
.voce-titolo { font-size: var(--nl-t-voce); font-weight: 700; line-height: 1.25; }

/* Etichetta: Montserrat maiuscolo spaziato. Solo parole brevi: è l'unica
   eccezione ai 16px. Il punto d'accento davanti non c'è più (5/10): su ogni
   etichetta era un tic; resta dove dice qualcosa (categorie, stati). */
.etichetta {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 700 var(--nl-t-etichetta)/1.3 var(--nl-font-marchio);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--nl-blu-ink);
}
.etichetta--punto::before { content: ""; flex: none; width: .7rem; height: .7rem; border-radius: 50%; background: var(--etichetta-punto, var(--nl-accento)); }
.su-scuro .etichetta { color: var(--nl-ink-su-scuro-2); }

/* Evidenziatore: testo bianco su fascia piena (piano editoriale del Lab). */
.evidenzia {
  padding: .08em .35em;
  background: var(--nl-accento-ink); color: var(--nl-bianco);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Evidenziatore blu: i post del piano editoriale del Lab (frasi in maiuscolo
   su fasce sopra la foto). Bianco sul blu inchiostro: 5.8:1. */
.evidenzia--blu { background: var(--nl-blu-ink); }

/* Elementi in fila separati da un punto: il separatore è grafica, non testo. */
.separati > * + *::before { content: "·"; margin-inline: .35em; font-weight: 400; }

/* ── Segnali del prototipo ──────────────────────────────────────────────
   Testo scritto da noi da approvare, dato mancante, foto da confermare: il
   prototipo li dichiara a video invece di nasconderli. Sono la lista delle
   cose da chiedere al cliente, e spariscono con il prototipo. */
.bozza {
  display: inline-flex; align-items: center; width: fit-content;
  padding: .25rem .65rem;
  border-radius: var(--nl-r-pillola);
  background: var(--nl-accento-tinta); color: var(--nl-accento-brace);
  font: 600 var(--nl-t-etichetta)/1.3 var(--nl-font-marchio);
  text-transform: none; letter-spacing: 0;
}