@charset "utf-8";
/* =====================================================================
   MenuConAllergeni - foglio di stile unico del sito
   Direzione artistica: tavolo di trattoria. Carta avorio del menu,
   rosso pomodoro delle azioni, verde basilico dei riscontri.
   Motivo ricorrente: righe del menu con i puntini di guida fra piatto e
   prezzo, pastiglie degli allergeni, quadretti della tovaglia, bordo
   festonato della carta. Tutto il decoro è disegnato in CSS puro:
   nessuna immagine esterna serve per la grafica.
   Tema chiaro obbligatorio su tutte le pagine: nessun blocco legato alla
   preferenza scura del sistema.
   ---------------------------------------------------------------------
   Indice
    1. Font           2. Reset          3. Variabili     4. Tipografia
    5. Struttura      6. Decorazioni    7. Testata       8. Bottoni
    9. Hero          10. Problema      11. Soluzione    12. Funzionalità
   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: Playfair Display per i titoli, la grazia dei menu stampati.
      Karla per il testo corrente, asciutta e leggibile anche in sala.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   2. Reset moderno e sobrio
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* la testata resta in alto: lo scorrimento verso le ancore la evita */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
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 avorio, surf superfici bianche, ink bruno del caffè,
      mut testo secondario, pri rosso pomodoro, acc verde basilico,
      line filetti chiari della carta.
   --------------------------------------------------------------------- */
:root {
  --bg: #FFFBF4; --surf: #FFFFFF; --ink: #2B1A17; --mut: #7A6259;
  --pri: #C0392B; --acc: #2E7D52; --line: #EFE3D6;
  /* derivate del rosso pomodoro: stato premuto, buccia chiara, velature */
  --pri-scuro: #96271C; --pri-chiaro: #E05A46; --pri-velo: #FCEEEA; --pri-velo2: #F7DCD6;
  /* derivate del verde basilico */
  --acc-scuro: #1F5C3B; --acc-velo: #E9F3ED; --acc-velo2: #D3E7DB;
  /* carta, filetti e crosta di pane per le note calde */
  --carta: #FBF3E7; --carta-forte: #F5E8D6; --line-forte: #E2CFB8;
  --crosta: #A8741C; --crosta-velo: #FAF0DC;
  /* raggi: la carta è squadrata, le pastiglie sono tonde */
  --r-carta: 4px; --r-mini: 3px; --r-btn: 7px; --r-tondo: 999px;
  /* ombre calde, mai grigie, come la luce di una sala */
  --om-1: 0 1px 2px rgba(43, 26, 23, .06);
  --om-2: 0 2px 4px rgba(43, 26, 23, .05), 0 12px 26px rgba(43, 26, 23, .07);
  --om-3: 0 4px 10px rgba(43, 26, 23, .07), 0 22px 46px rgba(43, 26, 23, .10);
  --om-pomodoro: 0 10px 24px rgba(192, 57, 43, .18);
  /* sfumatura pomodoro, ricorrente su bottoni, filetti e numeri */
  --sugo: linear-gradient(100deg, var(--pri-scuro) 0%, var(--pri) 52%, var(--pri-chiaro) 100%);
  /* puntini di guida fra piatto e prezzo, firma grafica del sito */
  --puntini: radial-gradient(circle, var(--line-forte) 1.2px, transparent 1.4px);
  /* quadretti della tovaglia */
  --quadretti:
    repeating-linear-gradient(90deg, rgba(192, 57, 43, .17) 0 9px, transparent 9px 18px),
    repeating-linear-gradient(0deg, rgba(192, 57, 43, .17) 0 9px, transparent 9px 18px);
  /* 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.4rem);
  /* famiglie tipografiche con ripiego reale */
  --f-tit: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --f-testo: 'Karla', '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.7;
  font-size: clamp(1rem, .96rem + .22vw, 1.075rem);
  overflow-x: hidden;
  /* carta rigata del menu più due velature calde di sala */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 33px, rgba(43, 26, 23, .028) 33px 34px),
    radial-gradient(circle at 8% 0%, rgba(192, 57, 43, .05), transparent 44%),
    radial-gradient(circle at 94% 4%, rgba(46, 125, 82, .05), transparent 40%);
  background-repeat: repeat, no-repeat, no-repeat;
}
h1, h2, h3, h4 { font-family: var(--f-tit); font-weight: 700; line-height: 1.16; color: var(--ink); }
h1 { font-size: clamp(2.05rem, 1.5rem + 2.6vw, 3.5rem); letter-spacing: -.012em; }
h2 { font-size: clamp(1.6rem, 1.28rem + 1.5vw, 2.5rem); letter-spacing: -.008em; }
h3 { font-size: clamp(1.22rem, 1.1rem + .6vw, 1.55rem); }
h4 { font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); }
p { max-width: 78ch; }
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: .85em; }
::selection { background: var(--pri-velo2); color: var(--ink); }

/* fuoco sempre visibile, disegnato come un filetto di menu */
:focus-visible {
  outline: 3px solid var(--pri);
  outline-offset: 3px;
  border-radius: var(--r-mini);
}

/* ---------------------------------------------------------------------
   5. Struttura: contenitori, sezioni, intestazioni, griglie
   --------------------------------------------------------------------- */
.wrap { width: min(1176px, 100% - clamp(2rem, 6vw, 5rem)); margin-inline: auto; }
.wrap-stretto { width: min(820px, 100% - clamp(2rem, 6vw, 4rem)); margin-inline: auto; }
.sezione { position: relative; padding-block: var(--sez-y); }
.sezione--carta { background: var(--surf); border-block: 1px solid var(--line); }
.sezione--crema { background: var(--carta); border-block: 1px solid var(--line); }
/* fascia con la banda a quadretti della tovaglia in testa */
.sezione--tovaglia { background: var(--surf); border-bottom: 1px solid var(--line); }
.sezione--tovaglia::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 18px;
  background-color: var(--surf); background-image: var(--quadretti); background-size: 18px 18px;
  border-bottom: 1px solid var(--line);
}
.sezione--tovaglia { padding-top: calc(var(--sez-y) + 18px); }
/* fascia rigata come la pagina di un menu scritto a mano */
.sezione--menu {
  background-color: var(--carta);
  background-image: repeating-linear-gradient(0deg, transparent 0 33px, rgba(43, 26, 23, .05) 33px 34px);
  border-block: 1px solid var(--line);
}
.intestazione-sezione { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
.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-testo); font-weight: 700; font-size: .8rem;
  letter-spacing: .17em; text-transform: uppercase; color: var(--pri-scuro);
  margin-bottom: .8rem;
}
.occhiello::before {
  content: ""; width: 14px; height: 14px; border-radius: var(--r-tondo);
  background: radial-gradient(circle at 34% 30%, var(--pri-chiaro), var(--pri) 62%, var(--pri-scuro));
  box-shadow: 0 0 0 3px var(--pri-velo);
}
.titolo-sezione { margin-bottom: .9rem; }
.intro-sezione { color: var(--mut); font-size: 1.06rem; max-width: 62ch; }
.intestazione-sezione--centrata .intro-sezione { margin-inline: auto; }
.griglia-2, .griglia-3, .griglia-4 { display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); }
.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-carta);
  padding: clamp(1.2rem, 2.4vw, 1.9rem); box-shadow: var(--om-1);
}
.centro { text-align: center; }
.visivamente-nascosto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.salta-al-contenuto {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pri); color: #fff; padding: .8rem 1.2rem; font-weight: 700;
  border-radius: 0 0 var(--r-btn) 0; text-decoration: none;
}
.salta-al-contenuto:focus { left: 0; color: #fff; }
.hp { position: absolute; left: -9999px; }

/* ---------------------------------------------------------------------
   6. Decorazioni proprie del sito, tutte disegnate in CSS
   --------------------------------------------------------------------- */
/* banda a quadretti della tovaglia, separatore forte */
.tovaglia {
  height: 18px; border-radius: var(--r-mini);
  background-color: var(--surf); background-image: var(--quadretti); background-size: 18px 18px;
  border: 1px solid var(--line);
}
/* filetto puntinato, la riga di guida dei menu stampati */
.filetto-menu {
  height: 6px; background-image: var(--puntini); background-size: 8px 6px;
  background-repeat: repeat-x; background-position: 0 center;
}
/* riga di menu: voce a sinistra, puntini che corrono, prezzo a destra */
.riga-menu { display: flex; align-items: baseline; gap: .5rem; padding-block: .38rem; }
.riga-menu__voce { font-weight: 500; }
.riga-menu__punti {
  flex: 1 1 auto; height: 1em; min-width: 1.5rem;
  background-image: var(--puntini); background-size: 7px 6px;
  background-repeat: repeat-x; background-position: 0 bottom .28em;
}
.riga-menu__prezzo { font-family: var(--f-tit); font-weight: 600; color: var(--pri-scuro); white-space: nowrap; }
/* pastiglie degli allergeni: presenza certa in pieno, tracce in contorno */
.allergeni { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.allergene {
  display: inline-flex; align-items: center; gap: .32rem;
  min-height: 26px; padding: 0 .6rem; border-radius: var(--r-tondo);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--pri-velo); color: var(--pri-scuro); border: 1px solid var(--pri-velo2);
}
.allergene--certo { background: var(--pri); color: #fff; border-color: var(--pri-scuro); }
.allergene--tracce {
  background: var(--surf); color: var(--crosta); border: 1px dashed var(--crosta);
}
/* pomodoro disegnato: pastiglia rossa con il picciolo verde */
.pomodoro {
  position: relative; display: inline-block; width: 20px; height: 20px; border-radius: var(--r-tondo);
  background: radial-gradient(circle at 34% 30%, var(--pri-chiaro), var(--pri) 60%, var(--pri-scuro));
  flex: 0 0 auto;
}
.pomodoro::after {
  content: ""; position: absolute; top: -4px; left: 50%; width: 10px; height: 5px;
  transform: translateX(-50%) rotate(-8deg); border-radius: 60% 60% 30% 30%;
  background: var(--acc);
}
/* targhetta da lavagna dei piatti del giorno */
.targhetta-lavagna {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: var(--r-mini);
  background: var(--acc-velo); color: var(--acc-scuro);
  border: 1px solid var(--acc-velo2);
  font-size: .82rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
/* bordo festonato della carta, come il bordo di un tovagliolo */
.bordo-festonato { position: relative; }
.bordo-festonato::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -11px; height: 12px; pointer-events: none;
  background-image: radial-gradient(circle at 11px 0, var(--bg) 11px, transparent 11.5px);
  background-size: 22px 12px; background-repeat: repeat-x;
}

/* ---------------------------------------------------------------------
   7. Testata: marchio, navigazione, menu a scomparsa
   --------------------------------------------------------------------- */
.testata {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 251, 244, .94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
/* filo di tovaglia sotto la testata, firma del sito */
.testata::after {
  content: ""; display: block; height: 4px;
  background-color: var(--surf); background-image: var(--quadretti); background-size: 12px 12px;
}
.testata__interno { display: flex; align-items: center; gap: 1rem; min-height: 76px; }
.marchio { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }
.marchio__sigla {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-tondo);
  background: var(--sugo); color: #fff; box-shadow: var(--om-pomodoro);
  font-family: var(--f-tit); font-weight: 700; font-size: 1.02rem; letter-spacing: .02em;
  border: 2px solid var(--surf);
}
.marchio__nome { font-family: var(--f-tit); font-weight: 700; font-size: 1.24rem; letter-spacing: -.01em; }
.marchio__nome b { color: var(--pri); font-weight: 700; }
.nav { display: none; margin-inline-start: auto; gap: .15rem; }
.nav__link {
  position: relative; display: inline-block; padding: .55rem .68rem; border-radius: var(--r-mini);
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: .96rem;
}
.nav__link::after {
  content: ""; position: absolute; left: .68rem; right: .68rem; bottom: .3rem; height: 2px;
  background: var(--pri); transform: scaleX(0); transform-origin: left; transition: transform .18s 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); font-weight: 700; }
.testata__azione { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
.nav + .testata__azione { margin-inline-start: .4rem; }
.apri-menu {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .85rem;
  background: var(--surf); border: 1px solid var(--line-forte); border-radius: var(--r-btn);
  font-weight: 700; font-size: .92rem; color: var(--ink);
}
.apri-menu__barre { position: relative; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; }
.apri-menu__barre::before, .apri-menu__barre::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, top .2s ease;
}
.apri-menu__barre::before { top: -6px; }
.apri-menu__barre::after { top: 6px; }
.apri-menu[aria-expanded="true"] .apri-menu__barre { background: transparent; }
.apri-menu[aria-expanded="true"] .apri-menu__barre::before { top: 0; transform: rotate(45deg); }
.apri-menu[aria-expanded="true"] .apri-menu__barre::after { top: 0; transform: rotate(-45deg); }
.menu-mobile { display: none; background: var(--surf); border-top: 1px solid var(--line); padding-block: 1rem 1.4rem; }
.menu-mobile.is-aperto { display: block; }
.menu-mobile__lista { display: grid; gap: .1rem; margin-bottom: 1rem; }
.menu-mobile__lista a {
  display: block; padding: .8rem .2rem; border-bottom: 1px dotted var(--line-forte);
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.menu-mobile__lista a:hover { color: var(--pri-scuro); }
body.menu-aperto { overflow: hidden; }

/* ---------------------------------------------------------------------
   8. Bottoni: pieni come un bollo di ceralacca, con appoggio inferiore
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .78rem 1.35rem; border-radius: var(--r-btn);
  font-family: var(--f-testo); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; text-align: center; border: 1px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.btn--primario {
  background-image: var(--sugo); color: #fff; border-color: var(--pri-scuro);
  box-shadow: 0 3px 0 var(--pri-scuro), var(--om-pomodoro);
}
.btn--primario:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 5px 0 var(--pri-scuro), var(--om-pomodoro); }
.btn--primario:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--pri-scuro); }
.btn--secondario {
  background: var(--surf); color: var(--acc-scuro); border: 2px solid var(--acc);
  box-shadow: 0 3px 0 var(--acc-velo2);
}
.btn--secondario:hover { background: var(--acc-velo); color: var(--acc-scuro); transform: translateY(-2px); }
.btn--secondario:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--acc-velo2); }
.btn--fantasma {
  background: transparent; color: var(--ink); border: 1px solid var(--line-forte);
}
.btn--fantasma:hover { background: var(--carta); color: var(--pri-scuro); }
.btn--piccolo { min-height: 44px; padding: .55rem 1rem; font-size: .93rem; }
.btn--blocco { display: flex; width: 100%; }

/* ---------------------------------------------------------------------
   9. Hero: testo a sinistra, carta del menu appoggiata a destra
   --------------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.6rem, 6vw, 5rem) clamp(3rem, 7vw, 5.6rem);
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 88% 8%, rgba(192, 57, 43, .10), transparent 46%),
    radial-gradient(circle at 4% 84%, rgba(46, 125, 82, .09), transparent 44%);
  border-bottom: 1px solid var(--line);
}
/* riga di quadretti che chiude la fascia di apertura */
.hero::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 10px;
  background-color: var(--surf); background-image: var(--quadretti); background-size: 12px 12px;
}
.hero__interno { display: grid; gap: clamp(2rem, 5vw, 3.4rem); align-items: center; }
.hero__titolo { margin-bottom: 1rem; }
.hero__titolo em { font-style: italic; color: var(--pri-scuro); }
.hero__sub { font-size: clamp(1.04rem, 1rem + .35vw, 1.2rem); color: var(--mut); max-width: 56ch; margin-bottom: 1.7rem; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }
.hero__punti { display: grid; gap: .55rem; }
.hero__punti li { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; }
.hero__punti li::before {
  content: ""; margin-top: .34em; width: 14px; height: 14px; border-radius: var(--r-tondo); flex: 0 0 auto;
  background: radial-gradient(circle at 34% 30%, var(--pri-chiaro), var(--pri) 62%, var(--pri-scuro));
  box-shadow: 0 0 0 3px var(--pri-velo);
}
.hero__visuale { position: relative; }
/* la carta del menu del tavolo, elemento visivo principale della home */
.menu-tavolo {
  position: relative; background: var(--surf); border: 1px solid var(--line-forte);
  border-radius: var(--r-carta); box-shadow: var(--om-3); padding: 1.4rem 1.4rem 1.2rem;
  max-width: 470px; margin-inline: auto;
}
.menu-tavolo::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid var(--line);
  border-radius: var(--r-mini); pointer-events: none;
}
.menu-tavolo__testata { position: relative; text-align: center; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 2px solid var(--pri); }
.menu-tavolo__insegna { font-family: var(--f-tit); font-weight: 700; font-size: 1.4rem; letter-spacing: .01em; }
.menu-tavolo__data { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.menu-tavolo__corpo { display: grid; gap: .3rem; }
.menu-tavolo__gruppo {
  font-family: var(--f-testo); font-weight: 700; font-size: .78rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--acc-scuro); margin-top: .7rem;
}
.menu-tavolo__piatto { padding-block: .3rem; border-bottom: 1px dotted var(--line-forte); }
.menu-tavolo__piatto:last-of-type { border-bottom: 0; }
.menu-tavolo__piede {
  display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--line); font-size: .88rem; color: var(--mut);
}
/* codice QR stilizzato, disegnato con i soli gradienti */
.qr {
  position: relative; flex: 0 0 auto; width: 78px; height: 78px; padding: 6px;
  background-color: var(--surf); border: 3px solid var(--ink); border-radius: var(--r-mini);
  background-image: repeating-conic-gradient(var(--ink) 0% 25%, var(--surf) 0% 50%);
  background-size: 13px 13px; background-position: 6px 6px; background-origin: content-box; background-clip: content-box;
}
.qr::before, .qr::after {
  content: ""; position: absolute; width: 24px; height: 24px; background: var(--surf);
  box-shadow: inset 0 0 0 5px var(--ink);
}
.qr::before { top: 6px; left: 6px; }
.qr::after { bottom: 6px; right: 6px; }

/* ---------------------------------------------------------------------
   10. Problema: racconto della sala più pannello dei sintomi
   --------------------------------------------------------------------- */
.problema__interno { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.problema__racconto p { margin-bottom: 1.1rem; max-width: 64ch; }
.problema__racconto p:first-of-type::first-letter {
  float: left; font-family: var(--f-tit); font-weight: 700; font-size: 3.4rem; line-height: .84;
  color: var(--pri); padding: .1rem .5rem .2rem 0;
}
.sintomi {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-top: 4px solid var(--pri); border-radius: var(--r-carta);
  padding: clamp(1.2rem, 2.6vw, 1.8rem); box-shadow: var(--om-2);
}
.sintomi__titolo { font-size: 1.16rem; margin-bottom: .9rem; }
.sintomi li { display: flex; gap: .7rem; padding-block: .65rem; border-bottom: 1px dotted var(--line-forte); }
.sintomi li:last-child { border-bottom: 0; padding-bottom: 0; }
.sintomo::before {
  content: ""; margin-top: .42em; width: 10px; height: 10px; flex: 0 0 auto; border-radius: var(--r-tondo);
  background: var(--pri); box-shadow: 0 0 0 4px var(--pri-velo);
}

/* ---------------------------------------------------------------------
   11. Soluzione: testo di apertura e tre passaggi in fila
   --------------------------------------------------------------------- */
.soluzione__testo { max-width: var(--misura); }
.soluzione__testo p { margin-bottom: 1.1rem; }
.passi { display: grid; gap: clamp(1.1rem, 2.6vw, 1.8rem); margin-top: clamp(2rem, 4vw, 3rem); }
.passo {
  position: relative; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-carta);
  padding: 1.5rem 1.4rem 1.4rem; box-shadow: var(--om-1);
}
.passo::before {
  content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 4px;
  background-image: var(--sugo); border-radius: var(--r-carta) var(--r-carta) 0 0;
}
.passo__numero {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-tondo);
  background: var(--pri-velo); color: var(--pri-scuro); border: 2px solid var(--pri);
  font-family: var(--f-tit); font-weight: 700; font-size: 1.24rem; margin-bottom: .9rem;
}
.passo__titolo { margin-bottom: .5rem; }
.passo__testo { color: var(--mut); }

/* ---------------------------------------------------------------------
   12. Funzionalità: schede a carta con filetto puntinato
   --------------------------------------------------------------------- */
.griglia-funzioni { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.funzione {
  position: relative; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-carta);
  padding: 1.5rem 1.4rem; box-shadow: var(--om-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.funzione:hover { transform: translateY(-3px); box-shadow: var(--om-2); border-color: var(--line-forte); }
.funzione::after {
  content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 3.1rem; height: 6px;
  background-image: var(--puntini); background-size: 8px 6px; background-repeat: repeat-x;
}
.funzione__indice {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--r-tondo);
  background: var(--acc-velo); color: var(--acc-scuro); border: 1px solid var(--acc-velo2);
  font-family: var(--f-tit); font-weight: 700; font-size: 1rem; margin-bottom: 1.5rem;
}
.funzione__titolo { font-size: 1.16rem; margin-bottom: .55rem; }
.funzione__testo { color: var(--mut); font-size: .98rem; }

/* ---------------------------------------------------------------------
   13. Vantaggi: due colonne su carta crema, angolo con il pomodoro
   --------------------------------------------------------------------- */
.vantaggi { display: grid; gap: clamp(1.1rem, 2.4vw, 1.8rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.vantaggio {
  position: relative; overflow: hidden; background: var(--surf);
  border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: var(--r-carta);
  padding: 1.5rem 1.5rem 1.4rem; box-shadow: var(--om-1);
}
.vantaggio::before {
  content: ""; position: absolute; top: -26px; right: -26px; width: 78px; height: 78px; border-radius: var(--r-tondo);
  background: radial-gradient(circle at 40% 40%, var(--pri-velo), transparent 70%);
}
.vantaggio__titolo { font-size: 1.2rem; margin-bottom: .55rem; }
.vantaggio__testo { color: var(--mut); }

/* ---------------------------------------------------------------------
   14. Prova sociale: tre schede con la virgoletta stampata
   --------------------------------------------------------------------- */
.prove { display: grid; gap: clamp(1.1rem, 2.4vw, 1.7rem); grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.prova {
  position: relative; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-carta);
  padding: 2.4rem 1.5rem 1.5rem; box-shadow: var(--om-1);
}
.prova::before {
  content: "\201C"; position: absolute; top: .1rem; left: 1.1rem;
  font-family: var(--f-tit); font-weight: 700; font-size: 3.6rem; line-height: 1; color: var(--pri-velo2);
}
.prova__testo { font-size: 1rem; margin-bottom: 1.1rem; }
.prova__firma { display: flex; align-items: center; gap: .7rem; padding-top: .9rem; border-top: 1px dotted var(--line-forte); }
.prova__nome { font-family: var(--f-tit); font-weight: 700; font-size: 1.04rem; display: block; }
.prova__ruolo { color: var(--mut); font-size: .9rem; }
.nota-scenari {
  margin-top: 1.4rem; padding: .8rem 1rem; border-radius: var(--r-mini);
  background: var(--crosta-velo); border: 1px dashed var(--crosta); color: var(--ink);
  font-size: .92rem;
}

/* ---------------------------------------------------------------------
   15. Prezzi: tre carte con la riga di menu e il piano in evidenza
   --------------------------------------------------------------------- */
.prezzi { display: grid; gap: clamp(1.1rem, 2.4vw, 1.7rem); grid-template-columns: repeat(auto-fit, minmax(276px, 1fr)); align-items: start; }
.piano {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-carta);
  padding: 1.7rem 1.5rem 1.5rem; box-shadow: var(--om-1);
}
.piano--evidenza {
  border: 2px solid var(--pri); box-shadow: var(--om-3); padding-top: 2.2rem;
  background-image: linear-gradient(180deg, var(--pri-velo), transparent 34%);
}
.piano__nastro {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background-image: var(--sugo); color: #fff; border-radius: var(--r-tondo);
  padding: .35rem .95rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: var(--om-pomodoro); white-space: nowrap;
}
.piano__nome { font-size: 1.34rem; margin-bottom: .3rem; }
.piano__prezzo { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .6rem; }
.piano__cifra { font-family: var(--f-tit); font-weight: 800; font-size: clamp(2.2rem, 1.8rem + 1.4vw, 2.9rem); color: var(--pri-scuro); line-height: 1; }
.piano__periodo { color: var(--mut); font-size: .95rem; }
.piano__descrizione { color: var(--mut); font-size: .97rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px dotted var(--line-forte); }
.piano__lista { display: grid; gap: .6rem; margin-bottom: 1.5rem; }
.piano__lista li { display: flex; gap: .6rem; align-items: flex-start; font-size: .97rem; }
.piano__lista li::before {
  content: ""; margin-top: .3em; width: 16px; height: 16px; flex: 0 0 auto; border-radius: var(--r-tondo);
  background: var(--acc-velo); border: 1px solid var(--acc);
  background-image: linear-gradient(45deg, transparent 44%, var(--acc) 44% 56%, transparent 56%);
}
.piano .btn { margin-top: auto; }
.nota-prezzi { margin-top: 1.5rem; color: var(--mut); font-size: .95rem; max-width: 74ch; }

/* ---------------------------------------------------------------------
   16. Domande frequenti: fisarmonica su carta rigata
   --------------------------------------------------------------------- */
.faq { display: grid; gap: .8rem; max-width: 900px; }
.faq__voce { background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-carta); overflow: hidden; }
.faq__voce:has(.faq__domanda[aria-expanded="true"]) { border-color: var(--pri); box-shadow: var(--om-1); }
.faq__domanda {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  min-height: 56px; padding: 1rem 1.1rem; background: transparent; border: 0; text-align: left;
  font-family: var(--f-tit); font-weight: 600; font-size: 1.06rem; color: var(--ink);
}
.faq__domanda:hover { color: var(--pri-scuro); background: var(--pri-velo); }
.faq__segno {
  position: relative; flex: 0 0 auto; width: 26px; height: 26px; border-radius: var(--r-tondo);
  background: var(--pri-velo); border: 1px solid var(--pri-velo2);
}
.faq__segno::before, .faq__segno::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 2px;
  background: var(--pri-scuro); transform: translate(-50%, -50%); transition: transform .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); }
.faq__risposta { padding: 0 1.1rem 1.2rem; color: var(--mut); }
.faq__risposta p { max-width: var(--misura); }
.faq__risposta p + p { margin-top: .8rem; }

/* ---------------------------------------------------------------------
   17. Schede blog e blocco "Da leggere anche"
   --------------------------------------------------------------------- */
.griglia-articoli { display: grid; gap: clamp(1.1rem, 2.4vw, 1.7rem); grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.articolo-card {
  display: flex; flex-direction: column; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-carta); overflow: hidden; box-shadow: var(--om-1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.articolo-card:hover { transform: translateY(-3px); box-shadow: var(--om-2); }
.articolo-card__media { position: relative; background: var(--carta); }
.articolo-card__media img { width: 100%; height: 190px; object-fit: cover; }
.articolo-card__media::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 5px; background-image: var(--sugo);
}
.articolo-card__corpo { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.2rem 1.3rem; flex: 1 1 auto; }
.articolo-card__meta { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.articolo-card__titolo { font-size: 1.1rem; line-height: 1.3; }
.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: .95rem; }
.articolo-card__link { margin-top: auto; font-weight: 700; color: var(--pri-scuro); text-decoration: none; }
.articolo-card__link:hover { text-decoration: underline; }
.articolo-card__link::after { content: " \203A"; }
.da-leggere { margin-top: clamp(2.4rem, 5vw, 3.6rem); padding-top: 1.8rem; border-top: 2px solid var(--line); }
.da-leggere__titolo {
  display: flex; align-items: center; gap: .8rem; font-size: 1.4rem; margin-bottom: 1.3rem;
}
.da-leggere__titolo::after {
  content: ""; flex: 1 1 auto; height: 6px;
  background-image: var(--puntini); background-size: 8px 6px; background-repeat: repeat-x;
}

/* ---------------------------------------------------------------------
   18. Pagina articolo: intestazione, corpo redazionale, riquadri
   --------------------------------------------------------------------- */
.articolo { padding-block: clamp(2rem, 5vw, 3.4rem) clamp(3rem, 6vw, 4.6rem); }
.briciole { font-size: .88rem; color: var(--mut); margin-bottom: 1rem; }
.briciole a { color: var(--mut); }
.briciole a:hover { color: var(--pri-scuro); }
.briciole span { margin-inline: .4rem; }
.articolo__titolo { max-width: 24ch; margin-bottom: 1rem; }
.meta-articolo {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  font-size: .92rem; color: var(--mut); padding-bottom: 1.2rem;
  border-bottom: 1px dotted var(--line-forte); margin-bottom: 1.6rem;
}
.meta-articolo a { color: var(--pri-scuro); }
.chapo {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.22rem); color: var(--ink);
  border-left: 4px solid var(--pri); background: var(--pri-velo);
  padding: 1rem 1.2rem; border-radius: 0 var(--r-carta) var(--r-carta) 0; margin-bottom: 1.8rem;
  max-width: var(--misura);
}
.figura { margin-bottom: 1.8rem; }
.figura img { width: 100%; border: 1px solid var(--line-forte); border-radius: var(--r-carta); box-shadow: var(--om-2); }
.credito-foto, figcaption { font-size: .85rem; color: var(--mut); margin-top: .55rem; }
.sommario {
  background: var(--acc-velo); border: 1px solid var(--acc-velo2); border-radius: var(--r-carta);
  padding: 1.2rem 1.3rem; margin-bottom: 2rem; max-width: var(--misura);
}
.sommario__titolo { font-size: 1.06rem; margin-bottom: .6rem; }
.sommario ol, .sommario ul { margin: 0; padding-left: 1.2rem; }
.sommario li { margin-bottom: .3rem; }
.sommario a { color: var(--acc-scuro); }
/* corpo redazionale, misura di lettura fra 62 e 72 caratteri */
.prosa { max-width: var(--misura); }
.prosa > * { max-width: 100%; }
.prosa h2 {
  font-size: clamp(1.44rem, 1.24rem + .9vw, 1.9rem); margin-top: 2.4rem; margin-bottom: .8rem;
  padding-top: 1rem; border-top: 2px solid var(--line);
}
.prosa h3 { font-size: clamp(1.16rem, 1.06rem + .5vw, 1.34rem); margin-top: 1.7rem; margin-bottom: .6rem; color: var(--pri-scuro); }
.prosa p { margin-bottom: 1.1rem; }
.prosa ul, .prosa ol { margin: 0 0 1.2rem; padding-left: 1.3rem; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; }
.prosa ul li::before {
  content: ""; position: absolute; left: 0; top: .58em; width: 9px; height: 9px; border-radius: var(--r-tondo);
  background: var(--pri); box-shadow: 0 0 0 3px var(--pri-velo);
}
.prosa ol li { margin-bottom: .55rem; padding-left: .3rem; }
.prosa ol li::marker { font-family: var(--f-tit); font-weight: 700; color: var(--pri-scuro); }
.prosa blockquote {
  margin: 1.6rem 0; padding: 1.1rem 1.3rem; background: var(--carta);
  border-left: 4px solid var(--acc); border-radius: 0 var(--r-carta) var(--r-carta) 0;
  font-family: var(--f-tit); font-style: italic; font-size: 1.1rem;
}
.prosa blockquote p { margin-bottom: 0; }
.prosa table { margin: 1.6rem 0; font-size: .96rem; border: 1px solid var(--line); border-radius: var(--r-carta); overflow: hidden; }
.prosa caption { caption-side: bottom; font-size: .86rem; color: var(--mut); padding-top: .5rem; text-align: left; }
.prosa th, .prosa td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.prosa thead th { background: var(--pri-velo); color: var(--pri-scuro); font-family: var(--f-testo); font-weight: 700; font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; }
.prosa tbody tr:nth-child(even) { background: var(--carta); }
.prosa tbody tr:last-child td { border-bottom: 0; }
.prosa figure { margin: 1.8rem 0; }
.prosa code {
  font-family: var(--f-mono); font-size: .9em; background: var(--carta-forte);
  border: 1px solid var(--line-forte); border-radius: var(--r-mini); padding: .1em .35em;
}
.prosa a { color: var(--pri-scuro); font-weight: 500; }
/* riquadro riassuntivo con la targhetta agganciata al bordo */
.riquadro {
  position: relative; background: var(--surf); border: 2px solid var(--acc); border-radius: var(--r-carta);
  padding: 1.8rem 1.4rem 1.4rem; margin: 2rem 0; max-width: var(--misura);
}
.riquadro__titolo {
  position: absolute; top: -14px; left: 1.1rem; background: var(--acc); color: #fff;
  padding: .3rem .8rem; border-radius: var(--r-mini);
  font-family: var(--f-testo); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.riquadro p:last-child, .riquadro ul:last-child { margin-bottom: 0; }
.tabella-scorrevole { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.6rem 0; }
.tabella-scorrevole table { margin: 0; min-width: 480px; }

/* ---------------------------------------------------------------------
   19. Riquadro autore e profili
   --------------------------------------------------------------------- */
.autore-box {
  display: grid; gap: 1.2rem; align-items: start; margin-top: 2.4rem;
  background: var(--carta); border: 1px solid var(--line-forte); border-radius: var(--r-carta);
  padding: clamp(1.2rem, 2.6vw, 1.8rem);
}
.autore-box__foto {
  width: 96px; height: 96px; border-radius: var(--r-tondo); object-fit: cover;
  border: 3px solid var(--surf); box-shadow: var(--om-2);
}
.autore-box__nome { font-size: 1.24rem; margin-bottom: .2rem; }
.autore-box__ruolo { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pri-scuro); margin-bottom: .7rem; }
.autore-box__bio { color: var(--mut); margin-bottom: .9rem; }
.social { display: flex; flex-wrap: wrap; gap: .5rem; }
.social__link {
  display: inline-flex; align-items: center; min-height: 40px; padding: .4rem .8rem;
  background: var(--surf); border: 1px solid var(--line-forte); border-radius: var(--r-tondo);
  color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.social__link:hover { border-color: var(--pri); color: var(--pri-scuro); background: var(--pri-velo); }

/* ---------------------------------------------------------------------
   20. Modulo di contatto
   --------------------------------------------------------------------- */
.contatto__interno { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.contatto__promessa p { color: var(--mut); margin-bottom: 1rem; }
.contatto__promessa .riga-menu { max-width: 380px; }
.modulo {
  position: relative; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-carta);
  padding: clamp(1.3rem, 3vw, 2rem); box-shadow: var(--om-2);
}
.modulo::before {
  content: ""; position: absolute; inset-inline: -1px; top: -1px; height: 5px; border-radius: var(--r-carta) var(--r-carta) 0 0;
  background: linear-gradient(90deg, var(--pri) 0 50%, var(--acc) 50% 100%);
}
.campi { display: grid; gap: 1rem; }
.campi--due { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.campo { display: grid; gap: .35rem; }
.campo__etichetta { font-weight: 700; font-size: .94rem; }
.campo__obbligatorio { color: var(--pri); margin-left: .15rem; }
.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-size: 1rem; color: var(--ink); transition: border-color .16s ease, box-shadow .16s ease;
}
.campo textarea { min-height: 140px; 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; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-velo2); background: var(--surf);
}
.campo__aiuto { font-size: .86rem; color: var(--mut); }
.modulo__nota { margin-top: 1rem; font-size: .88rem; color: var(--mut); }
.alternativa {
  margin-top: 1.2rem; padding: .9rem 1rem; background: var(--carta);
  border: 1px dashed var(--line-forte); border-radius: var(--r-mini); font-size: .95rem;
}

/* ---------------------------------------------------------------------
   21. Piede di pagina: cinque colonne su carta chiara
   --------------------------------------------------------------------- */
.piede {
  position: relative; background: var(--surf); border-top: 1px solid var(--line);
  padding-top: clamp(2.6rem, 5vw, 4rem); margin-top: 0;
}
.piede::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 12px;
  background-color: var(--surf); background-image: var(--quadretti); background-size: 12px 12px;
  border-bottom: 1px solid var(--line);
}
.piede__griglia { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); padding-bottom: 2.4rem; }
.piede__col { min-width: 0; }
.piede__marchio { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-tit); font-weight: 700; font-size: 1.14rem; color: var(--ink); text-decoration: none; margin-bottom: .7rem; }
.piede__claim { color: var(--mut); font-size: .95rem; margin-bottom: .7rem; }
.piede__contatto { font-size: .95rem; }
.piede__titolo { font-size: 1.02rem; margin-bottom: .8rem; padding-bottom: .5rem; border-bottom: 2px solid var(--pri-velo2); }
.piede__lista { display: grid; gap: .5rem; }
.piede__lista a { color: var(--mut); text-decoration: none; font-size: .93rem; }
.piede__lista a:hover { color: var(--pri-scuro); text-decoration: underline; }
.piede__cookie {
  margin-top: 1rem; min-height: 44px; padding: .55rem .9rem; background: var(--carta);
  border: 1px solid var(--line-forte); border-radius: var(--r-btn); font-size: .9rem; font-weight: 700; color: var(--ink);
}
.piede__cookie:hover { border-color: var(--pri); color: var(--pri-scuro); background: var(--pri-velo); }
/* colonna ecosistema: cinque targhette da menu, integrate nel design */
.ecosistema { display: grid; gap: .5rem; }
.ecosistema__link {
  display: grid; gap: .1rem; padding: .6rem .75rem; text-decoration: none;
  background: var(--carta); border: 1px solid var(--line); border-left: 3px solid var(--acc);
  border-radius: var(--r-mini); transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.ecosistema__link:hover { background: var(--pri-velo); border-left-color: var(--pri); transform: translateX(2px); }
.ecosistema__nome { font-family: var(--f-tit); font-weight: 700; font-size: .98rem; color: var(--ink); }
.ecosistema__desc { font-size: .85rem; color: var(--mut); }
.piede__barra {
  display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: center; justify-content: space-between;
  padding-block: 1.1rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--mut);
}
.piede__barra p { max-width: none; }
.piede__legale { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.piede__legale a { color: var(--mut); text-decoration: none; }
.piede__legale a:hover { color: var(--pri-scuro); text-decoration: underline; }

/* ---------------------------------------------------------------------
   22. Banner cookie
   --------------------------------------------------------------------- */
.cookie {
  position: fixed; z-index: 120; inset-inline: clamp(.6rem, 3vw, 1.4rem); bottom: clamp(.6rem, 3vw, 1.4rem);
  max-width: 620px; margin-inline: auto;
  background: var(--surf); border: 2px solid var(--ink); border-radius: var(--r-carta);
  padding: 1.2rem 1.3rem; box-shadow: var(--om-3);
}
.cookie::before {
  content: ""; position: absolute; inset-inline: -2px; top: -2px; height: 8px;
  border-radius: var(--r-carta) var(--r-carta) 0 0;
  background-color: var(--surf); background-image: var(--quadretti); background-size: 10px 10px;
}
.cookie__titolo { font-family: var(--f-tit); font-weight: 700; font-size: 1.14rem; margin-bottom: .5rem; }
.cookie__testo { font-size: .93rem; color: var(--mut); margin-bottom: 1rem; max-width: none; }
.cookie__azioni { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.cookie__azioni .btn { flex: 1 1 160px; }
.cookie__personalizza {
  flex: 1 1 160px; min-height: 50px; padding: .7rem 1rem; background: var(--carta);
  border: 1px dashed var(--line-forte); border-radius: var(--r-btn); font-weight: 700; color: var(--ink);
}
.cookie__personalizza:hover { border-color: var(--ink); }
.cookie__dettaglio { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .9rem; }
.cookie__dettaglio table { margin-bottom: .8rem; font-size: .86rem; }
.cookie__dettaglio th, .cookie__dettaglio td { padding: .45rem .5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cookie__dettaglio thead th { background: var(--carta); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.cookie__dettaglio p { color: var(--mut); max-width: none; }

/* ---------------------------------------------------------------------
   23. Pagine di servizio: legali, grazie, mappa del sito
   --------------------------------------------------------------------- */
.pagina-testo { padding-block: clamp(2.2rem, 5vw, 3.6rem) clamp(3rem, 6vw, 4.6rem); }
.pagina-testo h1 { margin-bottom: 1rem; }
.pagina-testo h2 { font-size: clamp(1.3rem, 1.16rem + .7vw, 1.7rem); margin-top: 2.2rem; margin-bottom: .7rem; padding-top: .9rem; border-top: 2px solid var(--line); }
.pagina-testo h3 { margin-top: 1.5rem; margin-bottom: .5rem; color: var(--pri-scuro); }
.pagina-testo p { margin-bottom: 1rem; max-width: var(--misura); }
.pagina-testo ul, .pagina-testo ol { margin: 0 0 1.2rem 1.2rem; }
.pagina-testo li { margin-bottom: .45rem; }
.pagina-testo table { margin: 1.4rem 0; font-size: .95rem; border: 1px solid var(--line); }
.pagina-testo th, .pagina-testo td { padding: .65rem .8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pagina-testo thead th { background: var(--carta); font-size: .88rem; text-transform: uppercase; letter-spacing: .04em; }
.mappa-gruppo {
  background: var(--surf); border: 1px solid var(--line); border-left: 4px solid var(--pri);
  border-radius: var(--r-carta); padding: 1.2rem 1.3rem; margin-bottom: 1.2rem;
}
.mappa-gruppo h2 { margin-top: 0; padding-top: 0; border-top: 0; font-size: 1.24rem; }
.mappa-gruppo ul { list-style: none; margin: 0; padding: 0; }
.mappa-gruppo li { padding-block: .45rem; border-bottom: 1px dotted var(--line-forte); margin: 0; }
.mappa-gruppo li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------
   24. Schermi: da 320 px a 1440 px, nessuno scorrimento orizzontale
   --------------------------------------------------------------------- */
@media (min-width: 560px) {
  .campi--due { grid-template-columns: 1fr 1fr; }
  .autore-box { grid-template-columns: 96px 1fr; }
  .cookie { padding: 1.4rem 1.6rem; }
}
@media (min-width: 760px) {
  .passi { grid-template-columns: repeat(3, 1fr); }
  .piede__griglia { grid-template-columns: repeat(2, 1fr); }
  .menu-tavolo { padding: 1.7rem 1.7rem 1.4rem; }
}
@media (min-width: 980px) {
  html { scroll-padding-top: 104px; }
  .nav { display: flex; }
  .apri-menu { display: none; }
  .menu-mobile { display: none !important; }
  .hero__interno { grid-template-columns: 1.08fr .92fr; }
  .problema__interno { grid-template-columns: 1.15fr .85fr; }
  .contatto__interno { grid-template-columns: .9fr 1.1fr; }
  .piede__griglia { grid-template-columns: 1.4fr 1fr 1.2fr 1fr 1.3fr; }
  .articolo__titolo { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.1rem); }
}
@media (min-width: 1280px) {
  .prova { padding: 2.6rem 1.8rem 1.7rem; }
  .funzione { padding: 1.7rem 1.6rem; }
}
/* schermi molto stretti: si riduce il respiro laterale e la misura dei titoli */
@media (max-width: 380px) {
  .wrap, .wrap-stretto { width: calc(100% - 1.6rem); }
  .btn { width: 100%; }
  .hero__azioni { flex-direction: column; align-items: stretch; }
  .qr { width: 62px; height: 62px; }
}

/* ---------------------------------------------------------------------
   25. Movimento ridotto e 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;
  }
  .funzione:hover, .articolo-card:hover, .btn:hover, .ecosistema__link:hover { transform: none; }
}
@media print {
  .testata, .menu-mobile, .cookie, .piede__cookie, .hero__azioni, .salta-al-contenuto { display: none !important; }
  body { background: #fff; color: #000; }
  .prosa { max-width: none; }
  a { color: #000; text-decoration: underline; }
}

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