/* =====================================================================
   CertificatoSportivo - foglio di stile unico del sito
   Direzione artistica: energia sportiva su fondo chiaro. Verde profondo
   da campo, rosso segnale da cartellino, luce di palestra con grandi
   vetrate. Motivo ricorrente: barre diagonali di velocita', barre di
   avanzamento della validita', archi da cronometro e semaforo verde,
   giallo, rosso. Tipografia condensata da tabellone.
   Tutte le decorazioni sono disegnate in CSS puro: nessuna immagine
   esterna serve per il decoro.

   Indice: 01 font, 02 reset, 03 variabili, 04 tipografia, 05 struttura,
   06 decorazioni, 07 testata, 08 bottoni, 09 sezioni, 10 hero,
   11 problema, 12 soluzione e passi, 13 funzionalita, 14 vantaggi,
   15 testimonianze, 16 prezzi, 17 domande, 18 blog, 19 articolo e prosa,
   20 autore, 21 modulo, 22 piede, 23 cookie, 24 responsive,
   25 movimento ridotto.
   ===================================================================== */

/* --- 01. Font --------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Big+Shoulders+Display:wght@500;600;700;800&display=swap');

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

/* --- 03. Variabili di progetto ---------------------------------------- */
:root {
  /* palette approvata del sito */
  --bg: #F7F9F5; --surf: #FFFFFF; --ink: #14181A; --mut: #555F66;
  --pri: #356B12; --acc: #C22E2E; --line: #E3E8E0;

  /* derivate: stati, superfici, contrasto */
  --pri-scuro: #26500C;          /* verde per stati premuti e testo forte */
  --pri-chiaro: #6FA33F;         /* verde luminoso, solo decorazioni */
  --pri-velo: rgba(53, 107, 18, .10);
  --pri-velo-forte: rgba(53, 107, 18, .18);
  --acc-scuro: #9C2020;          /* rosso leggibile in corpo piccolo */
  --acc-velo: rgba(194, 46, 46, .10);
  --amb: #B9740A;                /* ambra del semaforo, contrasto AA */
  --amb-velo: rgba(185, 116, 10, .14);
  --campo: #EEF3E9;              /* verde chiarissimo da fondo di fascia */
  --campo-forte: #E4EDDC;
  --line-forte: #CBD5C4;
  --ink-velo: rgba(20, 24, 26, .07);

  /* coppia tipografica con fallback reali */
  --font-titoli: 'Big Shoulders Display', 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-testo: 'Barlow', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* scala tipografica fluida e armonica */
  --t-xs: clamp(.76rem, .74rem + .10vw, .82rem);
  --t-sm: clamp(.88rem, .85rem + .16vw, .97rem);
  --t-base: clamp(1rem, .96rem + .22vw, 1.10rem);
  --t-md: clamp(1.10rem, 1.03rem + .34vw, 1.30rem);
  --t-lg: clamp(1.30rem, 1.16rem + .68vw, 1.70rem);
  --t-xl: clamp(1.60rem, 1.34rem + 1.25vw, 2.35rem);
  --t-2xl: clamp(2.10rem, 1.62rem + 2.30vw, 3.40rem);
  --t-3xl: clamp(2.55rem, 1.80rem + 3.60vw, 4.60rem);
  --misura: 66ch;                /* misura di lettura degli articoli */
  --interlinea: 1.68;

  /* spaziature */
  --s1: .35rem; --s2: .6rem; --s3: .95rem; --s4: 1.4rem;
  --s5: 2rem; --s6: 2.9rem; --s7: 4rem;
  --fascia: clamp(3.2rem, 2rem + 5vw, 6rem);

  /* raggi e ombre: angoli quasi vivi, ombra netta da tabellone */
  --r1: 3px; --r2: 6px; --r3: 10px; --r-tondo: 999px;
  --ombra-scatto: 5px 5px 0 rgba(20, 24, 26, .10);
  --ombra-scatto-verde: 5px 5px 0 var(--pri-velo-forte);
  --ombra-morbida: 0 10px 24px rgba(20, 24, 26, .09);
  --ombra-alta: 0 18px 40px rgba(20, 24, 26, .13);

  /* trame proprie del sito */
  --diagonali: repeating-linear-gradient(115deg,
      var(--pri-velo) 0 6px, transparent 6px 18px);
  --corsie: repeating-linear-gradient(180deg,
      transparent 0 46px, var(--line) 46px 47px);
}

/* --- 04. Tipografia di base ------------------------------------------- */
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-testo);
  font-size: var(--t-base);
  line-height: var(--interlinea);
  overflow-x: hidden;
  font-synthesis-weight: none;
}
h1, h2, h3, h4 {
  font-family: var(--font-titoli);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .002em;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
p { text-wrap: pretty; }
strong { font-weight: 600; }
a { color: var(--pri-scuro); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--acc-scuro); }
::selection { background: var(--pri); color: #FFFFFF; }

/* fuoco visibile e coerente su tutto il sito */
:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 05. Struttura e utility ------------------------------------------ */
.wrap { width: min(1180px, 100% - clamp(1.6rem, 5vw, 4rem)); margin-inline: auto; }
.wrap-stretto { width: min(780px, 100% - clamp(1.6rem, 5vw, 3rem)); margin-inline: auto; }
.centro { text-align: center; }
.visivamente-nascosto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hp { position: absolute; left: -9999px; }
.salta-al-contenuto {
  position: absolute; left: .75rem; top: -100px; z-index: 200;
  background: var(--pri); color: #FFFFFF; font-family: var(--font-titoli);
  font-size: 1.15rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .7rem 1.2rem; border-radius: var(--r1); text-decoration: none;
  transition: top .15s ease-out;
}
.salta-al-contenuto:focus { top: .75rem; color: #FFFFFF; }

.griglia-2, .griglia-3, .griglia-4 { display: grid; gap: var(--s4); }
@media (min-width: 700px) {
  .griglia-2 { grid-template-columns: repeat(2, 1fr); }
  .griglia-3 { grid-template-columns: repeat(2, 1fr); }
  .griglia-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .griglia-3 { grid-template-columns: repeat(3, 1fr); }
  .griglia-4 { grid-template-columns: repeat(4, 1fr); }
}

/* scheda generica: bordo netto, spigolo vivo, ombra a scatto */
.scheda {
  background: var(--surf);
  border: 1px solid var(--line);
  border-left: 4px solid var(--pri);
  border-radius: var(--r1);
  padding: var(--s4);
  box-shadow: var(--ombra-scatto);
}

/* --- 06. Decorazioni proprie del sito --------------------------------- */
/* barra diagonale di velocita', usata come filetto sotto la testata,
   sopra le fasce e dentro le schede in evidenza */
.striscia-velocita {
  height: 6px;
  background:
    repeating-linear-gradient(115deg,
      var(--pri) 0 14px,
      var(--pri-chiaro) 14px 20px,
      var(--acc) 20px 26px,
      transparent 26px 40px),
    var(--campo-forte);
}

/* semaforo di validita': il segno riconoscibile del prodotto */
.semaforo {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-titoli); font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .6rem .18rem; border-radius: var(--r-tondo);
  border: 1.5px solid currentColor;
}
.semaforo::before {
  content: ""; width: .62rem; height: .62rem; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent);
}
.semaforo--verde { color: var(--pri); background: var(--pri-velo); }
.semaforo--giallo { color: var(--amb); background: var(--amb-velo); }
.semaforo--rosso { color: var(--acc-scuro); background: var(--acc-velo); }

/* barra di avanzamento della validita' residua */
.barra-validita {
  position: relative; height: 8px; border-radius: var(--r-tondo);
  background: var(--campo-forte); overflow: hidden;
}
.barra-validita::before {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--quota, 60%);
  background: linear-gradient(90deg, var(--pri) 0%, var(--pri-chiaro) 100%);
  border-radius: inherit;
}
.barra-validita--attenzione::before { background: linear-gradient(90deg, var(--amb) 0%, #E0A63A 100%); }
.barra-validita--scaduta::before { background: linear-gradient(90deg, var(--acc-scuro) 0%, var(--acc) 100%); }

/* arco da cronometro: numero dei passi e indici delle funzionalita' */
.cronometro {
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%;
  background: conic-gradient(var(--pri) 0turn var(--arco, .72turn), var(--campo-forte) var(--arco, .72turn) 1turn);
  font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 800; color: var(--pri-scuro);
}
.cronometro::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--surf); border: 1px solid var(--line);
}
.cronometro::after {
  content: ""; position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 6px; border-radius: 2px; background: var(--acc);
}
.cronometro > * { position: relative; }

/* occhiello: sopratitolo con taglio diagonale */
.occhiello {
  display: inline-block; position: relative;
  font-family: var(--font-titoli); font-size: 1.05rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--pri-scuro);
  padding: .18rem .7rem .12rem 1.5rem; background: var(--pri-velo);
  border-radius: 2px;
}
.occhiello::before {
  content: ""; position: absolute; left: .5rem; top: .3rem; bottom: .3rem;
  width: 10px; background: repeating-linear-gradient(115deg, var(--acc) 0 3px, transparent 3px 6px);
}

/* etichetta angolo editoriale, forma da pettorina di gara */
.pettorina {
  display: inline-block; font-family: var(--font-titoli); font-weight: 700;
  font-size: 1rem; text-transform: uppercase; letter-spacing: .08em;
  color: #FFFFFF; background: var(--pri); padding: .22rem .75rem .16rem;
  border-radius: 2px; box-shadow: 3px 3px 0 var(--pri-velo-forte);
}
.pettorina--rossa { background: var(--acc-scuro); box-shadow: 3px 3px 0 var(--acc-velo); }

/* --- 07. Testata e navigazione ---------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 90;
  background: color-mix(in srgb, var(--surf) 92%, transparent);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--line);
}
.testata::after {
  content: ""; display: block; height: 4px;
  background: repeating-linear-gradient(115deg,
    var(--pri) 0 16px, var(--pri-chiaro) 16px 22px, var(--acc) 22px 28px, transparent 28px 44px);
}
.testata__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); min-height: 4.5rem;
}
.marchio { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.marchio__sigla {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  background: var(--pri); color: #FFFFFF; border-radius: var(--r1);
  font-family: var(--font-titoli); font-size: 1.35rem; font-weight: 800;
  letter-spacing: .02em;
  box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .12);
}
.marchio__nome {
  font-family: var(--font-titoli); font-size: 1.65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.marchio__nome b { color: var(--pri); font-weight: 800; }

.nav { display: none; align-items: center; gap: clamp(.5rem, 1.4vw, 1.15rem); }
.nav__link {
  position: relative; text-decoration: none; color: var(--ink);
  font-family: var(--font-titoli); font-size: 1.2rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .35rem .1rem;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px;
  background: var(--acc); transition: right .18s ease-out;
}
.nav__link:hover, .nav__link:focus-visible { color: var(--pri-scuro); }
.nav__link:hover::after, .nav__link.is-attivo::after { right: 0; }
.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: 44px; padding: .4rem .7rem;
  border: 1.5px solid var(--line-forte); border-radius: var(--r1);
  background: var(--surf); color: var(--ink);
  font-family: var(--font-titoli); font-size: 1.15rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.apri-menu__barre { position: relative; width: 20px; height: 14px; }
.apri-menu__barre::before, .apri-menu__barre::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2.5px;
  background: var(--pri); transition: transform .2s ease-out, top .2s ease-out;
}
.apri-menu__barre::before { top: 0; box-shadow: 0 5.5px 0 var(--acc); }
.apri-menu__barre::after { top: 11px; }
.apri-menu[aria-expanded="true"] .apri-menu__barre::before { top: 6px; transform: rotate(45deg); box-shadow: none; }
.apri-menu[aria-expanded="true"] .apri-menu__barre::after { top: 6px; transform: rotate(-45deg); }

.menu-mobile {
  display: none; border-top: 1px solid var(--line);
  background: var(--surf); padding-block: var(--s4);
  background-image: var(--diagonali);
}
.menu-mobile.is-aperto { display: block; }
.menu-mobile__lista { display: grid; gap: .2rem; margin-bottom: var(--s3); }
.menu-mobile__lista a {
  display: block; padding: .75rem .6rem; text-decoration: none; color: var(--ink);
  font-family: var(--font-titoli); font-size: 1.35rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--line); border-left: 4px solid transparent;
}
.menu-mobile__lista a:hover { border-left-color: var(--acc); color: var(--pri-scuro); background: var(--campo); }
body.menu-aperto { overflow: hidden; }

/* --- 08. Bottoni ------------------------------------------------------ */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; min-height: 48px; padding: .7rem 1.35rem;
  font-family: var(--font-titoli); font-size: 1.25rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; line-height: 1;
  text-decoration: none; border-radius: var(--r1); border: 2px solid transparent;
  transition: transform .14s ease-out, box-shadow .14s ease-out, background-color .14s ease-out;
  overflow: hidden;
}
/* strisce di velocita' sul bordo destro del bottone */
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 22px;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .30) 0 3px, transparent 3px 9px);
  pointer-events: none;
}
.btn--primario {
  background: var(--pri); color: #FFFFFF; border-color: var(--pri);
  box-shadow: 4px 4px 0 var(--pri-velo-forte);
}
.btn--primario:hover { background: var(--pri-scuro); color: #FFFFFF; transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--pri-velo-forte); }
.btn--primario:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--pri-velo-forte); }
.btn--secondario {
  background: var(--surf); color: var(--pri-scuro); border-color: var(--pri);
  box-shadow: 4px 4px 0 var(--pri-velo);
}
.btn--secondario:hover { background: var(--campo); color: var(--pri-scuro); transform: translate(-1px, -1px); }
.btn--secondario::after { background: repeating-linear-gradient(115deg, var(--pri-velo) 0 3px, transparent 3px 9px); }
.btn--segnale {
  background: var(--acc-scuro); color: #FFFFFF; border-color: var(--acc-scuro);
  box-shadow: 4px 4px 0 var(--acc-velo);
}
.btn--segnale:hover { background: #841B1B; color: #FFFFFF; transform: translate(-1px, -1px); }
.btn--piccolo { min-height: 44px; padding: .5rem 1rem; font-size: 1.1rem; }
.btn--blocco { display: flex; width: 100%; }

/* --- 09. Sezioni e intestazioni --------------------------------------- */
.sezione { position: relative; padding-block: var(--fascia); }
.sezione--campo { background: var(--campo); border-block: 1px solid var(--line); }
.sezione--carta { background: var(--surf); border-block: 1px solid var(--line); }
/* fascia con trama di corsie diagonali chiare */
.sezione--corsie {
  background-color: var(--surf);
  background-image: repeating-linear-gradient(115deg,
    var(--pri-velo) 0 2px, transparent 2px 26px);
  border-block: 1px solid var(--line);
}
/* separatore diagonale fra due fasce, disegnato in CSS */
.sezione--diagonale::before {
  content: ""; position: absolute; top: -28px; left: 0; right: 0; height: 28px;
  background: inherit;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.intestazione-sezione { max-width: 62ch; margin-bottom: var(--s5); }
.intestazione-sezione--centrata { margin-inline: auto; text-align: center; }
.titolo-sezione { margin-top: var(--s2); text-transform: uppercase; }
.titolo-sezione em { font-style: normal; color: var(--pri); }
.intro-sezione { margin-top: var(--s3); color: var(--mut); font-size: var(--t-md); }

/* --- 10. Hero --------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.6rem, 1.5rem + 5vw, 5.5rem);
  background:
    radial-gradient(1100px 480px at 78% -12%, rgba(111, 163, 63, .20), transparent 62%),
    linear-gradient(180deg, var(--surf) 0%, var(--bg) 100%);
}
/* fasce diagonali di fondo, richiamo alle linee del campo */
.hero::before {
  content: ""; position: absolute; inset: -20% -30% auto auto;
  width: 70%; height: 150%;
  background: repeating-linear-gradient(115deg,
    var(--pri-velo) 0 10px, transparent 10px 34px);
  transform: rotate(0deg); pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: repeating-linear-gradient(115deg,
    var(--pri) 0 18px, var(--acc) 18px 26px, transparent 26px 46px);
}
.hero__interno { position: relative; display: grid; gap: var(--s6); align-items: center; }
.hero__titolo { margin-top: var(--s3); text-transform: uppercase; }
.hero__titolo b { color: var(--pri); font-weight: 800; }
.hero__sub { margin-top: var(--s4); font-size: var(--t-md); color: var(--mut); max-width: 58ch; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.hero__punti { display: grid; gap: .55rem; margin-top: var(--s5); }
.hero__punti li {
  position: relative; padding-left: 2rem;
  font-weight: 500;
}
.hero__punti li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 1.15rem; height: .55rem; border-radius: 2px;
  background: repeating-linear-gradient(115deg, var(--pri) 0 4px, var(--pri-chiaro) 4px 8px);
}
.hero__visuale { position: relative; }

/* scheda del tesserato: elemento visivo dell'hero */
.scheda-atleta {
  position: relative; background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--ombra-alta); overflow: hidden;
  max-width: 30rem; margin-inline: auto;
}
.scheda-atleta::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: repeating-linear-gradient(115deg, var(--pri) 0 12px, var(--acc) 12px 18px, transparent 18px 32px);
}
.scheda-atleta__testata {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s4) var(--s3);
  background: linear-gradient(180deg, var(--campo) 0%, var(--surf) 100%);
  border-bottom: 1px solid var(--line);
}
.scheda-atleta__titolo {
  font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1;
}
.scheda-atleta__sottotitolo { font-size: var(--t-xs); color: var(--mut); text-transform: uppercase; letter-spacing: .1em; }
.scheda-atleta__corpo { display: grid; gap: .1rem; padding: var(--s3) var(--s4) var(--s4); }
.scheda-atleta__riga {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem;
  padding: .7rem 0; border-bottom: 1px dashed var(--line-forte);
}
.scheda-atleta__riga:last-child { border-bottom: 0; }
.scheda-atleta__nome { font-weight: 600; }
.scheda-atleta__scadenza { display: block; font-size: var(--t-xs); color: var(--mut); }
.scheda-atleta__piede {
  padding: var(--s3) var(--s4); background: var(--campo);
  border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--mut);
}

/* --- 11. Il problema --------------------------------------------------- */
.problema__interno { display: grid; gap: var(--s6); align-items: start; }
.problema__racconto p + p { margin-top: var(--s4); }
.problema__racconto p:first-of-type::first-letter {
  float: left; font-family: var(--font-titoli); font-size: 3.6rem; line-height: .84;
  font-weight: 800; color: var(--pri); padding: .06em .16em 0 0;
}
.sintomi {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-top: 5px solid var(--acc); border-radius: var(--r2);
  padding: var(--s5) var(--s4) var(--s4); box-shadow: var(--ombra-scatto);
}
.sintomi__titolo {
  font-size: var(--t-lg); text-transform: uppercase; margin-bottom: var(--s3);
}
.sintomi__lista { display: grid; gap: var(--s3); }
.sintomo { position: relative; padding-left: 2.3rem; }
.sintomo::before {
  content: ""; position: absolute; left: 0; top: .3em;
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--acc-velo);
  border: 2px solid var(--acc-scuro);
}
.sintomo::after {
  content: ""; position: absolute; left: .62rem; top: .62em;
  width: 2px; height: .78rem; background: var(--acc-scuro); border-radius: 2px;
}

/* --- 12. La soluzione e i passi --------------------------------------- */
.soluzione__testo { max-width: var(--misura); font-size: var(--t-md); }
.soluzione__testo p + p { margin-top: var(--s4); }
.passi { display: grid; gap: var(--s4); margin-top: var(--s6); counter-reset: passo; }
.passo {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--s4);
  align-items: start; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r2); padding: var(--s4); box-shadow: var(--ombra-scatto);
}
/* filo di collegamento fra i passi, come una pista */
.passo::after {
  content: ""; position: absolute; left: calc(var(--s4) + 1.75rem); top: 100%;
  width: 2px; height: var(--s4);
  background: repeating-linear-gradient(180deg, var(--pri) 0 6px, transparent 6px 12px);
}
.passo:last-child::after { display: none; }
.passo__titolo { font-size: var(--t-lg); text-transform: uppercase; }
.passo__testo { margin-top: var(--s2); color: var(--mut); }

/* --- 13. Funzionalita -------------------------------------------------- */
.griglia-funzioni { display: grid; gap: var(--s4); }
.funzione {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r2); padding: var(--s4); overflow: hidden;
  transition: transform .16s ease-out, box-shadow .16s ease-out, border-color .16s ease-out;
}
.funzione::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--pri) 0 60%, var(--acc) 60% 100%);
  transform-origin: left; transform: scaleX(.34); transition: transform .22s ease-out;
}
.funzione:hover { transform: translateY(-3px); box-shadow: var(--ombra-morbida); border-color: var(--line-forte); }
.funzione:hover::before { transform: scaleX(1); }
.funzione__indice {
  display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem;
  background: var(--pri-velo); color: var(--pri-scuro); border-radius: var(--r1);
  font-family: var(--font-titoli); font-size: 1.3rem; font-weight: 800;
  margin-bottom: var(--s3);
}
.funzione__titolo { font-size: var(--t-md); text-transform: uppercase; }
.funzione__testo { margin-top: var(--s2); color: var(--mut); font-size: var(--t-sm); }

/* --- 14. Vantaggi ------------------------------------------------------ */
.vantaggi { display: grid; gap: var(--s4); }
.vantaggio {
  position: relative; padding: var(--s4) var(--s4) var(--s4) var(--s5);
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--ombra-scatto-verde);
}
.vantaggio::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: repeating-linear-gradient(115deg, var(--pri) 0 8px, var(--pri-chiaro) 8px 14px);
  border-radius: var(--r2) 0 0 var(--r2);
}
.vantaggio__titolo { font-size: var(--t-md); text-transform: uppercase; }
.vantaggio__testo { margin-top: var(--s2); color: var(--mut); }

/* --- 15. Testimonianze ------------------------------------------------- */
.prove { display: grid; gap: var(--s4); }
.prova {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r2); padding: var(--s5) var(--s4) var(--s4);
  box-shadow: var(--ombra-scatto);
}
.prova::before {
  content: "\201C"; position: absolute; top: -.1rem; left: var(--s4);
  font-family: var(--font-titoli); font-size: 4.4rem; line-height: 1;
  color: var(--pri-velo-forte);
}
.prova__testo { position: relative; }
.prova__firma {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 2px dotted var(--line-forte);
}
.prova__nome { font-family: var(--font-titoli); font-size: 1.35rem; font-weight: 700; text-transform: uppercase; }
.prova__ruolo { font-size: var(--t-sm); color: var(--mut); }
.nota-scenari {
  margin-top: var(--s4); font-size: var(--t-sm); color: var(--mut);
  padding: var(--s3); background: var(--campo); border-left: 4px solid var(--pri-chiaro);
  border-radius: 0 var(--r1) var(--r1) 0;
}

/* --- 16. Prezzi -------------------------------------------------------- */
.prezzi { display: grid; gap: var(--s4); align-items: start; }
.piano {
  position: relative; display: flex; flex-direction: column;
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r2);
  padding: var(--s5) var(--s4) var(--s4); box-shadow: var(--ombra-scatto);
}
.piano--evidenza {
  border: 2px solid var(--pri); box-shadow: var(--ombra-alta);
  background-image: repeating-linear-gradient(115deg, var(--pri-velo) 0 3px, transparent 3px 22px);
}
.piano__nastro {
  position: absolute; top: -.9rem; left: var(--s4);
  background: var(--acc-scuro); color: #FFFFFF; border-radius: 2px;
  font-family: var(--font-titoli); font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding: .25rem .7rem .18rem;
  box-shadow: 3px 3px 0 var(--acc-velo);
}
.piano__nome { font-size: var(--t-lg); text-transform: uppercase; }
.piano__prezzo { display: flex; align-items: baseline; gap: .4rem; margin-top: var(--s2); }
.piano__cifra {
  font-family: var(--font-titoli); font-size: clamp(2.8rem, 2rem + 2.6vw, 3.8rem);
  font-weight: 800; line-height: .9; color: var(--pri);
}
.piano__periodo { font-size: var(--t-sm); color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.piano__descrizione { margin-top: var(--s3); color: var(--mut); font-size: var(--t-sm); }
.piano__lista { display: grid; gap: .6rem; margin: var(--s4) 0; }
.piano__lista li { position: relative; padding-left: 1.85rem; font-size: var(--t-sm); }
.piano__lista li::before {
  content: ""; position: absolute; left: .28rem; top: .42em;
  width: .48rem; height: .85rem; border: solid var(--pri); border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}
.piano .btn { margin-top: auto; }
.nota-prezzi { margin-top: var(--s4); font-size: var(--t-sm); color: var(--mut); max-width: 70ch; }

/* --- 17. Domande frequenti --------------------------------------------- */
.faq { display: grid; gap: .7rem; max-width: 62rem; }
.faq__voce {
  background: var(--surf); border: 1px solid var(--line); border-left: 4px solid var(--line-forte);
  border-radius: var(--r1); transition: border-color .16s ease-out;
}
.faq__voce:has([aria-expanded="true"]) { border-left-color: var(--pri); box-shadow: var(--ombra-scatto); }
.faq__domanda {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; min-height: 52px; padding: var(--s3) var(--s4); text-align: left;
  font-family: var(--font-titoli); font-size: 1.35rem; font-weight: 600;
  line-height: 1.12; color: var(--ink);
}
.faq__domanda:hover { color: var(--pri-scuro); }
.faq__segno {
  position: relative; flex: 0 0 auto; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: var(--pri-velo);
}
.faq__segno::before, .faq__segno::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--pri-scuro);
  transform: translate(-50%, -50%); transition: transform .18s ease-out;
}
.faq__segno::before { width: .75rem; height: 2.5px; }
.faq__segno::after { width: 2.5px; height: .75rem; }
.faq__domanda[aria-expanded="true"] .faq__segno::after { transform: translate(-50%, -50%) scaleY(0); }
.faq__risposta { padding: 0 var(--s4) var(--s4); color: var(--mut); max-width: var(--misura); }
.faq__risposta p + p { margin-top: var(--s3); }

/* --- 18. Blog e schede articolo ---------------------------------------- */
.griglia-articoli { display: grid; gap: var(--s4); }
.articolo-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--ombra-scatto);
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}
.articolo-card:hover { transform: translateY(-3px); box-shadow: var(--ombra-morbida); }
.articolo-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--campo); }
.articolo-card__media img { width: 100%; height: 100%; object-fit: cover; }
.articolo-card__media::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: repeating-linear-gradient(115deg, var(--pri) 0 14px, var(--acc) 14px 20px, transparent 20px 34px);
}
.articolo-card__corpo { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); flex: 1; }
.articolo-card__meta {
  font-family: var(--font-titoli); font-size: 1rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--mut);
}
.articolo-card__titolo { font-size: var(--t-md); text-transform: none; line-height: 1.12; }
.articolo-card__titolo a { text-decoration: none; color: var(--ink); }
.articolo-card__titolo a:hover { color: var(--pri-scuro); text-decoration: underline; }
.articolo-card__testo { color: var(--mut); font-size: var(--t-sm); }
.articolo-card__link {
  margin-top: auto; align-self: flex-start; text-decoration: none;
  font-family: var(--font-titoli); font-size: 1.15rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--pri-scuro);
  border-bottom: 3px solid var(--acc); padding-bottom: 2px;
}
.articolo-card__link:hover { color: var(--acc-scuro); border-bottom-color: var(--pri); }

/* --- 19. Pagina articolo e corpo redazionale --------------------------- */
.articolo { padding-block: var(--s6) var(--fascia); }
.briciole {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--t-sm); color: var(--mut); margin-bottom: var(--s4);
}
.briciole a { text-decoration: none; }
.briciole a:hover { text-decoration: underline; }
.briciole > * + *::before { content: "/"; margin-right: .5rem; color: var(--line-forte); }
.articolo__titolo { margin-top: var(--s3); font-size: var(--t-2xl); text-transform: none; }
.meta-articolo {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-top: var(--s3); font-size: var(--t-sm); color: var(--mut);
  text-transform: uppercase; letter-spacing: .06em;
  font-family: var(--font-titoli); font-weight: 600;
}
.meta-articolo a { color: var(--pri-scuro); }
.figura {
  margin: var(--s5) 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden;
  background: var(--surf); box-shadow: var(--ombra-scatto);
}
.figura img { width: 100%; height: auto; }
.credito-foto {
  padding: .7rem var(--s3); font-size: var(--t-xs); color: var(--mut);
  background: var(--campo); border-top: 1px solid var(--line);
  text-transform: uppercase; letter-spacing: .08em;
}
.chapo {
  position: relative; margin: var(--s5) 0 var(--s5); padding-left: var(--s4);
  font-size: var(--t-md); color: var(--ink); font-weight: 500;
}
.chapo::before {
  content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 6px;
  background: repeating-linear-gradient(180deg, var(--pri) 0 10px, var(--acc) 10px 16px);
  border-radius: 3px;
}
.sommario {
  margin: var(--s5) 0; padding: var(--s4); background: var(--campo);
  border: 1px dashed var(--line-forte); border-radius: var(--r2);
}
.sommario__titolo {
  font-family: var(--font-titoli); font-size: 1.3rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--s2);
}
.sommario ol { padding-left: 1.3rem; }

/* corpo redazionale: misura di lettura da 62 a 72 caratteri */
.prosa { max-width: var(--misura); }
.prosa > * + * { margin-top: var(--s4); }
.prosa h2 {
  position: relative; margin-top: var(--s6); font-size: var(--t-xl);
  text-transform: uppercase; padding-left: 1.5rem;
}
.prosa h2::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .18em; width: 9px;
  background: repeating-linear-gradient(115deg, var(--pri) 0 5px, var(--pri-chiaro) 5px 10px);
  border-radius: 2px;
}
.prosa h3 {
  margin-top: var(--s5); font-size: var(--t-lg); color: var(--pri-scuro);
  text-transform: none;
}
.prosa h3::after {
  content: ""; display: block; width: 3rem; height: 3px; margin-top: .45rem;
  background: var(--acc);
}
.prosa p { line-height: var(--interlinea); }
.prosa ul, .prosa ol { padding-left: 1.4rem; display: grid; gap: .55rem; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul li { position: relative; padding-left: 1.7rem; }
.prosa ul li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .95rem; height: .42rem; border-radius: 2px;
  background: linear-gradient(115deg, var(--pri) 55%, var(--acc) 55%);
}
.prosa ol { list-style: decimal; }
.prosa ol li::marker { font-family: var(--font-titoli); font-weight: 700; color: var(--pri); }
.prosa blockquote {
  padding: var(--s3) var(--s4); background: var(--campo);
  border-left: 6px solid var(--pri); border-radius: 0 var(--r2) var(--r2) 0;
  font-size: var(--t-md); font-style: italic;
}
.prosa blockquote p + p { margin-top: var(--s3); }
.prosa table {
  font-size: var(--t-sm); background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--r1); overflow: hidden;
}
.prosa th, .prosa td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prosa thead th {
  background: var(--pri); color: #FFFFFF;
  font-family: var(--font-titoli); font-size: 1.1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.prosa tbody tr:nth-child(even) { background: var(--campo); }
.prosa tbody tr:last-child td { border-bottom: 0; }
.prosa figure { margin: var(--s5) 0; }
.prosa figcaption { margin-top: .6rem; font-size: var(--t-xs); color: var(--mut); }
.prosa code {
  font-family: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', Consolas, monospace;
  font-size: .92em; padding: .12em .4em; border-radius: var(--r1);
  background: var(--campo-forte); border: 1px solid var(--line);
}
.prosa a { color: var(--pri-scuro); text-decoration: underline; }
.prosa a:hover { color: var(--acc-scuro); }
.tabella-scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.riquadro {
  position: relative; margin: var(--s5) 0; padding: var(--s5) var(--s4) var(--s4);
  background: var(--surf); border: 1px solid var(--line); border-top: 5px solid var(--pri);
  border-radius: var(--r2); box-shadow: var(--ombra-scatto);
}
.riquadro__titolo {
  position: absolute; top: -.85rem; left: var(--s4);
  background: var(--pri); color: #FFFFFF; border-radius: 2px;
  font-family: var(--font-titoli); font-size: 1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding: .22rem .7rem .16rem;
}

/* blocco "Da leggere anche" */
.da-leggere {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 3px solid var(--line);
}
.da-leggere__titolo {
  position: relative; font-size: var(--t-xl); text-transform: uppercase;
  margin-bottom: var(--s4); padding-left: 1.5rem;
}
.da-leggere__titolo::before {
  content: ""; position: absolute; left: 0; top: .1em; bottom: .15em; width: 9px;
  background: repeating-linear-gradient(115deg, var(--acc) 0 5px, var(--pri) 5px 10px);
  border-radius: 2px;
}

/* --- 20. Riquadro autore ----------------------------------------------- */
.autore-box {
  display: grid; gap: var(--s3); margin-top: var(--s6);
  padding: var(--s4); background: var(--campo);
  border: 1px solid var(--line); border-left: 6px solid var(--pri);
  border-radius: 0 var(--r2) var(--r2) 0;
}
.autore-box__foto {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--surf); box-shadow: 0 0 0 3px var(--pri);
}
.autore-box__nome { font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 800; text-transform: uppercase; }
.autore-box__nome a { text-decoration: none; color: var(--ink); }
.autore-box__nome a:hover { color: var(--pri-scuro); }
.autore-box__ruolo {
  font-family: var(--font-titoli); font-size: 1.05rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--acc-scuro);
}
.autore-box__bio { margin-top: var(--s2); font-size: var(--t-sm); color: var(--mut); }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s3); }
.social__link {
  display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .8rem;
  background: var(--surf); border: 1px solid var(--line-forte); border-radius: var(--r-tondo);
  font-size: var(--t-sm); text-decoration: none; color: var(--pri-scuro);
}
.social__link:hover { border-color: var(--pri); background: var(--pri-velo); }

/* --- 21. Sezione contatto e modulo ------------------------------------- */
.contatto__interno { display: grid; gap: var(--s6); align-items: start; }
.contatto__promessa p + p { margin-top: var(--s4); }
.modulo {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r2); padding: var(--s5) var(--s4) var(--s4);
  box-shadow: var(--ombra-alta); overflow: hidden;
}
.modulo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(115deg, var(--pri) 0 16px, var(--acc) 16px 24px, transparent 24px 40px);
}
.campi { display: grid; gap: var(--s3); }
.campi--due { display: grid; gap: var(--s3); }
.campo { display: grid; gap: .35rem; }
.campo__etichetta {
  font-family: var(--font-titoli); font-size: 1.15rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
}
.campo__obbligatorio { color: var(--acc-scuro); }
.campo__aiuto { font-size: var(--t-xs); color: var(--mut); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: .65rem .8rem;
  background: var(--surf); color: var(--ink);
  border: 1.5px solid var(--line-forte); border-radius: var(--r1);
  transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
.campo textarea { min-height: 9rem; resize: vertical; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--pri-chiaro); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-velo);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--acc); outline-offset: 2px;
}
.modulo__nota { margin-top: var(--s3); font-size: var(--t-xs); color: var(--mut); }
.alternativa {
  margin-top: var(--s4); padding-top: var(--s3); border-top: 2px dotted var(--line-forte);
  font-size: var(--t-sm); color: var(--mut);
}

/* --- 22. Piede di pagina ------------------------------------------------ */
.piede {
  position: relative; background: var(--surf);
  border-top: 1px solid var(--line); margin-top: var(--fascia);
  background-image: repeating-linear-gradient(115deg, var(--pri-velo) 0 2px, transparent 2px 30px);
}
.piede::before {
  content: ""; display: block; height: 6px;
  background: repeating-linear-gradient(115deg,
    var(--pri) 0 16px, var(--pri-chiaro) 16px 22px, var(--acc) 22px 28px, transparent 28px 46px);
}
.piede__griglia { display: grid; gap: var(--s5); padding-block: var(--s6); }
.piede__col { min-width: 0; }
.piede__marchio {
  display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
  font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; color: var(--ink);
}
.piede__claim { margin-top: var(--s3); color: var(--mut); font-size: var(--t-sm); max-width: 34ch; }
.piede__contatto { margin-top: var(--s3); font-size: var(--t-sm); }
.piede__titolo {
  font-family: var(--font-titoli); font-size: 1.3rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink);
  padding-bottom: .4rem; margin-bottom: var(--s3);
  border-bottom: 3px solid var(--pri);
}
.piede__lista { display: grid; gap: .55rem; font-size: var(--t-sm); }
.piede__lista a { text-decoration: none; color: var(--mut); }
.piede__lista a:hover { color: var(--pri-scuro); text-decoration: underline; }
.piede__cookie {
  margin-top: var(--s4); min-height: 44px; padding: .5rem .9rem;
  border: 1.5px solid var(--line-forte); border-radius: var(--r1);
  background: var(--surf); color: var(--pri-scuro);
  font-family: var(--font-titoli); font-size: 1.1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.piede__cookie:hover { border-color: var(--pri); background: var(--pri-velo); }

/* colonna ecosistema: targhette da tabellone */
.ecosistema { display: grid; gap: .55rem; }
.ecosistema__link {
  position: relative; display: grid; gap: .1rem; padding: .6rem .8rem .6rem 1rem;
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r1);
  text-decoration: none; overflow: hidden;
  transition: border-color .15s ease-out, transform .15s ease-out;
}
.ecosistema__link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: repeating-linear-gradient(115deg, var(--pri) 0 6px, var(--pri-chiaro) 6px 11px);
}
.ecosistema__link:hover { border-color: var(--pri); transform: translateX(2px); }
.ecosistema__link:hover::before { background: repeating-linear-gradient(115deg, var(--acc) 0 6px, var(--acc-scuro) 6px 11px); }
.ecosistema__nome {
  font-family: var(--font-titoli); font-size: 1.2rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink);
}
.ecosistema__desc { font-size: var(--t-xs); color: var(--mut); }

.piede__barra {
  display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: space-between;
  align-items: center; padding-block: var(--s4);
  border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--mut);
}
.piede__legale { display: flex; flex-wrap: wrap; gap: var(--s3); }
.piede__legale a { text-decoration: none; color: var(--mut); }
.piede__legale a:hover { color: var(--pri-scuro); text-decoration: underline; }

/* --- 23. Banner cookie -------------------------------------------------- */
.cookie {
  position: fixed; z-index: 120; left: 1rem; right: 1rem; bottom: 1rem;
  max-width: 46rem; margin-inline: auto;
  background: var(--surf); color: var(--ink);
  border: 1px solid var(--line-forte); border-top: 6px solid var(--pri);
  border-radius: var(--r2); box-shadow: var(--ombra-alta);
  padding: var(--s4);
}
.cookie[hidden] { display: none; }
.cookie__titolo {
  font-family: var(--font-titoli); font-size: 1.45rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .03em; margin-bottom: var(--s2);
}
.cookie__testo { font-size: var(--t-sm); color: var(--mut); }
.cookie__azioni { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s4); }
.cookie__azioni .btn { flex: 1 1 12rem; }
.cookie__personalizza {
  min-height: 44px; padding: .4rem .6rem; color: var(--pri-scuro);
  font-family: var(--font-titoli); font-size: 1.1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--acc);
}
.cookie__personalizza:hover { color: var(--acc-scuro); }
.cookie__dettaglio { margin-top: var(--s4); font-size: var(--t-sm); color: var(--mut); }
.cookie__dettaglio[hidden] { display: none; }
.cookie__dettaglio table {
  margin-bottom: var(--s3); font-size: var(--t-xs);
  border: 1px solid var(--line); border-radius: var(--r1); overflow: hidden;
}
.cookie__dettaglio th, .cookie__dettaglio td {
  padding: .5rem .6rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.cookie__dettaglio thead th {
  background: var(--campo); color: var(--ink);
  font-family: var(--font-titoli); text-transform: uppercase; letter-spacing: .05em;
}
.cookie__dettaglio tbody tr:last-child td { border-bottom: 0; }

/* --- 24. Responsive ----------------------------------------------------- */
/* da 560px: schede affiancate dove ha senso */
@media (min-width: 560px) {
  .campi--due { grid-template-columns: repeat(2, 1fr); }
  .autore-box { grid-template-columns: auto 1fr; align-items: start; column-gap: var(--s4); }
  .cookie { padding: var(--s5); }
}

/* da 700px: griglie a due colonne */
@media (min-width: 700px) {
  .griglia-funzioni { grid-template-columns: repeat(2, 1fr); }
  .vantaggi { grid-template-columns: repeat(2, 1fr); }
  .prove { grid-template-columns: repeat(2, 1fr); }
  .griglia-articoli { grid-template-columns: repeat(2, 1fr); }
  .piede__griglia { grid-template-columns: repeat(2, 1fr); }
  .passi { grid-template-columns: repeat(1, 1fr); }
}

/* da 900px: navigazione desktop e impaginazioni a tre colonne */
@media (min-width: 900px) {
  .nav { display: flex; }
  .apri-menu { display: none; }
  .menu-mobile { display: none !important; }
  .prove { grid-template-columns: repeat(3, 1fr); }
  .prezzi { grid-template-columns: repeat(3, 1fr); }
  .griglia-articoli { grid-template-columns: repeat(3, 1fr); }
  .hero__interno { grid-template-columns: 1.05fr .95fr; }
  .problema__interno { grid-template-columns: 1.15fr .85fr; }
  .contatto__interno { grid-template-columns: .9fr 1.1fr; }
  .piede__griglia { grid-template-columns: 1.3fr 1fr 1fr; }
  .piano--evidenza { transform: translateY(-12px); }
}

/* da 1100px: quattro colonne di funzionalita e cinque di piede */
@media (min-width: 1100px) {
  .griglia-funzioni { grid-template-columns: repeat(4, 1fr); }
  .passi { grid-template-columns: repeat(3, 1fr); }
  .passo::after {
    left: 100%; top: calc(var(--s4) + 1.75rem); width: var(--s4); height: 2px;
    background: repeating-linear-gradient(90deg, var(--pri) 0 6px, transparent 6px 12px);
  }
  .piede__griglia { grid-template-columns: 1.4fr .9fr 1.1fr .9fr 1.2fr; }
}

/* schermi molto stretti: si riducono gli scarti, mai lo scorrimento laterale */
@media (max-width: 380px) {
  :root { --s4: 1.1rem; --s5: 1.6rem; --s6: 2.2rem; }
  .marchio__nome { font-size: 1.4rem; }
  .btn { font-size: 1.15rem; padding: .65rem 1rem; }
}

/* --- 25. Rispetto del movimento ridotto --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .funzione:hover, .articolo-card:hover, .btn:hover, .ecosistema__link:hover { transform: none; }
}

/* --- Stampa: pagina leggibile senza decorazioni pesanti ------------------ */
@media print {
  .testata, .menu-mobile, .cookie, .piede__cookie, .btn { display: none !important; }
  body { background: #FFFFFF; }
  .prosa { max-width: none; }
}