@charset "utf-8";

/* ==========================================================================
   PctoTracciato, foglio di stile unico del sito
   Direzione artistica: la passerella tra scuola e impresa. Indaco violetto per
   le azioni e i titoli, verde menta per le tappe raggiunte, fondo chiaro su
   tutte le pagine. Motivi ricorrenti: frecce a gradini, nodi di tappa, linee
   di collegamento tratteggiate. Ogni decorazione e' disegnata in CSS puro.

   Sommario
   01. Font e variabili
   02. Azzeramento e basi
   03. Utility e struttura
   04. Decorazioni proprie del sito
   05. Testata e navigazione
   06. Bottoni
   07. Apertura (hero)
   08. Problema
   09. Soluzione e passi
   10. Funzionalita e vantaggi
   11. Prova sociale
   12. Prezzi
   13. Domande frequenti
   14. Blog, schede articolo e blocco Da leggere anche
   15. Pagina articolo e corpo redazionale
   16. Riquadro autore
   17. Contatto e modulo
   18. Piede di pagina ed ecosistema
   19. Banner cookie
   20. Accessibilita, movimento ridotto e stampa
   21. Adattamento agli schermi
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Font e variabili
   Unbounded per i titoli (geometrico e largo, molto riconoscibile),
   Figtree per il testo corrente. Entrambi caricati con display=swap.
   -------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;800&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* Palette approvata del sito */
  --bg: #F8F7FC; --surf: #FFFFFF; --ink: #191A2E; --mut: #5C5E80;
  --pri: #4B3FAF; --acc: #20A67E; --line: #E4E3EF;

  /* Derivate dell indaco */
  --pri-scuro: #372E86; --pri-chiaro: #6E63C9; --pri-carta: #EFEDFB;
  --pri-velo: rgba(75, 63, 175, 0.10); --pri-velo-tenue: rgba(75, 63, 175, 0.05);

  /* Derivate del verde menta: il testo piccolo usa sempre --acc-scuro */
  --acc-scuro: #12795A; --acc-chiaro: #5CC7A5; --acc-carta: #E7F7F1;
  --acc-velo: rgba(32, 166, 126, 0.14); --acc-velo-tenue: rgba(32, 166, 126, 0.07);

  /* Filetti e superfici neutre */
  --line-forte: #CFCCE6; --carta: #F2F1FA;

  /* Raggi caratteristici: spigolo vivo a sinistra, arrotondato a destra */
  --r-s: 3px; --r-m: 4px 16px 4px 16px; --r-l: 6px 26px 6px 26px; --r-tonda: 999px;

  /* Ombre morbide, mai nere piene */
  --ombra-1: 0 1px 2px rgba(25, 26, 46, 0.05), 0 2px 10px rgba(25, 26, 46, 0.04);
  --ombra-2: 0 6px 18px rgba(25, 26, 46, 0.07), 0 2px 4px rgba(25, 26, 46, 0.04);
  --ombra-3: 0 18px 44px rgba(55, 46, 134, 0.14);

  /* Spaziature */
  --sp-1: 0.4rem; --sp-2: 0.8rem; --sp-3: 1.2rem;
  --sp-4: 1.8rem; --sp-5: 2.6rem; --sp-6: 3.6rem;
  --sp-sezione: clamp(3.4rem, 7vw, 6rem);

  /* Contenitori e misura di lettura */
  --largo: 1180px; --stretto: 44rem;

  /* Caratteri, con famiglie di ripiego reali */
  --f-titoli: "Unbounded", Verdana, "Segoe UI", "Trebuchet MS", sans-serif;
  --f-testo: "Figtree", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Transizioni */
  --t-veloce: 140ms ease; --t-media: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   02. Azzeramento e basi
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6.5rem;
}
body {
  min-height: 100%; background-color: var(--bg); color: var(--ink);
  /* Trama di fondo: reticolo di percorso appena percepibile */
  background-image:
    repeating-linear-gradient(90deg, var(--pri-velo-tenue) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(75, 63, 175, 0.032) 0 1px, transparent 1px 64px);
  background-attachment: fixed;
  font-family: var(--f-testo); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.68; font-weight: 400; -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

/* Scala tipografica armonica, rapporto vicino a 1,25 */
h1, h2, h3, h4 {
  font-family: var(--f-titoli); font-weight: 700; line-height: 1.16;
  letter-spacing: -0.025em; color: var(--ink); text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.35rem); }
h3 { font-size: clamp(1.18rem, 1.02rem + 0.65vw, 1.42rem); font-weight: 600; }
h4 { font-size: 1.06rem; font-weight: 600; }
p { text-wrap: pretty; }
a {
  color: var(--pri-scuro); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; transition: color var(--t-veloce);
}
a:hover { color: var(--acc-scuro); }
strong { font-weight: 700; }
ul, ol { padding-left: 1.2rem; }
hr { border: 0; height: 1px; background: var(--line); margin: var(--sp-5) 0; }

/* --------------------------------------------------------------------------
   03. Utility e struttura
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%; max-width: var(--largo); margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.wrap-stretto {
  width: 100%; max-width: 50rem; margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.sezione { position: relative; padding-block: var(--sp-sezione); }

/* Fascia bianca piena, per far respirare le sezioni dense */
.sezione--carta {
  background: var(--surf);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* Fascia con velo indaco e reticolo verticale piu marcato */
.sezione--velo {
  background-color: var(--pri-carta);
  background-image: repeating-linear-gradient(90deg, rgba(75, 63, 175, 0.07) 0 1px, transparent 1px 44px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* Fascia con il motivo a gradini in filigrana */
.sezione--gradini {
  background-color: var(--surf);
  background-image: repeating-linear-gradient(135deg, var(--acc-velo-tenue) 0 10px, transparent 10px 22px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* Fascia menta chiarissima, pensata per la prova sociale */
.sezione--menta {
  background: linear-gradient(180deg, var(--acc-carta), var(--surf));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* Filetto a due colori in cima alla fascia */
.sezione--segnata::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--pri) 0 38%, var(--acc) 38% 62%, var(--pri) 62% 100%);
}
.intestazione-sezione { max-width: 46rem; margin-bottom: var(--sp-5); }
.intestazione-sezione--centrata { margin-inline: auto; text-align: center; }
.titolo-sezione { margin-bottom: var(--sp-2); }
.intro-sezione { color: var(--mut); font-size: 1.06rem; }
.griglia-2, .griglia-3, .griglia-4 { display: grid; gap: var(--sp-4); }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.griglia-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.centro { text-align: center; }
.visivamente-nascosto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Campo trappola del modulo di contatto */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Collegamento di salto, visibile al primo tab */
.salta-al-contenuto {
  position: absolute; top: -100px; left: 1rem; z-index: 200; padding: 0.75rem 1.2rem;
  background: var(--pri); color: #FFFFFF; font-weight: 600; text-decoration: none;
  border-radius: var(--r-m); transition: top var(--t-veloce);
}
.salta-al-contenuto:focus { top: 0.75rem; color: #FFFFFF; }

/* Involucro per le tabelle larghe sugli schermi stretti */
.tabella-scorrevole {
  overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line);
  border-radius: var(--r-m); background: var(--surf);
}

/* --------------------------------------------------------------------------
   04. Decorazioni proprie del sito
   Nodo di tappa, passerella, ponte, freccia a gradini, etichetta a punta.
   -------------------------------------------------------------------------- */

/* Nodo di tappa: disco indaco con anello menta */
.nodo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; flex: 0 0 auto; border-radius: var(--r-tonda);
  background: var(--pri); color: #FFFFFF; font-family: var(--f-titoli);
  font-weight: 700; font-size: 1.05rem; line-height: 1;
  box-shadow: 0 0 0 4px var(--surf), 0 0 0 6px var(--acc-velo);
}
.nodo--grande { width: 3.8rem; height: 3.8rem; font-size: 1.3rem; }
.nodo--piccolo {
  width: 1.85rem; height: 1.85rem; font-size: 0.8rem;
  box-shadow: 0 0 0 3px var(--surf), 0 0 0 5px var(--acc-velo);
}
.nodo--menta {
  background: var(--acc);
  box-shadow: 0 0 0 4px var(--surf), 0 0 0 6px var(--pri-velo);
}

/* Passerella: linea tratteggiata verticale che collega i nodi */
.passerella { position: relative; }
.passerella::before {
  content: ""; position: absolute; left: 1.5rem; top: 1.5rem; bottom: 1.5rem; width: 2px;
  background-image: linear-gradient(180deg, var(--pri-chiaro) 50%, transparent 0);
  background-size: 2px 12px; background-repeat: repeat-y;
}

/* Ponte: separatore orizzontale con cavo tratteggiato e nodo centrale */
.ponte { position: relative; height: 2.2rem; margin: var(--sp-4) 0; }
.ponte::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
  background-image: linear-gradient(90deg, var(--line-forte) 60%, transparent 0);
  background-size: 10px 2px;
}
.ponte::after {
  content: ""; position: absolute; left: 50%; top: calc(50% - 0.55rem);
  width: 1.1rem; height: 1.1rem; margin-left: -0.55rem; background: var(--acc);
  border: 3px solid var(--bg); border-radius: var(--r-tonda);
}

/* Etichetta a punta, la freccia di percorso del sito */
.etichetta {
  display: inline-block; padding: 0.3rem 1.15rem 0.3rem 0.7rem;
  background: var(--pri); color: #FFFFFF; font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}
.etichetta--menta {
  background: var(--acc-carta); color: var(--acc-scuro);
  box-shadow: inset 0 0 0 1px rgba(18, 121, 90, 0.25);
}

/* Occhiello: sopratitolo con tre gradini disegnati a sinistra */
.occhiello {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: var(--sp-2);
  color: var(--acc-scuro); font-family: var(--f-titoli); font-size: 0.78rem;
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.occhiello::before {
  content: ""; width: 1.5rem; height: 0.75rem; flex: 0 0 auto;
  background:
    linear-gradient(var(--pri), var(--pri)) 0 100% / 0.5rem 0.25rem no-repeat,
    linear-gradient(var(--pri), var(--pri)) 0.5rem 50% / 0.5rem 0.25rem no-repeat,
    linear-gradient(var(--acc), var(--acc)) 1rem 0 / 0.5rem 0.25rem no-repeat;
}
.intestazione-sezione--centrata .occhiello { justify-content: center; }

/* Scheda generica: spigolo vivo a sinistra, morbido a destra */
.scheda {
  background: var(--surf); border: 1px solid var(--line); border-left: 3px solid var(--pri);
  border-radius: var(--r-m); padding: var(--sp-4); box-shadow: var(--ombra-1);
}

/* Cornice di forte rilievo, con i gradini menta nell angolo alto */
.cornice {
  position: relative; overflow: hidden; background: var(--surf);
  border: 2px solid var(--pri); border-radius: var(--r-l);
  padding: var(--sp-5); box-shadow: var(--ombra-2);
}
.cornice::before {
  content: ""; position: absolute; right: -1px; top: -1px; width: 4.5rem; height: 4.5rem;
  background:
    linear-gradient(var(--acc-velo), var(--acc-velo)) 100% 0 / 4.5rem 1.5rem no-repeat,
    linear-gradient(var(--acc-velo), var(--acc-velo)) 100% 1.5rem / 3rem 1.5rem no-repeat,
    linear-gradient(var(--acc-velo), var(--acc-velo)) 100% 3rem / 1.5rem 1.5rem no-repeat;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   05. Testata e navigazione
   -------------------------------------------------------------------------- */

.testata {
  position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(75, 63, 175, 0.04);
}
.testata::after {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, var(--pri) 0 55%, var(--acc) 55% 100%);
}
.testata__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: 4.4rem;
}
.marchio {
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none; color: var(--ink);
}
.marchio__sigla {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; background: var(--pri); color: #FFFFFF;
  font-family: var(--f-titoli); font-weight: 700; font-size: 0.85rem;
  border-radius: 3px 12px 3px 12px; border-top: 4px solid var(--acc);
}
.marchio__nome {
  font-family: var(--f-titoli); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.03em;
}
.marchio__nome b { color: var(--pri); font-weight: 700; }
.nav { display: none; align-items: center; gap: clamp(0.4rem, 1.2vw, 1rem); }
.nav__link {
  position: relative; padding: 0.55rem 0.2rem; color: var(--mut);
  font-size: 0.94rem; font-weight: 600; text-decoration: none;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0.15rem; height: 2px;
  background: var(--acc); transition: right var(--t-media);
}
.nav__link:hover, .nav__link.is-attivo { color: var(--pri-scuro); }
.nav__link:hover::after, .nav__link.is-attivo::after { right: 0; }
.testata__azione { display: flex; align-items: center; gap: 0.6rem; }

/* Pulsante che apre il menu sugli schermi stretti */
.apri-menu {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px;
  padding: 0.5rem 0.85rem; background: var(--surf); border: 1px solid var(--line-forte);
  border-radius: var(--r-m); color: var(--ink); font-size: 0.9rem; font-weight: 600;
}
.apri-menu__barre, .apri-menu__barre::before, .apri-menu__barre::after {
  display: block; width: 18px; height: 2px; background: var(--pri);
  transition: transform var(--t-media), opacity var(--t-veloce);
}
.apri-menu__barre { position: relative; }
.apri-menu__barre::before, .apri-menu__barre::after { content: ""; position: absolute; left: 0; }
.apri-menu__barre::before { top: -6px; }
.apri-menu__barre::after { top: 6px; }
.apri-menu[aria-expanded="true"] .apri-menu__barre { background: transparent; }
.apri-menu[aria-expanded="true"] .apri-menu__barre::before { transform: translateY(6px) rotate(45deg); }
.apri-menu[aria-expanded="true"] .apri-menu__barre::after { transform: translateY(-6px) rotate(-45deg); }

/* Pannello di navigazione a scomparsa */
.menu-mobile {
  display: none; padding-block: var(--sp-3) var(--sp-4);
  background: var(--surf); border-top: 1px solid var(--line);
}
.menu-mobile.is-aperto { display: block; }
.menu-mobile__lista { list-style: none; padding: 0; margin-bottom: var(--sp-3); }
.menu-mobile__lista li { border-bottom: 1px dashed var(--line); }
.menu-mobile__lista a {
  display: block; position: relative; padding: 0.85rem 0.2rem 0.85rem 1.4rem;
  color: var(--ink); font-weight: 600; text-decoration: none;
}
.menu-mobile__lista a::before {
  content: ""; position: absolute; left: 0; top: 1.25rem; width: 0.55rem; height: 0.55rem;
  border-radius: var(--r-tonda); background: var(--acc);
}
body.menu-aperto, body.cookie-aperto { overflow: hidden; }

/* --------------------------------------------------------------------------
   06. Bottoni
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.8rem 1.5rem; border: 2px solid transparent;
  border-radius: var(--r-m); font-family: var(--f-testo); font-size: 1rem;
  font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  transition: transform var(--t-veloce), background var(--t-veloce),
    box-shadow var(--t-veloce), color var(--t-veloce);
}
.btn--primario {
  background: var(--pri); color: #FFFFFF; border-color: var(--pri);
  box-shadow: 0 3px 0 var(--pri-scuro);
}

/* Freccia a gradini disegnata dentro il bottone principale */
.btn--primario::after {
  content: ""; width: 0.9rem; height: 0.55rem;
  background:
    linear-gradient(#FFFFFF, #FFFFFF) 0 100% / 0.45rem 2px no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) 0.45rem 50% / 0.45rem 2px no-repeat,
    linear-gradient(#FFFFFF, #FFFFFF) 0.45rem 0 / 2px 0.55rem no-repeat;
  transition: transform var(--t-media);
}
.btn--primario:hover { background: var(--pri-scuro); color: #FFFFFF; transform: translateY(-1px); }
.btn--primario:hover::after { transform: translateX(3px); }
.btn--secondario {
  background: var(--surf); color: var(--pri-scuro); border-color: var(--pri-chiaro);
}
.btn--secondario:hover { background: var(--pri-carta); border-color: var(--pri); color: var(--pri-scuro); }
.btn--menta {
  background: var(--acc); color: #FFFFFF; border-color: var(--acc);
  box-shadow: 0 3px 0 var(--acc-scuro);
}
.btn--menta:hover { background: var(--acc-scuro); color: #FFFFFF; }
.btn--piccolo { min-height: 42px; padding: 0.45rem 1rem; font-size: 0.9rem; }
.btn--blocco { display: flex; width: 100%; }

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

.hero {
  position: relative; overflow: hidden; padding-block: clamp(2.6rem, 6vw, 5rem);
  background:
    radial-gradient(60rem 26rem at 82% -10%, var(--acc-velo-tenue), transparent 70%),
    linear-gradient(180deg, var(--pri-carta) 0%, var(--bg) 78%);
  border-bottom: 1px solid var(--line);
}

/* Gradini in filigrana nell angolo basso a sinistra dell apertura */
.hero::before {
  content: ""; position: absolute; left: -2rem; bottom: -1rem; width: 20rem; height: 9rem;
  background:
    linear-gradient(var(--pri-velo), var(--pri-velo)) 0 100% / 20rem 1.5rem no-repeat,
    linear-gradient(var(--pri-velo), var(--pri-velo)) 0 calc(100% - 1.9rem) / 15rem 1.5rem no-repeat,
    linear-gradient(var(--pri-velo), var(--pri-velo)) 0 calc(100% - 3.8rem) / 10rem 1.5rem no-repeat,
    linear-gradient(var(--pri-velo), var(--pri-velo)) 0 calc(100% - 5.7rem) / 5rem 1.5rem no-repeat;
  pointer-events: none;
}
.hero__interno { position: relative; display: grid; gap: var(--sp-5); align-items: center; }
.hero__titolo { margin-bottom: var(--sp-3); }
.hero__sub {
  max-width: 34rem; color: var(--mut); margin-bottom: var(--sp-4);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
}
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.hero__punti { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.hero__punti li { position: relative; padding-left: 2rem; font-weight: 600; color: var(--ink); }

/* Spunta disegnata dentro un disco menta */
.hero__punti li::before {
  content: ""; position: absolute; left: 0; top: 0.28rem; width: 1.35rem; height: 1.35rem;
  border-radius: var(--r-tonda); background: var(--acc-velo);
  box-shadow: inset 0 0 0 2px var(--acc);
}
.hero__punti li::after {
  content: ""; position: absolute; left: 0.42rem; top: 0.6rem; width: 0.5rem; height: 0.28rem;
  border-left: 2px solid var(--acc-scuro); border-bottom: 2px solid var(--acc-scuro);
  transform: rotate(-45deg);
}

.hero__visuale { position: relative; }

/* Pannello visivo dell apertura: il percorso di uno studente */
.percorso {
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--ombra-3); overflow: hidden;
}
.percorso__testata {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(90deg, var(--pri), var(--pri-chiaro)); color: #FFFFFF;
}
.percorso__studente { font-family: var(--f-titoli); font-weight: 600; font-size: 1rem; }
.percorso__classe { font-size: 0.82rem; opacity: 0.9; }
.percorso__quota {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) 0; font-size: 0.86rem; color: var(--mut);
}
.percorso__quota b { font-family: var(--f-titoli); font-size: 1.3rem; color: var(--pri-scuro); }
.percorso__barra {
  height: 0.65rem; margin: 0.5rem var(--sp-4) var(--sp-3); background: var(--carta);
  border-radius: var(--r-tonda); overflow: hidden;
}
.percorso__barra span {
  display: block; height: 100%; border-radius: var(--r-tonda);
  background: linear-gradient(90deg, var(--pri), var(--acc));
}
.percorso__tappe { list-style: none; padding: 0 var(--sp-4) var(--sp-4); margin: 0; }
.percorso__tappa {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0;
  border-top: 1px dashed var(--line);
}
.percorso__tappa:first-child { border-top: 0; }
.percorso__tappa-nome { flex: 1 1 auto; font-weight: 600; font-size: 0.95rem; }
.percorso__tappa-stato {
  font-size: 0.78rem; font-weight: 700; color: var(--acc-scuro); background: var(--acc-carta);
  border-radius: var(--r-tonda); padding: 0.2rem 0.7rem; white-space: nowrap;
}
.percorso__tappa-stato--attesa { color: var(--pri-scuro); background: var(--pri-carta); }
.percorso__piede {
  padding: var(--sp-3) var(--sp-4); background: var(--carta);
  border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--mut);
}

/* --------------------------------------------------------------------------
   08. Problema
   -------------------------------------------------------------------------- */

.problema__interno { display: grid; gap: var(--sp-5); align-items: start; }
.problema__racconto p + p { margin-top: var(--sp-3); }

/* Capolettera indaco sul primo paragrafo del racconto */
.problema__racconto > p:first-of-type::first-letter {
  float: left; margin: 0.32rem 0.6rem 0 0; font-family: var(--f-titoli);
  font-size: 3.2rem; line-height: 0.82; font-weight: 800; color: var(--pri);
}
.sintomi {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: var(--sp-4); box-shadow: var(--ombra-2);
}
.sintomi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  border-radius: 6px 6px 0 0; background: linear-gradient(90deg, var(--acc), var(--pri));
}
.sintomi__titolo { margin-bottom: var(--sp-3); font-size: 1.1rem; }
.sintomi__lista { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.sintomo { position: relative; padding-left: 1.9rem; color: var(--mut); }

/* Croce disegnata con due filetti, segnale di tappa mancata */
.sintomo::before, .sintomo::after {
  content: ""; position: absolute; left: 0.15rem; top: 0.75rem;
  width: 0.85rem; height: 2px; background: var(--pri-chiaro);
}
.sintomo::before { transform: rotate(45deg); }
.sintomo::after { transform: rotate(-45deg); }

/* --------------------------------------------------------------------------
   09. Soluzione e passi
   -------------------------------------------------------------------------- */

.soluzione__testo { max-width: 42rem; margin-bottom: var(--sp-5); }
.soluzione__testo p + p { margin-top: var(--sp-3); }
.passi { position: relative; display: grid; gap: var(--sp-4); }
.passo {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3);
  align-items: start; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: var(--sp-4); box-shadow: var(--ombra-1);
  transition: transform var(--t-media), box-shadow var(--t-media);
}
.passo:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
.passo__nodo { grid-row: span 2; }
.passo__titolo { margin-bottom: var(--sp-1); font-size: 1.12rem; }
.passo__testo { color: var(--mut); }

/* --------------------------------------------------------------------------
   10. Funzionalita e vantaggi
   -------------------------------------------------------------------------- */

.griglia-funzioni {
  display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.funzione {
  position: relative; overflow: hidden; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: var(--sp-4);
  transition: border-color var(--t-veloce), transform var(--t-media), box-shadow var(--t-media);
}

/* Filetto verticale che cresce al passaggio del puntatore */
.funzione::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 60%; width: 3px;
  background: linear-gradient(180deg, var(--acc), var(--pri)); transition: bottom var(--t-media);
}
.funzione:hover { border-color: var(--pri-chiaro); transform: translateY(-3px); box-shadow: var(--ombra-2); }
.funzione:hover::before { bottom: 0; }
.funzione__indice {
  display: block; margin-bottom: var(--sp-2); font-family: var(--f-titoli);
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; color: var(--acc-scuro);
}
.funzione__titolo { margin-bottom: var(--sp-2); font-size: 1.08rem; }
.funzione__testo { color: var(--mut); font-size: 0.97rem; }
.vantaggi { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.vantaggio {
  padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--acc);
  background: linear-gradient(90deg, var(--acc-velo-tenue), transparent 55%);
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.vantaggio__titolo { margin-bottom: var(--sp-1); font-size: 1.1rem; }
.vantaggio__testo { color: var(--mut); }

/* --------------------------------------------------------------------------
   11. Prova sociale
   -------------------------------------------------------------------------- */

.prove { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.prova {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: var(--sp-5) var(--sp-4) var(--sp-4);
  box-shadow: var(--ombra-1);
}

/* Virgolette aperte, disegnate con il carattere dei titoli */
.prova::before {
  content: "“"; position: absolute; top: 0.4rem; left: 1.2rem;
  font-family: var(--f-titoli); font-size: 3.4rem; line-height: 1; color: var(--acc-velo);
}
.prova__testo { position: relative; margin-bottom: var(--sp-3); font-size: 1.02rem; }
.prova__firma {
  display: flex; align-items: center; gap: 0.75rem; padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-forte);
}
.prova__nome { font-family: var(--f-titoli); font-weight: 600; font-size: 0.98rem; }
.prova__ruolo { color: var(--mut); font-size: 0.86rem; }
.nota-scenari {
  margin-top: var(--sp-4); padding: var(--sp-2) var(--sp-3); background: var(--surf);
  border: 1px dashed var(--line-forte); border-radius: var(--r-m);
  color: var(--mut); font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   12. Prezzi
   -------------------------------------------------------------------------- */

.prezzi {
  display: grid; gap: var(--sp-4); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.piano {
  display: flex; flex-direction: column; gap: var(--sp-3); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--sp-4);
  box-shadow: var(--ombra-1);
}
.piano--evidenza { position: relative; border: 2px solid var(--pri); box-shadow: var(--ombra-3); }
.piano--evidenza::before {
  content: ""; position: absolute; inset: -2px -2px auto -2px; height: 6px;
  border-radius: 6px 24px 0 0; background: linear-gradient(90deg, var(--pri), var(--acc));
}
.piano__nastro { align-self: flex-start; margin-bottom: -0.4rem; }
.piano__nome { font-size: 1.35rem; color: var(--pri-scuro); }
.piano__descrizione { color: var(--mut); font-size: 0.94rem; }
.piano__prezzo {
  display: flex; align-items: baseline; gap: 0.5rem; padding-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--line-forte);
}
.piano__cifra {
  font-family: var(--f-titoli); font-size: 2.6rem; font-weight: 800;
  line-height: 1; color: var(--ink);
}
.piano__periodo { color: var(--mut); font-size: 0.9rem; }
.piano__lista { list-style: none; padding: 0; display: grid; gap: 0.6rem; flex: 1 1 auto; }
.piano__lista li { position: relative; padding-left: 1.7rem; font-size: 0.96rem; }

/* Spunta a due filetti, senza glifi tipografici */
.piano__lista li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.5rem; width: 0.55rem; height: 0.3rem;
  border-left: 2px solid var(--acc); border-bottom: 2px solid var(--acc);
  transform: rotate(-45deg);
}
.nota-prezzi {
  max-width: 46rem; margin: var(--sp-4) auto 0; color: var(--mut);
  font-size: 0.94rem; text-align: center;
}

/* --------------------------------------------------------------------------
   13. Domande frequenti
   -------------------------------------------------------------------------- */

.faq { max-width: 50rem; margin-inline: auto; display: grid; gap: 0.7rem; }
.faq__voce {
  background: var(--surf); border: 1px solid var(--line); border-left: 3px solid var(--pri-chiaro);
  border-radius: var(--r-m); overflow: hidden; transition: border-color var(--t-veloce);
}
.faq__voce:has(.faq__domanda[aria-expanded="true"]) { border-left-color: var(--acc); }
.faq__domanda {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 52px; padding: 0.95rem 1.1rem; background: transparent;
  border: 0; text-align: left; font-family: var(--f-titoli); font-size: 1rem;
  font-weight: 600; letter-spacing: -0.02em; color: var(--ink);
}
.faq__domanda:hover { color: var(--pri-scuro); }

/* Segno piu e meno disegnato con due filetti */
.faq__segno {
  position: relative; flex: 0 0 auto; width: 1.6rem; height: 1.6rem;
  border-radius: var(--r-tonda); background: var(--pri-carta);
}
.faq__segno::before, .faq__segno::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 0.75rem; height: 2px;
  margin: -1px 0 0 -0.375rem; background: var(--pri); transition: transform var(--t-media);
}
.faq__segno::after { transform: rotate(90deg); }
.faq__domanda[aria-expanded="true"] .faq__segno { background: var(--acc-carta); }
.faq__domanda[aria-expanded="true"] .faq__segno::before,
.faq__domanda[aria-expanded="true"] .faq__segno::after { background: var(--acc-scuro); }
.faq__domanda[aria-expanded="true"] .faq__segno::after { transform: rotate(0deg); }
.faq__risposta { padding: 0 1.1rem 1.1rem; color: var(--mut); }
.faq__risposta p + p { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   14. Blog, schede articolo e blocco Da leggere anche
   -------------------------------------------------------------------------- */

.griglia-articoli {
  display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
}
.articolo-card {
  display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-l); overflow: hidden; box-shadow: var(--ombra-1);
  transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-veloce);
}
.articolo-card:hover {
  transform: translateY(-3px); border-color: var(--pri-chiaro); box-shadow: var(--ombra-2);
}
.articolo-card__media {
  position: relative; aspect-ratio: 3 / 2; background: var(--carta);
  border-bottom: 3px solid var(--acc);
}
.articolo-card__media img { width: 100%; height: 100%; object-fit: cover; }
.articolo-card__corpo {
  display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 auto; padding: var(--sp-4);
}
.articolo-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  color: var(--mut); font-size: 0.82rem;
}
.articolo-card__titolo { font-size: 1.05rem; line-height: 1.3; }
.articolo-card__titolo a { color: var(--ink); text-decoration: none; }
.articolo-card__titolo a:hover { color: var(--pri-scuro); text-decoration: underline; }
.articolo-card__testo { color: var(--mut); font-size: 0.95rem; flex: 1 1 auto; }
.articolo-card__link {
  align-self: flex-start; font-weight: 700; font-size: 0.92rem; color: var(--pri-scuro);
  text-decoration: none; border-bottom: 2px solid var(--acc); padding-bottom: 2px;
}
.articolo-card__link:hover { color: var(--acc-scuro); border-bottom-color: var(--pri); }
.da-leggere { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 2px solid var(--line); }
.da-leggere__titolo { margin-bottom: var(--sp-4); font-size: 1.5rem; }

/* --------------------------------------------------------------------------
   15. Pagina articolo e corpo redazionale
   -------------------------------------------------------------------------- */

.articolo { padding-block: var(--sp-5) var(--sp-6); }
.briciole { margin-bottom: var(--sp-3); }
.briciole ol {
  display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; padding: 0;
  font-size: 0.85rem; color: var(--mut);
}

/* Freccia a gradini come separatore del percorso di navigazione */
.briciole li + li::before {
  content: ""; display: inline-block; width: 0.4rem; height: 0.4rem; margin-right: 0.45rem;
  border-top: 2px solid var(--acc); border-right: 2px solid var(--acc);
  transform: rotate(45deg) translateY(-1px);
}
.briciole a { color: var(--mut); }
.articolo__titolo { margin-bottom: var(--sp-3); }
.meta-articolo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem;
  margin-bottom: var(--sp-4); color: var(--mut); font-size: 0.9rem;
}
.figura {
  margin: 0 0 var(--sp-4); border-radius: var(--r-l); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--ombra-2); background: var(--surf);
}
.figura img { width: 100%; }
.credito-foto {
  padding: 0.6rem var(--sp-3); background: var(--carta); border-top: 1px solid var(--line);
  color: var(--mut); font-size: 0.82rem;
}
.chapo {
  position: relative; margin-bottom: var(--sp-4); padding-left: var(--sp-3);
  border-left: 4px solid var(--acc); font-weight: 500; color: var(--ink);
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.22rem);
}
.sommario {
  margin-bottom: var(--sp-5); padding: var(--sp-3) var(--sp-4); background: var(--pri-carta);
  border-radius: var(--r-m); border-left: 3px solid var(--pri);
}
.sommario__titolo { margin-bottom: var(--sp-2); font-size: 1rem; }
.sommario ol { margin: 0; padding-left: 1.1rem; color: var(--mut); }

/* Corpo redazionale: misura di lettura da 62 a 72 caratteri */
.prosa { max-width: var(--stretto); font-size: 1.06rem; line-height: 1.75; }
.prosa > * + * { margin-top: var(--sp-3); }
.prosa h2 {
  position: relative; margin-top: var(--sp-6); padding-top: var(--sp-2);
  font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem); border-top: 2px solid var(--line);
}

/* Nodo di tappa agganciato al filetto sopra ogni titolo di secondo livello */
.prosa h2::before {
  content: ""; position: absolute; left: 0; top: -0.32rem; width: 0.62rem; height: 0.62rem;
  border-radius: var(--r-tonda); background: var(--acc); box-shadow: 0 0 0 3px var(--surf);
}
.prosa h3 { margin-top: var(--sp-5); color: var(--pri-scuro); }
.prosa p { color: var(--ink); }
.prosa a { font-weight: 600; }
.prosa ul, .prosa ol { padding-left: 1.5rem; display: grid; gap: 0.5rem; }
.prosa ul { list-style: none; padding-left: 1.8rem; }
.prosa ul li { position: relative; }

/* Punto elenco a forma di gradino, indaco e menta */
.prosa ul li::before {
  content: ""; position: absolute; left: -1.35rem; top: 0.62rem; width: 0.7rem; height: 0.45rem;
  background:
    linear-gradient(var(--pri), var(--pri)) 0 100% / 0.35rem 0.18rem no-repeat,
    linear-gradient(var(--acc), var(--acc)) 0.35rem 0 / 0.35rem 0.18rem no-repeat;
}
.prosa ol li::marker { color: var(--pri); font-weight: 700; }
.prosa blockquote {
  margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4); background: var(--acc-carta);
  border-left: 4px solid var(--acc); border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: 1.06rem; font-style: italic; color: var(--ink);
}
.prosa table {
  width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: 0.96rem;
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-m);
  overflow: hidden;
}
.prosa th, .prosa td {
  padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prosa thead th {
  background: var(--pri-carta); color: var(--pri-scuro); font-family: var(--f-titoli);
  font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em;
}
.prosa tbody tr:last-child td { border-bottom: 0; }
.prosa tbody tr:nth-child(even) { background: var(--carta); }
.prosa figure { margin: var(--sp-4) 0; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.prosa figcaption { padding: 0.55rem 0.9rem; background: var(--carta); color: var(--mut); font-size: 0.85rem; }
.prosa code {
  padding: 0.1rem 0.35rem; background: var(--pri-carta); border-radius: var(--r-s);
  font-family: "Consolas", "Menlo", monospace; font-size: 0.92em; color: var(--pri-scuro);
}

/* Riquadro riassuntivo dentro l articolo */
.riquadro {
  position: relative; margin: var(--sp-5) 0; padding: var(--sp-4); background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--r-l); box-shadow: var(--ombra-1);
}
.riquadro__titolo {
  display: inline-block; margin-bottom: var(--sp-2); padding: 0.25rem 1.1rem 0.25rem 0.7rem;
  background: var(--pri); color: #FFFFFF; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
}

/* Intestazione delle pagine interne: blog, autore, legali, mappa del sito */
.pagina-testata {
  padding-block: var(--sp-5) var(--sp-4);
  background: linear-gradient(180deg, var(--pri-carta), var(--bg));
  border-bottom: 1px solid var(--line);
}
.pagina-intro { max-width: 44rem; margin-top: var(--sp-2); color: var(--mut); font-size: 1.05rem; }

/* Elenco di collegamenti con nodi, per la mappa del sito e la pagina autore */
.elenco-percorso {
  position: relative; list-style: none; padding: 0 0 0 1.6rem; display: grid; gap: 0.7rem;
}
.elenco-percorso::before {
  content: ""; position: absolute; left: 0.3rem; top: 0.5rem; bottom: 0.5rem; width: 2px;
  background-image: linear-gradient(180deg, var(--line-forte) 55%, transparent 0);
  background-size: 2px 10px;
}
.elenco-percorso li { position: relative; }
.elenco-percorso li::before {
  content: ""; position: absolute; left: -1.48rem; top: 0.55rem; width: 0.65rem; height: 0.65rem;
  border-radius: var(--r-tonda); background: var(--surf); box-shadow: inset 0 0 0 2px var(--pri);
}

/* --------------------------------------------------------------------------
   16. Riquadro autore
   -------------------------------------------------------------------------- */

.autore-box {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start;
  margin-top: var(--sp-5); padding: var(--sp-4); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--ombra-1);
}
.autore-box__foto {
  width: 92px; height: 92px; border-radius: var(--r-tonda); object-fit: cover;
  box-shadow: 0 0 0 3px var(--surf), 0 0 0 5px var(--acc);
}
.autore-box__nome { font-size: 1.2rem; margin-bottom: 0.1rem; }
.autore-box__ruolo {
  margin-bottom: var(--sp-2); color: var(--acc-scuro); font-size: 0.82rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.autore-box__bio { color: var(--mut); margin-bottom: var(--sp-2); }
.social {
  display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0;
  margin-top: var(--sp-2);
}
.social__link {
  display: inline-block; padding: 0.3rem 0.85rem; background: var(--pri-carta);
  border-radius: var(--r-tonda); color: var(--pri-scuro); font-size: 0.85rem;
  font-weight: 600; text-decoration: none;
}
.social__link:hover { background: var(--acc-carta); color: var(--acc-scuro); }

/* --------------------------------------------------------------------------
   17. Contatto e modulo
   -------------------------------------------------------------------------- */

.contatto__interno { display: grid; gap: var(--sp-5); align-items: start; }
.contatto__promessa p + p { margin-top: var(--sp-3); }
.modulo {
  background: var(--surf); border: 1px solid var(--line); border-top: 5px solid var(--pri);
  border-radius: var(--r-l); padding: var(--sp-4); box-shadow: var(--ombra-2);
}
.campi { display: grid; gap: var(--sp-3); }
.campi--due { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.campo { display: grid; gap: 0.35rem; }
.campo__etichetta { font-weight: 600; font-size: 0.94rem; }
.campo__obbligatorio { color: var(--acc-scuro); font-weight: 700; }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 0.65rem 0.8rem; background: var(--bg);
  border: 1px solid var(--line-forte); border-radius: var(--r-m); font-size: 1rem;
  transition: border-color var(--t-veloce), box-shadow var(--t-veloce), background var(--t-veloce);
}
.campo textarea { min-height: 8.5rem; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--pri-chiaro); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; background: var(--surf); border-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-velo);
}
.campo__aiuto { color: var(--mut); font-size: 0.85rem; }
.modulo__nota { margin-top: var(--sp-3); color: var(--mut); font-size: 0.88rem; }
.alternativa {
  margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: 1px dashed var(--line-forte); font-size: 0.94rem;
}

/* --------------------------------------------------------------------------
   18. Piede di pagina ed ecosistema
   -------------------------------------------------------------------------- */

.piede {
  position: relative; margin-top: var(--sp-6); padding-top: var(--sp-6);
  background-color: var(--surf); border-top: 1px solid var(--line);
  background-image: repeating-linear-gradient(135deg, var(--pri-velo-tenue) 0 8px, transparent 8px 20px);
}
.piede::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--pri) 0 40%, var(--acc) 40% 70%, var(--pri) 70% 100%);
}
.piede__griglia {
  display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding-bottom: var(--sp-5);
}
.piede__col { min-width: 0; }
.piede__marchio {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: var(--sp-2);
  font-family: var(--f-titoli); font-weight: 600; color: var(--ink); text-decoration: none;
}
.piede__claim { color: var(--mut); margin-bottom: var(--sp-2); }
.piede__contatto { font-size: 0.94rem; }
.piede__titolo {
  display: inline-block; margin-bottom: var(--sp-3); padding-bottom: 0.4rem;
  font-size: 0.92rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--pri-scuro); border-bottom: 2px solid var(--acc);
}
.piede__lista { list-style: none; padding: 0; display: grid; gap: 0.5rem; font-size: 0.94rem; }
.piede__lista a { color: var(--mut); text-decoration: none; }
.piede__lista a:hover { color: var(--pri-scuro); text-decoration: underline; }
.piede__cookie {
  margin-top: var(--sp-3); min-height: 44px; padding: 0.5rem 1rem; background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--r-m); color: var(--pri-scuro);
  font-size: 0.88rem; font-weight: 600;
}
.piede__cookie:hover { border-color: var(--pri); background: var(--pri-carta); }

/* Colonna ecosistema: targhette a forma di tappa del percorso */
.ecosistema { display: grid; gap: 0.5rem; }
.ecosistema__link {
  position: relative; display: block; padding: 0.6rem 0.8rem 0.6rem 1.5rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-m);
  text-decoration: none;
  transition: border-color var(--t-veloce), transform var(--t-veloce), background var(--t-veloce);
}
.ecosistema__link::before {
  content: ""; position: absolute; left: 0.55rem; top: 1rem; width: 0.45rem; height: 0.45rem;
  border-radius: var(--r-tonda); background: var(--acc);
}
.ecosistema__link:hover { background: var(--surf); border-color: var(--pri-chiaro); transform: translateX(2px); }
.ecosistema__nome {
  display: block; font-family: var(--f-titoli); font-size: 0.9rem;
  font-weight: 600; color: var(--pri-scuro);
}
.ecosistema__desc { display: block; color: var(--mut); font-size: 0.83rem; }
.piede__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding-block: var(--sp-3); border-top: 1px solid var(--line);
  color: var(--mut); font-size: 0.85rem;
}
.piede__legale { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.piede__legale a { color: var(--mut); text-decoration: none; }
.piede__legale a:hover { color: var(--pri-scuro); text-decoration: underline; }

/* --------------------------------------------------------------------------
   19. Banner cookie
   -------------------------------------------------------------------------- */

.cookie {
  position: fixed; left: 50%; bottom: 1rem; z-index: 150;
  width: min(46rem, calc(100vw - 2rem)); transform: translateX(-50%);
  background: var(--surf); border: 1px solid var(--line-forte); border-top: 5px solid var(--pri);
  border-radius: var(--r-l); padding: var(--sp-4); box-shadow: var(--ombra-3);
}
.cookie__titolo {
  margin-bottom: var(--sp-2); font-family: var(--f-titoli); font-size: 1.05rem;
  font-weight: 600; letter-spacing: -0.02em;
}
.cookie__testo { color: var(--mut); font-size: 0.94rem; margin-bottom: var(--sp-3); }
.cookie__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; }
.cookie__azioni .btn { flex: 1 1 9rem; }
.cookie__personalizza {
  min-height: 44px; padding: 0.5rem 0.9rem; background: transparent; border: 0;
  color: var(--pri-scuro); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.cookie__personalizza:hover { color: var(--acc-scuro); }
.cookie__dettaglio {
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line-forte);
  font-size: 0.88rem; color: var(--mut);
}
.cookie__dettaglio table { width: 100%; border-collapse: collapse; margin-bottom: var(--sp-2); }
.cookie__dettaglio th, .cookie__dettaglio td {
  padding: 0.45rem 0.5rem; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.cookie__dettaglio thead th { background: var(--pri-carta); color: var(--pri-scuro); font-size: 0.8rem; }

/* --------------------------------------------------------------------------
   20. Accessibilita, movimento ridotto e stampa
   -------------------------------------------------------------------------- */

:focus-visible { outline: 3px solid var(--acc-scuro); outline-offset: 3px; border-radius: var(--r-s); }
.btn:focus-visible, .faq__domanda:focus-visible, .piede__cookie:focus-visible {
  outline: 3px solid var(--pri-scuro); outline-offset: 3px;
}
::selection { background: var(--acc-velo); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .passo:hover, .funzione:hover, .articolo-card:hover, .ecosistema__link:hover { transform: none; }
}
@media print {
  .testata, .menu-mobile, .cookie, .piede__cookie, .hero__azioni { display: none !important; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .prosa { max-width: none; }
}

/* --------------------------------------------------------------------------
   21. Adattamento agli schermi
   Da 320 px a 1440 px, senza mai produrre scorrimento orizzontale.
   -------------------------------------------------------------------------- */

/* Tablet in verticale */
@media (min-width: 640px) {
  .passi { grid-template-columns: repeat(2, 1fr); }
  .cookie__azioni .btn { flex: 0 0 auto; min-width: 10rem; }
}

/* Tablet in orizzontale e portatili piccoli */
@media (min-width: 900px) {
  .hero__interno { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-6); }
  .problema__interno { grid-template-columns: 1.25fr 0.75fr; }
  .contatto__interno { grid-template-columns: 0.85fr 1.15fr; }
  .articolo { padding-block: var(--sp-6); }

  /* La fila dei passi diventa una passerella orizzontale */
  .passi { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .passi::before {
    content: ""; position: absolute; left: 8%; right: 8%; top: 3.4rem; height: 2px; z-index: 0;
    background-image: linear-gradient(90deg, var(--pri-chiaro) 55%, transparent 0);
    background-size: 12px 2px;
  }
  .passo { z-index: 1; grid-template-columns: 1fr; text-align: left; }
  .passo__nodo { grid-row: auto; margin-bottom: var(--sp-2); }
}

/* Schermi larghi: compare la navigazione orizzontale */
@media (min-width: 1040px) {
  .nav { display: flex; }
  .apri-menu { display: none; }
  .menu-mobile, .menu-mobile.is-aperto { display: none; }
  .griglia-funzioni { grid-template-columns: repeat(4, 1fr); }
  .vantaggi { grid-template-columns: repeat(2, 1fr); }
  .piede__griglia { grid-template-columns: 1.3fr 0.85fr 1.2fr 0.9fr 1.15fr; }
}

/* Schermi molto stretti: si riducono le spaziature, non la leggibilita */
@media (max-width: 380px) {
  .btn { padding-inline: 1rem; font-size: 0.95rem; }
  .scheda, .cornice, .modulo, .piano, .prova, .sintomi { padding: var(--sp-3); }
  .percorso__testata, .percorso__quota, .percorso__tappe, .percorso__piede { padding-inline: var(--sp-3); }
  .percorso__barra { margin-inline: var(--sp-3); }
}