@charset "utf-8";
/* ==========================================================================
   LocazioneSerena - foglio di stile unico del sito
   Direzione artistica: interno chiaro con tende, verde eucalipto e lino,
   fotografia morbida, tipografia serena. Il motivo grafico ricorrente e'
   fatto di tre elementi: la sagoma della chiave, l'arco della porta e le
   bande di luce che entrano dalla finestra. Tutte le decorazioni sono
   disegnate in CSS puro, senza nessuna immagine esterna.
   Coppia tipografica: Spectral per i titoli (serif calmo, di lettura),
   Commissioner per il testo corrente (grottesca umanista, molto leggibile).
   Indice:
     1 font, 2 reset, 3 variabili, 4 tipografia, 5 fondali e texture,
     6 impaginazione, 7 accessibilita', 8 intestazione e menu,
     9 bottoni, 10 testate di sezione, 11 pannelli, archi e schede,
     12 hero e scadenzario, 13 problema, 14 soluzione e passi,
     15 funzionalita' e chiave, 16 vantaggi, 17 testimonianze,
     18 prezzi, 19 FAQ, 20 modulo di contatto, 21 schede articolo,
     22 corpo redazionale, 23 riquadro autore, 24 da leggere anche,
     25 piede, 26 banner cookie, 27 pagine di servizio,
     28 responsive, 29 movimento ridotto, 30 stampa.
   ========================================================================== */

/* 1. FONT ------------------------------------------------------------------
   Due sole famiglie, caricate con display=swap e con i soli pesi usati. */
/* 2. RESET MODERNO --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  color-scheme: light;
}
body { min-height: 100%; }
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
p, h1, h2, h3, h4, li, figcaption { overflow-wrap: break-word; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
:target { scroll-margin-top: 6.5rem; }

/* 3. VARIABILI -------------------------------------------------------------
   Palette del progetto, piu' le derivate necessarie a stati, ombre e ritmo. */
:root {
  /* palette di base */
  --bg:   #F6F8F5;   /* fondo lino chiaro */
  --surf: #FFFFFF;   /* superficie delle schede */
  --ink:  #1D2A24;   /* testo principale, verde quasi nero */
  --mut:  #5C6E64;   /* testo secondario */
  --pri:  #3C7A63;   /* verde eucalipto */
  --acc:  #C96F4A;   /* terracotta */
  --line: #E1E7E1;   /* filetti e bordi */

  /* derivate: stati e profondita' */
  --pri-scuro:  #2E6350;
  --pri-chiaro: #E7F0EB;
  --pri-velo:   rgba(60, 122, 99, .10);
  --acc-scuro:  #A9542F;   /* terracotta leggibile sul chiaro */
  --acc-chiaro: #FBEDE6;
  --ink-notte:  #16211C;   /* fondo del piede, sera in casa */
  --ink-tenue:  rgba(29, 42, 36, .08);
  --surf-lino:  #FBFCFA;
  --linea-forte:#CBD6CC;

  /* ombre morbide, sempre verdi e mai grigie */
  --ombra-1: 0 1px 2px rgba(29, 42, 36, .05), 0 2px 8px rgba(29, 42, 36, .04);
  --ombra-2: 0 2px 6px rgba(29, 42, 36, .06), 0 14px 32px rgba(29, 42, 36, .07);
  --ombra-3: 0 6px 14px rgba(29, 42, 36, .07), 0 28px 60px rgba(29, 42, 36, .10);
  --ombra-pri: 0 10px 26px rgba(60, 122, 99, .22);

  /* raggi: l'arco e' la forma firma del sito */
  --r-min: .5rem;
  --r-1: .9rem;
  --r-2: 1.4rem;
  --r-3: 2rem;
  --r-arco: 11rem 11rem 1.4rem 1.4rem;
  --r-pillola: 999px;

  /* ritmo verticale e orizzontale */
  --sp-1: .375rem;
  --sp-2: .75rem;
  --sp-3: 1.125rem;
  --sp-4: 1.75rem;
  --sp-5: 2.5rem;
  --sp-6: 3.5rem;
  --sp-7: 5rem;
  --sezione-y: clamp(3.75rem, 7vw, 6.75rem);
  --larghezza: 1180px;
  --larghezza-stretta: 46rem;
  --bordo-pagina: clamp(1.125rem, 4vw, 2.5rem);

  /* famiglie e transizioni */
  --f-titoli: "Spectral", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --f-testo: "Commissioner", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --t-veloce: .18s ease;
  --t-media: .3s cubic-bezier(.22, .61, .36, 1);
}

/* 4. TIPOGRAFIA ------------------------------------------------------------
   Scala armonica fluida, interlinea generosa, titoli in Spectral. */
body {
  font-family: var(--f-testo);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  font-weight: 400;
  line-height: 1.72;
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--f-titoli);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.014em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2.15rem, 1.45rem + 3.1vw, 3.75rem); line-height: 1.08; }
h2 { font-size: clamp(1.72rem, 1.32rem + 1.8vw, 2.6rem); }
h3 { font-size: clamp(1.24rem, 1.1rem + .6vw, 1.5rem); line-height: 1.28; }
h4 { font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.35; }
strong, b { font-weight: 600; }
em { font-style: italic; }
small { font-size: .875em; }
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }

/* collegamenti dentro il testo corrente */
p a, li a, figcaption a, dd a, td a {
  color: var(--pri-scuro);
  text-decoration: underline;
  text-decoration-color: rgba(60, 122, 99, .4);
  transition: color var(--t-veloce), text-decoration-color var(--t-veloce);
}
p a:hover, li a:hover, figcaption a:hover, dd a:hover, td a:hover {
  color: var(--acc-scuro);
  text-decoration-color: var(--acc);
}

.testo-tenue { color: var(--mut); }
.centrato { text-align: center; }
.misura { max-width: 40rem; }
.occhiello {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--f-testo);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pri-scuro);
}
.occhiello::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pri));
}

/* 5. FONDALI E TEXTURE -----------------------------------------------------
   Trama di lino appena percettibile e due bande di luce oblique, come la
   luce che passa fra le tende di una stanza al mattino. */
body {
  background-image:
    linear-gradient(101deg,
      rgba(255, 255, 255, 0) 0 6%,
      rgba(255, 255, 255, .8) 6% 15%,
      rgba(255, 255, 255, 0) 15% 24%,
      rgba(255, 255, 255, .48) 24% 29%,
      rgba(255, 255, 255, 0) 29% 100%),
    repeating-linear-gradient(90deg, rgba(29, 42, 36, .028) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(29, 42, 36, .02) 0 1px, transparent 1px 4px);
  background-attachment: fixed, fixed, fixed;
}

/* 6. IMPAGINAZIONE --------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}
.contenitore-stretto {
  width: 100%;
  max-width: var(--larghezza-stretta);
  margin-inline: auto;
  padding-inline: var(--bordo-pagina);
}
.sezione {
  position: relative;
  padding-block: var(--sezione-y);
}
.sezione--alt {
  background:
    linear-gradient(180deg, rgba(231, 240, 235, .0), rgba(231, 240, 235, .75) 22%, rgba(231, 240, 235, .55));
}
.sezione--lino {
  background: var(--surf-lino);
  border-block: 1px solid var(--line);
}
/* colonnato di archi sul bordo superiore: firma grafica del sito */
.sezione--archi::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2.3rem;
  background-image: radial-gradient(circle at 50% 100%,
    transparent 0 1.05rem, var(--line) 1.05rem 1.15rem, transparent 1.16rem);
  background-size: 2.5rem 2.3rem;
  background-repeat: repeat-x;
  pointer-events: none;
}
/* alone di luce calda dietro una sezione */
.sezione--luce::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58rem 26rem at 78% -12%, rgba(201, 111, 74, .1), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.sezione--luce > * { position: relative; z-index: 1; }

.griglia-2, .griglia-3, .griglia-4 { display: grid; gap: var(--sp-4); }
.griglia-2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.griglia-3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }
.griglia-4 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.pila > * + * { margin-top: var(--sp-3); }

/* 7. ACCESSIBILITA' -------------------------------------------------------- */
.salta-al-contenuto {
  position: absolute;
  left: 50%;
  top: -6rem;
  transform: translateX(-50%);
  z-index: 200;
  padding: .8rem 1.4rem;
  background: var(--pri);
  color: #FFFFFF;
  font-weight: 600;
  border-radius: 0 0 var(--r-2) var(--r-2);
  box-shadow: var(--ombra-2);
  transition: top var(--t-veloce);
}
.salta-al-contenuto:focus-visible { top: 0; }

:focus-visible {
  outline: 3px solid var(--acc-scuro);
  outline-offset: 3px;
  border-radius: var(--r-min);
}
.nascosto-vista {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* i comandi hanno sempre un bersaglio comodo da toccare */
a[class*="link"], .bottone, .faq__domanda, .apri-menu, .menu-mobile__chiudi { min-height: 2.75rem; }

/* 8. INTESTAZIONE E MENU --------------------------------------------------- */
.intestazione {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(246, 248, 245, .88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.intestazione::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pri) 30%, var(--acc) 62%, transparent);
  opacity: .5;
}
.intestazione__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 4.5rem;
}
.marchio {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  flex-shrink: 0;
}
.marchio__sigla {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.5rem;
  font-family: var(--f-titoli);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  color: #FFFFFF;
  background: linear-gradient(165deg, var(--pri), var(--pri-scuro));
  border-radius: 1.2rem 1.2rem .35rem .35rem; /* piccolo arco di porta */
  box-shadow: var(--ombra-pri);
}
.marchio__nome {
  font-family: var(--f-titoli);
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.marchio__nome em { font-style: italic; color: var(--pri-scuro); }

.nav-principale { display: none; }
.nav-principale__lista { display: flex; align-items: center; gap: clamp(.3rem, 1.1vw, 1rem); }
.nav-principale__link {
  display: inline-flex;
  align-items: center;
  padding: .55rem .6rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--mut);
  text-decoration: none;
  border-radius: var(--r-min);
  transition: color var(--t-veloce);
  position: relative;
}
.nav-principale__link::after {
  content: "";
  position: absolute;
  left: .6rem; right: .6rem; bottom: .3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--pri);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-media);
}
.nav-principale__link:hover { color: var(--ink); }
.nav-principale__link:hover::after,
.nav-principale__link.attivo::after,
.nav-principale__link[aria-current="page"]::after { transform: scaleX(1); }
.nav-principale__link.attivo,
.nav-principale__link[aria-current="page"] { color: var(--pri-scuro); font-weight: 600; }

.intestazione__azioni { display: flex; align-items: center; gap: .6rem; }
.apri-menu {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: .32rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: .7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surf);
}
.apri-menu span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--t-veloce), opacity var(--t-veloce);
}
.apri-menu span:nth-child(2) { width: 70%; }
.apri-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(.34rem) rotate(45deg); }
.apri-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.apri-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.34rem) rotate(-45deg); }

.menu-mobile {
  position: fixed;
  top: 0; right: 0;
  z-index: 120;
  width: min(22rem, 88vw);
  height: 100dvh;
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  overflow-y: auto;
  background: var(--surf);
  border-left: 1px solid var(--line);
  box-shadow: var(--ombra-3);
  transform: translateX(102%);
  transition: transform var(--t-media);
}
.menu-mobile.aperto { transform: translateX(0); }
.menu-mobile__testata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.menu-mobile__chiudi {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}
.menu-mobile__lista { display: flex; flex-direction: column; }
.menu-mobile__link {
  display: block;
  padding: .85rem .5rem;
  font-size: 1.06rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color var(--t-veloce), padding-left var(--t-veloce);
}
.menu-mobile__link:hover { color: var(--pri-scuro); padding-left: .95rem; }
.velo {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(29, 42, 36, .42);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.blocco-scroll { overflow: hidden; }

/* 9. BOTTONI ---------------------------------------------------------------
   Forma a pillola, coerente con la morbidezza degli archi. */
.bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.6rem;
  font-family: var(--f-testo);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-pillola);
  transition: transform var(--t-veloce), box-shadow var(--t-veloce),
              background-color var(--t-veloce), color var(--t-veloce), border-color var(--t-veloce);
}
.bottone:hover { transform: translateY(-2px); }
.bottone:active { transform: translateY(0); }
.bottone--primario {
  background: linear-gradient(165deg, var(--pri), var(--pri-scuro));
  color: #FFFFFF;
  box-shadow: var(--ombra-pri);
}
.bottone--primario:hover { background: var(--pri-scuro); box-shadow: 0 14px 30px rgba(60, 122, 99, .3); }
.bottone--secondario {
  background: var(--surf);
  color: var(--ink);
  border-color: var(--linea-forte);
  box-shadow: var(--ombra-1);
}
.bottone--secondario:hover { border-color: var(--pri); color: var(--pri-scuro); }
.bottone--terracotta {
  background: var(--acc-scuro);
  color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(169, 84, 47, .22);
}
.bottone--terracotta:hover { background: #92471F; }
.bottone--fantasma {
  background: transparent;
  color: var(--pri-scuro);
  border-color: rgba(60, 122, 99, .45);
}
.bottone--fantasma:hover { background: var(--pri-chiaro); }
.bottone--piccolo { padding: .6rem 1.1rem; font-size: .92rem; }
.bottone--largo { width: 100%; }
.bottone-testo {
  display: inline-flex;
  align-items: center;
  padding: .4rem 0;
  font-size: .95rem;
  font-weight: 500;
  color: var(--pri-scuro);
  text-decoration: underline;
  text-decoration-color: rgba(60, 122, 99, .45);
  text-underline-offset: .2em;
  border-radius: var(--r-min);
}
.bottone-testo:hover { color: var(--acc-scuro); text-decoration-color: var(--acc); }

/* 10. TESTATE DI SEZIONE --------------------------------------------------- */
.testata-sezione { max-width: 44rem; margin-bottom: var(--sp-5); }
.testata-sezione--centrata { margin-inline: auto; text-align: center; }
.testata-sezione--centrata .occhiello::after {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: linear-gradient(270deg, transparent, var(--pri));
}
.testata-sezione h2 { margin-top: var(--sp-2); }
.testata-sezione p { margin-top: var(--sp-3); font-size: 1.08rem; color: var(--mut); }

/* 11. PANNELLI, ARCHI E SCHEDE --------------------------------------------- */
.pannello {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--ombra-1);
}
.scheda {
  position: relative;
  padding: var(--sp-4);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--ombra-1);
  transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-media);
}
.scheda:hover { transform: translateY(-4px); box-shadow: var(--ombra-2); border-color: var(--linea-forte); }
/* variante ad arco: il lato superiore diventa una volta */
.scheda--arco { border-radius: var(--r-arco); padding-top: var(--sp-5); }
/* variante lino: fondo tessuto, senza ombra */
.scheda--lino {
  background: linear-gradient(180deg, var(--surf-lino), #F2F5F1);
  box-shadow: none;
}
/* cornice ad arco per le immagini: la finestra della stanza */
.arco {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-arco);
  border: 1px solid var(--line);
  background: var(--pri-chiaro);
  box-shadow: var(--ombra-3);
}
.arco img { width: 100%; height: 100%; object-fit: cover; }
/* bande di luce sovrapposte alla fotografia */
.vetrata::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(101deg,
    rgba(255, 255, 255, 0) 0 18%,
    rgba(255, 255, 255, .34) 18% 26%,
    rgba(255, 255, 255, 0) 26% 44%,
    rgba(255, 255, 255, .2) 44% 49%,
    rgba(255, 255, 255, 0) 49% 100%);
  pointer-events: none;
}
.credito-foto {
  margin-top: .6rem;
  font-size: .82rem;
  color: var(--mut);
}

/* 12. HERO E SCADENZARIO ---------------------------------------------------
   Struttura asimmetrica: testo a sinistra, finestra ad arco a destra con il
   pannello delle scadenze che sporge sull'immagine. */
.hero {
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 5.5rem) clamp(3.25rem, 7vw, 6rem);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  top: -14rem; right: -12rem;
  width: 40rem; height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(60, 122, 99, .13), transparent 62%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  left: -10rem; bottom: -18rem;
  width: 34rem; height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 111, 74, .12), transparent 64%);
  pointer-events: none;
}
.hero__griglia {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.75rem);
  align-items: center;
}
.hero__titolo { margin-top: var(--sp-3); }
.hero__titolo em { font-style: italic; color: var(--pri-scuro); }
.hero__sottotitolo {
  margin-top: var(--sp-3);
  max-width: 34rem;
  font-size: clamp(1.06rem, 1rem + .35vw, 1.2rem);
  color: var(--mut);
}
.hero__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.hero__punti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--linea-forte);
}
.hero__punti li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 500;
  color: var(--mut);
}
.hero__punti li::before {
  content: "";
  width: .55rem; height: .55rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--pri);
  flex-shrink: 0;
}
.hero__figura { position: relative; }
.hero__figura .arco { aspect-ratio: 4 / 5; max-height: 32rem; margin-inline: auto; }

/* pannello delle scadenze: elemento visivo firma della home */
.scadenzario {
  width: min(21rem, 100%);
  margin-top: calc(var(--sp-4) * -1);
  margin-inline: auto;
  padding: var(--sp-3) var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--ombra-3);
}
.scadenzario__titolo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding-bottom: .7rem;
  margin-bottom: .35rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--f-titoli);
  font-size: 1.02rem;
  font-weight: 600;
}
.scadenzario__riga {
  display: grid;
  grid-template-columns: 3.6rem 1fr auto;
  align-items: center;
  gap: .7rem;
  padding: .6rem 0;
  border-bottom: 1px dashed var(--line);
}
.scadenzario__riga:last-child { border-bottom: 0; }
.scadenzario__data {
  font-family: var(--f-titoli);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--pri-scuro);
  letter-spacing: -.01em;
}
.scadenzario__voce { font-size: .92rem; line-height: 1.4; color: var(--ink); }
.scadenzario__stato {
  padding: .2rem .6rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: var(--r-pillola);
  background: var(--pri-chiaro);
  color: var(--pri-scuro);
  white-space: nowrap;
}
.scadenzario__stato--attesa { background: var(--acc-chiaro); color: var(--acc-scuro); }

/* elenco con la sagoma della chiave, riutilizzabile ovunque */
.elenco-chiavi { display: grid; gap: .65rem; }
.elenco-chiavi li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.6;
}
.elenco-chiavi li::before {
  content: "";
  position: absolute;
  left: 0; top: .58em;
  width: .62rem; height: .62rem;
  border: 2px solid var(--pri);
  border-radius: 50%;
}
.elenco-chiavi li::after {
  content: "";
  position: absolute;
  left: .55rem; top: calc(.58em + .21rem);
  width: .95rem; height: .42rem;
  background:
    linear-gradient(var(--pri), var(--pri)) 0 0 / 100% 2px no-repeat,
    linear-gradient(var(--pri), var(--pri)) .45rem 2px / 2px .24rem no-repeat,
    linear-gradient(var(--pri), var(--pri)) .78rem 2px / 2px .16rem no-repeat;
}

/* 13. PROBLEMA ------------------------------------------------------------- */
.problema__griglia {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}
.problema__racconto > p + p { margin-top: var(--sp-3); }
.problema__racconto > p:first-of-type {
  font-size: clamp(1.08rem, 1rem + .4vw, 1.22rem);
  color: var(--ink);
}
.problema__racconto p { color: var(--mut); }
.sintomi {
  position: relative;
  padding: var(--sp-4);
  background: var(--acc-chiaro);
  border: 1px solid rgba(201, 111, 74, .28);
  border-radius: var(--r-2);
}
.sintomi::before {
  content: "";
  position: absolute;
  left: 0; top: 1.6rem; bottom: 1.6rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--acc);
}
.sintomi__titolo {
  font-family: var(--f-titoli);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--acc-scuro);
  margin-bottom: var(--sp-3);
}
.sintomi ul { display: grid; gap: .8rem; }
.sintomi li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .98rem;
  color: var(--ink);
}
.sintomi li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .5rem; height: .5rem;
  background: var(--acc);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}

/* 14. SOLUZIONE E PASSI ---------------------------------------------------- */
.soluzione__testo > p + p { margin-top: var(--sp-3); }
.soluzione__testo p { font-size: 1.06rem; color: var(--mut); }
.passi {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  counter-reset: passo;
}
.passo {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-arco);
  box-shadow: var(--ombra-1);
}
.passo__numero {
  position: absolute;
  top: -1.35rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 2.7rem; height: 2.9rem;
  font-family: var(--f-titoli);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  background: linear-gradient(165deg, var(--pri), var(--pri-scuro));
  border-radius: 1.4rem 1.4rem .4rem .4rem;
  box-shadow: var(--ombra-pri);
}
.passo__titolo { text-align: center; margin-bottom: var(--sp-2); }
.passo__testo { color: var(--mut); font-size: .99rem; }

/* 15. FUNZIONALITA' E CHIAVE -----------------------------------------------
   La chiave e' disegnata interamente con gradienti: anello piu' stelo dentato. */
.griglia-funzioni {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr));
}
.scheda-funzione {
  padding: var(--sp-4);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--ombra-1);
  transition: transform var(--t-media), box-shadow var(--t-media), border-color var(--t-media);
}
.scheda-funzione:hover {
  transform: translateY(-4px);
  box-shadow: var(--ombra-2);
  border-color: rgba(60, 122, 99, .35);
}
.chiave {
  position: relative;
  display: block;
  width: 3rem; height: 3rem;
  margin-bottom: var(--sp-3);
  background: var(--pri-chiaro);
  border-radius: 1.5rem 1.5rem .5rem .5rem;
}
.chiave::before {
  content: "";
  position: absolute;
  left: .55rem; top: 50%;
  transform: translateY(-50%);
  width: .8rem; height: .8rem;
  border: .2rem solid var(--pri-scuro);
  border-radius: 50%;
}
.chiave::after {
  content: "";
  position: absolute;
  left: 1.28rem; top: calc(50% - .1rem);
  width: 1.15rem; height: .56rem;
  background:
    linear-gradient(var(--pri-scuro), var(--pri-scuro)) 0 0 / 100% .2rem no-repeat,
    linear-gradient(var(--pri-scuro), var(--pri-scuro)) .58rem .2rem / .2rem .34rem no-repeat,
    linear-gradient(var(--pri-scuro), var(--pri-scuro)) .95rem .2rem / .2rem .22rem no-repeat;
}
.scheda-funzione:hover .chiave { background: #DCEAE2; }
.scheda-funzione__titolo { margin-bottom: .5rem; }
.scheda-funzione__testo { font-size: .97rem; color: var(--mut); }

/* 16. VANTAGGI ------------------------------------------------------------- */
.griglia-vantaggi {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}
.vantaggio {
  position: relative;
  padding: var(--sp-4);
  padding-left: calc(var(--sp-4) + .9rem);
  background: var(--surf-lino);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.vantaggio::before {
  content: "";
  position: absolute;
  left: var(--sp-4); top: var(--sp-4); bottom: var(--sp-4);
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--pri), rgba(201, 111, 74, .6));
}
.vantaggio__titolo { margin-bottom: .5rem; }
.vantaggio__testo { color: var(--mut); font-size: .97rem; }

/* 17. TESTIMONIANZE -------------------------------------------------------- */
.testimonianze {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}
.testimonianza {
  position: relative;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 2.4rem 2.4rem var(--r-2) var(--r-2);
  box-shadow: var(--ombra-1);
}
.testimonianza::before {
  content: "\201C";
  position: absolute;
  top: .3rem; left: var(--sp-4);
  font-family: var(--f-titoli);
  font-size: 4rem;
  line-height: 1;
  color: rgba(60, 122, 99, .22);
}
.testimonianza__testo {
  font-family: var(--f-titoli);
  font-size: 1.04rem;
  line-height: 1.6;
  font-style: italic;
  color: var(--ink);
}
.testimonianza__firma {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.testimonianza__nome { font-weight: 600; }
.testimonianza__ruolo { font-size: .89rem; color: var(--mut); }
.nota-scenari {
  margin-top: var(--sp-4);
  padding: .85rem 1.15rem;
  font-size: .9rem;
  color: var(--mut);
  text-align: center;
  border: 1px dashed var(--linea-forte);
  border-radius: var(--r-pillola);
  background: rgba(255, 255, 255, .6);
}

/* 18. PREZZI --------------------------------------------------------------- */
.piani {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: stretch;
}
.piano {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--ombra-1);
}
.piano--evidenza {
  position: relative;
  padding-top: var(--sp-5);
  border-color: var(--pri);
  border-width: 2px;
  border-radius: var(--r-arco);
  box-shadow: var(--ombra-3);
  background: linear-gradient(180deg, var(--pri-chiaro), var(--surf) 30%);
}
.piano__etichetta {
  position: absolute;
  top: 1.1rem; left: 50%;
  transform: translateX(-50%);
  padding: .28rem .95rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--pri-scuro);
  border-radius: var(--r-pillola);
  white-space: nowrap;
}
.piano__nome {
  font-family: var(--f-titoli);
  font-size: 1.35rem;
  font-weight: 600;
}
.piano__prezzo {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  margin: .5rem 0 .3rem;
  font-family: var(--f-titoli);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--pri-scuro);
  letter-spacing: -.02em;
}
.piano__prezzo span {
  font-family: var(--f-testo);
  font-size: .92rem;
  font-weight: 500;
  color: var(--mut);
  letter-spacing: 0;
}
.piano__descrizione {
  font-size: .95rem;
  color: var(--mut);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-3);
  border-bottom: 1px dashed var(--line);
}
.piano__elenco { display: grid; gap: .6rem; margin-bottom: var(--sp-4); font-size: .96rem; }
.piano__elenco li { position: relative; padding-left: 1.6rem; }
.piano__elenco li::before {
  content: "";
  position: absolute;
  left: .1rem; top: .48em;
  width: .55rem; height: .3rem;
  border-left: 2px solid var(--pri);
  border-bottom: 2px solid var(--pri);
  transform: rotate(-45deg);
}
.piano .bottone { margin-top: auto; }
.nota-prezzi {
  max-width: 44rem;
  margin: var(--sp-4) auto 0;
  text-align: center;
  font-size: .95rem;
  color: var(--mut);
}

/* 19. FAQ ------------------------------------------------------------------ */
.faq { max-width: 48rem; margin-inline: auto; display: grid; gap: .7rem; }
.faq__voce {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
  transition: border-color var(--t-veloce), box-shadow var(--t-veloce);
}
.faq__voce.aperta { border-color: var(--pri); box-shadow: var(--ombra-1); }
.faq__domanda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  width: 100%;
  padding: 1.05rem var(--sp-3);
  font-family: var(--f-titoli);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  color: var(--ink);
}
.faq__domanda:hover { color: var(--pri-scuro); }
.faq__icona {
  position: relative;
  flex-shrink: 0;
  width: 1.7rem; height: 1.7rem;
  border: 1px solid var(--linea-forte);
  border-radius: 50%;
  transition: background-color var(--t-veloce), border-color var(--t-veloce), transform var(--t-media);
}
.faq__icona::before, .faq__icona::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .7rem; height: 2px;
  border-radius: 2px;
  background: var(--pri-scuro);
  transform: translate(-50%, -50%);
  transition: opacity var(--t-veloce);
}
.faq__icona::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__voce.aperta .faq__icona { background: var(--pri-chiaro); border-color: var(--pri); transform: rotate(180deg); }
.faq__voce.aperta .faq__icona::after { opacity: 0; }
.faq__risposta {
  padding: 0 var(--sp-3) 1.15rem;
  color: var(--mut);
  font-size: .99rem;
}
.faq__risposta p + p { margin-top: var(--sp-2); }

/* 20. MODULO DI CONTATTO --------------------------------------------------- */
.contatto__griglia { display: grid; gap: var(--sp-5); align-items: start; }
.contatto__testo p { color: var(--mut); }
.contatto__testo p + p { margin-top: var(--sp-3); }
.modulo {
  padding: var(--sp-4);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--ombra-2);
}
.modulo__intro { font-size: .97rem; color: var(--mut); margin-bottom: var(--sp-3); }
.campo { display: grid; gap: .38rem; margin-bottom: var(--sp-3); }
.campo__etichetta, .campo label { font-size: .92rem; font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: .78rem .95rem;
  font-size: 1rem;
  background: var(--surf-lino);
  border: 1px solid var(--linea-forte);
  border-radius: var(--r-1);
  transition: border-color var(--t-veloce), box-shadow var(--t-veloce), background-color var(--t-veloce);
}
.campo textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--pri); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  background: var(--surf);
  border-color: var(--pri);
  box-shadow: 0 0 0 3px var(--pri-velo);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 3px solid var(--acc-scuro);
  outline-offset: 2px;
}
.campo-doppio { display: grid; gap: 0 var(--sp-3); }
.campo--scelta { position: relative; }
.campo--scelta select { appearance: none; padding-right: 2.6rem; }
.campo--scelta::after {
  content: "";
  position: absolute;
  right: 1.1rem; bottom: 1.25rem;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--pri-scuro);
  border-bottom: 2px solid var(--pri-scuro);
  transform: rotate(45deg);
  pointer-events: none;
}
.campo__aiuto { font-size: .85rem; color: var(--mut); }
.modulo__nota { margin-top: var(--sp-3); font-size: .87rem; color: var(--mut); }
.modulo__alternativa {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
  font-size: .93rem;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 21. SCHEDE ARTICOLO ------------------------------------------------------ */
.griglia-articoli {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.scheda-articolo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: 2.6rem 2.6rem var(--r-2) var(--r-2);
  box-shadow: var(--ombra-1);
  transition: transform var(--t-media), box-shadow var(--t-media);
}
.scheda-articolo:hover { transform: translateY(-5px); box-shadow: var(--ombra-2); }
.scheda-articolo__figura {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pri-chiaro);
}
.scheda-articolo__figura img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22, .61, .36, 1);
}
.scheda-articolo:hover .scheda-articolo__figura img { transform: scale(1.05); }
.scheda-articolo__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.scheda-articolo__data {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pri-scuro);
}
.scheda-articolo__titolo { margin: .45rem 0 .6rem; font-size: 1.18rem; line-height: 1.3; }
.scheda-articolo__titolo a { text-decoration: none; }
.scheda-articolo__titolo a:hover { color: var(--pri-scuro); }
.scheda-articolo__testo { font-size: .95rem; color: var(--mut); }
.scheda-articolo__link {
  margin-top: auto;
  padding-top: var(--sp-3);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--pri-scuro);
  text-decoration: none;
}
.scheda-articolo__link::after { content: "\2192"; transition: transform var(--t-veloce); }
.scheda-articolo__link:hover::after { transform: translateX(.25rem); }

.briciole { font-size: .87rem; color: var(--mut); margin-bottom: var(--sp-3); }
.briciole ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
.briciole li + li::before { content: "/"; margin-right: .4rem; color: var(--linea-forte); }
.meta-articolo {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  margin-top: var(--sp-3);
  font-size: .9rem;
  color: var(--mut);
}
.figura-evidenza { margin: var(--sp-4) 0 var(--sp-5); }
.figura-evidenza img {
  width: 100%;
  border-radius: 3.5rem 3.5rem var(--r-2) var(--r-2);
  border: 1px solid var(--line);
  box-shadow: var(--ombra-2);
}

/* 22. CORPO REDAZIONALE ----------------------------------------------------
   Misura di lettura fra 62 e 72 caratteri, ritmo ampio, serif per i titoli. */
.prosa { max-width: 68ch; font-size: 1.075rem; line-height: 1.78; }
.prosa > * + * { margin-top: var(--sp-3); }
.prosa h2 {
  margin-top: var(--sp-6);
  padding-top: var(--sp-2);
  font-size: clamp(1.55rem, 1.3rem + 1vw, 2rem);
  position: relative;
}
.prosa h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 2.6rem; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--pri), var(--acc));
}
.prosa h3 { margin-top: var(--sp-5); color: var(--pri-scuro); }
.prosa p { color: var(--ink); }
.prosa ul, .prosa ol { padding-left: 1.35rem; display: grid; gap: .55rem; }
.prosa ul { list-style: none; padding-left: 0; }
.prosa ul li { position: relative; padding-left: 1.6rem; }
.prosa ul li::before {
  content: "";
  position: absolute;
  left: .15rem; top: .68em;
  width: .5rem; height: .5rem;
  background: var(--pri);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.prosa ol { list-style: decimal; }
.prosa ol li::marker { color: var(--pri-scuro); font-weight: 600; }
.prosa blockquote {
  margin-block: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--pri-chiaro);
  border-left: 3px solid var(--pri);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-family: var(--f-titoli);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ink);
}
.prosa blockquote p + p { margin-top: var(--sp-2); }
.prosa figure { margin-block: var(--sp-4); }
.prosa figure img { border-radius: var(--r-2); border: 1px solid var(--line); }
.prosa figcaption { margin-top: .55rem; font-size: .87rem; color: var(--mut); }
.prosa code {
  padding: .12rem .38rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .9em;
  background: var(--pri-chiaro);
  border: 1px solid rgba(60, 122, 99, .2);
  border-radius: var(--r-min);
}
.prosa pre {
  padding: var(--sp-3);
  overflow-x: auto;
  background: var(--ink-notte);
  color: #E8EEE9;
  border-radius: var(--r-1);
}
.prosa pre code { background: none; border: 0; color: inherit; }
.prosa hr { margin-block: var(--sp-5); border: 0; border-top: 1px dashed var(--linea-forte); }
.prosa a { font-weight: 500; }

.tabella-scroll { overflow-x: auto; margin-block: var(--sp-4); border-radius: var(--r-1); }
.prosa table, .tabella {
  font-size: .97rem;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
}
.prosa th, .tabella th {
  padding: .8rem .95rem;
  text-align: left;
  font-family: var(--f-testo);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pri-scuro);
  background: var(--pri-chiaro);
  border-bottom: 1px solid var(--line);
}
.prosa td, .tabella td {
  padding: .8rem .95rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prosa tbody tr:last-child td, .tabella tbody tr:last-child td { border-bottom: 0; }
.prosa tbody tr:nth-child(even), .tabella tbody tr:nth-child(even) { background: var(--surf-lino); }
.prosa caption, .tabella caption {
  caption-side: bottom;
  padding-top: .6rem;
  font-size: .87rem;
  color: var(--mut);
  text-align: left;
}

.chapo {
  font-family: var(--f-titoli);
  font-size: clamp(1.14rem, 1.05rem + .45vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--acc);
}
.sommario {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surf-lino);
  border: 1px dashed var(--linea-forte);
  border-radius: var(--r-1);
}
.sommario__titolo {
  font-family: var(--f-titoli);
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: .6rem;
}
.sommario ol { display: grid; gap: .35rem; padding-left: 1.2rem; font-size: .96rem; }
.riquadro {
  padding: var(--sp-4);
  background: var(--surf);
  border: 1px solid var(--line);
  border-top: 3px solid var(--pri);
  border-radius: var(--r-min) var(--r-min) var(--r-2) var(--r-2);
  box-shadow: var(--ombra-1);
}
.riquadro__titolo {
  font-family: var(--f-titoli);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: var(--sp-2);
}

/* 23. RIQUADRO AUTORE ------------------------------------------------------ */
.autore-box {
  display: grid;
  gap: var(--sp-3);
  align-items: start;
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: linear-gradient(180deg, var(--surf-lino), #F1F5F1);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
.autore-box__foto {
  width: 6rem; height: 7rem;
  object-fit: cover;
  border-radius: 3rem 3rem .6rem .6rem; /* ritratto ad arco */
  border: 1px solid var(--line);
  box-shadow: var(--ombra-1);
}
.autore-box__nome { font-family: var(--f-titoli); font-size: 1.2rem; font-weight: 600; }
.autore-box__bio { margin-top: .4rem; font-size: .97rem; color: var(--mut); }
.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-3); }
.social__link {
  display: inline-flex;
  align-items: center;
  padding: .38rem .85rem;
  font-size: .87rem;
  font-weight: 500;
  color: var(--pri-scuro);
  text-decoration: none;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-pillola);
  transition: border-color var(--t-veloce), color var(--t-veloce);
}
.social__link:hover { border-color: var(--pri); color: var(--acc-scuro); }

/* 24. DA LEGGERE ANCHE ----------------------------------------------------- */
.da-leggere {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.da-leggere__titolo {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.4rem;
  margin-bottom: var(--sp-4);
}
.da-leggere__titolo::before {
  content: "";
  width: 1.4rem; height: 1.5rem;
  background: var(--pri-chiaro);
  border: 1px solid var(--pri);
  border-radius: .7rem .7rem .2rem .2rem;
  flex-shrink: 0;
}

/* 25. PIEDE ----------------------------------------------------------------
   Sera nella stanza: fondo verde profondo, filetti di luce, cinque colonne. */
.pie {
  position: relative;
  margin-top: var(--sezione-y);
  padding-block: var(--sp-6) var(--sp-4);
  background: var(--ink-notte);
  color: #D9E3DC;
}
.pie::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 2.3rem;
  background-image: radial-gradient(circle at 50% 0,
    var(--ink-notte) 0 1.05rem, transparent 1.06rem);
  background-size: 2.5rem 2.3rem;
  background-repeat: repeat-x;
  transform: translateY(-2.29rem);
  pointer-events: none;
}
.pie a { color: #D9E3DC; }
.pie__griglia {
  display: grid;
  gap: var(--sp-5) var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  padding-bottom: var(--sp-5);
}
.pie__colonna { min-width: 0; }
.pie .marchio__nome { color: #FFFFFF; }
.pie .marchio__nome em { color: #9FC8B4; }
.pie__claim { margin-top: var(--sp-3); font-size: .95rem; color: #A8BCAF; max-width: 22rem; }
.pie__contatto { margin-top: var(--sp-2); font-size: .95rem; color: #A8BCAF; }
.pie__contatto a { color: #9FC8B4; text-decoration: underline; text-underline-offset: .18em; }
.pie__titolo {
  font-family: var(--f-titoli);
  font-size: 1.02rem;
  font-weight: 600;
  color: #FFFFFF;
  padding-bottom: .6rem;
  margin-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(217, 227, 220, .18);
}
.pie__lista { display: grid; gap: .55rem; }
.pie__link {
  font-size: .94rem;
  color: #B7C9BD;
  text-decoration: none;
  transition: color var(--t-veloce), padding-left var(--t-veloce);
}
.pie__link:hover { color: #FFFFFF; padding-left: .3rem; }
.pie .bottone-testo { color: #9FC8B4; text-decoration-color: rgba(159, 200, 180, .5); }
.pie .bottone-testo:hover { color: #FFFFFF; }

.eco-lista { display: grid; gap: .55rem; }
.eco-link {
  display: block;
  padding: .6rem .8rem;
  text-decoration: none;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(217, 227, 220, .14);
  border-radius: .9rem .9rem .35rem .35rem;
  transition: background-color var(--t-veloce), border-color var(--t-veloce), transform var(--t-veloce);
}
.eco-link:hover {
  background: rgba(159, 200, 180, .12);
  border-color: rgba(159, 200, 180, .45);
  transform: translateX(2px);
}
.eco-link strong { display: block; font-size: .94rem; font-weight: 600; color: #FFFFFF; }
.eco-link span { display: block; font-size: .85rem; color: #A8BCAF; line-height: 1.45; }

.pie__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(217, 227, 220, .18);
  font-size: .87rem;
  color: #A8BCAF;
}
.pie__legale { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.pie__legale a { text-decoration: underline; text-underline-offset: .18em; color: #B7C9BD; }
.pie__legale a:hover { color: #FFFFFF; }

/* 26. BANNER COOKIE -------------------------------------------------------- */
.cookie {
  position: fixed;
  z-index: 150;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(40rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: var(--sp-4);
  background: var(--surf);
  border: 1px solid var(--line);
  border-top: 3px solid var(--pri);
  border-radius: var(--r-2);
  box-shadow: var(--ombra-3);
}
.cookie__titolo { font-size: 1.15rem; margin-bottom: .5rem; }
.cookie__testo { font-size: .93rem; color: var(--mut); }
.cookie__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
/* Accetta e Rifiuta hanno la stessa dimensione e lo stesso peso visivo */
.cookie__azioni .bottone { flex: 1 1 9rem; }
.cookie__azioni .bottone-testo { flex: 0 0 auto; margin-left: auto; }
.cookie__dettaglio {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--line);
  font-size: .9rem;
  color: var(--mut);
}
.cookie__dettaglio table { margin-bottom: var(--sp-2); font-size: .88rem; }
.cookie__dettaglio th, .cookie__dettaglio td {
  padding: .5rem .6rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.cookie__dettaglio th { color: var(--pri-scuro); font-weight: 700; }

/* 27. PAGINE DI SERVIZIO --------------------------------------------------- */
.intestazione-pagina {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4rem) var(--sp-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sezione-y);
}
.intestazione-pagina p { margin-top: var(--sp-3); color: var(--mut); max-width: 42rem; }
.mappa-gruppo { margin-bottom: var(--sp-5); }
.mappa-gruppo h2 { font-size: 1.3rem; margin-bottom: var(--sp-3); }
.mappa-gruppo ul { display: grid; gap: .5rem; }
.mappa-gruppo li { position: relative; padding-left: 1.4rem; }
.mappa-gruppo li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: .5rem; height: .5rem;
  background: var(--pri);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
}
.conferma {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
}
.conferma__segno {
  width: 4.5rem; height: 5rem;
  margin: 0 auto var(--sp-4);
  display: grid;
  place-items: center;
  background: var(--pri-chiaro);
  border: 2px solid var(--pri);
  border-radius: 2.25rem 2.25rem .6rem .6rem;
}
.conferma__segno::before {
  content: "";
  width: 1.5rem; height: .8rem;
  border-left: 3px solid var(--pri-scuro);
  border-bottom: 3px solid var(--pri-scuro);
  transform: rotate(-45deg) translate(.1rem, -.15rem);
}
.conferma p { margin-top: var(--sp-3); color: var(--mut); }
.conferma .bottone { margin-top: var(--sp-4); }

/* 28. RESPONSIVE -----------------------------------------------------------
   Da 320 px in su non esiste mai scorrimento orizzontale: tutte le griglie
   partono impilate e si aprono ai punti di rottura indicati. */
@media (min-width: 34rem) {
  .campo-doppio { grid-template-columns: 1fr 1fr; }
  .autore-box { grid-template-columns: auto 1fr; gap: var(--sp-4); }
  .passi { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 48rem) {
  .problema__griglia { grid-template-columns: 1.35fr 1fr; }
  .contatto__griglia { grid-template-columns: 1fr 1.15fr; }
  .hero__figura .arco { max-height: 34rem; }
  .figura-evidenza img { border-radius: 5rem 5rem var(--r-2) var(--r-2); }
}
@media (min-width: 62rem) {
  .passi { grid-template-columns: repeat(3, 1fr); }
  .hero__griglia { grid-template-columns: 1.05fr .95fr; }
  .scadenzario {
    position: absolute;
    right: -1.5rem;
    bottom: 1.5rem;
    margin: 0;
  }
  .hero__figura { padding-bottom: 2rem; }
  .piano--evidenza { transform: translateY(-1rem); }
}
@media (min-width: 68rem) {
  .nav-principale { display: block; }
  .apri-menu { display: none; }
}
@media (max-width: 47.99rem) {
  .pie__barra { flex-direction: column; align-items: flex-start; }
  .cookie { left: .5rem; right: .5rem; bottom: .5rem; transform: none; width: auto; }
  .cookie__azioni .bottone { flex: 1 1 100%; }
  .cookie__azioni .bottone-testo { margin-left: 0; }
}

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

/* Il sito nasce come interno luminoso: il tema scuro di sistema non viene
   imposto perche' snaturerebbe la direzione artistica. Si limita quindi il
   contrasto delle sole superfici traslucide, che su schermi scuri
   risulterebbero troppo brillanti. */


/* 30. STAMPA --------------------------------------------------------------- */
@media print {
  .intestazione, .menu-mobile, .cookie, .pie, .salta-al-contenuto, .hero__azioni { display: none !important; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .prosa { max-width: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444444; }
}

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