/* =====================================================================
   ConsensoInStudio, foglio di stile unico del sito
   Direzione artistica: carta e firma. Verde salvia e bianco, fogli
   sovrapposti, tratti di firma disegnati in CSS, contorni di scudo.
   Titoli in Alegreya, testo in Alegreya Sans.
   Tema chiaro su tutte le pagine e su tutti i componenti.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Azzeramento moderno
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, fieldset { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; }
table { border-collapse: collapse; width: 100%; }
a { color: inherit; }

/* ---------------------------------------------------------------------
   2. Variabili: palette del sito e valori derivati
   --------------------------------------------------------------------- */
:root {
  /* palette di base */
  --bg: #F6F9F5; --surf: #FFFFFF; --ink: #1B2620; --mut: #5A6B60; --pri: #3E7D5A; --acc: #2F6FBF;
  --line: #E0E8DE;

  /* derivate: stati e veli */
  --pri-scuro: #2F6446; --pri-chiaro: #6FA98A; --pri-velo: #E8F1EA; --pri-velo-forte: #D6E7DB;
  --acc-scuro: #245699; --acc-velo: #E6EFFA; --carta: #FBFDFA; --carta-tinta: #EFF4EE;
  --line-forte: #C8D6C6; --line-tratteggio: #BFD0C2;

  /* raggi: forme di carta, mai a pillola */
  --raggio-s: 4px; --raggio: 8px; --raggio-m: 12px; --raggio-l: 18px;

  /* ombre: fogli appoggiati sul piano */
  --ombra-1: 0 1px 2px rgba(27, 38, 32, .06), 0 6px 16px rgba(27, 38, 32, .05);
  --ombra-2: 0 2px 4px rgba(27, 38, 32, .07), 0 14px 34px rgba(27, 38, 32, .08);
  --ombra-3: 0 4px 8px rgba(27, 38, 32, .08), 0 26px 60px rgba(27, 38, 32, .12);
  --ombra-foglio: 5px 5px 0 -1px var(--surf), 5px 5px 0 0 var(--line);
  --ombra-foglio-doppia: 5px 5px 0 -1px var(--surf), 5px 5px 0 0 var(--line), 10px 10px 0 -1px var(--surf), 10px 10px 0 0 var(--line);

  /* spaziature */
  --sp-1: .375rem; --sp-2: .75rem; --sp-3: 1.125rem; --sp-4: 1.75rem; --sp-5: 2.5rem;
  --sp-6: 3.5rem; --sp-7: 5rem;

  /* tipografia */
  --font-titoli: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-testo: "Alegreya Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --misura: 66ch;

  /* scala armonica fluida, rapporto vicino alla quarta minore */
  --t-xs: clamp(.78rem, .76rem + .1vw, .84rem); --t-s: clamp(.9rem, .87rem + .15vw, .97rem);
  --t-base: clamp(1.03rem, 1rem + .22vw, 1.14rem); --t-m: clamp(1.16rem, 1.1rem + .32vw, 1.34rem);
  --t-l: clamp(1.34rem, 1.24rem + .5vw, 1.64rem); --t-xl: clamp(1.56rem, 1.38rem + .82vw, 2.1rem);
  --t-2xl: clamp(1.86rem, 1.56rem + 1.3vw, 2.72rem);
  --t-3xl: clamp(2.2rem, 1.72rem + 2.1vw, 3.5rem);

  /* impaginazione */
  --largh: 1180px; --gutter: clamp(1.1rem, .6rem + 2.2vw, 2.5rem); --transizione: 180ms ease;
}

/* ---------------------------------------------------------------------
   3. Fondo del sito: carta rigata in filigrana
   --------------------------------------------------------------------- */
body {
  background-color: var(--bg);
  background-image: radial-gradient(1200px 520px at 78% -10%, rgba(62, 125, 90, .10), transparent 62%), radial-gradient(800px 420px at 4% 6%, rgba(47, 111, 191, .06), transparent 60%), repeating-linear-gradient(to bottom, transparent 0 33px, rgba(62, 125, 90, .055) 33px 34px);
  background-attachment: scroll; color: var(--ink); font-family: var(--font-testo);
  font-size: var(--t-base); font-weight: 400; line-height: 1.68; min-height: 100%;
  overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------
   4. Tipografia di base
   --------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-titoli); font-weight: 700; line-height: 1.18; letter-spacing: -.005em;
  color: var(--ink); text-wrap: balance;
}
h1 { font-size: var(--t-3xl); font-weight: 800; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
p { text-wrap: pretty; }
strong { font-weight: 700; }
em { font-style: italic; }
a {
  color: var(--pri-scuro); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--transizione), text-decoration-color var(--transizione);
}
a:hover { color: var(--acc-scuro); text-decoration-color: var(--acc); }
small { font-size: var(--t-s); }
::selection { background: var(--pri-velo-forte); color: var(--ink); }

/* ---------------------------------------------------------------------
   5. Impaginazione: contenitori, sezioni, griglie
   --------------------------------------------------------------------- */
.contenitore { width: 100%; max-width: var(--largh); margin-inline: auto; padding-inline: var(--gutter); }
.contenitore-stretto { width: 100%; max-width: 46rem; margin-inline: auto; padding-inline: var(--gutter); }
.sezione { position: relative; padding-block: clamp(2.75rem, 1.6rem + 4.4vw, 5.25rem); }

/* fascia leggermente tinta, con filetto verde in alto: separa i blocchi della home */
.sezione--tinta {
  background: linear-gradient(180deg, var(--carta-tinta), var(--bg));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* fascia bianca a foglio pieno */
.sezione--carta {
  background: var(--surf); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

/* aggiunge la rigatura da foglio protocollo, in filigrana dentro la sezione */
.sezione--righe::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(62, 125, 90, .07) 27px 28px);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.sezione > .contenitore, .sezione > .contenitore-stretto { position: relative; z-index: 1; }
.griglia-2, .griglia-3, .griglia-4 { display: grid; gap: clamp(1rem, .6rem + 1.4vw, 1.75rem); }
.centrato { text-align: center; }
.testo-tenue { color: var(--mut); }
.nascosto-vista {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------
   6. Decorazioni proprie del sito, tutte in CSS puro
   fogli sovrapposti, tratto di firma, contorno di scudo
   --------------------------------------------------------------------- */

/* foglio: superficie bianca con il bordo di una risma sotto */
.foglio {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); box-shadow: var(--ombra-foglio);
}
.foglio--impilato { box-shadow: var(--ombra-foglio-doppia); }

/* pannello: foglio con imbottitura già pronta */
.pannello {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); padding: clamp(1.25rem, .9rem + 1.2vw, 2rem);
  box-shadow: var(--ombra-1);
}

/* scheda: pannello che si solleva al passaggio del mouse */
.scheda {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); padding: clamp(1.15rem, .85rem + 1vw, 1.65rem);
  box-shadow: var(--ombra-1);
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}
.scheda:hover { transform: translateY(-3px); border-color: var(--line-forte); box-shadow: var(--ombra-2); }

/* tratto di firma: due archi disegnati con i bordi arrotondati */
.firma { position: relative; display: block; width: 148px; height: 42px; color: var(--pri); }
.firma::before, .firma::after {
  content: ""; position: absolute; border-bottom: 2.5px solid currentColor;
  border-left: 2.5px solid transparent;
}
.firma::before {
  left: 2px; top: 6px; width: 92px; height: 26px; border-radius: 0 0 78% 22% / 0 0 100% 40%;
  transform: rotate(-5deg);
}
.firma::after {
  left: 58px; top: 14px; width: 84px; height: 18px; border-radius: 60% 0 40% 0 / 100% 0 60% 0;
  transform: rotate(4deg); opacity: .82;
}

/* contorno di scudo: sagoma piena con anello interno bianco */
.scudo {
  position: relative; display: inline-grid; place-items: center; width: 2.6rem; height: 2.9rem;
  background: var(--pri); clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%);
  color: var(--pri); flex: 0 0 auto;
}
.scudo::before {
  content: ""; position: absolute; inset: 2px; background: var(--surf);
  clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%);
}
.scudo::after {
  content: "\2713"; position: relative; font-size: 1.05rem; font-weight: 700; line-height: 1;
  color: var(--pri);
}
.scudo--blu { background: var(--acc); color: var(--acc); }
.scudo--blu::after { color: var(--acc); }

/* timbro: etichetta rettangolare con angolo tagliato, come un visto d ufficio */
.timbro {
  display: inline-block; padding: .2rem .6rem; font-family: var(--font-testo);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--pri-scuro); background: var(--pri-velo); border: 1px solid var(--line-forte);
  border-radius: var(--raggio-s);
}
.timbro--blu { color: var(--acc-scuro); background: var(--acc-velo); border-color: #C9DBF2; }

/* filetto tratteggiato di separazione */
.filetto { height: 1px; border: 0; border-top: 1px dashed var(--line-tratteggio); margin-block: var(--sp-5); }

/* ---------------------------------------------------------------------
   7. Collegamento di salto e stati di fuoco
   --------------------------------------------------------------------- */
.salta-al-contenuto {
  position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: 200;
  background: var(--pri); color: #FFFFFF; padding: .7rem 1.15rem;
  border-radius: 0 0 var(--raggio) var(--raggio); text-decoration: none; font-weight: 700;
  transition: top var(--transizione);
}
.salta-al-contenuto:focus { top: 0; color: #FFFFFF; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: var(--raggio-s); }

/* ---------------------------------------------------------------------
   8. Intestazione e navigazione
   --------------------------------------------------------------------- */
.intestazione {
  position: sticky; top: 0; z-index: 90; background: rgba(251, 253, 250, .92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.intestazione::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, var(--pri) 0 28%, var(--acc) 28% 40%, transparent 40%);
  opacity: .55;
}
.intestazione__barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: 4.25rem;
}
.marchio { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }

/* segno del marchio: foglio bianco con angolo piegato e tratto di firma */
.marchio__segno {
  position: relative; width: 2.1rem; height: 2.55rem; background: var(--surf);
  border: 1.5px solid var(--pri); border-radius: 3px 10px 3px 3px; flex: 0 0 auto;
}
.marchio__segno::before {
  content: ""; position: absolute; right: -1px; top: -1px; width: .7rem; height: .7rem;
  background: var(--pri-velo); border-left: 1.5px solid var(--pri);
  border-bottom: 1.5px solid var(--pri); border-radius: 0 0 0 3px;
}
.marchio__segno::after {
  content: ""; position: absolute; left: 22%; bottom: 26%; width: 58%; height: 34%;
  border-bottom: 2px solid var(--acc); border-radius: 0 0 70% 20% / 0 0 100% 40%;
  transform: rotate(-6deg);
}
.marchio__nome {
  font-family: var(--font-titoli); font-size: 1.28rem; font-weight: 800; letter-spacing: -.01em;
  line-height: 1.1;
}
.marchio__nome em { font-style: normal; color: var(--pri); }
.nav-principale { display: none; }
.nav-principale__lista { display: flex; align-items: center; gap: .1rem; }
.nav-principale__link {
  display: inline-block; padding: .5rem .62rem; border-radius: var(--raggio-s);
  font-size: var(--t-s); font-weight: 500; color: var(--mut); text-decoration: none;
  position: relative; transition: color var(--transizione), background var(--transizione);
}
.nav-principale__link:hover { color: var(--pri-scuro); background: var(--pri-velo); }
.nav-principale__link.attivo, .nav-principale__link[aria-current="page"] {
  color: var(--ink); font-weight: 700;
}
.nav-principale__link.attivo::after, .nav-principale__link[aria-current="page"]::after {
  content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .18rem; height: 2px;
  background: var(--acc); border-radius: 0 0 60% 30% / 0 0 100% 60%;
}
.intestazione__azioni { display: flex; align-items: center; gap: .6rem; }
.apri-menu {
  display: inline-grid; place-content: center; gap: 5px; width: 2.9rem; height: 2.9rem;
  border: 1px solid var(--line-forte); border-radius: var(--raggio); background: var(--surf);
  cursor: pointer;
}
.apri-menu span {
  display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform var(--transizione), opacity var(--transizione);
}
.apri-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.apri-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.apri-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* pannello mobile a scomparsa */
.menu-mobile {
  position: fixed; top: 0; right: 0; z-index: 120; width: min(88vw, 22rem); height: 100dvh;
  padding: 1.25rem; background: var(--surf); border-left: 1px solid var(--line);
  box-shadow: -18px 0 44px rgba(27, 38, 32, .14); transform: translateX(102%);
  transition: transform 240ms ease, visibility 240ms ease; overflow-y: auto; display: flex;
  flex-direction: column; gap: var(--sp-3);
  /* a pannello chiuso resta fuori anche dall'ordine di tabulazione */
  visibility: hidden;
}
.menu-mobile.aperto { transform: translateX(0); visibility: visible; }
.menu-mobile__testata {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--line-tratteggio);
}
.menu-mobile__chiudi {
  width: 2.6rem; height: 2.6rem; border: 1px solid var(--line-forte); border-radius: var(--raggio);
  font-size: 1.5rem; line-height: 1; color: var(--ink); cursor: pointer;
}
.menu-mobile__lista { display: flex; flex-direction: column; gap: .15rem; }
.menu-mobile__link {
  display: block; padding: .72rem .55rem; border-radius: var(--raggio-s);
  border-left: 3px solid transparent; font-size: var(--t-m); font-family: var(--font-titoli);
  font-weight: 500; color: var(--ink); text-decoration: none;
  transition: border-color var(--transizione), background var(--transizione), padding-left var(--transizione);
}
.menu-mobile__link:hover, .menu-mobile__link[aria-current="page"] {
  background: var(--pri-velo); border-left-color: var(--pri); padding-left: .85rem;
}
.velo {
  position: fixed; inset: 0; z-index: 110; background: rgba(27, 38, 32, .42); opacity: 0;
  transition: opacity 200ms ease;
}
.velo.aperto { opacity: 1; }
.blocco-scroll { overflow: hidden; }

/* ---------------------------------------------------------------------
   9. Comandi: bottoni con ombra di carta
   --------------------------------------------------------------------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .72rem 1.35rem; border: 1.5px solid transparent;
  border-radius: var(--raggio); font-family: var(--font-testo); font-size: var(--t-s);
  font-weight: 700; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: transform var(--transizione), box-shadow var(--transizione), background var(--transizione), color var(--transizione), border-color var(--transizione);
}
.bottone--primario {
  background: var(--pri); border-color: var(--pri-scuro); color: #FFFFFF;
  box-shadow: 3px 3px 0 0 var(--pri-velo-forte);
}
.bottone--primario:hover {
  background: var(--pri-scuro); color: #FFFFFF; transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--pri-velo-forte);
}
.bottone--primario:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--pri-velo-forte); }
.bottone--secondario {
  background: var(--surf); border-color: var(--line-forte); color: var(--pri-scuro);
  box-shadow: 3px 3px 0 0 var(--line);
}
.bottone--secondario:hover {
  border-color: var(--pri); color: var(--pri-scuro); transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--pri-velo);
}
.bottone--blu {
  background: var(--acc); border-color: var(--acc-scuro); color: #FFFFFF;
  box-shadow: 3px 3px 0 0 var(--acc-velo);
}
.bottone--blu:hover { background: var(--acc-scuro); color: #FFFFFF; transform: translate(-1px, -1px); }
.bottone--largo { width: 100%; }
.bottone--piccolo { min-height: 2.5rem; padding: .5rem .9rem; font-size: var(--t-xs); }
.bottone-testo {
  display: inline-block; padding: .35rem 0; font-size: var(--t-s); font-weight: 700;
  color: var(--acc-scuro); background: none; border: 0; border-bottom: 2px solid var(--acc-velo);
  cursor: pointer; text-decoration: none;
  transition: border-color var(--transizione), color var(--transizione);
}
.bottone-testo:hover { border-bottom-color: var(--acc); color: var(--acc-scuro); }

/* ---------------------------------------------------------------------
   10. Testate di sezione e occhielli
   --------------------------------------------------------------------- */
.occhiello {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .55rem;
  background: var(--surf); border: 1px solid var(--line-forte); border-left: 3px solid var(--pri);
  border-radius: var(--raggio-s); font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--pri-scuro);
}
.occhiello::before {
  content: ""; width: .55rem; height: .7rem; background: var(--pri);
  clip-path: polygon(50% 0%, 100% 18%, 100% 58%, 50% 100%, 0% 58%, 0% 18%);
}
.testata-sezione {
  max-width: 48rem; margin-bottom: clamp(1.5rem, 1rem + 1.6vw, 2.75rem); display: grid;
  gap: var(--sp-2); justify-items: start;
}
.testata-sezione--centrata { margin-inline: auto; justify-items: center; text-align: center; }
.testata-sezione__titolo { font-size: var(--t-2xl); position: relative; }
.testata-sezione__testo { color: var(--mut); font-size: var(--t-m); max-width: 42rem; }

/* ---------------------------------------------------------------------
   11. Hero e modulo di consenso dimostrativo
   --------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; right: -8%; top: -14%; width: 32rem; height: 32rem;
  background: radial-gradient(circle at 50% 50%, rgba(62, 125, 90, .12), transparent 62%);
  pointer-events: none;
}
.hero__griglia { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3.25rem); align-items: center; }
.hero__testo { display: grid; gap: var(--sp-3); justify-items: start; }
.hero__titolo { font-size: var(--t-3xl); font-weight: 800; line-height: 1.1; }
.hero__titolo em {
  font-style: normal; color: var(--pri-scuro);
  background-image: linear-gradient(180deg, transparent 62%, var(--pri-velo-forte) 62%);
  padding-inline: .1em;
}
.hero__sottotitolo { font-size: var(--t-m); color: var(--mut); max-width: 36rem; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .25rem; }
.hero__punti, .elenco-spunte { display: grid; gap: .5rem; padding: 0; margin: 0; list-style: none; }
.hero__punti li, .elenco-spunte li {
  position: relative; padding-left: 1.75rem; font-size: var(--t-s); color: var(--ink);
}
.hero__punti li::before, .elenco-spunte li::before {
  content: "\2713"; position: absolute; left: 0; top: .05em; width: 1.2rem; height: 1.35rem;
  display: grid; place-items: center; font-size: .68rem; font-weight: 700; color: #FFFFFF;
  background: var(--pri); clip-path: polygon(50% 0%, 100% 18%, 100% 58%, 50% 100%, 0% 58%, 0% 18%);
}
.hero__figura {
  border-radius: var(--raggio-l); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--ombra-2);
}

/* elemento visivo firma del sito: il modulo di consenso sul tablet */
.modulo-consenso {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); padding: clamp(1.15rem, .9rem + 1vw, 1.75rem);
  box-shadow: var(--ombra-foglio-doppia), var(--ombra-2);
}

/* la rigatura interna del foglio */
.modulo-consenso::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--raggio-m);
  background-image: repeating-linear-gradient(to bottom, transparent 0 25px, rgba(62, 125, 90, .06) 25px 26px);
  pointer-events: none;
}
.modulo-consenso > * { position: relative; }
.modulo-consenso__testata {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2);
  padding-bottom: var(--sp-2); border-bottom: 2px solid var(--pri-velo-forte);
}
.modulo-consenso__testata h2, .modulo-consenso__testata p:first-child {
  font-family: var(--font-titoli); font-size: var(--t-m); font-weight: 700; line-height: 1.2;
}
.modulo-consenso__versione { font-size: var(--t-xs); color: var(--mut); letter-spacing: .04em; }
.modulo-consenso__righe { display: grid; gap: .1rem; margin-block: var(--sp-2); }
.riga-modulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  padding: .5rem 0; border-bottom: 1px dashed var(--line-tratteggio);
}
.riga-modulo__etichetta {
  font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--mut);
}
.riga-modulo__valore {
  font-family: var(--font-titoli); font-weight: 700; font-size: var(--t-s); color: var(--ink);
  text-align: right;
}
.modulo-consenso__firma {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-2);
  padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: 1px solid var(--line);
}
.modulo-consenso__firma .firma { margin-bottom: -.4rem; }
.modulo-consenso__nota {
  display: flex; align-items: center; gap: .7rem; margin-top: var(--sp-3); padding: .7rem .9rem;
  background: var(--pri-velo); border: 1px solid var(--line-forte); border-radius: var(--raggio);
  font-size: var(--t-s); color: var(--pri-scuro);
}

/* ---------------------------------------------------------------------
   12. Il problema e i sintomi
   --------------------------------------------------------------------- */
.problema__griglia { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.problema__racconto { display: grid; gap: var(--sp-3); max-width: var(--misura); }
.problema__racconto p { color: var(--mut); }
.problema__racconto p:first-child { font-size: var(--t-m); color: var(--ink); }
.problema__racconto p:first-child::first-letter {
  float: left; font-family: var(--font-titoli); font-size: 3.1em; font-weight: 800;
  line-height: .82; padding: .06em .12em 0 0; color: var(--pri);
}
.sintomi {
  align-self: start; background: var(--surf); border: 1px solid var(--line);
  border-left: 4px solid var(--acc);
  border-radius: var(--raggio) var(--raggio-m) var(--raggio-m) var(--raggio);
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); box-shadow: var(--ombra-1);
}
.sintomi__titolo { font-size: var(--t-m); margin-bottom: var(--sp-2); }
.sintomi__lista { display: grid; gap: .7rem; }
.sintomi__lista li { position: relative; padding-left: 1.6rem; font-size: var(--t-s); color: var(--mut); }
.sintomi__lista li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: .8rem; height: .8rem;
  border: 1.5px solid var(--acc); border-radius: 2px;
}
.sintomi__lista li::after {
  content: ""; position: absolute; left: .18rem; top: .42em; width: .5rem; height: .28rem;
  border-left: 1.5px solid var(--acc); border-bottom: 1.5px solid var(--acc);
  transform: rotate(-45deg); opacity: .35;
}

/* ---------------------------------------------------------------------
   13. La soluzione e i tre passi
   --------------------------------------------------------------------- */
.soluzione__testo {
  display: grid; gap: var(--sp-3); max-width: var(--misura); color: var(--mut);
  font-size: var(--t-base);
}
.passi {
  display: grid; gap: clamp(1rem, .7rem + 1.4vw, 1.75rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); counter-reset: passo;
}
.passo {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); padding: clamp(1.15rem, .9rem + 1vw, 1.6rem);
  box-shadow: var(--ombra-foglio);
  transition: transform var(--transizione), box-shadow var(--transizione);
}
.passo:hover { transform: translateY(-3px); box-shadow: var(--ombra-foglio-doppia); }
.passo__numero {
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.9rem;
  margin-bottom: var(--sp-2); background: linear-gradient(160deg, var(--pri), var(--pri-scuro));
  clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%); color: #FFFFFF;
  font-family: var(--font-titoli); font-size: 1.2rem; font-weight: 800;
}
.passo__titolo { font-size: var(--t-l); margin-bottom: .4rem; }
.passo__testo { color: var(--mut); font-size: var(--t-s); }

/* ---------------------------------------------------------------------
   14. Funzionalità e vantaggi
   --------------------------------------------------------------------- */
.griglia-funzioni { display: grid; gap: clamp(1rem, .7rem + 1.2vw, 1.5rem); }
.scheda-funzione {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); padding: clamp(1.15rem, .9rem + 1vw, 1.55rem);
  box-shadow: var(--ombra-1);
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}

/* angolo di foglio piegato in alto a destra */
.scheda-funzione::after {
  content: ""; position: absolute; top: 0; right: 0; width: 1.5rem; height: 1.5rem;
  background: linear-gradient(225deg, var(--carta-tinta) 50%, transparent 50%);
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0 var(--raggio-m) 0 var(--raggio-s);
  transition: width var(--transizione), height var(--transizione);
}
.scheda-funzione:hover {
  transform: translateY(-4px); border-color: var(--pri-chiaro); box-shadow: var(--ombra-2);
}
.scheda-funzione:hover::after { width: 2.1rem; height: 2.1rem; }
.scheda-funzione__icona {
  display: inline-grid; place-items: center; width: 2.6rem; height: 2.9rem;
  margin-bottom: var(--sp-2); background: var(--pri-velo); border: 1.5px solid var(--pri);
  clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%); color: var(--pri-scuro);
  font-size: 1rem; font-weight: 700;
}
.scheda-funzione__titolo { font-size: var(--t-m); margin-bottom: .35rem; }
.scheda-funzione__testo { color: var(--mut); font-size: var(--t-s); }
.griglia-vantaggi { display: grid; gap: clamp(1rem, .7rem + 1.2vw, 1.5rem); }
.vantaggio {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m);
  padding: clamp(1.3rem, 1rem + 1vw, 1.7rem) clamp(1.15rem, .9rem + 1vw, 1.55rem) clamp(1.15rem, .9rem + 1vw, 1.55rem);
  box-shadow: var(--ombra-1); overflow: hidden;
}
.vantaggio::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: linear-gradient(90deg, var(--pri) 0 62%, var(--acc) 62% 100%);
}
.vantaggio__titolo { font-size: var(--t-m); margin-bottom: .4rem; }
.vantaggio__testo { color: var(--mut); font-size: var(--t-s); }

/* ---------------------------------------------------------------------
   15. Testimonianze
   --------------------------------------------------------------------- */
.testimonianze { display: grid; gap: clamp(1rem, .7rem + 1.4vw, 1.6rem); }
.testimonianza {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  box-shadow: var(--ombra-foglio);
}
.testimonianza::before {
  content: "\201C"; position: absolute; top: .1rem; right: 1rem; font-family: var(--font-titoli);
  font-size: 4.2rem; line-height: 1; color: var(--pri-velo-forte);
}
.testimonianza__testo {
  position: relative; font-family: var(--font-titoli); font-size: var(--t-m); font-style: italic;
  line-height: 1.5; color: var(--ink);
}
.testimonianza__firma {
  display: flex; align-items: center; gap: .7rem; margin-top: var(--sp-3); padding-top: var(--sp-2);
  border-top: 1px dashed var(--line-tratteggio);
}
.testimonianza__firma .firma { width: 68px; height: 26px; flex: 0 0 auto; }
.testimonianza__firma .firma::before { width: 44px; height: 16px; top: 4px; }
.testimonianza__firma .firma::after { left: 28px; width: 38px; height: 11px; top: 9px; }
.testimonianza__nome { font-weight: 700; font-size: var(--t-s); }
.testimonianza__ruolo { color: var(--mut); font-size: var(--t-xs); }
.nota-scenari {
  margin-top: var(--sp-4); padding: .8rem 1rem; border: 1px dashed var(--line-tratteggio);
  border-radius: var(--raggio); background: var(--carta); color: var(--mut); font-size: var(--t-s);
  text-align: center;
}

/* ---------------------------------------------------------------------
   16. Prezzi
   --------------------------------------------------------------------- */
.piani { display: grid; gap: clamp(1rem, .7rem + 1.4vw, 1.6rem); align-items: start; }
.piano {
  position: relative; display: flex; flex-direction: column; gap: .6rem; background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--raggio-m);
  padding: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); box-shadow: var(--ombra-foglio);
}
.piano--evidenza { border: 2px solid var(--pri); box-shadow: var(--ombra-foglio-doppia), var(--ombra-2); }
.piano--evidenza::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, var(--pri), var(--pri-chiaro), var(--acc));
  border-radius: var(--raggio-m) var(--raggio-m) 0 0;
}
.piano__etichetta {
  position: absolute; top: -.85rem; left: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  padding: .22rem .7rem; background: var(--pri); color: #FFFFFF; border-radius: var(--raggio-s);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.piano__nome {
  font-family: var(--font-titoli); font-size: var(--t-l); font-weight: 700; color: var(--pri-scuro);
}
.piano__prezzo {
  font-family: var(--font-titoli); font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem); font-weight: 800;
  line-height: 1; color: var(--ink);
}
.piano__prezzo span {
  display: block; font-family: var(--font-testo); font-size: var(--t-xs); font-weight: 400;
  letter-spacing: .04em; color: var(--mut); margin-top: .3rem;
}
.piano__descrizione {
  color: var(--mut); font-size: var(--t-s); padding-bottom: .6rem;
  border-bottom: 1px dashed var(--line-tratteggio);
}
.piano__elenco { display: grid; gap: .55rem; margin-block: .3rem; }
.piano__elenco li { position: relative; padding-left: 1.6rem; font-size: var(--t-s); color: var(--ink); }
.piano__elenco li::before {
  content: "\2713"; position: absolute; left: 0; top: 0; width: 1.1rem; height: 1.25rem;
  display: grid; place-items: center; font-size: .62rem; font-weight: 700; color: var(--pri-scuro);
  background: var(--pri-velo);
  clip-path: polygon(50% 0%, 100% 18%, 100% 58%, 50% 100%, 0% 58%, 0% 18%);
}
.piano .bottone { margin-top: auto; }
.nota-prezzi {
  margin-top: var(--sp-4); color: var(--mut); font-size: var(--t-s); text-align: center;
  max-width: 46rem; margin-inline: auto;
}

/* ---------------------------------------------------------------------
   17. Domande frequenti a fisarmonica
   --------------------------------------------------------------------- */
.faq { max-width: 48rem; margin-inline: auto; display: grid; gap: .7rem; }
.faq__voce {
  background: var(--surf); border: 1px solid var(--line); border-left: 3px solid var(--line-forte);
  border-radius: var(--raggio);
  transition: border-color var(--transizione), box-shadow var(--transizione);
}
.faq__voce.aperta { border-left-color: var(--pri); box-shadow: var(--ombra-1); }
.faq__domanda {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%;
  min-height: 3.25rem; padding: .9rem 1.1rem; text-align: left; font-family: var(--font-titoli);
  font-size: var(--t-m); font-weight: 700; color: var(--ink); cursor: pointer;
}
.faq__domanda:hover { color: var(--pri-scuro); }
.faq__icona {
  position: relative; flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border: 1.5px solid var(--pri);
  border-radius: var(--raggio-s);
  transition: transform var(--transizione), background var(--transizione);
}
.faq__icona::before, .faq__icona::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--pri-scuro);
  transform: translate(-50%, -50%);
}
.faq__icona::before { width: .7rem; height: 2px; }
.faq__icona::after { width: 2px; height: .7rem; transition: opacity var(--transizione); }
.faq__voce.aperta .faq__icona { background: var(--pri-velo); transform: rotate(180deg); }
.faq__voce.aperta .faq__icona::after { opacity: 0; }
.faq__risposta { padding: 0 1.1rem 1.1rem; color: var(--mut); font-size: var(--t-s); max-width: var(--misura); }
.faq__risposta p + p { margin-top: var(--sp-2); }

/* ---------------------------------------------------------------------
   18. Modulo di contatto
   --------------------------------------------------------------------- */
.contatto__griglia { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); align-items: start; }
.modulo {
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--raggio-m);
  padding: clamp(1.25rem, .95rem + 1.2vw, 2rem); box-shadow: var(--ombra-foglio-doppia);
}
.modulo__intro { color: var(--mut); font-size: var(--t-s); margin-bottom: var(--sp-3); }
.campo { display: grid; gap: .35rem; margin-bottom: var(--sp-3); }
.campo label, .campo__etichetta {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mut);
}
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 2.9rem; padding: .7rem .85rem; background: var(--carta);
  border: 1.5px solid var(--line-forte); border-radius: var(--raggio); color: var(--ink);
  font-size: var(--t-s);
  transition: border-color var(--transizione), box-shadow var(--transizione), background var(--transizione);
}
.campo textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--pri-chiaro); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; background: var(--surf); border-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-velo);
}
.campo input::placeholder, .campo textarea::placeholder { color: #8B9A90; }
.campo-doppio { display: grid; gap: 0 var(--sp-3); }
.campo__aiuto { font-size: var(--t-xs); color: var(--mut); text-transform: none; letter-spacing: 0; }

/* menu a tendina con la freccia disegnata in CSS */
.campo--scelta { position: relative; }
.campo--scelta select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; }
.campo--scelta::after {
  content: ""; position: absolute; right: 1.05rem; bottom: 1.2rem; width: .55rem; height: .55rem;
  border-right: 2px solid var(--pri-scuro); border-bottom: 2px solid var(--pri-scuro);
  transform: rotate(45deg); pointer-events: none;
}
.modulo__nota { margin-top: var(--sp-2); font-size: var(--t-xs); color: var(--mut); }
.modulo__alternativa {
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line-tratteggio);
  font-size: var(--t-s); color: var(--mut);
}

/* campo trappola per i robot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------
   19. Schede articolo e griglia del blog
   --------------------------------------------------------------------- */
.griglia-articoli { display: grid; gap: clamp(1rem, .7rem + 1.4vw, 1.6rem); }
.scheda-articolo {
  display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); overflow: hidden; box-shadow: var(--ombra-foglio);
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}
.scheda-articolo:hover {
  transform: translateY(-4px); border-color: var(--pri-chiaro);
  box-shadow: var(--ombra-foglio-doppia), var(--ombra-2);
}
.scheda-articolo__figura {
  margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line);
  background: var(--carta-tinta);
}
.scheda-articolo__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.scheda-articolo:hover .scheda-articolo__figura img { transform: scale(1.04); }
.scheda-articolo__corpo {
  display: flex; flex-direction: column; gap: .5rem; padding: clamp(1rem, .85rem + .6vw, 1.35rem);
  flex: 1 1 auto;
}
.scheda-articolo__data {
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--pri-scuro);
}
.scheda-articolo__titolo { font-size: var(--t-m); line-height: 1.25; }
.scheda-articolo__titolo a { text-decoration: none; color: var(--ink); }
.scheda-articolo__titolo a:hover { color: var(--pri-scuro); text-decoration: underline; }
.scheda-articolo__testo { color: var(--mut); font-size: var(--t-s); }
.scheda-articolo__link {
  margin-top: auto; padding-top: .5rem; font-size: var(--t-s); font-weight: 700;
  color: var(--acc-scuro); text-decoration: none;
}
.scheda-articolo__link::after { content: " \2192"; }
.scheda-articolo__link:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   20. Pagina articolo: briciole, dati, immagine, prosa
   --------------------------------------------------------------------- */
.briciole { font-size: var(--t-xs); color: var(--mut); margin-bottom: var(--sp-2); }
.briciole ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; }
.briciole li + li::before { content: "\203A"; margin-right: .35rem; color: var(--line-forte); }
.briciole a { color: var(--mut); text-decoration: none; }
.briciole a:hover { color: var(--pri-scuro); text-decoration: underline; }
.meta-articolo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-block: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--line-tratteggio);
  font-size: var(--t-s); color: var(--mut);
}
.meta-articolo a { color: var(--pri-scuro); }
.figura-evidenza {
  margin-block: var(--sp-4); border-radius: var(--raggio-l); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--ombra-2); background: var(--surf);
}
.figura-evidenza img { width: 100%; height: auto; }
.credito-foto {
  padding: .6rem .9rem; font-size: var(--t-xs); color: var(--mut); background: var(--carta);
  border-top: 1px solid var(--line);
}
.chapo {
  position: relative; margin-block: var(--sp-3); padding-left: 1.15rem;
  border-left: 4px solid var(--pri); font-family: var(--font-titoli); font-size: var(--t-l);
  font-style: italic; line-height: 1.45; color: var(--ink); max-width: var(--misura);
}

/* corpo redazionale: misura di lettura da 62 a 72 caratteri */
.prosa { max-width: var(--misura); font-size: var(--t-base); line-height: 1.75; color: var(--ink); }
.prosa > * + * { margin-top: var(--sp-3); }
.prosa h2 {
  font-size: var(--t-xl); margin-top: var(--sp-5); padding-top: var(--sp-2);
  border-top: 2px solid var(--pri-velo-forte); position: relative;
}
.prosa h2::before {
  content: ""; position: absolute; top: -2px; left: 0; width: 3.5rem; height: 2px;
  background: var(--pri);
}
.prosa h3 { font-size: var(--t-l); margin-top: var(--sp-4); color: var(--pri-scuro); }
.prosa p { color: var(--ink); }
.prosa a { color: var(--acc-scuro); text-decoration-color: var(--acc); }
.prosa a:hover { color: var(--pri-scuro); }
.prosa ul, .prosa ol { padding-left: 1.4rem; display: grid; gap: .5rem; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul li { position: relative; padding-left: 1.6rem; }
.prosa ul li::before {
  content: ""; position: absolute; left: .1rem; top: .55em; width: .55rem; height: .68rem;
  background: var(--pri); clip-path: polygon(50% 0%, 100% 18%, 100% 58%, 50% 100%, 0% 58%, 0% 18%);
}
.prosa ol { list-style: decimal; }
.prosa ol li::marker { color: var(--pri-scuro); font-weight: 700; }
.prosa blockquote {
  margin-inline: 0; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--carta-tinta); border-left: 4px solid var(--acc);
  border-radius: 0 var(--raggio) var(--raggio) 0; font-family: var(--font-titoli);
  font-style: italic; font-size: var(--t-m); color: var(--ink);
}
.prosa figure { margin: var(--sp-4) 0; }
.prosa figure img { border-radius: var(--raggio-m); border: 1px solid var(--line); }
.prosa figcaption, figcaption {
  margin-top: .5rem; font-size: var(--t-xs); color: var(--mut); font-style: italic;
}
.prosa code, code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: .9em;
  padding: .12em .38em; background: var(--pri-velo); border: 1px solid var(--line-forte);
  border-radius: var(--raggio-s); color: var(--pri-scuro);
}
.prosa table, .tabella {
  width: 100%; margin-block: var(--sp-3); font-size: var(--t-s); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--raggio); overflow: hidden;
}
.prosa caption, .tabella caption {
  caption-side: bottom; padding-top: .5rem; font-size: var(--t-xs); color: var(--mut);
  text-align: left;
}
.prosa th, .tabella th {
  text-align: left; padding: .7rem .85rem; background: var(--pri-velo); color: var(--pri-scuro);
  font-weight: 700; border-bottom: 1px solid var(--line-forte);
}
.prosa td, .tabella td { padding: .7rem .85rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prosa tbody tr:last-child td, .tabella tbody tr:last-child td { border-bottom: 0; }
.prosa tbody tr:nth-child(even), .tabella tbody tr:nth-child(even) { background: var(--carta); }
.tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--sp-3); }

/* sommario e riquadro dei punti chiave */
.sommario {
  margin-block: var(--sp-4); padding: var(--sp-3); background: var(--carta);
  border: 1px dashed var(--line-tratteggio); border-radius: var(--raggio); max-width: var(--misura);
}
.sommario__titolo {
  font-size: var(--t-s); letter-spacing: .08em; text-transform: uppercase; color: var(--mut);
  margin-bottom: .6rem;
}
.sommario ol { padding-left: 1.2rem; display: grid; gap: .35rem; font-size: var(--t-s); }
.riquadro {
  margin-block: var(--sp-4); padding: var(--sp-3); background: var(--surf);
  border: 1px solid var(--line); border-top: 4px solid var(--pri);
  border-radius: var(--raggio-s) var(--raggio-s) var(--raggio) var(--raggio);
  box-shadow: var(--ombra-foglio); max-width: var(--misura);
}
.riquadro__titolo { font-size: var(--t-m); margin-bottom: .6rem; }

/* ---------------------------------------------------------------------
   21. Blocco "Da leggere anche" e riquadro autore
   --------------------------------------------------------------------- */
.da-leggere {
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px dashed var(--line-tratteggio);
}
.da-leggere__titolo {
  display: flex; align-items: center; gap: .6rem; font-size: var(--t-xl);
  margin-bottom: var(--sp-3);
}
.da-leggere__titolo::before {
  content: ""; width: 1.1rem; height: 1.35rem; background: var(--acc);
  clip-path: polygon(50% 0%, 100% 18%, 100% 58%, 50% 100%, 0% 58%, 0% 18%); flex: 0 0 auto;
}
.autore-box {
  display: grid; gap: var(--sp-3); align-items: start; margin-top: var(--sp-5);
  padding: clamp(1.25rem, 1rem + 1vw, 1.85rem); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--raggio-m); box-shadow: var(--ombra-foglio);
}
.autore-box__foto {
  width: 6.5rem; height: 6.5rem; border-radius: var(--raggio-m); object-fit: cover;
  border: 2px solid var(--pri-velo-forte);
}
.autore-box__nome { font-size: var(--t-l); margin-bottom: .3rem; }
.autore-box__bio { color: var(--mut); font-size: var(--t-s); }
.social { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: var(--sp-2); }
.social__link {
  display: inline-block; padding: .32rem .7rem; background: var(--carta-tinta);
  border: 1px solid var(--line); border-radius: var(--raggio-s); font-size: var(--t-xs);
  font-weight: 500; color: var(--pri-scuro); text-decoration: none;
  transition: background var(--transizione), border-color var(--transizione);
}
.social__link:hover { background: var(--pri-velo); border-color: var(--pri-chiaro); color: var(--pri-scuro); }

/* ---------------------------------------------------------------------
   22. Piede di pagina, cinque colonne
   --------------------------------------------------------------------- */
.pie {
  position: relative; margin-top: var(--sp-6);
  padding-block: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem) var(--sp-4); background: var(--carta-tinta);
  border-top: 1px solid var(--line); color: var(--ink);
}
.pie::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--pri) 0 34%, var(--pri-chiaro) 34% 52%, var(--acc) 52% 62%, var(--line-forte) 62% 100%);
}
.pie__griglia { display: grid; gap: clamp(1.5rem, 1rem + 1.6vw, 2.25rem); padding-bottom: var(--sp-4); }
.pie__colonna { min-width: 0; }
.pie__titolo {
  font-size: var(--t-s); font-family: var(--font-testo); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pri-scuro); margin-bottom: var(--sp-2);
  padding-bottom: .35rem; border-bottom: 1px solid var(--line-forte);
}
.pie__claim { margin-top: var(--sp-2); color: var(--mut); font-size: var(--t-s); max-width: 22rem; }
.pie__contatto { margin-top: var(--sp-2); font-size: var(--t-s); }
.pie__contatto a { color: var(--acc-scuro); font-weight: 500; }
.pie__lista { display: grid; gap: .45rem; }
.pie__link {
  display: inline-block; font-size: var(--t-s); color: var(--mut); text-decoration: none;
  transition: color var(--transizione), transform var(--transizione);
}
.pie__link:hover { color: var(--pri-scuro); transform: translateX(3px); text-decoration: underline; }

/* colonna ecosistema: schede compatte, integrate nel disegno del piede */
.eco-lista { display: grid; gap: .5rem; }
.eco-link {
  display: block; padding: .55rem .7rem; background: var(--surf); border: 1px solid var(--line);
  border-left: 3px solid var(--pri-chiaro); border-radius: var(--raggio-s); text-decoration: none;
  color: var(--ink);
  transition: border-color var(--transizione), transform var(--transizione), box-shadow var(--transizione);
}
.eco-link strong {
  display: block; font-family: var(--font-titoli); font-size: var(--t-s); color: var(--pri-scuro);
}
.eco-link span { display: block; font-size: var(--t-xs); color: var(--mut); line-height: 1.4; }
.eco-link:hover {
  border-left-color: var(--acc); transform: translateX(3px); box-shadow: var(--ombra-1);
  color: var(--ink);
}
.pie__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line-forte);
  font-size: var(--t-xs); color: var(--mut);
}
.pie__legale { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.pie__legale a { color: var(--mut); text-decoration: none; }
.pie__legale a:hover { color: var(--pri-scuro); text-decoration: underline; }

/* ---------------------------------------------------------------------
   23. Banner cookie
   --------------------------------------------------------------------- */
.cookie {
  position: fixed; left: 50%; bottom: clamp(.75rem, .5rem + 1vw, 1.5rem);
  transform: translateX(-50%); z-index: 150; width: min(94vw, 42rem); max-height: 84dvh;
  overflow-y: auto; padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); background: var(--surf);
  border: 1px solid var(--line-forte); border-top: 4px solid var(--pri);
  border-radius: var(--raggio-m); box-shadow: var(--ombra-3);
}
.cookie__titolo { font-size: var(--t-m); margin-bottom: .5rem; }
.cookie__testo { font-size: var(--t-s); color: var(--mut); }
.cookie__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: var(--sp-3); }
.cookie__azioni .bottone { flex: 1 1 9rem; }
.cookie__dettaglio {
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line-tratteggio);
  font-size: var(--t-s); color: var(--mut);
}
.cookie__dettaglio table { font-size: var(--t-xs); margin-bottom: var(--sp-2); }
.cookie__dettaglio th {
  text-align: left; padding: .45rem .55rem; background: var(--pri-velo); color: var(--pri-scuro);
}
.cookie__dettaglio td { padding: .45rem .55rem; border-bottom: 1px solid var(--line); }

/* ---------------------------------------------------------------------
   24. Pagine di servizio: testate, mappa del sito, ringraziamento
   --------------------------------------------------------------------- */
.intestazione-pagina {
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.25rem) var(--sp-4);
  border-bottom: 1px dashed var(--line-tratteggio); margin-bottom: var(--sp-5);
}
.intestazione-pagina h1 { margin-bottom: var(--sp-2); }
.intestazione-pagina p { color: var(--mut); font-size: var(--t-m); max-width: 44rem; }
.mappa-gruppo {
  margin-bottom: var(--sp-4); padding: var(--sp-3); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--raggio-m); box-shadow: var(--ombra-foglio);
}
.mappa-gruppo h2 {
  font-size: var(--t-l); margin-bottom: var(--sp-2); padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}
.mappa-gruppo ul { display: grid; gap: .55rem; }
.mappa-gruppo li { position: relative; padding-left: 1.5rem; font-size: var(--t-s); }
.mappa-gruppo li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: .5rem; height: .62rem;
  background: var(--pri-chiaro);
  clip-path: polygon(50% 0%, 100% 18%, 100% 58%, 50% 100%, 0% 58%, 0% 18%);
}
.conferma { max-width: 40rem; margin-inline: auto; padding-block: var(--sp-6); text-align: center; }
.conferma__segno {
  display: inline-grid; place-items: center; width: 5rem; height: 5.6rem;
  margin-bottom: var(--sp-3); background: var(--pri);
  clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%); color: #FFFFFF;
  font-size: 2rem; font-weight: 700;
}
.conferma p { color: var(--mut); margin-top: var(--sp-2); }
.conferma .hero__azioni { justify-content: center; }

/* ---------------------------------------------------------------------
   25. Punti di rottura: da 320 px a 1440 px
   --------------------------------------------------------------------- */
@media (min-width: 480px) {
  .campo-doppio { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 620px) {
  .griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia-funzioni { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia-vantaggi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia-articoli { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .autore-box { grid-template-columns: auto 1fr; }
}
@media (min-width: 860px) {
  .passi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testimonianze { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .piani { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .griglia-articoli { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .problema__griglia { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .contatto__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .pie__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* filo tratteggiato che unisce i tre passi, come una cucitura di fascicolo */
  .passo:not(:last-child)::after {
    content: ""; position: absolute; right: calc(-1 * clamp(1rem, .7rem + 1.4vw, 1.75rem));
    top: 3.1rem; width: clamp(1rem, .7rem + 1.4vw, 1.75rem);
    border-top: 2px dashed var(--line-tratteggio);
  }
}
@media (min-width: 1024px) {
  .nav-principale { display: block; }
  .apri-menu { display: none; }
  .hero__griglia { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .griglia-funzioni { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .griglia-vantaggi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .griglia-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pie__griglia { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.25fr; }
}
@media (min-width: 1280px) {
  :root { --largh: 1200px; }
}

/* ---------------------------------------------------------------------
   26. Stampa e movimento ridotto
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .scheda:hover, .passo:hover, .scheda-funzione:hover, .scheda-articolo:hover, .bottone--primario:hover, .bottone--secondario:hover, .bottone--blu:hover {
    transform: none;
  }
  .scheda-articolo:hover .scheda-articolo__figura img { transform: none; }
}
@media print {
  .intestazione, .menu-mobile, .velo, .cookie, .apri-menu, .da-leggere, .pie__griglia {
    display: none !important;
  }
  body { background: #FFFFFF; color: #000000; }
  .prosa { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #444444; }
}

/* Adattamento ai titoli degli articoli in forma di domanda */
article h1 {
  font-size: clamp(1.55rem, 1rem + 2.3vw, 2.5rem);
  line-height: 1.18;
  text-wrap: balance;
  overflow-wrap: break-word;
}