@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@400;500;700;900&family=Heebo:wght@300;400;500;700&display=swap');

/* =========================================================================
   FilieraTracciata, foglio di stile unico del sito
   Direzione artistica: catena e trasmissione, ambra e verde oliva,
   anelli grafici, atmosfera da laboratorio artigianale.
   Motivo grafico ricorrente: anelli di catena, etichette di lotto,
   frecce di flusso. Tema chiaro su tutte le pagine.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Variabili di progetto
   ------------------------------------------------------------------------- */
:root {
  /* Palette del sito */
  --bg: #FBF9F4;
  --surf: #FFFFFF;
  --ink: #26221A;
  --mut: #665F52;
  --pri: #A06A16;
  --acc: #4C6B49;
  --line: #E9E4D8;

  /* Derivate dell'ambra, per stati e superfici */
  --pri-scuro: #7E5310;
  --pri-cupo: #5E3E0C;
  --pri-chiaro: #C68C2E;
  --pri-velo: #F6EBD8;
  --pri-nebbia: #FCF5E8;

  /* Derivate del verde oliva */
  --acc-scuro: #3A5338;
  --acc-chiaro: #6E8C6A;
  --acc-velo: #E6EDE3;

  /* Superfici e linee */
  --bg-caldo: #F5F1E7;
  --surf-alt: #FDFCF8;
  --line-forte: #D9D1BE;
  --line-tratteggio: #C8BFA8;

  /* Ombre morbide, tarate su fondo caldo */
  --ombra-1: 0 1px 2px rgba(38, 34, 26, .05), 0 2px 6px rgba(38, 34, 26, .05);
  --ombra-2: 0 2px 4px rgba(38, 34, 26, .05), 0 8px 22px rgba(38, 34, 26, .07);
  --ombra-3: 0 6px 14px rgba(38, 34, 26, .07), 0 22px 48px rgba(38, 34, 26, .10);
  --ombra-ambra: 0 8px 24px rgba(160, 106, 22, .18);

  /* Raggi: cerchi per gli anelli, angoli tesi per le etichette */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-anello: 999px;

  /* Spaziature, scala su base 4 */
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.75rem;
  --s-8: 3.5rem;
  --s-9: 5rem;
  --s-10: 6.5rem;

  /* Tipografia */
  --f-titoli: 'Frank Ruhl Libre', 'Iowan Old Style', 'Palatino Linotype', Georgia, 'Times New Roman', serif;
  --f-testo: 'Heebo', 'Helvetica Neue', Arial, 'Segoe UI', system-ui, sans-serif;

  /* Scala tipografica fluida, rapporto vicino alla quarta giusta */
  --t-xs: clamp(.75rem, .72rem + .12vw, .8125rem);
  --t-sm: clamp(.8125rem, .79rem + .14vw, .9375rem);
  --t-base: clamp(1rem, .96rem + .2vw, 1.0625rem);
  --t-md: clamp(1.0625rem, 1.01rem + .28vw, 1.1875rem);
  --t-lg: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --t-xl: clamp(1.5rem, 1.32rem + .8vw, 2rem);
  --t-2xl: clamp(1.875rem, 1.55rem + 1.4vw, 2.75rem);
  --t-3xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);

  /* Larghezze */
  --w-max: 1180px;
  --w-stretto: 780px;
  --w-lettura: 68ch;

  /* Transizioni */
  --tr-veloce: 140ms cubic-bezier(.32, .72, .35, 1);
  --tr-media: 260ms cubic-bezier(.32, .72, .35, 1);
  color-scheme: light;
}

/* -------------------------------------------------------------------------
   2. Reset moderno
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body {
  min-height: 100vh;
  font-family: var(--f-testo);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  /* Texture di fondo: grana di carta da laboratorio e velo ambrato agli angoli */
  background-image:
    radial-gradient(circle at 88% -6%, rgba(160, 106, 22, .09), transparent 46%),
    radial-gradient(circle at 4% 32%, rgba(76, 107, 73, .07), transparent 38%),
    repeating-linear-gradient(45deg, rgba(38, 34, 26, .018) 0 1px, transparent 1px 9px);
  background-attachment: fixed, fixed, scroll;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
ul, ol { padding-left: 1.25rem; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

/* -------------------------------------------------------------------------
   3. Tipografia di base
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-titoli); font-weight: 700; line-height: 1.16; letter-spacing: -.012em;
  color: var(--ink); text-wrap: balance;
}
h1 { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -.022em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); font-weight: 700; }
p { text-wrap: pretty; }
a {
  color: var(--pri-scuro); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: .18em; text-decoration-color: rgba(160, 106, 22, .42);
  transition: color var(--tr-veloce), text-decoration-color var(--tr-veloce);
}
a:hover { color: var(--pri-cupo); text-decoration-color: currentColor; }
strong { font-weight: 700; color: var(--ink); }
small { font-size: var(--t-sm); }
::selection { background: var(--pri-velo); color: var(--ink); }

/* Focus visibile e coerente ovunque */
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: var(--r-xs); }

/* Salto al contenuto, primo elemento del body */
.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 1200; padding: var(--s-3) var(--s-5);
  background: var(--acc-scuro); color: #fff; font-weight: 500; text-decoration: none;
  border-radius: 0 0 var(--r-md) var(--r-md); transition: top var(--tr-media);
}
.skip:focus { top: 0; color: #fff; }

/* -------------------------------------------------------------------------
   4. Layout, contenitori e intestazioni di sezione
   ------------------------------------------------------------------------- */
.contenitore { width: 100%; max-width: var(--w-max); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.contenitore-stretto { max-width: var(--w-stretto); }
.sezione { padding-block: clamp(3.25rem, 7vw, 6rem); position: relative; }

/* Fondo appena più caldo, per alternare i blocchi restando in tema chiaro */
.sezione-calda { background: var(--bg-caldo); }

/* Fondo bianco pieno, per i blocchi che devono staccare */
.sezione-chiara { background: var(--surf); }

/* Filo di catena sopra la sezione, decorazione tipica del sito */
.sezione-catena { border-top: 1px solid var(--line); }
.sezione-catena::before {
  content: ""; position: absolute; inset-inline: 0; top: -8px; height: 16px;
  background-image: radial-gradient(circle at 13px 50%, transparent 0 5px, var(--line-forte) 5px 6.5px, transparent 7px);
  background-size: 26px 100%; background-repeat: repeat-x; opacity: .85; pointer-events: none;
}
.testata-sezione { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.testata-sezione.centrata { margin-inline: auto; text-align: center; }

/* Occhiello: piccola etichetta di lotto sopra i titoli */
.occhiello {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: .3rem .8rem .3rem .65rem;
  margin-bottom: var(--s-4); font-family: var(--f-testo); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acc-scuro); background: var(--acc-velo);
  border: 1px solid rgba(76, 107, 73, .28); border-radius: var(--r-sm);
}
.occhiello::before {
  content: ""; width: 9px; height: 9px; border: 2px solid var(--acc); border-radius: var(--r-anello);
}
.titolo-sezione { margin-bottom: var(--s-4); }
.sottotitolo-sezione { font-size: var(--t-md); color: var(--mut); max-width: 42rem; }
.centrata .sottotitolo-sezione { margin-inline: auto; }

/* Griglie generiche */
.griglia { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* -------------------------------------------------------------------------
   5. Bottoni
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 48px;
  padding: .8rem 1.5rem; font-family: var(--f-testo); font-size: var(--t-sm); font-weight: 500;
  letter-spacing: .03em; text-decoration: none; text-align: center; border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition: transform var(--tr-veloce), box-shadow var(--tr-veloce), background-color var(--tr-veloce), color var(--tr-veloce), border-color var(--tr-veloce);
}

/* Primario: ambra piena, con anello di catena disegnato nel bordo inferiore */
.btn-primario {
  color: #fff; background: linear-gradient(160deg, var(--pri-chiaro), var(--pri) 42%, var(--pri-scuro));
  box-shadow: var(--ombra-ambra);
}
.btn-primario:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(160, 106, 22, .26); }
.btn-primario:active { transform: translateY(0); }

/* Secondario: contorno oliva su fondo chiaro */
.btn-secondario {
  color: var(--acc-scuro); background: var(--surf); border-color: rgba(76, 107, 73, .45);
  box-shadow: var(--ombra-1);
}
.btn-secondario:hover {
  color: var(--acc-scuro); background: var(--acc-velo); border-color: var(--acc);
  transform: translateY(-2px);
}

/* Terziario: solo testo con freccia di flusso */
.btn-testo {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; font-weight: 500;
  text-decoration: none; color: var(--acc-scuro);
}
.btn-testo::after {
  content: ""; width: 1.1rem; height: 1px; background: currentColor; position: relative;
  transition: width var(--tr-veloce);
}
.btn-testo:hover { color: var(--pri-scuro); }
.btn-testo:hover::after { width: 1.7rem; }
.btn-blocco { width: 100%; }
.gruppo-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* -------------------------------------------------------------------------
   6. Header e navigazione
   ------------------------------------------------------------------------- */
.sito-header {
  position: sticky; top: 0; z-index: 900; background: rgba(251, 249, 244, .92);
  backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--line);
}
.header-riga {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 4.5rem;
}

/* Marchio con anelli concatenati disegnati in CSS */
.marchio {
  display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-titoli);
  font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  white-space: nowrap;
}
.marchio:hover { color: var(--pri-scuro); }
.marchio-anelli { position: relative; width: 34px; height: 20px; flex: none; }
.marchio-anelli::before,
.marchio-anelli::after {
  content: ""; position: absolute; top: 0; width: 20px; height: 20px; border: 3px solid var(--pri);
  border-radius: var(--r-anello);
}
.marchio-anelli::before { left: 0; }
.marchio-anelli::after { left: 14px; border-color: var(--acc); }
.marchio-nome .marchio-coda { color: var(--pri-scuro); }
.nav-desktop { display: none; }
.nav-lista {
  display: flex; align-items: center; gap: clamp(.35rem, 1.4vw, 1rem); list-style: none; margin: 0;
  padding: 0;
}
.nav-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .55rem;
  font-size: var(--t-sm); font-weight: 400; color: var(--mut); text-decoration: none;
}
.nav-link:hover { color: var(--ink); }

/* Voce attiva segnalata da un anello aperto sotto la parola */
.nav-link::after {
  content: ""; position: absolute; left: 50%; bottom: .55rem; width: 0; height: 2px;
  background: var(--pri); border-radius: 2px; transform: translateX(-50%);
  transition: width var(--tr-media);
}
.nav-link:hover::after { width: 1.1rem; }
.nav-link.attivo { color: var(--ink); font-weight: 500; }
.nav-link.attivo::after { width: 1.6rem; }
.header-azioni { display: flex; align-items: center; gap: var(--s-3); }
.header-cta { display: none; }

/* Pulsante del menu mobile, tre anelli sovrapposti */
.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 48px;
  height: 48px; padding: 0 11px; background: var(--surf); border: 1px solid var(--line-forte);
  border-radius: var(--r-sm);
}
.hamburger span {
  display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
  transition: transform var(--tr-media), opacity var(--tr-veloce);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Pannello mobile a scomparsa */
.menu-mobile {
  position: fixed; inset: 4.5rem 0 0 0; z-index: 890;
  padding: var(--s-5) clamp(1rem, 5vw, 2rem) var(--s-8); background: var(--bg);
  border-top: 1px solid var(--line); overflow-y: auto;
}
.menu-mobile ul { list-style: none; margin: 0; padding: 0; }
.menu-mobile li { border-bottom: 1px dashed var(--line-tratteggio); }
.menu-mobile a {
  display: block; padding: var(--s-4) 0; font-family: var(--f-titoli); font-size: 1.15rem;
  font-weight: 500; color: var(--ink); text-decoration: none;
}
.menu-mobile a:hover { color: var(--pri-scuro); }
.menu-mobile .btn { margin-top: var(--s-6); }
body.menu-aperto { overflow: hidden; }

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.75rem, 7vw, 5.5rem) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }

/* Catena di fondo appena accennata dietro il titolo */
.hero::before {
  content: ""; position: absolute; top: 12%; right: -6rem; width: 30rem; height: 30rem;
  background-image: repeating-radial-gradient(circle at 50% 50%, transparent 0 34px, rgba(160, 106, 22, .10) 34px 36px, transparent 36px 70px);
  border-radius: var(--r-anello); pointer-events: none;
}
.hero-griglia { position: relative; display: grid; gap: clamp(2.25rem, 5vw, 3.5rem); align-items: center; }
.hero-h1 { margin-bottom: var(--s-5); }
.hero-h1 em { font-style: normal; color: var(--pri-scuro); }
.hero-sub { font-size: var(--t-md); color: var(--mut); max-width: 34rem; margin-bottom: var(--s-6); }
.hero-sub p + p { margin-top: var(--s-3); }
.hero-punti {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); list-style: none; margin: var(--s-6) 0 0;
  padding: 0; font-size: var(--t-sm); color: var(--ink);
}
.hero-punti li { display: flex; align-items: center; gap: .55rem; }
.hero-punti li::before {
  content: ""; flex: none; width: 14px; height: 14px; border: 3px solid var(--acc);
  border-radius: var(--r-anello);
}

/* Elemento visivo: tre anelli di filiera collegati da frecce di flusso */
.catena-flusso {
  display: grid; gap: 0; padding: var(--s-5); background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--ombra-3);
}
.catena-flusso::before {
  content: ""; display: block; height: 8px; margin-bottom: var(--s-5); border-radius: 4px;
  background: linear-gradient(90deg, var(--acc), var(--pri) 55%, var(--pri-chiaro));
}
.anello {
  position: relative; padding: var(--s-4) var(--s-4) var(--s-4) 3.5rem; background: var(--surf-alt);
  border: 1px solid var(--line); border-left: 3px solid var(--pri); border-radius: var(--r-sm);
}
.anello + .anello { margin-top: 2.4rem; }

/* Freccia di flusso fra un anello e il successivo */
.anello + .anello::before {
  content: ""; position: absolute; left: 1.85rem; top: -2.1rem; width: 2px; height: 1.35rem;
  background: var(--line-forte);
}
.anello + .anello::after {
  content: ""; position: absolute; left: 1.5rem; top: -.95rem; width: 9px; height: 9px;
  border-right: 2px solid var(--pri); border-bottom: 2px solid var(--pri); transform: rotate(45deg);
}
.anello-indice {
  position: absolute; left: .9rem; top: 1.05rem; display: grid; place-items: center; width: 1.9rem;
  height: 1.9rem; font-family: var(--f-titoli); font-size: .85rem; font-weight: 700;
  color: var(--pri-scuro); background: var(--pri-nebbia); border: 2px solid var(--pri);
  border-radius: var(--r-anello);
}
.anello-titolo {
  font-family: var(--f-testo); font-size: var(--t-xs); font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mut); margin-bottom: .15rem;
}
.anello-codice {
  font-family: var(--f-titoli); font-size: 1.05rem; font-weight: 700; color: var(--ink);
  letter-spacing: .02em;
}
.anello-nota { font-size: var(--t-sm); color: var(--mut); }
.catena-piede {
  margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px dashed var(--line-tratteggio);
  font-size: var(--t-sm); color: var(--mut);
}

/* -------------------------------------------------------------------------
   8. Blocco problema
   ------------------------------------------------------------------------- */
.problema-griglia { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
.racconto p { font-size: var(--t-md); max-width: var(--w-lettura); color: var(--ink); }
.racconto p + p { margin-top: var(--s-4); }
.racconto p:first-child::first-letter {
  float: left; font-family: var(--f-titoli); font-size: 3.4rem; line-height: .82; font-weight: 800;
  color: var(--pri); padding: .18rem .5rem 0 0;
}

/* Sintomi: schede a forma di etichetta di lotto, con foro e angolo tagliato */
.sintomi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.sintomo {
  position: relative; padding: var(--s-4) var(--s-4) var(--s-4) 2.9rem; font-size: var(--t-sm);
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--ombra-1);
}
.sintomo::before {
  content: ""; position: absolute; left: 1.05rem; top: 1.35rem; width: 11px; height: 11px;
  border: 2px solid var(--pri); border-radius: var(--r-anello);
}
.sintomo::after {
  content: ""; position: absolute; right: 0; top: 0; width: 14px; height: 14px;
  background: linear-gradient(225deg, var(--bg-caldo) 50%, transparent 50%);
  border-left: 1px solid var(--line);
}

/* -------------------------------------------------------------------------
   9. Soluzione e passi
   ------------------------------------------------------------------------- */
.soluzione-testo p { font-size: var(--t-md); max-width: var(--w-lettura); color: var(--ink); }
.soluzione-testo p + p { margin-top: var(--s-4); }
.passi { display: grid; gap: var(--s-5); margin-top: clamp(2rem, 4vw, 3rem); counter-reset: passo; }
.passo {
  position: relative; counter-increment: passo; padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--ombra-1); transition: transform var(--tr-media), box-shadow var(--tr-media);
}
.passo:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); }

/* Numero del passo dentro un anello di catena */
.passo::before {
  content: counter(passo, decimal-leading-zero); position: absolute; top: -1.15rem; left: var(--s-5);
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; font-family: var(--f-titoli);
  font-size: .85rem; font-weight: 800; color: #fff; background: var(--acc);
  border: 3px solid var(--bg-caldo); border-radius: var(--r-anello);
}
.passo h3 { margin-bottom: var(--s-2); }
.passo p { color: var(--mut); font-size: var(--t-sm); }

/* -------------------------------------------------------------------------
   10. Funzionalita, schede a etichetta di lotto
   ------------------------------------------------------------------------- */
.griglia-funzioni {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: clamp(1rem, 2.2vw, 1.5rem);
}
.card-funzione {
  position: relative; padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--ombra-1);
  overflow: hidden;
  transition: transform var(--tr-media), box-shadow var(--tr-media), border-color var(--tr-media);
}

/* Banda ambrata verticale, come la costola di un raccoglitore */
.card-funzione::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, var(--pri-chiaro), var(--pri) 60%, var(--acc));
}

/* Foro dell'etichetta, in alto a destra */
.card-funzione::after {
  content: ""; position: absolute; right: 1.1rem; top: 1.1rem; width: 12px; height: 12px;
  background: var(--bg-caldo); border: 1px solid var(--line-forte); border-radius: var(--r-anello);
}
.card-funzione:hover { transform: translateY(-3px); border-color: var(--line-forte); box-shadow: var(--ombra-2); }
.card-funzione h3 { margin-bottom: var(--s-3); padding-right: 1.75rem; font-size: var(--t-md); }
.card-funzione p { color: var(--mut); font-size: var(--t-sm); }
.card-funzione p + p { margin-top: var(--s-2); }

/* -------------------------------------------------------------------------
   11. Vantaggi
   ------------------------------------------------------------------------- */
.griglia-vantaggi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.card-vantaggio {
  position: relative; padding: var(--s-6) var(--s-5);
  background: linear-gradient(180deg, var(--pri-nebbia), var(--surf) 58%);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.card-vantaggio::before {
  content: ""; position: absolute; top: var(--s-5); right: var(--s-5); width: 26px; height: 14px;
  border: 2px solid rgba(76, 107, 73, .5); border-radius: var(--r-anello); transform: rotate(-18deg);
}
.card-vantaggio h3 { margin-bottom: var(--s-3); padding-right: 2.5rem; }
.card-vantaggio p { color: var(--mut); font-size: var(--t-sm); }

/* -------------------------------------------------------------------------
   12. Testimonianze
   ------------------------------------------------------------------------- */
.griglia-testimonianze {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.citazione {
  position: relative; display: flex; flex-direction: column; padding: var(--s-6) var(--s-5) var(--s-5);
  background: var(--surf); border: 1px solid var(--line); border-top: 4px solid var(--acc);
  border-radius: 0 0 var(--r-md) var(--r-md); box-shadow: var(--ombra-1);
}
.citazione::before {
  content: "\201C"; position: absolute; top: -.35rem; right: 1.1rem; font-family: var(--f-titoli);
  font-size: 4rem; line-height: 1; color: rgba(160, 106, 22, .22);
}
.citazione blockquote { margin: 0 0 var(--s-5); font-size: var(--t-sm); color: var(--ink); }
.citazione-firma {
  margin-top: auto; padding-top: var(--s-4); border-top: 1px dashed var(--line-tratteggio);
  font-size: var(--t-sm);
}
.citazione-nome { display: block; font-family: var(--f-titoli); font-weight: 700; }
.citazione-ruolo { color: var(--mut); }
.nota-scenari {
  margin-top: var(--s-5); padding: var(--s-3) var(--s-4); font-size: var(--t-sm); color: var(--mut);
  background: var(--acc-velo); border-left: 3px solid var(--acc);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* -------------------------------------------------------------------------
   13. Prezzi
   ------------------------------------------------------------------------- */
.griglia-prezzi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem); align-items: stretch;
}
.piano {
  display: flex; flex-direction: column; padding: var(--s-6) var(--s-5); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--ombra-1);
}
.piano-nome { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.piano-descrizione { font-size: var(--t-sm); color: var(--mut); min-height: 3.4rem; margin-bottom: var(--s-4); }
.piano-prezzo {
  display: flex; align-items: baseline; gap: .4rem; padding-bottom: var(--s-4);
  margin-bottom: var(--s-4); border-bottom: 1px dashed var(--line-tratteggio);
}
.piano-cifra {
  font-family: var(--f-titoli); font-size: clamp(2.25rem, 1.9rem + 1.5vw, 3rem); font-weight: 800;
  line-height: 1; color: var(--pri-scuro);
}
.piano-periodo { font-size: var(--t-sm); color: var(--mut); }
.piano-lista { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: grid; gap: var(--s-3); }
.piano-lista li { position: relative; padding-left: 1.8rem; font-size: var(--t-sm); color: var(--ink); }
.piano-lista li::before {
  content: ""; position: absolute; left: 0; top: .5rem; width: 11px; height: 11px;
  border: 2px solid var(--acc); border-radius: var(--r-anello);
}
.piano .btn { margin-top: auto; }

/* Piano in evidenza: cornice ambrata e nastro di lotto */
.piano-evidenza {
  position: relative; border: 2px solid var(--pri); box-shadow: var(--ombra-3);
  background: linear-gradient(180deg, var(--pri-nebbia), var(--surf) 30%);
}
.piano-evidenza::before {
  content: "Il più scelto"; position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  padding: .22rem .9rem; font-size: var(--t-xs); font-weight: 500; letter-spacing: .09em;
  text-transform: uppercase; color: #fff; background: var(--pri-scuro); border-radius: var(--r-sm);
  white-space: nowrap;
}
.nota-prezzi { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--mut); text-align: center; }

/* -------------------------------------------------------------------------
   14. FAQ a fisarmonica
   ------------------------------------------------------------------------- */
.faq { display: grid; gap: var(--s-3); max-width: 54rem; }
.faq-item {
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
  transition: border-color var(--tr-veloce), box-shadow var(--tr-veloce);
}
.faq-item:hover { border-color: var(--line-forte); }
.faq-domanda {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%;
  min-height: 56px; padding: var(--s-4) var(--s-5); font-family: var(--f-titoli);
  font-size: var(--t-md); font-weight: 700; line-height: 1.35; text-align: left; color: var(--ink);
  background: transparent; border: 0;
}
.faq-domanda:hover { color: var(--pri-scuro); }

/* Indicatore: anello che si riempie quando la risposta è aperta */
.faq-segno {
  position: relative; flex: none; width: 26px; height: 26px; border: 2px solid var(--acc);
  border-radius: var(--r-anello);
  transition: background-color var(--tr-veloce), transform var(--tr-media);
}
.faq-segno::before,
.faq-segno::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--acc-scuro);
  transform: translate(-50%, -50%);
}
.faq-segno::before { width: 11px; height: 2px; }
.faq-segno::after { width: 2px; height: 11px; transition: opacity var(--tr-veloce); }
.faq-domanda[aria-expanded="true"] .faq-segno { background: var(--acc-velo); transform: rotate(180deg); }
.faq-domanda[aria-expanded="true"] .faq-segno::after { opacity: 0; }
.faq-risposta { padding: 0 var(--s-5) var(--s-5); }
.faq-risposta p { color: var(--mut); font-size: var(--t-sm); max-width: var(--w-lettura); }
.faq-risposta p + p { margin-top: var(--s-3); }

/* -------------------------------------------------------------------------
   15. Card articolo e griglia del blog
   ------------------------------------------------------------------------- */
.griglia-articoli {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.card-articolo {
  display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--ombra-1);
  transition: transform var(--tr-media), box-shadow var(--tr-media);
}
.card-articolo:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); }
.card-articolo-figura { margin: 0; background: var(--bg-caldo); }
.card-articolo-figura img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-articolo-corpo { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }
.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: var(--s-3);
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--mut);
}
.card-meta .etichetta-angolo {
  padding: .15rem .55rem; color: var(--acc-scuro); background: var(--acc-velo);
  border: 1px solid rgba(76, 107, 73, .28); border-radius: var(--r-xs);
}
.card-articolo h3 { font-size: var(--t-md); line-height: 1.28; margin-bottom: var(--s-3); }
.card-articolo h3 a { color: var(--ink); text-decoration: none; }
.card-articolo h3 a:hover { color: var(--pri-scuro); }
.card-articolo p { font-size: var(--t-sm); color: var(--mut); margin-bottom: var(--s-4); }
.card-articolo .btn-testo { margin-top: auto; }

/* -------------------------------------------------------------------------
   16. Form di contatto
   ------------------------------------------------------------------------- */
.blocco-form { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
.form-intro p { color: var(--mut); font-size: var(--t-md); }
.form-intro p + p { margin-top: var(--s-3); }
.form-contatto {
  display: grid; gap: var(--s-4); padding: clamp(1.25rem, 3vw, 2.25rem); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--ombra-2);
}
/* Filo di catena in cima al riquadro del form */
.form-contatto::before {
  content: ""; display: block; height: 10px;
  margin: calc(-1 * clamp(1.25rem, 3vw, 2.25rem)) calc(-1 * clamp(1.25rem, 3vw, 2.25rem)) 0;
  background: linear-gradient(90deg, var(--acc), var(--pri) 60%, var(--pri-chiaro));
  border-radius: var(--r-md) var(--r-md) 0 0;
}
.campo { display: grid; gap: .4rem; }
.campo-doppio { display: grid; gap: var(--s-4); }
.etichetta { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.etichetta .obbligatorio { color: var(--pri-scuro); }
.form-contatto input,
.form-contatto select,
.form-contatto textarea {
  width: 100%; min-height: 48px; padding: .7rem .9rem; font-size: var(--t-sm); color: var(--ink);
  background: var(--surf-alt); border: 1px solid var(--line-forte); border-radius: var(--r-sm);
  transition: border-color var(--tr-veloce), box-shadow var(--tr-veloce), background-color var(--tr-veloce);
}
.form-contatto textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.form-contatto input:hover,
.form-contatto select:hover,
.form-contatto textarea:hover { border-color: var(--mut); }
.form-contatto input:focus,
.form-contatto select:focus,
.form-contatto textarea:focus {
  outline: none; background: var(--surf); border-color: var(--pri);
  box-shadow: 0 0 0 3px rgba(160, 106, 22, .18);
}
.aiuto-campo { font-size: var(--t-xs); color: var(--mut); }
.nota-privacy { font-size: var(--t-xs); color: var(--mut); }
.alternativa-mail { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--mut); }

/* Campo trappola antispam, nascosto alla vista */
.hp { position: absolute; left: -9999px; }

/* -------------------------------------------------------------------------
   17. Riquadro autore
   ------------------------------------------------------------------------- */
.autore-box {
  display: grid; gap: var(--s-5); padding: clamp(1.25rem, 3vw, 2rem); background: var(--surf);
  border: 1px solid var(--line); border-left: 4px solid var(--pri); border-radius: var(--r-md);
  box-shadow: var(--ombra-1);
}
.autore-foto {
  width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-anello);
  border: 3px solid var(--pri-velo);
}
.autore-nome { font-size: var(--t-lg); margin-bottom: .2rem; }
.autore-ruolo { font-size: var(--t-sm); color: var(--mut); margin-bottom: var(--s-3); }
.autore-bio { font-size: var(--t-sm); color: var(--ink); }
.autore-social {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; margin: var(--s-4) 0 0;
  padding: 0; font-size: var(--t-sm);
}
.autore-social a { display: inline-flex; align-items: center; min-height: 32px; }

/* -------------------------------------------------------------------------
   18. Pagina articolo: intestazione, corpo, tipografia lunga
   ------------------------------------------------------------------------- */
.briciole { padding-block: var(--s-4); font-size: var(--t-xs); color: var(--mut); }
.briciole ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; list-style: none; margin: 0;
  padding: 0;
}
.briciole li { display: flex; align-items: center; gap: .35rem; }
.briciole li + li::before { content: ""; width: 5px; height: 5px; border: 1px solid var(--line-tratteggio); border-radius: var(--r-anello); }
.briciole a { color: var(--mut); text-decoration-color: var(--line-tratteggio); }
.briciole [aria-current="page"] { color: var(--ink); }
.articolo-testata { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.articolo-testata h1 { margin-bottom: var(--s-4); font-size: var(--t-2xl); max-width: 32ch; }
.meta-articolo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; font-size: var(--t-sm);
  color: var(--mut);
}
.meta-articolo .etichetta-angolo {
  padding: .15rem .6rem; font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase;
  color: var(--acc-scuro); background: var(--acc-velo); border: 1px solid rgba(76, 107, 73, .28);
  border-radius: var(--r-xs);
}
.meta-articolo .separatore { width: 6px; height: 6px; border: 1px solid var(--line-tratteggio); border-radius: var(--r-anello); }
.figura-evidenza { margin: 0 0 clamp(1.75rem, 4vw, 2.75rem); }
.figura-evidenza img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--ombra-2); }
.didascalia {
  margin-top: var(--s-3); padding-left: var(--s-3); font-size: var(--t-xs); color: var(--mut);
  border-left: 2px solid var(--pri-velo);
}
.chapo {
  max-width: var(--w-lettura); margin-bottom: clamp(1.75rem, 4vw, 2.5rem); padding-left: var(--s-5);
  font-family: var(--f-titoli); font-size: var(--t-lg); line-height: 1.5; color: var(--ink);
  border-left: 3px solid var(--pri);
}

/* Corpo dell'articolo, misura di lettura contenuta */
.corpo-articolo { font-size: var(--t-md); }
.corpo-articolo > p,
.corpo-articolo > ul,
.corpo-articolo > ol,
.corpo-articolo > h2,
.corpo-articolo > h3,
.corpo-articolo > blockquote,
.corpo-articolo > figure { max-width: var(--w-lettura); }
.corpo-articolo p { margin-bottom: var(--s-4); }
.corpo-articolo h2 {
  position: relative; margin: clamp(2.25rem, 5vw, 3.25rem) 0 var(--s-4); padding-top: var(--s-5);
  font-size: var(--t-xl);
}
/* Anelli di catena sopra ogni H2 del corpo */
.corpo-articolo h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 74px; height: 12px;
  background-image: radial-gradient(circle at 8px 50%, transparent 0 4px, var(--pri) 4px 5.5px, transparent 6px);
  background-size: 18px 100%; background-repeat: repeat-x;
}
.corpo-articolo h3 { margin: var(--s-6) 0 var(--s-3); font-size: var(--t-lg); color: var(--acc-scuro); }
.corpo-articolo ul,
.corpo-articolo ol { margin: 0 0 var(--s-5); padding-left: 1.5rem; }
.corpo-articolo li { margin-bottom: var(--s-2); }
.corpo-articolo ul { list-style: none; padding-left: 1.6rem; }
.corpo-articolo ul > li { position: relative; }
.corpo-articolo ul > li::before {
  content: ""; position: absolute; left: -1.35rem; top: .62em; width: 9px; height: 9px;
  border: 2px solid var(--acc); border-radius: var(--r-anello);
}
.corpo-articolo ol { list-style: decimal; }
.corpo-articolo ol > li::marker { color: var(--pri-scuro); font-weight: 700; }
.corpo-articolo blockquote {
  margin: var(--s-6) 0; padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
  font-family: var(--f-titoli); font-size: var(--t-lg); line-height: 1.5; color: var(--ink);
  background: var(--pri-nebbia); border-left: 4px solid var(--pri);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.corpo-articolo blockquote p:last-child { margin-bottom: 0; }
.corpo-articolo figure { margin: var(--s-6) 0; }
.corpo-articolo figure img { border: 1px solid var(--line); border-radius: var(--r-sm); }
.corpo-articolo figcaption { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--mut); }
.corpo-articolo code {
  padding: .1rem .35rem; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: .88em; color: var(--pri-cupo); background: var(--pri-velo);
  border: 1px solid rgba(160, 106, 22, .25); border-radius: var(--r-xs);
}

/* Tabelle: scorrono in orizzontale dentro il proprio contenitore */
.tabella-scroll { overflow-x: auto; margin: var(--s-6) 0; }
.corpo-articolo table,
.tabella {
  width: 100%; min-width: 32rem; margin: var(--s-6) 0; font-size: var(--t-sm); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.corpo-articolo table th,
.tabella th {
  padding: .75rem .9rem; text-align: left; font-family: var(--f-testo); font-weight: 500;
  font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--acc-scuro);
  background: var(--acc-velo); border-bottom: 1px solid var(--line);
}
.corpo-articolo table td,
.tabella td { padding: .75rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.corpo-articolo table tbody tr:last-child td,
.tabella tbody tr:last-child td { border-bottom: 0; }
.corpo-articolo table tbody tr:nth-child(even),
.tabella tbody tr:nth-child(even) { background: var(--surf-alt); }

/* Richiamo al prodotto dentro il corpo */
.richiamo {
  margin: clamp(2rem, 4vw, 3rem) 0; padding: var(--s-5); background: var(--acc-velo);
  border: 1px solid rgba(76, 107, 73, .3); border-radius: var(--r-md);
}
.richiamo h2, .richiamo h3 { margin-top: 0; padding-top: 0; }
.richiamo h2::before { display: none; }

/* -------------------------------------------------------------------------
   19. Blocco "Da leggere anche"
   ------------------------------------------------------------------------- */
.da-leggere {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.da-leggere > h2 { position: relative; margin-bottom: var(--s-6); padding-top: var(--s-5); font-size: var(--t-xl); }
.da-leggere > h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 92px; height: 12px;
  background-image: radial-gradient(circle at 8px 50%, transparent 0 4px, var(--acc) 4px 5.5px, transparent 6px);
  background-size: 18px 100%; background-repeat: repeat-x;
}

/* -------------------------------------------------------------------------
   20. Footer
   ------------------------------------------------------------------------- */
.sito-footer {
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--bg-caldo); border-top: 1px solid var(--line); position: relative;
}
/* Catena continua in cima al footer */
.sito-footer::before {
  content: ""; position: absolute; inset-inline: 0; top: -9px; height: 18px;
  background-image: radial-gradient(circle at 14px 50%, transparent 0 5.5px, var(--line-forte) 5.5px 7px, transparent 7.5px);
  background-size: 28px 100%; background-repeat: repeat-x; pointer-events: none;
}
.footer-griglia { display: grid; gap: clamp(1.75rem, 3.5vw, 2.75rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.footer-col h2, .footer-col h3 {
  margin-bottom: var(--s-4); font-family: var(--f-testo); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--acc-scuro);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-col li { font-size: var(--t-sm); }
.footer-col a { color: var(--mut); text-decoration: none; }
.footer-col a:hover { color: var(--pri-scuro); text-decoration: underline; }
.footer-marchio { max-width: 22rem; }
.footer-claim { margin: var(--s-3) 0 var(--s-4); font-size: var(--t-sm); color: var(--mut); }
.footer-contatto { font-size: var(--t-sm); }

/* Colonna ecosistema: ogni link è un anello della catena */
.footer-eco { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.footer-eco li { position: relative; }
.eco-link {
  display: block; padding: .55rem .7rem .55rem 1.9rem; font-size: var(--t-sm); line-height: 1.45;
  color: var(--mut); background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-sm);
  text-decoration: none;
  transition: border-color var(--tr-veloce), color var(--tr-veloce), transform var(--tr-veloce);
}
.eco-link::before {
  content: ""; position: absolute; left: .65rem; top: .95rem; width: 10px; height: 10px;
  border: 2px solid var(--pri); border-radius: var(--r-anello);
}
.eco-link:hover { color: var(--ink); border-color: var(--pri); transform: translateX(2px); text-decoration: none; }
.eco-nome { font-weight: 500; color: var(--ink); }
.btn-preferenze {
  margin-top: var(--s-2); padding: 0; font-size: var(--t-sm); color: var(--mut); background: none;
  border: 0; border-bottom: 1px dashed var(--line-tratteggio); min-height: 32px;
}
.btn-preferenze:hover { color: var(--pri-scuro); border-bottom-color: var(--pri); }
.footer-barra {
  padding-block: var(--s-5); border-top: 1px solid var(--line-forte); font-size: var(--t-xs);
  color: var(--mut);
}
.footer-barra .contenitore {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); justify-content: space-between;
  align-items: center;
}
.footer-barra a { color: var(--mut); }

/* -------------------------------------------------------------------------
   21. Banner cookie
   ------------------------------------------------------------------------- */
.cookie-banner {
  position: fixed; left: 50%; bottom: clamp(.75rem, 2vw, 1.5rem); transform: translateX(-50%);
  z-index: 1000; width: min(46rem, calc(100% - 1.5rem)); padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--surf); border: 1px solid var(--line-forte); border-top: 4px solid var(--pri);
  border-radius: var(--r-md); box-shadow: var(--ombra-3);
}
.cookie-titolo { font-size: var(--t-md); margin-bottom: var(--s-2); }
.cookie-testo { font-size: var(--t-sm); color: var(--mut); margin-bottom: var(--s-4); }
.cookie-azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
/* Accetta e Rifiuta hanno la stessa dimensione e lo stesso peso visivo */
.cookie-azioni .btn { flex: 1 1 12rem; }
.cookie-link-personalizza {
  font-size: var(--t-sm); color: var(--mut); background: none; border: 0;
  border-bottom: 1px dashed var(--line-tratteggio); min-height: 44px; padding: 0;
}
.cookie-link-personalizza:hover { color: var(--pri-scuro); }
.cookie-dettaglio {
  margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--line-tratteggio);
  font-size: var(--t-sm); color: var(--mut);
}
.cookie-dettaglio table { min-width: 0; font-size: var(--t-xs); margin: var(--s-3) 0 0; }

/* -------------------------------------------------------------------------
   22. Pagine di testo (legali, mappa del sito, grazie)
   ------------------------------------------------------------------------- */
.pagina-testo { max-width: var(--w-stretto); }
.pagina-testo h2 { margin: var(--s-7) 0 var(--s-3); font-size: var(--t-xl); }
.pagina-testo h3 { margin: var(--s-5) 0 var(--s-2); }
.pagina-testo p { margin-bottom: var(--s-4); max-width: var(--w-lettura); }
.pagina-testo ul, .pagina-testo ol { margin-bottom: var(--s-5); max-width: var(--w-lettura); }
.pagina-testo li { margin-bottom: var(--s-2); }
.aggiornamento {
  display: inline-block; margin-bottom: var(--s-5); padding: .25rem .7rem; font-size: var(--t-xs);
  color: var(--mut); background: var(--bg-caldo); border: 1px solid var(--line);
  border-radius: var(--r-xs);
}
.mappa-elenco { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.mappa-elenco li { padding-left: 1.6rem; position: relative; }
.mappa-elenco li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px;
  border: 2px solid var(--pri); border-radius: var(--r-anello);
}

/* -------------------------------------------------------------------------
   23. Utilità
   ------------------------------------------------------------------------- */
.solo-lettori {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.testo-mut { color: var(--mut); }
.testo-centro { text-align: center; }
.mt-6 { margin-top: var(--s-6); }
.mb-6 { margin-bottom: var(--s-6); }

/* -------------------------------------------------------------------------
   24. Responsive, da 320px a 1440px
   ------------------------------------------------------------------------- */

@media (min-width: 40em) {
  .campo-doppio { grid-template-columns: 1fr 1fr; }
  .autore-box { grid-template-columns: auto 1fr; align-items: start; }
  .sintomi { grid-template-columns: 1fr 1fr; }
  .footer-griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 56em) {
  .hero-griglia { grid-template-columns: 1.05fr .95fr; }
  .problema-griglia { grid-template-columns: 1.25fr .75fr; }
  .sintomi { grid-template-columns: 1fr; }
  .passi { grid-template-columns: repeat(3, 1fr); }
  .blocco-form { grid-template-columns: .9fr 1.1fr; }
  .footer-griglia { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.3fr; }
  .nav-desktop { display: block; }
  .header-cta { display: inline-flex; }
  .hamburger { display: none; }
  .menu-mobile { display: none !important; }
}

@media (min-width: 75em) {
  .articolo-testata h1 { font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); }
}

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

/* -------------------------------------------------------------------------
   26. Stampa
   ------------------------------------------------------------------------- */

@media print {
  .sito-header, .menu-mobile, .cookie-banner, .sito-footer, .btn, .da-leggere { display: none !important; }
  body { background: #fff; color: #000; }
  .corpo-articolo > * { max-width: none; }
  a { text-decoration: none; color: #000; }
}