/* =====================================================================
   BancoRiparazioni - foglio di stile unico del sito
   Direzione artistica: il banco del riparatore. Carta kraft chiara,
   verde oliva da grembiule da lavoro, rame degli attrezzi, cartellini
   numerati appesi ai pezzi in attesa, teste di vite a taglio, bordi di
   carta strappata e perforazioni da ricevuta di deposito.
   Tutte le decorazioni sono disegnate in CSS puro.

   Indice: 01 font, 02 reset, 03 variabili, 04 tipografia, 05 utility,
   06 decorazioni, 07 testata, 08 bottoni, 09 sezioni, 10 hero,
   11 problema, 12 passi, 13 funzionalità, 14 vantaggi, 15 testimonianze,
   16 prezzi, 17 faq, 18 articoli, 19 form, 20 autore, 21 corpo articolo,
   22 piede, 23 cookie, 24 responsive, 25 movimento ridotto.
   ===================================================================== */

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

/* --- 03. Variabili di progetto ---------------------------------------- */
:root {
  /* palette approvata del sito */
  --bg: #F7F4EC; --surf: #FFFFFF; --ink: #23261D; --mut: #616653;
  --pri: #5B6E3A; --acc: #B0632B; --line: #E3DFD2;

  /* derivate: stati, superfici, contrasto */
  --pri-scuro: #45542B; --pri-velo: rgba(91,110,58,.10);
  --acc-scuro: #8C4D1F;  /* rame leggibile in corpo piccolo, contrasto AA */
  --acc-velo: rgba(176,99,43,.12); --acc-chiaro: #E0A46F;
  --kraft: #EFEADC; --kraft-forte: #E7E0CD;
  --ink-scuro: #1A1D15; --ink-velo: rgba(35,38,29,.06); --line-forte: #CFC9B6;

  /* coppia tipografica con fallback reali */
  --font-titoli: 'Bree Serif', Rockwell, Georgia, 'Times New Roman', serif;
  --font-testo: 'Work Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* scala tipografica fluida e armonica */
  --t-xs: clamp(.76rem, .74rem + .10vw, .83rem);
  --t-sm: clamp(.88rem, .85rem + .15vw, .96rem);
  --t-base: clamp(1rem, .96rem + .20vw, 1.09rem);
  --t-md: clamp(1.10rem, 1.04rem + .32vw, 1.28rem);
  --t-lg: clamp(1.28rem, 1.16rem + .60vw, 1.60rem);
  --t-xl: clamp(1.52rem, 1.30rem + 1.05vw, 2.10rem);
  --t-2xl: clamp(1.85rem, 1.50rem + 1.80vw, 2.85rem);
  --t-3xl: clamp(2.15rem, 1.62rem + 2.70vw, 3.55rem);
  --misura: 68ch;          /* misura di lettura degli articoli */
  --interlinea: 1.68;

  /* spaziature */
  --s1: .35rem; --s2: .6rem; --s3: .95rem; --s4: 1.4rem;
  --s5: 2rem; --s6: 2.8rem; --s7: 3.8rem;
  --sez: clamp(3.4rem, 2.4rem + 4vw, 6rem);
  --gronda: clamp(1.1rem, .6rem + 2vw, 2.2rem);

  /* raggi sobri, da cartellino di cartone */
  --r-s: 3px; --r-m: 7px; --r-tondo: 999px;

  /* ombre a scatto, come una scheda appoggiata sul banco */
  --om-carta: 3px 4px 0 rgba(35,38,29,.10);
  --om-alta: 6px 8px 0 rgba(35,38,29,.13);
  --om-morbida: 0 12px 30px rgba(35,38,29,.10);

  --contenitore: 1160px; --contenitore-stretto: 780px;
}

/* --- 04. Base tipografica --------------------------------------------- */
body {
  font-family: var(--font-testo); font-size: var(--t-base);
  line-height: var(--interlinea); color: var(--ink); background-color: var(--bg);
  /* texture kraft: fibre incrociate appena percettibili */
  background-image:
    repeating-linear-gradient(114deg, rgba(176,99,43,.032) 0 2px, transparent 2px 8px),
    repeating-linear-gradient(24deg, rgba(91,110,58,.028) 0 1px, transparent 1px 10px),
    radial-gradient(circle at 14% 8%, rgba(176,99,43,.06), transparent 52%),
    radial-gradient(circle at 88% 92%, rgba(91,110,58,.06), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--font-titoli); font-weight: 400; line-height: 1.16;
  color: var(--ink); letter-spacing: -.005em; text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
p { text-wrap: pretty; }
strong { font-weight: 600; }
a {
  color: var(--pri-scuro); text-decoration-color: rgba(91,110,58,.4);
  text-underline-offset: .18em; transition: color .16s ease, text-decoration-color .16s ease;
}
a:hover { color: var(--acc-scuro); text-decoration-color: var(--acc); }
::selection { background: var(--acc-velo); color: var(--ink); }

/* --- 05. Accessibilità e utility -------------------------------------- */
.salta-al-contenuto {  /* skip link: compare al primo tab */
  position: absolute; left: var(--s3); top: -100px; z-index: 200;
  padding: .7rem 1.2rem; background: var(--pri); color: #fff; font-weight: 600;
  border-radius: 0 0 var(--r-m) var(--r-m); box-shadow: var(--om-alta);
  text-decoration: none; transition: top .18s ease;
}
.salta-al-contenuto:focus { top: 0; color: #fff; }
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: var(--r-s); }
.visivamente-nascosto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -9999px; }  /* campo trappola del form */
.wrap { width: 100%; max-width: var(--contenitore); margin-inline: auto; padding-inline: var(--gronda); }
.wrap-stretto { width: 100%; max-width: var(--contenitore-stretto); margin-inline: auto; padding-inline: var(--gronda); }
.centro { text-align: center; }

/* --- 06. Decorazioni proprie del sito --------------------------------- */
/* testa di vite a taglio: pastiglia metallica con intaglio obliquo */
.vite {
  position: relative; display: inline-block; width: 15px; height: 15px; flex: 0 0 auto;
  border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(35,38,29,.20);
  background: radial-gradient(circle at 32% 28%, #fff 0 18%, var(--line) 58%, var(--line-forte) 100%);
}
.vite::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 2px;
  border-radius: 1px; background: rgba(35,38,29,.42); transform: rotate(-28deg);
}
.vite--rame {
  background: radial-gradient(circle at 32% 28%, var(--acc-chiaro) 0 18%, var(--acc) 60%, var(--acc-scuro) 100%);
  box-shadow: inset 0 0 0 1px rgba(35,38,29,.25);
}
.vite--rame::after { background: rgba(255,255,255,.55); }

/* etichetta numerata: cartellino pentagonale con foro di sospensione */
.etichetta {
  position: relative; display: inline-flex; align-items: flex-end; justify-content: center;
  min-width: 3.1rem; padding: 1.15rem .6rem .55rem; font-family: var(--font-titoli);
  font-size: var(--t-md); line-height: 1; color: #fff; background: var(--acc-scuro);
  clip-path: polygon(50% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
}
.etichetta::before {
  content: ""; position: absolute; top: .42rem; left: 50%; translate: -50% 0;
  width: 8px; height: 8px; border-radius: 50%; background: var(--surf);
  box-shadow: inset 0 1px 2px rgba(35,38,29,.5);
}
.etichetta--oliva { background: var(--pri-scuro); }
.etichetta--chiara { background: var(--kraft-forte); color: var(--acc-scuro); }
.etichetta--chiara::before { background: var(--bg); }

/* linea perforata da ricevuta di deposito */
.perforazione {
  height: 3px; background-repeat: repeat-x; background-size: 10px 3px;
  background-image: radial-gradient(circle, var(--line-forte) 1.5px, transparent 1.7px);
}
/* nastro di carta gommata sopra un riquadro */
.nastro { position: relative; }
.nastro::before {
  content: ""; position: absolute; top: -11px; left: 50%; translate: -50% 0; rotate: -1.6deg;
  width: 104px; height: 24px; background: rgba(176,99,43,.16);
  border-left: 1px dashed rgba(176,99,43,.4); border-right: 1px dashed rgba(176,99,43,.4);
}
/* bordo di carta strappata fra due sezioni */
.strappo {
  height: 14px; background-size: 18px 14px; background-repeat: repeat-x;
  background-image:
    linear-gradient(135deg, transparent 0 8px, var(--bg) 8px),
    linear-gradient(-135deg, transparent 0 8px, var(--bg) 8px);
}
/* occhiello: sopratitolo in rame con filetto corto */
.occhiello {
  display: inline-flex; align-items: center; gap: .55rem; font-size: var(--t-xs);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-scuro);
}
.occhiello::before { content: ""; width: 26px; height: 2px; background: var(--acc); }

/* --- 07. Testata e navigazione ---------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 60; background: rgba(247,244,236,.94);
  backdrop-filter: blur(9px); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(35,38,29,.07);
}
.testata::after {  /* fila di teste di vite sotto la testata */
  content: ""; display: block; height: 3px; background-size: 14px 3px;
  background-image: radial-gradient(circle, var(--line-forte) 1.4px, transparent 1.6px);
}
.testata__interno { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 4.4rem; }
.marchio {
  display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-titoli);
  font-size: 1.22rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
.marchio:hover { color: var(--ink); }
.marchio__sigla {
  display: inline-flex; align-items: flex-end; justify-content: center; width: 2rem; height: 2.3rem;
  padding-bottom: .28rem; font-size: .95rem; color: #fff; background: var(--pri);
  clip-path: polygon(50% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
}
.marchio__nome b { font-weight: 400; color: var(--acc-scuro); }
.nav { display: flex; align-items: center; gap: .15rem; }
.nav__link {
  position: relative; display: inline-block; padding: .6rem .72rem; font-size: var(--t-sm);
  font-weight: 500; color: var(--mut); text-decoration: none; border-radius: var(--r-s);
}
.nav__link:hover { color: var(--ink); background: var(--ink-velo); }
.nav__link.is-attivo { color: var(--ink); font-weight: 600; }
.nav__link.is-attivo::after {
  content: ""; position: absolute; left: .72rem; right: .72rem; bottom: .28rem;
  height: 2px; background: var(--acc);
}
.testata__azione { display: flex; align-items: center; gap: var(--s2); }
.apri-menu {  /* tre righe come tre viti allineate */
  display: none; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .85rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink); background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--r-m); box-shadow: var(--om-carta);
}
.apri-menu__barre { position: relative; display: block; width: 18px; height: 2px; background: var(--ink); }
.apri-menu__barre::before, .apri-menu__barre::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink);
}
.apri-menu__barre::before { top: -6px; }
.apri-menu__barre::after { top: 6px; }
.apri-menu[aria-expanded="true"] .apri-menu__barre { background: transparent; }
.apri-menu[aria-expanded="true"] .apri-menu__barre::before { top: 0; rotate: 45deg; }
.apri-menu[aria-expanded="true"] .apri-menu__barre::after { top: 0; rotate: -45deg; }
.menu-mobile { display: none; border-top: 1px solid var(--line); background: var(--bg); padding: var(--s3) 0 var(--s4); }
.menu-mobile.is-aperto { display: block; animation: cala .2s ease-out; }
.menu-mobile__lista { display: grid; gap: 2px; }
.menu-mobile__lista a {
  display: block; padding: .85rem .4rem; font-weight: 500; color: var(--ink);
  text-decoration: none; border-bottom: 1px dashed var(--line);
}
.menu-mobile__lista a:hover { color: var(--acc-scuro); }
.menu-mobile .btn { margin-top: var(--s3); width: 100%; }
body.menu-aperto { overflow: hidden; }
@keyframes cala { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- 08. Bottoni ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .78rem 1.5rem; font-family: var(--font-testo);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em; text-align: center;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--r-m);
  transition: transform .14s ease, box-shadow .14s ease, background-color .16s ease;
}
.btn--primario { color: #fff; background: var(--pri); border-color: var(--pri-scuro); box-shadow: var(--om-carta); }
.btn--primario:hover { color: #fff; background: var(--pri-scuro); transform: translate(-1px, -1px); box-shadow: var(--om-alta); }
.btn--primario:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(35,38,29,.14); }
.btn--secondario { color: var(--ink); background: var(--surf); border-color: var(--line-forte); box-shadow: var(--om-carta); }
.btn--secondario:hover { color: var(--acc-scuro); border-color: var(--acc); transform: translate(-1px, -1px); box-shadow: var(--om-alta); }
.btn--rame { color: #fff; background: var(--acc-scuro); border-color: var(--acc-scuro); box-shadow: var(--om-carta); }
.btn--rame:hover { color: #fff; background: #7A4119; }
.btn--piccolo { min-height: 40px; padding: .5rem 1rem; font-size: var(--t-xs); }
.btn--blocco { width: 100%; }

/* --- 09. Sezioni e titoli --------------------------------------------- */
.sezione { position: relative; padding-block: var(--sez); }
.sezione--kraft { background: var(--kraft); border-block: 1px solid var(--line); }
.sezione--carta { background: var(--surf); border-block: 1px solid var(--line); }
.sezione--scura {
  color: var(--bg); background: var(--ink-scuro);
  background-image:
    repeating-linear-gradient(114deg, rgba(255,255,255,.03) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 82% 12%, rgba(176,99,43,.20), transparent 55%);
}
.sezione--scura h2, .sezione--scura h3 { color: var(--bg); }
.sezione--scura .occhiello { color: var(--acc-chiaro); }
.sezione--scura .occhiello::before { background: var(--acc-chiaro); }
.intestazione-sezione { max-width: 46rem; margin-bottom: var(--s6); }
.intestazione-sezione--centrata { margin-inline: auto; text-align: center; }
.intestazione-sezione--centrata .occhiello { justify-content: center; }
.titolo-sezione { margin-top: var(--s2); }
.intro-sezione { margin-top: var(--s3); font-size: var(--t-md); color: var(--mut); }
.sezione--scura .intro-sezione { color: #C9C8B8; }
.griglia-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.griglia-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.griglia-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.scheda {  /* carta bianca, bordo netto, ombra a scatto */
  position: relative; padding: var(--s4); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--om-carta);
}

/* --- 10. Hero ---------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.6rem, 1.5rem + 5vw, 5.2rem) var(--sez); overflow: hidden; }
.hero::before {  /* alone di luce sopra il banco */
  content: ""; position: absolute; inset: -20% 40% auto -10%; height: 70vh; pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(91,110,58,.14), transparent 62%);
}
.hero__interno {
  position: relative; display: grid; grid-template-columns: 1.08fr .92fr;
  align-items: center; gap: clamp(2rem, 1rem + 4vw, 4rem);
}
.hero__titolo { margin-top: var(--s3); }
.hero__titolo em {
  font-style: normal; color: var(--acc-scuro); text-decoration: underline;
  text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--acc-velo);
}
.hero__sub { max-width: 34rem; margin-top: var(--s4); font-size: var(--t-md); color: var(--mut); }
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero__punti {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s5);
  padding-top: var(--s4); border-top: 1px dashed var(--line-forte);
}
.hero__punti li { display: flex; align-items: center; gap: .5rem; font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.hero__punti li::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--acc-chiaro) 0 20%, var(--acc) 62%, var(--acc-scuro) 100%);
  box-shadow: inset 0 0 0 1px rgba(35,38,29,.22);
}
/* elemento visivo: scheda di riparazione appoggiata sul banco */
.hero__visuale { position: relative; }
.scheda-banco {
  position: relative; background: var(--surf); border: 1px solid var(--line-forte);
  border-radius: var(--r-m); box-shadow: var(--om-alta), var(--om-morbida); rotate: -1.2deg;
}
.scheda-banco::before {  /* foro di sospensione del cartellino */
  content: ""; position: absolute; top: 12px; right: 16px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bg); box-shadow: inset 0 1px 3px rgba(35,38,29,.45);
}
.scheda-banco__testata {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s4); color: #fff; background: var(--pri); border-radius: var(--r-m) var(--r-m) 0 0;
}
.scheda-banco__numero { font-family: var(--font-titoli); font-size: var(--t-lg); letter-spacing: .04em; }
.scheda-banco__oggetto { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; opacity: .92; }
.scheda-banco__corpo { padding: var(--s4); }
.scheda-banco__riga {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding-block: .62rem; border-bottom: 1px dashed var(--line); font-size: var(--t-sm);
}
.scheda-banco__riga:last-child { border-bottom: 0; }
.scheda-banco__voce { color: var(--mut); }
.scheda-banco__valore { font-weight: 600; text-align: right; }
.scheda-banco__piede {
  padding: var(--s3) var(--s4); background: var(--kraft); border-top: 1px solid var(--line);
  border-radius: 0 0 var(--r-m) var(--r-m); font-size: var(--t-xs); color: var(--mut);
}
/* pastiglie di stato della lavorazione */
.stato {
  display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .7rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .03em;
  border-radius: var(--r-tondo); border: 1px solid transparent;
}
.stato::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stato--diagnosi { color: var(--acc-scuro); background: var(--acc-velo); border-color: rgba(176,99,43,.35); }
.stato--attesa { color: #6B5A17; background: rgba(180,150,30,.14); border-color: rgba(150,125,25,.35); }
.stato--pronto { color: var(--pri-scuro); background: var(--pri-velo); border-color: rgba(91,110,58,.35); }

/* --- 11. Blocco problema ----------------------------------------------- */
.problema__interno { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(2rem, 1rem + 3vw, 3.4rem); align-items: start; }
.problema__racconto p { margin-bottom: var(--s3); max-width: 62ch; color: var(--ink); }
.problema__racconto p:first-of-type::first-letter {
  float: left; margin: .12em .14em 0 0; font-family: var(--font-titoli);
  font-size: 3.2em; line-height: .82; color: var(--acc-scuro);
}
.sintomi {
  position: relative; padding: var(--s5) var(--s4) var(--s4); background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--r-m); box-shadow: var(--om-carta);
}
.sintomi::after {  /* due viti agli angoli superiori del pannello */
  content: ""; position: absolute; top: 10px; left: 12px; right: 12px; height: 15px;
  background-repeat: no-repeat; pointer-events: none;
  background-image:
    radial-gradient(circle at 7px 7px, var(--line-forte) 6px, transparent 6.5px),
    radial-gradient(circle at calc(100% - 7px) 7px, var(--line-forte) 6px, transparent 6.5px);
}
.sintomi__titolo { font-family: var(--font-titoli); font-size: var(--t-md); margin-bottom: var(--s3); }
.sintomo {
  display: flex; gap: .7rem; padding-block: .62rem; font-size: var(--t-sm);
  color: var(--mut); border-bottom: 1px dashed var(--line);
}
.sintomo:last-child { border-bottom: 0; }
.sintomo::before {
  content: "!"; flex: 0 0 auto; width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  font-family: var(--font-titoli); font-size: .9rem; color: #fff; background: var(--acc-scuro); border-radius: var(--r-s);
}

/* --- 12. Soluzione e passi del banco ----------------------------------- */
.soluzione__testo p { max-width: 64ch; margin-bottom: var(--s3); font-size: var(--t-md); }
.passi { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-top: var(--s6); }
.passi::before {  /* filo di rame che collega i tre passaggi */
  content: ""; position: absolute; top: 1.55rem; left: 8%; right: 8%; height: 2px; opacity: .5;
  background: repeating-linear-gradient(90deg, var(--acc) 0 10px, transparent 10px 18px);
}
.passo { position: relative; }
.passo__numero {
  position: relative; z-index: 1; display: inline-flex; align-items: flex-end; justify-content: center;
  width: 3.1rem; height: 3.3rem; padding-bottom: .4rem; font-family: var(--font-titoli);
  font-size: var(--t-md); color: #fff; background: var(--acc-scuro);
  clip-path: polygon(50% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
}
.passo__numero::before {
  content: ""; position: absolute; top: .42rem; left: 50%; translate: -50% 0;
  width: 8px; height: 8px; border-radius: 50%; background: var(--bg);
}
.passo__titolo { margin-top: var(--s3); font-size: var(--t-lg); }
.passo__testo { margin-top: var(--s2); color: var(--mut); }

/* --- 13. Griglia funzionalità ------------------------------------------ */
.griglia-funzioni { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.funzione {
  position: relative; padding: var(--s4); background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-m); box-shadow: var(--om-carta);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.funzione::after {  /* vite in basso a destra, piastrina avvitata al banco */
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 12px; height: 12px;
  border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(35,38,29,.16);
  background: radial-gradient(circle at 32% 28%, #fff 0 18%, var(--line) 58%, var(--line-forte) 100%);
}
.funzione:hover { transform: translate(-2px, -2px); border-color: var(--line-forte); box-shadow: var(--om-alta); }
.funzione__indice { display: inline-block; font-family: var(--font-titoli); font-size: var(--t-sm); color: var(--acc-scuro); letter-spacing: .1em; }
.funzione__titolo { margin-top: var(--s2); font-size: var(--t-md); }
.funzione__testo { margin-top: var(--s2); font-size: var(--t-sm); color: var(--mut); }

/* --- 14. Vantaggi ------------------------------------------------------ */
.vantaggi { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.vantaggio { position: relative; padding-left: var(--s5); border-left: 3px solid var(--acc); }
.vantaggio::before {
  content: ""; position: absolute; left: -8px; top: .35rem; width: 14px; height: 14px;
  border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(35,38,29,.25);
  background: radial-gradient(circle at 32% 28%, var(--acc-chiaro) 0 20%, var(--acc) 62%, var(--acc-scuro) 100%);
}
.vantaggio__titolo { font-size: var(--t-lg); }
.vantaggio__testo { margin-top: var(--s2); color: var(--mut); }
.sezione--scura .vantaggio { border-left-color: var(--acc-chiaro); }
.sezione--scura .vantaggio__testo { color: #C9C8B8; }

/* --- 15. Testimonianze ------------------------------------------------- */
.prove { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.prova {
  position: relative; display: flex; flex-direction: column; padding: var(--s5) var(--s4) var(--s4);
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: var(--om-carta);
}
.prova::before {
  content: "\00AB"; position: absolute; top: .4rem; left: var(--s4);
  font-family: var(--font-titoli); font-size: 2.6rem; line-height: 1; color: var(--acc-velo);
}
.prova__testo { font-size: var(--t-sm); color: var(--ink); }
.prova__firma { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px dashed var(--line); }
.prova__nome { font-family: var(--font-titoli); font-size: var(--t-base); }
.prova__ruolo { font-size: var(--t-xs); color: var(--mut); }
.nota-scenari {
  margin-top: var(--s4); padding: .7rem 1rem; font-size: var(--t-xs); color: var(--mut);
  background: var(--kraft-forte); border-left: 3px solid var(--acc); border-radius: 0 var(--r-s) var(--r-s) 0;
}

/* --- 16. Prezzi -------------------------------------------------------- */
.prezzi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); align-items: start; }
.piano {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: var(--s5) var(--s4) var(--s4); background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--r-m); box-shadow: var(--om-carta);
}
.piano--evidenza { border: 2px solid var(--pri); box-shadow: var(--om-alta); }
.piano--evidenza::before {  /* velatura a righe, come carta millimetrata del banco */
  content: ""; position: absolute; inset: 0; border-radius: var(--r-m); pointer-events: none;
  background: repeating-linear-gradient(135deg, rgba(91,110,58,.05) 0 8px, transparent 8px 16px);
}
.piano__nastro {
  position: absolute; top: -.9rem; left: 50%; translate: -50% 0; padding: .3rem .9rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: var(--pri); border-radius: var(--r-tondo); box-shadow: var(--om-carta);
}
.piano__nome { font-family: var(--font-titoli); font-size: var(--t-lg); color: var(--acc-scuro); }
.piano__prezzo { display: flex; align-items: baseline; gap: .4rem; margin-top: var(--s2); }
.piano__cifra { font-family: var(--font-titoli); font-size: clamp(2.4rem, 2rem + 1.6vw, 3.2rem); line-height: 1; }
.piano__periodo { font-size: var(--t-xs); color: var(--mut); }
.piano__descrizione { margin-top: var(--s3); font-size: var(--t-sm); color: var(--mut); }
.piano__lista { margin: var(--s4) 0; display: grid; gap: .6rem; }
.piano__lista li { position: relative; padding-left: 1.6rem; font-size: var(--t-sm); }
.piano__lista li::before {
  content: ""; position: absolute; left: 0; top: .42em; width: .72rem; height: .42rem;
  border-left: 2px solid var(--pri); border-bottom: 2px solid var(--pri); rotate: -45deg;
}
.piano .btn { margin-top: auto; }
.nota-prezzi { margin-top: var(--s5); font-size: var(--t-sm); color: var(--mut); text-align: center; }

/* --- 17. Fisarmonica FAQ ----------------------------------------------- */
.faq { max-width: 52rem; margin-inline: auto; }
.faq__voce { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-m); margin-bottom: .7rem; overflow: hidden; }
.faq__domanda {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; min-height: 52px; padding: 1rem var(--s4); font-family: var(--font-titoli);
  font-size: var(--t-md); text-align: left; color: var(--ink); background: transparent; border: 0;
}
.faq__domanda:hover { background: var(--kraft); }
.faq__segno { position: relative; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--kraft-forte); }
.faq__segno::before, .faq__segno::after {
  content: ""; position: absolute; inset: 0; margin: auto; background: var(--acc-scuro);
  transition: transform .2s ease, opacity .2s ease;
}
.faq__segno::before { width: .8rem; height: 2px; }
.faq__segno::after { width: 2px; height: .8rem; }
.faq__domanda[aria-expanded="true"] .faq__segno::after { transform: scaleY(0); opacity: 0; }
.faq__risposta { padding: 0 var(--s4) var(--s4); color: var(--mut); animation: apri .2s ease-out; }
.faq__risposta p + p { margin-top: var(--s3); }
@keyframes apri { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --- 18. Card articolo e blocco Da leggere anche ----------------------- */
.griglia-articoli { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.articolo-card {
  display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-m); overflow: hidden; box-shadow: var(--om-carta);
  transition: transform .16s ease, box-shadow .16s ease;
}
.articolo-card:hover { transform: translate(-2px, -2px); box-shadow: var(--om-alta); }
.articolo-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--kraft-forte); overflow: hidden; }
.articolo-card__media img { width: 100%; height: 100%; object-fit: cover; }
.articolo-card__media::after {  /* filetto bicolore oliva e rame */
  content: ""; position: absolute; inset: auto 0 0 0; height: 4px; opacity: .85;
  background: repeating-linear-gradient(90deg, var(--acc) 0 12px, var(--pri) 12px 24px);
}
.articolo-card__corpo { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1; }
.articolo-card__meta { font-size: var(--t-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--acc-scuro); font-weight: 600; }
.articolo-card__titolo { font-size: var(--t-md); line-height: 1.28; }
.articolo-card__titolo a { text-decoration: none; color: var(--ink); }
.articolo-card__titolo a:hover { color: var(--acc-scuro); }
.articolo-card__testo { font-size: var(--t-sm); color: var(--mut); }
.articolo-card__link { margin-top: auto; padding-top: var(--s2); font-size: var(--t-sm); font-weight: 600; color: var(--pri-scuro); text-decoration: none; }
.articolo-card__link::after { content: " \203A"; font-weight: 700; }
.da-leggere { margin-top: var(--s7); padding-top: var(--s5); border-top: 3px double var(--line-forte); }
.da-leggere__titolo { display: flex; align-items: center; gap: .7rem; font-size: var(--t-xl); margin-bottom: var(--s4); }

/* --- 19. Form di contatto ---------------------------------------------- */
.contatto__interno { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 1rem + 3vw, 3.6rem); align-items: start; }
.contatto__promessa p { margin-bottom: var(--s3); color: var(--mut); font-size: var(--t-md); }
.modulo {
  position: relative; padding: var(--s5); background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--r-m); box-shadow: var(--om-alta);
}
.modulo::before {  /* filetto a tratti oliva e rame in basso */
  content: ""; position: absolute; inset: auto 0 0 0; height: 5px; border-radius: 0 0 var(--r-m) var(--r-m);
  background: repeating-linear-gradient(90deg, var(--pri) 0 14px, var(--acc) 14px 28px);
}
.campi { display: grid; gap: var(--s3); }
.campi--due { grid-template-columns: repeat(2, 1fr); }
.campo { display: grid; gap: .35rem; }
.campo__etichetta { font-size: var(--t-sm); font-weight: 600; }
.campo__obbligatorio { color: var(--acc-scuro); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem; font-size: var(--t-sm);
  background: var(--bg); border: 1px solid var(--line-forte); border-radius: var(--r-s);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.campo textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--mut); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; background: var(--surf); border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-velo);
}
.campo__aiuto { font-size: var(--t-xs); color: var(--mut); }
.modulo .btn { margin-top: var(--s4); }
.modulo__nota { margin-top: var(--s3); font-size: var(--t-xs); color: var(--mut); }
.alternativa { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px dashed var(--line); font-size: var(--t-sm); color: var(--mut); }

/* --- 20. Blocco autore -------------------------------------------------- */
.autore-box {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s4); align-items: start;
  padding: var(--s4); background: var(--kraft); border: 1px solid var(--line-forte); border-radius: var(--r-m);
}
.autore-box__foto { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; border: 3px solid var(--surf); box-shadow: var(--om-carta); }
.autore-box__nome { font-family: var(--font-titoli); font-size: var(--t-md); }
.autore-box__ruolo { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--acc-scuro); }
.autore-box__bio { margin-top: var(--s2); font-size: var(--t-sm); color: var(--mut); }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s3); }
.social__link {
  display: inline-flex; align-items: center; min-height: 38px; padding: .35rem .8rem;
  font-size: var(--t-xs); font-weight: 600; color: var(--ink); text-decoration: none;
  background: var(--surf); border: 1px solid var(--line-forte); border-radius: var(--r-tondo);
}
.social__link:hover { color: var(--acc-scuro); border-color: var(--acc); }

/* --- 21. Corpo degli articoli ------------------------------------------- */
.articolo { padding-block: var(--s6) var(--sez); }
.briciole { font-size: var(--t-xs); color: var(--mut); margin-bottom: var(--s3); }
.briciole a { text-decoration: none; }
.briciole span { margin-inline: .35rem; color: var(--line-forte); }
.articolo__titolo { max-width: min(100%, 26ch); }
.meta-articolo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem var(--s3);
  margin-top: var(--s3); font-size: var(--t-sm); color: var(--mut);
}
.meta-articolo strong { color: var(--ink); font-weight: 600; }
.chapo { margin-top: var(--s4); padding-left: var(--s4); border-left: 4px solid var(--acc); font-size: var(--t-md); color: var(--ink); }
.figura { margin-block: var(--s5); }
.figura img { width: 100%; border: 1px solid var(--line-forte); border-radius: var(--r-m); box-shadow: var(--om-carta); }
.figura figcaption, .credito-foto { margin-top: .6rem; font-size: var(--t-xs); color: var(--mut); }
.sommario { margin-block: var(--s5); padding: var(--s4); background: var(--kraft); border: 1px dashed var(--line-forte); border-radius: var(--r-m); }
.sommario__titolo { font-family: var(--font-titoli); font-size: var(--t-base); margin-bottom: var(--s2); }
.sommario ol { padding-left: 1.2rem; font-size: var(--t-sm); }
.sommario li { margin-bottom: .3rem; }

/* prosa: misura di lettura compresa fra 62 e 72 caratteri */
.prosa { max-width: var(--misura); }
.prosa > * + * { margin-top: var(--s3); }
.prosa h2 { position: relative; margin-top: var(--s6); padding-top: var(--s3); font-size: var(--t-xl); border-top: 1px solid var(--line-forte); }
.prosa h2::before { content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 3px; background: var(--acc); }
.prosa h3 { margin-top: var(--s5); font-size: var(--t-lg); color: var(--pri-scuro); }
.prosa p { color: var(--ink); }
.prosa ol { padding-left: 1.35rem; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul li { position: relative; padding-left: 1.5rem; margin-bottom: .5rem; }
.prosa ul li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--acc-chiaro) 0 22%, var(--acc) 65%, var(--acc-scuro) 100%);
}
.prosa ol li { margin-bottom: .5rem; }
.prosa ol li::marker { color: var(--acc-scuro); font-weight: 600; }
.prosa blockquote {
  margin-block: var(--s5); padding: var(--s4) var(--s4) var(--s4) var(--s5); background: var(--surf);
  border-left: 4px solid var(--pri); border-radius: 0 var(--r-m) var(--r-m) 0;
  box-shadow: var(--om-carta); font-size: var(--t-md);
}
.prosa blockquote p + p { margin-top: var(--s3); }
.prosa a { font-weight: 500; }
.prosa figure { margin-block: var(--s5); }
.prosa table {
  margin-block: var(--s5); font-size: var(--t-sm); background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--r-m); overflow: hidden;
}
.prosa thead th { padding: .75rem .9rem; text-align: left; font-family: var(--font-titoli); font-weight: 400; color: #fff; background: var(--pri); }
.prosa tbody td, .prosa tbody th { padding: .7rem .9rem; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.prosa tbody tr:nth-child(even) { background: var(--kraft); }
.tabella-scorrevole { overflow-x: auto; }
.prosa code {
  padding: .12em .4em; font-size: .9em; font-family: SFMono-Regular, Consolas, 'Liberation Mono', monospace;
  background: var(--kraft-forte); border: 1px solid var(--line-forte); border-radius: var(--r-s);
}
.riquadro {  /* riquadro riassuntivo dei punti chiave */
  position: relative; margin-block: var(--s5); padding: var(--s5) var(--s4) var(--s4);
  background: var(--surf); border: 1px solid var(--line-forte); border-radius: var(--r-m); box-shadow: var(--om-carta);
}
.riquadro__titolo {
  position: absolute; top: -.85rem; left: var(--s4); padding: .25rem .8rem;
  font-family: var(--font-titoli); font-size: var(--t-sm); color: #fff;
  background: var(--acc-scuro); border-radius: var(--r-s);
}

/* --- 22. Piede di pagina ------------------------------------------------ */
.piede {
  color: #D8D6C8; background: var(--ink-scuro);
  background-image:
    repeating-linear-gradient(114deg, rgba(255,255,255,.028) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 12% 0%, rgba(91,110,58,.28), transparent 55%),
    radial-gradient(circle at 92% 100%, rgba(176,99,43,.20), transparent 55%);
}
.piede::before {  /* fascia di viti sul bordo superiore */
  content: ""; display: block; height: 6px; background-size: 18px 6px;
  background-image: radial-gradient(circle, rgba(224,164,111,.55) 1.8px, transparent 2px);
}
.piede__griglia { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.35fr; gap: var(--s5) var(--s4); padding-block: var(--s6); }
.piede__titolo {
  font-family: var(--font-titoli); font-size: var(--t-base); color: #fff; margin-bottom: var(--s3);
  padding-bottom: .45rem; border-bottom: 1px solid rgba(224,164,111,.35);
}
.piede__lista { display: grid; gap: .55rem; }
.piede__lista a, .piede__contatto a { color: #D8D6C8; font-size: var(--t-sm); text-decoration: none; }
.piede__lista a:hover, .piede__contatto a:hover { color: var(--acc-chiaro); text-decoration: underline; }
.piede__marchio { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-titoli); font-size: 1.2rem; color: #fff; text-decoration: none; }
.piede__claim { margin-top: var(--s3); font-size: var(--t-sm); color: #B9B8A8; max-width: 26rem; }
.piede__contatto { margin-top: var(--s3); font-size: var(--t-sm); }
.piede__cookie {
  min-height: 40px; margin-top: .55rem; padding: .4rem .85rem; font-size: var(--t-xs); font-weight: 600;
  color: #E8E6DA; background: transparent; border: 1px solid rgba(216,214,200,.4); border-radius: var(--r-tondo);
}
.piede__cookie:hover { color: var(--ink-scuro); background: var(--acc-chiaro); border-color: var(--acc-chiaro); }
/* colonna ecosistema: ogni voce è una targhetta avvitata al pannello */
.ecosistema { display: grid; gap: .55rem; }
.ecosistema__link {
  position: relative; display: block; padding: .6rem .75rem .6rem 1.5rem; font-size: var(--t-sm);
  color: #D8D6C8; text-decoration: none; background: rgba(255,255,255,.045);
  border: 1px solid rgba(216,214,200,.16); border-radius: var(--r-s);
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.ecosistema__link::before {
  content: ""; position: absolute; left: .6rem; top: .95rem; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--acc-chiaro) 0 22%, var(--acc) 68%, #6E3A12 100%);
}
.ecosistema__link:hover { color: #fff; background: rgba(224,164,111,.14); border-color: rgba(224,164,111,.5); transform: translateX(2px); }
.ecosistema__nome { display: block; font-weight: 600; color: #F0EEE2; }
.ecosistema__desc { display: block; font-size: var(--t-xs); color: #B9B8A8; }
.piede__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2) var(--s4); padding-block: var(--s4);
  border-top: 1px solid rgba(216,214,200,.18); font-size: var(--t-xs); color: #A9A899;
}
.piede__barra a { color: #A9A899; text-decoration: none; }
.piede__barra a:hover { color: var(--acc-chiaro); text-decoration: underline; }
.piede__legale { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

/* --- 23. Banner cookie --------------------------------------------------- */
.cookie {
  position: fixed; left: var(--gronda); right: var(--gronda); bottom: var(--gronda); z-index: 120;
  max-width: 56rem; margin-inline: auto; padding: var(--s4); background: var(--surf);
  border: 1px solid var(--line-forte); border-top: 5px solid var(--pri); border-radius: var(--r-m);
  box-shadow: var(--om-morbida), var(--om-alta); animation: sale .24s ease-out;
}
.cookie[hidden] { display: none; }
.cookie__titolo { font-family: var(--font-titoli); font-size: var(--t-md); margin-bottom: var(--s2); }
.cookie__testo { font-size: var(--t-sm); color: var(--mut); }
.cookie__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.cookie__azioni .btn { flex: 1 1 12rem; }
.cookie__personalizza {
  min-height: 44px; padding: .5rem .9rem; font-size: var(--t-sm); font-weight: 600;
  color: var(--pri-scuro); background: transparent; border: 0;
  text-decoration: underline; text-underline-offset: .2em;
}
.cookie__dettaglio {
  margin-top: var(--s3); padding: var(--s3); font-size: var(--t-xs); color: var(--mut);
  background: var(--kraft); border: 1px dashed var(--line-forte); border-radius: var(--r-s);
}
.cookie__dettaglio[hidden] { display: none; }
.cookie__dettaglio table { font-size: var(--t-xs); }
.cookie__dettaglio th, .cookie__dettaglio td { padding: .35rem .5rem; text-align: left; border-bottom: 1px solid var(--line); }
@keyframes sale { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* --- 24. Responsive: da 320px a 1440px, senza scorrimento orizzontale ---- */
@media (max-width: 1080px) {
  .griglia-funzioni { grid-template-columns: repeat(3, 1fr); }
  .piede__griglia { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (max-width: 920px) {
  .hero__interno { grid-template-columns: 1fr; }
  .hero__visuale { max-width: 30rem; }
  .problema__interno, .contatto__interno, .griglia-2, .vantaggi { grid-template-columns: 1fr; }
  .passi { grid-template-columns: 1fr; gap: var(--s4); }
  .passi::before { display: none; }
  .prove, .prezzi, .griglia-articoli, .griglia-3, .griglia-4 { grid-template-columns: repeat(2, 1fr); }
  .piano--evidenza { grid-column: span 2; }
}
@media (max-width: 860px) {
  .nav, .testata__azione .btn { display: none; }
  .apri-menu { display: inline-flex; }
  html { scroll-padding-top: 4.8rem; }
}
@media (max-width: 640px) {
  :root { --sez: 3rem; }
  .prove, .prezzi, .griglia-articoli, .griglia-funzioni,
  .griglia-3, .griglia-4, .campi--due { grid-template-columns: 1fr; }
  .piano--evidenza { grid-column: auto; }
  .piede__griglia { grid-template-columns: 1fr 1fr; }
  .modulo { padding: var(--s4); }
  .autore-box { grid-template-columns: 1fr; }
  .autore-box__foto { width: 76px; height: 76px; }
  .cookie { left: .6rem; right: .6rem; bottom: .6rem; padding: var(--s3); }
  .cookie__azioni .btn { flex: 1 1 100%; }
  .prosa blockquote { padding-left: var(--s4); }
}
@media (max-width: 420px) {
  .piede__griglia { grid-template-columns: 1fr; }
  .hero__azioni .btn { width: 100%; }
  .marchio { font-size: 1.05rem; }
  .problema__racconto p:first-of-type::first-letter { font-size: 2.6em; }
}
@media print {
  .testata, .menu-mobile, .cookie, .piede, .apri-menu { display: none !important; }
  body { background: #fff; color: #000; }
  .prosa { max-width: none; }
}

/* --- 25. 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;
  }
  .funzione:hover, .articolo-card:hover, .btn:hover, .ecosistema__link:hover { transform: none; }
}

/* Nota sul tema: la direzione artistica è la carta kraft illuminata dal banco
   di lavoro. Un tema scuro tradirebbe il materiale, quindi il sito dichiara
   color-scheme: light e non espone una variante per prefers-color-scheme. */

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