@charset "utf-8";
/* =============================================================================
   CassettoDocumenti - foglio di stile unico del sito
   Direzione artistica: mobilio da ufficio in legno chiaro, terracotta e crema,
   cassetti stilizzati, atmosfera artigiana ordinata.
   Motivo grafico ricorrente: fronte di cassetto con maniglia, linguetta di
   cartellina, etichetta d'archivio con foro. Tutte le decorazioni sono
   disegnate in CSS puro, nessuna immagine esterna serve per decorare.
   Coppia tipografica: Bitter per i titoli, Mulish per il testo corrente.
   Indice delle sezioni del file:
     01. Font e variabili
     02. Azzeramento e basi tipografiche
     03. Impaginazione e utilita'
     04. Decorazioni di sezione (cassetti, linguette, etichette)
     05. Comandi (bottoni)
     06. Intestazione, navigazione, menu mobile
     07. Hero e cassettiera
     08. Problema, soluzione, passi
     09. Funzionalita' e vantaggi
     10. Testimonianze
     11. Prezzi
     12. Domande frequenti
     13. Modulo di contatto
     14. Blog, corpo redazionale, autore
     15. Piede di pagina ed ecosistema
     16. Banner cookie
     17. Pagine di servizio
     18. Accessibilita', movimento ridotto, stampa
     19. Punti di rottura responsivi
   ========================================================================== */

/* -----------------------------------------------------------------------------
   01. Variabili: palette del progetto, derivate, ombre, raggi, spaziature
   -------------------------------------------------------------------------- */
:root {
  /* palette di progetto */
  --bg: #FAF6F1;
  --surf: #FFFFFF;
  --ink: #2A211B;
  --mut: #6F625A;
  --pri: #B4552D;
  --acc: #3F6C51;
  --line: #E9DFD5;

  /* derivate della terracotta: stati, veli, bordi */
  --pri-scuro: #8F3F1E; --pri-cupo: #6E2F14; --pri-chiaro: #D97A4F;
  --pri-velo: #FBEDE4; --pri-velo-2: #F6E0D2; --pri-bordo: #E2B79C;

  /* derivate del verde archivio */
  --acc-scuro: #2F5540; --acc-velo: #E8F0EA; --acc-bordo: #B9CFC1;

  /* legni: fronti dei cassetti, piani di lavoro, piede */
  --legno: #C8A183; --legno-chiaro: #E7CDB4; --legno-scuro: #9A7355;
  --legno-notte: #241C17; --legno-notte-2: #33271F;

  /* neutri derivati */
  --ink-tenue: #4A3B32; --mut-chiaro: #8A7C73; --line-forte: #DCCDBE;
  --crema: #F4EDE4; --crema-2: #EFE5D9; --su-scuro: #F1E6DA; --su-scuro-mut: #C6B4A5;

  /* ombre: sempre calde, mai grigie */
  --ombra-1: 0 1px 2px rgba(42, 33, 27, .06);
  --ombra-2: 0 6px 18px rgba(42, 33, 27, .08);
  --ombra-3: 0 18px 40px rgba(42, 33, 27, .12);
  --ombra-cassetto: 0 2px 0 var(--line-forte), 0 10px 22px rgba(42, 33, 27, .10);
  --ombra-terra: 0 8px 20px rgba(180, 85, 45, .22);
  --ombra-interna: inset 0 1px 0 rgba(255, 255, 255, .9);

  /* raggi: mobilio squadrato con angoli appena addolciti */
  --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-4: 20px;
  --r-pillola: 999px; --r-linguetta: 10px 10px 0 0;

  /* ritmo verticale */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6rem;

  /* famiglie tipografiche con ripiego reale */
  --f-titoli: "Bitter", Georgia, "Times New Roman", "Liberation Serif", serif;
  --f-testo: "Mulish", "Segoe UI", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;

  /* scala tipografica fluida, rapporto armonico vicino alla quarta giusta */
  --t-piccolo: clamp(.82rem, .79rem + .12vw, .9rem);
  --t-base: clamp(1rem, .96rem + .2vw, 1.09rem); --t-medio: clamp(1.09rem, 1.03rem + .3vw, 1.25rem);
  --t-grande: clamp(1.25rem, 1.14rem + .5vw, 1.5rem);
  --t-h3: clamp(1.22rem, 1.12rem + .5vw, 1.5rem);
  --t-h2: clamp(1.55rem, 1.32rem + 1.1vw, 2.3rem);
  --t-h1: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);

  /* larghezze */
  --w-contenitore: 74rem; --w-stretto: 46rem;
  --misura-lettura: 68ch; /* fra 62 e 72 caratteri per riga */

  /* colori di sistema del browser: identita' chiara, nessun tema scuro */
  color-scheme: light;
}

/* -----------------------------------------------------------------------------
   02. Azzeramento moderno e basi tipografiche
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

/* lo scorrimento si ferma sotto l'intestazione appiccicata */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }

body {
  min-height: 100vh;
  font-family: var(--f-testo);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg);
  /* venatura del legno chiaro: due trame sovrapposte, quasi impercettibili */
  background-image:
    repeating-linear-gradient(0deg, rgba(154, 115, 85, .045) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(90deg, rgba(154, 115, 85, .025) 0 1px, transparent 1px 4px),
    radial-gradient(60rem 30rem at 50% -12rem, rgba(180, 85, 45, .08), transparent 70%);
  background-attachment: scroll;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--f-titoli); font-weight: 700; line-height: 1.16; letter-spacing: -.012em; color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; }
h4 { font-size: var(--t-grande); font-weight: 600; }

p { text-wrap: pretty; }

a { color: var(--pri-scuro); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--pri-cupo); }

strong { font-weight: 700; }

::selection { background: var(--pri-velo-2); color: var(--ink); }

/* -----------------------------------------------------------------------------
   03. Impaginazione e classi di utilita'
   -------------------------------------------------------------------------- */
.contenitore { width: 100%; max-width: var(--w-contenitore); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }

.contenitore-stretto {
  width: 100%; max-width: var(--w-stretto); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.sezione { position: relative; padding-block: clamp(3rem, 7vw, 5.5rem); }

/* fondo crema tiepido, come il piano di un mobile impiallacciato */
.sezione--crema {
  background: linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%); border-block: 1px solid var(--line);
}

/* fondo bianco pieno per le sezioni che devono respirare */
.sezione--chiara { background: var(--surf); border-block: 1px solid var(--line); }

/* velo terracotta appena accennato */
.sezione--velo {
  background: radial-gradient(40rem 22rem at 15% 0%, var(--pri-velo) 0%, transparent 65%), linear-gradient(180deg, var(--bg) 0%, var(--crema) 100%);
}

/* sezione scura in legno di noce, per i blocchi di forte contrasto */
.sezione--scura {
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 10px), linear-gradient(180deg, var(--legno-notte-2) 0%, var(--legno-notte) 100%);
  color: var(--su-scuro);
}
.sezione--scura h2,
.sezione--scura h3 { color: #FFF7EE; }
.sezione--scura p { color: var(--su-scuro-mut); }

.griglia-2,
.griglia-3,
.griglia-4 { display: grid; gap: clamp(1rem, 2.4vw, 1.75rem); }

.pila > * + * { margin-top: var(--s-4); }
.centrato { text-align: center; }
.misura { max-width: 42rem; }
.testo-tenue { color: var(--mut); }
.testo-piccolo { font-size: var(--t-piccolo); }

/* visibile ai soli lettori di schermo */
.nascosto-vista {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* -----------------------------------------------------------------------------
   04. Decorazioni firma del sito: linguette, etichette, fronti di cassetto
   -------------------------------------------------------------------------- */

/* etichetta d'archivio con il foro della cordicella: sopratitolo di sezione */
.occhiello {
  display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .85rem .4rem .7rem;
  font-family: var(--f-testo); font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--pri-scuro); background: var(--pri-velo); border: 1px dashed var(--pri-bordo);
  border-radius: var(--r-1);
}
.occhiello::before {
  content: ""; width: .48rem; height: .48rem; border-radius: 50%; background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--pri-bordo); flex: none;
}
.occhiello--verde { color: var(--acc-scuro); background: var(--acc-velo); border-color: var(--acc-bordo); }
.occhiello--verde::before { box-shadow: inset 0 0 0 1px var(--acc-bordo); }

/* testata di sezione: etichetta, titolo, paragrafo di apertura */
.testata-sezione { max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.testata-sezione .occhiello { margin-bottom: var(--s-4); }
.testata-sezione h2 { margin-bottom: var(--s-4); }
.testata-sezione p { color: var(--mut); font-size: var(--t-medio); }
.testata-sezione--centrata { margin-inline: auto; text-align: center; }

/* linguetta di cartellina applicata sopra un blocco */
.linguetta {
  display: inline-block; padding: .3rem 1.1rem .25rem; font-family: var(--f-titoli); font-size: .82rem;
  font-weight: 600; letter-spacing: .04em; color: var(--ink); background: var(--legno-chiaro);
  border: 1px solid var(--legno); border-bottom: 0; border-radius: var(--r-linguetta); transform: translateY(1px);
}

/* superficie base: pannello senza imbottitura */
.pannello {
  position: relative; background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-2);
  box-shadow: var(--ombra-1);
}

/* scheda: pannello con imbottitura interna */
.scheda {
  position: relative; padding: clamp(1.25rem, 2.4vw, 1.9rem); background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-2); box-shadow: var(--ombra-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.scheda:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); border-color: var(--line-forte); }

/* la scheda cassetto: fronte in legno chiaro con maniglia centrale, forma firma */
.scheda--cassetto {
  padding-top: 2.9rem; background: linear-gradient(180deg, #FFFFFF 0%, #FDF8F2 58%, #F7EDE2 100%);
  border-color: var(--line-forte); box-shadow: var(--ombra-interna), var(--ombra-cassetto);
}
.scheda--cassetto::before {
  content: ""; position: absolute; top: 1.15rem; left: 50%; width: 4.6rem; height: .58rem;
  transform: translateX(-50%); border-radius: var(--r-pillola);
  background: linear-gradient(180deg, var(--legno-chiaro) 0%, var(--legno) 60%, var(--legno-scuro) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.scheda--cassetto:hover { transform: translateY(-3px); }

/* variante su velo terracotta, senza rilievo */
.scheda--velo { background: var(--pri-velo); border-color: var(--pri-bordo); box-shadow: none; }
.scheda--velo:hover { transform: none; box-shadow: none; }

/* variante verde archivio */
.scheda--verde { background: var(--acc-velo); border-color: var(--acc-bordo); box-shadow: none; }

/* segno quadrato con iniziale o cifra, come una targhetta avvitata sul cassetto */
.segno {
  display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; font-family: var(--f-titoli);
  font-size: 1.15rem; font-weight: 700; color: var(--surf);
  background: linear-gradient(160deg, var(--pri-chiaro) 0%, var(--pri) 55%, var(--pri-scuro) 100%);
  border-radius: var(--r-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), var(--ombra-1);
}
.segno--verde { background: linear-gradient(160deg, #5C8B70 0%, var(--acc) 55%, var(--acc-scuro) 100%); }
.segno--legno { color: var(--ink); background: linear-gradient(160deg, var(--legno-chiaro), var(--legno)); }

/* cifra grande in Bitter, cifre tabulari perche' il sito parla di conteggi */
.cifra {
  font-family: var(--f-titoli); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pri);
  line-height: 1;
}

/* cornice fotografica con la linguetta di cartellina in alto a sinistra */
.figura-cornice {
  position: relative; margin: 0; padding: .6rem; background: var(--surf); border: 1px solid var(--line-forte);
  border-radius: var(--r-3); box-shadow: var(--ombra-3);
}
.figura-cornice::before {
  content: ""; position: absolute; top: -.85rem; left: 1.6rem; width: 6.5rem; height: 1rem;
  background: var(--legno-chiaro); border: 1px solid var(--legno); border-bottom: 0;
  border-radius: var(--r-linguetta);
}
.figura-cornice img { border-radius: var(--r-2); width: 100%; }

.credito-foto { margin-top: .6rem; font-size: var(--t-piccolo); color: var(--mut); }
.credito-foto a { color: var(--mut); }

/* -----------------------------------------------------------------------------
   05. Comandi: bottoni con il rilievo della maniglia
   -------------------------------------------------------------------------- */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem;
  padding: .8rem 1.5rem; font-family: var(--f-testo); font-size: 1rem; font-weight: 700; line-height: 1.2;
  text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: var(--r-2);
  transition: transform .16s ease, box-shadow .16s ease, background-color .2s ease, color .2s ease;
}

.bottone--primario {
  color: #FFF8F3; background: linear-gradient(180deg, var(--pri-chiaro) 0%, var(--pri) 45%, var(--pri-scuro) 100%);
  border-color: var(--pri-cupo); box-shadow: 0 3px 0 var(--pri-cupo), var(--ombra-terra);
}
.bottone--primario:hover { color: #FFF8F3; transform: translateY(1px); box-shadow: 0 2px 0 var(--pri-cupo), var(--ombra-2); }
.bottone--primario:active { transform: translateY(3px); box-shadow: 0 0 0 var(--pri-cupo); }

.bottone--secondario {
  color: var(--ink); background: var(--surf); border-color: var(--legno); box-shadow: 0 3px 0 var(--line-forte);
}
.bottone--secondario:hover { color: var(--ink); background: var(--crema); transform: translateY(1px); box-shadow: 0 2px 0 var(--line-forte); }
.bottone--secondario:active { transform: translateY(3px); box-shadow: none; }

.bottone--verde {
  color: #F4FAF6; background: linear-gradient(180deg, #55876B 0%, var(--acc) 50%, var(--acc-scuro) 100%);
  border-color: var(--acc-scuro); box-shadow: 0 3px 0 var(--acc-scuro);
}
.bottone--verde:hover { color: #F4FAF6; transform: translateY(1px); box-shadow: 0 2px 0 var(--acc-scuro); }

.bottone--fantasma { color: var(--pri-scuro); background: transparent; border-color: var(--pri-bordo); }
.bottone--fantasma:hover { background: var(--pri-velo); color: var(--pri-cupo); }

.bottone--largo { width: 100%; }
.bottone--piccolo { min-height: 2.5rem; padding: .5rem 1rem; font-size: .92rem; }

/* comando testuale, usato per le preferenze cookie e i richiami discreti */
.bottone-testo {
  padding: .35rem 0; font-size: .95rem; font-weight: 600; color: inherit; text-align: left;
  text-decoration: underline; text-underline-offset: .2em; background: none; border: 0;
}
.bottone-testo:hover { color: var(--pri); }

/* -----------------------------------------------------------------------------
   06. Intestazione, navigazione, menu mobile
   -------------------------------------------------------------------------- */
.salta-al-contenuto {
  position: absolute; top: -100px; left: 1rem; z-index: 200; padding: .75rem 1.1rem; font-weight: 700;
  color: var(--surf); background: var(--pri-scuro); border-radius: 0 0 var(--r-2) var(--r-2);
  transition: top .18s ease;
}
.salta-al-contenuto:focus { top: 0; color: var(--surf); }

.intestazione {
  position: sticky; top: 0; z-index: 90; background: rgba(250, 246, 241, .92);
  backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
/* filo di legno sotto la barra: richiama il bordo di un mobile */
.intestazione::after {
  content: ""; position: absolute; inset: auto 0 -3px; height: 3px;
  background: linear-gradient(90deg, var(--pri) 0%, var(--legno) 45%, var(--acc) 100%); opacity: .5;
}

.intestazione__barra {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 4.5rem;
}

.intestazione__azioni { display: flex; align-items: center; gap: var(--s-3); }

.marchio { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }

/* piccolo fronte di cassetto con maniglia: logotipo disegnato in CSS */
.marchio__segno {
  position: relative; display: grid; place-items: center; width: 2.35rem; height: 2rem; font-family: var(--f-titoli);
  font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: #FFF6EF;
  background: linear-gradient(180deg, var(--pri-chiaro) 0%, var(--pri) 55%, var(--pri-scuro) 100%);
  border-radius: var(--r-1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}
.marchio__segno::after {
  content: ""; position: absolute; bottom: .28rem; left: 50%; width: 1.1rem; height: .18rem;
  transform: translateX(-50%); border-radius: var(--r-pillola); background: rgba(255, 246, 239, .85);
}

.marchio__nome {
  font-family: var(--f-titoli); font-size: 1.16rem; font-weight: 700; letter-spacing: -.015em; color: var(--ink);
}
.marchio__nome em { font-style: normal; color: var(--pri); }

.nav-principale { display: none; }
.nav-principale__lista { display: flex; align-items: center; gap: .15rem; list-style: none; padding: 0; }
.nav-principale__link {
  display: inline-block; padding: .5rem .7rem; font-size: .95rem; font-weight: 600; color: var(--ink-tenue);
  text-decoration: none; border-radius: var(--r-1); transition: background-color .2s ease, color .2s ease;
}
.nav-principale__link:hover { color: var(--pri-scuro); background: var(--pri-velo); }
.nav-principale__link.attivo, .nav-principale__link[aria-current="page"] {
  color: var(--pri-cupo); background: var(--pri-velo); box-shadow: inset 0 -2px 0 var(--pri);
}

/* pulsante a tre tratti: diventa una croce quando il pannello e' aperto */
.apri-menu {
  display: inline-grid; place-content: center; gap: 5px; width: 2.9rem; height: 2.9rem; background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--r-1); box-shadow: var(--ombra-1);
}
.apri-menu span {
  display: block; width: 1.15rem; height: 2px; background: var(--ink); border-radius: var(--r-pillola);
  transition: transform .22s ease, opacity .18s ease;
}
.apri-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.apri-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.apri-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* pannello mobile: entra da destra come un cassetto che si apre */
.menu-mobile {
  position: fixed; top: 0; right: 0; z-index: 120; display: flex; flex-direction: column; gap: var(--s-5);
  width: min(22rem, 88vw); height: 100dvh; padding: 1.25rem; overflow-y: auto; background: var(--bg);
  border-left: 4px solid var(--pri); box-shadow: var(--ombra-3); transform: translateX(103%);
  transition: transform .28s ease; visibility: hidden;
}
.menu-mobile.aperto { transform: translateX(0); visibility: visible; }
.menu-mobile__testata { display: flex; align-items: center; justify-content: space-between; }
.menu-mobile__chiudi {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; font-size: 1.5rem; line-height: 1;
  color: var(--ink); background: var(--surf); border: 1px solid var(--line-forte); border-radius: var(--r-1);
}
.menu-mobile__lista { list-style: none; padding: 0; }
.menu-mobile__link {
  display: block; padding: .8rem .9rem; font-weight: 600; color: var(--ink); text-decoration: none;
  border-bottom: 1px dashed var(--line-forte); transition: padding-left .18s ease, color .18s ease;
}
.menu-mobile__link:hover,
.menu-mobile__link:focus-visible { padding-left: 1.35rem; color: var(--pri-scuro); }

/* velo dietro il pannello, creato dallo script */
.velo {
  position: fixed; inset: 0; z-index: 110; background: rgba(36, 28, 23, .5); opacity: 0;
  transition: opacity .25s ease;
}
.velo.visibile { opacity: 1; }

.blocco-scroll { overflow: hidden; }

/* -----------------------------------------------------------------------------
   07. Hero e cassettiera: il blocco visivo firma del sito
   -------------------------------------------------------------------------- */
.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5.5rem); overflow: hidden; }
/* fondo dell'hero: piano in legno chiaro con una lieve luce da sinistra */
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(48rem 26rem at 12% 0%, rgba(180, 85, 45, .12), transparent 62%), radial-gradient(36rem 22rem at 95% 22%, rgba(63, 108, 81, .10), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero__griglia { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }

.hero__titolo { margin-block: var(--s-4) var(--s-5); }
.hero__titolo em { font-style: normal; color: var(--pri); }

.hero__sottotitolo { max-width: 34rem; font-size: var(--t-medio); color: var(--ink-tenue); }
.hero__sottotitolo + .hero__sottotitolo { margin-top: var(--s-3); }

.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

.hero__punti { display: grid; gap: .6rem; margin-top: var(--s-6); padding: 0; list-style: none; }
.hero__punti li { position: relative; padding-left: 1.9rem; font-weight: 600; color: var(--ink-tenue); }
/* ogni punto porta davanti una maniglia in miniatura */
.hero__punti li::before {
  content: ""; position: absolute; top: .68em; left: 0; width: 1.15rem; height: .38rem;
  border-radius: var(--r-pillola); background: linear-gradient(180deg, var(--legno-chiaro), var(--legno-scuro));
}

.hero__figura { position: relative; }

/* la cassettiera: tre fronti sovrapposti con etichetta, stato e maniglia */
.cassettiera {
  position: relative; padding: 1.1rem 1.1rem 1.3rem; background: linear-gradient(180deg, #FFFDFA 0%, #F6EBDF 100%);
  border: 1px solid var(--legno); border-radius: var(--r-3); box-shadow: var(--ombra-3);
}
.cassettiera::before {
  content: ""; position: absolute; top: -.9rem; left: 1.8rem; width: 7.5rem; height: 1.1rem;
  background: var(--legno-chiaro); border: 1px solid var(--legno); border-bottom: 0;
  border-radius: var(--r-linguetta);
}
.cassettiera__testata {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding-bottom: .8rem;
  margin-bottom: .9rem; border-bottom: 1px solid var(--line-forte);
}
.cassettiera__titolo { font-family: var(--f-titoli); font-size: 1.05rem; font-weight: 700; }
.cassettiera__periodo {
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut);
}

.cassetto {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem 1rem;
  padding: .95rem 1rem 1.05rem; background: linear-gradient(180deg, #FFFFFF 0%, #FBF4EC 100%);
  border: 1px solid var(--line-forte); border-radius: var(--r-2);
  box-shadow: var(--ombra-interna), 0 2px 0 var(--line-forte);
}
.cassetto + .cassetto { margin-top: .7rem; }
/* maniglia sul fianco destro del fronte */
.cassetto::after {
  content: ""; position: absolute; right: .9rem; bottom: .55rem; width: 2.2rem; height: .3rem;
  border-radius: var(--r-pillola); background: linear-gradient(180deg, var(--legno-chiaro), var(--legno));
}
.cassetto__voce { font-weight: 700; color: var(--ink); }
.cassetto__nota { grid-column: 1 / -1; font-size: var(--t-piccolo); color: var(--mut); }

/* stato della voce: consegnata, parziale, mancante */
.cassetto__stato {
  display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .6rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; border-radius: var(--r-1); white-space: nowrap;
}
.cassetto__stato::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.cassetto--completo .cassetto__stato { color: var(--acc-scuro); background: var(--acc-velo); }
.cassetto--attesa .cassetto__stato { color: var(--pri-scuro); background: var(--pri-velo); }
.cassetto--mancante .cassetto__stato { color: var(--ink-tenue); background: var(--crema-2); }

.cassettiera__nota {
  margin-top: 1rem; padding-top: .8rem; font-size: var(--t-piccolo); color: var(--mut);
  border-top: 1px dashed var(--line-forte);
}

/* -----------------------------------------------------------------------------
   08. Problema, soluzione, passi
   -------------------------------------------------------------------------- */
.problema__griglia { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.problema__racconto > p + p { margin-top: var(--s-4); }
.problema__racconto > p:first-of-type { font-size: var(--t-medio); color: var(--ink-tenue); }

/* riquadro dei sintomi: una busta di documenti in disordine */
.disordine {
  position: relative; padding: 1.6rem 1.5rem; background: var(--pri-velo); border: 1px solid var(--pri-bordo);
  border-radius: var(--r-3); box-shadow: var(--ombra-1);
}
.disordine::before {
  content: ""; position: absolute; top: -.7rem; right: 1.5rem; width: 5.5rem; height: .9rem;
  background: var(--pri-velo-2); border: 1px solid var(--pri-bordo); border-bottom: 0;
  border-radius: var(--r-linguetta);
}
.disordine__titolo { font-size: var(--t-grande); margin-bottom: var(--s-4); }
.disordine__lista { display: grid; gap: .75rem; padding: 0; list-style: none; }
.disordine__lista li { position: relative; padding-left: 1.4rem; color: var(--ink-tenue); }
.disordine__lista li::before {
  content: ""; position: absolute; top: .62em; left: 0; width: .7rem; height: 2px; background: var(--pri);
  border-radius: var(--r-pillola);
}

.soluzione__testo { max-width: var(--misura-lettura); }
.soluzione__testo > p + p { margin-top: var(--s-4); }

/* i tre passi: schede a fronte di cassetto con la targhetta numerata */
.passi { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.passo {
  position: relative; padding: 2.6rem 1.5rem 1.6rem;
  background: linear-gradient(180deg, var(--surf) 0%, #FCF6EF 100%); border: 1px solid var(--line-forte);
  border-radius: var(--r-2); box-shadow: var(--ombra-interna), var(--ombra-cassetto);
}
.passo::before {
  content: ""; position: absolute; top: 1.1rem; right: 1.2rem; width: 3rem; height: .4rem;
  border-radius: var(--r-pillola); background: linear-gradient(180deg, var(--legno-chiaro), var(--legno));
}
.passo__numero {
  position: absolute; top: 1.1rem; left: 1.4rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  font-family: var(--f-titoli); font-size: 1.1rem; font-weight: 700; color: #FFF6EF;
  background: linear-gradient(160deg, var(--pri-chiaro), var(--pri-scuro)); border-radius: var(--r-1);
  box-shadow: var(--ombra-1);
}
.passo__titolo { margin-top: 1.4rem; margin-bottom: var(--s-3); font-size: var(--t-grande); }
.passo__testo { color: var(--ink-tenue); }

/* -----------------------------------------------------------------------------
   09. Funzionalita' e vantaggi
   -------------------------------------------------------------------------- */
.griglia-funzioni { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }

.scheda-funzione {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: 1.5rem 1.4rem 1.5rem;
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--ombra-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
/* filetto in legno sul bordo sinistro, come la guida di scorrimento del cassetto */
.scheda-funzione::before {
  content: ""; position: absolute; top: 1.4rem; bottom: 1.4rem; left: -1px; width: 4px;
  border-radius: var(--r-pillola); background: linear-gradient(180deg, var(--pri) 0%, var(--legno) 100%);
}
.scheda-funzione:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); border-color: var(--line-forte); }
.scheda-funzione__titolo { font-size: var(--t-grande); }
.scheda-funzione__testo { color: var(--mut); }
.scheda-funzione__testo + .scheda-funzione__testo { margin-top: .4rem; }

.griglia-vantaggi { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.vantaggio {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.1rem; padding: 1.4rem 1.3rem; background: var(--surf);
  border: 1px solid var(--line); border-left: 4px solid var(--acc);
  border-radius: var(--r-1) var(--r-2) var(--r-2) var(--r-1); box-shadow: var(--ombra-1);
}
.vantaggio__titolo { grid-column: 2; font-size: var(--t-grande); }
.vantaggio__testo { grid-column: 2; color: var(--mut); }

/* -----------------------------------------------------------------------------
   10. Testimonianze
   -------------------------------------------------------------------------- */
.testimonianze { display: grid; gap: clamp(1.25rem, 3vw, 1.9rem); }

.testimonianza {
  position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: 2.4rem 1.5rem 1.5rem;
  margin: 0; background: var(--surf); border: 1px solid var(--line-forte); border-radius: var(--r-2);
  box-shadow: var(--ombra-2);
}
/* linguetta di cartellina in alto a sinistra: la scheda cliente */
.testimonianza::before {
  content: ""; position: absolute; top: -1px; left: 1.4rem; width: 4.6rem; height: .55rem;
  background: linear-gradient(90deg, var(--pri), var(--legno)); border-radius: 0 0 var(--r-1) var(--r-1);
}
.testimonianza__testo {
  font-family: var(--f-titoli); font-size: var(--t-medio); font-style: italic; line-height: 1.55; color: var(--ink);
}
.testimonianza__firma { padding-top: var(--s-4); margin-top: auto; border-top: 1px dashed var(--line-forte); }
.testimonianza__nome { font-weight: 700; }
.testimonianza__ruolo { font-size: var(--t-piccolo); color: var(--mut); }

/* nota che dichiara la natura degli scenari d'uso */
.nota-scenari {
  display: inline-block; margin-top: var(--s-5); padding: .55rem 1rem; font-size: var(--t-piccolo);
  color: var(--ink-tenue); background: var(--crema); border: 1px dashed var(--legno); border-radius: var(--r-1);
}

/* -----------------------------------------------------------------------------
   11. Prezzi: tre cassetti affiancati, quello centrale aperto
   -------------------------------------------------------------------------- */
.piani { display: grid; gap: clamp(1.25rem, 3vw, 1.9rem); align-items: start; }

.piano {
  position: relative; display: flex; flex-direction: column; padding: 2.6rem 1.5rem 1.7rem;
  background: linear-gradient(180deg, var(--surf) 0%, #FCF7F1 100%); border: 1px solid var(--line-forte);
  border-radius: var(--r-2); box-shadow: var(--ombra-interna), var(--ombra-cassetto);
}
.piano::before {
  content: ""; position: absolute; top: 1.15rem; left: 50%; width: 4rem; height: .5rem; transform: translateX(-50%);
  border-radius: var(--r-pillola); background: linear-gradient(180deg, var(--legno-chiaro), var(--legno));
}
.piano--evidenza { border-color: var(--pri); box-shadow: var(--ombra-interna), 0 3px 0 var(--pri-scuro), var(--ombra-3); }
.piano--evidenza::before { background: linear-gradient(180deg, var(--pri-chiaro), var(--pri-scuro)); }

.piano__etichetta {
  position: absolute; top: -.85rem; right: 1.1rem; padding: .25rem .8rem; font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #FFF6EF; background: var(--pri); border-radius: var(--r-1);
  box-shadow: var(--ombra-1);
}
.piano__nome { margin-bottom: var(--s-2); font-size: var(--t-grande); }
.piano__prezzo {
  display: flex; align-items: baseline; gap: .45rem; margin-bottom: var(--s-3); font-family: var(--f-titoli);
  font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3rem); font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--pri); line-height: 1;
}
.piano__periodo { font-family: var(--f-testo); font-size: .92rem; font-weight: 600; color: var(--mut); }
.piano__descrizione { margin-bottom: var(--s-4); color: var(--mut); }
.piano__elenco { display: grid; gap: .65rem; padding: 1.1rem 0 1.4rem; margin: 0; list-style: none; border-top: 1px dashed var(--line-forte); }
.piano__elenco li { position: relative; padding-left: 1.65rem; }
/* segno di spunta verde archivio disegnato con due filetti */
.piano__elenco li::before {
  content: ""; position: absolute; top: .42em; left: .25rem; width: .45rem; height: .8rem; border: solid var(--acc);
  border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.piano .bottone { margin-top: auto; }
.nota-prezzi { max-width: 52rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); color: var(--mut); font-size: var(--t-piccolo); }

/* -----------------------------------------------------------------------------
   12. Domande frequenti: fisarmonica a schedario
   -------------------------------------------------------------------------- */
.faq { max-width: 52rem; margin-inline: auto; display: grid; gap: .75rem; }

.faq__voce {
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: var(--ombra-1);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq__voce.aperta { border-color: var(--pri-bordo); box-shadow: var(--ombra-2); }

.faq__domanda {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 1.05rem 1.15rem; font-family: var(--f-titoli); font-size: var(--t-medio); font-weight: 600;
  line-height: 1.35; text-align: left; color: var(--ink); background: none; border: 0; border-radius: var(--r-2);
}
.faq__domanda:hover { color: var(--pri-scuro); }

/* la maniglia ruota di un quarto quando il cassetto della risposta si apre */
.faq__icona {
  position: relative; flex: none; width: 1.9rem; height: 1.9rem; background: var(--crema);
  border: 1px solid var(--line-forte); border-radius: var(--r-1);
  transition: background-color .2s ease, border-color .2s ease;
}
.faq__icona::before, .faq__icona::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: .8rem; height: 2px; background: var(--pri);
  border-radius: var(--r-pillola); transform: translate(-50%, -50%);
  transition: transform .22s ease, opacity .22s ease;
}
.faq__icona::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__domanda[aria-expanded="true"] .faq__icona { background: var(--pri-velo); border-color: var(--pri-bordo); }
.faq__domanda[aria-expanded="true"] .faq__icona::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.faq__risposta { padding: 0 1.15rem 1.2rem; color: var(--ink-tenue); }
.faq__risposta > p + p { margin-top: var(--s-3); }

/* -----------------------------------------------------------------------------
   13. Modulo di contatto
   -------------------------------------------------------------------------- */
.contatto__griglia { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }

.modulo {
  position: relative; padding: clamp(1.4rem, 3vw, 2.1rem); background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--r-3); box-shadow: var(--ombra-3);
}
.modulo::before {
  content: ""; position: absolute; top: -.8rem; left: 2rem; width: 6.5rem; height: 1rem;
  background: var(--legno-chiaro); border: 1px solid var(--legno); border-bottom: 0;
  border-radius: var(--r-linguetta);
}
.modulo__intro { margin-bottom: var(--s-5); color: var(--mut); }

.campo { display: grid; gap: .35rem; margin-bottom: var(--s-4); }
.campo label,
.campo__etichetta { font-size: .92rem; font-weight: 700; color: var(--ink-tenue); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 3rem; padding: .7rem .9rem; font-size: 1rem; color: var(--ink); background: #FEFCFA;
  border: 1px solid var(--line-forte); border-radius: var(--r-1); box-shadow: inset 0 1px 2px rgba(42, 33, 27, .05);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.campo textarea { min-height: 8.5rem; resize: vertical; line-height: 1.6; }
.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--legno); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: 0; border-color: var(--pri); box-shadow: 0 0 0 3px var(--pri-velo-2); }
.campo__aiuto { font-size: var(--t-piccolo); color: var(--mut); }

.campo-doppio { display: grid; gap: 0 var(--s-4); }

/* menu a tendina con la freccia disegnata in CSS */
.campo--scelta { position: relative; }
.campo--scelta select { appearance: none; padding-right: 2.6rem; }
.campo--scelta::after {
  content: ""; position: absolute; right: 1.1rem; bottom: 1.35rem; width: .55rem; height: .55rem;
  border: solid var(--mut); border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none;
}

.modulo__nota { margin-top: var(--s-4); font-size: var(--t-piccolo); color: var(--mut); }
.modulo__alternativa {
  margin-top: var(--s-5); padding-top: var(--s-4); font-size: .95rem; color: var(--ink-tenue);
  border-top: 1px dashed var(--line-forte);
}

/* campo trappola per i robot */
.hp { position: absolute; left: -9999px; }

/* -----------------------------------------------------------------------------
   14. Blog, corpo redazionale, riquadro autore
   -------------------------------------------------------------------------- */
.griglia-articoli { display: grid; gap: clamp(1.25rem, 3vw, 1.9rem); }

.scheda-articolo {
  display: flex; flex-direction: column; overflow: hidden; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--r-2); box-shadow: var(--ombra-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.scheda-articolo:hover { transform: translateY(-4px); box-shadow: var(--ombra-2); border-color: var(--line-forte); }

.scheda-articolo__figura { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--crema); }
.scheda-articolo__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.scheda-articolo:hover .scheda-articolo__figura img { transform: scale(1.04); }
/* filo in legno sotto l'immagine: bordo del ripiano */
.scheda-articolo__figura::after {
  content: ""; position: absolute; inset: auto 0 0; height: 4px;
  background: linear-gradient(90deg, var(--pri), var(--legno) 60%, var(--acc));
}

.scheda-articolo__corpo { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.2rem 1.4rem; }
.scheda-articolo__data {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-scuro);
}
.scheda-articolo__titolo { font-size: var(--t-grande); line-height: 1.28; }
.scheda-articolo__titolo a { color: var(--ink); text-decoration: none; }
.scheda-articolo__titolo a:hover { color: var(--pri-scuro); text-decoration: underline; }
.scheda-articolo__testo { color: var(--mut); font-size: .98rem; }
.scheda-articolo__link { margin-top: auto; font-weight: 700; color: var(--pri-scuro); text-decoration: none; }
.scheda-articolo__link::after { content: " \2192"; }
.scheda-articolo__link:hover { text-decoration: underline; }

.briciole { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin-bottom: var(--s-4); font-size: var(--t-piccolo); list-style: none; color: var(--mut); }
.briciole li + li::before { content: "/ "; color: var(--legno); }
.briciole a { color: var(--mut); }

.meta-articolo {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: var(--s-5); font-size: var(--t-piccolo);
  color: var(--mut);
}

.figura-evidenza { margin: 0 0 var(--s-6); }
.figura-evidenza img { width: 100%; border: 1px solid var(--line-forte); border-radius: var(--r-3); box-shadow: var(--ombra-2); }

/* corpo redazionale: misura di lettura fra 62 e 72 caratteri */
.prosa { max-width: var(--misura-lettura); font-size: clamp(1.02rem, .98rem + .22vw, 1.14rem); line-height: 1.78; }
.prosa > * + * { margin-top: var(--s-5); }
.prosa h2 {
  position: relative; margin-top: clamp(2.2rem, 4vw, 3rem); padding-top: 1.1rem;
  font-size: clamp(1.45rem, 1.25rem + .9vw, 1.95rem);
}
/* linguetta di cartellina sopra ogni H2 dell'articolo */
.prosa h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3.2rem; height: .42rem; border-radius: var(--r-pillola);
  background: linear-gradient(90deg, var(--pri), var(--legno));
}
.prosa h3 { margin-top: clamp(1.6rem, 3vw, 2.2rem); font-size: var(--t-h3); color: var(--ink-tenue); }
.prosa p { color: var(--ink-tenue); }
.prosa ul,
.prosa ol { padding-left: 1.3rem; display: grid; gap: .55rem; color: var(--ink-tenue); }
.prosa ul { list-style: none; padding-left: 1.6rem; }
.prosa ul li { position: relative; }
.prosa ul li::before {
  content: ""; position: absolute; top: .68em; left: -1.25rem; width: .75rem; height: .28rem;
  border-radius: var(--r-pillola); background: var(--legno);
}
.prosa ol li::marker { color: var(--pri); font-weight: 700; }
.prosa a { font-weight: 600; }
.prosa blockquote {
  padding: 1.1rem 1.3rem; background: var(--acc-velo); border-left: 4px solid var(--acc);
  border-radius: 0 var(--r-2) var(--r-2) 0; font-family: var(--f-titoli); font-style: italic; color: var(--ink);
}
.prosa figure { margin: 0; }
.prosa figure img { border: 1px solid var(--line-forte); border-radius: var(--r-2); }
.prosa figcaption { margin-top: .5rem; font-size: var(--t-piccolo); color: var(--mut); }
.prosa code {
  padding: .12rem .38rem; font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .9em; color: var(--pri-cupo); background: var(--pri-velo); border: 1px solid var(--pri-bordo);
  border-radius: var(--r-1);
}
.prosa pre {
  padding: 1rem 1.1rem; overflow-x: auto; color: var(--su-scuro); background: var(--legno-notte);
  border-radius: var(--r-2);
}
.prosa pre code { color: inherit; background: none; border: 0; }

/* tabelle: registro di consegna a righe alternate */
.prosa table, .tabella {
  width: 100%; border-collapse: collapse; font-size: .96rem; background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--r-2); overflow: hidden;
}
.prosa th, .tabella th {
  padding: .7rem .8rem; text-align: left; font-family: var(--f-titoli); font-size: .92rem; color: var(--ink);
  background: var(--crema-2); border-bottom: 2px solid var(--legno);
}
.prosa td,
.tabella td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-tenue); }
.prosa tbody tr:nth-child(even),
.tabella tbody tr:nth-child(even) { background: #FDFAF6; }
.prosa caption,
.tabella caption { caption-side: bottom; padding-top: .5rem; font-size: var(--t-piccolo); color: var(--mut); text-align: left; }
.tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* occhiello introduttivo dell'articolo */
.chapo {
  padding-left: 1.1rem; border-left: 4px solid var(--pri); font-size: var(--t-medio); font-weight: 500;
  color: var(--ink);
}

/* sommario dei paragrafi */
.sommario { padding: 1.2rem 1.3rem; background: var(--crema); border: 1px dashed var(--legno); border-radius: var(--r-2); }
.sommario__titolo {
  margin-bottom: .6rem; font-family: var(--f-testo); font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--pri-scuro);
}
.sommario ol { display: grid; gap: .35rem; padding-left: 1.2rem; margin: 0; }

/* riquadro dei punti chiave */
.riquadro {
  padding: 1.4rem 1.4rem 1.5rem; background: var(--surf); border: 1px solid var(--line-forte);
  border-top: 4px solid var(--acc); border-radius: var(--r-1) var(--r-1) var(--r-2) var(--r-2);
  box-shadow: var(--ombra-1);
}
.riquadro__titolo { margin-bottom: var(--s-3); font-size: var(--t-grande); }

/* blocco finale "Da leggere anche" */
.da-leggere { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--line-forte); }
.da-leggere__titolo { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--s-5); font-size: var(--t-h3); }
.da-leggere__titolo::before {
  content: ""; width: 2.4rem; height: .45rem; border-radius: var(--r-pillola);
  background: linear-gradient(90deg, var(--pri), var(--legno)); flex: none;
}

/* riquadro autore */
.autore-box {
  display: grid; gap: 1.2rem; align-items: start; padding: clamp(1.3rem, 3vw, 1.9rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem); background: var(--crema); border: 1px solid var(--line-forte);
  border-radius: var(--r-3);
}
.autore-box__foto {
  width: 6rem; height: 6rem; object-fit: cover; border: 3px solid var(--surf); border-radius: var(--r-2);
  box-shadow: var(--ombra-2);
}
.autore-box__nome { font-size: var(--t-grande); margin-bottom: .35rem; }
.autore-box__bio { color: var(--ink-tenue); }

.social { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin-top: var(--s-4); list-style: none; }
.social__link {
  display: inline-block; padding: .35rem .8rem; font-size: .88rem; font-weight: 600; color: var(--ink-tenue);
  text-decoration: none; background: var(--surf); border: 1px solid var(--line-forte); border-radius: var(--r-1);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.social__link:hover { color: var(--pri-cupo); background: var(--pri-velo); transform: translateY(-2px); }

/* -----------------------------------------------------------------------------
   15. Piede di pagina ed ecosistema
   -------------------------------------------------------------------------- */
.pie {
  position: relative; padding-block: clamp(2.75rem, 6vw, 4rem) 1.5rem; color: var(--su-scuro);
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 11px), linear-gradient(180deg, var(--legno-notte-2) 0%, var(--legno-notte) 100%);
}
/* bordo superiore in legno: il piano del mobile */
.pie::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: linear-gradient(90deg, var(--pri) 0%, var(--legno) 50%, var(--acc) 100%);
}

.pie__griglia { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); }
.pie__colonna { min-width: 0; }
.pie__colonna .marchio__nome { color: #FFF7EE; }
.pie__colonna .marchio__nome em { color: var(--legno-chiaro); }

.pie__titolo {
  margin-bottom: var(--s-4); font-family: var(--f-testo); font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--legno-chiaro);
}
.pie__claim { margin-top: var(--s-3); color: var(--su-scuro-mut); }
.pie__contatto { margin-top: var(--s-3); font-size: .95rem; color: var(--su-scuro-mut); }
.pie__contatto a { color: var(--legno-chiaro); }

.pie__lista { display: grid; gap: .5rem; padding: 0; list-style: none; }
.pie__link { color: var(--su-scuro); text-decoration: none; transition: color .2s ease, padding-left .2s ease; }
.pie__link:hover { color: #FFF7EE; padding-left: .3rem; text-decoration: underline; }
.pie .bottone-testo { color: var(--su-scuro); }
.pie .bottone-testo:hover { color: var(--legno-chiaro); }

/* colonna ecosistema: ogni sito collegato e' un cassettino etichettato */
.eco-lista { display: grid; gap: .55rem; padding: 0; list-style: none; }
.eco-link {
  display: block; padding: .6rem .75rem; color: var(--su-scuro); text-decoration: none;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(231, 205, 180, .22);
  border-left: 3px solid var(--legno); border-radius: var(--r-1);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.eco-link strong { display: block; font-size: .96rem; color: #FFF7EE; }
.eco-link span { display: block; font-size: .84rem; color: var(--su-scuro-mut); line-height: 1.45; }
.eco-link:hover {
  color: var(--su-scuro); background: rgba(255, 255, 255, .09); border-left-color: var(--pri-chiaro);
  transform: translateX(2px);
}

.pie__barra {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between;
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; font-size: var(--t-piccolo); color: var(--su-scuro-mut);
  border-top: 1px solid rgba(231, 205, 180, .18);
}
.pie__legale { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 0; list-style: none; }
.pie__legale a { color: var(--su-scuro-mut); }
.pie__legale a:hover { color: #FFF7EE; }

/* -----------------------------------------------------------------------------
   16. Banner cookie
   -------------------------------------------------------------------------- */
.cookie {
  position: fixed; left: 50%; bottom: 1rem; z-index: 130; width: min(38rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.35rem 1.35rem 1.45rem; transform: translateX(-50%);
  background: var(--surf); border: 1px solid var(--line-forte); border-top: 5px solid var(--pri);
  border-radius: var(--r-3); box-shadow: var(--ombra-3);
}
.cookie__titolo { margin-bottom: var(--s-3); font-size: var(--t-grande); }
.cookie__testo { font-size: .95rem; color: var(--ink-tenue); }
.cookie__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: var(--s-4); }
/* Accetta e Rifiuta hanno la stessa dimensione e lo stesso peso visivo */
.cookie__azioni .bottone { flex: 1 1 10rem; }
.cookie__azioni .bottone-testo { flex: 0 0 auto; color: var(--ink-tenue); }
.cookie__dettaglio { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px dashed var(--line-forte); font-size: .92rem; }
.cookie__dettaglio table { width: 100%; margin-bottom: var(--s-3); border-collapse: collapse; }
.cookie__dettaglio th,
.cookie__dettaglio td { padding: .5rem .55rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cookie__dettaglio th { font-family: var(--f-titoli); background: var(--crema); }

/* -----------------------------------------------------------------------------
   17. Pagine di servizio: testate interne, mappa, ringraziamento
   -------------------------------------------------------------------------- */
.intestazione-pagina {
  position: relative; padding-block: clamp(2.5rem, 5vw, 3.75rem);
  background: radial-gradient(38rem 20rem at 10% 0%, var(--pri-velo) 0%, transparent 65%), linear-gradient(180deg, var(--crema) 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.intestazione-pagina h1 { margin-bottom: var(--s-4); }
.intestazione-pagina p { max-width: 44rem; font-size: var(--t-medio); color: var(--mut); }

.mappa-gruppo { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.mappa-gruppo h2 { margin-bottom: var(--s-4); font-size: var(--t-h3); }
.mappa-gruppo ul { display: grid; gap: .55rem; padding: 0; list-style: none; }
.mappa-gruppo li { padding-left: 1.4rem; position: relative; }
.mappa-gruppo li::before {
  content: ""; position: absolute; top: .7em; left: 0; width: .8rem; height: .3rem; border-radius: var(--r-pillola);
  background: var(--legno);
}

.conferma { max-width: 40rem; margin-inline: auto; text-align: center; }
.conferma__segno {
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto var(--s-5); font-size: 1.8rem;
  color: #F4FAF6; background: linear-gradient(160deg, #55876B, var(--acc-scuro)); border-radius: var(--r-2);
  box-shadow: var(--ombra-2);
}

/* -----------------------------------------------------------------------------
   18. Accessibilita', movimento ridotto, stampa
   -------------------------------------------------------------------------- */
:focus-visible { outline: 3px solid var(--pri); outline-offset: 3px; border-radius: var(--r-1); }
.sezione--scura :focus-visible,
.pie :focus-visible { outline-color: var(--legno-chiaro); }

/* bersagli tattili sempre sopra i 44 px di lato nelle barre di comando */
.nav-principale__link,
.pie__link,
.menu-mobile__link { min-height: 2.75rem; display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .scheda:hover,
  .scheda-articolo:hover,
  .scheda-funzione:hover,
  .social__link:hover { transform: none; }
}

@media print {
  .intestazione, .menu-mobile, .cookie, .pie, .velo { display: none !important; }
  body { background: #fff; color: #000; }
  .prosa { max-width: none; }
}

/* -----------------------------------------------------------------------------
   19. Punti di rottura: da 320 px a 1440 px, senza scorrimento orizzontale
   -------------------------------------------------------------------------- */

/* da 34rem: due campi affiancati nel modulo e due colonne nelle griglie brevi */
@media (min-width: 34rem) {
  .campo-doppio { grid-template-columns: 1fr 1fr; }
  .griglia-2 { grid-template-columns: repeat(2, 1fr); }
  .griglia-funzioni { grid-template-columns: repeat(2, 1fr); }
  .autore-box { grid-template-columns: auto 1fr; }
}

/* da 48rem: griglie a tre colonne, piede su due colonne */
@media (min-width: 48rem) {
  .griglia-3 { grid-template-columns: repeat(3, 1fr); }
  .griglia-4 { grid-template-columns: repeat(2, 1fr); }
  .passi { grid-template-columns: repeat(3, 1fr); }
  .testimonianze { grid-template-columns: repeat(3, 1fr); }
  .griglia-articoli { grid-template-columns: repeat(2, 1fr); }
  .griglia-vantaggi { grid-template-columns: repeat(2, 1fr); }
  .pie__griglia { grid-template-columns: repeat(2, 1fr); }
  .problema__griglia { grid-template-columns: 1.35fr 1fr; }
}

/* da 62rem: hero su due colonne, prezzi affiancati, blog a tre colonne */
@media (min-width: 62rem) {
  .hero__griglia { grid-template-columns: 1.05fr .95fr; }
  .piani { grid-template-columns: repeat(3, 1fr); }
  .griglia-articoli { grid-template-columns: repeat(3, 1fr); }
  .griglia-funzioni { grid-template-columns: repeat(3, 1fr); }
  .griglia-4 { grid-template-columns: repeat(4, 1fr); }
  .contatto__griglia { grid-template-columns: 1fr 1.1fr; }
  .piano--evidenza { transform: translateY(-.85rem); }
}

/* da 70rem: compare la navigazione orizzontale, scompare il pulsante del menu */
@media (min-width: 70rem) {
  .nav-principale { display: block; }
  .apri-menu { display: none; }
  .pie__griglia { grid-template-columns: 1.2fr .85fr .95fr .85fr 1.15fr; }
}

/* oltre 90rem: il contenitore resta fermo, cresce solo l'aria attorno */
@media (min-width: 90rem) {
  :root { --w-contenitore: 76rem; }
}

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