/* ==========================================================================
   TrasformIA — foglio di stile unico
   Direzione: rigore tecnico italiano. Blu di marca, carta, blu segnale.
   Titoli Archivo (grottesco industriale), testo Source Serif 4.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Caratteri, ospitati sul server del sito
   Nessuna richiesta a Google o ad altri: l'indirizzo IP del visitatore resta
   tra lui e il vostro server. Licenza SIL Open Font License, testi in
   assets/fonts. Sottoinsieme latino: copre italiano, accenti, euro, virgolette.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */

:root {
  /* Colore */
  /* Palette di marca, dal logo TrasformIA:
     fondo #111729, blu scuro #213460, blu medio #4e80ee, blu chiaro #70a3f3.
     Il blu medio non regge il testo bianco (3,7 contro 4,5 richiesti), quindi
     per bottoni e collegamenti si usa --accento, sua variante scurita. */
  --ink: #111729;          /* blu di marca: testo e pannelli scuri */
  --ink-fondo: #0b0f1c;    /* blu fondo: piede */
  --ink-2: #39415a;        /* blu grigio: testo secondario */
  --ink-3: #5d6578;        /* grigio azzurrato: didascalie, AA su entrambe le carte */
  --paper: #f6f7f9;        /* carta: fondo pagina */
  --paper-2: #eceff4;      /* carta ombreggiata: fondi alternati */
  --surface: #ffffff;
  --accento: #2f62d6;      /* blu segnale: collegamenti e bottoni */
  --accento-2: #213460;    /* blu scuro di marca: premuto */
  --accento-marca: #4e80ee;/* blu medio di marca: grafica, filetti, barre */
  --accento-chiaro: #70a3f3;/* blu chiaro di marca: accenti su fondo scuro */
  --accento-velo: #e9effc; /* blu al 8%: fondi di richiamo */
  --rule: #d9dee6;         /* filetto */
  --rule-dark: rgba(255, 255, 255, 0.18);

  /* Tipografia */
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Scala tipografica: ragione 1.26 */
  --t-xs: 0.78rem;
  --t-sm: 0.9rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --t-lg: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --t-xl: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  --t-2xl: clamp(2.1rem, 1.6rem + 2.4vw, 3.3rem);
  --t-3xl: clamp(2.6rem, 1.7rem + 4.2vw, 4.75rem);

  /* Spazio: passo 4px */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8.5rem;

  /* Misure */
  --page: 74rem;
  --measure: 34rem;
  --measure-wide: 44rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* --------------------------------------------------------------------------
   2. Reset e base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.62;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.08;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); letter-spacing: -0.032em; }
h2 { font-size: var(--t-2xl); letter-spacing: -0.028em; }
h3 { font-size: var(--t-lg); letter-spacing: -0.018em; }
h4 { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.012em; }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--accento); text-decoration: none; }
a:hover { color: var(--accento-2); }

strong { font-weight: 600; }

ul { margin: 0 0 var(--s-4); padding-left: 1.15em; }
li { margin-bottom: var(--s-2); }
li:last-child { margin-bottom: 0; }

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

.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: var(--s-3) var(--s-4);
  font-family: var(--sans);
  z-index: 100;
}
.salta-al-contenuto:focus {
  left: var(--s-4);
  top: var(--s-4);
  color: #fff;
}

/* --------------------------------------------------------------------------
   3. Impalcatura
   -------------------------------------------------------------------------- */

.involucro {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.fascia { padding-block: var(--s-9); }
.fascia-compatta { padding-block: var(--s-8); }
.fascia-carta-2 { background: var(--paper-2); }
.fascia-scura { background: var(--ink); color: #eceff4; }
.fascia-scura h1, .fascia-scura h2, .fascia-scura h3, .fascia-scura h4 { color: #fff; }
.fascia-filetto-sopra { border-top: 1px solid var(--rule); }

.misura { max-width: var(--measure); }
.misura-larga { max-width: var(--measure-wide); }

/* Griglia asimmetrica: titolo a sinistra, corpo a destra */
.duecolonne {
  display: grid;
  gap: var(--s-6) var(--s-8);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62rem) {
  .duecolonne {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--s-8) var(--s-9);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   4. Intestazione
   -------------------------------------------------------------------------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246, 247, 249, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.testata-interna {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.5rem;
}

.marchio {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.marchio-nome { display: inline-flex; align-items: baseline; gap: 1px; }
.marchio-segno { width: 1.75rem; height: 1.75rem; flex: none; }
.marchio-segno-piede { width: 1.6rem; height: 1.6rem; }
.marchio:hover { color: var(--ink); }
.marchio em {
  font-style: normal;
  color: var(--accento);
}

.navigazione { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); }

.navigazione-lista {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(1.1rem, 2.1vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigazione-lista li { margin: 0; }

.navigazione-lista a {
  white-space: nowrap;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  padding-block: var(--s-2);
  border-bottom: 2px solid transparent;
}
.navigazione-lista a:hover { color: var(--ink); }
.navigazione-lista a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accento-marca);
}

.interruttore-menu {
  display: none;
  border: 1px solid var(--rule);
  background: transparent;
  border-radius: 2px;
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  color: var(--ink);
  line-height: 0;
}

@media (max-width: 61.999rem) {
  .interruttore-menu { display: inline-block; }
  .navigazione {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: var(--s-5) var(--gutter) var(--s-6);
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-4);
  }
  .navigazione.aperta { display: flex; }
  .navigazione-lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .navigazione-lista li { margin: 0; border-bottom: 1px solid var(--rule); }
  .navigazione-lista a { display: block; padding-block: var(--s-4); font-size: var(--t-md); }
  .navigazione-lista a[aria-current="page"] { border-bottom-color: transparent; }
}

/* --------------------------------------------------------------------------
   5. Bottoni
   -------------------------------------------------------------------------- */

.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  padding: 0.85rem 1.4rem;
  min-height: 2.9rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.bottone-pieno { background: var(--accento); color: #fff; }
.bottone-pieno:hover { background: var(--accento-2); color: #fff; }

.bottone-contorno {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.bottone-contorno:hover { background: var(--ink); color: #fff; }

.fascia-scura .bottone-pieno { background: var(--accento-chiaro); color: var(--ink); }
.fascia-scura .bottone-pieno:hover { background: #fff; color: var(--ink); }
.fascia-scura .bottone-contorno { color: #fff; border-color: rgba(255,255,255,0.5); }
.fascia-scura .bottone-contorno:hover { background: #fff; color: var(--ink); }

.bottone-grande { font-size: var(--t-base); padding: 1rem 1.7rem; min-height: 3.3rem; }

.legame {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.legame:hover { color: var(--accento); border-bottom-color: var(--accento); }
/* Il legame vale anche su un pulsante: niente cornice, solo il filetto */
button.legame {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  cursor: pointer;
  padding: 0 0 2px;
  letter-spacing: inherit;
  text-transform: none;
}

.fascia-scura .occhio { color: var(--accento-chiaro); }
.fascia-scura .legame {
  color: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.35);
}
.fascia-scura .legame:hover { color: #fff; border-bottom-color: #fff; }

.gruppo-azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
}

/* --------------------------------------------------------------------------
   6. Apertura (hero)
   -------------------------------------------------------------------------- */

.apertura {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

/* Reticolo tecnico: filetti da foglio di disegno, molto tenui */
.apertura::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(17, 23, 41, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(17, 23, 41, 0.06) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 78%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 78%);
  pointer-events: none;
}

.apertura > .involucro { position: relative; }

.apertura h1 { max-width: 22ch; margin-bottom: var(--s-5); }

.apertura-testo {
  font-size: var(--t-md);
  color: var(--ink-2);
  max-width: 46ch;
}

/* Sequenza di entrata: un solo momento, al caricamento */
.entra { opacity: 0; transform: translateY(10px); animation: entra 620ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.entra-2 { animation-delay: 90ms; }
.entra-3 { animation-delay: 180ms; }
.entra-4 { animation-delay: 270ms; }

@keyframes entra {
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra { animation: none; opacity: 1; transform: none; }
}

/* Riga di contesto sotto l'apertura */
.nastro-contesto {
  border-bottom: 1px solid var(--rule);
  background: var(--paper-2);
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--ink-3);
}
.nastro-contesto .involucro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  padding-block: var(--s-3);
}
.nastro-contesto span { display: inline-flex; align-items: center; gap: 0.45rem; }
.nastro-contesto span::before {
  content: "";
  width: 4px; height: 4px;
  background: var(--accento-marca);
  border-radius: 50%;
  flex: none;
}

/* --------------------------------------------------------------------------
   7. Divario: la barra dei dati di mercato
   -------------------------------------------------------------------------- */

.divario { margin-top: var(--s-7); }

.divario-riga + .divario-riga { margin-top: var(--s-6); }

.divario-intestazione {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--sans);
  margin-bottom: var(--s-3);
}
.divario-etichetta { font-size: var(--t-sm); color: var(--ink-2); max-width: 44ch; }
.divario-cifra {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.divario-cifra-forte { color: var(--accento); }

.divario-barra {
  height: 0.5rem;
  background: var(--rule);
  border-radius: 1px;
  overflow: hidden;
}
.divario-riempimento { height: 100%; background: var(--ink); }
.divario-riempimento-forte { background: var(--accento-marca); }

.divario-nota {
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: var(--s-5);
}

/* --------------------------------------------------------------------------
   8. La scala del metodo: l'elemento firma
   -------------------------------------------------------------------------- */

.scala { margin-top: var(--s-7); }

.scala-asse {
  position: relative;
  height: 1px;
  background: var(--rule);
  margin-bottom: var(--s-6);
  display: none;
}

.scala-fasi {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  counter-reset: fase;
}

@media (min-width: 52rem) {
  .scala-asse { display: block; }
  .scala-fasi { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
}

.fase {
  position: relative;
  padding-top: var(--s-5);
  border-top: 2px solid var(--ink);
  counter-increment: fase;
}
.fase:first-child { border-top-color: var(--accento-marca); }

.fase::before {
  content: counter(fase);
  position: absolute;
  top: calc(-1 * var(--s-5) - 2px);
  left: 0;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.fase h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.fase p { font-size: var(--t-sm); color: var(--ink-2); font-family: var(--sans); line-height: 1.55; }

/* --------------------------------------------------------------------------
   9. Percorsi
   -------------------------------------------------------------------------- */

.percorsi {
  margin-top: var(--s-7);
  border-top: 1px solid var(--rule);
}

.percorso {
  display: grid;
  gap: var(--s-4) var(--s-7);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--rule);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 52rem) {
  .percorso {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 15rem);
    align-items: baseline;
  }
}

.percorso-nome { font-size: var(--t-lg); margin: 0; }
.percorso-nome a { color: var(--ink); }
.percorso-nome a:hover { color: var(--accento); }

.percorso-corpo p { margin-bottom: var(--s-3); }
.percorso-contenuto {
  font-family: var(--sans);
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin: 0;
}

.percorso-esito {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}
.percorso-esito small {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   10. Elenchi ragionati (perché noi, cosa chiediamo, ecc.)
   -------------------------------------------------------------------------- */

.ragioni {
  display: grid;
  gap: var(--s-6) var(--s-7);
  margin-top: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) {
  .ragioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ragione { padding-left: var(--s-5); border-left: 1px solid var(--rule); }
.ragione h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.012em; margin-bottom: var(--s-2); }
.ragione p { font-size: var(--t-sm); color: var(--ink-2); }

.elenco-nudo { list-style: none; padding: 0; margin: 0; }
.elenco-nudo > li {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.elenco-nudo > li:first-child { border-top: 1px solid var(--rule); }
.elenco-nudo b {
  font-family: var(--sans);
  font-weight: 600;
  display: block;
  margin-bottom: 2px;
}

/* --------------------------------------------------------------------------
   11. Tabella scadenze
   -------------------------------------------------------------------------- */

.tabella-avvolgi { overflow-x: auto; margin-top: var(--s-6); }

.tabella {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: var(--t-sm);
  min-width: 34rem;
}
.tabella th, .tabella td {
  text-align: left;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.tabella th {
  font-weight: 600;
  font-size: var(--t-xs);
  color: var(--ink-3);
  border-bottom-color: var(--ink);
}
.tabella td:first-child {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  padding-right: var(--s-6);
}
.tabella tr.in-vigore td:first-child { color: var(--accento); }

/* --------------------------------------------------------------------------
   12. Richiamo
   -------------------------------------------------------------------------- */

.richiamo {
  background: var(--accento-velo);
  border-left: 3px solid var(--accento-marca);
  padding: var(--s-5) var(--s-6);
  margin-top: var(--s-6);
}
.richiamo h3 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.richiamo p { font-size: var(--t-sm); }

.fascia-scura .richiamo {
  background: rgba(255,255,255,0.05);
  border-left-color: var(--accento-marca);
}

/* --------------------------------------------------------------------------
   13. Chiusura con invito
   -------------------------------------------------------------------------- */

.chiusura { padding-block: var(--s-9); }
.chiusura h2 { max-width: 28ch; }
.chiusura p { color: rgba(236, 239, 244, 0.82); max-width: 50ch; font-size: var(--t-md); }

/* --------------------------------------------------------------------------
   14. Modulo
   -------------------------------------------------------------------------- */

.modulo { margin-top: var(--s-6); max-width: 32rem; }
.campo { margin-bottom: var(--s-5); }
.campo label {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: var(--s-2);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  font-family: var(--serif);
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.7rem 0.85rem;
}
.campo textarea { min-height: 7.5rem; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--accento);
  box-shadow: 0 0 0 3px rgba(47, 98, 214, 0.18);
}
.campo-nota { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s-2); }

/* Trappola antispam: fuori dallo schermo, invisibile anche ai lettori */
.trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Avviso in cima al modulo quando l'invio non è andato */
.avviso-errore {
  background: var(--accento-velo);
  border-left: 3px solid var(--accento-marca);
  padding: var(--s-4) var(--s-5);
  font-family: var(--sans);
  font-size: var(--t-sm);
  margin: 0 0 var(--s-5);
}

/* Segnaposto per incorporare Typeform / Calendly */

/* --------------------------------------------------------------------------
   15. Scheda persona (chi siamo)
   -------------------------------------------------------------------------- */

.persone {
  display: grid;
  gap: var(--s-6) var(--s-7);
  margin-top: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 46rem) { .persone { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.persona { border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.persona-foto {
  display: block;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
  margin-bottom: var(--s-3);
}

/* Segnaposto per chi non ha ancora mandato la foto: iniziale dentro il tondo,
   così le schede restano allineate. Si sostituisce con .persona-foto. */
.persona-foto-attesa {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--accento-velo);
  color: var(--accento-2);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-3);
}
.persona h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.012em; margin-bottom: var(--s-1); }
.persona-ruolo { font-family: var(--sans); font-size: var(--t-xs); color: var(--accento); margin-bottom: var(--s-3); }
.persona p { font-size: var(--t-sm); color: var(--ink-2); }
.persona-attesa { color: var(--ink-3); font-style: italic; }

/* --------------------------------------------------------------------------
   16. Piede
   -------------------------------------------------------------------------- */

.piede {
  background: var(--ink-fondo);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(236, 239, 244, 0.78);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t-sm);
}
.piede a { color: rgba(236, 239, 244, 0.78); }
.piede a:hover { color: #fff; }

.piede-griglia {
  display: grid;
  gap: var(--s-6) var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: var(--s-7);
}
@media (min-width: 46rem) { .piede-griglia { grid-template-columns: 1.6fr 1fr 1fr; } }

.piede-marchio {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -0.03em;
  color: #fff;
  margin-bottom: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.piede-marchio em { font-style: normal; color: var(--accento-chiaro); }

.piede-frase { max-width: 40ch; margin-bottom: var(--s-4); }

.piede-colonna h5 {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  color: #fff;
  margin: 0 0 var(--s-4);
}
.piede-colonna ul { list-style: none; margin: 0; padding: 0; font-family: var(--sans); }
.piede-colonna li { margin-bottom: var(--s-3); }

.piede-basso {
  border-top: 1px solid var(--rule-dark);
  padding-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  justify-content: space-between;
  font-family: var(--sans);
  font-size: var(--t-xs);
  color: rgba(236, 239, 244, 0.55);
}

/* --------------------------------------------------------------------------
   18. Questionario del diagnostico
   -------------------------------------------------------------------------- */

.questionario {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: var(--s-6) var(--s-5);
  max-width: 48rem;
}
@media (min-width: 46rem) {
  .questionario { padding: var(--s-7) var(--s-7); }
}

.questionario-testa { margin-bottom: var(--s-6); }
.questionario-conta {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.questionario-barra {
  height: 0.35rem;
  background: var(--paper-2);
  border-radius: 1px;
  overflow: hidden;
}
.questionario-riempimento {
  height: 100%;
  width: 10%;
  background: var(--accento-marca);
  transition: width 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .questionario-riempimento { transition: none; }
}

/* Le domande: senza JavaScript restano tutte visibili e il modulo funziona comunque */
.passo {
  border: 0;
  padding: 0;
  margin: 0 0 var(--s-7);
}
.passo:last-of-type { margin-bottom: 0; }
.passo legend {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-md);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: var(--s-4);
  padding: 0;
}
.passo-area {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: var(--s-2);
}

.scelte { display: grid; gap: var(--s-2); }
.scelte label {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: var(--t-base);
  cursor: pointer;
  transition: border-color 120ms, background 120ms;
}
.scelte label:hover { border-color: var(--accento-marca); background: var(--paper); }
.scelte input[type="radio"] {
  margin-top: 0.3rem;
  accent-color: var(--accento);
  flex: none;
}
.scelte input[type="radio"]:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.scelte label:has(input:checked) {
  border-color: var(--accento);
  background: var(--accento-velo);
}

.questionario-comandi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}
.questionario-comandi .campo-nota { margin: 0; flex: 1 1 14rem; }

/* L'esito */
.esito { scroll-margin-top: 6rem; }
.esito-punteggio {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--accento);
  margin: var(--s-4) 0;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.esito-punteggio span:first-child { font-size: var(--t-2xl); font-variant-numeric: tabular-nums; }
.esito-su { font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); letter-spacing: 0; }

.esito-aree { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.esito-area-riga { display: grid; gap: var(--s-2); }
.esito-area-testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  font-family: var(--sans);
  font-size: var(--t-sm);
}
.esito-area-nome { font-weight: 600; color: var(--ink); }
.esito-area-cifra { color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }
.esito-area-barra { height: 0.45rem; background: var(--paper-2); border-radius: 1px; overflow: hidden; }
.esito-area-riempimento { height: 100%; background: var(--accento-marca); }
.esito-area-riempimento.scarso { background: var(--ink-3); }

.esito-contatto {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--rule);
}
.esito-contatto h3 { font-size: var(--t-md); margin-bottom: var(--s-2); }
.esito-contatto .campo { margin-top: var(--s-4); }

/* --------------------------------------------------------------------------
   19. Fascia della norma UNI 11621-8
   -------------------------------------------------------------------------- */

.fascia-norma {
  background: var(--accento-velo);
  border-top: 3px solid var(--accento-marca);
  border-bottom: 1px solid var(--rule);
}

.norma-marchio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0.8rem;
  border-radius: 2px;
  margin-bottom: var(--s-4);
}
.norma-marchio::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accento-chiaro);
  border-radius: 50%;
  flex: none;
}

.norma-titolo {
  font-size: var(--t-xl);
  max-width: 30ch;
  margin-bottom: var(--s-4);
}
.norma-testo { font-size: var(--t-md); color: var(--ink-2); max-width: 62ch; }

.norma-punti {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) { .norma-punti { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.norma-punto { border-top: 2px solid var(--accento-marca); padding-top: var(--s-4); }
.norma-punto h3 { font-size: var(--t-base); margin-bottom: var(--s-2); }
.norma-punto p { font-size: var(--t-sm); color: var(--ink-2); }

/* Versione compatta, per le pagine dei percorsi */
.norma-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  background: var(--accento-velo);
  border-left: 3px solid var(--accento-marca);
  padding: var(--s-4) var(--s-5);
  margin-top: var(--s-6);
}
.norma-riga p { font-size: var(--t-sm); margin: 0; flex: 1 1 22rem; }
.norma-riga .norma-marchio { margin-bottom: 0; flex: none; }

/* Elenco numerato, per le sequenze di passi dentro il testo */
.elenco-numerato {
  list-style: none;
  counter-reset: passo;
  padding: 0;
  margin: var(--s-6) 0 0;
}
.elenco-numerato > li {
  counter-increment: passo;
  position: relative;
  padding: 0 0 var(--s-4) 2.6rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-4);
}
.elenco-numerato > li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.elenco-numerato > li::before {
  content: counter(passo);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.7rem;
  height: 1.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accento-velo);
  color: var(--accento-2);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.campo-nota a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.campo-nota a:hover { color: var(--accento); }

/* Testo legale: lettura lunga, titoli ravvicinati al loro testo */
.testo-legale h2 { font-size: var(--t-lg); margin-top: var(--s-7); margin-bottom: var(--s-3); scroll-margin-top: 6rem; }
.testo-legale h2:first-child { margin-top: 0; }
.testo-legale h3 { font-size: var(--t-base); margin-top: var(--s-5); margin-bottom: var(--s-2); }
.testo-legale p { margin-bottom: var(--s-3); }
.testo-legale a { color: var(--accento); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   20. Catalogo corsi: schema a due livelli, schede, matrice
   -------------------------------------------------------------------------- */

.schema-corsi { display: grid; gap: var(--s-5); }
.schema-livello {
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: var(--s-5);
}
.schema-etichetta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.schema-etichetta span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: var(--t-xs);
  letter-spacing: 0;
}
.schema-voci {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 52rem) { .schema-voci { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.schema-voci.schema-voci-due { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .schema-voci.schema-voci-due { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.schema-voce {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--accento-velo);
  border-left: 3px solid var(--accento-marca);
  padding: 0.75rem 0.9rem;
}
.schema-voce:hover { color: var(--accento); background: #dfe8fb; }
.schema-voce-forte {
  background: var(--ink);
  color: #fff;
  border-left-color: var(--accento-chiaro);
  font-size: var(--t-base);
  padding: 1rem 1.1rem;
}
.schema-voce-forte:hover { background: var(--accento-2); color: #fff; }

.corsi-trasversali {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) { .corsi-trasversali { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.corso-scheda {
  background: var(--surface);
  border-top: 3px solid var(--ink);
  padding: var(--s-5);
  scroll-margin-top: 6rem;
  display: flex;
  flex-direction: column;
}
.corso-scheda h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.corso-scheda > p { margin-bottom: var(--s-3); }
.corso-per {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: var(--s-2);
}
.corso-esito {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}
.corso-esito small {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

#verticali { scroll-margin-top: 5rem; }
.griglia-verticali {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .griglia-verticali { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .griglia-verticali { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.verticale {
  border-top: 2px solid var(--accento-marca);
  padding-top: var(--s-4);
}
.verticale h3 { font-size: var(--t-base); margin-bottom: var(--s-2); }
.verticale p { font-size: var(--t-sm); color: var(--ink-2); }

.matrice tbody th[scope="row"] {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-sm);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.matrice th[scope="row"] a { color: var(--ink); }
.matrice th[scope="row"] a:hover { color: var(--accento); }
.matrice td.si { font-family: var(--sans); font-weight: 600; color: var(--ink); }
.matrice td.si::before { content: "\25CF"; color: var(--accento-marca); margin-right: 0.45rem; font-size: 0.7em; vertical-align: 0.15em; }
.matrice td.no { color: var(--ink-3); }

.percorsi-resta { display: grid; gap: var(--s-3); margin-top: var(--s-6); }
.percorsi-resta-titolo {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.percorsi-resta p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.percorsi-resta a {
  display: inline-block;
  min-width: 9.5rem;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  margin-right: var(--s-3);
}
.percorsi-resta a:hover { color: var(--accento); }

/* --------------------------------------------------------------------------
   21. Pagine dei corsi verticali
   -------------------------------------------------------------------------- */

.briciole {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-4);
}
.briciole a { color: var(--accento); }
.briciole span { margin: 0 0.4rem; }

.vert-meta {
  list-style: none;
  padding: 0;
  margin: var(--s-5) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.vert-meta li {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--ink);
  background: var(--accento-velo);
  border-left: 3px solid var(--accento-marca);
  padding: 0.45rem 0.8rem;
}

.vert-perchi {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-2);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .vert-perchi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vert-perchi li {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink);
  border-top: 2px solid var(--ink);
  padding-top: var(--s-3);
}

.giornata { list-style: none; padding: 0; margin: var(--s-6) 0 0; }
.giornata > li {
  display: grid;
  gap: var(--s-2) var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
}
.giornata > li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 52rem) { .giornata > li { grid-template-columns: 10rem minmax(0, 1fr); } }
.giornata-ora {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--accento);
  font-variant-numeric: tabular-nums;
  margin: 0;
  padding-top: 0.2rem;
}
.giornata h3 { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-md); margin-bottom: var(--s-2); }
.giornata p { max-width: 62ch; }
.giornata-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-size: var(--t-xs);
}

.scenari {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .scenari { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .scenari { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.scenario {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accento-marca);
  padding: var(--s-5);
}
.scenario-lettera {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1;
  color: var(--accento-marca);
  margin-bottom: var(--s-3);
}
.scenario h3 { font-size: var(--t-base); margin-bottom: var(--s-2); }
.scenario p { font-size: var(--t-sm); color: var(--ink-2); }

.vert-esiti { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.vert-esiti li {
  position: relative;
  padding-left: 1.9rem;
  font-size: var(--t-md);
  line-height: 1.5;
}
.vert-esiti li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--accento-marca);
  box-shadow: inset 0 0 0 3px var(--accento-velo);
}

.vert-altri { margin-top: var(--s-6); font-size: var(--t-sm); color: var(--ink-2); }
.vert-altri a { color: var(--accento); }

.griglia-verticali .verticale h3 a { color: var(--ink); }
.griglia-verticali .verticale h3 a:hover { color: var(--accento); }
.verticale-link { display: inline-block; margin-top: var(--s-2); font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; color: var(--accento); }

/* Corsi in preparazione */
a.schema-livello-prep {
  display: block;
  border-style: dashed;
  border-color: var(--accento-marca);
  background: var(--paper);
  color: var(--ink);
}
a.schema-livello-prep:hover { background: var(--accento-velo); }
.schema-prep-testo { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }

.prep-griglia {
  display: grid;
  gap: var(--s-6) var(--s-7);
  margin-top: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) { .prep-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prep-area h3 {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.prep-voci { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.prep-voce {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  border: 1px dashed var(--accento-marca);
  padding: 0.45rem 0.75rem;
  border-radius: 2px;
}
.prep-voce:hover { border-style: solid; color: var(--accento); background: var(--accento-velo); }

/* Pagina settori */
.apertura-nota { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); margin-top: var(--s-4); }
.apertura-nota a, .scheda-link a { color: var(--accento); text-decoration: underline; text-underline-offset: 2px; }
.settori-griglia {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .settori-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .settori-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.settore {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accento-marca);
  padding: var(--s-5);
}
.settore h3 { font-size: var(--t-base); margin-bottom: var(--s-3); }
.settore p { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s-3); }
.settore p:last-child { margin-bottom: 0; }
.settore b {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: 2px;
}

.home-corsi-nota { font-size: var(--t-base); color: var(--ink-2); margin: var(--s-6) 0; max-width: 70ch; }
.home-corsi-nota a { color: var(--accento); text-decoration: underline; text-underline-offset: 2px; }

.passo-spiega { margin: 0 0 var(--s-4); }
.scelte-titolo { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); color: var(--ink); margin: var(--s-5) 0 var(--s-3); }
.scelte-multiple { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .scelte-multiple { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.scelte input[type="checkbox"] { margin-top: 0.3rem; accent-color: var(--accento); flex: none; }
.scelte label:has(input[type="checkbox"]:checked) { border-color: var(--accento); background: var(--accento-velo); }
.esito-corsi { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
.esito-corsi h4 { font-size: var(--t-md); margin-bottom: var(--s-3); }
.esito-corsi-lista { list-style: none; padding: 0; margin: 0 0 var(--s-3); display: grid; gap: var(--s-2); }
.esito-corsi-lista a {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--accento-velo);
  border-left: 3px solid var(--accento-marca);
  padding: 0.6rem 0.8rem;
}
.esito-corsi-lista a:hover { color: var(--accento); }

/* --------------------------------------------------------------------------
   22. Sistema grafico a punti: icone, costellazione, numeri
   -------------------------------------------------------------------------- */

.icona { display: block; width: 2.4rem; height: 2.4rem; flex: none; }
.icona .ic-on  { fill: var(--accento-marca); }
.icona .ic-acc { fill: var(--accento-2); }
.icona .ic-dim { fill: #9aa9c6; }
.icona .ic-off { fill: #dfe6f5; }
.icona-scheda { margin-bottom: var(--s-3); }
.icona-grande { width: 4.5rem; height: 4.5rem; }
.apertura-icona { margin-bottom: var(--s-4); }

/* Icone dentro lo schema dei corsi */
.schema-voce { display: flex; align-items: center; gap: 0.7rem; }
.schema-voce .icona { width: 2rem; height: 2rem; }
.schema-voce-forte .icona .ic-on  { fill: var(--accento-chiaro); }
.schema-voce-forte .icona .ic-acc { fill: #ffffff; }
.schema-voce-forte .icona .ic-off { fill: rgba(255, 255, 255, 0.14); }

/* Costellazione della home: i punti si compongono al caricamento */
.apertura-segno { display: none; }
@media (min-width: 70rem) {
  .apertura-segno {
    display: block;
    position: absolute;
    right: -1rem;
    top: 54%;
    width: min(27rem, 34vw);
    transform: translateY(-50%);
    pointer-events: none;
  }
}
.costellazione { width: 100%; height: auto; overflow: visible; }
.costellazione circle { transform-box: fill-box; transform-origin: center; }
.cs-medio  { fill: var(--accento-marca); }
.cs-chiaro { fill: var(--accento-chiaro); }
.cs-scuro  { fill: var(--accento-2); }
.cs-linee line { stroke: var(--accento-marca); stroke-width: 1.2; opacity: 0.28; }
.cs-onda { fill: none; stroke: var(--accento-chiaro); stroke-width: 2; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .costellazione circle:not(.cs-onda) {
    animation: componi 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    animation-delay: var(--d);
  }
  .cs-linee { animation: appari 0.8s ease-out 1.6s both; }
  .cs-onda { animation: onda 2.8s ease-out 2.2s infinite; }
}
@keyframes componi {
  from { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes appari { from { opacity: 0; } to { opacity: 1; } }
@keyframes onda {
  0%   { r: 15; opacity: 0.55; }
  100% { r: 42; opacity: 0; }
}

/* Motivo tenue nelle aperture delle altre pagine */
@media (min-width: 70rem) {
  .apertura:not(.apertura-home)::after {
    content: "";
    position: absolute;
    right: -3rem;
    top: 50%;
    width: 24rem;
    height: 22rem;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20400%20360%22%3E%3Ccircle%20cx%3D%22108%22%20cy%3D%22180%22%20r%3D%2210%22%20fill%3D%22%23213460%22/%3E%3Ccircle%20cx%3D%22131%22%20cy%3D%22220%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22154%22%20cy%3D%22260%22%20r%3D%228%22%20fill%3D%22%23213460%22/%3E%3Ccircle%20cx%3D%22131%22%20cy%3D%22140%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22154%22%20cy%3D%22180%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22177%22%20cy%3D%22220%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22260%22%20r%3D%229%22%20fill%3D%22%2370a3f3%22/%3E%3Ccircle%20cx%3D%22154%22%20cy%3D%22100%22%20r%3D%228%22%20fill%3D%22%23213460%22/%3E%3Ccircle%20cx%3D%22177%22%20cy%3D%22140%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22180%22%20r%3D%2211%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22223%22%20cy%3D%22220%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22246%22%20cy%3D%22260%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22100%22%20r%3D%229%22%20fill%3D%22%2370a3f3%22/%3E%3Ccircle%20cx%3D%22223%22%20cy%3D%22140%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22246%22%20cy%3D%22180%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22269%22%20cy%3D%22220%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22246%22%20cy%3D%22100%22%20r%3D%228%22%20fill%3D%22%23213460%22/%3E%3Ccircle%20cx%3D%22269%22%20cy%3D%22140%22%20r%3D%229%22%20fill%3D%22%234e80ee%22/%3E%3Ccircle%20cx%3D%22292%22%20cy%3D%22180%22%20r%3D%2215%22%20fill%3D%22%2370a3f3%22/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.13;
    pointer-events: none;
  }
}

/* Fascia dei numeri */
.fascia-numeri { padding-block: clamp(2.5rem, 5vw, 4rem); }
.numeri {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 52rem) { .numeri { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.numeri a { display: block; color: #fff; border-top: 2px solid var(--accento-chiaro); padding-top: var(--s-4); }
.numeri a:hover .numero-testo { color: #fff; }
.numero {
  display: block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  margin-bottom: var(--s-2);
}
.numero-testo { display: block; font-family: var(--sans); font-size: var(--t-sm); color: rgba(236, 239, 244, 0.78); max-width: 22ch; }

/* Linea del tempo delle scadenze */
.linea-tempo { list-style: none; padding: 0; margin: var(--s-6) 0 0; display: grid; gap: 0; position: relative; }
.lt-voce { position: relative; padding: 0 0 var(--s-6) 2.4rem; }
.lt-voce::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.5rem;
  bottom: 0;
  width: 2px;
  background: var(--rule);
}
.lt-voce:last-child::before { display: none; }
.lt-punto {
  position: absolute;
  left: 0.1rem;
  top: 0.1rem;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accento-marca);
}
.lt-passata .lt-punto { background: var(--ink); border-color: var(--ink); }
.lt-passata::before { background: var(--ink); }
.lt-prossima .lt-punto { background: var(--accento-chiaro); border-color: var(--accento); box-shadow: 0 0 0 5px var(--accento-velo); }
.lt-stato {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-height: 1.1em;
  margin-bottom: 2px;
}
.lt-passata .lt-stato { color: var(--ink); }
.lt-prossima .lt-stato { color: var(--accento); }
.lt-quando { font-family: var(--sans); font-weight: 700; font-size: var(--t-md); letter-spacing: -0.015em; color: var(--ink); margin-bottom: var(--s-2); }
.lt-cosa { font-size: var(--t-sm); color: var(--ink-2); margin-bottom: var(--s-2); }
.lt-fonte { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }

@media (min-width: 64rem) {
  .linea-tempo { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
  .lt-voce { padding: 2.4rem 0 0; }
  .lt-voce::before { left: 0.5rem; right: calc(-1 * var(--s-5)); top: 0.55rem; bottom: auto; width: auto; height: 2px; }
  .lt-punto { left: 0; top: 0; }
}

/* Radar del diagnostico */
.esito-grafici { display: grid; gap: var(--s-5); margin-top: var(--s-6); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 46rem) { .esito-grafici { grid-template-columns: 17rem minmax(0, 1fr); } }
.esito-grafici .esito-aree { margin-top: 0; }
.esito-radar { max-width: 17rem; margin-inline: auto; width: 100%; }
.radar { width: 100%; height: auto; overflow: visible; }
.radar-anello { fill: none; stroke: var(--rule); stroke-width: 1; }
.radar-bordo { stroke: #b9c3d6; }
.radar-asse { stroke: var(--rule); stroke-width: 1; }
.radar-area { fill: rgba(78, 128, 238, 0.22); stroke: var(--accento-marca); stroke-width: 2; stroke-linejoin: round; }
.radar-punto { fill: var(--accento-2); }
.radar-etichetta { font-family: var(--sans); font-size: 15px; font-weight: 600; fill: var(--ink-2); }

/* Striscia della prossima scadenza */
.striscia-scadenza {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.5rem var(--s-4);
  background: var(--ink);
  color: rgba(236, 239, 244, 0.9);
  font-family: var(--sans);
  font-size: var(--t-xs);
  text-align: center;
}
.striscia-scadenza strong { color: #fff; font-weight: 700; }
.striscia-urgente strong { color: var(--accento-chiaro); }
.striscia-fonte { color: rgba(236, 239, 244, 0.6); }
.striscia-freccia { color: var(--accento-chiaro); transition: transform 160ms; }
.striscia-scadenza:hover { color: #fff; }
.striscia-scadenza:hover .striscia-freccia { transform: translateX(3px); }
#le-date { scroll-margin-top: 7rem; }

/* --------------------------------------------------------------------------
   23. Racconto a scorrimento: dall'uso spontaneo al metodo
   Senza JavaScript o con movimento ridotto è una sezione normale,
   con i tre passi in colonna e la costellazione già composta.
   -------------------------------------------------------------------------- */
.racconto { background: var(--surface); border-bottom: 1px solid var(--rule); }
.racconto-fisso { padding-block: clamp(3rem, 7vw, 5.5rem); }
.racconto-griglia { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 52rem) { .racconto-griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8, 4rem); } }
.racconto-testi h2 { margin-bottom: var(--s-6); max-width: 16ch; }
.racconto-passi { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); }
.racconto-etichetta {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accento);
  margin-bottom: var(--s-2);
}
.racconto-etichetta span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--ink); color: #fff; letter-spacing: 0;
}
.racconto-frase { font-size: var(--t-md); line-height: 1.5; color: var(--ink); max-width: 34ch; }
.racconto-link { display: inline-block; margin-top: var(--s-6); }
.racconto-scena { max-width: 30rem; width: 100%; margin-inline: auto; }
.racconto-svg { width: 100%; height: auto; overflow: visible; }
.racconto-svg line { stroke: var(--accento-marca); stroke-width: 1.3; }

/* Versione animata: la sezione si allunga e resta ferma mentre si scorre */
@media (min-width: 52rem) {
  .racconto.racconto-attivo { height: 300vh; }
  .racconto-attivo .racconto-fisso {
    position: sticky;
    top: 4.5rem;
    height: calc(100vh - 4.5rem);
    display: flex;
    align-items: center;
    padding-block: 0;
  }
  .racconto-attivo .racconto-griglia { width: 100%; }
  .racconto-attivo .racconto-passi { position: relative; min-height: 11.5rem; display: block; }
  .racconto-attivo .racconto-passo {
    position: absolute; inset: 0 auto auto 0;
    opacity: 0; transform: translateY(14px);
    transition: opacity 420ms ease, transform 420ms ease;
  }
  .racconto-attivo .racconto-passo.attivo { opacity: 1; transform: none; }
  .racconto-avanzamento { display: flex; gap: 0.4rem; margin-top: var(--s-5); }
  .racconto-avanzamento span { width: 2rem; height: 3px; background: var(--rule); transition: background 300ms; }
  .racconto-avanzamento span.acceso { background: var(--accento-marca); }
}

/* --------------------------------------------------------------------------
   24. Configuratore del percorso
   -------------------------------------------------------------------------- */
#configuratore { scroll-margin-top: 5rem; }
.conf { display: grid; gap: var(--s-6); margin-top: var(--s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .conf { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.conf-gruppo { border: 0; padding: 0; margin: 0 0 var(--s-6); }
.conf-gruppo legend {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-weight: 600; font-size: var(--t-base); color: var(--ink);
  margin-bottom: var(--s-3); padding: 0;
}
.conf-gruppo legend span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--t-xs);
}
.conf-opzioni { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.conf-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.55rem 0.8rem; cursor: pointer; transition: border-color 120ms, background 120ms;
}
.conf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.conf-chip .icona { width: 1.5rem; height: 1.5rem; }
.conf-chip:hover { border-color: var(--accento-marca); }
.conf-chip:has(input:checked) { border-color: var(--accento); background: var(--accento-velo); font-weight: 600; }
.conf-chip:has(input:focus-visible) { outline: 2px solid var(--accento); outline-offset: 2px; }
.conf-chip-largo { flex: 1 1 14rem; }

.conf-risultato {
  background: var(--ink); color: #fff;
  padding: var(--s-6) var(--s-5);
  position: sticky; top: 6rem;
}
.conf-etichetta { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accento-chiaro); margin-bottom: var(--s-2); }
.conf-nome { font-size: var(--t-xl); color: #fff; margin-bottom: var(--s-3); }
.conf-motivo { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; color: var(--accento-chiaro); margin-bottom: var(--s-2); }
.conf-resta { font-size: var(--t-sm); color: rgba(236, 239, 244, 0.82); margin-bottom: var(--s-5); }
.conf-corsi { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: grid; gap: var(--s-2); }
.conf-corsi li { animation: conf-entra 320ms ease both; }
.conf-corsi a, .conf-corsi span.conf-voce {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, 0.06); border-left: 3px solid var(--accento-chiaro);
  padding: 0.55rem 0.75rem;
}
.conf-corsi a:hover { background: rgba(255, 255, 255, 0.12); }
.conf-corsi .icona { width: 1.4rem; height: 1.4rem; }
.conf-corsi .icona .ic-on { fill: var(--accento-chiaro); }
.conf-corsi .icona .ic-acc { fill: #fff; }
.conf-corsi .icona .ic-off { fill: rgba(255, 255, 255, 0.14); }
.conf-servizio a, .conf-servizio span.conf-voce { border-left-color: var(--accento-marca); background: transparent; font-weight: 500; }
.conf-giornate { font-family: var(--sans); font-size: var(--t-sm); color: rgba(236, 239, 244, 0.82); }
.conf-giornate strong { font-size: var(--t-xl); color: #fff; margin-right: 0.3rem; font-variant-numeric: tabular-nums; }
.conf-risultato .campo-nota { color: rgba(236, 239, 244, 0.6); }
.conf-risultato .bottone-pieno { background: var(--accento-chiaro); color: var(--ink); }
.conf-risultato .bottone-pieno:hover { background: #fff; color: var(--ink); }
.conf-scheda { display: inline-block; margin-top: var(--s-4); color: rgba(255, 255, 255, 0.82); border-bottom-color: rgba(255, 255, 255, 0.35); }
.conf-scheda:hover { color: #fff; border-bottom-color: #fff; }
.conf-cambio { animation: conf-lampo 420ms ease; }
@keyframes conf-entra { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes conf-lampo { from { color: var(--accento-chiaro); } to { color: #fff; } }
@media (prefers-reduced-motion: reduce) { .conf-corsi li, .conf-cambio { animation: none; } }

/* --------------------------------------------------------------------------
   25. Pratica, decisione, misura
   -------------------------------------------------------------------------- */
.promesse { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.promesse-griglia { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .promesse-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.promessa { border-top: 3px solid var(--accento-marca); padding-top: var(--s-4); }
.promessa h3 { font-size: var(--t-lg); margin: var(--s-3) 0 var(--s-2); }
.promessa p { font-size: var(--t-sm); color: var(--ink-2); max-width: 36ch; }
.icona-promessa { width: 2.8rem; height: 2.8rem; }

.fascia-decisione { background: var(--ink); color: #fff; padding-block: clamp(3rem, 6vw, 4.5rem); }
.decisione-occhiello { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accento-chiaro); margin-bottom: var(--s-2); }
.decisione-titolo { color: #fff; max-width: 24ch; margin-bottom: var(--s-6); }
.catena { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); counter-reset: catena; }
@media (min-width: 52rem) { .catena { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.catena-passo { position: relative; background: rgba(255, 255, 255, 0.05); border-top: 3px solid var(--accento-chiaro); padding: var(--s-5); }
.catena-passo p { font-size: var(--t-sm); color: rgba(236, 239, 244, 0.85); }
.catena-etichetta { font-family: var(--sans); font-weight: 700; font-size: var(--t-base) !important; color: #fff !important; margin: var(--s-3) 0 var(--s-2); }
.catena-misura { border-top-color: #fff; }
.fascia-decisione .icona .ic-on  { fill: var(--accento-chiaro); }
.fascia-decisione .icona .ic-acc { fill: #fff; }
.fascia-decisione .icona .ic-dim { fill: rgba(255, 255, 255, 0.45); }
.fascia-decisione .icona .ic-off { fill: rgba(255, 255, 255, 0.12); }
.fascia-decisione .minuta { color: rgba(236, 239, 244, 0.6); }
@media (min-width: 52rem) {
  .catena-passo:not(:last-child)::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--s-5) / 2 - 6px);
    top: 50%;
    width: 12px; height: 12px;
    border-top: 2px solid var(--accento-chiaro);
    border-right: 2px solid var(--accento-chiaro);
    transform: translateY(-50%) rotate(45deg);
  }
}

.verticale-decisione { font-size: var(--t-sm); color: var(--ink); margin-top: var(--s-2); }
.verticale-decisione b { display: block; font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accento); margin-bottom: 2px; }

.conf-corsi small { display: block; font-weight: 400; font-size: var(--t-xs); color: rgba(236, 239, 244, 0.7); margin-top: 2px; }
.conf-corsi a.conf-con-decisione { align-items: flex-start; }

[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   26. Programma partner
   -------------------------------------------------------------------------- */

@media (min-width: 52rem) {
  .scala-fasi-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.facoltativo { font-weight: 400; color: var(--ink-3); }

.campo-scelte { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.campo-scelte legend {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: var(--s-2);
  padding: 0;
}
.campo-scelte .scelte label { font-family: var(--serif); font-weight: 400; margin-bottom: 0; }
.campo-scelte input[type="radio"] { width: auto; padding: 0; box-shadow: none; }

.percorso-corpo .legame { font-size: var(--t-sm); }

.domande { border-top: 1px solid var(--rule); max-width: 46rem; }
.domanda { border-bottom: 1px solid var(--rule); }
.domanda summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: var(--s-4);
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 600;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  color: var(--accento);
  transition: transform 160ms;
}
.domanda[open] summary::after { transform: rotate(45deg); }
.domanda summary:hover { color: var(--accento); }
.domanda summary:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.domanda p { padding-bottom: var(--s-5); color: var(--ink-2); max-width: 60ch; }

.modulo-evidenza { animation: modulo-evidenza 1.4s ease-out 1; }
@keyframes modulo-evidenza {
  0% { box-shadow: 0 0 0 0 rgba(47, 98, 214, 0.35); }
  100% { box-shadow: 0 0 0 18px rgba(47, 98, 214, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .modulo-evidenza { animation: none; }
  .domanda summary::after { transition: none; }
}

/* --------------------------------------------------------------------------
   19. Utilità
   -------------------------------------------------------------------------- */

.occhio {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accento);
  margin-bottom: var(--s-3);
}
.guida { font-size: var(--t-md); color: var(--ink-2); }
.fascia-scura .guida { color: rgba(236, 239, 244, 0.82); }
.minuta { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-3); }
.spazio-sopra { margin-top: var(--s-6); }
.solo-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.pagina-unica[hidden] { display: none; }

/* --------------------------------------------------------------------------
   27. Consulenza e Academy: le due strade, le fasi, i casi
   -------------------------------------------------------------------------- */

.ragioni-tre { }
@media (min-width: 62rem) { .ragioni-tre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (min-width: 52rem) {
  .scala-fasi-sei { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-7); }
  .scala-fasi-cinque { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.strade-fascia h2 { margin-bottom: var(--s-6); }
.strade {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 52rem) { .strade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.strada {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.strada h3 { font-size: var(--t-lg); margin: 0; }
.strada p { margin: 0; color: var(--ink-2); }
.strada ul { margin: var(--s-2) 0 var(--s-3); padding-left: 1.1rem; font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); }
.strada li { margin-bottom: 4px; }
.strada .legame { margin-top: auto; align-self: flex-start; }
.strada-etichetta {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accento) !important;
}
.strada-forte { background: var(--accento); border-color: var(--accento); }
.strada-forte h3, .strada-forte p, .strada-forte ul { color: #fff; }
.strada-forte .strada-etichetta { color: #dce6fb !important; }
.strada-forte .legame { color: #fff; border-bottom-color: rgba(255,255,255,0.6); }
.strade-ponte {
  margin-top: var(--s-5);
  background: var(--ink);
  color: #eceff4;
  border-radius: 12px;
  padding: var(--s-5) var(--s-6);
  font-size: var(--t-md);
}
.strade-ponte strong { color: #9fc0f7; }

.casi-teaser-titolo { margin-bottom: var(--s-6); }
.fascia-numeri .gruppo-azioni { margin-top: var(--s-6); }
@media (min-width: 52rem) { .fascia-numeri .numeri:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.caso {
  display: grid;
  gap: var(--s-6) var(--s-8);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 52rem) { .caso { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.caso-settore {
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: var(--s-2);
}
.caso h2 { margin-bottom: var(--s-5); }
.caso-numeri {
  background: var(--accento);
  color: #fff;
  border-radius: 12px;
  padding: var(--s-6);
  font-family: var(--sans);
}
.caso-numeri p { margin: 0 0 var(--s-5); color: #e6edfc; font-size: var(--t-sm); }
.caso-numeri p:last-child { margin-bottom: 0; }
.caso-etichetta { font-size: var(--t-xs) !important; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #dce6fb !important; }
.caso-cifra { display: block; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #fff; margin-bottom: 4px; }

.persona-azienda { font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; color: var(--accento); margin-bottom: var(--s-2); }
.persona-link { font-family: var(--sans); font-size: var(--t-xs); margin-top: var(--s-2); }
.persona-link a { margin-right: var(--s-3); }

.percorso-ramo {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accento);
  background: var(--accento-velo);
  border-radius: 4px;
  padding: 2px 8px;
  margin-bottom: var(--s-2);
}

/* ==========================================================================
   28. Prenotazione degli incontri
   ========================================================================== */
.prenota-griglia {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 60rem) { .prenota-griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.prenota {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accento);
  border-radius: 6px;
  padding: var(--s-6);
  min-height: 12rem;
}
.prenota-stretta { max-width: 40rem; }
@media (max-width: 30rem) {
  .prenota { padding: var(--s-5) var(--s-4); }
  .prenota-giorni { grid-template-columns: repeat(auto-fill, minmax(3.9rem, 1fr)); }
}
.prenota-passo:focus { outline: none; }
.prenota-titolo {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--t-lg);
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.prenota-titolo-2 { margin-top: var(--s-6); }
.prenota-giorno-scelto { font-weight: 400; color: var(--ink-3); }
.prenota .bottone { margin: var(--s-4) 0 var(--s-3); }

.prenota-giorni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr));
  gap: var(--s-2);
}
.prenota-giorno, .prenota-ora {
  font-family: var(--sans);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.prenota-giorno {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-2) var(--s-1);
  line-height: 1.15;
}
.pg-sett, .pg-mese { font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.pg-num { font-size: var(--t-lg); font-weight: 700; }
.prenota-giorno:hover, .prenota-ora:hover { border-color: var(--accento); }
.prenota-giorno[aria-pressed="true"] { background: var(--accento); border-color: var(--accento); color: #fff; }
.prenota-giorno[aria-pressed="true"] .pg-sett,
.prenota-giorno[aria-pressed="true"] .pg-mese { color: rgba(255, 255, 255, .85); }
.prenota-giorno:focus-visible, .prenota-ora:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }

.prenota-orari {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: var(--s-2);
}
.prenota-ora { padding: var(--s-2) var(--s-3); font-size: var(--t-base); font-weight: 600; }
.prenota-fuso { margin-top: var(--s-5); }

.prenota-scelta {
  font-family: var(--sans);
  background: var(--accento-velo);
  border-radius: 6px;
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
}
.prenota-scelta-testo { font-weight: 700; color: var(--ink); }
.prenota-cambia { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--accento); text-decoration: underline; }
.prenota-fatto-quando { font-family: var(--sans); font-size: var(--t-lg); font-weight: 700; color: var(--accento); }