@charset "utf-8";
/* ============================================================================
   OreDiBottega, foglio di stile unico del sito.
   Direzione artistica: legno e ottone, sabbia e verde salvia, cifre in grazie,
   atmosfera da falegnameria curata. Motivo grafico ricorrente: il filetto a
   venatura di legno, il segno della clessidra, l'incastro a coda di rondine.
   Ogni decorazione è disegnata in CSS puro: nessuna immagine di contorno.
   Indice
     01. Variabili e reset            12. Testimonianze
     02. Tipografia di base           13. Prezzi
     03. Impaginazione e utilità      14. Domande frequenti
     04. Decorazioni del sito         15. Schede degli articoli
     05. Intestazione                 16. Corpo redazionale
     06. Menu mobile                  17. Riquadro autore
     07. Pulsanti                     18. Modulo di contatto
     08. Apertura (hero)              19. Piede di pagina
     09. Il problema                  20. Banner cookie
     10. Soluzione e passi            21. Accessibilità e stampa
     11. Funzionalità e vantaggi      22. Adattamento agli schermi
   ========================================================================= */

/* ============================================================
   01. Variabili e reset
   ============================================================ */
:root {
  /* Palette approvata della bottega */
  --bg: #FAF7F0;      /* sabbia chiara, la carta del registro */
  --surf: #FFFFFF;    /* superficie delle schede */
  --ink: #2B2620;     /* inchiostro scuro, quasi noce bruciato */
  --mut: #6D6459;     /* testo secondario, grafite calda */
  --pri: #8A6A3B;     /* legno e ottone: azione principale */
  --acc: #3D6B5A;     /* verde salvia scuro: accento e conferme */
  --line: #E7E0D3;    /* filetti chiari, bordo della carta */
  /* Derivate di lavoro: ottone brunito e lucido, carta, noce del piede */
  --pri-scuro: #6E5230; --pri-chiaro: #B08A4F; --pri-velo: rgba(138, 106, 59, 0.10);
  --acc-scuro: #2F5347; --acc-velo: #E9F0EC;
  --sabbia: #F2ECDF; --sabbia-forte: #EBE3D2; --line-forte: #D6CBB4;
  --noce: #241E18; --bianco-velo: rgba(255, 255, 255, 0.86);
  /* Ombre calde, mai grigie */
  --ombra-1: 0 1px 2px rgba(43, 38, 32, 0.05), 0 2px 6px rgba(43, 38, 32, 0.04);
  --ombra-2: 0 6px 18px rgba(43, 38, 32, 0.07), 0 1px 3px rgba(43, 38, 32, 0.05);
  --ombra-3: 0 18px 44px rgba(43, 38, 32, 0.12);
  --ombra-incisa: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  /* Raggi contenuti: legno piallato, non plastica */
  --raggio-s: 3px; --raggio-m: 6px; --raggio-l: 12px; --raggio-tondo: 999px;
  /* Spaziature */
  --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem; --s7: 2.75rem; --s8: 3.5rem; --s9: 5rem; --s10: 7rem;
  /* Scala tipografica armonica e fluida */
  --t-mini: 0.8125rem; --t-piccolo: 0.9375rem;
  --t-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --t-guida: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-m: clamp(1.25rem, 1.17rem + 0.36vw, 1.5rem);
  --t-l: clamp(1.5rem, 1.34rem + 0.74vw, 2rem);
  --t-xl: clamp(1.85rem, 1.55rem + 1.4vw, 2.75rem);
  --t-xxl: clamp(2.35rem, 1.75rem + 2.7vw, 4rem);
  /* Caratteri: grazie per i titoli e per le cifre, lineare per il testo */
  --font-titoli: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --font-testo: "Jost", "Futura", "Century Gothic", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  /* Misure: lettura da 62 a 72 caratteri, contenitori, transizione unica */
  --misura: 68ch; --larghezza: 1160px; --larghezza-stretta: 44rem; --transizione: 180ms ease;
  color-scheme: light;
}

/* Il sito vive sulla carta sabbia: una versione scura tradirebbe la direzione
   artistica, perciò lo schema chiaro è dichiarato una volta e resta stabile. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, table, fieldset, legend { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }
a { color: var(--pri-scuro); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--acc-scuro); }
::selection { background: var(--pri-velo); color: var(--ink); }

/* ============================================================
   02. Tipografia di base e misura di lettura
   ============================================================ */
body {
  font-family: var(--font-testo); font-size: var(--t-base); line-height: 1.72;
  color: var(--ink); background-color: var(--bg); overflow-x: hidden;
  /* Fondo di carta: fibra chiara appena percepibile e due velature calde */
  background-image:
    repeating-linear-gradient(96deg, rgba(138, 106, 59, 0.03) 0 1px, transparent 1px 7px),
    radial-gradient(1200px 620px at 8% -6%, rgba(176, 138, 79, 0.10), transparent 62%),
    radial-gradient(900px 520px at 104% 12%, rgba(61, 107, 90, 0.07), transparent 60%);
  background-attachment: fixed;
}
h1, h2, h3, h4 {
  font-family: var(--font-titoli); font-weight: 600; line-height: 1.14;
  letter-spacing: 0.004em; color: var(--ink); text-wrap: balance;
}
h1 { font-size: var(--t-xxl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
h4 { font-size: var(--t-m); }
p { text-wrap: pretty; }
strong { font-weight: 600; }
small { font-size: var(--t-piccolo); }

/* Le cifre sono in grazie e tabellari: è il registro della bottega */
.numerico, .piano__cifra, .passo__numero, .articolo__meta time {
  font-family: var(--font-titoli); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.01em;
}
.misura { max-width: var(--misura); }
.testo-guida { font-size: var(--t-guida); color: var(--mut); line-height: 1.68; }
.testo-tenue { color: var(--mut); }
.centrato { text-align: center; }
.centrato .misura { margin-inline: auto; }
.nascosto-vista {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ============================================================
   03. Impaginazione, griglie, utilità
   ============================================================ */
.contenitore { width: min(var(--larghezza), 100% - clamp(1.25rem, 5vw, 3.5rem)); margin-inline: auto; }
.contenitore-stretto { width: min(var(--larghezza-stretta), 100% - clamp(1.25rem, 5vw, 3rem)); margin-inline: auto; }
.sezione { position: relative; padding-block: clamp(3.25rem, 2rem + 5vw, var(--s10)); }

/* Carta più carica, per alternare i blocchi */
.sezione--sabbia { background-color: var(--sabbia); border-block: 1px solid var(--line); }

/* Foglio del registro: righe orizzontali e filo di margine verde salvia */
.sezione--registro {
  background-color: var(--surf); border-block: 1px solid var(--line);
  background-image:
    linear-gradient(90deg, transparent calc(clamp(1.25rem, 5vw, 3.5rem) + 3px), rgba(61, 107, 90, 0.22) 0 calc(clamp(1.25rem, 5vw, 3.5rem) + 4px), transparent 0),
    repeating-linear-gradient(180deg, transparent 0 33px, var(--line) 33px 34px);
}

/* Velatura salvia per i blocchi di conferma, noce scuro per lo stacco forte */
.sezione--salvia { background-color: var(--acc-velo); border-block: 1px solid rgba(61, 107, 90, 0.18); }
.sezione--noce {
  background-color: var(--noce); color: #D6CBB4;
  background-image:
    repeating-linear-gradient(93deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px),
    radial-gradient(760px 380px at 12% 0%, rgba(176, 138, 79, 0.18), transparent 65%);
}
.sezione--noce h2, .sezione--noce h3 { color: #F6F1E6; }
.sezione--noce p, .sezione--noce .testo-guida, .sezione--noce .testo-tenue { color: #CBBFAB; }
.sezione__intestazione { margin-bottom: clamp(2rem, 1.2rem + 2.4vw, 3.25rem); }
.sezione__intestazione .testo-guida { margin-top: var(--s4); }
.griglia-2, .griglia-3, .griglia-4 {
  display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 1.75rem); grid-template-columns: 1fr;
}
.pila { display: flex; flex-direction: column; gap: var(--s4); }
.riquadro {
  background: var(--surf); border: 1px solid var(--line); border-left: 3px solid var(--pri);
  border-radius: var(--raggio-s); padding: clamp(1.1rem, 0.8rem + 1vw, 1.75rem); box-shadow: var(--ombra-1);
}
.riquadro--salvia { border-left-color: var(--acc); background: var(--acc-velo); }
.etichetta {
  display: inline-block; font-size: var(--t-mini); font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pri-scuro); background: var(--pri-velo);
  border: 1px solid rgba(138, 106, 59, 0.24); border-radius: var(--raggio-tondo); padding: 0.25rem 0.75rem;
}
.briciole { font-size: var(--t-piccolo); color: var(--mut); padding-top: var(--s5); }
.briciole ol { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; }
.briciole li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line-forte); }

/* ============================================================
   04. Decorazioni proprie del sito
   Venatura del legno, clessidra, coda di rondine, cornice di bottega.
   ============================================================ */

/* Filetto a venatura: nodi e fibre ottenuti sovrapponendo tre gradienti */
.venatura {
  height: 9px; border: 0; border-radius: 2px;
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 82, 48, 0.42) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(90deg, rgba(138, 106, 59, 0.24) 0 13px, rgba(138, 106, 59, 0.06) 13px 23px, rgba(138, 106, 59, 0.30) 23px 29px, transparent 29px 47px),
    linear-gradient(180deg, var(--sabbia-forte), var(--line-forte));
}
.venatura--stretta { height: 5px; }
.venatura--larga { height: 14px; }

/* Separatore centrale: due venature corte e la clessidra in mezzo */
.separatore {
  display: flex; align-items: center; gap: var(--s4); margin-block: clamp(2rem, 1.4rem + 2vw, 3.25rem);
}
.separatore::before, .separatore::after {
  content: ""; flex: 1; height: 5px; border-radius: 2px;
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 82, 48, 0.38) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--sabbia-forte), var(--line-forte));
}

/* Segno della clessidra, disegnato con un ritaglio poligonale */
.clessidra {
  width: 13px; height: 18px; flex: none;
  background: linear-gradient(180deg, var(--pri-chiaro), var(--pri));
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}
.clessidra--salvia { background: linear-gradient(180deg, var(--acc), var(--acc-scuro)); }
.clessidra--chiara { background: linear-gradient(180deg, #E4D2AE, var(--pri-chiaro)); }

/* Occhiello di sezione: clessidra, maiuscoletto spaziato, filetto d'ottone */
.occhiello {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: var(--s3);
  font-size: var(--t-mini); font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--pri-scuro);
}
.occhiello::before {
  content: ""; width: 10px; height: 14px;
  background: linear-gradient(180deg, var(--pri-chiaro), var(--pri));
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}
.occhiello::after {
  content: ""; width: clamp(1.5rem, 4vw, 3.25rem); height: 2px;
  background: linear-gradient(90deg, var(--pri-chiaro), rgba(176, 138, 79, 0));
}
.sezione--noce .occhiello { color: #D9C69C; }

/* Titolo di sezione sottolineato da una venatura corta */
.titolo-sezione { position: relative; }
.titolo-sezione::after {
  content: ""; display: block; width: 88px; height: 6px; margin-top: var(--s4); border-radius: 2px;
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 82, 48, 0.45) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, var(--pri-chiaro), var(--line-forte));
}
.centrato .titolo-sezione::after { margin-inline: auto; }
.sezione--noce .titolo-sezione::after {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 8px),
    linear-gradient(90deg, var(--pri-chiaro), rgba(176, 138, 79, 0.15));
}

/* Coda di rondine: la linguetta che incastra le schede importanti */
.coda-di-rondine {
  position: relative; display: inline-block; padding: 0.35rem 1.4rem 0.4rem;
  font-size: var(--t-mini); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: #FFFFFF; background: linear-gradient(180deg, var(--pri-chiaro), var(--pri));
  clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%);
}

/* Cornice da bottega per le immagini: bordo di legno e riflesso d'ottone */
.cornice-legno {
  position: relative; padding: 10px; border-radius: var(--raggio-m);
  background: linear-gradient(180deg, var(--sabbia-forte), var(--line-forte)); box-shadow: var(--ombra-2);
}
.cornice-legno::before {
  content: ""; position: absolute; inset: 4px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(176, 138, 79, 0.55); border-radius: var(--raggio-s);
}
.cornice-legno img { width: 100%; border-radius: var(--raggio-s); object-fit: cover; }

/* Scheda base: carta bianca, filo sottile, testata a venatura */
.scheda {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.9rem); box-shadow: var(--ombra-1);
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}
.scheda::before {
  content: ""; position: absolute; inset: -1px -1px auto; height: 4px;
  border-radius: var(--raggio-m) var(--raggio-m) 0 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 82, 48, 0.30) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, var(--pri-chiaro), var(--line-forte));
}
.scheda:hover { transform: translateY(-3px); border-color: var(--line-forte); box-shadow: var(--ombra-2); }

/* Registro sintetico: righe di quaderno per i riquadri di riepilogo */
.registro { display: grid; }
.registro__riga {
  display: flex; align-items: flex-start; gap: var(--s3); padding: 0.7rem 0;
  border-bottom: 1px dashed var(--line-forte); font-size: var(--t-piccolo);
}
.registro__riga:last-child { border-bottom: 0; }
.registro__riga::before {
  content: ""; flex: none; margin-top: 0.35rem; width: 9px; height: 12px;
  background: linear-gradient(180deg, var(--acc), var(--acc-scuro));
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}

/* ============================================================
   05. Collegamento di salto e intestazione
   ============================================================ */
.salta-al-contenuto {
  position: absolute; left: 0.75rem; top: -6rem; z-index: 200;
  background: var(--acc-scuro); color: #FFFFFF; font-weight: 500; text-decoration: none;
  padding: 0.7rem 1.2rem; border-radius: 0 0 var(--raggio-m) var(--raggio-m); transition: top var(--transizione);
}
.salta-al-contenuto:focus { top: 0; color: #FFFFFF; }
.intestazione {
  position: sticky; top: 0; z-index: 90; background: var(--bianco-velo);
  backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line);
}

/* La barra si chiude in basso con un filetto a venatura */
.intestazione::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; opacity: 0.85;
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 82, 48, 0.28) 0 2px, transparent 2px 10px),
    linear-gradient(90deg, var(--pri-chiaro), var(--line-forte) 60%, var(--pri-chiaro));
}
.intestazione__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); min-height: 68px; padding-block: 0.6rem;
}
.intestazione__azioni { display: flex; align-items: center; gap: var(--s3); }
.marchio { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }

/* Targhetta d'ottone con le iniziali, tagliata a coda di rondine */
.marchio__sigla {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  font-family: var(--font-titoli); font-weight: 700; font-size: 1.05rem; color: #FFF8EA;
  background: linear-gradient(160deg, var(--pri-chiaro), var(--pri) 62%, var(--pri-scuro));
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%); box-shadow: var(--ombra-incisa);
}
.marchio__nome { font-family: var(--font-titoli); font-size: 1.5rem; font-weight: 600; line-height: 1.05; }
.marchio__nome em { font-style: normal; color: var(--pri-scuro); }
.nav-principale { display: none; }
.nav-principale__lista { display: flex; align-items: center; gap: clamp(0.5rem, 1.2vw, 1.1rem); }
.nav-principale__link {
  position: relative; display: inline-block; padding: 0.55rem 0.35rem;
  font-size: 0.95rem; color: var(--ink); text-decoration: none; transition: color var(--transizione);
}
.nav-principale__link::after {
  content: ""; position: absolute; left: 0.35rem; right: 0.35rem; bottom: 0.25rem; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, var(--pri-chiaro), var(--pri));
  transform: scaleX(0); transform-origin: left; transition: transform var(--transizione);
}
.nav-principale__link:hover, .nav-principale__link.attivo,
.nav-principale__link[aria-current="page"] { color: var(--pri-scuro); }
.nav-principale__link:hover::after, .nav-principale__link.attivo::after,
.nav-principale__link[aria-current="page"]::after { transform: scaleX(1); }

/* Pulsante a tre tratti: le assi accatastate sul banco */
.apri-menu {
  display: inline-grid; place-content: center; gap: 5px; width: 46px; height: 46px;
  border: 1px solid var(--line-forte); border-radius: var(--raggio-s); background: var(--surf); cursor: pointer;
}
.apri-menu span {
  display: block; width: 22px; height: 2px; border-radius: 2px; background: var(--ink);
  transition: transform var(--transizione), opacity var(--transizione);
}
.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); }

/* ============================================================
   06. Menu mobile a scomparsa
   ============================================================ */
.menu-mobile {
  position: fixed; top: 0; right: 0; z-index: 120; width: min(21rem, 88vw); height: 100dvh;
  padding: var(--s5) var(--s5) var(--s7); display: flex; flex-direction: column; gap: var(--s5);
  overflow-y: auto; background: var(--bg); border-left: 6px solid transparent;
  border-image: linear-gradient(180deg, var(--pri-chiaro), var(--pri), var(--acc)) 1;
  box-shadow: var(--ombra-3); visibility: hidden; transform: translateX(102%);
  transition: transform 240ms ease, visibility 240ms ease;
}
.menu-mobile.aperto { visibility: visible; transform: translateX(0); }
.menu-mobile__testata {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--line);
}
.menu-mobile__chiudi {
  width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; color: var(--ink);
  border: 1px solid var(--line-forte); border-radius: var(--raggio-s); background: var(--surf); cursor: pointer;
}
.menu-mobile__lista { display: flex; flex-direction: column; }
.menu-mobile__link {
  position: relative; display: block; padding: 0.85rem 0.25rem 0.85rem 1.35rem;
  font-size: 1.05rem; color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--line-forte);
}
.menu-mobile__link::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 11px;
  transform: translateY(-50%); opacity: 0.45; transition: opacity var(--transizione);
  background: linear-gradient(180deg, var(--pri-chiaro), var(--pri));
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}
.menu-mobile__link:hover::before, .menu-mobile__link[aria-current="page"]::before { opacity: 1; }
.menu-mobile__link:hover { color: var(--pri-scuro); }
.velo {
  position: fixed; inset: 0; z-index: 110; border: 0; cursor: pointer;
  background: rgba(36, 30, 24, 0.55); backdrop-filter: blur(2px);
}
body.blocco-scroll { overflow: hidden; }

/* ============================================================
   07. Pulsanti e comandi
   ============================================================ */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.8rem 1.5rem; font-size: 1rem; font-weight: 500;
  text-align: center; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--raggio-s);
  transition: transform var(--transizione), box-shadow var(--transizione),
              background-color var(--transizione), border-color var(--transizione), color var(--transizione);
}
.bottone--primario {
  color: #FFFFFF; background: linear-gradient(180deg, #9C7943, var(--pri));
  border-color: var(--pri-scuro); box-shadow: var(--ombra-incisa), var(--ombra-1);
}
.bottone--primario:hover {
  color: #FFFFFF; background: linear-gradient(180deg, var(--pri), var(--pri-scuro));
  transform: translateY(-2px); box-shadow: var(--ombra-2);
}
.bottone--secondario { color: var(--acc-scuro); background: var(--surf); border-color: rgba(61, 107, 90, 0.45); }
.bottone--secondario:hover {
  color: #FFFFFF; background: var(--acc); border-color: var(--acc-scuro); transform: translateY(-2px);
}
.bottone--chiaro { color: var(--ink); background: #F6F1E6; border-color: rgba(255, 255, 255, 0.35); }
.bottone--chiaro:hover { background: #FFFFFF; color: var(--pri-scuro); }
.bottone--piccolo { min-height: 42px; padding: 0.55rem 1.1rem; font-size: 0.95rem; }
.bottone--largo { width: 100%; }
.gruppo-bottoni { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Comando testuale, usato nel piede e nel banner cookie */
.bottone-testo {
  display: inline-block; padding: 0.35rem 0; min-height: 44px; font-size: inherit; color: inherit;
  text-align: left; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.bottone-testo:hover { color: var(--pri-scuro); }
.sezione--noce .bottone-testo:hover, .pie .bottone-testo:hover { color: var(--pri-chiaro); }

/* ============================================================
   08. Sezione di apertura (hero)
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  padding-block: clamp(2.75rem, 1.5rem + 6vw, 6rem) clamp(3rem, 2rem + 5vw, 6rem);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 33px, rgba(214, 203, 180, 0.55) 33px 34px),
    radial-gradient(760px 460px at 78% 8%, rgba(176, 138, 79, 0.14), transparent 64%);
}

/* Coda di rondine in filigrana nell'angolo, il marchio del laboratorio */
.hero::after {
  content: ""; position: absolute; right: -70px; bottom: -90px; width: 320px; height: 320px;
  pointer-events: none; clip-path: polygon(22% 0, 78% 0, 100% 100%, 0 100%);
  background: linear-gradient(160deg, rgba(61, 107, 90, 0.12), rgba(138, 106, 59, 0.14));
}
.hero__griglia {
  position: relative; z-index: 1; display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 3.5rem); align-items: center;
}
.hero__titolo { margin-bottom: var(--s4); }
.hero__titolo em { font-style: italic; color: var(--pri-scuro); }
.hero__sub { font-size: var(--t-guida); color: var(--mut); max-width: 34rem; margin-bottom: var(--s5); }
.hero__punti { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s6); }
.hero__punti li { display: flex; align-items: center; gap: 0.65rem; font-weight: 500; }
.hero__punti li::before {
  content: ""; flex: none; width: 11px; height: 15px;
  background: linear-gradient(180deg, var(--acc), var(--acc-scuro));
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}
.hero__figura { position: relative; }
.hero__figura figcaption { margin-top: var(--s3); font-size: var(--t-mini); color: var(--mut); }

/* Cartellino del registro appoggiato sull'immagine */
.hero__scheda {
  position: relative; z-index: 2; margin-top: -3.25rem; margin-left: clamp(0rem, 2vw, 1.5rem);
  width: min(23rem, 100%); background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); padding: var(--s5); box-shadow: var(--ombra-3);
}
.hero__scheda-titolo { font-family: var(--font-titoli); font-size: var(--t-m); margin-bottom: var(--s3); }

/* ============================================================
   09. Il problema
   ============================================================ */
.problema__griglia { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start; }
.problema__racconto p { font-size: var(--t-guida); max-width: var(--misura); margin-bottom: var(--s5); }

/* Capolettera in grazie, come l'intestazione di una pagina di registro */
.problema__racconto p:first-of-type::first-letter {
  float: left; font-family: var(--font-titoli); font-size: 3.6rem; line-height: 0.82;
  font-weight: 600; color: var(--pri); padding: 0.16em 0.14em 0 0;
}
.problema__sintomi {
  background: var(--surf); border: 1px solid var(--line); border-top: 4px solid var(--pri);
  border-radius: var(--raggio-m); padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); box-shadow: var(--ombra-2);
}
.problema__sintomi h3 { font-size: var(--t-m); margin-bottom: var(--s4); }
.sintomo {
  display: flex; gap: var(--s3); padding: 0.85rem 0;
  border-bottom: 1px dashed var(--line-forte); color: var(--mut);
}
.sintomo:last-child { border-bottom: 0; padding-bottom: 0; }
.sintomo::before {
  content: ""; flex: none; margin-top: 0.4rem; width: 10px; height: 14px;
  background: linear-gradient(180deg, #C0653F, #9A4A2A);
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}

/* ============================================================
   10. La soluzione e i passi
   ============================================================ */
.soluzione__testo p { font-size: var(--t-guida); max-width: var(--misura); margin-bottom: var(--s5); }
.passi { position: relative; display: grid; gap: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); }
.passo {
  position: relative; background: var(--surf); border: 1px solid var(--line);
  border-radius: var(--raggio-m); padding: var(--s6) var(--s5) var(--s5); box-shadow: var(--ombra-1);
}

/* Linguetta a coda di rondine con il numero del passo, in cifre a grazie */
.passo__numero {
  position: absolute; top: -1px; left: var(--s5); display: grid; place-items: center;
  width: 46px; height: 34px; font-size: 1.15rem; font-weight: 700; color: #FFF8EA;
  background: linear-gradient(180deg, var(--pri-chiaro), var(--pri));
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.passo__titolo { font-size: var(--t-m); margin-bottom: var(--s3); }
.passo__testo { color: var(--mut); }

/* Il filo d'ottone che unisce i passi sugli schermi larghi */
.passi--collegati::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; display: none;
  background: linear-gradient(90deg, rgba(176, 138, 79, 0), var(--pri-chiaro), rgba(176, 138, 79, 0));
}

/* ============================================================
   11. Funzionalità e vantaggi
   ============================================================ */
.griglia-funzioni { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 1.6rem); }
.funzione {
  position: relative; background: var(--surf); border: 1px solid var(--line); border-radius: var(--raggio-m);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); box-shadow: var(--ombra-1);
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}
.funzione:hover { transform: translateY(-3px); border-color: var(--line-forte); box-shadow: var(--ombra-2); }

/* Il segno della funzione: incastro a coda di rondine con la clessidra dentro */
.funzione__icona {
  position: relative; width: 44px; height: 34px; margin-bottom: var(--s4);
  background: linear-gradient(160deg, var(--pri-chiaro), var(--pri));
  clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}
.funzione__icona::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 14px;
  transform: translate(-50%, -50%); background: #FFF8EA;
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}
.funzione:nth-child(even) .funzione__icona { background: linear-gradient(160deg, #4E8471, var(--acc)); }
.funzione__titolo { font-size: var(--t-m); margin-bottom: var(--s2); }
.funzione__testo { color: var(--mut); font-size: var(--t-piccolo); line-height: 1.7; }
.vantaggio { position: relative; padding-left: var(--s6); }
.vantaggio::before {
  content: ""; position: absolute; left: 0; top: 0.35rem; width: 14px; height: 19px;
  background: linear-gradient(180deg, var(--pri-chiaro), var(--pri));
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}
.vantaggio__titolo { font-size: var(--t-m); margin-bottom: var(--s2); }
.vantaggio p { color: var(--mut); max-width: var(--misura); }

/* ============================================================
   12. Testimonianze
   ============================================================ */
.testimonianze { display: grid; gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem); }
.testimonianza {
  position: relative; display: flex; flex-direction: column; gap: var(--s4);
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--raggio-m);
  padding: var(--s6) var(--s5) var(--s5); box-shadow: var(--ombra-1);
}

/* Virgoletta aperta in grazie, incisa nell'angolo della scheda */
.testimonianza::before {
  content: "\201C"; position: absolute; top: 0.1rem; left: 1.1rem;
  font-family: var(--font-titoli); font-size: 4.2rem; line-height: 1; color: rgba(138, 106, 59, 0.26);
}
.testimonianza__testo { font-size: var(--t-piccolo); line-height: 1.75; color: var(--ink); }
.testimonianza__firma {
  display: flex; align-items: center; gap: var(--s3); margin-top: auto;
  padding-top: var(--s4); border-top: 1px dashed var(--line-forte);
}
.testimonianza__sigla {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  font-family: var(--font-titoli); font-weight: 700; color: #FFF8EA;
  background: linear-gradient(160deg, var(--acc), var(--acc-scuro));
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
}
.testimonianza__nome { font-weight: 600; line-height: 1.3; }
.testimonianza__ruolo { font-size: var(--t-mini); color: var(--mut); }
.nota-scenari {
  margin-top: var(--s5); font-size: var(--t-piccolo); color: var(--mut);
  border-left: 3px solid var(--acc); padding-left: var(--s4);
}

/* ============================================================
   13. Prezzi
   ============================================================ */
.prezzi { display: grid; gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem); align-items: start; }
.piano {
  position: relative; display: flex; flex-direction: column; background: var(--surf);
  border: 1px solid var(--line); border-radius: var(--raggio-m);
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); box-shadow: var(--ombra-1);
}
.piano__nome { font-family: var(--font-titoli); font-size: var(--t-l); margin-bottom: var(--s2); }
.piano__prezzo { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: var(--s3); }
.piano__cifra {
  font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); font-weight: 700; line-height: 1; color: var(--pri-scuro);
}
.piano__periodo { font-size: var(--t-piccolo); color: var(--mut); }
.piano__descrizione {
  color: var(--mut); font-size: var(--t-piccolo);
  padding-bottom: var(--s4); border-bottom: 1px dashed var(--line-forte);
}
.piano__incluso {
  display: flex; flex-direction: column; gap: var(--s3);
  padding-block: var(--s4); margin-bottom: var(--s4); font-size: var(--t-piccolo);
}
.piano__incluso li { display: flex; gap: 0.6rem; align-items: flex-start; }
.piano__incluso li::before {
  content: ""; flex: none; margin-top: 0.35rem; width: 9px; height: 13px;
  background: linear-gradient(180deg, var(--acc), var(--acc-scuro));
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}
.piano .bottone { margin-top: auto; }

/* Il piano consigliato: incastro d'ottone e carta più calda */
.piano--evidenza {
  border-color: var(--pri); border-width: 2px; box-shadow: var(--ombra-3);
  background: linear-gradient(180deg, #FFFDF8, var(--surf) 40%);
}
.piano--evidenza::before {
  content: ""; position: absolute; inset: -2px -2px auto; height: 6px;
  border-radius: var(--raggio-m) var(--raggio-m) 0 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 82, 48, 0.30) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, var(--pri-chiaro), var(--pri));
}
.piano__etichetta { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.prezzi__nota { margin-top: var(--s5); font-size: var(--t-piccolo); color: var(--mut); max-width: var(--misura); }

/* ============================================================
   14. Domande frequenti
   ============================================================ */
.faq { max-width: 54rem; margin-inline: auto; border-top: 1px solid var(--line); }
.faq__voce { border-bottom: 1px solid var(--line); }
.faq__domanda {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4);
  width: 100%; min-height: 56px; padding: 1.2rem 0.25rem; font-family: var(--font-titoli);
  font-size: var(--t-m); font-weight: 600; line-height: 1.25; text-align: left;
  color: var(--ink); cursor: pointer; transition: color var(--transizione);
}
.faq__domanda:hover { color: var(--pri-scuro); }

/* La clessidra si rovescia quando la risposta si apre */
.faq__segno {
  flex: none; width: 14px; height: 19px; margin-top: 0.35rem;
  background: linear-gradient(180deg, var(--pri-chiaro), var(--pri));
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
  transition: transform 240ms ease, background 240ms ease;
}
.faq__domanda[aria-expanded="true"] .faq__segno {
  transform: rotate(180deg); background: linear-gradient(180deg, var(--acc), var(--acc-scuro));
}
.faq__risposta { padding: 0 0.25rem 1.4rem; }
.faq__risposta p { color: var(--mut); max-width: var(--misura); }
.faq__risposta p + p { margin-top: var(--s4); }

/* ============================================================
   15. Schede degli articoli e blocco "Da leggere anche"
   ============================================================ */
.griglia-articoli { display: grid; gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem); }
.scheda-articolo {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--raggio-m); box-shadow: var(--ombra-1);
  transition: transform var(--transizione), box-shadow var(--transizione), border-color var(--transizione);
}
.scheda-articolo:hover { transform: translateY(-3px); border-color: var(--line-forte); box-shadow: var(--ombra-2); }
.scheda-articolo__figura {
  position: relative; margin: 0; aspect-ratio: 16 / 9; background: var(--sabbia-forte); overflow: hidden;
}
.scheda-articolo__figura img { width: 100%; height: 100%; object-fit: cover; transition: transform 320ms ease; }
.scheda-articolo:hover .scheda-articolo__figura img { transform: scale(1.03); }

/* Filetto a venatura fra immagine e testo */
.scheda-articolo__figura::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 82, 48, 0.40) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, var(--pri-chiaro), var(--line-forte));
}
.scheda-articolo__corpo { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s5); flex: 1; }
.scheda-articolo__meta {
  font-size: var(--t-mini); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mut);
}
.scheda-articolo__titolo { font-size: 1.35rem; line-height: 1.22; }
.scheda-articolo__titolo a { color: var(--ink); text-decoration: none; }

/* Tutta la scheda diventa cliccabile grazie a questa estensione */
.scheda-articolo__titolo a::after { content: ""; position: absolute; inset: 0; }
.scheda-articolo__titolo a:hover { color: var(--pri-scuro); }
.scheda-articolo__estratto { font-size: var(--t-piccolo); color: var(--mut); margin-bottom: auto; }
.scheda-articolo__leggi {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: var(--t-piccolo); font-weight: 500; color: var(--pri-scuro);
}
.scheda-articolo__leggi::after {
  content: ""; width: 18px; height: 2px; background: var(--pri); transition: width var(--transizione);
}
.scheda-articolo:hover .scheda-articolo__leggi::after { width: 30px; }
.da-leggere {
  margin-top: clamp(2.5rem, 1.8rem + 3vw, 4rem); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--sabbia); border: 1px solid var(--line); border-radius: var(--raggio-l);
}
.da-leggere__titolo { font-size: var(--t-l); margin-bottom: var(--s5); }

/* ============================================================
   16. Corpo degli articoli e pagine di testo
   ============================================================ */
.pagina-testata {
  padding-block: clamp(2.5rem, 1.6rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(214, 203, 180, 0.5) 33px 34px);
}
.pagina-testata p { color: var(--mut); max-width: var(--misura); margin-top: var(--s4); }
.articolo { padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
.articolo__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  font-size: var(--t-piccolo); color: var(--mut); margin-block: var(--s4);
}
.articolo__meta a { color: var(--pri-scuro); }
.figura-evidenza { margin-block: var(--s5); }
.figura-evidenza img { width: 100%; }
.credito-foto, .figura-evidenza figcaption { margin-top: var(--s3); font-size: var(--t-mini); color: var(--mut); }
.chapo {
  font-family: var(--font-titoli); font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-style: italic; line-height: 1.45; color: var(--pri-scuro); max-width: var(--misura);
  padding-left: var(--s5); border-left: 4px solid var(--pri-chiaro); margin-block: var(--s5);
}
.sommario {
  background: var(--surf); border: 1px solid var(--line); border-radius: var(--raggio-m);
  padding: var(--s5); margin-block: var(--s6); box-shadow: var(--ombra-1);
}
.sommario h2 { font-size: var(--t-m); margin-bottom: var(--s3); }
.sommario ol { padding-left: 1.2rem; }
.sommario li { margin-bottom: 0.35rem; font-size: var(--t-piccolo); }

/* Tipografia redazionale, condivisa da articoli e pagine di testo */
.articolo__corpo, .prosa { font-size: var(--t-guida); line-height: 1.78; }
.articolo__corpo > *, .prosa > * { max-width: var(--misura); }
.articolo__corpo h2, .prosa h2 {
  position: relative; font-size: clamp(1.6rem, 1.35rem + 1.1vw, 2.25rem);
  margin-top: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); margin-bottom: var(--s4);
  padding-top: var(--s4); border-top: 1px solid var(--line);
}

/* Ogni titolo di secondo livello porta la sua venatura corta */
.articolo__corpo h2::before, .prosa h2::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 64px; height: 3px;
  background: linear-gradient(90deg, var(--pri), var(--pri-chiaro));
}
.articolo__corpo h3, .prosa h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  margin-top: var(--s6); margin-bottom: var(--s3); color: var(--pri-scuro);
}
.articolo__corpo p, .prosa p { margin-bottom: var(--s5); }
.articolo__corpo ul, .articolo__corpo ol, .prosa ul, .prosa ol { margin-bottom: var(--s5); padding-left: 1.4rem; }
.articolo__corpo li, .prosa li { margin-bottom: 0.5rem; }
.articolo__corpo ul, .prosa ul { list-style: none; padding-left: 0; }
.articolo__corpo ul > li, .prosa ul > li { position: relative; padding-left: 1.65rem; }
.articolo__corpo ul > li::before, .prosa ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 12px;
  background: linear-gradient(180deg, var(--pri-chiaro), var(--pri));
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}
.articolo__corpo ol, .prosa ol { list-style: decimal; }
.articolo__corpo ol > li::marker, .prosa ol > li::marker {
  font-family: var(--font-titoli); font-weight: 700; color: var(--pri-scuro);
}
.articolo__corpo blockquote, .prosa blockquote {
  margin-block: var(--s6); padding: var(--s5) var(--s5) var(--s5) var(--s6);
  background: var(--acc-velo); border-left: 4px solid var(--acc);
  border-radius: 0 var(--raggio-m) var(--raggio-m) 0; font-family: var(--font-titoli);
  font-size: 1.35rem; font-style: italic; line-height: 1.5; color: var(--acc-scuro);
}
.articolo__corpo blockquote p:last-child, .prosa blockquote p:last-child { margin-bottom: 0; }
.articolo__corpo figure, .prosa figure { margin-block: var(--s6); }
.articolo__corpo figcaption, .prosa figcaption { margin-top: var(--s3); font-size: var(--t-mini); color: var(--mut); }

/* Le tabelle scorrono dentro il proprio contenitore, mai la pagina */
.tabella-avvolgibile {
  max-width: 100%; overflow-x: auto; margin-block: var(--s6);
  border: 1px solid var(--line); border-radius: var(--raggio-m); background: var(--surf);
}
.articolo__corpo table, .prosa table {
  width: 100%; max-width: none; border-collapse: collapse; font-size: var(--t-piccolo);
}
.articolo__corpo th, .articolo__corpo td, .prosa th, .prosa td {
  padding: 0.85rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line);
}
.articolo__corpo thead th, .prosa thead th {
  font-family: var(--font-testo); font-weight: 600; font-size: var(--t-mini);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--pri-scuro);
  background: var(--sabbia); border-bottom: 2px solid var(--pri-chiaro);
}
.articolo__corpo tbody tr:last-child td, .prosa tbody tr:last-child td { border-bottom: 0; }
.articolo__corpo caption, .prosa caption {
  caption-side: bottom; padding: 0.75rem 1rem; font-size: var(--t-mini); color: var(--mut); text-align: left;
}
.articolo__corpo code, .prosa code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.92em;
  padding: 0.1em 0.4em; background: var(--sabbia-forte);
  border: 1px solid var(--line-forte); border-radius: var(--raggio-s);
}
.articolo__corpo a, .prosa a { color: var(--pri-scuro); text-decoration-color: var(--pri-chiaro); }
.articolo__corpo a:hover, .prosa a:hover { color: var(--acc-scuro); text-decoration-color: var(--acc); }
.articolo__corpo hr, .prosa hr {
  height: 7px; border: 0; margin-block: var(--s7); border-radius: 2px;
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 82, 48, 0.35) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, var(--sabbia-forte), var(--line-forte));
}
.mappa-sito { display: grid; gap: var(--s6); }
.mappa-sito__gruppo h2 { font-size: var(--t-l); margin-bottom: var(--s4); }
.mappa-sito__gruppo li { margin-bottom: 0.5rem; }

/* ============================================================
   17. Riquadro autore e profili
   ============================================================ */
.autore-box {
  display: grid; gap: var(--s5); align-items: start; margin-top: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.25rem); background: var(--surf);
  border: 1px solid var(--line); border-left: 5px solid var(--pri);
  border-radius: var(--raggio-m); box-shadow: var(--ombra-2);
}
.autore-box__foto {
  width: 108px; height: 108px; object-fit: cover; border-radius: var(--raggio-s);
  border: 3px solid var(--sabbia-forte); box-shadow: var(--ombra-1);
}
.autore-box__nome { font-size: var(--t-m); margin-bottom: var(--s2); }
.autore-box__ruolo {
  font-size: var(--t-mini); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pri-scuro); margin-bottom: var(--s3);
}
.autore-box__bio { color: var(--mut); font-size: var(--t-piccolo); margin-bottom: var(--s4); }
.social-lista { display: flex; flex-wrap: wrap; gap: var(--s2); }
.social-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 0.9rem;
  font-size: var(--t-mini); color: var(--ink); text-decoration: none; background: var(--bg);
  border: 1px solid var(--line-forte); border-radius: var(--raggio-tondo);
  transition: background var(--transizione), color var(--transizione), border-color var(--transizione);
}
.social-link:hover { color: #FFFFFF; background: var(--acc); border-color: var(--acc-scuro); }

/* ============================================================
   18. Modulo di contatto
   ============================================================ */
.contatto__griglia { display: grid; gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); align-items: start; }
.modulo {
  background: var(--surf); border: 1px solid var(--line); border-top: 5px solid var(--pri);
  border-radius: var(--raggio-m); padding: clamp(1.25rem, 1rem + 1.4vw, 2rem); box-shadow: var(--ombra-2);
}
.modulo__riga { display: grid; gap: var(--s4); }
.campo { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--s4); }
.campo label { font-size: var(--t-piccolo); font-weight: 500; color: var(--ink); }
.campo input, .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; font-size: 1rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line-forte); border-radius: var(--raggio-s);
  transition: border-color var(--transizione), box-shadow var(--transizione), background var(--transizione);
}
.campo textarea { min-height: 160px; resize: vertical; line-height: 1.65; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--mut); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; background: var(--surf); border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(61, 107, 90, 0.22);
}
.campo select {
  appearance: none; -webkit-appearance: none; padding-right: 2.6rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--pri) 50%), linear-gradient(135deg, var(--pri) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.campo__aiuto { font-size: var(--t-mini); color: var(--mut); }
.modulo__nota { font-size: var(--t-mini); color: var(--mut); margin-top: var(--s4); }
.alternativa-email {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px dashed var(--line-forte);
  font-size: var(--t-piccolo); color: var(--mut);
}

/* Campo trappola per i robot: fuori dalla vista, mai compilato da una persona */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   19. Piede di pagina e colonna ecosistema
   ============================================================ */
.pie {
  position: relative; margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4rem) var(--s5);
  color: #D6CBB4; background-color: var(--noce);
  background-image:
    repeating-linear-gradient(93deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 9px),
    radial-gradient(900px 420px at 0% 0%, rgba(176, 138, 79, 0.16), transparent 62%);
}

/* Il piede si apre con la venatura a tutta larghezza */
.pie::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background-image:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, var(--pri), var(--pri-chiaro) 45%, var(--acc));
}
.pie__griglia {
  display: grid; gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); padding-bottom: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.pie__colonna { min-width: 0; }
.pie .marchio { color: #F6F1E6; }
.pie .marchio__nome em { color: var(--pri-chiaro); }
.pie__claim { margin-top: var(--s3); font-size: var(--t-piccolo); color: #BEB19A; }
.pie__contatto { margin-top: var(--s3); font-size: var(--t-piccolo); }
.pie__contatto a { color: var(--pri-chiaro); }
.pie__titolo {
  font-family: var(--font-titoli); font-size: 1.2rem; color: #F6F1E6; margin-bottom: var(--s4);
  padding-bottom: var(--s2); border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.pie__lista { display: flex; flex-direction: column; gap: 0.15rem; }
.pie__link, .pie .bottone-testo {
  display: inline-block; padding: 0.35rem 0; font-size: var(--t-piccolo); color: #D6CBB4;
  text-decoration: none; transition: color var(--transizione), padding-left var(--transizione);
}
.pie__link:hover { color: var(--pri-chiaro); padding-left: 0.35rem; }

/* Colonna ecosistema: cinque targhette di legno avvitate al piede */
.eco-lista { display: flex; flex-direction: column; gap: 0.55rem; }
.eco-link {
  position: relative; display: block; padding: 0.7rem 0.85rem 0.7rem 1.5rem;
  font-size: var(--t-mini); line-height: 1.45; color: #E3D9C6; text-decoration: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(214, 203, 180, 0.18); border-radius: var(--raggio-s);
  transition: border-color var(--transizione), background var(--transizione), transform var(--transizione);
}

/* Il segno di incastro sulla costola sinistra della targhetta */
.eco-link::before {
  content: ""; position: absolute; left: 0.55rem; top: 50%; width: 8px; height: 11px;
  transform: translateY(-50%); background: linear-gradient(180deg, var(--pri-chiaro), var(--pri));
  clip-path: polygon(0 0, 100% 0, 52% 50%, 100% 100%, 0 100%, 48% 50%);
}
.eco-link:hover {
  color: #FFF8EA; background: rgba(176, 138, 79, 0.16); border-color: var(--pri-chiaro); transform: translateX(2px);
}
.eco-link strong { display: block; font-weight: 600; color: #F6F1E6; }
.eco-link span { color: #BEB19A; }
.pie__barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
  padding-top: var(--s5); border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--t-mini); color: #B3A791;
}
.pie__legale { display: flex; flex-wrap: wrap; gap: var(--s4); }
.pie__legale a { color: #D6CBB4; text-decoration: none; }
.pie__legale a:hover { color: var(--pri-chiaro); text-decoration: underline; }

/* ============================================================
   20. Banner cookie
   ============================================================ */
.cookie {
  position: fixed; left: 50%; bottom: clamp(0.75rem, 2vw, 1.5rem); transform: translateX(-50%);
  z-index: 150; width: min(46rem, calc(100% - 1.5rem)); max-height: min(80vh, 40rem); overflow-y: auto;
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem); background: var(--surf);
  border: 1px solid var(--line-forte); border-radius: var(--raggio-l); box-shadow: var(--ombra-3);
}

/* Anche il banner porta la venatura in testa */
.cookie::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  border-radius: var(--raggio-l) var(--raggio-l) 0 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(110, 82, 48, 0.32) 0 2px, transparent 2px 9px),
    linear-gradient(90deg, var(--pri-chiaro), var(--acc));
}
.cookie__titolo { font-size: var(--t-m); margin-bottom: var(--s3); }
.cookie__testo { font-size: var(--t-piccolo); color: var(--mut); }
.cookie__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s4); }

/* Accetta e Rifiuta hanno la stessa evidenza: stessa misura, stesso peso */
.cookie__azioni .bottone { flex: 1 1 12rem; }
.cookie__azioni .bottone-testo { flex: 0 0 auto; margin-left: auto; }
.cookie__dettaglio {
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px dashed var(--line-forte);
  font-size: var(--t-mini); color: var(--mut);
}
.cookie__dettaglio table { width: 100%; border-collapse: collapse; margin-bottom: var(--s3); }
.cookie__dettaglio th, .cookie__dettaglio td {
  padding: 0.5rem 0.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line);
}
.cookie__dettaglio thead th { font-weight: 600; color: var(--pri-scuro); background: var(--sabbia); }

/* ============================================================
   21. Accessibilità, movimento ridotto, stampa
   ============================================================ */
:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: var(--raggio-s); }
.bottone:focus-visible, .nav-principale__link:focus-visible, .eco-link:focus-visible {
  outline: 3px solid var(--acc-scuro); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(61, 107, 90, 0.18);
}
.pie a:focus-visible, .sezione--noce a:focus-visible, .cookie a:focus-visible { outline-color: var(--pri-chiaro); }

/* Bersagli comodi anche con le mani stanche */
a, button, summary, input, select, textarea { touch-action: manipulation; }

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

@media print {
  .intestazione, .menu-mobile, .cookie, .velo, .pie, .salta-al-contenuto { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  .articolo__corpo > *, .prosa > * { max-width: none; }
}

/* ============================================================
   22. Adattamento agli schermi, da 320 px a 1440 px,
   senza mai scorrimento orizzontale.
   ============================================================ */
@media (min-width: 34rem) {
  .griglia-2, .griglia-funzioni, .modulo__riga { grid-template-columns: repeat(2, 1fr); }
  .autore-box { grid-template-columns: 108px 1fr; }
  .cookie__azioni .bottone { flex: 0 1 11rem; }
}

@media (min-width: 48rem) {
  .griglia-3, .passi, .prezzi { grid-template-columns: repeat(3, 1fr); }
  .griglia-4, .griglia-articoli, .testimonianze, .mappa-sito { grid-template-columns: repeat(2, 1fr); }
  .passi--collegati::before { display: block; }
}

@media (min-width: 62rem) {
  .hero__griglia { grid-template-columns: 1.05fr 0.95fr; }
  .problema__griglia { grid-template-columns: 1.2fr 0.8fr; }
  .contatto__griglia { grid-template-columns: 0.85fr 1.15fr; }
  .griglia-funzioni, .griglia-articoli, .testimonianze { grid-template-columns: repeat(3, 1fr); }
  .griglia-4 { grid-template-columns: repeat(4, 1fr); }
  .autore-box { grid-template-columns: 132px 1fr; }
  .autore-box__foto { width: 132px; height: 132px; }
  .prezzi { align-items: stretch; }
  .piano--evidenza { transform: translateY(-10px); }
}

@media (min-width: 68rem) {
  .nav-principale { display: block; }
  .apri-menu { display: none; }
  .intestazione__barra { min-height: 76px; }
}

@media (max-width: 22.5rem) {
  .hero__scheda { margin-top: -1.5rem; padding: var(--s4); }
  .bottone { padding-inline: 1.1rem; }
  .gruppo-bottoni .bottone { width: 100%; }
}

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