:root {
  --ink: #1e293b;
  /* Un blu notte molto scuro e meno duro del nero */
  --paper: #ffffff;
  /* Bianco pieno: stesso fondo su tutte e cinque le pagine */
  --surface: #ffffff;
  --rule: #e2e8f0;
  --accent: #186E9E;
  /* Lo stesso blu di index (--azzurro): un accento solo su tutto il
     sito. Su bianco sta a 5,6:1 di contrasto, mentre il precedente
     #0284c7 si fermava a 4,4:1, sotto la soglia di leggibilità. */
  --muted: #64748b;
  --radius: 12px;
  --radius-lg: 18px;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-top: 65px;
  /* Aggiunge spazio per non far coprire i contenuti dalla barra fissa */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
}

a {
  color: inherit;
  transition: color 0.2s ease;
}

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

/* ---------- navigazione ---------- */


.nav {
  position: fixed;
  /* Cambiato da sticky a fixed */
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.85);
  /* Leggera trasparenza */
  backdrop-filter: blur(12px);
  /* Effetto vetro moderno */
}

.nav-in {
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav a.lk {
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  color: var(--muted);
  text-decoration: none;
}

.nav a.lk:hover {
  color: var(--ink);
}

.nav a.lk.on {
  color: var(--accent);
}

/* Selettore Lingua */
.lang-switch {
  display: flex;
  gap: 4px;
  font-family: var(--mono);
  font-size: 13px;
  background: var(--rule);
  padding: 4px;
  border-radius: 8px;
}

.lang-switch a {
  text-decoration: none;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.lang-switch a:hover {
  color: var(--ink);
}

.lang-switch a.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ---------- impianto pagina ---------- */
.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 88px;
}

/* Le sezioni sono visibili da subito: la comparsa allo scorrimento e' stata
   rimossa (su tutte le pagine). La classe .seen che il JavaScript delle altre
   pagine continua ad aggiungere non ha piu' alcun effetto. */
section {
  position: relative;
  padding: 64px 0;
}

section+section {
  border-top: 1px solid var(--rule);
}

/* L'etichetta che apre ogni blocco: maiuscola, spaziata e azzurra,
   come su index. E' la prima cosa che porta colore in pagina. */
.eyebrow {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.4;
  margin: 0 0 20px;
}

h1.page {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  text-wrap: balance;
}

/* La chiusa del titolo in azzurro, come la seconda frase del titolo di
   index. L'<em> non cambia una parola: marca solo dove finisce la
   frase. */
h1.page em,
h2 em {
  font-style: normal;
  color: var(--accent);
}

h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  text-wrap: balance;
}

h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

p {
  margin: 0 0 18px;
  max-width: 65ch;
  color: #334155;
}

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

/* ---------- home ---------- */
.hero {
  padding: 92px 0 64px;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 26px;
  text-wrap: balance;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero .sub {
  font-size: clamp(19px, 2.4vw, 22px);
  color: var(--muted);
  max-width: 46ch;
  margin: 0;
  line-height: 1.55;
  text-wrap: pretty;
}

.quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
}

.quotes li {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 24px;
  text-wrap: pretty;
}

/* "Cosa facciamo": erano quattro paragrafi identici in fila, che si
   leggevano come un blocco unico. Il filetto fra una voce e l'altra le
   separa e scandisce la lettura. Niente riquadri: la sezione sopra e
   quella sotto ne hanno gia, e un terzo blocco di schede appiattirebbe
   tutta la pagina.

   Il :not(.eyebrow) serve: l'etichetta e anche lei un <p>, e senza
   l'esclusione ".lede p" (0,1,1) batte ".eyebrow" (0,1,0) e le impone
   corpo 20 e colore scuro, sfasandola da tutte le altre etichette. */
.lede p:not(.eyebrow) {
  position: relative;
  font-size: 19px;
  line-height: 1.55;
  max-width: 58ch;
  color: var(--ink);
  margin: 0;
  padding: 20px 0 20px 32px;
  border-top: 1px solid var(--rule);
  text-wrap: pretty;
}

.lede p:not(.eyebrow)::before {
  content: "\2192";
  position: absolute;
  left: 0;
  top: 20px;
  color: var(--accent);
  font-family: var(--mono);
}

/* La prima voce sta subito sotto l'etichetta: li il filetto sarebbe una
   riga di troppo. */
.lede .eyebrow+p {
  border-top: 0;
  padding-top: 0;
}

.lede .eyebrow+p::before {
  top: 0;
}

.lede p:last-child {
  padding-bottom: 0;
}

.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 24px;
}

.card {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 26px 24px 28px;
  border-radius: var(--radius-lg);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease, border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(30, 41, 59, 0.07);
  border-color: var(--accent);
}

.card .k {
  font-family: var(--display);
  font-size: 13.5px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--muted);
  display: block;
  margin-bottom: 14px;
  font-weight: 500;
}

.card h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--ink);
}

.card h3::after {
  content: "→";
  flex: none;
  color: var(--accent);
  font-weight: 500;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.card:hover h3::after {
  opacity: 1;
  transform: translateX(0);
}

.card p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
}

/* ---------- blocchi ---------- */
.entry {
  padding: 32px 0;
  border-top: 1px solid var(--rule);
}

.entry:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.detail {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.detail li {
  position: relative;
  padding: 0 0 16px 24px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
  max-width: 60ch;
}

.detail li:last-child {
  padding-bottom: 0;
}

.detail li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--accent);
  font-family: var(--mono);
}

.detail b {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- tecnologie: nota discorsiva ----------
   Volutamente prosa e non tabella. Una tabella si legge come un elenco
   chiuso — "sa fare solo queste otto cose" — mentre il discorso, che si
   chiude con i puntini di sospensione, dice che sono esempi ricorrenti.
   Gli strumenti stanno in <b> per farsi trovare da chi scorre, senza
   spezzare la frase per chi legge.

   SOLO NOMI IN TESTO, MAI I LOGHI. Non e' una scelta estetica: citare
   il marchio altrui a parole per indicare con cosa ci integriamo e'
   uso referenziale lecito (art. 21 CPI, art. 14 Reg. UE 2017/1001).
   Il logo invece ricade nelle brand guideline del fornitore, che sono
   condizioni contrattuali accettate aderendo alle sue API e quasi
   sempre piu' restrittive del diritto dei marchi: parecchi vendor lo
   vietano del tutto senza autorizzazione scritta. Il nome in testo da'
   lo stesso valore informativo senza dover verificare le condizioni di
   ogni singolo fornitore. Se un giorno serve un logo, va prima
   controllata la guideline di quel vendore e ottenuto il permesso. */
.stack {
  margin: 26px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--accent);
}

.stack-k {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.stack p {
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 66ch;
}

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

.stack b {
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 720px) {
  .stack {
    padding-left: 16px;
  }
}

/* ---------- richiamo contatti (Nuovo e più morbido) ---------- */
.cta {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  text-align: center;
  margin-top: 48px;
}

.cta .eyebrow {
  margin-bottom: 16px;
}

.cta h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.cta p {
  margin: 0 auto 30px;
  text-align: center;
}

/* Stile per i contatti visibili subito */
.direct-contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 32px 0;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
}

.direct-contact a {
  text-decoration: none;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 18px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.direct-contact a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.go {
  display: inline-block;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  color: var(--surface);
  background: var(--ink);
  text-decoration: none;
  border-radius: 10px;
  padding: 15px 28px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.go:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(2, 132, 199, 0.22);
}

/* ---------- piede ---------- */
.foot {
  border-top: 1px solid var(--rule);
  margin-top: 40px;
}

.foot-in {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 24px 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  justify-content: space-between;
  font-family: var(--body);
  font-size: 14px;
  color: var(--muted);
}

.foot-in a {
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s ease;
}

.foot-in a:hover {
  color: var(--accent);
}

.foot-links {
  display: flex;
  gap: 16px;
}

/* la riga di non-affiliazione: chiarisce che i marchi nominati altrove
   nel sito sono citati per descrivere il servizio, non per vantare una
   partnership. E' la condizione che rende l'uso referenziale conforme
   alla correttezza professionale, quindi non va tolta. Sta dentro
   .foot-in e occupa tutta la riga, cosi' eredita larghezza e margini
   del piede senza doverli ripetere. */
.foot-nota {
  flex: 0 0 100%;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 78ch;
  opacity: .85;
}

@media (max-width: 720px) {
  .nav-right {
    gap: 16px;
  }

  .nav ul {
    display: none;
    /* Nascondiamo i link su mobile per pulizia, lasciando solo la lingua */
  }

  section {
    padding: 48px 0;
  }

  .hero {
    padding: 56px 0 40px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .quotes {
    grid-template-columns: 1fr;
  }

  .cta {
    padding: 36px 26px;
    text-align: left;
  }

  .cta h2,
  .cta p,
  .direct-contact {
    text-align: left;
    margin-left: 0;
    justify-content: flex-start;
  }
}

/* Chi ha chiesto meno movimento vede la pagina ferma, non a meta strada. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ===================================================================
   TEMA BIANCO E AZZURRO — attivo solo su <body class="tema-chiaro">.
   Oggi lo usa la sola index.html: tutte le regole qui sotto sono
   annidate sotto .tema-chiaro, quindi servizi/lavori/chi-sono/contatti
   restano esattamente come prima.

   Tipografia: UN SOLO carattere (Archivo). Le misure sono le stesse
   che es/index.html (e le altre pagine) prendono dalle regole di base
   qui sopra, riga per riga:

     corpo 17px          = body               (base riga 34)
     apertura 19-22px    = .hero .sub         (base riga 238)
     titolo 38-64px      = .hero h1           (base riga 225)
     h2 26-36px          = h2                 (base riga 191)
     h3 20px             = h3                 (base riga 201)
     etichetta 15px      = .eyebrow, .lk, .go (base righe 170, 106, 474)
     etichetta piccola 13,5px = .card .k      (base riga 337)
     selettore lingua 13px    = .lang-switch  (base riga 124)
     piede 14px          = .foot-in           (base riga 505)

   Cambia una misura di base e cambiano tutte e cinque le pagine
   insieme: i valori stanno in un posto solo, qui sotto.
   =================================================================== */

:root {
  --bianco: #FFFFFF;
  /* fondo della pagina */
  --nebbia: #F1F6FA;
  /* fondo dei pochi elementi rialzati */
  --profondo: #0C2A3D;
  /* fondo della sola sezione invertita */
  --azzurro: #186E9E;
  /* accento su fondo bianco */
  --azzurro-chiaro: #4FB3E8;
  /* accento su fondo profondo */
  --inchiostro: #0B1620;
  /* testo */
  --muto: #5A7183;
  /* testo secondario */
  --hair: 1px solid rgba(11, 22, 32, 0.14);
  --hair-scuro: 1px solid rgba(255, 255, 255, 0.18);
  --navh: 65px;
  /* altezza della barra fissa in alto */
  --tabsh: 54px;
  /* altezza della barra ad ancore */
  /* la scala di es/index.html, in un posto solo */
  --t-corpo: 17px;
  /* testo corrente */
  --t-lede: clamp(19px, 2.4vw, 22px);
  /* sottotitolo dell'apertura */
  --t-etichetta: 15px;
  /* etichette, voci di menu, pulsanti */
  --t-mini: 13.5px;
  /* etichette piccole (indici, diciture) */
  --t-lingua: 13px;
  /* selettore di lingua */
  --t-piede: 14px;
  /* piede */
}

body.tema-chiaro {
  /* un solo carattere per tutta la pagina */
  --display: "Archivo", system-ui, sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --mono: "Archivo", system-ui, sans-serif;

  background: var(--bianco);
  color: var(--inchiostro);
  font-family: var(--display);
  font-size: var(--t-corpo);
  line-height: 1.65;
  padding-top: var(--navh);
}

body.tema-chiaro p,
body.tema-chiaro li,
body.tema-chiaro a,
body.tema-chiaro span {
  font-family: var(--display);
}

body.tema-chiaro p {
  color: var(--inchiostro);
  font-size: var(--t-corpo);
}

body.tema-chiaro ::selection {
  background: var(--azzurro);
  color: var(--bianco);
}

body.tema-chiaro :focus-visible {
  outline: 2px solid var(--azzurro);
  outline-offset: 4px;
}

/* ---------- impianto ----------
   Larghezza e margini non sono piu' ridefiniti qui: index prende gli
   stessi 860px e gli stessi 24px di margine di servizi/lavori/chi-sono/
   contatti dalla regola .wrap di base. */

/* Ritmo verticale stretto: fra la fine di un blocco e l'etichetta del
   blocco dopo restano ~68px a schermo largo e ~40px sul telefono, non
   piu' i 200px di prima. */
body.tema-chiaro section {
  padding: clamp(20px, 2.4vw, 34px) 0;
  scroll-margin-top: calc(var(--navh) + var(--tabsh));
}

body.tema-chiaro section+section {
  border-top: 0;
}

body.tema-chiaro h1,
body.tema-chiaro h2,
body.tema-chiaro h3 {
  font-family: var(--display);
  letter-spacing: -0.03em;
  color: var(--inchiostro);
}

body.tema-chiaro h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  line-height: 1.1;
  font-weight: 800;
}

body.tema-chiaro h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 22px;
}

body.tema-chiaro h3 {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 700;
  margin: 0 0 8px;
}

/* etichette: stesso carattere del resto, si riconoscono dal maiuscolo e
   dalla spaziatura. Le misure sono quelle di es: 15px l'etichetta di
   sezione (.eyebrow), 13,5px quella piccola (.idx, come .card .k). */
body.tema-chiaro .eyebrow,
body.tema-chiaro .idx {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azzurro);
  line-height: 1.4;
}

body.tema-chiaro .eyebrow {
  font-size: var(--t-etichetta);
  margin: 0 0 clamp(14px, 1.8vw, 22px);
}

body.tema-chiaro .idx {
  font-size: var(--t-mini);
}

/* ---------- barra fissa in alto ---------- */
body.tema-chiaro .nav {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: var(--hair);
}

body.tema-chiaro .brand {
  color: var(--inchiostro);
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
}

body.tema-chiaro .nav a.lk {
  color: var(--muto);
  font-family: var(--display);
  font-size: var(--t-etichetta);
  font-weight: 500;
}

body.tema-chiaro .nav a.lk:hover {
  color: var(--inchiostro);
}

body.tema-chiaro .lang-switch {
  background: var(--nebbia);
  border: var(--hair);
  font-family: var(--display);
  font-size: var(--t-lingua);
  letter-spacing: 0.08em;
}

body.tema-chiaro .lang-switch a {
  color: var(--muto);
}

body.tema-chiaro .lang-switch a:hover {
  color: var(--inchiostro);
}

body.tema-chiaro .lang-switch a.on {
  background: var(--bianco);
  color: var(--inchiostro);
  box-shadow: 0 1px 2px rgba(11, 22, 32, 0.10);
}

/* ---------- barra ad ancore ---------- */
body.tema-chiaro .tabs {
  position: sticky;
  top: var(--navh);
  z-index: 25;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  border-top: var(--hair);
  border-bottom: var(--hair);
}

body.tema-chiaro .tabs-in {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 860px;
  margin: 0 auto;
}

body.tema-chiaro .tabs-in::-webkit-scrollbar {
  display: none;
}

body.tema-chiaro .tabs a {
  flex: 0 0 auto;
  padding: 14px clamp(16px, 2.2vw, 26px);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--display);
  font-size: var(--t-etichetta);
  font-weight: 500;
  color: var(--muto);
  line-height: 1.5;
  border-bottom: 2px solid transparent;
  transition: color .18s, border-color .18s, background .18s;
}

body.tema-chiaro .tabs a:hover {
  color: var(--inchiostro);
}

body.tema-chiaro .tabs a.attivo {
  color: var(--azzurro);
  border-bottom-color: var(--azzurro);
  background: rgba(24, 110, 158, 0.06);
}

/* ---------- apertura ---------- */
body.tema-chiaro .hero {
  position: relative;
  padding: clamp(48px, 6vw, 88px) 0 clamp(10px, 1.2vw, 18px);
}

/* Alone azzurro: riempie il vuoto in alto a destra senza mettere colore
   sul testo. Decorativo, quindi sotto al contenuto e senza eventi. */
body.tema-chiaro .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  /* il contenitore ora e' largo 860px: l'alone si sposta piu' a destra e
     si rimpicciolisce, altrimenti finirebbe sotto al titolo. Il rientro
     negativo resta piu' corto del margine laterale, cosi' non crea
     scorrimento orizzontale. */
  right: -80px;
  top: -50px;
  width: min(420px, 34vw);
  height: min(420px, 34vw);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
      rgba(79, 179, 232, 0.28) 0%, rgba(79, 179, 232, 0.10) 45%, rgba(79, 179, 232, 0) 70%);
}

/* Sotto i 1040px il margine laterale e' piu' stretto dei -80px di
   rientro: l'alone sporgerebbe fuori dalla finestra e comparirebbe la
   barra di scorrimento orizzontale. Meglio non disegnarlo. */
@media (max-width: 1040px) {
  body.tema-chiaro .hero::before {
    display: none;
  }
}

body.tema-chiaro .hero h1 {
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 26px;
  text-wrap: balance;
}

body.tema-chiaro .hero h1 em {
  font-style: normal;
  color: var(--muto);
}

body.tema-chiaro .hero .sub {
  font-family: var(--display);
  font-size: var(--t-lede);
  color: var(--muto);
  max-width: 46ch;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

/* ---------- citazioni: niente riquadri, una sotto l'altra ----------
   Nessuna scatola e nessuna griglia: quattro voci in colonna, ognuna con
   il suo segno di citazione azzurro. Il rientro cambia di voce in voce,
   cosi' il margine sinistro non e' una riga dritta e l'occhio scende
   invece di scorrere una tabella. Solo dentro .tema-chiaro: su es/ e en/
   i riquadri restano quelli di prima. */
body.tema-chiaro .quotes {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.tema-chiaro .quotes li {
  position: relative;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0 0 40px;
  margin: 0 0 clamp(24px, 2.8vw, 38px);
  max-width: 50ch;
  color: var(--inchiostro);
  font-size: var(--t-corpo);
  line-height: 1.6;
  text-wrap: pretty;
}

body.tema-chiaro .quotes li:last-child {
  margin-bottom: 0;
}

/* il segno di citazione, appeso fuori dal testo */
body.tema-chiaro .quotes li::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.28em;
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--azzurro);
}

/* la virgoletta di chiusura, in coda al testo */
body.tema-chiaro .quotes li::after {
  content: "\201D";
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--azzurro);
  vertical-align: -0.45em;
}

/* i rientri che rompono l'allineamento */
body.tema-chiaro .quotes li:nth-child(2) {
  margin-left: clamp(0px, 7vw, 96px);
}

body.tema-chiaro .quotes li:nth-child(3) {
  margin-left: clamp(0px, 3vw, 38px);
}

body.tema-chiaro .quotes li:nth-child(4) {
  margin-left: clamp(0px, 10vw, 140px);
}

/* ---------- elenco di voci separate dal filo ---------- */
body.tema-chiaro .voci {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.tema-chiaro .voci li {
  position: relative;
  border-top: var(--hair);
  padding: clamp(20px, 2.6vw, 30px) 0 clamp(20px, 2.6vw, 30px) 26px;
  max-width: 68ch;
  color: var(--inchiostro);
  font-size: var(--t-corpo);
  line-height: 1.65;
  text-wrap: pretty;
}

body.tema-chiaro .voci li:last-child {
  border-bottom: var(--hair);
}

body.tema-chiaro .voci li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(clamp(20px, 2.6vw, 30px) + 0.8em);
  width: 12px;
  height: 1px;
  background: var(--azzurro);
}

/* ---------- sezione invertita, una sola in tutta la pagina ---------- */
body.tema-chiaro .inverso {
  background: var(--profondo);
  color: #FFFFFF;
  padding: clamp(60px, 8vw, 120px) 0;
}

body.tema-chiaro .inverso .eyebrow,
body.tema-chiaro .inverso .idx {
  color: var(--azzurro-chiaro);
}

body.tema-chiaro .inverso p {
  color: rgba(255, 255, 255, 0.88);
}

/* passaggi: indice stretto a sinistra, testo a destra, filo in mezzo */
body.tema-chiaro .passo {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(22px, 3vw, 34px) 0;
  border-top: var(--hair-scuro);
  align-items: start;
}

body.tema-chiaro .passo:last-child {
  border-bottom: var(--hair-scuro);
}

body.tema-chiaro .passo .idx {
  padding-top: 5px;
}

body.tema-chiaro .passo p {
  margin: 0;
  max-width: 62ch;
  font-size: var(--t-corpo);
  line-height: 1.65;
  text-wrap: pretty;
}

/* ---------- righe di contenuto, al posto delle schede ----------
   Righe basse e sottili: l'indice si fa da parte (piccolo e grigio),
   il titolo resta l'unica cosa che pesa, la descrizione scorre di
   fianco su una riga sola. Il filo e' piu' chiaro di quello delle
   sezioni, cosi' l'elenco non compete con il resto della pagina. */
body.tema-chiaro .riga {
  display: grid;
  grid-template-columns: 34px 1fr 1.5fr;
  gap: clamp(12px, 2vw, 28px);
  padding: clamp(14px, 1.6vw, 18px) 0;
  border-top: 1px solid rgba(11, 22, 32, 0.09);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s;
}

body.tema-chiaro .righe .riga:last-child {
  border-bottom: 1px solid rgba(11, 22, 32, 0.09);
}

body.tema-chiaro .riga:hover {
  border-top-color: rgba(24, 110, 158, 0.35);
}

body.tema-chiaro .riga .idx {
  padding-top: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muto);
  opacity: .65;
  transition: color .18s, opacity .18s;
}

body.tema-chiaro .riga:hover .idx {
  color: var(--azzurro);
  opacity: 1;
}

body.tema-chiaro .riga h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

body.tema-chiaro .riga h3::after {
  content: "\2192";
  display: inline-block;
  margin-left: 8px;
  color: var(--azzurro);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .18s, transform .18s;
}

body.tema-chiaro .riga:hover h3::after {
  opacity: 1;
  transform: translateX(0);
}

body.tema-chiaro .riga p {
  color: var(--muto);
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
}

/* ---------- blocco a contorno sfumato, uno solo ---------- */
body.tema-chiaro .fascia {
  position: relative;
  border-radius: 14px;
  padding: clamp(26px, 4vw, 48px);
  background: var(--nebbia);
}

body.tema-chiaro .fascia::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg, var(--azzurro) 0%, rgba(24, 110, 158, 0.30) 42%,
      rgba(11, 22, 32, 0.10) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

body.tema-chiaro .fascia p {
  color: var(--muto);
  max-width: 62ch;
  font-size: var(--t-corpo);
}

body.tema-chiaro .fascia h2 {
  max-width: 20ch;
}

/* ---------- pulsanti a pillola ---------- */
body.tema-chiaro .pill {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-etichetta);
  line-height: 1.5;
  border: 1px solid var(--azzurro);
  color: var(--azzurro);
  margin-top: 14px;
  transition: background .18s, color .18s, transform .18s;
}

body.tema-chiaro .pill:hover {
  background: var(--azzurro);
  color: var(--bianco);
  transform: translateY(-1px);
}

body.tema-chiaro .pill-solid {
  background: var(--azzurro);
  color: var(--bianco);
}

body.tema-chiaro .pill-solid:hover {
  background: var(--inchiostro);
  border-color: var(--inchiostro);
  color: var(--bianco);
}

/* ---------- riga di provenienza: pronta, oggi non impiegata ---------- */
body.tema-chiaro .fonte {
  font-family: var(--display);
  font-size: var(--t-etichetta);
  line-height: 1.6;
  color: var(--muto);
  max-width: 52ch;
  margin-top: 22px;
  padding-left: 16px;
  position: relative;
}

body.tema-chiaro .fonte::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 7px;
  height: 1px;
  background: var(--azzurro);
}

/* ---------- piede ---------- */
body.tema-chiaro .foot {
  border-top: var(--hair);
  margin-top: 0;
}

body.tema-chiaro .foot-in {
  color: var(--muto);
  font-family: var(--display);
  font-size: var(--t-piede);
}

body.tema-chiaro .foot-in a {
  color: var(--muto);
}

body.tema-chiaro .foot-in a:hover {
  color: var(--inchiostro);
}

/* ---------- schermi stretti ---------- */
@media (max-width: 880px) {
  body.tema-chiaro .riga {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 16px 0;
  }

  body.tema-chiaro .passo {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.tema-chiaro .passo .idx {
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  /* sul telefono i rientri sparirebbero da soli con il clamp, ma li
     azzero anche qui: 360px non ha spazio da regalare */
  body.tema-chiaro .quotes li:nth-child(2),
  body.tema-chiaro .quotes li:nth-child(3),
  body.tema-chiaro .quotes li:nth-child(4) {
    margin-left: 0;
  }

  body.tema-chiaro .inverso {
    padding: clamp(28px, 5vw, 40px) 0;
  }
}

/* ===================================================================
   SEZIONE A SCHEDE — le classi dell'HTML (.style-card, .stat-circle,
   ecc.) non avevano alcuna regola qui dentro. Senza larghezza
   dichiarata un <svg> inline occupa tutta la colonna disponibile, e
   senza `fill: none` i due tracciati del cerchio si riempiono di nero:
   e' la mezzaluna che copriva la pagina.

   Regole scritte fuori da .tema-chiaro, cosi' la sezione si comporta
   allo stesso modo su tutte le pagine. Le variabili usate stanno nel
   :root globale, quindi sono gia' disponibili ovunque.
   =================================================================== */

.style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(20px, 3vw, 34px);
}

.style-card {
  background: var(--nebbia);
  border: var(--hair);
  border-radius: 14px;
  padding: clamp(22px, 2.6vw, 32px);
}

/* titolo a sinistra, indicatore a destra, allineati in alto */
.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}

.card-title-group {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.card-title-group h3 {
  margin: 0;
}

.quote-mark {
  flex: none;
  font-size: 1.9rem;
  line-height: 0.6;
  color: var(--azzurro);
  transform: translateY(0.18em);
}

.style-card p {
  margin: 0;
  color: var(--muto);
  max-width: 46ch;
  /* stessa misura del testo delle schede di es (.card p) */
  font-size: var(--t-etichetta, 15px);
}

/* ---- indicatore circolare ---- */
.card-stat {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 86px;
}

/* la riga che mancava: senza queste due misure l'SVG si dilata */
.stat-circle {
  width: 56px;
  height: 56px;
  display: block;
}

.stat-bg {
  fill: none;
  /* l'altra riga che mancava */
  stroke: rgba(11, 22, 32, 0.12);
  stroke-width: 2.6;
}

.stat-progress {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  /* si parte da ore 12, non da ore 3 */
}

.stat-progress.blue {
  stroke: var(--azzurro);
}

.stat-progress.teal {
  stroke: #2E8B87;
}

.stat-text {
  fill: var(--inchiostro);
  font-family: var(--display);
  font-size: 8.5px;
  font-weight: 700;
  text-anchor: middle;
  /* l'SVG non eredita l'allineamento */
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: var(--t-mini, 13.5px);
  line-height: 1.3;
  color: var(--muto);
  text-align: center;
}

/* ---- icona al posto dell'indicatore ---- */
.card-icon-illustration {
  flex: none;
  color: var(--azzurro);
}

.card-icon-illustration svg {
  width: 34px;
  height: 34px;
  display: block;
  stroke: currentColor;
  fill: none;
}

@media (max-width: 720px) {
  .style-grid {
    grid-template-columns: 1fr;
  }
}