/* =========================================================
   FERMA TEMPO — Foglio di stile principale
   Fotografie di Nemi e Lele
   ---------------------------------------------------------
   Direzione visiva: RETRO MODERNO
   Palette Pantone tenue (crema, senape, terracotta bruciata,
   avocado, teal polveroso, espresso caldo).
   Tipografia: Fraunces (serif retro, morbido) + Work Sans.
   Forme: archi, pillole, angoli morbidi, grana leggera.
   ---------------------------------------------------------
   Indice
   01. Token di design (colori, tipografia, spazi)
   02. Reset e basi
   03. Tipografia
   04. Layout e utilità
   05. Header e navigazione
   06. Hero
   07. Bottoni e link
   08. Sezioni editoriali
   09. Griglie fotografiche
   10. Portfolio e filtri
   11. Servizi
   12. Approccio (processo)
   13. Testimonianze
   14. Diario / Storie
   15. Contatti e form
   16. Lightbox
   17. Footer
   18. Cookie banner
   19. Animazioni e accessibilità
   20. Pagine speciali (404, legali)
   26. Le giornate (disponibilita.html)
   27. Scatta al momento giusto (scatta.html)
   ========================================================= */

/* ---------- 01. TOKEN DI DESIGN ---------- */
:root {
  /* --- Colori: carta e fondi --- */
  --bianco-caldo: #FBF5E9;
  --crema: #F4EAD6;
  --sabbia: #E8D8BC;
  --sabbia-scura: #D5BF9B;

  /* --- Colori: legni e terre --- */
  --marrone-tenue: #7E6244;
  --marrone-scuro: #5A452F;
  --antracite: #2F2419;

  /* --- Accenti Pantone tenui --- */
  --senape: #C08F3C;
  --senape-chiara: #E3C88A;
  --terracotta: #A95A3C;
  --terracotta-scura: #8E4830;
  --terracotta-chiara: #C8815F;
  --salvia: #8F9A76;
  --salvia-chiara: #DFE4D0;
  --teal: #5F847F;
  --teal-chiaro: #CFDCD8;
  --rosa-polvere: #CE9784;

  /* --- Testo --- */
  --testo: #413427;
  --testo-soft: #6B5B47;
  --bianco: #FFFFFF;
  --chiaro: #FFFDF9;

  /* --- Superfici --- */
  --sfondo: var(--bianco-caldo);
  --sfondo-alt: var(--crema);
  --bordo: rgba(90, 69, 47, 0.2);
  --bordo-soft: rgba(90, 69, 47, 0.12);

  /* --- Tipografia --- */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Space Mono", "IBM Plex Mono", "Courier New", ui-monospace, monospace;

  /* --- Fosfori: il verde e l'ambra dei vecchi monitor --- */
  --ambra: #E3C88A;
  --fosforo: #9FB58C;

  --fs-xs: 0.76rem;
  --fs-sm: 0.885rem;
  --fs-base: 1.0rem;
  --fs-md: 1.075rem;
  --fs-lg: clamp(1.1rem, 0.9rem + 0.7vw, 1.32rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 1vw, 1.7rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 2.1vw, 2.8rem);
  --fs-h1: clamp(2.2rem, 1.4rem + 3.6vw, 4.1rem);
  --fs-display: clamp(2.6rem, 1.5rem + 5vw, 5.4rem);

  /* --- Spazi --- */
  --sp-1: 0.5rem;
  --sp-2: 0.875rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;
  --sezione: clamp(4rem, 2.5rem + 6vw, 8.5rem);

  /* --- Contenitori --- */
  --max: 1280px;
  --max-stretto: 760px;
  --max-medio: 1020px;
  --gutter: clamp(1.15rem, 0.6rem + 2.5vw, 3.5rem);

  /* --- Forme retro --- */
  --raggio-s: 999px;          /* pillole: bottoni, tag, filtri */
  --raggio-m: 16px;           /* fotografie e schede */
  --raggio-l: 26px;           /* blocchi grandi */
  --arco: 46% 46% 14px 14px / 30% 30% 14px 14px;  /* archi anni '70 */
  --ombra-morbida: 0 16px 40px -26px rgba(64, 44, 24, 0.55);
  --ombra-alta: 0 28px 64px -30px rgba(64, 44, 24, 0.6);

  /* --- Movimento --- */
  --t-veloce: 180ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-medio: 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-lento: 900ms cubic-bezier(0.22, 0.61, 0.36, 1);

  /* l'altezza della barra sta nella sezione 05 (--barra-h, --avviso-h, --header-h) */
}

/* ---------- 02. RESET E BASI ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background-color: var(--sfondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: var(--fs-base);
  font-weight: 350;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* grana leggera, come una stampa d'epoca */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

body.is-locked { overflow: hidden; }

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; background-color: var(--sabbia); }

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

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

hr {
  border: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--sabbia-scura) 0 10px, transparent 10px 18px);
  margin: var(--sp-5) 0;
}

::selection { background: var(--senape-chiara); color: var(--antracite); }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 03. TIPOGRAFIA ---------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 450;
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 120;
  color: var(--antracite);
  line-height: 1.1;
  letter-spacing: -0.014em;
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 {
  font-size: 1.05rem;
  font-family: var(--sans);
  font-variation-settings: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
}

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

/* microetichette: maiuscoletto largo, molto anni '70 */
.occhiello {
  font-family: var(--sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  margin: 0 0 var(--sp-3);
  display: block;
}

/* pallino + filetto: piccolo sole retro */
.occhiello--linea {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.occhiello--linea::before {
  content: "";
  width: 30px;
  height: 7px;
  border-radius: 999px;
  background: var(--senape);
  box-shadow: -11px 0 0 -2px var(--terracotta-chiara);
  margin-left: 9px;
  flex: none;
}

.guida {
  font-size: var(--fs-lg);
  line-height: 1.62;
  color: var(--testo-soft);
  max-width: 58ch;
}

.testo-lungo p { max-width: 68ch; }

.citazione {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
  font-size: clamp(1.45rem, 1.05rem + 1.7vw, 2.35rem);
  line-height: 1.3;
  color: var(--antracite);
  font-style: italic;
  margin: 0;
  text-wrap: balance;
}

.citazione--blocco {
  border-left: 4px solid var(--senape);
  border-radius: 0 var(--raggio-m) var(--raggio-m) 0;
  padding-left: clamp(1.15rem, 3vw, 2.25rem);
}

.firma {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  margin-top: var(--sp-3);
}

.link-testo {
  border-bottom: 2px solid var(--senape-chiara);
  padding-bottom: 1px;
  transition: border-color var(--t-veloce), color var(--t-veloce);
}
.link-testo:hover { border-color: var(--terracotta); color: var(--terracotta-scura); }

/* ---------- 04. LAYOUT E UTILITÀ ---------- */
.contenitore {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenitore--medio { max-width: var(--max-medio); }
.contenitore--stretto { max-width: var(--max-stretto); }
.contenitore--largo { max-width: 1520px; }

.sezione { padding-block: var(--sezione); }
.sezione--compatta { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.sezione--crema { background: var(--sfondo-alt); }
.sezione--sabbia { background: linear-gradient(180deg, var(--crema) 0%, var(--sabbia) 100%); }
.sezione--salvia { background: var(--salvia-chiara); }

.intestazione-sezione { margin-bottom: clamp(2.2rem, 1.5rem + 3vw, 4rem); }
.intestazione-sezione--centro { text-align: center; }
.intestazione-sezione--centro .guida { margin-inline: auto; }
.intestazione-sezione--centro .occhiello--linea::after {
  content: "";
  width: 30px;
  height: 7px;
  border-radius: 999px;
  background: var(--senape);
  box-shadow: 11px 0 0 -2px var(--terracotta-chiara);
  margin-right: 9px;
  flex: none;
}

.riga-titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
}
.riga-titolo h2 { margin-bottom: 0; }

.griglia { display: grid; gap: clamp(1.25rem, 0.8rem + 1.8vw, 2.5rem); }
.griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- UTILITÀ ----------
   Poche classi per le cose che si ripetono in tutte le pagine.
   Servono a togliere gli stili scritti dentro l'HTML, che sono
   il modo più rapido per far scappare di mano un progetto
   grafico: se una misura cambia, cambia in un posto solo. */
/* Le classi di spaziatura sono scritte due volte di seguito
   (.sp-t-2.sp-t-2) apposta: così pesano più di una regola di
   componente e vincono anche se il componente è definito più
   in basso nel file. È il posto dello stile scritto in linea
   che c'era prima, e si comporta allo stesso modo. */
.sp-t-0.sp-t-0 { margin-top: 0.5rem; }
.sp-t-1.sp-t-1 { margin-top: 0.75rem; }
.sp-t-2.sp-t-2 { margin-top: 1rem; }
.sp-t-3.sp-t-3 { margin-top: 1.25rem; }
.sp-t-4.sp-t-4 { margin-top: 1.5rem; }
.sp-t-5.sp-t-5 { margin-top: 2rem; }
.sp-t-6.sp-t-6 { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.sp-t-7.sp-t-7 { margin-top: 2.5rem; }
.sp-t-8.sp-t-8 { margin-top: 3rem; }
.sp-b-1.sp-b-1 { margin-bottom: 0.25rem; }
.sp-b-2.sp-b-2 { margin-bottom: 0.5rem; }
.sp-b-3.sp-b-3 { margin-bottom: 1.25rem; }
.sp-b-5.sp-b-5 { margin-bottom: 2rem; }

/* Stesso motivo del blocco qui sopra: doppio nome, così una
   regola di componente scritta più in basso non le annulla. */
.testo-piccolo.testo-piccolo { font-size: var(--fs-sm); color: var(--testo-soft); }
.titolo-piccolo.titolo-piccolo { font-size: 1.15rem; }
.titolo-medio.titolo-medio { font-size: 1.2rem; }
.titolo-grande.titolo-grande { font-size: 1.25rem; }
.titolo-sezione.titolo-sezione { font-size: var(--fs-h3); }
.titolo-mini.titolo-mini {
  font-size: 1.1rem;
  font-family: var(--sans);
  margin-bottom: 0.35rem;
}
.nota-mini.nota-mini {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-xs);
  color: var(--testo-soft);
}
.etichetta-nota.etichetta-nota {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-sm);
  color: var(--testo-soft);
}
.guida--normale.guida--normale { font-size: var(--fs-base); }
.blocco.blocco { display: block; }
.centro.centro { text-align: center; }

/* Gruppo di pulsanti allineato al testo che lo precede. */
.azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.azioni--centro { justify-content: center; }
.freccia--centro { justify-content: center; }

.solo-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.salta-al-contenuto {
  position: absolute;
  left: 50%;
  top: -80px;
  transform: translateX(-50%);
  background: var(--antracite);
  color: var(--chiaro);
  padding: 0.75rem 1.4rem;
  border-radius: var(--raggio-s);
  z-index: 200;
  transition: top var(--t-veloce);
  font-size: var(--fs-sm);
}
.salta-al-contenuto:focus { top: 12px; }

/* ---------- 05. HEADER E NAVIGAZIONE ----------
   La barra è un unico blocco fisso composto da due righe:
   1) la striscia di servizio (stato dell'agenda, zona, contatti);
   2) la barra vera, con marchio, navigazione e azioni.
   Scorrendo verso il basso si ritrae per intero, scorrendo verso
   l'alto ricompare compatta. In fondo alla barra corre il filo
   dell'avanzamento di lettura.                                  */

:root {
  --barra-h: 82px;            /* la riga principale */
  --avviso-h: 38px;           /* la striscia di servizio */
  --header-h: 120px;          /* il totale: lo ricalcola il JS */
  --superficie: var(--chiaro);          /* fondo dei pannelli */
  --superficie-alt: var(--crema);       /* fondo delle voci attive */
  --vetro: rgba(251, 245, 233, 0.82);   /* la barra in stato solido */
  --inchiostro-barra: var(--antracite);
}

/* ---------- 05.1 Il guscio ---------- */
.sito-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  border-bottom: 1px solid transparent;
  transition:
    transform var(--t-medio),
    background-color var(--t-medio),
    box-shadow var(--t-medio),
    border-color var(--t-medio);
}

/* si ritrae scorrendo giù, riappare scorrendo su */
.sito-header[data-stato="giu"] { transform: translateY(-104%); }
.sito-header[data-stato="su"],
.sito-header[data-stato="alto"] { transform: none; }
/* con un pannello aperto la barra non si nasconde mai */
.sito-header[data-blocca="true"] { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .sito-header { transition: background-color var(--t-medio), border-color var(--t-medio); }
  .sito-header[data-stato="giu"] { transform: none; }
}

.sito-header__inner {
  min-height: var(--barra-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.6rem, 0.1rem + 1.2vw, 1.6rem);
}

/* ---------- 05.2 La striscia di servizio ---------- */
.barra-servizio {
  border-bottom: 1px solid var(--bordo-soft);
  background: var(--antracite);
  color: rgba(255, 253, 249, 0.82);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  overflow: hidden;
  max-height: var(--avviso-h);
  transition: max-height var(--t-medio), opacity var(--t-veloce);
}
.barra-servizio[hidden] { display: none; }
/* scorrendo, la striscia si richiude e lascia solo la barra */
.sito-header[data-stato="su"] .barra-servizio,
.sito-header[data-compatta="true"] .barra-servizio { max-height: 0; opacity: 0; }

.barra-servizio__inner {
  min-height: var(--avviso-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.barra-servizio__stato {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0;
}
.barra-servizio__stato strong {
  font-weight: 600;
  color: var(--senape-chiara);
  letter-spacing: 0.06em;
}
.barra-servizio__sep { opacity: 0.45; }

/* il pallino che pulsa: verde se l'agenda è aperta, ambra se è
   quasi piena, spento se è chiusa. Lo decide content.js. */
.stato-pallino {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--fosforo);
  box-shadow: 0 0 0 0 rgba(159, 181, 140, 0.7);
  animation: ft-pulsa 2.6s ease-out infinite;
  flex: none;
}
[data-agenda="quasi"] .stato-pallino { background: var(--senape); box-shadow: 0 0 0 0 rgba(192, 143, 60, 0.7); }
[data-agenda="chiusa"] .stato-pallino { background: var(--terracotta-chiara); animation: none; }
@keyframes ft-pulsa {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 7px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .stato-pallino { animation: none; } }

.barra-servizio__canali {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
}
.barra-servizio__link {
  color: rgba(255, 253, 249, 0.82);
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 253, 249, 0.3);
  padding-bottom: 1px;
  transition: color var(--t-veloce), border-color var(--t-veloce);
}
.barra-servizio__link:hover { color: var(--senape-chiara); border-color: var(--senape-chiara); }
.barra-servizio__chiudi {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border: 0;
  background: transparent;
  color: rgba(255, 253, 249, 0.6);
  cursor: pointer;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
  transition: color var(--t-veloce), background-color var(--t-veloce);
}
.barra-servizio__chiudi:hover { color: var(--chiaro); background: rgba(255, 253, 249, 0.14); }

/* ---------- 05.3 Il marchio ---------- */
.marchio {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  color: var(--inchiostro-barra);
  flex: none;
  transition: color var(--t-medio);
}
.marchio__nome {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 90, "WONK" 1, "opsz" 144;
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  transition: font-size var(--t-medio);
}
.marchio__sotto {
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-top: 7px;
  opacity: 0.7;
}
/* in stato compatto il logotipo si stringe di un soffio */
.sito-header[data-compatta="true"] .marchio__nome { font-size: 1.42rem; }

/* Il segno: la clessidra col sole e la luna.
   È un'immagine vera dentro l'HTML (non più una maschera CSS):
   così si vede anche aprendo le pagine col doppio clic, senza un
   server, dove le maschere restano invisibili.
   Il disegno è di solo tratto, col vetro trasparente: niente
   riquadro chiaro dietro alla clessidra. Esiste in due file —
   `logo-scuro.svg` per i fondi chiari, `logo-chiaro.svg` per
   quelli scuri — e il foglio di stile scambia l'uno con l'altro
   dove serve. */
.marchio {
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.62rem;
  align-items: center;
}
/* Il segno è più alto che largo (951 × 1703 nel disegno
   originale): le misure qui sotto rispettano quel rapporto. */
.marchio__segno {
  grid-column: 1;
  grid-row: 1 / 3;
  width: 21px;
  height: 38px;
  display: block;
  object-fit: contain;
  /* le fotografie hanno un fondo sabbia che le regge mentre si
     caricano (regola `img` in cima al foglio): qui no, altrimenti
     resta un riquadro chiaro intorno alla clessidra */
  background: none;
  transition: width var(--t-medio), height var(--t-medio);
}
.marchio__nome { grid-column: 2; grid-row: 1; align-self: end; }
.marchio__sotto { grid-column: 2; grid-row: 2; align-self: start; }

.sito-header[data-compatta="true"] .marchio__segno { width: 19px; height: 34px; }

/* Dove il fondo è scuro il segno passa alla versione chiara.
   `content` sostituisce l'immagine senza toccare l'HTML: basta
   un file diverso, e vale per tutte le pagine. */
.sito-footer .marchio__segno,
.sito-header--trasparente .marchio__segno,
[data-tema="scuro"] .sito-header .marchio__segno {
  content: url("../img/logo-chiaro.svg");
}

/* sull'intestazione trasparente, sopra una fotografia, anche il
   segno chiaro va staccato dal fondo con un'ombra appena accennata */
.sito-header--trasparente .marchio__segno { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }

.sito-footer .marchio { column-gap: 0.75rem; }
.sito-footer .marchio__segno { width: 27px; height: 48px; }

/* ---------- 05.4 La navigazione ---------- */
.nav-principale { min-width: 0; }
.nav-principale > ul {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.05rem + 0.9vw, 1.05rem);
}
.nav-principale a,
.nav-tasto {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inchiostro-barra);
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  padding: 0.45rem 0.5rem;
  border-radius: 10px;
  transition: color var(--t-medio), background-color var(--t-veloce);
}
.nav-principale a::after,
.nav-tasto::after {
  content: "";
  position: absolute;
  left: 0.5rem; right: 0.5rem; bottom: 0.18rem;
  height: 2.5px;
  border-radius: 999px;
  background: var(--senape);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-medio);
}
.nav-principale a:hover::after,
.nav-tasto:hover::after,
.nav-principale a[aria-current="page"]::after,
.nav-tasto[data-dentro="true"]::after,
.nav-tasto[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }

/* la freccina della voce con pannello */
.nav-tasto i {
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-medio);
}
.nav-tasto[aria-expanded="true"] i { transform: translateY(1px) rotate(-135deg); }

/* ---------- 05.5 I pannelli larghi (mega menu) ----------
   Sono <button> con pannello, non semplici :hover: funzionano da
   tastiera, da lettore di schermo e sui portatili tattili, dove
   il passaggio del mouse non esiste.                             */
.nav-voce { position: relative; }

.nav-pannello {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.9rem;
  z-index: 122;
  /* larghezza dichiarata, non "quanto serve": con max-content
     bastava una descrizione lunga per far uscire il pannello
     dallo schermo. Lo spostamento orizzontale lo calcola il JS,
     che lo rientra nella finestra qualunque sia la posizione
     della voce di menu. */
  width: min(36rem, calc(100vw - 2rem));
  padding: 1.1rem;
  background: var(--superficie);
  color: var(--testo);
  border: 2px solid var(--antracite);
  border-radius: 20px;
  box-shadow: 7px 7px 0 0 var(--senape), var(--ombra-alta);
  opacity: 0;
  transform: translate(var(--spostamento, 0px), -8px);
  transition: opacity var(--t-veloce), transform var(--t-veloce);
}
.nav-pannello--evidenza { width: min(56rem, calc(100vw - 2rem)); }
.nav-pannello[hidden] { display: none; }
.nav-pannello[data-visibile="true"] { opacity: 1; transform: translate(var(--spostamento, 0px), 0); }

/* il ponte sopra lo spazio vuoto: senza, il puntatore che scende
   dal pulsante al pannello esce dal gruppo per un pelo e il
   pannello si chiude in faccia a chi lo sta aprendo */
.nav-pannello::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -1.1rem;
  height: 1.1rem;
}

/* la punta che lega il pannello alla voce di menu: la posizione
   orizzontale la scrive il JS, così resta sotto al pulsante anche
   quando il pannello è stato spostato per rientrare nello schermo */
.nav-pannello::before {
  content: "";
  position: absolute;
  top: -8px;
  left: var(--punta, 2.4rem);
  margin-left: -6px;
  width: 12px; height: 12px;
  rotate: 45deg;
  background: var(--superficie);
  border-left: 2px solid var(--antracite);
  border-top: 2px solid var(--antracite);
  border-radius: 3px 0 0 0;
}

.nav-pannello__griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 0.5rem;
  align-content: start;
}

.nav-pannello__titolo {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  padding: 0.2rem 0.7rem 0.5rem;
  margin: 0;
}

.nav-pannello a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 0.75rem;
  align-items: center;
  padding: 0.6rem 0.7rem;
  border-radius: 13px;
  /* il menu in riga vieta gli a capo: qui servono, altrimenti le
     descrizioni si accavallano l'una sull'altra */
  white-space: normal;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--antracite);
  transition: background-color var(--t-veloce);
}
.nav-pannello a::after { display: none; }
.nav-pannello a:hover,
.nav-pannello a:focus-visible { background: var(--superficie-alt); }
.nav-pannello a[aria-current="page"] { background: var(--superficie-alt); box-shadow: inset 3px 0 0 0 var(--terracotta); }

/* il quadratino con la miniatura, o la sigla se manca */
.nav-pannello__segno {
  grid-row: 1 / 3;
  width: 46px; height: 46px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sabbia);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--marrone-scuro);
  flex: none;
}
.nav-pannello__segno img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nav-pannello__voce {
  display: block;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 60, "WONK" 1;
  font-size: 1.04rem;
  line-height: 1.2;
  align-self: end;
}
.nav-pannello__nota {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--testo-soft);
  align-self: start;
  /* la descrizione non è tipografia da menu: niente maiuscoletto
     spaziato, che qui renderebbe le righe lunghissime */
  font-family: var(--sans);
  letter-spacing: 0;
}

/* la colonna in evidenza, a destra del pannello */
.nav-pannello--evidenza { display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: 1rem; }
.nav-vetrina {
  border-radius: 16px;
  padding: 1rem;
  background: linear-gradient(160deg, var(--sabbia) 0%, var(--crema) 100%);
  border: 1.5px solid var(--bordo-soft);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.nav-vetrina__occhiello {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terracotta);
}
.nav-vetrina p { font-size: var(--fs-sm); color: var(--testo-soft); margin: 0; }
.nav-vetrina strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 500; display: block; }
.nav-vetrina .freccia { margin-top: auto; font-size: var(--fs-sm); }

/* ---------- 05.6 Le azioni a destra ---------- */
.header-azioni { display: flex; align-items: center; gap: 0.4rem; flex: none; }

.azione-icona {
  width: 40px; height: 40px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--inchiostro-barra);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--t-veloce), border-color var(--t-veloce), color var(--t-medio);
}
.azione-icona:hover { background: color-mix(in srgb, var(--senape) 20%, transparent); border-color: var(--bordo-soft); }
.azione-icona svg { width: 19px; height: 19px; display: block; }

/* il tasto ricerca in versione larga mostra anche la scorciatoia */
.tasto-ricerca {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  min-width: 10.5rem;
  justify-content: flex-start;
  padding: 0 0.7rem;
  height: 40px;
  border: 1.5px solid var(--bordo);
  border-radius: 12px;
  background: color-mix(in srgb, var(--superficie) 70%, transparent);
  color: var(--testo-soft);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: border-color var(--t-veloce), background-color var(--t-veloce), color var(--t-medio);
}
.tasto-ricerca:hover { border-color: var(--senape); color: var(--antracite); }
.tasto-ricerca svg { width: 17px; height: 17px; flex: none; }
.tasto-ricerca__etichetta { flex: 1; text-align: left; }
.tasto-ricerca kbd {
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--bordo);
  background: color-mix(in srgb, var(--antracite) 8%, transparent);
  color: var(--testo-soft);
}

/* l'interruttore del tema: sole, luna o "automatico" */
.tasto-tema .tema-icona { display: none; }
[data-tema-scelta="auto"] .tasto-tema .tema-icona--auto,
[data-tema-scelta="chiaro"] .tasto-tema .tema-icona--sole,
[data-tema-scelta="scuro"] .tasto-tema .tema-icona--luna { display: block; }

/* contatto rapido: un pulsante con un piccolo pannello */
.contatto-rapido { position: relative; }
.contatto-rapido__pannello {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  z-index: 122;
  width: 17.5rem;
  padding: 0.5rem;
  background: var(--superficie);
  border: 2px solid var(--antracite);
  border-radius: 18px;
  box-shadow: 6px 6px 0 0 var(--terracotta), var(--ombra-morbida);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--t-veloce), transform var(--t-veloce);
}
.contatto-rapido__pannello[hidden] { display: none; }
.contatto-rapido__pannello[data-visibile="true"] { opacity: 1; transform: none; }
.contatto-rapido__pannello a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  color: var(--antracite);
  font-size: var(--fs-sm);
  transition: background-color var(--t-veloce);
}
.contatto-rapido__pannello a:hover { background: var(--superficie-alt); }
.contatto-rapido__pannello a svg { width: 18px; height: 18px; flex: none; color: var(--terracotta); }
.contatto-rapido__pannello b { display: block; font-weight: 600; }
.contatto-rapido__pannello span { display: block; font-size: var(--fs-xs); color: var(--testo-soft); }
.contatto-rapido__nota {
  padding: 0.5rem 0.75rem 0.2rem;
  font-size: var(--fs-xs);
  color: var(--testo-soft);
  border-top: 1px solid var(--bordo-soft);
  margin-top: 0.3rem;
}

/* ---------- 05.7 Stato trasparente sopra la hero ---------- */
.sito-header--trasparente {
  background: linear-gradient(180deg, rgba(34, 26, 17, 0.5) 0%, rgba(34, 26, 17, 0.18) 60%, rgba(34, 26, 17, 0) 100%);
  --inchiostro-barra: var(--chiaro);
}
.sito-header--trasparente .nav-principale a::after,
.sito-header--trasparente .nav-tasto::after { background: var(--senape-chiara); }
.sito-header--trasparente .tasto-ricerca {
  background: rgba(255, 253, 249, 0.12);
  border-color: rgba(255, 253, 249, 0.34);
  color: rgba(255, 253, 249, 0.86);
}
.sito-header--trasparente .tasto-ricerca:hover { border-color: var(--chiaro); color: var(--chiaro); }
.sito-header--trasparente .tasto-ricerca kbd {
  border-color: rgba(255, 253, 249, 0.34);
  background: rgba(255, 253, 249, 0.1);
  color: rgba(255, 253, 249, 0.8);
}
.sito-header--trasparente .azione-icona:hover { background: rgba(255, 253, 249, 0.16); border-color: rgba(255, 253, 249, 0.3); }
.sito-header--trasparente .bottone--contorno {
  color: var(--chiaro);
  border-color: rgba(255, 253, 249, 0.6);
}
.sito-header--trasparente .bottone--contorno:hover {
  background: var(--chiaro);
  color: var(--antracite);
  border-color: var(--chiaro);
}
.sito-header--trasparente .hamburger span { background: var(--chiaro); }

/* ---------- 05.8 Stato solido durante lo scorrimento ---------- */
.sito-header--solido {
  background: var(--vetro);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--bordo-soft);
  box-shadow: 0 10px 30px -26px rgba(64, 44, 24, 0.7);
}
.sito-header--solido .sito-header__inner { min-height: calc(var(--barra-h) - 10px); }

/* ---------- 05.9 Il filo dell'avanzamento di lettura ---------- */
.filo-lettura {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2.5px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t-medio);
}
.sito-header[data-lettura="si"] .filo-lettura { opacity: 1; }
.filo-lettura i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--avanzamento, 0));
  transform-origin: left;
  background: linear-gradient(90deg, var(--senape) 0%, var(--terracotta) 60%, var(--rosa-polvere) 100%);
}

/* ---------- 05.10 La palette di ricerca (Cmd/Ctrl + K) ----------
   Costruita dal JS su ogni pagina: cerca fra pagine, servizi,
   storie e luoghi, si comanda da tastiera e non fa richieste
   di rete. Senza JavaScript non compare, e il menu resta
   navigabile come sempre.                                       */
.palette {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(3rem, 8vh, 7rem) var(--gutter) var(--gutter);
  background: rgba(31, 24, 16, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.palette[data-aperta="true"] { display: flex; }
.palette__finestra {
  width: min(100%, 43rem);
  max-height: min(70vh, 34rem);
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 2.5px solid var(--antracite);
  border-radius: 22px;
  box-shadow: 10px 10px 0 -2px var(--senape), var(--ombra-alta);
  overflow: hidden;
  animation: ft-palette-entra 220ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes ft-palette-entra {
  from { opacity: 0; transform: translateY(-12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .palette__finestra { animation: none; } }

.palette__campo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 2px solid var(--bordo-soft);
}
.palette__campo svg { width: 20px; height: 20px; color: var(--marrone-tenue); flex: none; }
.palette__campo input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: var(--antracite);
  min-width: 0;
}
.palette__campo input:focus { outline: none; }
.palette__campo input::placeholder { color: var(--marrone-tenue); opacity: 0.8; }
.palette__esci {
  font-family: var(--mono);
  font-size: 0.68rem;
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid var(--bordo);
  color: var(--testo-soft);
  background: transparent;
  cursor: pointer;
}

.palette__esiti {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem;
}
.palette__gruppo {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  padding: 0.7rem 0.8rem 0.35rem;
}
.palette__esito {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: 13px;
  color: var(--antracite);
  cursor: pointer;
}
.palette__esito:hover,
.palette__esito[aria-selected="true"] { background: var(--superficie-alt); }
.palette__esito[aria-selected="true"] { box-shadow: inset 3px 0 0 0 var(--terracotta); }
.palette__esito b { grid-column: 2; font-weight: 500; font-family: var(--serif); font-size: 1.02rem; }
.palette__esito span { grid-column: 2; font-size: var(--fs-xs); color: var(--testo-soft); }
.palette__esito mark { background: var(--senape-chiara); color: inherit; border-radius: 3px; padding: 0 1px; }
.palette__icona {
  grid-row: 1 / 3;
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sabbia);
  color: var(--marrone-scuro);
  font-family: var(--mono);
  font-size: 0.7rem;
}
.palette__invio {
  grid-row: 1 / 3;
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--testo-soft);
  opacity: 0;
}
.palette__esito[aria-selected="true"] .palette__invio { opacity: 1; }
.palette__vuoto { padding: 1.6rem 1rem; text-align: center; color: var(--testo-soft); font-size: var(--fs-sm); }
.palette__piede {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.1rem;
  border-top: 2px solid var(--bordo-soft);
  font-size: var(--fs-xs);
  color: var(--testo-soft);
  background: var(--superficie-alt);
}
.palette__piede kbd {
  font-family: var(--mono);
  border: 1px solid var(--bordo);
  border-radius: 5px;
  padding: 1px 5px;
  margin-right: 0.3rem;
}

/* ---------- 05.11 Hamburger ---------- */
.hamburger {
  display: none;
  width: 44px; height: 44px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.hamburger span {
  position: absolute;
  left: 10px;
  width: 24px; height: 2.5px;
  border-radius: 999px;
  background: var(--inchiostro-barra);
  transition: transform var(--t-medio), opacity var(--t-veloce), background-color var(--t-medio);
}
.hamburger span:nth-child(1) { top: 16px; }
.hamburger span:nth-child(2) { top: 23px; }
.hamburger span:nth-child(3) { top: 30px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 05.12 Menu mobile a tutto schermo ---------- */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: var(--sfondo);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--barra-h) + 1.1rem) var(--gutter) calc(1.2rem + env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-medio), transform var(--t-medio), visibility var(--t-medio);
}
.menu-mobile[data-aperto="true"] { opacity: 1; visibility: visible; transform: none; }

/* il corpo scorre, il piede resta agganciato in basso: così il
   menu regge anche su un telefono basso senza tagliare voci */
.menu-mobile__corpo {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* la riga di servizio in cima al menu: ricerca e tema */
.menu-mobile__strumenti {
  display: flex;
  gap: 0.5rem;
  margin-bottom: var(--sp-3);
}
.menu-mobile__strumenti .tasto-ricerca { flex: 1; min-width: 0; }

.menu-mobile__lista { display: flex; flex-direction: column; gap: 0.1rem; }
.menu-mobile__lista a {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
  font-size: clamp(1.5rem, 1rem + 3.4vw, 2.1rem);
  color: var(--antracite);
  padding-block: 0.3rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  border-bottom: 2px solid var(--sabbia);
}
.menu-mobile__lista a[aria-current="page"] { color: var(--terracotta); }
/* il numerino progressivo, come su un provino */
.menu-mobile__lista a::before {
  content: attr(data-n);
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--marrone-tenue);
  letter-spacing: 0.1em;
}

/* il secondo gruppo: le pagine da esplorare, in corpo minore
   perché sono un approfondimento, non la struttura del sito */
.menu-mobile__gruppo { margin-top: var(--sp-4); }
.menu-mobile__titolo {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  margin-bottom: 0.6rem;
}
.menu-mobile__secondaria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.1rem 1.2rem;
}
.menu-mobile__secondaria a {
  display: block;
  padding-block: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--marrone-scuro);
  border-bottom: 1px solid var(--sabbia);
}
.menu-mobile__secondaria a[aria-current="page"] { color: var(--terracotta); }

.menu-mobile__stato {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-4);
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: var(--sabbia);
  font-size: var(--fs-sm);
  color: var(--marrone-scuro);
}

.menu-mobile__piede {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
}
.menu-mobile__social {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
}

/* ---------- 06. HERO ---------- */
.hero {
  position: relative;
  /* prima vh come ripiego, poi svh: l'ultima valida vince,
     e svh tiene conto della barra del browser sui telefoni */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--chiaro);
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--marrone-tenue);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(32, 24, 15, 0.42) 0%, rgba(32, 24, 15, 0.06) 34%, rgba(32, 24, 15, 0.6) 80%, rgba(32, 24, 15, 0.78) 100%);
}
.hero__contenuto {
  width: 100%;
  padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
}
.hero__titolo {
  font-size: var(--fs-display);
  font-variation-settings: "SOFT" 90, "WONK" 1, "opsz" 144;
  color: var(--chiaro);
  max-width: 17ch;
  margin-bottom: var(--sp-3);
  text-shadow: 0 2px 26px rgba(24, 18, 11, 0.42);
}
.hero__sotto {
  font-size: var(--fs-lg);
  max-width: 46ch;
  color: rgba(255, 253, 249, 0.93);
  margin-bottom: var(--sp-4);
  text-shadow: 0 1px 18px rgba(24, 18, 11, 0.5);
}
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hero__occhiello { color: rgba(255, 253, 249, 0.86); }
.hero__occhiello.occhiello--linea::before {
  background: var(--senape-chiara);
  box-shadow: -11px 0 0 -2px var(--rosa-polvere);
}

.hero__scorri {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 253, 249, 0.8);
}
.hero__scorri i {
  display: block;
  width: 3px; height: 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--senape-chiara), rgba(227, 200, 138, 0));
  animation: scorri 2.6s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scorri {
  0%, 100% { transform: scaleY(0.35); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* hero interne (pagine secondarie) */
.hero-pagina {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 2rem + 7vw, 7rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 5vw, 5rem);
  background: var(--crema);
  overflow: hidden;
}
/* filetto retro a righe sul bordo inferiore */
.hero-pagina::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--terracotta) 0 20%, var(--senape) 20% 40%,
    var(--salvia) 40% 60%, var(--teal) 60% 80%, var(--rosa-polvere) 80% 100%);
  opacity: 0.85;
}
.hero-pagina__testo { max-width: 22ch; }
.hero-pagina .guida { margin-top: var(--sp-3); }
.hero-pagina--media { background: var(--antracite); color: var(--chiaro); }
.hero-pagina--media h1 { color: var(--chiaro); }
.hero-pagina--media .guida { color: rgba(255, 253, 249, 0.86); }
.hero-pagina--media .occhiello { color: var(--senape-chiara); }
.hero-pagina--media .occhiello--linea::before {
  background: var(--senape-chiara);
  box-shadow: -11px 0 0 -2px var(--rosa-polvere);
}
.hero-pagina__sfondo {
  position: absolute;
  inset: 0;
  opacity: 0.4;
}
.hero-pagina__sfondo img { width: 100%; height: 100%; object-fit: cover; }
.hero-pagina--media .contenitore { position: relative; z-index: 1; }

/* ---------- 07. BOTTONI E LINK ---------- */
.bottone {
  --bg: var(--antracite);
  --fg: #FFFDF9;
  --bd: var(--antracite);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 50px;
  padding: 0.8rem 1.75rem;
  background: var(--bg);
  color: var(--fg);
  border: 2px solid var(--bd);
  border-radius: var(--raggio-s);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  transition: transform var(--t-veloce), background-color var(--t-medio), color var(--t-medio), border-color var(--t-medio), box-shadow var(--t-medio);
}
.bottone:hover { transform: translateY(-2px); box-shadow: var(--ombra-morbida); }
.bottone:active { transform: translateY(0); }

.bottone--terracotta { --bg: var(--terracotta); --bd: var(--terracotta); }
.bottone--terracotta:hover { --bg: var(--terracotta-scura); --bd: var(--terracotta-scura); }

.bottone--chiaro { --bg: #FFFDF9; --fg: var(--antracite); --bd: #FFFDF9; }

/* contorno chiaro, per i fondi scuri: sostituisce i colori
   scritti a mano che prima stavano dentro l'HTML */
.bottone--luce {
  --bg: transparent;
  --fg: #FFFDF9;
  --bd: rgba(255, 253, 249, 0.5);
  box-shadow: none;
}
.bottone--luce:hover {
  --bg: #FFFDF9;
  --fg: var(--antracite);
  --bd: #FFFDF9;
  box-shadow: none;
}
.bottone--luce:active { box-shadow: none; }

.bottone--contorno {
  --bg: transparent;
  --fg: var(--antracite);
  --bd: rgba(47, 36, 25, 0.35);
}
.bottone--contorno:hover { --bg: var(--antracite); --fg: #FFFDF9; --bd: var(--antracite); }

.bottone--piccolo { min-height: 42px; padding: 0.5rem 1.15rem; font-size: var(--fs-xs); }
.bottone--largo { width: 100%; }

.freccia {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marrone-scuro);
}
.freccia::after {
  content: "";
  width: 24px; height: 3px;
  border-radius: 999px;
  background: var(--senape);
  transition: width var(--t-medio), background-color var(--t-medio);
}
.freccia:hover::after { width: 38px; background: var(--terracotta); }

/* ---------- 08. SEZIONI EDITORIALI ---------- */
.editoriale {
  display: grid;
  gap: clamp(1.75rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  grid-template-columns: repeat(12, 1fr);
}
.editoriale__media { grid-column: span 6; }
.editoriale__testo { grid-column: span 5 / -1; }
.editoriale--invertito .editoriale__media { grid-column: 7 / -1; order: 2; }
.editoriale--invertito .editoriale__testo { grid-column: 1 / span 5; order: 1; }

.editoriale__media--doppio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
  align-items: end;
}
.editoriale__media--doppio figure:first-child { transform: translateY(clamp(0px, 3vw, 38px)); }
/* motivo ad arco: la prima foto della coppia */
.editoriale__media--doppio figure:first-child img { border-radius: var(--arco); }

.figura { margin: 0; position: relative; }
.figura picture { display: block; }
.figura img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--raggio-m);
}
.figura figcaption {
  margin-top: 0.8rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--testo-soft);
}
/* Cornice sfalsata, come una stampa appoggiata su un'altra.
   Va attorno alla SOLA fotografia: la didascalia resta fuori,
   sotto, dove ci si aspetta di trovarla. Per ottenerlo, immagine
   e cornice condividono la stessa cella di griglia, e la
   didascalia occupa la riga successiva. */
.figura--bordo { display: grid; }

.figura--bordo > img {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
}

.figura--bordo::after {
  content: "";
  grid-area: 1 / 1;
  margin: 14px -14px -14px 14px;
  border: 2px solid var(--sabbia-scura);
  border-radius: var(--raggio-m);
}

.figura--bordo > figcaption {
  grid-area: 2 / 1;
  margin-top: calc(0.8rem + 2px);
}
.figura--arco img { border-radius: var(--arco); }

.r-4-5 { aspect-ratio: 4 / 5; }
.r-3-2 { aspect-ratio: 3 / 2; }
.r-2-3 { aspect-ratio: 2 / 3; }
.r-1-1 { aspect-ratio: 1 / 1; }
.r-16-9 { aspect-ratio: 16 / 9; }
.r-21-9 { aspect-ratio: 21 / 9; }

.striscia-valori {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 0.8rem + 2vw, 3rem);
  border-top: 3px solid var(--sabbia);
  border-bottom: 3px solid var(--sabbia);
  padding-block: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
}
.valore__numero {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 90, "WONK" 1, "opsz" 144;
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
  color: var(--terracotta);
  display: block;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.valore p { font-size: var(--fs-sm); color: var(--testo-soft); }

/* ---------- 09. GRIGLIE FOTOGRAFICHE ---------- */
.mosaico {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(0.75rem, 0.5rem + 1.4vw, 1.75rem);
}
.mosaico > * { grid-column: span 4; }
.mosaico > .m-6 { grid-column: span 6; }
.mosaico > .m-7 { grid-column: span 7; }
.mosaico > .m-5 { grid-column: span 5; }
.mosaico > .m-8 { grid-column: span 8; }
.mosaico > .m-12 { grid-column: span 12; }
.mosaico > .m-giu { transform: translateY(clamp(0px, 3vw, 48px)); }
/* nel mosaico, le verticali prendono la forma ad arco */
.mosaico > .m-5 img { border-radius: var(--arco); }

.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: clamp(0.75rem, 0.5rem + 1.2vw, 1.5rem);
}
.galleria--editoriale { grid-template-columns: repeat(12, 1fr); }
.galleria--editoriale > * { grid-column: span 6; }
.galleria--editoriale > .g-4 { grid-column: span 4; }
.galleria--editoriale > .g-6 { grid-column: span 6; }
.galleria--editoriale > .g-8 { grid-column: span 8; }
.galleria--editoriale > .g-12 { grid-column: span 12; }
.galleria--editoriale > .g-4 img { border-radius: var(--arco); }

.foto-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--sabbia);
  overflow: hidden;
  cursor: zoom-in;
  border-radius: var(--raggio-m);
  position: relative;
}
.foto-zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-lento), filter var(--t-medio);
}
.foto-zoom:hover img { transform: scale(1.035); }
.foto-zoom::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(47, 36, 25, 0);
  transition: background var(--t-medio);
  pointer-events: none;
}
.foto-zoom:hover::after { background: rgba(47, 36, 25, 0.07); }
/* l'arco deve valere anche sul contenitore, per non tagliare l'angolo */
.mosaico > .m-5.foto-zoom,
.galleria--editoriale > .g-4.foto-zoom { border-radius: var(--arco); }

/* ---------- 10. PORTFOLIO E FILTRI ---------- */
.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.filtro {
  border: 2px solid var(--bordo);
  background: transparent;
  color: var(--testo);
  border-radius: var(--raggio-s);
  padding: 0.5rem 1.2rem;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  cursor: pointer;
  min-height: 42px;
  transition: background-color var(--t-veloce), color var(--t-veloce), border-color var(--t-veloce), box-shadow var(--t-veloce);
}
.filtro:hover { border-color: var(--senape); background: rgba(227, 200, 138, 0.28); }
.filtro[aria-pressed="true"] {
  background: var(--antracite);
  border-color: var(--antracite);
  color: var(--chiaro);
}

.griglia-storie {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.25rem, 0.8rem + 2vw, 2.75rem) clamp(1rem, 0.6rem + 1.6vw, 2rem);
}
.scheda-storia { grid-column: span 6; }
.scheda-storia--larga { grid-column: span 12; }
.scheda-storia--terzo { grid-column: span 4; }
.scheda-storia--sfalsata { transform: translateY(clamp(0px, 3.5vw, 60px)); }

.scheda-storia__media {
  overflow: hidden;
  border-radius: var(--raggio-m);
  background: var(--sabbia);
  position: relative;
}
.scheda-storia--sfalsata .scheda-storia__media { border-radius: var(--arco); }
.scheda-storia__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-lento);
}
.scheda-storia:hover .scheda-storia__media img { transform: scale(1.04); }

.scheda-storia__corpo { padding-top: var(--sp-3); }
.scheda-storia__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  margin-bottom: 0.7rem;
}
.scheda-storia__meta span + span { position: relative; padding-left: 0.9rem; }
.scheda-storia__meta span + span::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--terracotta-chiara);
  transform: translateY(-50%);
}
.scheda-storia__titolo {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 120;
  font-weight: 450;
  font-size: var(--fs-h3);
  color: var(--antracite);
  margin: 0 0 0.5rem;
  line-height: 1.18;
}
.scheda-storia__testo { color: var(--testo-soft); font-size: var(--fs-sm); max-width: 48ch; }
.scheda-storia__corpo .freccia { margin-top: var(--sp-2); }

.scheda-categoria {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--arco);
  background: var(--marrone-tenue);
  color: var(--chiaro);
  min-height: 320px;
}
.scheda-categoria img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-lento);
}
.scheda-categoria::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(32,24,15,0.05) 30%, rgba(32,24,15,0.74) 100%);
}
.scheda-categoria:hover img { transform: scale(1.05); }
.scheda-categoria__testo {
  position: relative;
  z-index: 1;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
}
.scheda-categoria__testo h3 { color: var(--chiaro); margin-bottom: 0.25rem; }
.scheda-categoria__testo p { font-size: var(--fs-sm); color: rgba(255,253,249,0.86); }

/* ---------- 11. SERVIZI ---------- */
.scheda-servizio {
  background: var(--bianco-caldo);
  border: 2px solid var(--sabbia);
  border-radius: var(--raggio-l);
  padding: clamp(1.4rem, 1rem + 2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--t-medio), transform var(--t-medio), box-shadow var(--t-medio);
}
.scheda-servizio:hover {
  border-color: var(--senape);
  transform: translateY(-3px);
  box-shadow: var(--ombra-morbida);
}
.scheda-servizio .figura img { border-radius: var(--arco); }
.scheda-servizio__intro { color: var(--testo-soft); }
.scheda-servizio__dettagli { display: grid; gap: 0.9rem; margin-top: auto; }
.dettaglio {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 0.75rem;
  font-size: var(--fs-sm);
  padding-top: 0.9rem;
  border-top: 2px solid var(--sabbia);
}
.dettaglio dt {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
}
.dettaglio dd { margin: 0; color: var(--testo); }
/* il bottone della scheda, più un collegamento di servizio sotto
   (per ora: il prezziario dei diciottesimi da scaricare) */
.scheda-servizio__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
}
.scheda-servizio__azioni .freccia { font-size: var(--fs-sm); }

.lista-spunta { display: grid; gap: 0.4rem; }
.lista-spunta li {
  position: relative;
  padding-left: 1.5rem;
  font-size: var(--fs-sm);
}
.lista-spunta li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--salvia);
  box-shadow: 0 0 0 3px var(--salvia-chiara);
}

/* ---------- 12. APPROCCIO ---------- */
.passi {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  grid-template-columns: repeat(5, 1fr);
  position: relative;
}
.passi::before {
  content: "";
  position: absolute;
  top: 27px; left: 6%; right: 6%;
  height: 3px;
  border-radius: 999px;
  background: repeating-linear-gradient(90deg, var(--sabbia-scura) 0 9px, transparent 9px 19px);
}
.passo { position: relative; }
.passo__cerchio {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--crema);
  border: 3px solid var(--senape);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 90, "WONK" 1, "opsz" 144;
  font-size: 1.35rem;
  color: var(--marrone-scuro);
  margin-bottom: var(--sp-3);
  position: relative;
  z-index: 1;
}
.passo:nth-child(2) .passo__cerchio { border-color: var(--terracotta-chiara); }
.passo:nth-child(3) .passo__cerchio { border-color: var(--salvia); }
.passo:nth-child(4) .passo__cerchio { border-color: var(--teal); }
.passo:nth-child(5) .passo__cerchio { border-color: var(--rosa-polvere); }
.passo h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.passo p { font-size: var(--fs-sm); color: var(--testo-soft); }

.parole-chiave {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-4);
}
.parola {
  border: 2px solid var(--sabbia-scura);
  border-radius: var(--raggio-s);
  padding: 0.35rem 1rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marrone-scuro);
  background: rgba(255, 253, 249, 0.5);
}

/* ---------- 13. TESTIMONIANZE ---------- */
.testimonianza {
  background: var(--bianco-caldo);
  border: 2px solid var(--sabbia);
  border-radius: var(--raggio-l);
  padding: clamp(1.4rem, 1rem + 1.8vw, 2.1rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
}
.testimonianza__testo {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 120;
  font-size: 1.2rem;
  line-height: 1.48;
  color: var(--antracite);
}
.testimonianza__autore {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: auto;
  padding-top: var(--sp-2);
  border-top: 2px solid var(--sabbia);
}
.testimonianza__autore img {
  width: 48px; height: 48px;
  border-radius: 999px;
  object-fit: cover;
  flex: none;
  box-shadow: 0 0 0 2px var(--senape-chiara);
}
.testimonianza__nome { font-size: var(--fs-sm); font-weight: 500; color: var(--antracite); }
.testimonianza__dettaglio { font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--marrone-tenue); }

/* ---------- 14. DIARIO / STORIE ---------- */
.articolo-testata {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 5vw, 5rem));
}
.articolo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.1rem;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  margin-bottom: var(--sp-3);
}
.articolo-corpo { max-width: 68ch; margin-inline: auto; }
.articolo-corpo > * + * { margin-top: var(--sp-3); }
.articolo-corpo h2 { margin-top: var(--sp-5); font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem); }
.articolo-corpo h3 { margin-top: var(--sp-4); }
.articolo-corpo p { font-size: var(--fs-md); line-height: 1.8; }
.articolo-corpo .citazione--blocco { margin-block: var(--sp-5); }

.condividi {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  padding-top: var(--sp-3);
  border-top: 3px solid var(--sabbia);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
}
.condividi a, .condividi button {
  border: 2px solid var(--bordo);
  background: transparent;
  border-radius: var(--raggio-s);
  padding: 0.4rem 1rem;
  cursor: pointer;
  letter-spacing: 0.12em;
  transition: border-color var(--t-veloce), color var(--t-veloce), background-color var(--t-veloce);
}
.condividi a:hover, .condividi button:hover {
  border-color: var(--senape);
  background: rgba(227, 200, 138, 0.3);
  color: var(--marrone-scuro);
}

/* ---------- 15. CONTATTI E FORM ---------- */
.blocco-contatti {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 1.2rem + 4vw, 4.5rem);
  align-items: start;
}
.blocco-contatti__aside { grid-column: span 4; }
.blocco-contatti__form { grid-column: span 8; }
.blocco-contatti__aside .figura img { border-radius: var(--arco); }

.form { display: grid; gap: var(--sp-3); }
.campo { display: grid; gap: 0.45rem; }
.campo label {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  background: var(--bianco-caldo);
  border: 2px solid var(--sabbia-scura);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  min-height: 50px;
  font-size: var(--fs-base);
  transition: border-color var(--t-veloce), box-shadow var(--t-veloce), background-color var(--t-veloce);
}
.campo textarea { min-height: 170px; resize: vertical; line-height: 1.65; }
.campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237E6244' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--senape);
  box-shadow: 0 0 0 4px rgba(227, 200, 138, 0.45);
}
.campo--errore input,
.campo--errore select,
.campo--errore textarea { border-color: var(--terracotta); }
.campo__errore {
  font-size: var(--fs-xs);
  color: var(--terracotta-scura);
  letter-spacing: 0.02em;
  text-transform: none;
  min-height: 1em;
}
.campo__aiuto { font-size: var(--fs-xs); color: var(--testo-soft); letter-spacing: 0.02em; text-transform: none; }

.form-riga {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.consenso {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: var(--fs-sm);
  color: var(--testo-soft);
  line-height: 1.55;
}
.consenso input[type="checkbox"] {
  width: 22px; height: 22px;
  min-height: 0;
  margin-top: 3px;
  flex: none;
  accent-color: var(--terracotta);
}

.onore { position: absolute; left: -9999px; opacity: 0; height: 0; }

.messaggio-form {
  border: 3px solid var(--salvia);
  background: var(--salvia-chiara);
  border-radius: var(--raggio-l);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  display: none;
}
.messaggio-form[data-visibile="true"] { display: block; }
.messaggio-form[data-esito="errore"] { border-color: var(--terracotta); background: rgba(200, 129, 95, 0.16); }
.messaggio-form h2 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.messaggio-form p { color: var(--marrone-scuro); margin-bottom: 0; }

.lista-contatti { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.lista-contatti a { display: grid; gap: 0.15rem; }
.lista-contatti span:first-child {
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
}
.lista-contatti span:last-child { font-size: var(--fs-md); color: var(--antracite); }

/* CTA finale */
.cta-finale {
  position: relative;
  color: var(--chiaro);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cta-finale img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.cta-finale::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(40, 30, 19, 0.62);
  z-index: -1;
}
.cta-finale h2 { color: var(--chiaro); }
.cta-finale .guida { color: rgba(255,253,249,0.9); margin-inline: auto; }
.cta-finale .occhiello { color: var(--senape-chiara); }
.cta-finale .occhiello--linea::before,
.cta-finale .occhiello--linea::after {
  background: var(--senape-chiara);
}
.cta-finale .occhiello--linea::before { box-shadow: -11px 0 0 -2px var(--rosa-polvere); }
.cta-finale__azioni {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ---------- 16. LIGHTBOX ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(30, 23, 15, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity var(--t-medio);
}
.lightbox[data-aperta="true"] { display: flex; opacity: 1; }
.lightbox__figura {
  margin: 0;
  max-width: min(100%, 1400px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.lightbox__figura img {
  max-width: 100%;
  max-height: 78vh;
  max-height: 78svh;
  width: auto;
  object-fit: contain;
  background: transparent;
  border-radius: 8px;
  animation: apparizione var(--t-medio) both;
}
.lightbox__didascalia {
  color: rgba(255, 253, 249, 0.86);
  font-size: var(--fs-sm);
  text-align: center;
  max-width: 60ch;
}
.lightbox__conta {
  color: var(--senape-chiara);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
}
.lightbox__btn {
  position: absolute;
  background: rgba(255, 253, 249, 0.1);
  border: 2px solid rgba(255, 253, 249, 0.32);
  color: var(--chiaro);
  width: 52px; height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background-color var(--t-veloce), transform var(--t-veloce), border-color var(--t-veloce);
}
.lightbox__btn:hover {
  background: rgba(255, 253, 249, 0.22);
  border-color: var(--senape-chiara);
  transform: scale(1.05);
}
.lightbox__btn[hidden] { display: none; }
.lightbox__chiudi { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prec { left: clamp(0.75rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__succ { right: clamp(0.75rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__prec:hover, .lightbox__succ:hover { transform: translateY(-50%) scale(1.05); }

@keyframes apparizione {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ---------- 17. FOOTER ---------- */
.sito-footer {
  background: var(--antracite);
  color: rgba(255, 253, 249, 0.78);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) 0;
  position: relative;
}
/* filetto retro a righe in cima al footer */
.sito-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--terracotta) 0 20%, var(--senape) 20% 40%,
    var(--salvia) 40% 60%, var(--teal) 60% 80%, var(--rosa-polvere) 80% 100%);
}
.footer-griglia {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.05fr 1.15fr;
  gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}
.sito-footer h3 {
  color: var(--chiaro);
  font-family: var(--sans);
  font-variation-settings: normal;
  line-height: 1.3;
  font-size: var(--fs-xs);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
  font-weight: 500;
}
.sito-footer .marchio__nome { font-size: 1.95rem; color: var(--chiaro); }
.sito-footer .marchio__sotto { color: rgba(255,253,249,0.62); }
.sito-footer p { font-size: var(--fs-sm); max-width: 38ch; }
.footer-lista { display: grid; gap: 0.6rem; font-size: var(--fs-sm); }
.footer-lista a { transition: color var(--t-veloce); }
.footer-lista a:hover { color: var(--senape-chiara); }

.footer-basso {
  border-top: 2px solid rgba(255, 253, 249, 0.16);
  padding-block: var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
}
.footer-basso ul { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.torna-su {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid rgba(255, 253, 249, 0.28);
  background: transparent;
  color: rgba(255, 253, 249, 0.82);
  border-radius: var(--raggio-s);
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color var(--t-veloce), color var(--t-veloce);
}
.torna-su:hover { border-color: var(--senape-chiara); color: var(--senape-chiara); }

/* ---------- 18. COOKIE BANNER ---------- */
.cookie {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 150;
  max-width: 420px;
  background: var(--bianco-caldo);
  border: 3px solid var(--sabbia-scura);
  border-radius: var(--raggio-l);
  box-shadow: var(--ombra-alta);
  padding: var(--sp-3);
  display: none;
}
.cookie[data-visibile="true"] { display: block; animation: salita var(--t-medio) both; }
.cookie p { font-size: var(--fs-sm); color: var(--testo-soft); }
.cookie__azioni { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--sp-2); }

@keyframes salita {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 19. ANIMAZIONI E ACCESSIBILITÀ ---------- */
/* Le entrate si attivano solo quando lo script è partito
   (classe .pagina-pronta sul body). Se JavaScript non gira,
   il contenuto resta visibile invece di sparire. */
.pagina-pronta [data-anima] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-lento), transform var(--t-lento);
  will-change: opacity, transform;
}
.pagina-pronta [data-anima].e-visibile {
  opacity: 1;
  transform: none;
  will-change: auto;
}
[data-anima][data-ritardo="1"] { transition-delay: 90ms; }
[data-anima][data-ritardo="2"] { transition-delay: 180ms; }
[data-anima][data-ritardo="3"] { transition-delay: 270ms; }
[data-anima][data-ritardo="4"] { transition-delay: 360ms; }

.pagina-entra { animation: entrataPagina 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
@keyframes entrataPagina {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@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;
  }
  .pagina-pronta [data-anima] { opacity: 1; transform: none; }
  .foto-zoom:hover img, .scheda-storia:hover .scheda-storia__media img { transform: none; }
}

/* ---------- 20. PAGINE SPECIALI ---------- */
.pagina-404 {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: calc(var(--header-h) + 3rem) var(--gutter) 4rem;
  background: var(--crema);
}
.pagina-404 h1 {
  font-size: clamp(3rem, 1.8rem + 7vw, 6rem);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  margin-bottom: 0.5rem;
}

.pagina-legale { padding-top: calc(var(--header-h) + clamp(2.5rem, 1.5rem + 5vw, 5rem)); }
.pagina-legale h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem); margin-top: var(--sp-5); }
.pagina-legale h3 { font-size: 1.15rem; margin-top: var(--sp-4); }
.pagina-legale li { position: relative; padding-left: 1.5rem; margin-bottom: 0.4rem; }
.pagina-legale li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 9px; height: 3px;
  border-radius: 999px;
  background: var(--senape);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .footer-griglia { grid-template-columns: 1fr 1fr; }
  .passi { grid-template-columns: repeat(3, 1fr); }
  .passi::before { display: none; }
}

@media (max-width: 900px) {
  .editoriale { grid-template-columns: 1fr; }
  .editoriale__media,
  .editoriale__testo,
  .editoriale--invertito .editoriale__media,
  .editoriale--invertito .editoriale__testo { grid-column: 1 / -1; order: initial; }

  .striscia-valori { grid-template-columns: repeat(2, 1fr); }

  .blocco-contatti__aside,
  .blocco-contatti__form { grid-column: 1 / -1; }

  .scheda-storia,
  .scheda-storia--terzo,
  .scheda-storia--larga { grid-column: span 12; }
  .scheda-storia--sfalsata { transform: none; }

  .mosaico > *, .mosaico > .m-5, .mosaico > .m-7, .mosaico > .m-8 { grid-column: span 6; }
  .mosaico > .m-6, .mosaico > .m-12 { grid-column: span 12; }
  .mosaico > .m-giu { transform: none; }

  .galleria--editoriale > *, .galleria--editoriale > .g-4, .galleria--editoriale > .g-6, .galleria--editoriale > .g-8 { grid-column: span 6; }
  .galleria--editoriale > .g-12 { grid-column: span 12; }

  .griglia--3, .griglia--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .editoriale__media--doppio figure:first-child { transform: none; }

  .cookie { left: var(--gutter); right: var(--gutter); max-width: none; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .passi { grid-template-columns: 1fr; gap: 1.5rem; }
  .passo { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; align-items: start; }
  .passo__cerchio { margin-bottom: 0; }
  .griglia--2, .griglia--3, .griglia--4 { grid-template-columns: 1fr; }
  .form-riga { grid-template-columns: 1fr; }
  .striscia-valori { grid-template-columns: 1fr; }
  .pellicola__bordo { letter-spacing: 0.16em; }
  .footer-griglia { grid-template-columns: 1fr; }
  .mosaico > *, .mosaico > .m-5, .mosaico > .m-6, .mosaico > .m-7, .mosaico > .m-8 { grid-column: span 12; }
  .galleria--editoriale > *, .galleria--editoriale > .g-4, .galleria--editoriale > .g-6, .galleria--editoriale > .g-8 { grid-column: span 12; }
  .dettaglio { grid-template-columns: 1fr; gap: 0.25rem; }
  .hero__scorri { display: none; }
  .hero__azioni .bottone { flex: 1 1 100%; }
  .footer-basso { flex-direction: column; align-items: flex-start; }
}

@media print {
  .sito-header, .menu-mobile, .cookie, .lightbox, .sito-footer, .hero__scorri { display: none !important; }
  body { color: #000; background: #fff; }
  body::after { display: none; }
}

/* =========================================================
   21. DETTAGLI DA VECCHIO COMPUTER
   ---------------------------------------------------------
   Un livello sopra il retro anni '70: il "registro di sistema".
   Tutto ciò che è metadato, etichetta, numero o comando usa
   il monospaziato Space Mono, come sullo schermo di un
   terminale ad ambra. Le fotografie e i testi lunghi restano
   intatti: qui si tocca solo la micro-tipografia e le cornici.

   21.1 Registro monospaziato
   21.2 Cursore lampeggiante
   21.3 Numerazione d'archivio
   21.4 Scanline sui fondi scuri
   21.5 Bottoni con ombra piena
   21.6 Finestre di sistema (cookie, conferme)
   21.7 Nastro perforato
   ========================================================= */

/* ---------- 21.1 REGISTRO MONOSPAZIATO ---------- */
.occhiello,
.marchio__sotto,
.nav-principale a,
.menu-mobile__social,
.hero__scorri,
.filtro,
.parola,
.scheda-storia__meta,
.articolo-meta,
.dettaglio dt,
.testimonianza__dettaglio,
.lista-contatti span:first-child,
.campo label,
.campo__errore,
.condividi,
.condividi a,
.condividi button,
.sito-footer h3,
.footer-basso,
.torna-su,
.lightbox__conta,
.cookie,
.firma,
.valore__numero,
.passo__cerchio {
  font-family: var(--mono);
}

.occhiello { font-weight: 700; letter-spacing: 0.2em; }
.marchio__sotto { letter-spacing: 0.32em; }
.firma { letter-spacing: 0.14em; }

.nav-principale a {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
}

.scheda-storia__meta,
.articolo-meta,
.dettaglio dt,
.testimonianza__dettaglio,
.lista-contatti span:first-child,
.campo label,
.sito-footer h3 { letter-spacing: 0.12em; }

.valore__numero,
.passo__cerchio {
  font-variation-settings: normal;
  font-weight: 700;
}
.passo__cerchio { font-size: 1.05rem; }

/* etichette dei campi come un prompt di riga di comando.
   È un quadratino disegnato, non un carattere: gli screen reader non lo leggono. */
.campo > label::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.55rem;
  background: var(--terracotta);
  vertical-align: 0.06em;
}

/* il contatore della lightbox fra parentesi quadre */
.lightbox__conta::before { content: "[ "; }
.lightbox__conta::after { content: " ]"; }

/* ---------- 21.2 CURSORE LAMPEGGIANTE ---------- */
.hero__titolo::after,
.pagina-404 h1::after {
  content: "";
  display: inline-block;
  width: 0.085em;
  height: 0.7em;
  margin-left: 0.14em;
  vertical-align: -0.02em;
  background: var(--ambra);
  animation: cursore 1.15s steps(1) infinite;
}

@keyframes cursore {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* ---------- 21.3 NUMERAZIONE D'ARCHIVIO ---------- */
.griglia-storie { counter-reset: archivio; }
.griglia-storie > * { counter-increment: archivio; }
.scheda-storia__meta::before {
  content: "[" counter(archivio, decimal-leading-zero) "]";
  color: var(--terracotta);
  font-weight: 700;
}

/* ---------- 21.4 SCANLINE SUI FONDI SCURI ---------- */
/* Volutamente leggere: devono leggersi come texture, non coprire le fotografie.
   La lightbox ne è esclusa: lì le immagini vanno viste pulite. */
.hero::before,
.hero-pagina--media::before,
.cta-finale::before,
.sito-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  background: repeating-linear-gradient(to bottom,
    rgba(12, 8, 4, 0.35) 0 1px,
    transparent 1px 5px);
}

/* I contenuti restano sopra le righe dello schermo.
   .hero__scorri è escluso di proposito: è già absolute con
   right/bottom, e imporgli position:relative lo farebbe uscire
   dalla hero. Gli si dà solo lo z-index. */
.hero__contenuto,
.cta-finale .contenitore,
.sito-footer .contenitore { position: relative; z-index: 1; }

.hero__scorri { z-index: 1; }

/* nelle testate interne lo sfondo è già posizionato: le righe vanno sopra */
.hero-pagina--media::before { z-index: 1; }
.hero-pagina--media .contenitore { z-index: 2; }

/* un alone d'ambra intorno al testo sui fondi scuri, come il fosforo */
.hero-pagina--media .occhiello,
.cta-finale .occhiello,
.hero__occhiello {
  text-shadow: 0 0 14px rgba(227, 200, 138, 0.45);
}

/* ---------- 21.5 BOTTONI CON OMBRA PIENA ---------- */
.bottone {
  box-shadow: 3px 3px 0 0 var(--senape);
}
.bottone:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--senape);
}
.bottone:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 var(--senape);
}

.bottone--terracotta { box-shadow: 3px 3px 0 0 var(--antracite); }
.bottone--terracotta:hover { box-shadow: 5px 5px 0 0 var(--antracite); }
.bottone--terracotta:active { box-shadow: 1px 1px 0 0 var(--antracite); }

.bottone--chiaro { box-shadow: 3px 3px 0 0 var(--terracotta); }
.bottone--chiaro:hover { box-shadow: 5px 5px 0 0 var(--terracotta); }
.bottone--chiaro:active { box-shadow: 1px 1px 0 0 var(--terracotta); }

/* i contorni restano leggeri: niente ombra */
.bottone--contorno,
.bottone--contorno:hover,
.bottone--contorno:active { box-shadow: none; }

.filtro[aria-pressed="true"] { box-shadow: 3px 3px 0 0 var(--senape); }

/* ---------- 21.6 FINESTRE DI SISTEMA ---------- */
/* il banner cookie diventa una finestra di dialogo con barra del titolo */
.cookie {
  padding-top: 0;
  overflow: hidden;
}
.cookie::before {
  content: "FINESTRA DI SISTEMA";
  display: block;
  margin: 0 calc(var(--sp-3) * -1) var(--sp-3);
  padding: 0.55rem 0.9rem;
  background: var(--antracite);
  color: var(--ambra);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.4;
}
.cookie p { font-family: var(--sans); }

/* il messaggio di conferma come una risposta del terminale */
.messaggio-form::before {
  content: "MESSAGGIO REGISTRATO";
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--marrone-scuro);
  margin-bottom: 0.9rem;
}
.messaggio-form[data-esito="errore"]::before {
  content: "INVIO NON RIUSCITO";
  color: var(--terracotta-scura);
}

/* ---------- 21.7 NASTRO PERFORATO ---------- */
/* i separatori diventano una banda di carta a trascinamento */
hr {
  height: 20px;
  border: 0;
  background:
    linear-gradient(var(--sabbia-scura), var(--sabbia-scura)) top/100% 2px no-repeat,
    linear-gradient(var(--sabbia-scura), var(--sabbia-scura)) bottom/100% 2px no-repeat,
    radial-gradient(circle at center, var(--sabbia-scura) 2.6px, transparent 3px) center/18px 18px repeat-x;
}

/* ---------- RIDUCI MOVIMENTO ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__titolo::after,
  .pagina-404 h1::after { animation: none; opacity: 1; }
}

@media (max-width: 640px) {
  .cookie::before { letter-spacing: 0.16em; }
}

@media print {
  .hero::before, .hero-pagina--media::before, .cta-finale::before, .sito-footer::after { display: none; }
}

/* =========================================================
   22. PAGINE SPECIALI: LA LUCE DEL GIORNO
   ---------------------------------------------------------
   Un archivio ordinato per ora del giorno invece che per
   categoria. Muovendo il cursore cambiano fotografia, orario
   e colore della luce intorno.
   ========================================================= */

.luce {
  --cielo-a: #F4EAD6;
  --cielo-b: #E8D8BC;
  background: linear-gradient(175deg, var(--cielo-a) 0%, var(--cielo-b) 100%);
  transition: background 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
  position: relative;
  overflow: hidden;
}

/* Velo di carta calda sopra il colore del cielo: lascia passare
   la tinta dell'ora ma tiene il testo scuro sempre leggibile,
   anche sui cieli della sera. */
.luce::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(251, 245, 233, 0.62);
  pointer-events: none;
}
.luce > .contenitore { position: relative; z-index: 1; }

.luce__palco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  min-height: min(62vh, 620px);
}

.luce__vetrino {
  position: relative;
  display: grid;
  place-items: center;
  min-height: min(62vh, 620px);
}
.luce__vetrino img {
  max-height: min(62vh, 620px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  border-radius: var(--raggio-m);
  box-shadow: 0 30px 70px -34px rgba(64, 44, 24, 0.75);
  transition: opacity 420ms ease;
}
.luce__vetrino img[data-uscita="true"] { opacity: 0; }

.luce__ora {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(3.4rem, 2rem + 7vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--antracite);
  margin: 0 0 0.35rem;
  font-variant-numeric: tabular-nums;
}
.luce__nome {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
  color: var(--antracite);
  margin: 0 0 0.6rem;
  line-height: 1.15;
}
.luce__nota {
  color: var(--marrone-scuro);
  font-size: var(--fs-md);
  max-width: 40ch;
  min-height: 5.6em;
}
.luce__dettaglio {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  margin-top: var(--sp-3);
}

/* il cursore delle ore */
.luce__quadrante { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.luce__cursore {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  cursor: grab;
  padding-block: 10px;
}
.luce__cursore:active { cursor: grabbing; }
.luce__cursore::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7E93B5 0%, #E3C88A 25%, #FBF5E9 50%, #C08F3C 72%, #A95A3C 88%, #3E3A52 100%);
}
.luce__cursore::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7E93B5 0%, #E3C88A 25%, #FBF5E9 50%, #C08F3C 72%, #A95A3C 88%, #3E3A52 100%);
}
.luce__cursore::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  margin-top: -11px;
  border-radius: 999px;
  background: var(--antracite);
  border: 3px solid var(--bianco-caldo);
  box-shadow: 0 0 0 2px var(--antracite);
  cursor: grab;
}
.luce__cursore::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--antracite);
  border: 3px solid var(--bianco-caldo);
  box-shadow: 0 0 0 2px var(--antracite);
  cursor: grab;
}
.luce__cursore:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 6px; border-radius: 999px; }

.luce__tacche {
  display: flex;
  justify-content: space-between;
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--marrone-tenue);
}

.luce__frecce {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--sp-3);
}
.luce__frecce button {
  width: 46px; height: 46px;
  border-radius: 999px;
  border: 2px solid var(--bordo);
  background: rgba(255, 253, 249, 0.55);
  cursor: pointer;
  font-family: var(--mono);
  transition: border-color var(--t-veloce), background-color var(--t-veloce);
}
.luce__frecce button:hover { border-color: var(--senape); background: var(--senape-chiara); }

/* elenco completo, sempre presente anche senza JavaScript */
.luce-indice {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
}
.luce-indice__voce { display: block; }
/* L'altezza è fissata dal rapporto, non dagli attributi width/height:
   così non c'è scarto di layout qualunque sia il formato della foto. */
.luce-indice__voce img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raggio-m);
  transition: transform var(--t-lento);
}
.luce-indice__voce:hover img { transform: scale(1.03); }
.luce-indice__ora {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--antracite);
  margin-top: 0.7rem;
}
.luce-indice__testo { font-size: var(--fs-sm); color: var(--testo-soft); }

@media (max-width: 900px) {
  .luce__palco { grid-template-columns: 1fr; }
  .luce__vetrino, .luce__vetrino img { min-height: 0; max-height: 48vh; }
  .luce__nota { min-height: 0; }
}

/* =========================================================
   23. PAGINE SPECIALI: IL PROVINO A CONTATTO
   ---------------------------------------------------------
   La pellicola stesa sul tavolo luminoso, con i fori di
   trascinamento, i numeri dei fotogrammi e i cerchi a matita
   rossa sugli scatti scelti. Passando sopra si accende una
   lente d'ingrandimento.
   ========================================================= */

.tavolo-luminoso {
  background:
    radial-gradient(ellipse at 50% 30%, #FFFDF4 0%, #F1E6D0 60%, #E2D2B4 100%);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  position: relative;
}

.pellicola {
  background: #241C13;
  border-radius: 6px;
  position: relative;
  margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  box-shadow: 0 18px 44px -28px rgba(36, 28, 19, 0.9);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

/* I fori stanno sul nastro, non sulla finestra: così scorrono
   insieme alla pellicola quando la si trascina di lato. */
.pellicola__fotogrammi {
  display: flex;
  gap: 6px;
  min-width: min-content;
  padding: 26px 14px;
  position: relative;
}
.pellicola__fotogrammi::before,
.pellicola__fotogrammi::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 26px;
  background-image: radial-gradient(circle at center, transparent 0 4.5px, #241C13 5px);
  background-color: #C9B68F;
  background-size: 22px 26px;
  background-repeat: repeat-x;
  pointer-events: none;
}
.pellicola__fotogrammi::before { top: 0; }
.pellicola__fotogrammi::after { bottom: 0; }

.fotogramma {
  position: relative;
  flex: 0 0 auto;
  width: clamp(120px, 15vw, 190px);
  border: 0;
  padding: 0;
  background: #1A140D;
  cursor: zoom-in;
  border-radius: 2px;
  overflow: hidden;
}
.fotogramma img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  opacity: 0.92;
  transition: opacity var(--t-veloce);
}
.fotogramma:hover img { opacity: 1; }
.fotogramma__numero {
  position: absolute;
  left: 5px; bottom: 4px;
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ambra);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* il cerchio a matita rossa sugli scatti scelti */
.fotogramma--scelto::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 3px solid #D8432F;
  border-radius: 48% 52% 46% 54% / 54% 46% 52% 48%;
  transform: rotate(-2.5deg);
  pointer-events: none;
  opacity: 0.9;
}
.fotogramma--scelto:nth-of-type(even)::after { transform: rotate(3deg); }

.pellicola__bordo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #C9A24A;
  padding: 0 4px;
  margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
  text-transform: uppercase;
}

/* la lente d'ingrandimento */
.lente {
  position: fixed;
  width: 210px; height: 210px;
  border-radius: 999px;
  border: 3px solid var(--antracite);
  box-shadow: 0 0 0 4px rgba(253, 246, 232, 0.9), 0 18px 40px -18px rgba(36, 28, 19, 0.8);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 140;
  opacity: 0;
  transition: opacity 160ms ease;
  transform: translate(-50%, -50%);
}
.lente[data-attiva="true"] { opacity: 1; }
.lente::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 32% 26%, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 42%);
}

/* lo scarto: il fotogramma scelto e i suoi vicini */
.scarto {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.5rem, 0.4rem + 0.8vw, 1rem);
  align-items: center;
}
.scarto figure { margin: 0; }
.scarto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 6px;
  filter: grayscale(1) contrast(0.85) opacity(0.45);
}
.scarto figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  margin-top: 0.5rem;
  text-align: center;
}
.scarto__tenuto { grid-column: span 1; }
.scarto__tenuto img {
  filter: none;
  aspect-ratio: 3 / 2;
  box-shadow: 0 0 0 3px var(--terracotta), 0 16px 34px -20px rgba(64, 44, 24, 0.8);
  transform: scale(1.12);
  position: relative;
  z-index: 1;
}
.scarto__tenuto figcaption { color: var(--terracotta); font-weight: 700; }

@media (max-width: 640px) {
  .scarto { grid-template-columns: repeat(3, 1fr); }
  .scarto figure:first-child, .scarto figure:last-child { display: none; }
  .scarto__tenuto img { transform: none; }
}

/* =========================================================
   24. IL TERMINALE
   ---------------------------------------------------------
   Una riga di comando nascosta, in fosfori d'ambra, per
   navigare il sito digitando. È un di più: il sito funziona
   identico anche senza. Si apre dal piè di pagina o con
   Ctrl/Cmd + Alt + T, si chiude con Esc.
   ========================================================= */

.apri-terminale {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid rgba(255, 253, 249, 0.28);
  background: transparent;
  color: rgba(255, 253, 249, 0.82);
  border-radius: var(--raggio-s);
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: border-color var(--t-veloce), color var(--t-veloce);
}
.apri-terminale:hover { border-color: var(--ambra); color: var(--ambra); }
.apri-terminale span {
  display: inline-block;
  width: 7px; height: 12px;
  background: var(--ambra);
  animation: cursore 1.15s steps(1) infinite;
}

.terminale {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(20, 15, 9, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.terminale[data-aperto="true"] { display: flex; }

.terminale__finestra {
  width: min(100%, 760px);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: #14100A;
  border: 3px solid #3A2E1E;
  border-radius: 12px;
  box-shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  position: relative;
  animation: salita 260ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.terminale__finestra::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.6) 0 1px, transparent 1px 4px);
}

.terminale__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #2F2419;
  color: var(--ambra);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  padding: 0.55rem 0.9rem;
  text-transform: uppercase;
}
.terminale__chiudi {
  border: 2px solid rgba(227, 200, 138, 0.4);
  background: transparent;
  color: var(--ambra);
  border-radius: 999px;
  width: 30px; height: 30px;
  cursor: pointer;
  font-family: var(--mono);
  line-height: 1;
  flex: none;
}
.terminale__chiudi:hover { border-color: var(--ambra); }

.terminale__uscita {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.7;
  color: #E9CE93;
  text-shadow: 0 0 10px rgba(227, 200, 138, 0.28);
  position: relative;
  z-index: 1;
}
.terminale__uscita p { margin: 0 0 0.25rem; }
.terminale__uscita a { color: #FFE9B4; border-bottom: 1px solid rgba(255, 233, 180, 0.4); }
.terminale__uscita .eco { color: #9E8A5E; }
.terminale__uscita .errore { color: #E08A6A; }
.terminale__uscita .titolo { color: #FFF3D2; font-weight: 700; }

.terminale__riga {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1rem 0.9rem;
  border-top: 1px solid rgba(227, 200, 138, 0.18);
  position: relative;
  z-index: 1;
}
.terminale__prompt {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  color: #C9A24A;
  flex: none;
}
.terminale__input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: #FFF3D2;
  caret-color: var(--ambra);
  min-height: 0;
  padding: 0;
}

@media (max-width: 640px) {
  .terminale { align-items: stretch; padding: 0; }
  .terminale__finestra { max-height: 100%; border-radius: 0; border-width: 0; }
}

@media print { .terminale, .apri-terminale, .lente { display: none !important; } }

/* =========================================================
   25. MOVIMENTO
   ---------------------------------------------------------
   Quattro cose, tutte facoltative e tutte spente da sole se
   il dispositivo chiede di ridurre le animazioni.

   25.1 Passaggi fra le pagine (diaframma)
   25.2 Copertine che si trasformano
   25.3 La passata del tubo catodico
   25.4 Le fotografie che si sviluppano
   25.5 Barra di lettura mossa dallo scorrimento
   25.6 Il rullo meccanico dell'orario
   ========================================================= */

/* ---------- 25.1 PASSAGGI FRA LE PAGINE ----------
   Una riga sola accende le transizioni fra documenti: i browser
   che non le conoscono la ignorano e il sito resta identico.
   Funziona solo su un vero indirizzo web, non aprendo i file
   dal disco (il protocollo file:// non le consente).            */
@view-transition { navigation: auto; }

/* intestazione e piè di pagina restano fermi mentre il resto cambia */
.sito-header { view-transition-name: intestazione; }
.sito-footer { view-transition-name: piede; }

/* la pagina che esce sbiadisce in un viraggio caldo */
::view-transition-old(root) {
  animation: ft-pagina-esce 340ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* la pagina che entra si apre come un diaframma
   e si "sviluppa" dal seppia al colore pieno */
::view-transition-new(root) {
  animation: ft-pagina-entra 560ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes ft-pagina-esce {
  to {
    opacity: 0;
    transform: scale(0.988);
    filter: sepia(0.45) brightness(1.06);
  }
}

@keyframes ft-pagina-entra {
  from {
    opacity: 0.2;
    clip-path: circle(0% at 50% 42%);
    filter: sepia(0.7) contrast(0.9) blur(2px);
  }
  to {
    opacity: 1;
    clip-path: circle(145% at 50% 42%);
    filter: none;
  }
}

/* ---------- 25.2 COPERTINE CHE SI TRASFORMANO ----------
   La fotografia di una scheda e quella della pagina di destinazione
   hanno lo stesso nome: il browser le collega e ne anima una
   nell'altra. I nomi li assegna main.js in base all'indirizzo,
   così ogni storia nuova funziona senza toccare nulla.            */
::view-transition-group(*) {
  animation-duration: 540ms;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- 25.3 LA PASSATA DEL TUBO CATODICO ----------
   Una sola riga d'ambra che scende una volta al caricamento,
   come lo schermo di un monitor che si accende.                  */
.pagina-entra::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 150px;
  z-index: 125;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(227, 200, 138, 0) 0%,
    rgba(227, 200, 138, 0.22) 46%,
    rgba(216, 145, 60, 0.28) 54%,
    rgba(227, 200, 138, 0) 100%);
  animation: ft-passata 980ms cubic-bezier(0.4, 0, 0.25, 1) both;
}

@keyframes ft-passata {
  0%   { transform: translateY(-170px); opacity: 0; }
  14%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(102vh); opacity: 0; }
}

/* ---------- 25.4 LE FOTOGRAFIE CHE SI SVILUPPANO ----------
   Entrano sfocate e virate, come una stampa nel bagno di sviluppo,
   e in un secondo arrivano al colore definitivo.                  */
/* Si usa un'animazione e non una transizione: la scorciatoia
   "transition" avrebbe cancellato quelle già dichiarate altrove,
   spegnendo lo zoom morbido delle fotografie al passaggio del mouse. */
.pagina-pronta [data-anima] img {
  filter: sepia(0.55) contrast(0.9) brightness(1.04) blur(3px);
}
.pagina-pronta [data-anima].e-visibile img {
  animation: ft-sviluppo 1150ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes ft-sviluppo {
  from { filter: sepia(0.55) contrast(0.9) brightness(1.04) blur(3px); }
  to   { filter: sepia(0) contrast(1) brightness(1) blur(0); }
}

/* ---------- 25.5 BARRA DI LETTURA ----------
   Mossa direttamente dallo scorrimento, senza JavaScript,
   grazie a animation-timeline. Compare solo negli articoli.       */
.progresso-lettura {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 3px;
  z-index: 130;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--terracotta) 0%, var(--senape) 60%, var(--ambra) 100%);
  display: none;
}

@supports (animation-timeline: scroll(root block)) {
  .progresso-lettura {
    display: block;
    animation: ft-avanzamento linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes ft-avanzamento { to { transform: scaleX(1); } }

/* ---------- 25.6 IL RULLO MECCANICO DELL'ORARIO ----------
   Sulla pagina della luce, l'orario gira come il rullo di un
   vecchio contatore invece di cambiare di colpo.                  */
.luce__ora { display: inline-block; will-change: transform; }
.luce__ora--gira { animation: ft-rullo 420ms cubic-bezier(0.55, 0, 0.35, 1) both; }

@keyframes ft-rullo {
  0%   { transform: translateY(0) scaleY(1); opacity: 1; }
  42%  { transform: translateY(-46%) scaleY(0.82); opacity: 0; }
  43%  { transform: translateY(46%) scaleY(0.82); opacity: 0; }
  100% { transform: translateY(0) scaleY(1); opacity: 1; }
}

/* ---------- RIDUCI MOVIMENTO ----------
   Se il dispositivo lo chiede, resta solo il contenuto.           */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }

  .pagina-entra::before { display: none; }
  .pagina-pronta [data-anima] img { filter: none; }
  .pagina-pronta [data-anima].e-visibile img { animation: none; filter: none; }
  .progresso-lettura { display: none; }
  .luce__ora--gira { animation: none; }
}

@media print {
  .pagina-entra::before, .progresso-lettura { display: none !important; }
  [data-anima] img { filter: none !important; }
}


/* =========================================================
   26. LE GIORNATE (disponibilita.html)
   ---------------------------------------------------------
   Il calendario pubblico. Un muro di mesi, tre stati, nessun
   numero e nessuna prenotazione: dice soltanto quando si può
   lavorare. Tutti i colori arrivano dai token, quindi il tema
   scuro funziona da solo senza una riga in più.

   Il colore non è mai l'unica informazione: ogni giorno ha
   anche un segno di forma diversa (pieno, mezzo, barrato) e
   un aria-label per esteso. Chi non distingue verde e rosso
   legge comunque il calendario.
   ========================================================= */

.calendario { display: grid; gap: var(--sp-5); }

/* --- la riga del conto: quante giornate restano --- */
.conto {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--testo-soft);
  margin: 0;
}
.conto strong { color: var(--testo); font-size: var(--fs-md); }
.conto__sep { opacity: 0.45; padding: 0 0.15rem; }

/* --- la legenda --- */
.legenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.legenda__voce {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: var(--sp-3);
  border: 1px solid var(--bordo-soft);
  border-radius: var(--raggio-m);
  background: var(--superficie);
  font-size: var(--fs-sm);
  line-height: 1.6;
}
.legenda__voce b { display: block; font-family: var(--sans); font-weight: 600; }
.legenda__testo { display: block; color: var(--testo-soft); margin-top: 0.15rem; }
.legenda__segno {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 0.3rem;
  border-radius: 6px;
  border: 1.5px solid currentColor;
}
.legenda__voce--libero  .legenda__segno { color: var(--salvia); background: var(--salvia); }
.legenda__voce--sentire .legenda__segno {
  color: var(--senape);
  background: linear-gradient(135deg, var(--senape) 0 50%, transparent 50% 100%);
}
.legenda__voce--occupato .legenda__segno {
  color: var(--terracotta);
  background:
    linear-gradient(135deg, transparent 44%, var(--terracotta) 44% 56%, transparent 56%),
    color-mix(in srgb, var(--terracotta) 16%, transparent);
}

/* --- il muro dei mesi --- */
.mesi {
  display: grid;
  gap: var(--sp-5) var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  align-items: start;
}

/* ogni mese è una scatola a sé: la tabella non si allunga
   per pareggiare i mesi vicini, resta alta quanto le sue righe */
.mese { min-width: 0; }

.mese__tabella {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  table-layout: fixed;
}
/* le sette colonne valgono esattamente uguale: senza questo
   la larghezza dipende dal contenuto e i mesi non si allineano */
.mese__tabella col,
.mese__tabella th,
.mese__tabella td { width: calc(100% / 7); }
.mese__nome {
  caption-side: top;
  text-align: left;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: 1.1;
  padding-bottom: 0.7rem;
  color: var(--testo);
}
.mese__anno {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  color: var(--testo-soft);
  vertical-align: 0.35em;
  padding-left: 0.4rem;
}
.mese__tabella th {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--testo-soft);
  padding-bottom: 0.35rem;
}
.mese__tabella th abbr { text-decoration: none; border: 0; }

/* La cella della tabella resta una cella: niente flex, niente
   aspect-ratio qui sopra. La forma quadrata la dà il figlio. */
.mese__cella {
  padding: 0;
  vertical-align: top;
}

/* --- la singola giornata --- */
.giorno {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: var(--fs-sm);
  text-decoration: none;
  color: var(--testo);
  transition: transform var(--t-veloce), box-shadow var(--t-veloce), background-color var(--t-veloce);
}
.giorno__n { position: relative; z-index: 1; }

/* il segno di forma: quello che resta se il colore non si vede */
.giorno__segno {
  position: absolute;
  left: 50%;
  bottom: 5px;
  translate: -50% 0;
  width: 12px; height: 3px;
  border-radius: 2px;
  opacity: 0.9;
}

/* i riempitivi prima del 1 e dopo l'ultimo giorno: invisibili
   ma presenti, così ogni riga resta alta come le altre */
.giorno--fuori {
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}

.giorno--libero {
  background: color-mix(in srgb, var(--salvia) 20%, var(--superficie));
  border-color: color-mix(in srgb, var(--salvia) 45%, transparent);
}
.giorno--libero .giorno__segno { background: var(--salvia); }

.giorno--sentire {
  background: color-mix(in srgb, var(--senape) 22%, var(--superficie));
  border-color: color-mix(in srgb, var(--senape) 55%, transparent);
}
.giorno--sentire .giorno__segno {
  background: linear-gradient(90deg, var(--senape) 0 50%, transparent 50%);
  box-shadow: inset 0 0 0 1px var(--senape);
}

.giorno--occupato {
  background: color-mix(in srgb, var(--terracotta) 14%, var(--superficie));
  border-color: color-mix(in srgb, var(--terracotta) 34%, transparent);
  color: var(--testo-soft);
}
.giorno--occupato .giorno__n { text-decoration: line-through; text-decoration-thickness: 1px; }
.giorno--occupato .giorno__segno { background: var(--terracotta); opacity: 0.55; }

/* oggi: un anello, non un colore in più */
.giorno--oggi { box-shadow: 0 0 0 2px var(--testo); }

.giorno--passato {
  background: none;
  border-color: var(--bordo-soft);
  color: var(--testo-soft);
  opacity: 0.4;
}
.giorno--passato .giorno__segno { display: none; }
.giorno--passato .giorno__n { text-decoration: none; }

/* solo i giorni su cui si può scrivere si alzano */
a.giorno:hover {
  transform: translateY(-2px);
  box-shadow: var(--ombra-morbida);
}
a.giorno:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}
a.giorno.giorno--oggi:hover { box-shadow: 0 0 0 2px var(--testo), var(--ombra-morbida); }

/* --- le note, per le date che vanno spiegate --- */
.note-date { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--bordo-soft); border-radius: var(--raggio-m); overflow: hidden; }
.note-date__voce {
  display: grid;
  gap: 0.15rem 1rem;
  grid-template-columns: 15rem 9rem 1fr;
  align-items: baseline;
  padding: var(--sp-3);
  background: var(--superficie);
}
.note-date__quando { font-family: var(--mono); font-size: var(--fs-sm); color: var(--testo); }
.note-date__stato {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
}
.note-date__voce--sentire .note-date__stato { color: var(--senape); }
.note-date__voce--occupato .note-date__stato { color: var(--terracotta); }
.note-date__testo { color: var(--testo-soft); font-size: var(--fs-sm); }
.note-date__voce .freccia { grid-column: 3; font-size: var(--fs-sm); margin-top: 0.25rem; }

/* --- il richiamo al calendario nelle altre pagine --- */
.richiamo-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--bordo-soft);
  border-radius: var(--raggio-l);
  background: var(--superficie);
}
.richiamo-date__testo { flex: 1 1 18rem; margin: 0; }
.richiamo-date__testo b { display: block; font-family: var(--serif); font-size: var(--fs-lg); font-weight: 400; }
.richiamo-date__testo span { color: var(--testo-soft); font-size: var(--fs-sm); }
.richiamo-date__punti { display: flex; gap: 4px; }
.richiamo-date__punti i {
  width: 14px; height: 14px; border-radius: 5px; display: block;
}
.richiamo-date__punti i:nth-child(1) { background: color-mix(in srgb, var(--salvia) 60%, transparent); }
.richiamo-date__punti i:nth-child(2) { background: color-mix(in srgb, var(--senape) 60%, transparent); }
.richiamo-date__punti i:nth-child(3) { background: color-mix(in srgb, var(--terracotta) 50%, transparent); }

/* --- l'avviso sopra il modulo, quando si arriva da una data --- */
.data-scelta {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-left: 3px solid var(--salvia);
  border-radius: 0 var(--raggio-m) var(--raggio-m) 0;
  background: color-mix(in srgb, var(--salvia) 12%, var(--superficie));
  font-size: var(--fs-sm);
}
.data-scelta b { font-family: var(--mono); font-weight: 400; }

@media (max-width: 900px) {
  .legenda { grid-template-columns: 1fr; }
  .note-date__voce { grid-template-columns: 1fr; }
  .note-date__voce .freccia { grid-column: 1; }
}

@media (max-width: 420px) {
  .mesi { grid-template-columns: 1fr; }
  .mese__tabella { border-spacing: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  a.giorno:hover { transform: none; }
}

/* di notte le caselle vanno staccate un po' di più dal fondo */
[data-tema="scuro"] .giorno--libero { background: color-mix(in srgb, var(--salvia) 26%, var(--superficie)); }
[data-tema="scuro"] .giorno--sentire { background: color-mix(in srgb, var(--senape) 24%, var(--superficie)); }
[data-tema="scuro"] .giorno--occupato { background: color-mix(in srgb, var(--terracotta) 18%, var(--superficie)); }

/* in stampa il calendario deve restare leggibile in bianco e nero */
@media print {
  .giorno { border: 1px solid #999 !important; background: none !important; }
  .giorno--fuori { border: 0 !important; }
  .giorno--occupato .giorno__n { text-decoration: line-through; }
}
/* =========================================================
   27. LA STESSA SCENA, DUE SGUARDI
   ---------------------------------------------------------
   Due fotografie dello stesso momento, una di Nemi e una di
   Lele, separate da un cursore che si trascina.
   ========================================================= */

.sguardo { margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }

.sguardo__telaio {
  position: relative;
  border-radius: var(--raggio-m);
  overflow: hidden;
  background: var(--sabbia);
  aspect-ratio: 3 / 2;
  touch-action: pan-y;
}
.sguardo__telaio img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.sguardo__sopra { clip-path: inset(0 0 0 var(--taglio, 50%)); }

/* la linea di separazione e la maniglia */
.sguardo__linea {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--taglio, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--bianco-caldo);
  box-shadow: 0 0 14px rgba(36, 28, 19, 0.5);
  pointer-events: none;
}
.sguardo__maniglia {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px; height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--bianco-caldo);
  border: 3px solid var(--antracite);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--antracite);
  pointer-events: none;
}

/* il cursore vero: invisibile ma utilizzabile da tastiera */
.sguardo__cursore {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  min-height: 0;
}
.sguardo__cursore:focus-visible { opacity: 0; }
.sguardo__telaio:focus-within { outline: 2px solid var(--terracotta); outline-offset: 4px; }

.sguardo__etichette {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  pointer-events: none;
}
.sguardo__etichetta {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--chiaro);
  background: rgba(30, 23, 15, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}

.sguardo__note {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  margin-top: var(--sp-3);
}
.sguardo__nota p { font-size: var(--fs-sm); color: var(--testo-soft); }
.sguardo__firma {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 0.4rem;
  display: block;
}

@media (max-width: 640px) {
  .sguardo__note { grid-template-columns: 1fr; }
  .sguardo__telaio { aspect-ratio: 4 / 5; }
}

/* =========================================================
   28. QUANTO DURA UN ISTANTE
   ========================================================= */

.istante {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

.istante__schermo {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--raggio-m);
  background: #14100A;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.istante__schermo::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0.6) 0 1px, transparent 1px 4px);
}
.istante__schermo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
}
.istante__schermo img[data-visibile="true"] { opacity: 1; }
.istante__attesa {
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(227, 200, 138, 0.55);
}
.istante__schermo[data-acceso="true"] .istante__attesa { opacity: 0; }

.istante__tasti { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--sp-3); }
.istante__tasti button {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  border: 2px solid var(--bordo);
  background: transparent;
  border-radius: var(--raggio-s);
  padding: 0.55rem 1.1rem;
  min-height: 46px;
  cursor: pointer;
  transition: border-color var(--t-veloce), background-color var(--t-veloce), box-shadow var(--t-veloce);
}
.istante__tasti button:hover {
  border-color: var(--senape);
  background: rgba(227, 200, 138, 0.28);
  box-shadow: 3px 3px 0 0 var(--senape);
}
.istante__esito {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--terracotta);
  min-height: 3em;
  margin-top: var(--sp-2);
}

@media (max-width: 900px) {
  .istante { grid-template-columns: 1fr; }
}

/* =========================================================
   29. IL SUONO DI QUEL GIORNO
   ========================================================= */

.suono {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border: 2px solid var(--sabbia-scura);
  border-radius: var(--raggio-l);
  background: var(--crema);
  padding: 1rem 1.15rem;
  margin-block: var(--sp-4);
}
.suono[hidden] { display: none; }

.suono__tasto {
  flex: none;
  width: 54px; height: 54px;
  border-radius: 999px;
  border: 3px solid var(--antracite);
  background: var(--bianco-caldo);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--antracite);
  transition: background-color var(--t-veloce), box-shadow var(--t-veloce);
}
.suono__tasto:hover { background: var(--senape-chiara); box-shadow: 3px 3px 0 0 var(--senape); }

.suono__corpo { flex: 1 1 200px; min-width: 0; }
.suono__titolo {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  margin-bottom: 0.45rem;
}
.suono__onda {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 26px;
  overflow: hidden;
}
.suono__onda i {
  flex: 1;
  background: var(--sabbia-scura);
  border-radius: 999px;
  transition: background-color 200ms linear;
}
.suono__onda i[data-suonata="true"] { background: var(--terracotta); }
.suono__tempo {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--marrone-tenue);
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   30. LA MAPPA DEI LUOGHI
   ========================================================= */

.mappa {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: start;
}

.mappa__disegno {
  background: #F4EAD6;
  border: 3px solid var(--sabbia-scura);
  border-radius: var(--raggio-l);
  overflow: hidden;
}
.mappa__disegno svg { width: 100%; height: auto; display: block; }

.segnalino { cursor: pointer; }
.segnalino circle { transition: r 200ms ease, fill 200ms ease; }
.segnalino:hover circle,
.segnalino:focus-visible circle { fill: var(--terracotta); }
.segnalino:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.segnalino[aria-current="true"] circle { fill: var(--terracotta); }
.segnalino text {
  font-family: "Space Mono", monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  fill: #5A452F;
  pointer-events: none;
}

.mappa__scheda {
  position: sticky;
  top: calc(var(--header-h) + 1.5rem);
  border: 2px solid var(--sabbia-scura);
  border-radius: var(--raggio-l);
  background: var(--bianco-caldo);
  overflow: hidden;
}
.mappa__scheda img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.mappa__corpo { padding: clamp(1rem, 0.8rem + 1vw, 1.5rem); }
.mappa__zona {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  margin-bottom: 0.35rem;
}
.mappa__corpo h3 { margin-bottom: 0.5rem; }
.mappa__corpo p { font-size: var(--fs-sm); color: var(--testo-soft); }

.mappa-elenco {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(1rem, 0.8rem + 1.2vw, 1.75rem);
}
.mappa-elenco h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.mappa-elenco p { font-size: var(--fs-sm); color: var(--testo-soft); }

@media (max-width: 900px) {
  .mappa { grid-template-columns: 1fr; }
  .mappa__scheda { position: static; }
  .segnalino text { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .segnalino circle { transition: none; }
  .suono__onda i { transition: none; }
}

/* =========================================================
   31. GIOCA CON LA LUCE
   ---------------------------------------------------------
   La prova della settimana, il mazzo da cui estrarre e
   l'archivio delle prove già fatte.
   ========================================================= */

/* ---------- la carta della prova ---------- */
.prova {
  position: relative;
  background: var(--bianco-caldo);
  border: 3px solid var(--antracite);
  border-radius: var(--raggio-l);
  padding: clamp(1.5rem, 1rem + 2.6vw, 3rem);
  box-shadow: 8px 8px 0 0 var(--senape);
  overflow: hidden;
}
.prova::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg,
    var(--terracotta) 0 20%, var(--senape) 20% 40%,
    var(--salvia) 40% 60%, var(--teal) 60% 80%, var(--rosa-polvere) 80% 100%);
}

.prova__testata {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1.4rem;
  border-bottom: 2px dashed var(--sabbia-scura);
}
.prova__settimana {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
}
.prova__categoria {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marrone-scuro);
  background: var(--senape-chiara);
  border-radius: var(--raggio-s);
  padding: 0.28rem 0.85rem;
}

.prova__numero {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  line-height: 0.9;
  color: var(--sabbia-scura);
  display: block;
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
}
.prova__titolo {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem);
  line-height: 1.12;
  color: var(--antracite);
  margin: 0 0 var(--sp-3);
}
.prova__regola {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--testo);
  max-width: 54ch;
  margin: 0 0 var(--sp-3);
}
.prova__nota {
  font-size: var(--fs-sm);
  color: var(--testo-soft);
  max-width: 54ch;
  border-left: 4px solid var(--salvia);
  padding-left: 1rem;
  margin: 0;
}
.prova__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: var(--sp-4);
}

/* stato di caricamento, prima che il JavaScript scelga */
.prova[data-stato="attesa"] .prova__titolo,
.prova[data-stato="attesa"] .prova__regola { opacity: 0.35; }

/* ---------- il conto alla rovescia ---------- */
.conto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  margin-top: var(--sp-3);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
}
.conto { font-variant-numeric: tabular-nums; }

/* ---------- il mazzo da cui estrarre ---------- */
.mazzo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
}

.mazzo__carte {
  position: relative;
  aspect-ratio: 5 / 6;
  max-width: 340px;
  width: 100%;
  margin-inline: auto;
}
.mazzo__carta {
  position: absolute;
  inset: 0;
  border-radius: var(--raggio-l);
  border: 3px solid var(--antracite);
  background: var(--crema);
  display: grid;
  place-items: center;
}
.mazzo__carta:nth-child(1) { transform: rotate(-6deg) translateY(6px); background: var(--sabbia); }
.mazzo__carta:nth-child(2) { transform: rotate(3deg) translateY(3px); background: var(--crema); }
.mazzo__carta:nth-child(3) {
  transform: rotate(-1deg);
  background: var(--bianco-caldo);
  box-shadow: 6px 6px 0 0 var(--terracotta);
}
.mazzo__dorso {
  width: 62%;
  opacity: 0.5;
  color: var(--marrone-tenue);
}
.mazzo--gira .mazzo__carta:nth-child(3) {
  animation: ft-estrazione 520ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes ft-estrazione {
  0%   { transform: rotate(-1deg) scale(1); }
  35%  { transform: rotate(-9deg) translateY(-14px) scale(1.02); }
  100% { transform: rotate(-1deg) scale(1); }
}

.mazzo__esito {
  border: 2px solid var(--sabbia-scura);
  border-radius: var(--raggio-l);
  background: var(--bianco-caldo);
  padding: clamp(1.25rem, 1rem + 1.6vw, 2rem);
  min-height: 15rem;
}
.mazzo__vuoto {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--testo-soft);
}

/* ---------- il mazzo completo, in elenco ---------- */
.elenco-prove {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(0.75rem, 0.5rem + 1.2vw, 1.25rem);
}
.prova-mini {
  border: 2px solid var(--sabbia);
  border-radius: var(--raggio-m);
  padding: 1rem 1.1rem;
  background: var(--bianco-caldo);
  transition: border-color var(--t-veloce), transform var(--t-veloce);
}
.prova-mini:hover { border-color: var(--senape); transform: translateY(-2px); }
.prova-mini__categoria {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  display: block;
  margin-bottom: 0.35rem;
}
.prova-mini h3 {
  font-size: 1.1rem;
  margin-bottom: 0.35rem;
}
.prova-mini p { font-size: var(--fs-sm); color: var(--testo-soft); margin: 0; }

/* ---------- archivio delle prove fatte ---------- */
.archivio-prova {
  border-top: 3px solid var(--sabbia);
  padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.archivio-prova:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.archivio-prova__coppia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.75rem, 0.5rem + 1.4vw, 1.5rem);
  margin-top: var(--sp-3);
}
.archivio-prova__coppia img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raggio-m);
}
.archivio-prova__nota { margin-top: 0.8rem; }
.archivio-prova__nota p { font-size: var(--fs-sm); color: var(--testo-soft); }

.archivio-vuoto {
  border: 3px dashed var(--sabbia-scura);
  border-radius: var(--raggio-l);
  padding: clamp(1.75rem, 1.5rem + 2.5vw, 3rem);
  text-align: center;
}
.archivio-vuoto .occhiello { justify-content: center; display: inline-flex; }

@media (max-width: 900px) {
  .mazzo { grid-template-columns: 1fr; }
  .mazzo__carte { max-width: 260px; }
}
@media (max-width: 640px) {
  .archivio-prova__coppia { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mazzo--gira .mazzo__carta:nth-child(3) { animation: none; }
  .prova-mini:hover { transform: none; }
}

/* =========================================================
   32. BUONI REGALO E PACCHETTI
   ========================================================= */

.buoni {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1rem, 0.7rem + 1.4vw, 1.75rem);
}

.buono-scheda {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--bianco-caldo);
  border: 2px solid var(--sabbia-scura);
  border-radius: var(--raggio-l);
  padding: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
  transition: border-color var(--t-medio), transform var(--t-medio), box-shadow var(--t-medio);
}
.buono-scheda:hover {
  border-color: var(--senape);
  transform: translateY(-3px);
  box-shadow: var(--ombra-morbida);
}
.buono-scheda--scelto {
  border-color: var(--antracite);
  box-shadow: 6px 6px 0 0 var(--senape);
}
.buono-scheda__bollo {
  position: absolute;
  top: -12px;
  right: 1.25rem;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chiaro);
  background: var(--terracotta);
  border-radius: var(--raggio-s);
  padding: 0.28rem 0.8rem;
}
.buono-scheda__cifra {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3rem);
  line-height: 1;
  color: var(--antracite);
  font-variant-numeric: tabular-nums;
}
.buono-scheda__cifra span { font-size: 0.5em; color: var(--marrone-tenue); }
.buono-scheda h3 { font-size: 1.15rem; margin: 0; }
.buono-scheda p { font-size: var(--fs-sm); color: var(--testo-soft); margin: 0; }
.buono-scheda__nota {
  border-top: 2px solid var(--sabbia);
  padding-top: 0.8rem;
  margin-top: auto;
  font-size: var(--fs-xs);
  color: var(--marrone-tenue);
  font-family: var(--mono);
  line-height: 1.6;
}
.buono-scheda .bottone { margin-top: 0.4rem; }

/* pacchetti */
.pacchetto {
  display: flex;
  flex-direction: column;
  background: var(--bianco-caldo);
  border: 2px solid var(--sabbia);
  border-radius: var(--raggio-l);
  overflow: hidden;
  transition: border-color var(--t-medio), transform var(--t-medio);
}
.pacchetto:hover { border-color: var(--senape); transform: translateY(-3px); }
.pacchetto > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.pacchetto__corpo {
  padding: clamp(1.25rem, 1rem + 1.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  flex: 1;
}
.pacchetto__corpo h3 { margin: 0; font-size: var(--fs-h3); }
.pacchetto__sintesi { color: var(--testo-soft); font-size: var(--fs-sm); margin: 0; }
.pacchetto__prezzo {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--marrone-tenue);
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 2px solid var(--sabbia);
}

/* =========================================================
   33. IL BUONO STAMPABILE (buono.html)
   ========================================================= */

.stampa-schermo {
  background: var(--crema);
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem);
}

.certificato {
  --cert-bordo: #7E6244;
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  aspect-ratio: 297 / 210;              /* A4 orizzontale */
  background: #FDF8EC;
  border: 3px solid var(--cert-bordo);
  border-radius: 4px;
  padding: clamp(1.25rem, 0.8rem + 2.6vw, 2.75rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -34px rgba(64, 44, 24, 0.7);
  overflow: hidden;
}
.certificato::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--cert-bordo);
  opacity: 0.45;
  pointer-events: none;
  border-radius: 2px;
}
.certificato::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 10px;
  background: linear-gradient(90deg,
    #A95A3C 0 20%, #C08F3C 20% 40%,
    #8F9A76 40% 60%, #5F847F 60% 80%, #CE9784 80% 100%);
}

.certificato__testata {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(126, 98, 68, 0.35);
}
.certificato__segno { width: 34px; height: 46px; flex: none; color: #2F2419; }
.certificato__nome {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 90, "WONK" 1, "opsz" 144;
  font-size: clamp(1.2rem, 0.9rem + 1.2vw, 1.7rem);
  line-height: 1;
  color: #2F2419;
}
.certificato__sotto {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #7E6244;
  margin-top: 5px;
  display: block;
}
.certificato__tipo {
  margin-left: auto;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #A95A3C;
  text-align: right;
}

.certificato__centro {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding-block: clamp(0.75rem, 2vw, 1.5rem);
}
.certificato__riga {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7E6244;
}
.certificato__a {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 80, "WONK" 1, "opsz" 144;
  font-size: clamp(1.6rem, 1rem + 3vw, 2.9rem);
  line-height: 1.1;
  color: #2F2419;
  margin: 0;
}
.certificato__messaggio {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.2rem);
  line-height: 1.5;
  color: #43362A;
  max-width: 50ch;
  margin: 0.4rem 0 0;
}

.certificato__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(126, 98, 68, 0.35);
  margin-bottom: 10px;
}
.certificato__valore {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.3rem);
  line-height: 1;
  color: #A95A3C;
  font-variant-numeric: tabular-nums;
}
.certificato__dettagli {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: #7E6244;
  text-align: right;
  line-height: 1.8;
}
.certificato__dettagli strong { color: #2F2419; letter-spacing: 0.16em; }

/* il pannello con cui si compila */
.compila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: var(--sp-3);
  align-items: end;
}

@media (max-width: 640px) {
  .certificato { aspect-ratio: auto; min-height: 60vh; }
  .certificato__dettagli { text-align: left; }
}

/* ---------- come esce dalla stampante ---------- */
@media print {
  @page { size: A4 landscape; margin: 10mm; }

  .sito-header, .menu-mobile, .sito-footer, .cookie,
  .salta-al-contenuto, .compila-pannello, .stampa-istruzioni,
  .apri-terminale, .lightbox, .terminale { display: none !important; }

  body, .stampa-schermo { background: #fff !important; }
  .stampa-schermo { padding: 0 !important; }

  .certificato {
    max-width: none;
    width: 100%;
    aspect-ratio: auto;
    height: 185mm;
    box-shadow: none;
    border-width: 2px;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .certificato::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* =========================================================
   21. LA BARRA SUGLI SCHERMI STRETTI
   ---------------------------------------------------------
   Le voci di menu sono otto, più quattro azioni: in riga
   servono quasi milleseicento pixel. Si tolgono per gradi,
   dalla meno necessaria alla più necessaria. In più il JS
   misura davvero la riga (sezione 02) e, se non ci sta —
   per un carattere più grande, una pagina ingrandita, una
   voce aggiunta domani — scrive data-stretta="true" e passa
   al menu a schermo intero. Le voci non si accavallano mai.
   ========================================================= */

/* La barra non è un testo da leggere: non deve stare nei 1280
   pixel del contenuto. Con nove voci, il marchio e le azioni
   servono più di milleduecento pixel di riga utile, e dentro il
   contenitore stretto le scritte finivano sotto ai pulsanti.
   Qui la riga si prende tutta la larghezza che c'è. */
.sito-header > .contenitore,
.barra-servizio .contenitore { max-width: 1760px; }

/* il controllo di spazio del JS ha l'ultima parola */
.sito-header[data-stretta="true"] .nav-principale { display: none; }
.sito-header[data-stretta="true"] .hamburger { display: block; }
.sito-header[data-stretta="true"] .contatto-rapido { display: none; }

/* la navigazione non deve mai debordare sopra le azioni */
.nav-principale { flex: 0 1 auto; }
.header-azioni { flex: 0 0 auto; }
.marchio { flex: 0 0 auto; }

/* ≤1760 — la ricerca resta la sola icona: l'etichetta e la
   scorciatoia si riprendono un centinaio di pixel */
@media (max-width: 1760px) {
  .tasto-ricerca {
    min-width: 0;
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .tasto-ricerca__etichetta,
  .tasto-ricerca kbd { display: none; }
  /* dentro il menu a tutto schermo lo spazio c'è: là la scritta resta */
  .menu-mobile__strumenti .tasto-ricerca { width: auto; padding: 0 0.8rem; justify-content: flex-start; }
  .menu-mobile__strumenti .tasto-ricerca__etichetta { display: block; }
}

/* ≤1700 — via il pulsante lungo: il contatto resta nel pannello
   rapido, nel piè di pagina e nel menu del telefono */
@media (max-width: 1700px) {
  .header-azioni .bottone { display: none; }
}

/* ≤1520 — il menu si stringe: corpo minore, lettere meno spaziate */
@media (max-width: 1520px) {
  .nav-principale a,
  .nav-tasto {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    padding-inline: 0.38rem;
  }
  .nav-principale a::after,
  .nav-tasto::after { left: 0.38rem; right: 0.38rem; }
  .nav-principale > ul { gap: 0.3rem; }
  .marchio__nome { font-size: 1.45rem; }
}

/* ≤1400 — nove voci in riga non ci stanno più: menu a schermo
   intero, e il pulsante lungo torna perché lo spazio si libera */
@media (max-width: 1400px) {
  .nav-principale { display: none; }
  .hamburger { display: block; }
  .contatto-rapido { display: none; }
  .header-azioni .bottone { display: inline-flex; }
  .barra-servizio__canali .barra-servizio__link:not(:first-child) { display: none; }
}

@media (max-width: 900px) {
  .header-azioni .bottone { display: none; }
}

@media (max-width: 860px) {
  :root { --barra-h: 70px; }
  .barra-servizio { font-size: 0.7rem; }
  .barra-servizio__stato span:not(.stato-pallino) { display: none; }
  .barra-servizio__sep { display: none; }
}

@media (max-width: 560px) {
  .barra-servizio__canali .barra-servizio__link { display: none; }
  .palette { padding-inline: 0.7rem; }
  .palette__finestra { max-height: 78vh; }
  .palette__piede { display: none; }
}

/* il pannello largo non ha senso quando comanda il menu a
   tutto schermo: sotto quella soglia non si apre proprio */
@media (max-width: 1400px) {
  .nav-pannello { display: none !important; }
}

/* niente barra e niente palette in stampa */
@media print {
  .palette, .barra-servizio, .filo-lettura { display: none !important; }
}

/* =========================================================
   22. TEMA SCURO
   ---------------------------------------------------------
   Non è un filtro: è una seconda serie di valori per gli stessi
   nomi di colore. Il resto del foglio non cambia di una riga.
   `data-tema` lo scrive uno script minuscolo dentro <head>,
   prima che la pagina si disegni, così non c'è il lampo bianco.
   ========================================================= */
[data-tema="scuro"] {
  /* carta e fondi diventano legno bruciato */
  --bianco-caldo: #15120D;
  --crema: #1C1812;
  --sabbia: #282118;
  --sabbia-scura: #382F23;

  /* l'inchiostro si schiarisce */
  --marrone-tenue: #BBA88C;
  --marrone-scuro: #D9C8AB;
  --antracite: #F1E8D8;
  --testo: #EBE1D0;
  --testo-soft: #B6A68C;

  /* accenti un poco più accesi, per reggere sul fondo scuro */
  --senape: #D9AE5F;
  --terracotta: #D4805D;
  --terracotta-scura: #C06B4A;
  --terracotta-chiara: #E39C7C;
  --salvia: #A3AE89;
  --salvia-chiara: #272C21;
  --teal: #7FA8A1;
  --teal-chiaro: #1E2A28;
  --rosa-polvere: #D8A290;

  --bordo: rgba(241, 232, 216, 0.22);
  --bordo-soft: rgba(241, 232, 216, 0.12);

  --superficie: #201A13;
  --superficie-alt: #2A2219;
  --vetro: rgba(21, 18, 13, 0.86);

  --ombra-morbida: 0 16px 40px -26px rgba(0, 0, 0, 0.9);
  --ombra-alta: 0 28px 64px -30px rgba(0, 0, 0, 0.95);

  color-scheme: dark;
}

/* --- i blocchi che erano scuri restano scuri --- */
[data-tema="scuro"] .sito-footer,
[data-tema="scuro"] .cta-finale,
[data-tema="scuro"] .hero-pagina--media { background: #100D09; }
[data-tema="scuro"] .scheda-categoria { background: #2A2118; }
[data-tema="scuro"] .barra-servizio { background: #100D09; }
[data-tema="scuro"] .cookie::before { background: #100D09; }
[data-tema="scuro"] .filtro[aria-pressed="true"] { background: var(--senape); border-color: var(--senape); color: #1A150E; }
[data-tema="scuro"] .salta-al-contenuto { background: var(--senape); color: #1A150E; }

/* --- le fotografie scottano meno di notte --- */
[data-tema="scuro"] .figura img,
[data-tema="scuro"] .mosaico img,
[data-tema="scuro"] .scheda-storia img { filter: brightness(0.92) saturate(0.96); }

/* --- la grana della carta va tolta, di notte fa sporco --- */
[data-tema="scuro"] body::after { opacity: 0.25; }

/* --- il bottone chiaro sul fondo scuro --- */
[data-tema="scuro"] .bottone--chiaro { --bg: var(--senape); --fg: #1A150E; --bd: var(--senape); }

/* --- campi del modulo --- */
[data-tema="scuro"] .campo input,
[data-tema="scuro"] .campo textarea,
[data-tema="scuro"] .campo select { background: var(--superficie); color: var(--testo); }

/* --- l'intestazione solida di notte --- */
[data-tema="scuro"] .sito-header--solido { box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.9); }

/* Chi ha chiesto meno movimento non vuole nemmeno che il tema
   cambi con una dissolvenza: la transizione la mettiamo solo
   quando è gradita, e solo sui colori. */
@media (prefers-reduced-motion: no-preference) {
  html[data-transizione-tema] body,
  html[data-transizione-tema] .sezione,
  html[data-transizione-tema] .sito-footer {
    transition: background-color 320ms ease, color 320ms ease;
  }
}

/* =========================================================
   27. SCATTA AL MOMENTO GIUSTO (scatta.html)
   ---------------------------------------------------------
   Il mirino è una finestra 3:2 con dentro una scena disegnata
   solo con i gradienti: niente immagini da scaricare, quindi
   la pagina pesa come le altre anche sul telefono.

   Il soggetto e l'ago del fuoco si muovono con transform:
   è l'unica proprietà che il browser anima senza rifare il
   calcolo della pagina sessanta volte al secondo.

   Il colore non è mai l'unica informazione: il punteggio di
   ogni posa è scritto in cifre dentro il provino, e la barra
   del fuoco ha una zona chiara larga quanto la tolleranza.
   ========================================================= */

.scatto {
  display: grid;
  gap: var(--sp-2);
}

/* --- la riga dei numeri sopra il mirino --- */
.scatto__testata {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--testo-soft);
}
.scatto__dato { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.scatto__dato i { font-style: normal; opacity: 0.45; }
.scatto__dato strong {
  font-family: var(--serif);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--testo);
}
.scatto__dato--centro { text-align: center; }
.scatto__dato--fine { text-align: right; }

/* --- il mirino --- */
.scatto__mirino {
  position: relative;
  aspect-ratio: 3 / 2;
  min-height: 270px;
  border-radius: var(--raggio-l);
  border: 1px solid var(--bordo);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--ombra-morbida);
  cursor: crosshair;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- la scena: cielo, sole, colline, terra --- */
.scatto__scena {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #CFDCD8 0%, #E8D8BC 58%, #E3C88A 100%);
}
.scatto__sole {
  position: absolute;
  right: 13%;
  top: 13%;
  width: clamp(44px, 10%, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #FFF6E2 0%, var(--senape-chiara) 52%, var(--senape) 100%);
  box-shadow: 0 0 50px 16px rgba(227, 200, 138, 0.55);
}
.scatto__collina {
  position: absolute;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.scatto__collina--fondo {
  left: -14%; right: -22%;
  bottom: 15%;
  height: 42%;
  background: color-mix(in srgb, var(--salvia) 62%, var(--sabbia));
  opacity: 0.85;
}
.scatto__collina--primo {
  left: -28%; right: 42%;
  bottom: 15%;
  height: 26%;
  background: color-mix(in srgb, var(--teal) 55%, var(--salvia));
}
.scatto__terra {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 15%;
  background: linear-gradient(180deg, var(--sabbia-scura) 0%, var(--marrone-tenue) 100%);
}

/* --- la griglia dei terzi --- */
.scatto__terzi { position: absolute; inset: 0; pointer-events: none; }
.scatto__terzi i { position: absolute; background: rgba(255, 253, 249, 0.42); }
.scatto__terzi i:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.scatto__terzi i:nth-child(2) { left: 66.666%; top: 0; bottom: 0; width: 1px; }
.scatto__terzi i:nth-child(3) { top: 33.333%; left: 0; right: 0; height: 1px; }
.scatto__terzi i:nth-child(4) { top: 66.666%; left: 0; right: 0; height: 1px; }

/* --- le parentesi del punto giusto --- */
.scatto__bersaglio {
  position: absolute;
  top: 14%;
  bottom: 12%;
  left: 0;
  width: 22%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  will-change: transform;
}
.scatto__bersaglio i {
  width: clamp(9px, 2.2%, 16px);
  border: 2px solid #FFF6E2;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(47, 36, 25, 0.28);
}
.scatto__bersaglio i:first-child { border-right: 0; border-radius: 3px 0 0 3px; }
.scatto__bersaglio i:last-child { border-left: 0; border-radius: 0 3px 3px 0; }

/* --- il soggetto --- */
.scatto__soggetto {
  position: absolute;
  left: 0;
  bottom: 13%;
  width: clamp(24px, 5.4%, 38px);
  color: var(--antracite);
  filter: blur(var(--sfoca, 0px));
  will-change: transform, filter;
  pointer-events: none;
}
.scatto__figura { display: block; width: 100%; height: auto; }

/* --- gli angoli del mirino --- */
.scatto__cornice { position: absolute; inset: 3.5%; pointer-events: none; }
.scatto__cornice i {
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid rgba(255, 253, 249, 0.8);
}
.scatto__cornice i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.scatto__cornice i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.scatto__cornice i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.scatto__cornice i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* --- la barra della messa a fuoco --- */
.scatto__fuoco {
  position: absolute;
  left: 7%; right: 7%;
  bottom: 7%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}
.scatto__fuoco-etichetta {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #FFFDF9;
  text-shadow: 0 1px 3px rgba(47, 36, 25, 0.6);
}
.scatto__fuoco-pista {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: rgba(47, 36, 25, 0.34);
  box-shadow: inset 0 0 0 1px rgba(255, 253, 249, 0.3);
}
.scatto__fuoco-zona {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 24%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--fosforo);
}
.scatto__fuoco-ago {
  position: absolute;
  top: -5px;
  left: 0;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #FFFDF9;
  box-shadow: 0 1px 4px rgba(47, 36, 25, 0.5);
  will-change: transform;
}

/* --- il lampo dello scatto --- */
.scatto__lampo {
  position: absolute;
  inset: 0;
  background: #FFFDF9;
  opacity: 0;
  pointer-events: none;
}
.scatto__lampo[data-attivo="si"] { animation: scatto-lampo 380ms ease-out; }
@keyframes scatto-lampo {
  0% { opacity: 0.9; }
  100% { opacity: 0; }
}

/* --- il cartellino con l'esito della posa --- */
.scatto__esito {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0.55rem 1.1rem;
  border-radius: var(--raggio-s);
  background: rgba(255, 253, 249, 0.95);
  border: 1px solid var(--bordo);
  font-family: var(--serif);
  font-size: var(--fs-md);
  color: var(--testo);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--ombra-morbida);
}
.scatto__esito b { font-family: var(--mono); font-size: var(--fs-sm); }
.scatto__esito[data-q="ottima"] b { color: var(--salvia); }
.scatto__esito[data-q="buona"] b { color: var(--senape); }
.scatto__esito[data-q="mossa"] b { color: var(--terracotta); }

/* --- tutta l'area è un bottone, ma solo per il dito --- */
.scatto__tocco {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: crosshair;
}

/* --- i due veli: prima di iniziare e alla fine --- */
.scatto__velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.7rem;
  padding: clamp(1rem, 0.6rem + 2.4vw, 2rem);
  text-align: center;
  overflow: auto;
  color: #FFFDF9;
  background: color-mix(in srgb, var(--antracite) 82%, transparent);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.scatto__velo[hidden] { display: none; }
.scatto__velo-occhiello {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--senape-chiara);
}
.scatto__velo-testo {
  margin: 0;
  max-width: 44ch;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: rgba(255, 253, 249, 0.86);
}
.scatto__velo-totale {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--fs-h3);
  line-height: 1.1;
}
.scatto__velo-totale strong { font-weight: 500; color: var(--senape-chiara); }
.scatto__velo-azioni { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.scatto__velo .bottone--contorno { --fg: #FFFDF9; --bd: rgba(255, 253, 249, 0.6); }
.scatto__velo .bottone--contorno:hover { --bg: #FFFDF9; --fg: var(--antracite); --bd: #FFFDF9; }

/* --- il provino delle dieci pose --- */
.scatto__provino {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.35rem;
  width: min(100%, 380px);
}
.scatto__provino li {
  aspect-ratio: 3 / 2;
  display: grid;
  place-content: center;
  border-radius: 5px;
  border: 1px solid rgba(255, 253, 249, 0.34);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--antracite);
  background: rgba(255, 253, 249, 0.14);
}
.scatto__provino li[data-q="ottima"] { background: var(--salvia); }
.scatto__provino li[data-q="buona"] { background: var(--senape-chiara); }
.scatto__provino li[data-q="mossa"] { background: var(--terracotta-chiara); }
.scatto__provino li[data-q="nulla"] { color: rgba(255, 253, 249, 0.7); border-style: dashed; }

/* --- il bottone grande e la riga di stato --- */
.scatto__pulsante { min-height: 58px; font-size: var(--fs-sm); gap: 0.6rem; }
.scatto__pulsante-segno {
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-shadow: inset 0 0 0 2px transparent;
  flex: none;
}
.scatto__pulsante[disabled] { opacity: 0.45; cursor: not-allowed; }
.scatto__stato {
  margin: 0;
  min-height: 1.5em;
  text-align: center;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  color: var(--testo-soft);
}

/* --- le quattro regole --- */
.scatto-regole {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--sp-4);
}
.scatto-regola {
  padding: var(--sp-3);
  border: 1px solid var(--bordo-soft);
  border-radius: var(--raggio-m);
  background: var(--superficie);
}
.scatto-regola h3 { margin: 0.35rem 0 0.4rem; font-size: var(--fs-lg); }
.scatto-regola p { margin: 0; font-size: var(--fs-sm); color: var(--testo-soft); line-height: 1.65; }
.scatto-regola__numero {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--terracotta);
}

@media (max-width: 640px) {
  .scatto-regole { grid-template-columns: 1fr; }
  .scatto__mirino { aspect-ratio: 4 / 3; }
  .scatto__testata { font-size: 0.68rem; letter-spacing: 0.1em; }
}

/* --- il passo del soggetto: si muove solo se fa piacere --- */
@media (prefers-reduced-motion: no-preference) {
  .scatto[data-stato="gioca"] .scatto__figura {
    animation: scatto-passo 620ms steps(2, end) infinite alternate;
    transform-origin: 50% 100%;
  }
  .scatto[data-stato="gioca"] .scatto__bersaglio i {
    animation: scatto-respiro 1800ms ease-in-out infinite;
  }
}
@keyframes scatto-passo {
  from { transform: translateY(0) scaleY(1); }
  to   { transform: translateY(-2%) scaleY(1.015); }
}
@keyframes scatto-respiro {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

/* --- di notte il cielo cambia, come è giusto --- */
[data-tema="scuro"] .scatto__scena {
  background: linear-gradient(180deg, #1B2430 0%, #3A3A3C 52%, #5A452F 100%);
}
[data-tema="scuro"] .scatto__sole {
  background: radial-gradient(circle at 42% 38%, #FFFDF9 0%, #E8E3D4 55%, #BFB9A6 100%);
  box-shadow: 0 0 46px 14px rgba(232, 227, 212, 0.28);
}
[data-tema="scuro"] .scatto__collina--fondo { background: #2E3A32; opacity: 1; }
[data-tema="scuro"] .scatto__collina--primo { background: #1F2A2B; }
[data-tema="scuro"] .scatto__terra { background: linear-gradient(180deg, #2A2118 0%, #171310 100%); }
[data-tema="scuro"] .scatto__soggetto { color: #0C0A08; }
[data-tema="scuro"] .scatto__esito { background: rgba(32, 26, 19, 0.95); }
[data-tema="scuro"] .scatto__velo { background: color-mix(in srgb, #100D09 88%, transparent); }