@charset "utf-8";
/* =====================================================================
   LibrettoCaldaie - foglio di stile unico del sito
   Direzione artistica: calore controllato su fondo chiaro. Rame del fuoco,
   blu ghisa degli strumenti, carta calda della documentazione tecnica.
   Motivo ricorrente: archi di manometro, giunti e flange delle tubazioni,
   sfumatura di fiamma. Tutte le decorazioni sono disegnate in CSS puro:
   nessuna immagine esterna serve per il decoro.
   Tema chiaro obbligatorio: nessun blocco per la preferenza scura.
   ---------------------------------------------------------------------
   Indice
    1. Font          2. Reset         3. Variabili     4. Tipografia
    5. Struttura     6. Decorazioni   7. Testata       8. Bottoni
    9. Hero         10. Problema     11. Soluzione    12. Funzionalita
   13. Vantaggi     14. Prova sociale 15. Prezzi      16. Domande
   17. Schede blog  18. Articolo     19. Autore       20. Modulo
   21. Piede        22. Cookie       23. Servizio     24. Schermi
   25. Movimento e stampa
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Font: Rajdhani per i titoli, lettering tecnico da quadrante.
      Nunito Sans per il testo corrente, umanista e molto leggibile.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   2. Reset moderno e sobrio
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* la testata resta fissa in alto: lo scorrimento agli ancoraggi la evita */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, 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%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* ---------------------------------------------------------------------
   3. Variabili: palette approvata del progetto e derivate di lavoro.
      bg carta calda, surf superfici, ink testo, mut testo secondario,
      pri rame del fuoco, acc blu strumento, line filetti chiari.
   --------------------------------------------------------------------- */
:root {
  --bg: #FAF7F4; --surf: #FFFFFF; --ink: #1E1A16; --mut: #645B52;
  --pri: #AC3C13; --acc: #1F6F8B; --line: #E8E1D8;
  /* derivate del rame: stato premuto, fiamma chiara, due velature */
  --pri-scuro: #8A2F0D; --pri-chiaro: #D8642B; --pri-velo: #FBEDE6; --pri-velo2: #F5DFD3;
  /* derivate del blu strumento */
  --acc-scuro: #17576E; --acc-velo: #E7F1F5; --acc-velo2: #D3E5EC;
  /* ghisa, carta e filetti */
  --ghisa: #4A443E; --ghisa-velo: #EFEAE4; --line-forte: #D8CEC2;
  --carta: #F4EFE9; --carta-forte: #EEE6DD; --verde: #3E5B22; --verde-velo: #EDF3E4;
  /* raggi asimmetrici, come la piastra di uno strumento */
  --r-card: 18px 4px 18px 4px; --r-mini: 10px 3px 10px 3px;
  --r-btn: 8px 3px 8px 3px; --r-tondo: 999px;
  /* ombre morbide e calde, mai grigie */
  --om-1: 0 1px 2px rgba(30, 26, 22, .06);
  --om-2: 0 2px 4px rgba(30, 26, 22, .05), 0 10px 24px rgba(30, 26, 22, .07);
  --om-3: 0 4px 8px rgba(30, 26, 22, .06), 0 20px 44px rgba(30, 26, 22, .10);
  --om-rame: 0 10px 26px rgba(172, 60, 19, .16);
  /* sfumatura di fiamma, ricorrente su bottoni, filetti e numeri */
  --fiamma: linear-gradient(100deg, var(--pri-scuro) 0%, var(--pri) 45%, var(--pri-chiaro) 100%);
  /* spaziature e ritmo verticale */
  --sp-1: .35rem; --sp-2: .7rem; --sp-3: 1.1rem; --sp-4: 1.6rem; --sp-5: 2.4rem; --sp-6: 3.4rem;
  --sez-y: clamp(3.4rem, 7vw, 6.2rem);
  /* famiglie tipografiche con ripiego reale */
  --f-tit: 'Rajdhani', 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --f-testo: 'Nunito Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --f-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  /* misura di lettura degli articoli, fra 62 e 72 caratteri */
  --misura: 66ch;
}

/* ---------------------------------------------------------------------
   4. Tipografia di base, scala armonica fluida
   --------------------------------------------------------------------- */
body {
  background-color: var(--bg); color: var(--ink);
  font-family: var(--f-testo); font-weight: 400; line-height: 1.68;
  font-size: clamp(1rem, .96rem + .22vw, 1.075rem);
  overflow-x: hidden;
  /* due velature calde, come la luce di una sala caldaia */
  background-image:
    radial-gradient(circle at 12% 0%, rgba(172, 60, 19, .05), transparent 42%),
    radial-gradient(circle at 92% 6%, rgba(31, 111, 139, .05), transparent 38%);
  background-repeat: no-repeat;
}
h1, h2, h3, h4, h5 {
  font-family: var(--f-tit); font-weight: 700; line-height: 1.12;
  color: var(--ink); text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 3vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.25rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.28rem, 1.1rem + .8vw, 1.6rem); }
h4 { font-size: clamp(1.12rem, 1.02rem + .4vw, 1.3rem); }
p { margin-bottom: var(--sp-3); }
p:last-child { margin-bottom: 0; }
a { color: var(--pri-scuro); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--pri); }
strong, b { font-weight: 700; }
small { font-size: .875rem; }
::selection { background: var(--pri-velo2); color: var(--ink); }
/* messa a fuoco sempre visibile, uguale su tutto il sito */
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 2px; }

/* ---------------------------------------------------------------------
   5. Struttura, contenitori, sezioni e utility
   --------------------------------------------------------------------- */
.wrap { width: 100%; max-width: 1176px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.wrap-stretto { width: 100%; max-width: 820px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.sezione { position: relative; padding-block: var(--sez-y); }
.sezione--carta { background: var(--surf); }
.sezione--calda { background: var(--carta); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sezione--strumento {
  background: linear-gradient(180deg, var(--acc-velo) 0%, var(--bg) 100%);
  border-top: 1px solid var(--acc-velo2);
}
/* fascia con l'arco di manometro stampato nell'angolo alto a destra */
.sezione--manometro { overflow: hidden; }
.sezione--manometro::before {
  content: ""; position: absolute; top: -180px; right: -160px;
  width: 460px; height: 460px; border-radius: 50%; border: 2px solid var(--line-forte);
  background: repeating-conic-gradient(from 200deg, var(--line-forte) 0deg .35deg, transparent .35deg 9deg);
  -webkit-mask-image: radial-gradient(circle, transparent 58%, #000 60%, #000 100%);
  mask-image: radial-gradient(circle, transparent 58%, #000 60%, #000 100%);
  opacity: .75; pointer-events: none;
}
.intestazione-sezione { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.intestazione-sezione--centrata { margin-inline: auto; text-align: center; }
.intestazione-sezione--centrata .occhiello { justify-content: center; }
.occhiello {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-tit); font-weight: 600; font-size: .95rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pri-scuro);
  margin-bottom: var(--sp-2);
}
.occhiello::before { content: ""; width: 26px; height: 8px; border-radius: 2px; background: var(--fiamma); }
.titolo-sezione { margin-bottom: var(--sp-3); }
.intro-sezione { color: var(--mut); font-size: 1.06rem; }
.griglia-2, .griglia-3, .griglia-4 { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.griglia-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.scheda {
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(1.25rem, 2.4vw, 1.9rem); box-shadow: var(--om-1);
}
.centro { text-align: center; }
.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;
}
/* campo trappola del modulo: fuori schermo, resta leggibile ai robot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.salta-al-contenuto {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--pri); color: #FFFFFF; text-decoration: none;
  font-family: var(--f-tit); font-weight: 600; letter-spacing: .05em;
  padding: .75rem 1.25rem; border-radius: var(--r-btn); transition: top .18s ease;
}
.salta-al-contenuto:focus { top: 1rem; color: #FFFFFF; }

/* ---------------------------------------------------------------------
   6. Decorazioni proprie del sito, tutte in CSS puro:
      quadrante di manometro, giunto di tubazione, tacche di scala,
      filetto di fiamma, bullone esagonale, targhetta di quadro.
   --------------------------------------------------------------------- */
.manometro {
  position: relative; display: grid; place-items: center;
  width: clamp(190px, 46vw, 250px); aspect-ratio: 1 / 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, var(--carta) 68%, var(--carta-forte) 100%);
  border: 10px solid var(--ghisa);
  box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 8px 22px rgba(30, 26, 22, .10), var(--om-3);
}
/* corona di tacche della scala, gradiente conico ripetuto */
.manometro::before {
  content: ""; position: absolute; inset: 12px; border-radius: 50%;
  background: repeating-conic-gradient(from 135deg, var(--ghisa) 0deg .9deg, transparent .9deg 13.5deg);
  -webkit-mask-image: radial-gradient(circle, transparent 76%, #000 78%);
  mask-image: radial-gradient(circle, transparent 76%, #000 78%);
}
/* settore rosso della scala, la zona di attenzione del quadrante */
.manometro::after {
  content: ""; position: absolute; inset: 18px; border-radius: 50%;
  background: conic-gradient(from 42deg, var(--pri) 0deg 58deg, transparent 58deg);
  -webkit-mask-image: radial-gradient(circle, transparent 70%, #000 72%, #000 84%, transparent 86%);
  mask-image: radial-gradient(circle, transparent 70%, #000 72%, #000 84%, transparent 86%);
}
.manometro__lancetta {
  position: absolute; left: 50%; bottom: 50%; width: 4px; height: 34%;
  background: linear-gradient(180deg, var(--pri) 0%, var(--ghisa) 100%);
  border-radius: 2px 2px 0 0; transform-origin: 50% 100%;
  transform: translateX(-50%) rotate(-38deg);
  animation: taratura 5.5s ease-in-out infinite alternate;
}
.manometro__perno {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ghisa); box-shadow: inset 0 0 0 4px var(--carta);
}
.manometro__valore {
  position: absolute; bottom: 22%; font-family: var(--f-tit); font-weight: 700;
  font-size: 1.15rem; letter-spacing: .08em; color: var(--acc-scuro);
}
.manometro__etichetta {
  position: absolute; top: 24%; font-family: var(--f-tit); font-weight: 600;
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mut);
}
@keyframes taratura {
  0% { transform: translateX(-50%) rotate(-42deg); }
  60% { transform: translateX(-50%) rotate(30deg); }
  100% { transform: translateX(-50%) rotate(24deg); }
}
/* giunto di tubazione: due flange bullonate su un tratto di tubo */
.giunto {
  position: relative; height: 26px; max-width: 340px; margin: clamp(1.8rem, 4vw, 3rem) auto;
  background: linear-gradient(180deg, var(--carta-forte) 0%, var(--line-forte) 45%, var(--carta-forte) 100%);
  border: 1px solid var(--line-forte); border-radius: var(--r-tondo);
}
.giunto::before, .giunto::after {
  content: ""; position: absolute; top: -7px; width: 16px; height: 40px;
  border-radius: 4px; background: var(--ghisa-velo); border: 1px solid var(--line-forte);
  background-image:
    radial-gradient(circle at 50% 22%, var(--mut) 0 2px, transparent 2px),
    radial-gradient(circle at 50% 78%, var(--mut) 0 2px, transparent 2px);
}
.giunto::before { left: 22%; }
.giunto::after { right: 22%; }
/* riga di tacche da scala graduata, separatore leggero */
.tacche {
  height: 12px; border-bottom: 1px solid var(--line); opacity: .9;
  background-image: repeating-linear-gradient(90deg, var(--line-forte) 0 1px, transparent 1px 12px);
}
/* filetto di fiamma, in testa alle schede importanti */
.fiamma { height: 5px; border-radius: var(--r-tondo); background: var(--fiamma); }
/* bullone esagonale della flangia, usato come segno grafico e come numero */
.flangia {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px;
  font-family: var(--f-tit); font-weight: 700; font-size: 1rem; color: #FFFFFF;
  background: var(--fiamma);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.flangia--blu { background: linear-gradient(140deg, var(--acc) 0%, var(--acc-scuro) 100%); }
/* targhetta metallica da quadro, per note brevi ed etichette */
.targhetta {
  display: inline-block; padding: .3rem .7rem; font-family: var(--f-tit); font-weight: 600;
  font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acc-scuro);
  background: var(--acc-velo); border: 1px solid var(--acc-velo2); border-radius: var(--r-mini);
}

/* ---------------------------------------------------------------------
   7. Testata fissa, navigazione e menu a scomparsa
   --------------------------------------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250, 247, 244, .93); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
/* sottile tubazione colorata sotto la testata */
.testata::after {
  content: ""; display: block; height: 3px; opacity: .85;
  background: linear-gradient(90deg, var(--pri) 0%, var(--pri-chiaro) 32%, var(--acc) 100%);
}
.testata__interno { display: flex; align-items: center; gap: var(--sp-3); min-height: 72px; padding-block: .5rem; }
.marchio {
  display: inline-flex; align-items: center; gap: .6rem; margin-right: auto;
  font-family: var(--f-tit); font-size: 1.35rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.marchio__sigla {
  display: grid; place-items: center; width: 40px; height: 40px;
  color: #FFFFFF; font-weight: 700; font-size: 1.02rem; letter-spacing: .03em;
  background: var(--fiamma);
  clip-path: polygon(50% 0%, 100% 27%, 100% 73%, 50% 100%, 0% 73%, 0% 27%);
}
.marchio__nome b { font-weight: 700; color: var(--pri-scuro); }
.nav { display: none; align-items: center; gap: .2rem; }
.nav__link {
  position: relative; display: inline-block; padding: .55rem .7rem; border-radius: 6px;
  font-family: var(--f-tit); font-weight: 600; font-size: 1.06rem; letter-spacing: .03em;
  color: var(--ink); text-decoration: none;
}
.nav__link::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .3rem; height: 2px;
  background: var(--pri); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav__link:hover { color: var(--pri-scuro); }
.nav__link:hover::after, .nav__link.is-attivo::after { transform: scaleX(1); }
.nav__link.is-attivo { color: var(--pri-scuro); }
.testata__azione { display: flex; align-items: center; gap: .6rem; }
.apri-menu {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 46px; padding: .5rem .85rem;
  background: var(--surf); border: 1px solid var(--line-forte); border-radius: var(--r-btn);
  font-family: var(--f-tit); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink);
}
.apri-menu__barre, .apri-menu__barre::before, .apri-menu__barre::after {
  display: block; width: 20px; height: 2px; background: var(--pri); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.apri-menu__barre { position: relative; }
.apri-menu__barre::before, .apri-menu__barre::after { content: ""; position: absolute; left: 0; }
.apri-menu__barre::before { top: -6px; }
.apri-menu__barre::after { top: 6px; }
.apri-menu[aria-expanded="true"] .apri-menu__barre { background: transparent; }
.apri-menu[aria-expanded="true"] .apri-menu__barre::before { transform: translateY(6px) rotate(45deg); }
.apri-menu[aria-expanded="true"] .apri-menu__barre::after { transform: translateY(-6px) rotate(-45deg); }
.menu-mobile {
  display: none; background: var(--surf); border-top: 1px solid var(--line);
  padding-block: 1.2rem 1.6rem; box-shadow: var(--om-2);
}
.menu-mobile.is-aperto { display: block; }
.menu-mobile__lista { display: grid; gap: .15rem; margin-bottom: 1.1rem; }
.menu-mobile__lista a {
  display: block; padding: .8rem .6rem; border-bottom: 1px dashed var(--line);
  font-family: var(--f-tit); font-weight: 600; font-size: 1.15rem;
  color: var(--ink); text-decoration: none;
}
.menu-mobile__lista a:hover { color: var(--pri-scuro); background: var(--pri-velo); }
/* blocco dello scorrimento quando il pannello è aperto */
body.menu-aperto { overflow: hidden; }

/* ---------------------------------------------------------------------
   8. Bottoni: primario in fiamma, secondario con contorno blu strumento
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .75rem 1.5rem; border: 1px solid transparent;
  border-radius: var(--r-btn); font-family: var(--f-tit); font-weight: 700;
  font-size: 1.08rem; letter-spacing: .05em; text-align: center; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.btn--primario { color: #FFFFFF; background: var(--fiamma); border-color: var(--pri-scuro); box-shadow: var(--om-rame); }
.btn--primario:hover { color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(172, 60, 19, .24); }
.btn--primario:active { transform: translateY(0); }
.btn--secondario { color: var(--acc-scuro); background: var(--surf); border-color: var(--acc); box-shadow: var(--om-1); }
.btn--secondario:hover { color: #FFFFFF; background: var(--acc); border-color: var(--acc-scuro); }
.btn--fantasma { color: var(--ink); background: transparent; border-color: var(--line-forte); }
.btn--fantasma:hover { color: var(--pri-scuro); border-color: var(--pri); background: var(--pri-velo); }
.btn--piccolo { min-height: 44px; padding: .5rem 1rem; font-size: 1rem; }
.btn--blocco { display: flex; width: 100%; }

/* ---------------------------------------------------------------------
   9. Hero: sala caldaia illuminata, testo a sinistra, strumenti a destra
   --------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden; border-bottom: 1px solid var(--line);
  padding-block: clamp(2.6rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  background:
    radial-gradient(ellipse 70% 60% at 78% 8%, rgba(216, 100, 43, .16), transparent 62%),
    radial-gradient(ellipse 60% 50% at 4% 92%, rgba(31, 111, 139, .12), transparent 60%),
    linear-gradient(180deg, var(--carta) 0%, var(--bg) 100%);
}
/* griglia tecnica appena percettibile sul fondo dell'hero */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(100, 91, 82, .07) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(100, 91, 82, .07) 0 1px, transparent 1px 42px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
.hero__interno { position: relative; display: grid; gap: clamp(2rem, 5vw, 3.4rem); align-items: center; }
.hero__titolo { margin-bottom: var(--sp-3); letter-spacing: -.005em; }
.hero__sub {
  max-width: 56ch; margin-bottom: var(--sp-4); color: var(--mut);
  font-size: clamp(1.06rem, 1rem + .4vw, 1.22rem);
}
.hero__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: var(--sp-4); }
.hero__punti { display: grid; gap: .55rem; }
.hero__punti li { position: relative; padding-left: 2rem; font-weight: 600; color: var(--ink); }
/* pallino a forma di bullone esagonale */
.hero__punti li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px;
  background: var(--pri); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.hero__visuale { position: relative; display: flex; justify-content: center; }
/* scheda impianto: la riproduzione della schermata che il tecnico usa */
.scheda-impianto {
  position: relative; width: min(420px, 100%); overflow: hidden;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--om-3);
}
.scheda-impianto__testata {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .9rem 1.1rem; color: #FFFFFF; background: var(--fiamma);
}
.scheda-impianto__matricola { font-family: var(--f-tit); font-weight: 700; font-size: 1.2rem; letter-spacing: .07em; }
.scheda-impianto__tipo {
  padding: .2rem .55rem; border-radius: var(--r-tondo); background: rgba(255, 255, 255, .2);
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.scheda-impianto__corpo { padding: .4rem 1.1rem .9rem; }
.scheda-impianto__riga {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .62rem 0; border-bottom: 1px dashed var(--line);
}
.scheda-impianto__riga:last-child { border-bottom: 0; }
.scheda-impianto__voce { font-size: .92rem; color: var(--mut); white-space: nowrap; }
.scheda-impianto__valore {
  margin-left: auto; text-align: right; font-family: var(--f-tit);
  font-weight: 600; font-size: 1.08rem; color: var(--ink);
}
.scheda-impianto__piede {
  display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem;
  background: var(--carta); border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--mut);
}
/* pastiglie di stato dell'impianto */
.stato {
  display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem;
  border: 1px solid transparent; border-radius: var(--r-tondo);
  font-family: var(--f-tit); font-weight: 700; font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.stato--conforme { color: var(--acc-scuro); background: var(--acc-velo); border-color: var(--acc-velo2); }
.stato--scadenza { color: var(--pri-scuro); background: var(--pri-velo); border-color: var(--pri-velo2); }
.stato--firmato { color: var(--verde); background: var(--verde-velo); border-color: #D9E5C9; }
/* il manometro sporge dall'angolo della scheda impianto */
.hero__strumento { position: absolute; right: -8px; bottom: -26px; z-index: 2; }

/* ---------------------------------------------------------------------
   10. Blocco problema: racconto a sinistra, pannello dei sintomi a destra
   --------------------------------------------------------------------- */
.problema__interno { display: grid; gap: clamp(1.6rem, 4vw, 2.8rem); align-items: start; }
.problema__racconto p { color: var(--ink); }
/* capolettera in rame, come la prima lettera di un registro */
.problema__racconto p:first-of-type::first-letter {
  float: left; font-family: var(--f-tit); font-weight: 700; font-size: 3.4rem;
  line-height: .82; padding: .12em .16em 0 0; color: var(--pri);
}
.sintomi {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-left: 5px solid var(--pri); border-radius: var(--r-card);
  padding: clamp(1.2rem, 3vw, 1.8rem); box-shadow: var(--om-2);
}
.sintomi__titolo { font-size: 1.3rem; margin-bottom: var(--sp-3); }
.sintomo {
  position: relative; padding-left: 2.1rem; padding-block: .55rem;
  border-bottom: 1px dashed var(--line); color: var(--mut);
}
.sintomo:last-child { border-bottom: 0; }
/* spia rossa accesa accanto a ogni sintomo */
.sintomo::before {
  content: ""; position: absolute; left: 0; top: .95em; width: 13px; height: 13px;
  border-radius: 50%; background: var(--pri-velo2); border: 2px solid var(--pri);
  box-shadow: 0 0 0 3px var(--pri-velo);
}

/* ---------------------------------------------------------------------
   11. Soluzione e passi collegati dalla tubazione
   --------------------------------------------------------------------- */
.soluzione__testo {
  max-width: var(--misura); font-size: 1.08rem; color: var(--mut);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.soluzione__testo p { margin-bottom: var(--sp-3); }
.passi { position: relative; display: grid; gap: clamp(1.2rem, 3vw, 2rem); }
/* la tubazione che collega i tre passaggi su schermo largo */
.passi::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 34px; height: 8px; display: none;
  border-radius: var(--r-tondo);
  background: linear-gradient(90deg, var(--line-forte), var(--pri-velo2), var(--acc-velo2));
}
.passo {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: clamp(1.2rem, 3vw, 1.8rem);
  box-shadow: var(--om-1); transition: transform .18s ease, box-shadow .18s ease;
}
.passo:hover { transform: translateY(-3px); box-shadow: var(--om-2); }
.passo__numero {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--sp-3);
  font-family: var(--f-tit); font-weight: 700; font-size: 1.5rem; color: #FFFFFF;
  background: var(--fiamma);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.passo__titolo { margin-bottom: var(--sp-2); }
.passo__testo { color: var(--mut); }

/* ---------------------------------------------------------------------
   12. Funzionalita
   --------------------------------------------------------------------- */
.griglia-funzioni {
  display: grid; gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.funzione {
  position: relative; overflow: hidden; background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem 1.4rem 1.6rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
/* filetto di fiamma che si allunga al passaggio del puntatore */
.funzione::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--fiamma);
  transform: scaleX(.3); transform-origin: left; transition: transform .28s ease;
}
.funzione:hover { transform: translateY(-4px); border-color: var(--pri-velo2); box-shadow: var(--om-2); }
.funzione:hover::before { transform: scaleX(1); }
.funzione__indice {
  display: block; margin-bottom: .4rem; font-family: var(--f-tit); font-weight: 700;
  font-size: .95rem; letter-spacing: .18em; color: var(--acc-scuro);
}
.funzione__titolo { font-size: 1.28rem; margin-bottom: var(--sp-2); }
.funzione__testo { color: var(--mut); font-size: .99rem; }

/* ---------------------------------------------------------------------
   13. Vantaggi
   --------------------------------------------------------------------- */
.vantaggi { display: grid; gap: clamp(1rem, 2.6vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.vantaggio {
  position: relative; padding: 1.5rem; background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--om-1);
}
/* arco di quadrante disegnato nell'angolo del vantaggio */
.vantaggio::after {
  content: ""; position: absolute; right: 14px; bottom: 12px; width: 58px; height: 58px;
  border-radius: 50%; border: 3px solid var(--acc-velo2);
  border-right-color: var(--pri-velo2); border-top-color: transparent; opacity: .9;
}
.vantaggio__titolo { display: flex; align-items: center; gap: .6rem; font-size: 1.24rem; margin-bottom: var(--sp-2); }
.vantaggio__testo { color: var(--mut); max-width: 46ch; }

/* ---------------------------------------------------------------------
   14. Prova sociale
   --------------------------------------------------------------------- */
.prove { display: grid; gap: clamp(1rem, 2.6vw, 1.7rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.prova {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 2.4rem 1.5rem 1.4rem; box-shadow: var(--om-2);
}
.prova::before {
  content: "\201C"; position: absolute; top: 6px; left: 16px;
  font-family: var(--f-tit); font-size: 4rem; line-height: 1; color: var(--pri-velo2);
}
.prova__testo { font-size: 1.02rem; color: var(--ink); margin-bottom: var(--sp-3); }
.prova__firma {
  display: flex; align-items: center; gap: .7rem;
  padding-top: var(--sp-2); border-top: 1px dashed var(--line);
}
.prova__nome { display: block; font-family: var(--f-tit); font-weight: 700; font-size: 1.12rem; }
.prova__ruolo { display: block; font-size: .9rem; color: var(--mut); }
.nota-scenari {
  margin-top: var(--sp-4); padding: .8rem 1rem; font-size: .93rem; color: var(--mut);
  background: var(--carta); border: 1px dashed var(--line-forte); border-radius: var(--r-mini);
}

/* ---------------------------------------------------------------------
   15. Prezzi, con il piano centrale in evidenza
   --------------------------------------------------------------------- */
.prezzi {
  display: grid; gap: clamp(1.1rem, 2.6vw, 1.8rem); align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}
.piano {
  position: relative; display: flex; flex-direction: column; padding: 1.7rem 1.5rem;
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--om-1);
}
.piano--evidenza {
  border: 2px solid var(--pri); box-shadow: var(--om-rame);
  background: linear-gradient(180deg, var(--pri-velo) 0%, var(--surf) 34%);
}
.piano__nastro {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  padding: .28rem .9rem; border-radius: var(--r-tondo); white-space: nowrap;
  font-family: var(--f-tit); font-weight: 700; font-size: .88rem;
  letter-spacing: .12em; text-transform: uppercase; color: #FFFFFF; background: var(--fiamma);
}
.piano__nome { font-size: 1.5rem; margin-bottom: .3rem; }
.piano__prezzo { display: flex; align-items: baseline; gap: .45rem; margin-bottom: var(--sp-2); }
.piano__cifra { font-family: var(--f-tit); font-weight: 700; font-size: 3rem; line-height: 1; color: var(--pri-scuro); }
.piano__periodo { font-size: .95rem; color: var(--mut); }
.piano__descrizione {
  color: var(--mut); font-size: .98rem; margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3); border-bottom: 1px dashed var(--line);
}
.piano__lista { display: grid; gap: .6rem; margin-bottom: var(--sp-4); }
.piano__lista li { position: relative; padding-left: 1.8rem; font-size: .98rem; }
/* spunta disegnata con due bordi, senza icone esterne */
.piano__lista li::before {
  content: ""; position: absolute; left: .25rem; top: .42em; width: 8px; height: 14px;
  border: solid var(--acc); border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}
.piano .btn { margin-top: auto; }
.nota-prezzi { margin-top: var(--sp-4); text-align: center; color: var(--mut); font-size: .96rem; }

/* ---------------------------------------------------------------------
   16. Domande frequenti a fisarmonica
   --------------------------------------------------------------------- */
.faq { display: grid; gap: .7rem; max-width: 860px; margin-inline: auto; }
.faq__voce {
  background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-mini); overflow: hidden; transition: border-color .18s ease;
}
.faq__voce:hover { border-color: var(--line-forte); }
.faq__domanda {
  display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 56px;
  padding: 1rem 1.1rem; text-align: left; background: transparent; border: 0;
  font-family: var(--f-tit); font-weight: 600; font-size: 1.16rem; color: var(--ink);
}
.faq__domanda:hover { color: var(--pri-scuro); }
/* segno di apertura e chiusura, disegnato come una valvola a due vie */
.faq__segno {
  position: relative; flex: 0 0 auto; margin-left: auto; width: 26px; height: 26px;
  border-radius: 50%; border: 2px solid var(--pri); background: var(--pri-velo);
}
.faq__segno::before, .faq__segno::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px;
  background: var(--pri-scuro); transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.faq__segno::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__domanda[aria-expanded="true"] .faq__segno::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq__risposta {
  padding: 1rem 1.1rem 1.2rem; color: var(--mut); border-top: 1px dashed var(--line);
}
.faq__risposta p { max-width: var(--misura); }

/* ---------------------------------------------------------------------
   17. Schede articolo, indice del blog, blocco Da leggere anche
   --------------------------------------------------------------------- */
.griglia-articoli {
  display: grid; gap: clamp(1.1rem, 2.6vw, 1.8rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.articolo-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--om-1); transition: transform .18s ease, box-shadow .18s ease;
}
.articolo-card:hover { transform: translateY(-4px); box-shadow: var(--om-2); }
.articolo-card__media {
  position: relative; aspect-ratio: 16 / 9; background: var(--carta);
  border-bottom: 4px solid transparent; border-image: var(--fiamma) 1;
}
.articolo-card__media img { width: 100%; height: 100%; object-fit: cover; }
.articolo-card__corpo {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.2rem 1.25rem 1.4rem; flex: 1 1 auto;
}
.articolo-card__meta {
  font-family: var(--f-tit); font-weight: 600; font-size: .88rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--acc-scuro);
}
.articolo-card__titolo { font-size: 1.2rem; line-height: 1.2; }
.articolo-card__titolo a { color: var(--ink); text-decoration: none; }
.articolo-card__titolo a:hover { color: var(--pri-scuro); text-decoration: underline; }
.articolo-card__testo { color: var(--mut); font-size: .96rem; }
.articolo-card__link {
  margin-top: auto; padding-top: .6rem; font-family: var(--f-tit); font-weight: 600;
  letter-spacing: .04em; color: var(--pri-scuro); text-decoration: none;
}
.articolo-card__link::after { content: " \203A"; font-weight: 700; }
.articolo-card__link:hover { text-decoration: underline; }
.da-leggere {
  margin-top: clamp(2.4rem, 5vw, 3.6rem); padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--carta); border: 1px solid var(--line); border-radius: var(--r-card);
}
.da-leggere__titolo { display: flex; align-items: center; gap: .7rem; font-size: 1.5rem; margin-bottom: var(--sp-4); }
/* la coda del titolo prosegue come una scala graduata */
.da-leggere__titolo::after {
  content: ""; flex: 1 1 auto; height: 6px; border-radius: var(--r-tondo);
  background: repeating-linear-gradient(90deg, var(--line-forte) 0 1px, transparent 1px 10px);
}

/* ---------------------------------------------------------------------
   18. Pagina articolo: intestazione, corpo redazionale, riquadri
   --------------------------------------------------------------------- */
.articolo { padding-block: clamp(2rem, 5vw, 3.4rem); }
.briciole { font-size: .92rem; color: var(--mut); margin-bottom: var(--sp-3); }
.briciole a { color: var(--acc-scuro); }
.briciole span[aria-hidden="true"] { color: var(--line-forte); }
.articolo__titolo { max-width: min(100%, 24ch); margin-bottom: var(--sp-3); }
.meta-articolo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  font-family: var(--f-tit); font-weight: 600; font-size: .96rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mut);
  padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); margin-bottom: var(--sp-4);
}
.meta-articolo a { color: var(--acc-scuro); }
.chapo {
  position: relative; max-width: var(--misura); padding-left: 1.2rem;
  border-left: 5px solid var(--pri); color: var(--ink); line-height: 1.55;
  font-size: clamp(1.1rem, 1.02rem + .4vw, 1.28rem); margin-bottom: var(--sp-5);
}
.figura { margin-block: var(--sp-4) var(--sp-5); }
.figura img { width: 100%; border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: var(--om-2); }
.credito-foto, .figura figcaption { margin-top: .6rem; font-size: .88rem; color: var(--mut); }
.sommario {
  max-width: var(--misura); margin-bottom: var(--sp-5); padding: 1.1rem 1.3rem;
  background: var(--acc-velo); border: 1px dashed var(--acc-velo2); border-radius: var(--r-mini);
}
.sommario__titolo {
  font-size: 1.1rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acc-scuro); margin-bottom: var(--sp-2);
}
.sommario ol { margin: 0; padding-left: 1.2rem; }
.sommario li { margin-bottom: .3rem; }
/* corpo redazionale: misura di lettura contenuta e ritmo verticale calmo */
.prosa { max-width: var(--misura); }
.prosa > * + * { margin-top: var(--sp-3); }
.prosa h2 {
  margin-top: var(--sp-6); margin-bottom: var(--sp-2); padding-top: var(--sp-3);
  border-top: 2px solid var(--line); font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
}
.prosa h2::before {
  content: ""; display: block; width: 46px; height: 5px; margin-bottom: .7rem;
  border-radius: var(--r-tondo); background: var(--fiamma);
}
.prosa h3 { margin-top: var(--sp-4); margin-bottom: var(--sp-2); color: var(--acc-scuro); }
.prosa p { line-height: 1.72; }
.prosa ol { padding-left: 1.4rem; display: grid; gap: .5rem; }
.prosa ul { list-style: none; padding-left: 0; display: grid; gap: .5rem; }
.prosa ul li { position: relative; padding-left: 1.7rem; }
.prosa ul li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 11px; height: 11px;
  background: var(--pri); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.prosa ol li::marker { font-family: var(--f-tit); font-weight: 700; color: var(--pri-scuro); }
.prosa blockquote {
  margin-block: var(--sp-4); padding: 1.1rem 1.3rem; background: var(--carta);
  border-left: 5px solid var(--acc); border-radius: 0 var(--r-mini) var(--r-mini) 0;
  font-size: 1.06rem; color: var(--ink);
}
.prosa blockquote p { margin-bottom: .6rem; }
.prosa blockquote cite { font-style: normal; font-size: .92rem; color: var(--mut); }
.prosa table {
  margin-block: var(--sp-4); font-size: .97rem; background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-mini); overflow: hidden;
}
.prosa caption { caption-side: bottom; padding-top: .6rem; font-size: .88rem; color: var(--mut); text-align: left; }
.prosa th, .prosa td {
  padding: .7rem .85rem; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.prosa thead th {
  background: var(--carta-forte); font-family: var(--f-tit); font-weight: 700;
  font-size: 1.02rem; letter-spacing: .04em; color: var(--ink);
}
.prosa tbody tr:last-child td { border-bottom: 0; }
.prosa tbody tr:nth-child(even) { background: var(--bg); }
.prosa code {
  font-family: var(--f-mono); font-size: .92em; padding: .12em .4em;
  background: var(--ghisa-velo); border: 1px solid var(--line); border-radius: 4px;
}
.prosa figure { margin-block: var(--sp-4); }
.prosa figcaption { font-size: .88rem; color: var(--mut); margin-top: .5rem; }
.prosa a { font-weight: 600; }
/* riquadro dei punti chiave, con targhetta agganciata al bordo */
.riquadro {
  position: relative; max-width: var(--misura); margin-block: var(--sp-5);
  padding: 1.7rem 1.4rem 1.3rem; background: var(--surf);
  border: 2px solid var(--pri-velo2); border-radius: var(--r-card); box-shadow: var(--om-1);
}
.riquadro__titolo {
  position: absolute; top: -14px; left: 18px; padding: .2rem .8rem;
  border-radius: var(--r-tondo); font-family: var(--f-tit); font-weight: 700;
  font-size: .9rem; letter-spacing: .12em; text-transform: uppercase;
  color: #FFFFFF; background: var(--fiamma);
}
.tabella-scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: var(--sp-4); }
.tabella-scorrevole table { margin-block: 0; }

/* ---------------------------------------------------------------------
   19. Blocco autore e profili
   --------------------------------------------------------------------- */
.autore-box {
  display: grid; gap: 1.2rem; align-items: start;
  margin-top: clamp(2.2rem, 5vw, 3.2rem); padding: clamp(1.3rem, 3vw, 2rem);
  background: var(--surf); border: 1px solid var(--line); border-top: 5px solid var(--pri);
  border-radius: var(--r-card); box-shadow: var(--om-1);
}
.autore-box__foto {
  width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--carta-forte); box-shadow: var(--om-1);
}
.autore-box__nome { font-size: 1.32rem; margin-bottom: .1rem; }
.autore-box__ruolo {
  font-family: var(--f-tit); font-weight: 600; font-size: .92rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pri-scuro); margin-bottom: var(--sp-2);
}
.autore-box__bio { color: var(--mut); max-width: 62ch; margin-bottom: var(--sp-3); }
.social { display: flex; flex-wrap: wrap; gap: .5rem; }
.social__link {
  display: inline-flex; align-items: center; min-height: 40px; padding: .3rem .8rem;
  font-family: var(--f-tit); font-weight: 600; font-size: .95rem; letter-spacing: .05em;
  color: var(--acc-scuro); background: var(--acc-velo); border: 1px solid var(--acc-velo2);
  border-radius: var(--r-tondo); text-decoration: none;
}
.social__link:hover { color: #FFFFFF; background: var(--acc); border-color: var(--acc-scuro); }

/* ---------------------------------------------------------------------
   20. Sezione contatto e modulo
   --------------------------------------------------------------------- */
.contatto__interno { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.contatto__promessa p { color: var(--mut); max-width: 52ch; }
.contatto__promessa .fiamma { margin-top: var(--sp-4); max-width: 180px; }
.modulo {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-card); padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--om-3);
}
/* filetto bicolore in testa al modulo, rame e blu strumento */
.modulo::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; border-radius: 18px 4px 0 0;
  background: linear-gradient(90deg, var(--pri) 0%, var(--pri-chiaro) 48%, var(--acc) 100%);
}
.campi { display: grid; gap: var(--sp-3); }
.campi--due { grid-template-columns: 1fr; }
.campo { display: grid; gap: .35rem; }
.campo__etichetta { font-family: var(--f-tit); font-weight: 600; font-size: 1.02rem; letter-spacing: .04em; }
.campo__obbligatorio { color: var(--pri); font-weight: 700; }
.campo__aiuto { font-size: .88rem; color: var(--mut); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem;
  background: var(--bg); border: 1px solid var(--line-forte); border-radius: var(--r-mini);
  font-family: var(--f-testo); font-size: 1rem; color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.campo textarea { min-height: 150px; resize: vertical; }
.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(--acc); box-shadow: 0 0 0 3px var(--acc-velo2);
}
.campo input::placeholder, .campo textarea::placeholder { color: #8C8279; }
.modulo__nota { margin-top: var(--sp-3); font-size: .9rem; color: var(--mut); }
.alternativa {
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line);
  font-size: .96rem; color: var(--mut);
}

/* ---------------------------------------------------------------------
   21. Piede di pagina chiaro, cinque colonne più la barra inferiore
   --------------------------------------------------------------------- */
.piede {
  position: relative; margin-top: clamp(3rem, 7vw, 5rem);
  background: var(--carta); border-top: 1px solid var(--line-forte); color: var(--ink);
}
/* tubazione colorata in testa al piede di pagina */
.piede::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--acc) 0%, var(--pri) 60%, var(--pri-chiaro) 100%);
}
.piede__griglia {
  display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3vw, 2.4rem);
  padding-block: clamp(2.4rem, 5vw, 3.6rem) var(--sp-5);
}
.piede__marchio {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: var(--sp-2);
  font-family: var(--f-tit); font-weight: 700; font-size: 1.28rem;
  color: var(--ink); text-decoration: none;
}
.piede__claim { color: var(--mut); max-width: 34ch; margin-bottom: var(--sp-2); }
.piede__contatto { font-size: .96rem; }
.piede__titolo {
  font-size: 1.06rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pri-scuro);
  margin-bottom: var(--sp-2); padding-bottom: .4rem; border-bottom: 1px solid var(--line-forte);
}
.piede__lista { display: grid; gap: .45rem; font-size: .96rem; }
.piede__lista a { color: var(--ink); text-decoration: none; }
.piede__lista a:hover { color: var(--pri-scuro); text-decoration: underline; }
.piede__cookie {
  margin-top: var(--sp-3); min-height: 44px; padding: .5rem .9rem;
  font-family: var(--f-tit); font-weight: 600; font-size: .95rem; letter-spacing: .04em;
  color: var(--acc-scuro); background: var(--surf);
  border: 1px solid var(--acc-velo2); border-radius: var(--r-btn);
}
.piede__cookie:hover { color: #FFFFFF; background: var(--acc); border-color: var(--acc-scuro); }
/* colonna ecosistema: cinque targhette da quadro elettrico */
.ecosistema { display: grid; gap: .55rem; }
.ecosistema__link {
  position: relative; display: block; padding: .6rem .75rem .6rem 1.6rem;
  background: var(--surf); border: 1px solid var(--line); border-left: 4px solid var(--acc);
  border-radius: var(--r-mini); color: var(--ink); text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.ecosistema__link::before {
  content: ""; position: absolute; left: .55rem; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  background: var(--pri); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}
.ecosistema__link:hover { transform: translateX(3px); border-left-color: var(--pri); box-shadow: var(--om-1); }
.ecosistema__nome { display: block; font-family: var(--f-tit); font-weight: 700; font-size: 1.06rem; color: var(--ink); }
.ecosistema__desc { display: block; font-size: .88rem; color: var(--mut); }
.piede__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 1.4rem; padding-block: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line-forte); font-size: .9rem; color: var(--mut);
}
.piede__legale { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.piede__legale a { color: var(--mut); }
.piede__legale a:hover { color: var(--pri-scuro); }

/* ---------------------------------------------------------------------
   22. Banner cookie: Accetta e Rifiuta con pari evidenza grafica
   --------------------------------------------------------------------- */
.cookie {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 120;
  width: min(680px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: 1.2rem 1.3rem; background: var(--surf);
  border: 1px solid var(--line-forte); border-top: 5px solid var(--pri);
  border-radius: var(--r-card); box-shadow: var(--om-3);
}
.cookie[hidden] { display: none; }
.cookie__titolo { font-family: var(--f-tit); font-weight: 700; font-size: 1.24rem; margin-bottom: var(--sp-2); }
.cookie__testo { font-size: .96rem; color: var(--mut); margin-bottom: var(--sp-3); }
.cookie__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
/* stessa dimensione e stesso peso per i due pulsanti di scelta */
.cookie__azioni .btn { flex: 1 1 160px; min-height: 48px; font-size: 1.02rem; }
.cookie__azioni .btn--primario, .cookie__azioni .btn--secondario { box-shadow: var(--om-1); }
.cookie__personalizza {
  flex: 1 1 140px; min-height: 48px; background: transparent;
  border: 1px dashed var(--line-forte); border-radius: var(--r-btn);
  font-family: var(--f-tit); font-weight: 600; font-size: 1rem; color: var(--ink);
}
.cookie__personalizza:hover { color: var(--pri-scuro); border-color: var(--pri); }
.cookie__dettaglio {
  margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--line);
  font-size: .92rem; color: var(--mut);
}
.cookie__dettaglio[hidden] { display: none; }
.cookie__dettaglio table {
  margin-bottom: var(--sp-2); font-size: .88rem;
  border: 1px solid var(--line); border-radius: var(--r-mini); overflow: hidden;
}
.cookie__dettaglio th, .cookie__dettaglio td {
  padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
.cookie__dettaglio thead th {
  background: var(--carta-forte); color: var(--ink); font-family: var(--f-tit); font-weight: 700;
}
.cookie__dettaglio tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------------
   23. Pagine di servizio: grazie, mappa del sito, pagine legali
   --------------------------------------------------------------------- */
.pagina-testo { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.pagina-testo .prosa { max-width: 72ch; }
.mappa-gruppo {
  margin-bottom: var(--sp-5); padding: 1.2rem 1.3rem; background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r-card);
}
.mappa-gruppo h2 { font-size: 1.3rem; margin-bottom: var(--sp-2); color: var(--acc-scuro); }
.mappa-gruppo ul { display: grid; gap: .5rem; }
.mappa-gruppo li { position: relative; padding-left: 1.5rem; }
.mappa-gruppo li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px;
  background: var(--acc); clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%);
}

/* ---------------------------------------------------------------------
   24. Adattamento agli schermi, da 320 px a 1440 px
   --------------------------------------------------------------------- */
/* schermi molto stretti: si riducono i riempimenti maggiori */
@media (max-width: 360px) {
  .btn { padding-inline: 1.1rem; font-size: 1rem; }
  .manometro { border-width: 8px; }
  .prova { padding-inline: 1.1rem; }
}
/* telefoni larghi e tablet in verticale */
@media (min-width: 560px) {
  .campi--due { grid-template-columns: 1fr 1fr; }
  .autore-box { grid-template-columns: 104px 1fr; }
  .cookie { padding: 1.4rem 1.6rem; }
}
/* tablet in orizzontale e portatili piccoli */
@media (min-width: 760px) {
  .piede__griglia { grid-template-columns: repeat(2, 1fr); }
  .problema__interno { grid-template-columns: 1.25fr .95fr; }
  .passi { grid-template-columns: repeat(3, 1fr); }
  .passi::before { display: block; }
  .contatto__interno { grid-template-columns: .9fr 1.1fr; }
  .vantaggio { padding: 1.6rem 1.8rem 1.6rem 1.6rem; }
}
/* da qui la navigazione principale prende il posto del menu a scomparsa */
@media (min-width: 980px) {
  .nav { display: flex; }
  .apri-menu { display: none; }
  .menu-mobile, .menu-mobile.is-aperto { display: none; }
  .hero__interno { grid-template-columns: 1.1fr .9fr; }
  .piede__griglia { grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1.3fr; }
  .autore-box { grid-template-columns: 120px 1fr; }
  .autore-box__foto { width: 120px; height: 120px; }
}
/* schermi larghi: la misura di lettura resta stabile */
@media (min-width: 1280px) {
  :root { --misura: 68ch; }
}

/* ---------------------------------------------------------------------
   25. Preferenza di movimento ridotto e resa di stampa
   --------------------------------------------------------------------- */
@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;
  }
  .manometro__lancetta { animation: none; transform: translateX(-50%) rotate(24deg); }
  .funzione:hover, .passo:hover, .articolo-card:hover, .btn--primario:hover,
  .ecosistema__link:hover { transform: none; }
}
@media print {
  .testata, .menu-mobile, .cookie, .piede__cookie, .hero__azioni { display: none !important; }
  body { background: #FFFFFF; }
  .prosa { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555555; }
}

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