@charset "utf-8";
/* =========================================================================
   ForfettarioSereno, foglio di stile unico del sito
   Direzione artistica: chiarezza luminosa, bianco crema e blu cielo, cifre
   grandi, curve morbide, atmosfera rassicurante.
   Motivo grafico: card arrotondate, pile di monete, archi morbidi.
   Coppia tipografica: Fraunces per i titoli e per i numeri, Inter per il testo.
   Indice: 1 variabili, 2 reset, 3 tipografia, 4 impaginazione, 5 decorazioni,
   6 intestazione, 7 comandi, 8 testate e pannelli, 9 hero e salvadanaio,
   10 problema, 11 soluzione, 12 funzioni e vantaggi, 13 prova sociale,
   14 prezzi, 15 domande, 16 modulo, 17 blog, 18 prosa, 19 autore,
   20 pagine di servizio, 21 piede, 22 cookie, 23 responsive, 24 preferenze.
   ========================================================================= */

/* =========================================================================
   1. VARIABILI DI PROGETTO
   La palette del piano più le derivate per stati, ombre, raggi e ritmo.
   Nelle pagine non si introducono altri colori.
   ========================================================================= */
:root {
  /* Palette del sito */
  --bg: #FBFAF6;            /* crema di fondo */
  --surf: #FFFFFF;          /* superficie delle schede */
  --ink: #16233A;           /* testo principale, blu notte */
  --mut: #5E6C84;           /* testo secondario */
  --pri: #2563C9;           /* blu cielo profondo, colore delle azioni */
  --acc: #F5A524;           /* ambra delle monete */
  --line: #E4E2DA;          /* filetto caldo */

  /* Derivate del blu */
  --pri-scuro: #1C4CA0;     /* passaggio del mouse sui pieni */
  --pri-cupo: #143A7B;      /* stato premuto */
  --pri-velo: #EAF1FD;      /* velo azzurro chiarissimo */
  --pri-velo-2: #D9E6FB;    /* velo azzurro più deciso */

  /* Derivate dell'ambra */
  --acc-scuro: #9A6207;     /* ambra leggibile su fondo chiaro */
  --acc-alta: #FFC96B;      /* riflesso alto della moneta */
  --acc-velo: #FDF1DC;      /* velo ambra */

  /* Neutri di supporto */
  --ink-notte: #101B2E;     /* fondo del piede di pagina */
  --ink-chiaro: #E8ECF3;    /* testo chiaro su fondo notte */
  --mut-chiaro: #A7B4C9;    /* testo attenuato su fondo notte */
  --line-forte: #D3D0C5;    /* filetto marcato */
  --ok: #1D7A5B;            /* verde delle conferme */
  --ok-velo: #E3F1EC;

  /* Tipografia */
  --font-titoli: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-testo: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Scala tipografica fluida */
  --t-xs: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --t-s: clamp(0.88rem, 0.86rem + 0.14vw, 0.95rem);
  --t-base: clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
  --t-m: clamp(1.11rem, 1.06rem + 0.28vw, 1.28rem);
  --t-l: clamp(1.32rem, 1.22rem + 0.50vw, 1.66rem);
  --t-xl: clamp(1.62rem, 1.42rem + 0.92vw, 2.28rem);
  --t-2xl: clamp(2.02rem, 1.66rem + 1.60vw, 3.10rem);
  --t-3xl: clamp(2.45rem, 1.85rem + 2.60vw, 4.20rem);

  /* Ritmo verticale e orizzontale */
  --sp-1: 0.35rem;
  --sp-2: 0.7rem;
  --sp-3: 1.1rem;
  --sp-4: 1.6rem;
  --sp-5: 2.4rem;
  --sp-6: 3.4rem;
  --sp-7: 4.8rem;
  --sezione-y: clamp(3.4rem, 2.2rem + 4.6vw, 6.4rem);
  --largo: 74rem;
  --stretto: 46rem;
  --misura: 68ch;           /* misura di lettura, circa 68 caratteri */

  /* Raggi: card arrotondate e archi morbidi */
  --r-1: 10px;
  --r-2: 16px;
  --r-3: 22px;
  --r-4: 30px;
  --r-pillola: 999px;
  --r-arco: 8rem 8rem var(--r-3) var(--r-3);

  /* Ombre morbide, mai dure */
  --ombra-1: 0 1px 2px rgba(22, 35, 58, .05), 0 4px 12px rgba(22, 35, 58, .05);
  --ombra-2: 0 2px 4px rgba(22, 35, 58, .05), 0 12px 28px rgba(22, 35, 58, .08);
  --ombra-3: 0 6px 12px rgba(22, 35, 58, .06), 0 26px 56px rgba(22, 35, 58, .11);
  --ombra-blu: 0 8px 22px rgba(37, 99, 201, .24);
  --ombra-ambra: 0 8px 20px rgba(245, 165, 36, .26);

  --transizione: 200ms cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}

/* La direzione artistica del sito è costruita sulla luce e sul bianco crema:
   una versione scura tradirebbe l'identità, perciò non si attiva il tema
   scuro automatico e si dichiara esplicitamente lo schema chiaro. */

/* =========================================================================
   2. RESET MODERNO
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100svh; background: var(--bg);
  color: var(--ink); font-family: var(--font-testo);
  font-size: var(--t-base); line-height: 1.68;
  font-synthesis-weight: none; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--pri); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pri-scuro); }
table { border-collapse: collapse; width: 100%; }
:target { scroll-margin-top: 6rem; }

/* =========================================================================
   3. TIPOGRAFIA
   Fraunces per titoli e cifre, Inter per il testo corrente.
   ========================================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-titoli); font-weight: 700;
  line-height: 1.16; letter-spacing: -0.015em;
  color: var(--ink); font-variation-settings: "SOFT" 30, "WONK" 1;
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
p { text-wrap: pretty; }
strong { font-weight: 600; }
em { font-style: italic; }
small { font-size: var(--t-s); }
::selection { background: var(--pri-velo-2); color: var(--ink); }

.occhiello {
  display: inline-flex; align-items: center;
  gap: var(--sp-2); font-family: var(--font-testo);
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--pri);
}
.occhiello::before {
  content: ""; width: 1.6rem;
  height: 1.6rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--acc-alta), var(--acc) 62%, var(--acc-scuro));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
  flex: none;
}
.cifra {
  font-family: var(--font-titoli); font-weight: 800;
  font-size: var(--t-3xl); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--pri);
}
.testo-tenue { color: var(--mut); }
.misura { max-width: 42rem; }
.centrato { text-align: center; }
.nascosto-vista {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================================
   4. IMPAGINAZIONE
   ========================================================================= */
.contenitore {
  width: min(100% - 2.4rem, var(--largo)); margin-inline: auto;
}
.contenitore-stretto {
  width: min(100% - 2.4rem, var(--stretto)); margin-inline: auto;
}
.sezione { position: relative; padding-block: var(--sezione-y); }
.sezione--velo { background: linear-gradient(180deg, var(--pri-velo) 0%, var(--bg) 100%); }
.sezione--crema { background: #F5F2E9; border-block: 1px solid var(--line); }
.sezione--notte { background: var(--ink-notte); color: var(--ink-chiaro); }
.sezione--notte h2, .sezione--notte h3 { color: #FFFFFF; }
.pila > * + * { margin-top: var(--sp-3); }
.griglia-2, .griglia-3, .griglia-4 { display: grid; gap: var(--sp-4); }
main { display: block; }

/* =========================================================================
   5. DECORAZIONI DEL SITO, IN CSS PURO
   Archi morbidi di fondo, aloni di luce, monete e pile di monete.
   Nessuna immagine esterna viene usata per decorare.
   ========================================================================= */
body::before {
  content: ""; position: fixed;
  inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(30rem 30rem at 88% -8%, rgba(37, 99, 201, .09), transparent 70%),
    radial-gradient(24rem 24rem at 2% 10%, rgba(245, 165, 36, .10), transparent 70%),
    repeating-radial-gradient(circle at 50% 128%, transparent 0 62px, rgba(22, 35, 58, .030) 62px 63px);
}
/* Arco morbido in cima alla sezione, firma visiva del sito */
.sezione--arco::before {
  content: ""; position: absolute;
  inset-inline: 0; top: 0;
  height: 9rem; pointer-events: none;
  background: radial-gradient(60rem 9rem at 50% 0, var(--pri-velo), transparent 72%);
}
/* Pila di monete stilizzata, decorazione di angolo */
.sezione--monete::after {
  content: ""; position: absolute;
  right: clamp(-2rem, -1rem + 2vw, 2rem); bottom: 1.5rem;
  width: 7.5rem; height: 7.5rem;
  pointer-events: none; opacity: .5;
  background:
    radial-gradient(ellipse 3.4rem 1rem at 50% 84%, var(--acc-velo) 0 99%, transparent 100%),
    radial-gradient(ellipse 3rem .9rem at 50% 60%, var(--acc-velo) 0 99%, transparent 100%),
    radial-gradient(ellipse 2.5rem .8rem at 50% 38%, var(--acc-velo) 0 99%, transparent 100%);
}
.moneta {
  flex: none; display: inline-grid;
  place-items: center; width: 2.9rem;
  height: 2.9rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--acc-alta), var(--acc) 60%, #D48A0C);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55), var(--ombra-ambra);
  color: #4A2F04; font-family: var(--font-titoli);
  font-weight: 700; font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
}
.moneta--blu {
  background: radial-gradient(circle at 34% 28%, #7FA9EE, var(--pri) 60%, var(--pri-cupo));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35), var(--ombra-blu);
  color: #FFFFFF;
}
.moneta--pila { position: relative; }
.moneta--pila::before {
  content: ""; position: absolute;
  inset: 0; border-radius: 50%;
  box-shadow: 0 .42rem 0 -.12rem var(--acc-velo), 0 .84rem 0 -.24rem var(--line); z-index: -1;
}
.figura-arco {
  position: relative; overflow: hidden;
  border-radius: var(--r-arco); border: 1px solid var(--line);
  background: var(--surf); box-shadow: var(--ombra-3);
}
.figura-arco img { width: 100%; height: 100%; object-fit: cover; }
.credito-foto {
  margin-top: var(--sp-2); font-size: var(--t-xs);
  color: var(--mut);
}
.credito-foto a { color: var(--mut); }

/* =========================================================================
   6. SALTO, INTESTAZIONE, NAVIGAZIONE, MENU MOBILE
   ========================================================================= */
.salta-al-contenuto {
  position: absolute; left: 50%;
  top: -6rem; transform: translateX(-50%);
  z-index: 120; padding: .75rem 1.4rem;
  border-radius: 0 0 var(--r-3) var(--r-3); background: var(--pri);
  color: #FFFFFF; font-weight: 600;
  text-decoration: none; transition: top var(--transizione);
}
.salta-al-contenuto:focus-visible { top: 0; color: #FFFFFF; }

.intestazione {
  position: sticky; top: 0;
  z-index: 90; background: rgba(251, 250, 246, .88);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.intestazione__barra {
  display: flex; align-items: center;
  gap: var(--sp-3); min-height: 4.5rem;
}
.marchio {
  display: inline-flex; align-items: center;
  gap: .6rem; text-decoration: none;
  color: var(--ink); font-family: var(--font-titoli);
  font-size: var(--t-m); font-weight: 700;
  letter-spacing: -0.02em; margin-right: auto;
}
.marchio__moneta {
  display: inline-grid; place-items: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 50%; background: radial-gradient(circle at 34% 28%, #6C9CEA, var(--pri) 62%, var(--pri-cupo));
  color: #FFFFFF; font-size: .82rem;
  font-weight: 700; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .38);
}
.marchio__nome em { font-style: normal; color: var(--pri); }
.nav-principale { display: none; }
.nav-principale__lista { display: flex; align-items: center; gap: .2rem; }
.nav-principale__link {
  display: inline-block; padding: .55rem .7rem;
  border-radius: var(--r-pillola); color: var(--ink);
  font-size: var(--t-s); font-weight: 500;
  text-decoration: none; transition: background var(--transizione), color var(--transizione);
}
.nav-principale__link:hover { background: var(--pri-velo); color: var(--pri-scuro); }
.nav-principale__link.attivo,
.nav-principale__link[aria-current="page"] {
  background: var(--pri-velo); color: var(--pri-scuro);
  font-weight: 600;
}
.intestazione__azioni { display: flex; align-items: center; gap: .6rem; }
.apri-menu {
  display: grid; place-content: center;
  gap: 5px; width: 2.9rem;
  height: 2.9rem; border-radius: 50%;
  border: 1px solid var(--line-forte); background: var(--surf);
}
.apri-menu span {
  display: block; width: 1.15rem;
  height: 2px; border-radius: 2px;
  background: var(--ink); 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); }

.menu-mobile {
  position: fixed; inset: 0 0 0 auto;
  z-index: 110; width: min(21rem, 88vw);
  padding: var(--sp-4); background: var(--surf);
  border-left: 1px solid var(--line); border-radius: var(--r-4) 0 0 var(--r-4);
  box-shadow: var(--ombra-3); transform: translateX(103%);
  transition: transform 260ms cubic-bezier(.22, .61, .36, 1); overflow-y: auto;
  display: flex; flex-direction: column;
  gap: var(--sp-3);
}
.menu-mobile.aperto { transform: translateX(0); }
.menu-mobile__testata { display: flex; align-items: center; justify-content: space-between; }
.menu-mobile__chiudi {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%; border: 1px solid var(--line);
  font-size: 1.4rem; line-height: 1;
  color: var(--ink);
}
.menu-mobile__lista { display: grid; gap: .15rem; }
.menu-mobile__link {
  display: block; padding: .8rem .9rem;
  border-radius: var(--r-2); color: var(--ink);
  font-weight: 500; text-decoration: none;
  transition: background var(--transizione), padding-left var(--transizione);
}
.menu-mobile__link:hover { background: var(--pri-velo); padding-left: 1.3rem; color: var(--pri-scuro); }
.velo {
  position: fixed; inset: 0;
  z-index: 100; background: rgba(16, 27, 46, .46);
  backdrop-filter: blur(2px);
}
.blocco-scroll { overflow: hidden; }

/* =========================================================================
   7. COMANDI
   Bottoni a pillola, sollevamento morbido, nessuno spigolo vivo.
   ========================================================================= */
.bottone {
  display: inline-flex; align-items: center;
  justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .7rem 1.5rem;
  border-radius: var(--r-pillola); border: 1.5px solid transparent;
  font-size: var(--t-s); font-weight: 600;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: transform var(--transizione), box-shadow var(--transizione),
              background var(--transizione), color var(--transizione);
}
.bottone--primario { background: var(--pri); color: #FFFFFF; box-shadow: var(--ombra-blu); }
.bottone--primario:hover { background: var(--pri-scuro); color: #FFFFFF; transform: translateY(-2px); }
.bottone--primario:active { background: var(--pri-cupo); transform: translateY(0); }
.bottone--secondario {
  background: var(--surf); color: var(--ink);
  border-color: var(--ink); box-shadow: var(--ombra-1);
}
.bottone--secondario:hover { background: var(--pri-velo); color: var(--pri-scuro); border-color: var(--pri); transform: translateY(-2px); }
.bottone--ambra { background: var(--acc); color: #3A2503; box-shadow: var(--ombra-ambra); }
.bottone--ambra:hover { background: #E29414; color: #3A2503; transform: translateY(-2px); }
.bottone--fantasma { color: var(--pri); border-color: var(--pri-velo-2); }
.bottone--fantasma:hover { background: var(--pri-velo); color: var(--pri-scuro); }
.bottone--largo { width: 100%; }
.bottone--piccolo { min-height: 2.5rem; padding: .5rem 1.1rem; font-size: var(--t-xs); }
.bottone-testo {
  display: inline-flex; align-items: center;
  min-height: 2.5rem; padding: .3rem 0;
  color: var(--pri); font-size: var(--t-s);
  font-weight: 600; text-decoration: underline;
  text-underline-offset: 4px;
}
.bottone-testo:hover { color: var(--pri-scuro); }

/* =========================================================================
   8. TESTATE DI SEZIONE, PANNELLI, SCHEDE
   ========================================================================= */
.testata-sezione { max-width: 44rem; margin-bottom: var(--sp-5); }
.testata-sezione--centrata { margin-inline: auto; text-align: center; }
.testata-sezione--centrata .occhiello { justify-content: center; }
.testata-sezione h2 { margin-top: var(--sp-2); }
.testata-sezione p { margin-top: var(--sp-3); color: var(--mut); font-size: var(--t-m); }
.pannello {
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--ombra-1);
}
.scheda {
  padding: var(--sp-4); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--ombra-1); transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}
.scheda:hover { transform: translateY(-4px); box-shadow: var(--ombra-2); border-color: var(--pri-velo-2); }
.scheda--arco { border-radius: var(--r-arco); text-align: center; }
.scheda--velo { background: var(--pri-velo); border-color: var(--pri-velo-2); box-shadow: none; }

/* =========================================================================
   9. HERO E PANNELLO SALVADANAIO
   ========================================================================= */
.hero { position: relative; padding-block: clamp(2.6rem, 1.6rem + 3.6vw, 5rem) var(--sezione-y); overflow: hidden; }
.hero::before {
  content: ""; position: absolute;
  left: 50%; top: -22rem;
  width: 76rem; height: 42rem;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 201, .10), transparent 62%); pointer-events: none;
}
.hero__griglia { display: grid; gap: var(--sp-5); align-items: center; }
.hero__titolo { font-size: var(--t-3xl); margin-top: var(--sp-3); }
.hero__titolo em { font-style: italic; color: var(--pri); }
.hero__sottotitolo { margin-top: var(--sp-3); font-size: var(--t-m); color: var(--mut); max-width: 34rem; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-4); }
.hero__punti { display: grid; gap: .55rem; margin-top: var(--sp-4); }
.hero__punti li {
  display: flex; align-items: flex-start;
  gap: .6rem; font-size: var(--t-s);
  color: var(--ink);
}
.hero__punti li::before {
  content: ""; flex: none;
  width: 1.1rem; height: 1.1rem;
  margin-top: .35rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--acc-alta), var(--acc) 65%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6);
}
.hero__figura { position: relative; }

/* Il salvadanaio è l'elemento visivo firma della home */
.salvadanaio {
  position: relative; padding: var(--sp-4);
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-4); box-shadow: var(--ombra-3);
}
.salvadanaio::before {
  content: ""; position: absolute;
  inset-inline: var(--sp-4); top: -.55rem;
  height: 1.1rem; border-radius: var(--r-pillola);
  background: linear-gradient(90deg, var(--pri), var(--acc)); opacity: .85;
}
.salvadanaio__etichetta {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--mut);
}
.salvadanaio__cifra { margin-top: .3rem; font-size: clamp(2.6rem, 1.9rem + 3vw, 3.9rem); }
.salvadanaio__cifra span { font-size: var(--t-l); color: var(--mut); font-weight: 600; }
.salvadanaio__riga {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-2);
  padding: .7rem 0; border-top: 1px dashed var(--line-forte);
  font-size: var(--t-s);
}
.salvadanaio__voce { color: var(--mut); }
.salvadanaio__importo {
  font-family: var(--font-titoli); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.salvadanaio__nota { margin-top: var(--sp-2); font-size: var(--t-xs); color: var(--mut); }
.barra {
  height: .8rem; margin-block: var(--sp-3);
  border-radius: var(--r-pillola); background: var(--pri-velo-2);
  overflow: hidden;
}
.barra__pieno {
  display: block; width: var(--riempimento, 62%);
  height: 100%; border-radius: var(--r-pillola);
  background: linear-gradient(90deg, var(--pri), #5691E8);
}

/* =========================================================================
   10. IL PROBLEMA
   ========================================================================= */
.problema__griglia { display: grid; gap: var(--sp-5); align-items: start; }
.problema__racconto > p + p { margin-top: var(--sp-3); }
.problema__racconto > p:first-of-type { font-size: var(--t-m); color: var(--ink); }
.problema__racconto p { color: var(--mut); }
.sintomi {
  padding: var(--sp-4); background: var(--acc-velo);
  border: 1px solid #F0DDB8; border-radius: var(--r-arco);
}
.sintomi__titolo { font-size: var(--t-m); color: #6B4405; }
.sintomi__lista { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.sintomi__lista li {
  display: flex; gap: .7rem;
  font-size: var(--t-s); color: #4A3305;
}
.sintomi__lista li::before {
  content: ""; flex: none;
  width: .55rem; height: 1.35rem;
  border-radius: var(--r-pillola); background: var(--acc);
}

/* =========================================================================
   11. LA SOLUZIONE E I PASSI
   ========================================================================= */
.soluzione__testo { max-width: var(--misura); }
.soluzione__testo > p + p { margin-top: var(--sp-3); }
.soluzione__testo p { color: var(--mut); font-size: var(--t-m); }
.passi { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); counter-reset: passo; }
.passo {
  position: relative; padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-arco); box-shadow: var(--ombra-1);
  text-align: center;
}
.passo__numero {
  position: absolute; top: -1.45rem;
  left: 50%; transform: translateX(-50%);
  display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  border-radius: 50%; background: radial-gradient(circle at 34% 28%, #6C9CEA, var(--pri) 62%, var(--pri-cupo));
  color: #FFFFFF; font-family: var(--font-titoli);
  font-weight: 700; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .3), var(--ombra-blu);
}
.passo__titolo { font-size: var(--t-m); }
.passo__testo { margin-top: var(--sp-2); font-size: var(--t-s); color: var(--mut); }

/* =========================================================================
   12. FUNZIONALITÀ E VANTAGGI
   ========================================================================= */
.griglia-funzioni { display: grid; gap: var(--sp-4); }
.scheda-funzione {
  padding: var(--sp-4); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--ombra-1); transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}
.scheda-funzione:hover { transform: translateY(-4px); box-shadow: var(--ombra-2); border-color: var(--pri-velo-2); }
.scheda-funzione__titolo { margin-top: var(--sp-3); font-size: var(--t-m); }
.scheda-funzione__testo { margin-top: var(--sp-2); font-size: var(--t-s); color: var(--mut); }
.griglia-vantaggi { display: grid; gap: var(--sp-4); }
.vantaggio {
  position: relative; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-3);
}
.vantaggio::before {
  content: ""; position: absolute;
  left: var(--sp-3); top: var(--sp-4);
  bottom: var(--sp-4); width: .4rem;
  border-radius: var(--r-pillola); background: linear-gradient(180deg, var(--pri), var(--acc));
}
.vantaggio__titolo { font-size: var(--t-m); }
.vantaggio__testo { margin-top: var(--sp-2); color: var(--mut); font-size: var(--t-s); }

/* =========================================================================
   13. PROVA SOCIALE
   ========================================================================= */
.testimonianze { display: grid; gap: var(--sp-4); }
.testimonianza {
  position: relative; padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-arco); box-shadow: var(--ombra-1);
}
.testimonianza::before {
  content: "\201C"; position: absolute;
  top: .4rem; left: 50%;
  transform: translateX(-50%); font-family: var(--font-titoli);
  font-size: 3.6rem; line-height: 1;
  color: var(--pri-velo-2);
}
.testimonianza__testo { font-family: var(--font-titoli); font-size: var(--t-m); font-style: italic; }
.testimonianza__firma {
  display: flex; align-items: center;
  gap: .8rem; margin-top: var(--sp-3);
  padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.testimonianza__nome { font-weight: 600; }
.testimonianza__ruolo { font-size: var(--t-xs); color: var(--mut); }
.nota-scenari {
  display: inline-block; margin-top: var(--sp-4);
  padding: .5rem 1.1rem; border: 1px dashed var(--line-forte);
  border-radius: var(--r-pillola); font-size: var(--t-xs);
  color: var(--mut);
}

/* =========================================================================
   14. PREZZI
   ========================================================================= */
.piani { display: grid; gap: var(--sp-4); align-items: start; }
.piano {
  position: relative; display: flex;
  flex-direction: column; padding: var(--sp-4);
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--ombra-1);
}
.piano--evidenza {
  border: 2px solid var(--pri); border-radius: var(--r-arco);
  box-shadow: var(--ombra-3); padding-top: var(--sp-5);
}
.piano__etichetta {
  position: absolute; top: -.9rem;
  left: 50%; transform: translateX(-50%);
  padding: .3rem 1rem; border-radius: var(--r-pillola);
  background: var(--acc); color: #3A2503;
  font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.piano__nome { font-size: var(--t-l); }
.piano__prezzo {
  display: flex; align-items: baseline;
  gap: .4rem; margin-top: var(--sp-2);
  font-family: var(--font-titoli); font-weight: 800;
  font-size: clamp(2.6rem, 2rem + 2.4vw, 3.5rem); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--pri);
}
.piano__periodo { font-family: var(--font-testo); font-size: var(--t-s); font-weight: 500; color: var(--mut); }
.piano__descrizione { margin-top: var(--sp-2); font-size: var(--t-s); color: var(--mut); }
.piano__elenco { display: grid; gap: .6rem; margin-block: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line-forte); }
.piano__elenco li { display: flex; gap: .6rem; font-size: var(--t-s); }
.piano__elenco li::before {
  content: ""; flex: none;
  width: 1.15rem; height: 1.15rem;
  margin-top: .3rem; border-radius: 50%;
  background: var(--ok-velo) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.2 2.2 4.8-5' fill='none' stroke='%231D7A5B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / .8rem no-repeat;
}
.piano .bottone { margin-top: auto; }
.nota-prezzi { max-width: 44rem; margin: var(--sp-4) auto 0; font-size: var(--t-s); color: var(--mut); text-align: center; }

/* =========================================================================
   15. DOMANDE FREQUENTI
   ========================================================================= */
.faq { max-width: var(--stretto); margin-inline: auto; display: grid; gap: .8rem; }
.faq__voce {
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--ombra-1);
  overflow: hidden; transition: border-color var(--transizione);
}
.faq__voce.aperta { border-color: var(--pri); }
.faq__domanda {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-3);
  width: 100%; min-height: 3.4rem;
  padding: var(--sp-3) var(--sp-4); font-family: var(--font-titoli);
  font-size: var(--t-m); font-weight: 600;
  text-align: left; color: var(--ink);
}
.faq__domanda:hover { color: var(--pri-scuro); }
.faq__icona {
  position: relative; flex: none;
  width: 1.9rem; height: 1.9rem;
  border-radius: 50%; background: var(--pri-velo);
}
.faq__icona::before, .faq__icona::after {
  content: ""; position: absolute;
  left: 50%; top: 50%;
  width: .8rem; height: 2px;
  border-radius: 2px; background: var(--pri);
  transform: translate(-50%, -50%); transition: transform var(--transizione), opacity var(--transizione);
}
.faq__icona::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__domanda[aria-expanded="true"] .faq__icona::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq__risposta { padding: 0 var(--sp-4) var(--sp-4); color: var(--mut); max-width: var(--misura); }

/* =========================================================================
   16. MODULO DI CONTATTO
   ========================================================================= */
.contatto__griglia { display: grid; gap: var(--sp-5); align-items: start; }
.modulo {
  padding: var(--sp-4); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--ombra-2);
}
.modulo__intro { font-size: var(--t-s); color: var(--mut); }
.campo { display: grid; gap: .35rem; margin-bottom: var(--sp-3); }
.campo label, .campo__etichetta { font-size: var(--t-s); font-weight: 600; }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 2.9rem;
  padding: .7rem .9rem; background: var(--bg);
  border: 1.5px solid var(--line-forte); border-radius: var(--r-2);
  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; }
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--pri-velo-2); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; background: var(--surf);
  border-color: var(--pri); box-shadow: 0 0 0 4px var(--pri-velo);
}
.campo__aiuto { font-size: var(--t-xs); color: var(--mut); }
.campo-doppio { display: grid; gap: 0 var(--sp-3); }
.campo--scelta { position: relative; }
.campo--scelta select { appearance: none; padding-right: 2.6rem; }
.campo--scelta::after {
  content: ""; position: absolute;
  right: 1rem; bottom: 1.15rem;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--pri); border-bottom: 2px solid var(--pri);
  transform: rotate(45deg); pointer-events: none;
}
.modulo__nota { margin-top: var(--sp-3); 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-forte); font-size: var(--t-s);
}
.hp { position: absolute; left: -9999px; }

/* =========================================================================
   17. BLOG, SCHEDE ARTICOLO, BRICIOLE
   ========================================================================= */
.griglia-articoli { display: grid; gap: var(--sp-4); }
.scheda-articolo {
  display: flex; flex-direction: column;
  overflow: hidden; background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-3);
  box-shadow: var(--ombra-1); transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}
.scheda-articolo:hover { transform: translateY(-4px); box-shadow: var(--ombra-2); border-color: var(--pri-velo-2); }
.scheda-articolo__figura { aspect-ratio: 16 / 10; overflow: hidden; background: var(--pri-velo); }
.scheda-articolo__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.scheda-articolo:hover .scheda-articolo__figura img { transform: scale(1.05); }
.scheda-articolo__corpo { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); flex: 1; }
.scheda-articolo__data {
  font-size: var(--t-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pri);
}
.scheda-articolo__titolo { font-size: var(--t-m); line-height: 1.3; }
.scheda-articolo__titolo a { color: var(--ink); text-decoration: none; }
.scheda-articolo__titolo a:hover { color: var(--pri-scuro); text-decoration: underline; }
.scheda-articolo__testo { font-size: var(--t-s); color: var(--mut); }
.scheda-articolo__link { margin-top: auto; font-size: var(--t-s); font-weight: 600; text-decoration: none; }
.scheda-articolo__link::after { content: " \2192"; }
.scheda-articolo__link:hover { text-decoration: underline; }
.briciole { font-size: var(--t-xs); color: var(--mut); margin-bottom: var(--sp-3); }
.briciole ol { display: flex; flex-wrap: wrap; gap: .4rem; }
.briciole li + li::before { content: "\203A"; margin-right: .4rem; color: var(--line-forte); }
.meta-articolo {
  display: flex; flex-wrap: wrap;
  gap: .4rem 1rem; margin-top: var(--sp-3);
  font-size: var(--t-s); color: var(--mut);
}
.figura-evidenza { margin-block: var(--sp-4); }
.figura-evidenza img { width: 100%; border-radius: var(--r-arco); border: 1px solid var(--line); }

/* =========================================================================
   18. CORPO REDAZIONALE DEGLI ARTICOLI
   Misura di lettura contenuta, titoli in Fraunces, richiami in ambra.
   ========================================================================= */
.prosa { max-width: var(--misura); }
.prosa > * + * { margin-top: var(--sp-3); }
.prosa p { color: #24314A; }
.prosa h2 {
  margin-top: var(--sp-6); padding-top: var(--sp-3);
  border-top: 1px solid var(--line); font-size: var(--t-xl);
}
.prosa h3 { margin-top: var(--sp-5); font-size: var(--t-l); }
.prosa ul, .prosa ol { display: grid; gap: .6rem; padding-left: 0; }
.prosa ul li { display: flex; gap: .7rem; }
.prosa ul li::before {
  content: ""; flex: none;
  width: .7rem; height: .7rem;
  margin-top: .62rem; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--acc-alta), var(--acc) 70%);
}
.prosa ol { counter-reset: elenco; }
.prosa ol li { display: flex; gap: .7rem; counter-increment: elenco; }
.prosa ol li::before {
  content: counter(elenco); flex: none;
  width: 1.5rem; height: 1.5rem;
  margin-top: .2rem; display: grid;
  place-items: center; border-radius: 50%;
  background: var(--pri-velo); color: var(--pri-scuro);
  font-family: var(--font-titoli); font-size: .8rem;
  font-weight: 700;
}
.prosa blockquote {
  padding: var(--sp-3) var(--sp-4); border-left: .35rem solid var(--acc);
  border-radius: 0 var(--r-3) var(--r-3) 0; background: var(--acc-velo);
  font-family: var(--font-titoli); font-size: var(--t-m);
  font-style: italic;
}
.prosa a { font-weight: 500; }
.prosa figure { margin: var(--sp-4) 0; }
.prosa figure img { border-radius: var(--r-3); border: 1px solid var(--line); }
.prosa figcaption { margin-top: var(--sp-2); font-size: var(--t-xs); color: var(--mut); }
.prosa code {
  padding: .12rem .38rem; border-radius: 6px;
  background: var(--pri-velo); font-family: var(--font-mono);
  font-size: .9em; color: var(--pri-cupo);
}
.prosa pre {
  padding: var(--sp-3); border-radius: var(--r-2);
  background: var(--ink-notte); color: var(--ink-chiaro);
  overflow-x: auto;
}
.prosa pre code { background: none; color: inherit; padding: 0; }
.tabella-scroll { overflow-x: auto; margin-block: var(--sp-4); border-radius: var(--r-3); border: 1px solid var(--line); }
.prosa table, .tabella { min-width: 30rem; background: var(--surf); font-size: var(--t-s); }
.prosa th, .prosa td, .tabella th, .tabella td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.prosa thead th, .tabella thead th { background: var(--pri-velo); font-family: var(--font-titoli); color: var(--ink); }
.prosa tbody tr:last-child td, .tabella tbody tr:last-child td { border-bottom: 0; }
.prosa caption, .tabella caption { padding: .6rem 1rem; font-size: var(--t-xs); color: var(--mut); text-align: left; }
.chapo {
  max-width: var(--misura); padding-left: var(--sp-3);
  border-left: .35rem solid var(--acc); font-family: var(--font-titoli);
  font-size: var(--t-m); color: var(--ink);
}
.sommario {
  max-width: var(--misura); padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-forte); border-radius: var(--r-3);
  background: var(--surf);
}
.sommario__titolo { font-size: var(--t-s); text-transform: uppercase; letter-spacing: .1em; color: var(--mut); }
.sommario ol { display: grid; gap: .35rem; margin-top: var(--sp-2); font-size: var(--t-s); }
.riquadro {
  max-width: var(--misura); padding: var(--sp-4);
  border: 1px solid var(--pri-velo-2); border-top: .35rem solid var(--pri);
  border-radius: var(--r-3); background: var(--pri-velo);
}
.riquadro__titolo { font-size: var(--t-m); }
.riquadro ul { display: grid; gap: .6rem; margin-top: var(--sp-2); font-size: var(--t-s); }
.riquadro ul li { display: flex; gap: .7rem; }
.riquadro ul li::before { content: ""; flex: none; width: .55rem; height: 1.3rem; border-radius: var(--r-pillola); background: var(--pri); }

/* =========================================================================
   19. DA LEGGERE ANCHE, RIQUADRO AUTORE, PROFILI
   ========================================================================= */
.da-leggere { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.da-leggere__titolo { display: flex; align-items: center; gap: .7rem; font-size: var(--t-l); margin-bottom: var(--sp-4); }
.da-leggere__titolo::before {
  content: ""; width: 2.2rem;
  height: 1.1rem; border-radius: 2.2rem 2.2rem 0 0;
  background: linear-gradient(90deg, var(--pri), var(--acc));
}
.autore-box {
  display: grid; gap: var(--sp-3);
  margin-top: var(--sp-5); padding: var(--sp-4);
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-3); box-shadow: var(--ombra-1);
}
.autore-box__foto {
  width: 6.5rem; height: 6.5rem;
  border-radius: 50%; object-fit: cover;
  border: 3px solid var(--pri-velo);
}
.autore-box__nome { font-size: var(--t-m); }
.autore-box__bio { font-size: var(--t-s); color: var(--mut); margin-top: var(--sp-2); }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-3); }
.social__link {
  display: inline-flex; align-items: center;
  min-height: 2.4rem; padding: .35rem .9rem;
  border: 1px solid var(--line-forte); border-radius: var(--r-pillola);
  font-size: var(--t-xs); font-weight: 600;
  color: var(--ink); text-decoration: none;
  transition: background var(--transizione), border-color var(--transizione), color var(--transizione);
}
.social__link:hover { background: var(--pri-velo); border-color: var(--pri); color: var(--pri-scuro); }

/* =========================================================================
   20. PAGINE DI SERVIZIO
   ========================================================================= */
.intestazione-pagina {
  padding-block: var(--sp-6) var(--sp-5); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--pri-velo), transparent);
}
.intestazione-pagina p { margin-top: var(--sp-3); color: var(--mut); font-size: var(--t-m); max-width: 42rem; }
.mappa-gruppo { margin-top: var(--sp-4); }
.mappa-gruppo h2 { font-size: var(--t-l); }
.mappa-gruppo ul { display: grid; gap: .5rem; margin-top: var(--sp-3); }
.mappa-gruppo li { padding-left: 1.2rem; position: relative; }
.mappa-gruppo li::before {
  content: ""; position: absolute;
  left: 0; top: .72rem;
  width: .6rem; height: .6rem;
  border-radius: 50%; background: var(--acc);
}
.conferma { max-width: 40rem; margin-inline: auto; text-align: center; padding-block: var(--sp-6); }
.conferma__segno {
  display: grid; place-items: center;
  width: 5.5rem; height: 5.5rem;
  margin: 0 auto var(--sp-4); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #7FA9EE, var(--pri) 62%, var(--pri-cupo));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .32), var(--ombra-blu);
  color: #FFFFFF; font-size: 2.2rem;
}

/* =========================================================================
   21. PIEDE DI PAGINA
   ========================================================================= */
.pie {
  position: relative; margin-top: var(--sezione-y);
  padding-block: var(--sp-6) var(--sp-4); background: var(--ink-notte);
  color: var(--ink-chiaro);
}
.pie::before {
  content: ""; position: absolute;
  inset-inline: 0; top: -2.4rem;
  height: 2.5rem; background: var(--ink-notte);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.pie__griglia { display: grid; gap: var(--sp-5); }
.pie__colonna { min-width: 0; }
.pie .marchio { color: #FFFFFF; }
.pie .marchio__nome em { color: var(--acc-alta); }
.pie__claim { margin-top: var(--sp-3); font-size: var(--t-s); color: var(--mut-chiaro); max-width: 22rem; }
.pie__contatto { margin-top: var(--sp-2); font-size: var(--t-s); }
.pie__contatto a { color: var(--acc-alta); }
.pie__titolo {
  font-family: var(--font-testo); font-size: var(--t-xs);
  font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--acc-alta);
  margin-bottom: var(--sp-3);
}
.pie__lista { display: grid; gap: .5rem; }
.pie__link {
  display: inline-block; min-height: 1.9rem;
  color: var(--ink-chiaro); font-size: var(--t-s);
  text-decoration: none; transition: color var(--transizione), transform var(--transizione);
}
.pie__link:hover { color: #FFFFFF; transform: translateX(3px); text-decoration: underline; }
.pie .bottone-testo { color: var(--acc-alta); }
.pie .bottone-testo:hover { color: #FFFFFF; }
.eco-lista { display: grid; gap: .6rem; }
.eco-link {
  display: block; padding: .65rem .9rem;
  border: 1px solid rgba(232, 236, 243, .16); border-radius: var(--r-2) var(--r-2) var(--r-2) var(--r-4);
  background: rgba(255, 255, 255, .04); color: var(--ink-chiaro);
  text-decoration: none; transition: background var(--transizione), border-color var(--transizione), transform var(--transizione);
}
.eco-link:hover { background: rgba(255, 255, 255, .09); border-color: var(--acc); color: #FFFFFF; transform: translateY(-2px); }
.eco-link strong { display: block; font-size: var(--t-s); font-weight: 600; color: #FFFFFF; }
.eco-link span { display: block; font-size: var(--t-xs); color: var(--mut-chiaro); }
.pie__barra {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-top: var(--sp-5);
  padding-top: var(--sp-3); border-top: 1px solid rgba(232, 236, 243, .16);
  font-size: var(--t-xs); color: var(--mut-chiaro);
}
.pie__legale { display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.pie__legale a { color: var(--mut-chiaro); }
.pie__legale a:hover { color: #FFFFFF; }

/* =========================================================================
   22. BANNER COOKIE
   ========================================================================= */
.cookie {
  position: fixed; left: 50%;
  bottom: 1rem; z-index: 130;
  width: min(46rem, calc(100% - 1.6rem)); transform: translateX(-50%);
  padding: var(--sp-4); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-4);
  box-shadow: var(--ombra-3); max-height: calc(100svh - 2rem);
  overflow-y: auto;
}
.cookie__titolo { font-size: var(--t-m); }
.cookie__testo { margin-top: var(--sp-2); 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 10rem; }
.cookie__dettaglio { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line-forte); font-size: var(--t-s); }
.cookie__dettaglio table { font-size: var(--t-xs); margin-bottom: var(--sp-2); }
.cookie__dettaglio th, .cookie__dettaglio td { padding: .45rem .6rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cookie__dettaglio thead th { background: var(--pri-velo); }

/* =========================================================================
   23. RESPONSIVE
   Da 320 px a 1440 px, nessuno scorrimento orizzontale.
   ========================================================================= */
@media (min-width: 34rem) {
  .campo-doppio { grid-template-columns: 1fr 1fr; }
  .autore-box { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-4); }
}
@media (min-width: 46rem) {
  .griglia-2 { grid-template-columns: repeat(2, 1fr); }
  .griglia-funzioni { grid-template-columns: repeat(2, 1fr); }
  .griglia-vantaggi { grid-template-columns: repeat(2, 1fr); }
  .griglia-articoli { grid-template-columns: repeat(2, 1fr); }
  .testimonianze { grid-template-columns: repeat(2, 1fr); }
  .passi { grid-template-columns: repeat(3, 1fr); }
  .pie__griglia { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .griglia-3 { grid-template-columns: repeat(3, 1fr); }
  .griglia-4 { grid-template-columns: repeat(4, 1fr); }
  .griglia-funzioni { grid-template-columns: repeat(4, 1fr); }
  .griglia-articoli { grid-template-columns: repeat(3, 1fr); }
  .testimonianze { grid-template-columns: repeat(3, 1fr); }
  .piani { grid-template-columns: repeat(3, 1fr); }
  .hero__griglia { grid-template-columns: 1.08fr .92fr; }
  .problema__griglia { grid-template-columns: 1.25fr .75fr; }
  .contatto__griglia { grid-template-columns: .85fr 1.15fr; }
  .pie__griglia { grid-template-columns: 1.35fr .85fr .95fr .85fr 1.15fr; }
  .piano--evidenza { transform: translateY(-1rem); }
}
@media (min-width: 70rem) {
  .nav-principale { display: block; }
  .apri-menu { display: none; }
}
@media (max-width: 45.99rem) {
  .cookie__azioni .bottone { flex: 1 1 100%; }
  .prosa table, .tabella { min-width: 26rem; }
}

/* =========================================================================
   24. ACCESSIBILITÀ E PREFERENZE UTENTE
   ========================================================================= */
:focus-visible {
  outline: 3px solid var(--acc); outline-offset: 3px;
  border-radius: 4px;
}
.bottone:focus-visible, .faq__domanda:focus-visible { outline-offset: 4px; }
a:focus-visible { text-decoration: none; background: var(--acc-velo); color: var(--ink); }
.pie a:focus-visible { background: var(--acc); color: #3A2503; }

@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, .scheda-funzione:hover, .scheda-articolo:hover, .bottone:hover, .eco-link:hover { transform: none; }
  .scheda-articolo:hover .scheda-articolo__figura img { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --mut: #47536B; --line: #C9C6BB; --line-forte: #A9A69B; }
  .scheda, .piano, .scheda-funzione, .scheda-articolo, .faq__voce { border-width: 2px; }
}
@media print {
  body::before, .intestazione, .menu-mobile, .velo, .cookie, .pie, .hero__azioni { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .prosa { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; }
}

/* 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;
}