/* ================================================================
   FONT SELF-HOSTED (2 settembre 2026, cantiere SEO — S07)
   Tre file variabili in assets/fonts (scaricati da Google Fonts,
   sottoinsieme latino): niente più richieste a googleapis/gstatic.
   ================================================================ */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-corsivo.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/jost.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   MICHELESSI MARBLE — SITO NUOVO
   Sistema di design: bianco marmo, nero profondo, accento oro.
   Tipografia: Cormorant Garamond (serif) + Jost (sans).
   Nessuna libreria esterna. Vanilla CSS.
   ============================================================ */

/* ------------------------------------------------------------
   1. VARIABILI E FONDAMENTA
   ------------------------------------------------------------ */
:root {
  /* Colori */
  --bianco:        #F6F4EF;   /* bianco marmo, caldo */
  --bianco-puro:   #FFFFFF;
  --nero:          #0E0D0B;   /* nero profondo */
  --nero-morbido:  #171512;
  --oro:           #B08D57;   /* ottone / oro antico */
  --oro-chiaro:    #CBA968;
  --oro-scuro:     #7F6238;   /* oro per i testi piccoli su fondo chiaro (contrasto ≥ 4,5:1) */
  --pietra:        #6E6A63;   /* grigio pietra per testi secondari */
  --linea:         rgba(14, 13, 11, 0.14);
  --linea-chiara:  rgba(246, 244, 239, 0.18);

  /* Tipografia */
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Segoe UI", sans-serif;

  /* Misure */
  --largo:    1360px;         /* contenitore massimo */
  --medio:    1100px;
  --stretto:  720px;          /* colonna di lettura */
  --bordo:    clamp(1.25rem, 4vw, 3.5rem);   /* margine laterale fluido */
  --respiro:  clamp(4.5rem, 12vh, 9rem);     /* spazio verticale fra sezioni */
  --testata-h: 8.25rem;       /* altezza header desktop (logo + voci) */

  /* Animazione */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --durata: 1s;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--oro); color: var(--bianco-puro); }

/* ------------------------------------------------------------
   2. UTILITÀ TIPOGRAFICHE
   ------------------------------------------------------------ */

/* Etichetta: piccola voce sans, maiuscola, spaziata, con filo oro */
.etichetta {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oro);
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.etichetta::before {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--oro);
  flex: none;
}
.etichetta--centrata { justify-content: center; }
.etichetta--centrata::after {
  content: "";
  width: 2.5rem;
  height: 1px;
  background: var(--oro);
  flex: none;
}

/* Titoli enormi */
.titolo-enorme {
  font-size: clamp(2.75rem, 8.5vw, 7rem);
  letter-spacing: -0.01em;
}
.titolo-grande {
  font-size: clamp(2.1rem, 5vw, 4rem);
}
.titolo-medio {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}
em, .corsivo-oro {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--oro);
}

/* Numero di capitolo: cifra serif enorme, quasi filigrana */
.numero-capitolo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4.5rem, 10vw, 8.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--oro);
  user-select: none;
}

/* Colonna di lettura */
.prosa {
  max-width: var(--stretto);
  font-size: clamp(1.02rem, 1.35vw, 1.15rem);
  color: var(--pietra);
}
.prosa strong { color: var(--nero); font-weight: 500; }

/* ------------------------------------------------------------
   3. CONTENITORI E SEZIONI
   ------------------------------------------------------------ */
.contenitore {
  width: min(var(--largo), 100% - var(--bordo) * 2);
  margin-inline: auto;
}
.contenitore--medio  { width: min(var(--medio),  100% - var(--bordo) * 2); }
.contenitore--stretto{ width: min(var(--stretto), 100% - var(--bordo) * 2); }

.sezione { padding-block: var(--respiro); }
.sezione--scura {
  background: var(--nero);
  color: var(--bianco);
}
.sezione--scura .prosa { color: rgba(246, 244, 239, 0.72); }

/* Capitolo: numero in filigrana + testo, composizione asimmetrica */
.capitolo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.capitolo .numero-capitolo { margin-top: -0.12em; }

/* Filo divisore */
.filo {
  border: none;
  height: 1px;
  background: var(--linea);
  margin: 0;
}

/* Bottone maison: rettangolo sottile, riempimento oro al passaggio */
.bottone {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: currentColor;
  border: 1px solid currentColor;
  padding: 1.1em 2.8em;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color 0.5s var(--curva), border-color 0.5s var(--curva);
}
.bottone::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--curva);
  z-index: -1;
}
.bottone:hover, .bottone:focus-visible {
  color: var(--bianco-puro);
  border-color: var(--oro);
}
.bottone:hover::before, .bottone:focus-visible::before { transform: scaleX(1); }

/* ------------------------------------------------------------
   4. TESTATA (header fisso: logo sopra, voci sotto)
   ------------------------------------------------------------ */
.testata {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(14, 13, 11, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--bianco);
  border-bottom: 1px solid var(--linea-chiara);
  transition: transform 0.5s var(--curva), background 0.5s var(--curva);
}

.testata__interno {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1.1rem var(--bordo) 0.65rem;
}

.testata__logo img {
  height: clamp(2.75rem, 4vw, 3.25rem);  /* ~44-52px: logo largo (M su colonna + scritta, ~3,2:1) */
  width: auto;
  max-width: min(70vw, 12rem);
  object-fit: contain;
  transition: height 0.5s var(--curva);
}

/* Testata compatta dopo lo scorrimento */
.testata--compatta .testata__logo img { height: 2.1rem; }

/* Bottone hamburger (solo mobile) */
.testata__apri {
  display: none;
  position: absolute;
  right: var(--bordo);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--bianco);
  cursor: pointer;
  padding: 0.6rem;
}
.testata__apri span {
  display: block;
  width: 1.7rem;
  height: 1px;
  background: currentColor;
  margin: 0.42rem 0;
  transition: transform 0.4s var(--curva), opacity 0.3s;
}
/* Trasformazione in X quando il menù è aperto */
body.menu-aperto .testata__apri span:nth-child(1) { transform: translateY(0.46rem) rotate(45deg); }
body.menu-aperto .testata__apri span:nth-child(2) { opacity: 0; }
body.menu-aperto .testata__apri span:nth-child(3) { transform: translateY(-0.46rem) rotate(-45deg); }

/* --- Menù principale --- */
.menu__lista {
  list-style: none;
  margin: 0;
  padding: 0.35rem var(--bordo) 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: clamp(0.9rem, 1.6vw, 1.6rem);
  row-gap: 0.2rem;
}

.menu__voce { position: relative; }

.menu__voce > a {
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 0.5rem 0.1rem;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  color: rgba(246, 244, 239, 0.85);
  transition: color 0.35s;
}
.menu__voce > a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0.2rem;
  height: 1px;
  background: var(--oro);
  transition: right 0.45s var(--curva);
}
.menu__voce > a:hover,
.menu__voce > a:focus-visible,
.menu__voce > a[aria-current="page"] { color: var(--oro-chiaro); }
.menu__voce > a:hover::after,
.menu__voce > a:focus-visible::after,
.menu__voce > a[aria-current="page"]::after { right: 0; }

/* Freccia dei sottomenù: sul desktop è nascosta (si apre al passaggio) */
.menu__freccia {
  display: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0.4rem 0.8rem;
  font-size: 0.9rem;
  line-height: 1;
}
.menu__freccia::before { content: "+"; font-family: var(--sans); font-weight: 300; }
.menu__voce.aperta > .menu__freccia::before { content: "\2212"; } /* segno meno */

/* Sottomenù a tendina (desktop) */
.sottomenu {
  list-style: none;
  margin: 0;
  padding: 0.9rem 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0.8rem);
  min-width: 15rem;
  background: var(--nero-morbido);
  border: 1px solid var(--linea-chiara);
  border-top: 2px solid var(--oro);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--curva), transform 0.35s var(--curva), visibility 0.35s;
  z-index: 50;
}
.menu__voce:hover > .sottomenu,
.menu__voce:focus-within > .sottomenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.sottomenu a {
  display: block;
  padding: 0.55rem 1.6rem;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.8);
  white-space: nowrap;
  transition: color 0.3s, padding-left 0.3s var(--curva);
}
.sottomenu a:hover,
.sottomenu a:focus-visible,
.sottomenu a[aria-current="page"] { color: var(--oro-chiaro); padding-left: 2rem; }

/* Il contenuto parte sotto la testata */
main { padding-top: var(--testata-h); }
main:has(> .eroe:first-child) { padding-top: 0; } /* l'eroe passa sotto la testata */

/* ------------------------------------------------------------
   5. MENÙ A SCHERMO INTERO (mobile / tablet)
   ------------------------------------------------------------ */
@media (max-width: 1099px) {
  :root { --testata-h: 4.6rem; }

  .testata__interno {
    justify-content: flex-start;
    padding: 0.9rem var(--bordo);
  }
  .testata__logo img { height: 2.25rem; }  /* ~36px su telefono */
  .testata__apri { display: block; }

  .menu {
    position: fixed;
    inset: 0;
    top: var(--testata-h);
    background: var(--nero);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1.5rem);
    transition: opacity 0.45s var(--curva), transform 0.45s var(--curva), visibility 0.45s;
  }
  body.menu-aperto .menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  body.menu-aperto { overflow: hidden; }

  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    padding: 2rem var(--bordo) 4rem;
    gap: 0;
  }
  .menu__voce {
    border-bottom: 1px solid var(--linea-chiara);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .menu__voce > a {
    font-family: var(--serif);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
    padding: 1rem 0;
    white-space: normal;
  }
  .menu__voce > a::after { display: none; }
  .menu__freccia { display: block; color: var(--oro); font-size: 1.3rem; }

  /* Sottomenù a fisarmonica */
  .sottomenu {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    background: none;
    border: none;
    padding: 0 0 1rem 1.2rem;
    display: none;
    opacity: 1;
    visibility: visible;
  }
  .menu__voce.aperta > .sottomenu { display: block; }
  .menu__voce:hover > .sottomenu { transform: none; }
  .sottomenu a {
    padding: 0.5rem 0;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
  }
  .sottomenu a:hover { padding-left: 0.4rem; }
}

/* ------------------------------------------------------------
   6. EROE CINEMATOGRAFICO
   ------------------------------------------------------------ */
.eroe {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--bianco);
  overflow: hidden;
  isolation: isolate;
}
.eroe--basso { min-height: 72svh; } /* variante per pagine interne */

.eroe__sfondo {
  position: absolute;
  inset: -12% 0;      /* margine extra per il parallasse */
  z-index: -2;
}
.eroe__sfondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Velo scuro: il testo si legge sempre */
.eroe__velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(14,13,11,0.82) 0%, rgba(14,13,11,0.25) 45%, rgba(14,13,11,0.35) 100%);
}

.eroe__contenuto {
  width: min(var(--largo), 100% - var(--bordo) * 2);
  margin-inline: auto;
  padding-bottom: clamp(4rem, 12vh, 8rem);
}
.eroe__titolo {
  font-size: clamp(3rem, 10vw, 8.5rem);
  letter-spacing: -0.015em;
  max-width: 12ch;
}
.eroe__sottotitolo {
  max-width: 34rem;
  margin-top: 1.75rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  color: rgba(246, 244, 239, 0.82);
}

/* Invito a scorrere: filo verticale che pulsa */
.eroe__giu {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: clamp(3.5rem, 8vh, 6rem);
  background: rgba(246, 244, 239, 0.35);
  overflow: hidden;
}
.eroe__giu::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--oro);
  animation: scendi 2.4s var(--curva) infinite;
}
@keyframes scendi {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ------------------------------------------------------------
   7. SCHEDA FOTOGRAFIA (il cuore del sito)
   Tre varianti; la descrizione sta SEMPRE sotto o accanto alla foto.
   ------------------------------------------------------------ */
.scheda-foto {
  margin-block: var(--respiro);
}
.scheda-foto:first-of-type { margin-top: 0; }

.scheda-foto__figura {
  margin: 0;
  overflow: hidden;
  background: var(--nero-morbido);
}
.scheda-foto__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scheda-foto__numero {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--oro);
  margin: 0 0 1rem;
}

.scheda-foto__titolo {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  margin-bottom: 1.25rem;
}

.scheda-foto__descrizione {
  color: var(--pietra);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  max-width: 62ch;
}
.sezione--scura .scheda-foto__descrizione { color: rgba(246,244,239,0.72); }

/* --- VARIANTE A (base): foto larga, testo sotto sfalsato --- */
.scheda-foto--quadro .scheda-foto__figura {
  aspect-ratio: 16 / 9;
  max-height: 82vh;
}
.scheda-foto--quadro .scheda-foto__testo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}
/* il titolo (con numero ed etichetta) sta a sinistra, la descrizione a destra */

/* --- VARIANTE B (affiancata): foto e testo fianco a fianco --- */
.scheda-foto--affiancata {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: center;
}
.scheda-foto--affiancata .scheda-foto__figura { aspect-ratio: 4 / 3; }
/* Inversa: la foto passa a destra */
.scheda-foto--affiancata.scheda-foto--inversa .scheda-foto__figura { order: 2; }
.scheda-foto--affiancata.scheda-foto--inversa .scheda-foto__testo  { order: 1; }

/* --- VARIANTE C (alta): foto verticale, testo in colonna accanto --- */
.scheda-foto--alta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
}
.scheda-foto--alta .scheda-foto__figura { aspect-ratio: 3 / 4; }
.scheda-foto--alta .scheda-foto__testo { padding-top: clamp(1rem, 6vw, 5rem); } /* sfalsato: respiro asimmetrico */

/* Tutte le varianti tornano in colonna sul telefono: foto sopra, testo SOTTO */
@media (max-width: 820px) {
  .scheda-foto--quadro .scheda-foto__testo,
  .scheda-foto--affiancata,
  .scheda-foto--alta {
    display: block;
  }
  .scheda-foto--affiancata .scheda-foto__testo,
  .scheda-foto--alta .scheda-foto__testo {
    padding-top: 1.75rem;
  }
  .scheda-foto--quadro .scheda-foto__figura { aspect-ratio: 4 / 3; }
  .scheda-foto__descrizione { max-width: none; }
}

/* ------------------------------------------------------------
   8. GRIGLIA ANTEPRIME (rimandi ad altre pagine, foto mini)
   ------------------------------------------------------------ */
.griglia-anteprime {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.anteprima { position: relative; overflow: hidden; }
.anteprima img {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--curva);
}
.anteprima:hover img { transform: scale(1.06); }
.anteprima__velo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(14,13,11,0.75), transparent 55%);
  color: var(--bianco);
}
.anteprima__velo h3 { font-size: 1.4rem; }
@media (max-width: 820px) {
  .griglia-anteprime { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .griglia-anteprime { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   9. CHIUSURA (footer)
   ------------------------------------------------------------ */
.chiusura {
  background: var(--nero);
  color: var(--bianco);
  margin-top: var(--respiro);
}
.chiusura__interno {
  width: min(var(--largo), 100% - var(--bordo) * 2);
  margin-inline: auto;
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.chiusura__marchio img { height: 3.4rem; width: auto; margin-bottom: 1.5rem; }
.chiusura__motto {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(246, 244, 239, 0.75);
  max-width: 24rem;
}
.chiusura .etichetta { margin-bottom: 0.9rem; }
.chiusura__dato {
  color: rgba(246, 244, 239, 0.85);
  font-size: 0.95rem;
  margin-bottom: 1.8rem;
}
.chiusura__dato a { border-bottom: 1px solid var(--oro); transition: color 0.3s; }
.chiusura__dato a:hover { color: var(--oro-chiaro); }
.chiusura__fondo {
  border-top: 1px solid var(--linea-chiara);
  padding: 1.4rem var(--bordo);
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.45);
}
@media (max-width: 820px) {
  .chiusura__interno { grid-template-columns: 1fr; gap: 1rem; }
}

/* ------------------------------------------------------------
   10. ANIMAZIONI A SCORRIMENTO
   Gli elementi .anima partono nascosti e appaiono con .visibile
   (assegnata da assets/js/animazioni.js con IntersectionObserver).
   ------------------------------------------------------------ */
.anima {
  opacity: 0;
  transform: translateY(2.2rem);
  transition:
    opacity var(--durata) var(--curva),
    transform var(--durata) var(--curva);
  transition-delay: var(--ritardo, 0s);
  will-change: opacity, transform;
}
.anima.visibile {
  opacity: 1;
  transform: none;
}

/* Variante: entrata laterale */
.anima--sinistra { transform: translateX(-2.5rem); }
.anima--destra   { transform: translateX(2.5rem); }
.anima--sinistra.visibile,
.anima--destra.visibile { transform: none; }

/* Variante: svelamento immagine (sipario che sale + zoom che rientra) */
.anima--svela {
  transform: none;
  opacity: 1;
  position: relative;
}
.anima--svela img {
  transform: scale(1.12);
  transition: transform 1.6s var(--curva);
  transition-delay: var(--ritardo, 0s);
}
.anima--svela::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bianco);
  transform: translateY(0);
  transition: transform 1.1s var(--curva);
  transition-delay: var(--ritardo, 0s);
  pointer-events: none;
}
.sezione--scura .anima--svela::after,
.eroe .anima--svela::after { background: var(--nero); }
.anima--svela.visibile img { transform: scale(1); }
.anima--svela.visibile::after { transform: translateY(-101%); }

/* Titoli che entrano in scena riga per riga (usare con data-ritardo) */
.anima--titolo {
  transform: translateY(1.2em);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity var(--durata) var(--curva),
    transform var(--durata) var(--curva),
    clip-path var(--durata) var(--curva);
  transition-delay: var(--ritardo, 0s);
}
.anima--titolo.visibile { clip-path: inset(-0.2em 0 -0.2em 0); }

/* ------------------------------------------------------------
   11. MOVIMENTO RIDOTTO E STAMPA
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .anima, .anima--svela img, .anima--svela::after, .anima--titolo {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .anima--svela::after { display: none; }
  .eroe__giu::after { animation: none; }
  .anteprima img, .anteprima:hover img { transition: none; transform: none; }
}

@media print {
  .testata, .eroe__giu, .testata__apri { display: none; }
  main { padding-top: 0; }
  body { background: #fff; color: #000; }
}

/* ------------------------------------------------------------
   selettore lingua + made in italy
   (aggiunto l'8 agosto 2026 per la versione inglese del sito)
   ------------------------------------------------------------ */

/* Cambio lingua: le due bandierine IT ed EN affiancate nella testata,
   con la sigla scritta sopra ciascuna bandierina */
.cambio-lingua {
  position: absolute;
  right: var(--bordo);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 14px;
  align-items: center;
  font-family: var(--sans);
}
.cambio-lingua a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--bianco);
  text-decoration: none;
  opacity: .55;
  transition: opacity .25s, transform .25s;
}
.cambio-lingua a:hover,
.cambio-lingua a:focus-visible { opacity: 1; transform: translateY(-1px); }
.cambio-lingua a.attiva { opacity: 1; }
.cambio-lingua .cl-sigla {
  font-size: 11px;
  letter-spacing: .16em;
  font-weight: 500;
  text-transform: uppercase;
  color: inherit;
}
.cambio-lingua .cl-bandiera {
  width: 32px;
  height: 21px;
  border-radius: 3px;
  border: 1px solid rgba(176, 141, 87, 0.55);
  display: block;
}
.cambio-lingua a.attiva .cl-bandiera {
  outline: 2px solid var(--oro);
  outline-offset: 1px;
}
@media (max-width: 600px) {
  .cambio-lingua { gap: 10px; }
  .cambio-lingua .cl-bandiera { width: 26px; height: 17px; }
}

/* Distintivo Made in Italy: etichetta piccola ed elegante col bordo oro */
.distintivo-mii {
  position: absolute;
  left: var(--bordo);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oro);
  border: 1px solid rgba(176, 141, 87, 0.55);
  padding: 0.32rem 0.7rem 0.26rem;
  white-space: nowrap;
}

/* Riga made in Italy nel fondo del footer */
.chiusura__mii {
  margin: 0 0 0.6rem;
  color: var(--oro);
}

/* Sotto i 1100px compare l'hamburger a destra:
   il cambio lingua si sposta al suo fianco, il distintivo si ritira */
@media (max-width: 1099px) {
  .distintivo-mii { display: none; }
  .cambio-lingua { right: calc(var(--bordo) + 3.2rem); }
}

/* ------------------------------------------------------------
   RITOCCHI DENSITÀ (8 agosto 2026)
   Le schede si avvicinano: meno strada per vedere tutte le foto.
   Le fotografie restano grandi: si stringono soltanto i vuoti.
   Valori precedenti conservati in _storico.
   ------------------------------------------------------------ */
:root {
  /* Respiro fra le sezioni: prima clamp(4.5rem, 12vh, 9rem) */
  --respiro: clamp(3rem, 7.5vh, 5.5rem);
  /* Respiro fra una scheda e l'altra: nuovo, circa la metà del vecchio */
  --respiro-schede: clamp(2.25rem, 6vh, 4.5rem);
}

/* Le schede si susseguono più fitte, il ritmo resta */
.scheda-foto { margin-block: var(--respiro-schede); }

/* Scheda «quadro» (a tutta larghezza): la foto non occupa più
   quasi tutto lo schermo, così testo e foto successiva entrano prima */
.scheda-foto--quadro .scheda-foto__figura { max-height: 72vh; }
.scheda-foto--quadro .scheda-foto__testo {
  padding-top: clamp(1.25rem, 2.5vw, 2rem); /* prima: clamp(1.75rem, 4vw, 3rem) */
}

/* Schede affiancate e alte: vuoto fra foto e testo più stretto */
.scheda-foto--affiancata,
.scheda-foto--alta {
  gap: clamp(1.5rem, 3.5vw, 3.5rem); /* prima: clamp(2rem, 5vw, 5.5rem) */
}
.scheda-foto--alta .scheda-foto__testo {
  padding-top: clamp(0.75rem, 4vw, 3rem); /* sfalsato, ma meno: prima arrivava a 5rem */
}

/* Dentro il blocco di testo: numero e titolo più raccolti */
.scheda-foto__numero { margin-bottom: 0.6rem; }
.scheda-foto__titolo { margin-bottom: 0.9rem; }

/* Griglia delle anteprime: maglie più strette */
.griglia-anteprime { gap: clamp(1rem, 2vw, 1.75rem); }

/* Telefono: compatto ma sempre leggibile */
@media (max-width: 820px) {
  :root { --respiro-schede: clamp(2rem, 5vh, 3rem); }
  .scheda-foto--quadro .scheda-foto__testo,
  .scheda-foto--affiancata .scheda-foto__testo,
  .scheda-foto--alta .scheda-foto__testo { padding-top: 1.25rem; }
}

/* ------------------------------------------------------------
   FOTO CLICCABILI (8 agosto 2026)
   La mano compare sulle fotografie delle schede che contengono
   un collegamento: il clic porta dove porta il bottone «Scoprite»
   (la navigazione la fa assets/js/animazioni.js).
   ------------------------------------------------------------ */
.scheda-foto:has(a[href]) .scheda-foto__figura,
.scheda-foto:has(a[href]) .scheda-foto__figura img {
  cursor: pointer;
}

/* ============================================================
   ANIMAZIONI ESAGERATE (27 agosto 2026)
   Regola 8 dei reel: «Tutto si muove, niente scatta».
   Solo aggiunte in coda: le regole sopra restano intatte.
   Le classi nuove le assegna assets/js/animazioni.js:
   - .parallasse-figura        (figure delle schede, parallasse profonda)
   - .titolo-righe             (titoli avvolti riga per riga)
   - .titolo-righe--visibile   (quando il titolo entra in scena)
   - .inclina-3d               (inclinazione al passaggio del mouse)
   Versione precedente in _storico/prima delle animazioni
   esagerate (27 agosto 2026)/.
   ============================================================ */

/* --- 1) PARALLASSE PROFONDA DELLE FIGURE ---------------------
   L'immagine scorre più piano del testo. Il JS muove la
   variabile --py; qui si usa la proprietà «translate»
   indipendente, così NON litiga con le transizioni su
   «transform» dello svelamento (.anima--svela).
   La scala 1.16 dà il margine nascosto che il parallasse
   consuma senza mai mostrare i bordi. */
.parallasse-figura img {
  scale: 1.16;
  translate: 0 var(--py, 0px);
  will-change: transform, translate;
}

/* --- 2) TITOLI RIGA PER RIGA ---------------------------------
   Ogni riga sta in una mascherina (overflow nascosto) e sale
   dal basso con ritardo a cascata (--indice-riga dal JS). */
.titolo-righe .riga {
  display: block;
  overflow: hidden;
  /* le discendenti dei caratteri serif non si mozzano */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.titolo-righe .riga__interno {
  display: block;
  transform: translateY(118%);
  transition: transform 1.15s var(--curva);
  transition-delay: calc(var(--indice-riga, 0) * 0.14s + var(--ritardo, 0s));
  will-change: transform;
}
.titolo-righe--visibile .riga__interno { transform: translateY(0); }

/* --- 3) SVELAMENTO PIÙ TEATRALE ------------------------------
   Sipario più lento e zoom leggero da 1.08 a 1
   (prima: 1.12 → 1 in 1.6s, sipario in 1.1s). */
.anima--svela img {
  transform: scale(1.08);
  transition-duration: 2.4s;
}
.anima--svela::after { transition-duration: 1.7s; }

/* --- 4) INCLINAZIONE 3D AL PASSAGGIO DEL MOUSE ---------------
   Solo dove esiste un puntatore vero: mai sul telefono.
   Gli angoli (max 2 gradi) li calcola il JS. */
@media (hover: hover) and (pointer: fine) {
  .inclina-3d {
    transform-style: preserve-3d;
    will-change: transform;
  }
  .inclina-3d img { backface-visibility: hidden; }
}

/* --- 5) FONDO «VIVO» PER LE SEZIONI SCURE --------------------
   Due bagliori d'oro appena percettibili che respirano
   lentissimi (38s) sul nero. Niente librerie, niente WebGL. */
.sezione--scura,
.chiusura {
  background-color: var(--nero);
  background-image:
    radial-gradient(120% 100% at 15% 0%, rgba(176, 141, 87, 0.09), transparent 55%),
    radial-gradient(100% 90% at 88% 100%, rgba(203, 169, 104, 0.06), transparent 60%);
  background-size: 170% 170%, 160% 160%;
  background-repeat: no-repeat;
  animation: fondo-respira 38s ease-in-out infinite alternate;
}
@keyframes fondo-respira {
  0%   { background-position: 0% 0%, 100% 100%; }
  50%  { background-position: 65% 40%, 45% 55%; }
  100% { background-position: 100% 100%, 0% 0%; }
}

/* --- MOVIMENTO RIDOTTO: tutte le novità si fermano ----------- */
@media (prefers-reduced-motion: reduce) {
  .parallasse-figura img { scale: none; translate: none; }
  .titolo-righe .riga__interno {
    transform: none !important;
    transition: none !important;
  }
  .inclina-3d { transform: none !important; }
  .sezione--scura, .chiusura { animation: none; }
}

/* ============================================================
   MOVIMENTI 28 AGOSTO (28 agosto 2026)
   Ancora regola 8 dei reel: «Tutto si muove, niente scatta».
   Solo aggiunte in coda: le regole sopra restano intatte.
   Le classi nuove le assegna assets/js/animazioni.js:
   - .filo-oro                (sezioni scure: filo verticale d'oro
                               che si disegna con lo scorrimento;
                               avanzamento in --filo-progresso)
   - .conta-numero            (numeroni che contano da 00)
   - .deriva-scroll           (titoli degli eroi: deriva orizzontale
                               legata allo scroll, in --deriva-x)
   - .entra-lato--sinistra /
     .entra-lato--destra      (gallerie: ingresso alternato con
                               rotazione di 1 grado che si raddrizza)
   - .piede-cascata /
     .piede-cascata--visibile (piede di pagina a cascata,
                               ordine in --indice-cascata)
   Versione precedente in _storico/prima dei movimenti
   28 agosto/.
   ============================================================ */

/* --- 1) FILO D'ORO CHE SI DISEGNA ----------------------------
   Linea verticale sottile sul bordo sinistro delle sezioni
   scure. Il JS aggiorna --filo-progresso (0 → 1) seguendo lo
   scorrimento della sezione: la linea «si disegna» dall'alto. */
.filo-oro { position: relative; }
.filo-oro::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--bordo) / 2);
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--oro-chiaro),
    var(--oro) 55%,
    rgba(176, 141, 87, 0.35)
  );
  transform: scaleY(var(--filo-progresso, 0));
  transform-origin: top center;
  pointer-events: none;
}

/* --- 2) NUMERONI CHE CONTANO ---------------------------------
   Il conteggio (da 00 al valore in 0,8s) lo fa il JS; qui solo
   le cifre tabellari, così il numero non balla mentre conta. */
.conta-numero { font-variant-numeric: tabular-nums; }

/* --- 3) DERIVA DEI TITOLI DEGLI EROI -------------------------
   Deriva orizzontale da -2% a +2% legata allo scroll. Si usa
   la proprietà «translate» indipendente, così NON litiga con
   le transizioni su «transform» di .anima--titolo. */
.deriva-scroll {
  translate: var(--deriva-x, 0%) 0;
  will-change: translate;
}

/* --- 4) GALLERIE: INGRESSO ALTERNATO -------------------------
   Potenzia .anima senza romperla: cambia solo il punto di
   partenza (lato alternato + 1 grado di rotazione che si
   raddrizza); transizione e .visibile restano di .anima. */
.anima.entra-lato--sinistra { transform: translate(-3rem, 1.5rem) rotate(-1deg); }
.anima.entra-lato--destra   { transform: translate(3rem, 1.5rem) rotate(1deg); }
.anima.entra-lato--sinistra.visibile,
.anima.entra-lato--destra.visibile { transform: none; }

/* --- 5) PIEDE DI PAGINA A CASCATA ----------------------------
   Le voci del footer entrano una dopo l'altra quando il footer
   appare. Le voci si nascondono SOLO quando il JS ha armato la
   cascata (.piede-cascata): senza JS il footer resta visibile. */
.piede-cascata .chiusura__interno > * > *,
.piede-cascata .chiusura__fondo > * {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
  transition-delay: calc(var(--indice-cascata, 0) * 0.09s);
}
.piede-cascata--visibile .chiusura__interno > * > *,
.piede-cascata--visibile .chiusura__fondo > * {
  opacity: 1;
  transform: none;
}

/* --- MOVIMENTO RIDOTTO: anche queste novità si fermano ------- */
@media (prefers-reduced-motion: reduce) {
  .filo-oro::before { transform: scaleY(1); }
  .deriva-scroll { translate: none; }
  .anima.entra-lato--sinistra,
  .anima.entra-lato--destra { transform: none !important; }
  .piede-cascata .chiusura__interno > * > *,
  .piede-cascata .chiusura__fondo > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   MOVIMENTI SERA 28 AGOSTO (28 agosto 2026)
   Ancora regola 8 dei reel: «Tutto si muove, niente scatta».
   Solo aggiunte in coda: le regole sopra restano intatte.
   Le classi nuove le assegna (o le crea) assets/js/animazioni.js:
   - .faro-cursore / .faro-cursore--acceso
                              (alone caldo che segue il mouse con
                               inerzia nelle sezioni scure; solo
                               con un puntatore vero)
   - .pila-scheda             (gallerie lunghe: la scheda che esce
                               in alto si rimpicciolisce e si
                               scurisce come una carta che finisce
                               nella pila; avanzamento in --pila)
   - .nastro-marmi (+ __corsa, __serie)
                              (striscia sottile coi nomi dei marmi
                               che scorre senza fine prima del
                               footer; si ferma al passaggio)
   - .zoom-respiro            (immagini delle gallerie: zoom 1.04
                               con la venatura che «respira»)
   - .titolo-lettere / .titolo-lettere--visibile
                              (h1 degli eroi lettera per lettera,
                               ritmo di 30 millesimi, solo la
                               prima volta)
   Versione precedente in _storico/prima dei movimenti
   sera 28/.
   ============================================================ */

/* --- 1) FARO DEL CURSORE NELLE SEZIONI SCURE -----------------
   Un alone caldo (radial-gradient + soft-light) che segue il
   mouse con inerzia: la posizione la muove il JS con
   requestAnimationFrame, qui solo l'aspetto. Si accende
   soltanto quando il puntatore sta su una sezione scura. */
.faro-cursore {
  position: fixed;
  top: 0;
  left: 0;
  width: 36rem;
  height: 36rem;
  margin: -18rem 0 0 -18rem;   /* centrato sul punto del mouse */
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(203, 169, 104, 0.85) 0%,
    rgba(176, 141, 87, 0.35) 42%,
    transparent 70%
  );
  mix-blend-mode: soft-light;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--curva);
  z-index: 60;                 /* sotto la testata (100) */
  will-change: transform, opacity;
}
.faro-cursore--acceso { opacity: 1; }

/* --- 2) PILA DI SCHEDE ---------------------------------------
   Nelle gallerie lunghe la scheda che esce verso l'alto si
   rimpicciolisce (fino a 0.96) e si scurisce, come una carta
   che si impila sotto le altre. Il JS muove --pila (0 → 1);
   la scala usa la proprietà «scale» indipendente, così non
   litiga con nessun «transform» esistente. Il velo scuro è
   un ::after: niente filtri costosi su decine di schede. */
.pila-scheda {
  position: relative;
  scale: calc(1 - var(--pila, 0) * 0.04);
}
.pila-scheda::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--nero);
  opacity: calc(var(--pila, 0) * 0.18);
  pointer-events: none;        /* le foto restano cliccabili */
  z-index: 3;
}

/* --- 3) NASTRO DEI MARMI -------------------------------------
   Striscia sottile coi nomi dei marmi in maiuscoletto oro,
   scorrimento infinito (due serie identiche, corsa del 50%).
   Il JS la inserisce prima del footer di ogni pagina che ha
   la classe .chiusura. Al passaggio del mouse si ferma. */
.nastro-marmi {
  overflow: hidden;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding-block: 0.8rem;
  margin-top: var(--respiro);
  user-select: none;
}
.nastro-marmi__corsa {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: nastro-scorri 60s linear infinite;
}
.nastro-marmi:hover .nastro-marmi__corsa { animation-play-state: paused; }
.nastro-marmi__serie {
  flex: none;
  font-family: var(--sans);
  font-variant: small-caps;
  letter-spacing: 0.3em;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--oro);
}
@keyframes nastro-scorri {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* --- 4) ZOOM AL PASSAGGIO SULLE IMMAGINI ---------------------
   Zoom leggero (1.04) con la venatura che «respira» (brightness
   1.05), morbido. Si usa la proprietà «scale» indipendente; la
   figura in parallasse sta già a 1.16, quindi al passaggio va
   a 1.16 × 1.04. La transizione qui vince sulla scorciatoia di
   .anima--svela img: il «transform» conserva i suoi 2.4s e il
   suo ritardo, così lo svelamento non cambia di una virgola. */
.scheda-foto__figura.zoom-respiro img {
  transition:
    transform 2.4s var(--curva),
    scale 1.4s var(--curva),
    filter 1.4s var(--curva);
  transition-delay: var(--ritardo, 0s), 0s, 0s;
}
.scheda-foto__figura.zoom-respiro:hover img {
  scale: 1.04;
  filter: brightness(1.05);
}
.parallasse-figura.zoom-respiro:hover img { scale: 1.2064; } /* 1.16 × 1.04 */

/* --- 5) TITOLI SPEZZATI: GLI H1 DEGLI EROI -------------------
   Ogni lettera entra da sotto con 30 millesimi di ritardo
   dalla precedente (--indice-lettera dal JS), una volta sola.
   Le parole restano intere (mai spezzate a metà riga). Il
   sipario di .anima--titolo si spegne: il palco è delle
   lettere, niente doppia entrata. */
.titolo-lettere .parola-lettere {
  display: inline-block;
  white-space: nowrap;
}
.titolo-lettere .lettera {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.6s var(--curva), transform 0.9s var(--curva);
  transition-delay: calc(var(--indice-lettera, 0) * 0.03s + var(--ritardo, 0s));
  will-change: opacity, transform;
}
.titolo-lettere--visibile .lettera {
  opacity: 1;
  transform: none;
}
h1.titolo-lettere.anima,
h1.titolo-lettere.anima.visibile {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}

/* --- MOVIMENTO RIDOTTO: anche queste novità si fermano -------
   (il JS non parte proprio; queste righe sono la cintura di
   sicurezza nel caso le classi fossero già nella pagina) */
@media (prefers-reduced-motion: reduce) {
  .faro-cursore { display: none; }
  .pila-scheda { scale: none; }
  .pila-scheda::after { opacity: 0; }
  .nastro-marmi__corsa { animation: none; }
  .scheda-foto__figura.zoom-respiro:hover img,
  .parallasse-figura.zoom-respiro:hover img { scale: none; filter: none; }
  .titolo-lettere .lettera {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ================================================================
   LA PELLICOLA E LA POLVERE D'ORO (31 agosto 2026)
   Vesti per le sezioni [data-pellicola] (il film che si guida col
   dito) e per i titoli [data-polvere]. Solo aggiunte in coda:
   tutto quello che sta sopra resta intatto.
   Versione precedente in _storico/prima della pellicola (31
   agosto 2026)/.
   ================================================================ */

/* --- IL PALCO ------------------------------------------------
   La sezione è alta 4 schermi: quella corsa è la manovella del
   film. Il palco resta incollato e il canvas riempie tutto. */
.pellicola {
  position: relative;
  height: 420vh;
  background: #070707;
}
.pellicola-palco {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.pellicola-tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #070707;
}

/* Un velo cinematografico sopra e sotto, per far respirare i testi */
.pellicola-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(7, 7, 7, 0.82) 0%, rgba(7, 7, 7, 0) 26%,
      rgba(7, 7, 7, 0) 62%, rgba(7, 7, 7, 0.88) 100%);
}

/* --- LA TESTATA ---------------------------------------------- */
.pellicola-testata {
  position: absolute;
  left: clamp(1.2rem, 6vw, 6rem);
  top: clamp(4.2rem, 14vh, 9rem);
  z-index: 3;
  max-width: min(82vw, 60rem);
}
.pellicola-etichetta {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #B08D57;
  margin: 0 0 1.1rem;
}
.pellicola-titolo {
  font-family: var(--serif, "Cormorant Garamond"), Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  line-height: 1.02;
  color: #f4efe7;
  margin: 0;
  text-wrap: balance;
}

/* --- I CAPITOLI ----------------------------------------------
   Micro-etichette tecniche in basso a sinistra: si accendono
   ognuna nel proprio tratto di film (data-da / data-a). */
.pellicola-capitoli {
  position: absolute;
  left: clamp(1.2rem, 6vw, 6rem);
  bottom: clamp(4.4rem, 12vh, 7.5rem);
  z-index: 3;
  display: grid;
  gap: 0.55rem;
  max-width: min(78vw, 34rem);
}
.pellicola-capitolo {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: rgba(244, 239, 231, 0.34);
  transition: color 0.6s ease, transform 0.6s ease;
  transform: translateX(0);
}
.pellicola-capitolo span {
  color: #B08D57;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  margin-right: 0.7rem;
}
.pellicola-capitolo--acceso {
  color: #f4efe7;
  transform: translateX(0.35rem);
}

/* --- LA BARRA D'ORO E L'INVITO ------------------------------- */
.pellicola-avanzamento {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  z-index: 3;
  background: rgba(176, 141, 87, 0.18);
}
.pellicola-avanzamento i {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(to right, #8a6b3f, #B08D57, #e8cf9e);
  transform: scaleX(0);
  transform-origin: left center;
}
.pellicola-invito {
  position: absolute;
  right: clamp(1.2rem, 5vw, 4.5rem);
  bottom: 1.4rem;
  z-index: 3;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 239, 231, 0.45);
}

/* --- LA POLVERE D'ORO ---------------------------------------- */
.polvere {
  position: relative;
  display: inline-block;
}
.polvere--in-corso {
  color: transparent !important;
}
.polvere--in-corso.polvere--svelata {
  color: inherit !important;
  transition: color 0.45s ease;
}
.polvere-tela {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

/* --- SUL TELEFONO -------------------------------------------- */
@media (max-width: 720px) {
  .pellicola { height: 340vh; }
  .pellicola-capitoli { bottom: 5rem; gap: 0.4rem; }
  .pellicola-capitolo { font-size: 0.78rem; }
}

/* --- MOVIMENTO RIDOTTO ---------------------------------------
   Il film non parte (ci pensa il JS): la sezione si sgonfia a
   uno schermo solo, quadro fermo, capitoli tutti leggibili. */
@media (prefers-reduced-motion: reduce) {
  .pellicola, .pellicola--ferma { height: 100vh !important; }
  .pellicola-capitolo { position: static; opacity: 1; color: rgba(244, 239, 231, 0.8); }
  .pellicola-avanzamento { display: none; }
  .pellicola-invito { display: none; }
}
.pellicola--ferma { height: 100vh; }
.pellicola--ferma .pellicola-invito { display: none; }

/* ================================================================
   LA REGIA ELABORATA (31 agosto 2026) — solo aggiunte in coda.
   Grana cinematografica e bande da cinemascope per le pellicole:
   il film sembra proiettato, non disegnato. Versione precedente in
   _storico/prima della regia elaborata (31 agosto 2026)/.
   ================================================================ */

/* --- LA GRANA -------------------------------------------------
   Un velo di rumore leggerissimo che trema come una proiezione.
   Disegnato con un SVG incorporato: niente file, niente rete. */
.pellicola-palco::after {
  content: "";
  position: absolute;
  inset: -8%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: pellicola-grana 0.9s steps(3) infinite;
}
@keyframes pellicola-grana {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1.5%); }
  66%  { transform: translate(1.5%, -2%); }
  100% { transform: translate(0, 0); }
}

/* --- IL CINEMASCOPE -------------------------------------------
   Due bande nere sottili che entrano quando il palco e' in scena:
   con la vignetta del velo, il quadro diventa una sala di cinema. */
.pellicola-palco::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow:
    inset 0 3.2rem 2.2rem -2rem rgba(0, 0, 0, 0.85),
    inset 0 -3.2rem 2.2rem -2rem rgba(0, 0, 0, 0.85);
}

/* --- MOVIMENTO RIDOTTO: niente grana che trema ---------------- */
@media (prefers-reduced-motion: reduce) {
  .pellicola-palco::after { animation: none; opacity: 0.03; }
}

/* ================================================================
   IL VIDEO NELLA PELLICOLA + LA BARRA CHE SI COMPATTA +
   IL MADE IN ITALY DISCRETO (1 settembre 2026)
   Solo aggiunte in coda. Versioni precedenti in
   _storico/prima del video vero (1 settembre 2026)/.
   ================================================================ */

/* --- IL VIDEO SI SDRAIA SUL CANVAS --------------------------- */
.pellicola-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.pellicola-video--pronto { opacity: 1; }

/* --- LA BARRA CHE SI COMPATTA --------------------------------
   Richiesta di Simone: scendendo, il logo si fa piccolo e va a
   SINISTRA, il menù sale sulla stessa riga al posto suo: una
   riga sola, barra molto più bassa. Solo su schermi larghi. */
@media (min-width: 901px) {
  .testata { transition: padding 0.35s var(--curva, ease); }
  .testata--compatta { display: flex; align-items: center; }
  .testata--compatta .testata__interno {
    flex: 0 0 auto;
    justify-content: flex-start;
    padding: 0.4rem 0 0.4rem var(--bordo);
  }
  .testata--compatta .testata__logo img { height: 1.8rem; }
  .testata--compatta .menu { flex: 1 1 auto; }
  .testata--compatta .menu__lista {
    justify-content: flex-end;
    padding-top: 0;
    padding-bottom: 0;
    padding-right: calc(var(--bordo) + 6.5rem); /* aria per le bandierine */
  }
  .testata--compatta .distintivo-mii { display: none; }
}

/* --- MADE IN ITALY: parola, non tasto ------------------------
   Via cornice e fondo: resta una piccola scritta d'oro con il
   filo tricolore sotto, discreta come una firma. */
.distintivo-mii {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 0.3rem 0 !important;
  color: #B08D57 !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase;
  background-image: linear-gradient(to right,
    #009246 0 33%, #f4f5f0 33% 66%, #ce2b37 66% 100%) !important;
  background-repeat: no-repeat !important;
  background-size: 1.9rem 1px !important;
  background-position: left bottom !important;
}

/* ================================================================
   LA GRANDE REGIA — la veste (1 settembre 2026)
   Vestiti degli elementi che la sezione 14 del JS inietta nel
   palco delle pellicole. Solo aggiunte in coda.
   ================================================================ */

/* --- LA CORNICE D'ORO ----------------------------------------
   Quattro lati sottili, rientrati dal bordo, che si disegnano
   entrando nella scena (variabile --traccia da 0 a 1). */
.regia-cornice { position: absolute; inset: clamp(14px, 2.2vw, 30px); z-index: 3; pointer-events: none; }
.regia-cornice i { position: absolute; background: rgba(176, 141, 87, 0.65); display: block; }
.regia-cornice i:nth-child(1) { top: 0; left: 0; height: 1px; width: calc(var(--traccia, 0) * 100%); }
.regia-cornice i:nth-child(2) { bottom: 0; right: 0; height: 1px; width: calc(var(--traccia, 0) * 100%); }
.regia-cornice i:nth-child(3) { top: 0; right: 0; width: 1px; height: calc(var(--traccia, 0) * 100%); }
.regia-cornice i:nth-child(4) { bottom: 0; left: 0; width: 1px; height: calc(var(--traccia, 0) * 100%); }

/* --- IL NUMERONE IN FILIGRANA -------------------------------- */
.regia-numerone {
  position: absolute;
  right: clamp(1rem, 5vw, 5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-family: var(--serif, Georgia), serif;
  font-size: clamp(9rem, 26vw, 24rem);
  line-height: 1;
  font-weight: 500;
  color: transparent;
  -webkit-text-stroke: 1px rgba(176, 141, 87, 0.35);
  opacity: 0.9;
  pointer-events: none;
  user-select: none;
}
.regia-numerone--entra { animation: regia-numero-entra 0.9s var(--curva, ease) both; }
@keyframes regia-numero-entra {
  from { opacity: 0; transform: translateY(calc(-50% + 3rem)); letter-spacing: 0.08em; }
  to   { opacity: 0.9; transform: translateY(-50%); letter-spacing: 0; }
}

/* --- IL CONTATORE 01 / 03 ------------------------------------ */
.regia-contatore {
  position: absolute;
  right: clamp(1.2rem, 5vw, 4.5rem);
  bottom: 3.4rem;
  z-index: 3;
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  color: rgba(244, 239, 231, 0.5);
}
.regia-contatore b { color: #B08D57; font-weight: 500; font-size: 1.05rem; }

/* --- LE TACCHE SULLA BARRA ----------------------------------- */
.pellicola-avanzamento .regia-tacca {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 8px;
  background: rgba(176, 141, 87, 0.7);
  text-decoration: none;
}

/* --- LA PUNTA DELLA BARRA CHE BRILLA ------------------------- */
.pellicola-avanzamento i::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #e8cf9e;
  box-shadow: 0 0 12px 2px rgba(232, 207, 158, 0.8);
}

/* --- I CAPITOLI, PIÙ TEATRO ---------------------------------- */
.pellicola-capitolo { font-size: 0.98rem; line-height: 1.55; }
.pellicola-capitolo--acceso { text-shadow: 0 1px 18px rgba(0,0,0,0.9); }

/* --- MOVIMENTO RIDOTTO --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .regia-cornice, .regia-numerone, .regia-contatore { display: none; }
}
@media (max-width: 720px) {
  .regia-numerone { font-size: 8rem; opacity: 0.5; }
  .regia-contatore { bottom: 4.6rem; }
}

/* --- CORREZIONE (1 settembre 2026): le bandierine restano a destra --
   Nella barra compatta il riquadro del logo si stringe e le bandierine,
   ancorate a lui, finivano sopra il logo. Ancoraggio spostato alla barra
   intera: tornano al bordo destro, centrate in verticale. */
@media (min-width: 901px) {
  .testata--compatta .testata__interno { position: static; }
  .testata--compatta .cambio-lingua {
    right: var(--bordo);
    top: 50%;
    transform: translateY(-50%);
  }
}

/* --- CORREZIONE (1 settembre 2026): bandierine DENTRO la barra ---
   Nella barra compatta il selettore lingua (sigla sopra, bandiera
   sotto) era più alto della barra e sbordava oltre la riga. Da
   compatta si appiattisce: sigla e bandierina affiancate, bandiera
   più piccola — tutto dentro la riga. */
@media (min-width: 901px) {
  .testata--compatta .cambio-lingua { gap: 12px; }
  .testata--compatta .cambio-lingua a { flex-direction: row; gap: 6px; }
  .testata--compatta .cambio-lingua .cl-sigla { font-size: 10px; }
  .testata--compatta .cambio-lingua .cl-bandiera { width: 20px; height: 13px; }
  .testata--compatta .cambio-lingua a.attiva .cl-bandiera { outline-width: 1px; }
}

/* ================================================================
   LA GALLERIA FITTA (1 settembre 2026)
   Richiesta di Simone: basta foto giganti una sotto l'altra —
   schede piccole, più d'una insieme. La sezione .galleria-fitta
   ridispone le .scheda-foto in griglia: foto e titolo in vista,
   il racconto si apre col tasto «Il racconto» (sezione 15 del JS).
   I testi restano tutti nel codice: niente si perde, nemmeno per
   i motori di ricerca. Solo aggiunte in coda.
   ================================================================ */
.galleria-fitta .contenitore {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.8rem);
  align-items: start;
}
@media (max-width: 1100px) { .galleria-fitta .contenitore { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .galleria-fitta .contenitore { grid-template-columns: 1fr; } }

.galleria-fitta .scheda-foto {
  display: block;
  margin: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(176, 141, 87, 0.14);
  transition: transform 0.35s var(--curva, ease), border-color 0.35s ease;
}
.galleria-fitta .scheda-foto:hover { transform: translateY(-4px); border-color: rgba(176, 141, 87, 0.45); }
.galleria-fitta .scheda-foto__figura { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.galleria-fitta .scheda-foto__figura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galleria-fitta .scheda-foto__testo { display: block; padding: 0.9rem 1rem 1.1rem; }
.galleria-fitta .scheda-foto__numero { font-size: 0.7rem; letter-spacing: 0.3em; color: #B08D57; margin: 0 0 0.3rem; }
.galleria-fitta .scheda-foto__titolo { font-size: 1.05rem; line-height: 1.3; margin: 0 0 0.4rem; }
.galleria-fitta .etichetta { display: none; }

/* il racconto: chiuso di partenza, si apre col tasto */
.galleria-fitta .scheda-foto__descrizione {
  display: none;
  font-size: 0.88rem;
  line-height: 1.6;
  margin-top: 0.6rem;
}
.galleria-fitta .scheda-foto--racconto-aperto .scheda-foto__descrizione { display: block; }
.galleria-fitta .racconto-tasto {
  background: none;
  border: none;
  padding: 0;
  color: #B08D57;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
}
.galleria-fitta .racconto-tasto::after { content: " +"; }
.galleria-fitta .scheda-foto--racconto-aperto .racconto-tasto::after { content: " \2212"; }

/* ================================================================
   IL BINARIO ORIZZONTALE — la veste (1 settembre 2026)
   Vestiti per le sezioni [data-binario] (sezione 17 del JS): il
   corridoio delle collezioni che si attraversa scorrendo. Solo
   aggiunte in coda.
   ================================================================ */
.binario { position: relative; background: #070707; }
.binario-palco {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.binario-treno {
  display: flex;
  gap: clamp(1.2rem, 3vw, 3rem);
  padding: 0 8vw;
  will-change: transform;
}
.binario-quadro {
  position: relative;
  flex: 0 0 auto;
  width: clamp(320px, 42vw, 700px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(176, 141, 87, 0.25);
  text-decoration: none;
  display: block;
}
.binario-quadro img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
  transform: scale(1.15);
}
.binario-quadro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7,7,7,0.85), rgba(7,7,7,0) 45%);
}
.binario-velo {
  position: absolute;
  left: 1.4rem;
  bottom: 1.2rem;
  z-index: 2;
}
.binario-velo .numero {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  color: #B08D57;
  margin-bottom: 0.35rem;
}
.binario-velo .nome {
  font-family: var(--serif, Georgia), serif;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  color: #f4efe7;
  line-height: 1.05;
}
.binario-testata {
  position: absolute;
  top: clamp(3.4rem, 9vh, 6rem);
  left: 8vw;
  z-index: 3;
  pointer-events: none;
}
.binario-testata .etichetta-oro {
  font-size: 0.72rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #B08D57;
}
.binario-invito {
  position: absolute;
  right: clamp(1.2rem, 5vw, 4.5rem);
  bottom: 1.4rem;
  z-index: 3;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(244, 239, 231, 0.45);
}

/* sul telefono e con movimento ridotto: striscia libera col dito */
.binario--libero { height: auto !important; }
.binario--libero .binario-palco { position: static; height: auto; padding: 3rem 0; }
.binario--libero .binario-treno { overflow-x: auto; -webkit-overflow-scrolling: touch; transform: none !important; }
.binario--libero .binario-quadro { width: 78vw; }
.binario--libero .binario-quadro img { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .binario-quadro img { transform: none !important; }
}

/* ================================================================
   I CARTELLI TEATRALI + L'OROLOGIO DI PAGINA + LE SOTTOLINEATURE
   (1 settembre 2026) — solo aggiunte in coda. Versione precedente
   in _storico/prima dei cartelli teatrali (1 settembre 2026)/.
   ================================================================ */

/* --- I CAPITOLI DIVENTANO CARTELLI --------------------------
   Su schermo largo le micro-etichette spariscono: resta in scena
   SOLO il capitolo attivo, grande, serif, che si svela con una
   tendina e un lampo d'oro a ogni cambio. Il numerone della
   sezione 14 gli fa da fondale. */
@media (min-width: 901px) {
  .pellicola-capitoli { max-width: min(72vw, 44rem); }
  /* (A02) mai display:none: i capitoli restano nell'albero di accessibilità */
  .pellicola-capitolo { position: absolute; opacity: 0; pointer-events: none; }
  .pellicola-capitolo--acceso {
    display: block;
    opacity: 1;
    pointer-events: auto;
    font-family: var(--serif, Georgia), serif;
    font-size: clamp(1.5rem, 2.4vw, 2.5rem);
    line-height: 1.25;
    letter-spacing: 0.01em;
    color: #f4efe7;
    transform: none;
    position: relative;
    overflow: hidden;
    animation: cartello-entra 0.9s var(--curva, ease) both;
  }
  .pellicola-capitolo--acceso span {
    display: block;
    font-family: var(--sans, sans-serif);
    font-size: 0.66rem;
    letter-spacing: 0.34em;
    margin: 0 0 0.5rem;
  }
  .pellicola-capitolo--acceso::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -30%;
    width: 22%;
    background: linear-gradient(to right,
      rgba(232, 207, 158, 0) 0%,
      rgba(232, 207, 158, 0.28) 50%,
      rgba(232, 207, 158, 0) 100%);
    animation: cartello-lampo 0.9s ease-out both;
    pointer-events: none;
  }
}
@keyframes cartello-entra {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(0.6rem); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}
@keyframes cartello-lampo {
  from { left: -30%; }
  to   { left: 130%; }
}

/* --- L'OROLOGIO DI PAGINA ------------------------------------
   Un filo d'oro fisso in cima a ogni pagina che misura quanto
   se n'è letto, con la punta che brilla. Lo muove la sezione 18. */
.orologio-pagina {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}
.orologio-pagina i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, #8a6b3f, #B08D57, #e8cf9e);
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 0 8px rgba(232, 207, 158, 0.6);
}

/* --- LE SOTTOLINEATURE CHE SI DISEGNANO ---------------------
   Sotto ogni .titolo-grande, entrando in scena, un filo d'oro
   si disegna da sinistra. La classe la mette la sezione 18. */
.titolo-grande { position: relative; }
.titolo-grande::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.55rem;
  height: 1px;
  width: 4.5rem;
  background: linear-gradient(to right, #B08D57, rgba(176, 141, 87, 0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--curva, ease) 0.15s;
}
.titolo-grande.filo-disegnato::after { transform: scaleX(1); }

/* --- MOVIMENTO RIDOTTO --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pellicola-capitolo--acceso { animation: none; }
  .pellicola-capitolo--acceso::after { display: none; }
  .orologio-pagina { display: none; }
  .titolo-grande::after { transition: none; transform: scaleX(1); }
}

/* ============================================================
   L'ETÀ — L'OROLOGIO DEI CINQUANT'ANNI (1 settembre 2026)
   Veste della sezione [data-eta]: la home non aveva un racconto
   dell'azienda all'altezza del resto (una miniatura ferma e tre
   paragrafi). Qui il tempo diventa la scena: l'anno gigante sale
   da 1976 a oggi mentre il laboratorio scorre dietro, e il marmo
   passa dal seppia al colore man mano che gli anni arrivano.
   Solo aggiunte in coda: le sezioni sopra restano intatte.
   ============================================================ */
.eta {
  position: relative;
  height: 320vh;
  background: var(--nero);
}
.eta-palco {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--nero);
}
.eta-tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* dal seppia al colore: --eta-colore va da 0 a 1 col passare degli anni */
  filter:
    saturate(calc(0.15 + 0.85 * var(--eta-colore, 0)))
    sepia(calc(0.55 * (1 - var(--eta-colore, 0))))
    contrast(calc(1.06 - 0.06 * var(--eta-colore, 0)));
}
.eta-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% 50%, transparent 8%, rgba(14, 13, 11, 0.62) 62%, rgba(14, 13, 11, 0.9) 100%),
    linear-gradient(180deg, rgba(14, 13, 11, 0.78) 0%, transparent 28%, transparent 62%, rgba(14, 13, 11, 0.88) 100%);
}

/* l'anno gigante: contorno d'oro che si riempie col passare del tempo */
.eta-anno {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(5.5rem, 21vw, 19rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}
.eta-anno span {
  display: block;
  grid-area: 1 / 1;
}
.eta-anno {
  display: grid;
}
.eta-anno__contorno {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(176, 141, 87, 0.75);
  text-shadow: 0 0 5rem rgba(176, 141, 87, 0.22);
}
.eta-anno__pieno {
  color: var(--oro-chiaro);
  -webkit-text-stroke: 1.5px rgba(203, 169, 104, 0);
  /* si riempie dal basso man mano che gli anni passano */
  clip-path: inset(calc((1 - var(--eta-avz, 0)) * 100%) 0 0 0);
  text-shadow: 0 0 3.5rem rgba(203, 169, 104, 0.45);
}

/* la testata: etichetta e titolo, in alto, che planano via */
.eta-testata {
  position: absolute;
  top: clamp(4.5rem, 12vh, 8rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 46rem);
  text-align: center;
  z-index: 3;
}
.eta-testata .etichetta {
  color: var(--oro-chiaro);
  justify-content: center;
}
.eta-titolo {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  line-height: 1.1;
  color: var(--bianco);
  margin: 0.85rem 0 0;
}
.eta-titolo em {
  color: var(--oro-chiaro);
  font-style: italic;
}

/* i tre movimenti del racconto, in basso, uno alla volta */
.eta-movimenti {
  position: absolute;
  left: 50%;
  bottom: clamp(5.5rem, 15vh, 9rem);
  transform: translateX(-50%);
  width: min(88vw, 40rem);
  text-align: center;
  z-index: 3;
}
.eta-movimento {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.5vw, 1.75rem);
  line-height: 1.5;
  color: rgba(246, 244, 239, 0.94);
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
.eta-movimento em {
  color: var(--oro-chiaro);
  font-style: italic;
}
.eta-movimento--acceso {
  opacity: 1;
  transform: translateY(0);
}

/* il filo d'oro che misura i cinquant'anni */
.eta-filo {
  position: absolute;
  left: 50%;
  bottom: clamp(2.75rem, 7vh, 4.25rem);
  transform: translateX(-50%);
  width: min(70vw, 26rem);
  height: 1px;
  background: rgba(246, 244, 239, 0.2);
  z-index: 3;
}
.eta-filo i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--oro), var(--oro-chiaro));
  transform: scaleX(var(--eta-avz, 0));
  transform-origin: left center;
}
.eta-filo b {
  position: absolute;
  top: 0.9rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 244, 239, 0.55);
}
.eta-filo b:first-of-type { left: 0; }
.eta-filo b:last-of-type { right: 0; }

/* la firma finale, che arriva solo in fondo */
.eta-firma {
  position: absolute;
  left: 50%;
  bottom: clamp(5.5rem, 15vh, 9rem);
  transform: translate(-50%, 1.1rem);
  width: min(88vw, 40rem);
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.2vw, 2.25rem);
  line-height: 1.35;
  color: var(--bianco);
  opacity: 0;
  transition: opacity 0.8s var(--curva), transform 0.8s var(--curva);
  z-index: 4;
}
.eta-firma em { color: var(--oro-chiaro); font-style: italic; }
.eta-firma--accesa { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 820px) {
  .eta { height: 280vh; }
  .eta-testata { top: clamp(3.5rem, 10vh, 6rem); }
  .eta-movimenti, .eta-firma { bottom: clamp(4.5rem, 13vh, 7rem); }
}

/* Con movimento ridotto: niente corsa, una sola scena leggibile */
@media (prefers-reduced-motion: reduce) {
  .eta { height: auto; }
  .eta-palco { position: relative; height: auto; min-height: 100vh; }
  .eta-movimento {
    position: relative;
    opacity: 1;
    transform: none;
    margin-bottom: 1.1rem;
  }
  .eta-movimenti { position: relative; left: auto; bottom: auto; transform: none;
    margin: 0 auto; padding: 55vh 0 4rem; }
  .eta-firma { position: relative; left: auto; bottom: auto;
    transform: none; opacity: 1; margin: 0 auto 4rem; }
  .eta-anno__pieno { clip-path: none; }
}

/* ============================================================
   L'EROE NON FINISCE PIÙ SOTTO LA BARRA (1 settembre 2026)
   Segnalato da Simone: sugli schermi bassi il titolo dell'eroe
   saliva fin dietro la testata fissa. Non era un difetto della
   home: .eroe e .testata stanno qui e le usano 107 pagine, quindi
   la correzione va fatta una volta sola e qui.
   Il meccanismo: .eroe è flex con align-items:flex-end, quindi il
   contenuto è incollato in fondo a una scatola alta 100svh che però
   comincia SOTTO la barra: la scatola sporge oltre il fondo dello
   schermo e il contenuto, spinto in giù con lei, sconfina in alto —
   proprio dove c'è la testata fissa.
   La radice però è un'altra: il titolo si dimensionava solo sulla
   LARGHEZZA (10vw, fino a 8,5rem), quindi su una finestra larga e
   bassa diventava enorme e il blocco non ci stava più in altezza.
   Due rimedi che lavorano insieme (misurati, non a occhio):
   a) un cuscinetto in cima al contenuto alto quanto la barra, così
      quel che deborda è spazio vuoto e la scritta resta sotto;
   b) il titolo guarda anche l'ALTEZZA — min(9vw, 12,5vh) — così su
      una finestra bassa rimpicciolisce da solo invece di sfondare,
      e sugli schermi alti resta grande come prima (8,5rem).
   Misurato a 1512x900, che è più o meno la finestra di Simone:
   prima l'etichetta finiva 92px SOTTO la barra; ora è libera di
   36px, il titolo resta grande (113px contro 136px) e il blocco sta
   tutto dentro lo schermo con 28px di margine.
   Sotto i ~700px di altezza il blocco resta più alto della finestra:
   lì il titolo è semplicemente troppo lungo, ma non finisce più
   dietro la barra.
   Solo aggiunte in coda: le sezioni sopra restano intatte.
   ============================================================ */
.eroe__contenuto { padding-top: calc(var(--testata-h) + 1rem); }
.eroe__titolo { font-size: clamp(2.5rem, min(9vw, 12.5vh), 8.5rem); }
@media (max-height: 1000px) {
  .eroe__contenuto { padding-bottom: clamp(2rem, 7vh, 5rem); }
}

/* ============================================================
   L'ANNO PIÙ IN RISALTO (1 settembre 2026)
   Simone: «l'anno che scorre mettilo più in risalto, si vede poco».
   Aveva ragione, ed era colpa mia: il velo che avevo scritto è
   trasparente proprio al centro (transparent 8%), cioè esattamente
   dietro l'anno — così le cifre finivano a competere con la parte
   più accesa del fotogramma. In più il contorno era di 1,5px fissi:
   a 19rem di corpo è un filo invisibile.
   Quattro rimedi: una pozza scura solo sotto le cifre (il resto del
   fotogramma resta pulito), il contorno legato al corpo del testo
   invece che in pixel fissi, oro più chiaro con un'ombra scura che
   lo stacca, e cifre più grandi.
   Solo aggiunte in coda: le sezioni sopra restano intatte.
   ============================================================ */
.eta-velo {
  background:
    radial-gradient(125% 90% at 50% 50%, rgba(14, 13, 11, 0.42) 0%, rgba(14, 13, 11, 0.7) 58%, rgba(14, 13, 11, 0.93) 100%),
    linear-gradient(180deg, rgba(14, 13, 11, 0.8) 0%, transparent 26%, transparent 60%, rgba(14, 13, 11, 0.9) 100%);
}
.eta-anno {
  isolation: isolate;                       /* tiene la pozza dentro le cifre */
  font-size: clamp(6.5rem, 24vw, 22rem);
}
.eta-anno::before {
  content: "";
  grid-area: 1 / 1;
  place-self: center;
  width: 165%;
  height: 185%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(14, 13, 11, 0.8), rgba(14, 13, 11, 0.5) 58%, transparent 100%);
}
.eta-anno__contorno {
  -webkit-text-stroke: 0.017em rgba(203, 169, 104, 0.95);
  text-shadow:
    0 0 2.25rem rgba(14, 13, 11, 0.9),
    0 0 6rem rgba(176, 141, 87, 0.3);
}
.eta-anno__pieno {
  color: #E7CE95;
  text-shadow:
    0 0 1.25rem rgba(14, 13, 11, 0.7),
    0 0 4rem rgba(231, 206, 149, 0.55);
}
@media (max-width: 820px) {
  .eta-anno::before { width: 180%; height: 175%; }
}

/* ============================================================
   TRATTAMENTO PIÙ LEGGERO SUL FILMATO DEGLI ANNI
   (1 settembre 2026, sera)
   Simone ha bocciato il filmato della crescita: «bruttissimo…
   più scenografico». Parte della colpa era di questo CSS, non
   del video: all'inizio della corsa mostravo i quadri con
   saturazione al 15% e seppia al 55%, cioè quasi in bianco e
   nero virato, e per di più scurivo il velo proprio al centro.
   Su materiale cinematografico quel trattamento lavora contro
   la scenografia.
   Misurato sul quadro più chiaro della serie (RGB 140,119,106,
   il caso peggiore per leggere l'anno): con la sola pozza scura
   sotto le cifre e il velo quasi tolto al centro, l'oro sta a
   8,8 di contrasto — ben sopra il 7 che vale «ottimo» per testo
   grande. Quindi la luce si può restituire tutta al filmato: a
   tenere leggibile l'anno basta la pozza, che è locale e non
   sporca l'immagine.
   Resta un filo di viraggio all'inizio (saturazione 62%, seppia
   18%), quanto serve a far sentire il tempo che passa senza
   slavare la scena.
   Solo aggiunte in coda: le sezioni sopra restano intatte.
   ============================================================ */
.eta-tela {
  filter:
    saturate(calc(0.62 + 0.38 * var(--eta-colore, 0)))
    sepia(calc(0.18 * (1 - var(--eta-colore, 0))))
    contrast(calc(1.04 - 0.04 * var(--eta-colore, 0)));
}
.eta-velo {
  background:
    radial-gradient(125% 90% at 50% 50%, rgba(14, 13, 11, 0.15) 0%, rgba(14, 13, 11, 0.55) 62%, rgba(14, 13, 11, 0.9) 100%),
    linear-gradient(180deg, rgba(14, 13, 11, 0.78) 0%, transparent 26%, transparent 58%, rgba(14, 13, 11, 0.88) 100%);
}
.eta-anno::before {
  background: radial-gradient(closest-side, rgba(14, 13, 11, 0.7), rgba(14, 13, 11, 0.42) 58%, transparent 100%);
}

/* ================================================================
   LA POLVERE DI MARMO — la veste (1 settembre 2026)
   Canvas delle schegge (sezione 20): sopra il film, sotto i testi.
   Solo aggiunte in coda.
   ================================================================ */
.marmo-schegge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce), (max-width: 767px) {
  .marmo-schegge { display: none; }
}


/* ================================================================
   CANTIERE SEO E ACCESSIBILITÀ (2 settembre 2026) — solo aggiunte
   in coda. Versione precedente in
   _storico/prima del cantiere SEO (2 settembre 2026)/stile.css.
   ================================================================ */

/* --- A01: salta al contenuto, anello di focus, scroll-padding -- */
.salta {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 300;
  background: var(--nero);
  color: var(--oro-chiaro);
  padding: .8rem 1.2rem;
  font-family: var(--sans);
  text-decoration: none;
}
.salta:focus { left: var(--bordo); }
:focus-visible { outline: 2px solid var(--oro-scuro); outline-offset: 3px; }
/* (correttore finale) sui fondi scuri l'anello torna oro chiaro (8,7:1) */
.testata :focus-visible, .menu :focus-visible, .chiusura :focus-visible, .sezione--scura :focus-visible,
.eroe :focus-visible, .eroe-cinema :focus-visible, .pellicola :focus-visible, .film :focus-visible,
.segno :focus-visible, .nascita :focus-visible, [class*="scura"] :focus-visible { outline-color: var(--oro-chiaro); }
html { scroll-padding-top: calc(var(--testata-h) + 1rem); }
main:focus { outline: none; }

/* --- A02: altezze delle pellicole senza style inline; con movimento
   ridotto i capitoli tornano in colonna, tutti leggibili ----------- */
.pellicola--lunga { height: 560vh; }
.pellicola--media { height: 300vh; }
@media (prefers-reduced-motion: reduce) {
  .pellicola, .pellicola--ferma, .pellicola--lunga, .pellicola--media { height: 100vh !important; }
  .pellicola-capitolo {
    position: static;
    opacity: 1;
    pointer-events: auto;
    animation: none;
    transform: none;
  }
  .pellicola-capitolo::after { display: none; }
  /* (correttore finale) il capitolo acceso dal JS veste come gli altri della colonna */
  .pellicola-capitolo--acceso { font-family: var(--sans); font-size: 0.98rem; line-height: 1.55; letter-spacing: 0.08em; overflow: visible; }
  .pellicola-capitolo--acceso span { display: inline; }
}

/* --- A03: contrasti (oro scuro sui fondi chiari, spenti a .6) ---- */
.etichetta { color: var(--oro-scuro); }
.sezione--scura .etichetta,
.eroe .etichetta,
.eroe-cinema .etichetta,
.chiusura .etichetta,
.pellicola .etichetta,
.nascita .etichetta,
[class*="scura"] .etichetta { color: var(--oro-chiaro); }
/* (correttore finale) fondi scuri senza classe «scura»: il film della home e il segno delle cucine */
.film .etichetta, .segno .etichetta { color: var(--oro); }
/* (correttore finale) «Le collezioni» in home sta su un beige #ece3d2: oro un filo piu' scuro (5,07:1) */
.riscalda .etichetta { color: #745a33; }
.titolo-grande em, .corsivo-oro { color: var(--oro-scuro); }
.sezione--scura .titolo-grande em, .eroe em, .chiusura em, .film .titolo-grande em, .segno .titolo-grande em { color: var(--oro); }
.chiusura__fondo { color: rgba(246, 244, 239, .6); }
.pellicola-capitolo { color: rgba(244, 239, 231, .6); }
.pellicola-capitolo--acceso { color: #f4efe7; } /* (correttore finale) l'acceso resta avorio pieno */
.pellicola-invito, .binario-invito { color: rgba(244, 239, 231, .6); }
.eroe__velo {
  background: linear-gradient(to top, rgba(14,13,11,.88) 0%, rgba(14,13,11,.7) 55%, rgba(14,13,11,.35) 100%);
}
.eroe__contenuto { text-shadow: 0 1px 18px rgba(0,0,0,.9); }

/* --- A04: tasto pausa dei video di scena e del nastro dei marmi -- */
.video-pausa {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 5;
  min-width: 44px;
  min-height: 44px;
  padding: 0 .9rem;
  background: rgba(14, 13, 11, .7);
  color: var(--bianco);
  border: 1px solid var(--oro);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.video-pausa:hover, .video-pausa:focus-visible { background: rgba(14, 13, 11, .9); }
.nastro-marmi { position: relative; }
.nastro-marmi .video-pausa { right: var(--bordo); bottom: 50%; transform: translateY(50%); }
.nastro-marmi:focus-within .nastro-marmi__corsa,
.nastro-marmi:hover .nastro-marmi__corsa,
.nastro-marmi--fermo .nastro-marmi__corsa { animation-play-state: paused; }

/* --- A06 (correttore finale): il palco non e' un contenitore di scorrimento,
   cosi' il focus da tastiera non puo' spostarlo per conto suo ---- */
.binario-palco { overflow: clip; }

/* --- A07 (correttore finale): bersaglio del tasto «Il racconto» ---- */
.galleria-fitta .racconto-tasto { min-height: 24px; }

/* --- A07: bersaglio del cambio lingua nella barra compatta ------- */
@media (min-width: 901px) {
  .testata--compatta .cambio-lingua a { min-height: 24px; padding: 4px 0; }
}

/* ==== cantiere SEO 2 settembre 2026: cucine-hub ==== */
/* ============================================================
   SQUADRA CUCINE (hub, cemento, modelli) — 2 settembre 2026
   Da fondere in coda ad assets/css/stile.css.
   Usato da: cucine.html, cucine-cemento.html, cucine-modelli.html,
   le sottopagine cucine-galleria-N.html / cucine-modelli-galleria-N.html
   e le gemelle en/. Le classi .faq__* e .correlati__lista sono le
   stesse del piano (C02, C08): se un'altra squadra le ha già scritte,
   tenerne una copia sola.
   ============================================================ */

/* ---- Domande e risposte (C02) ---- */
.faq__voce { border-top: 1px solid rgba(176, 141, 87, 0.35); padding: 1rem 0; }
.faq__voce:last-of-type { border-bottom: 1px solid rgba(176, 141, 87, 0.35); }
.faq__voce summary {
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.25;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.faq__voce summary::-webkit-details-marker { display: none; }
.faq__voce summary::after { content: '+'; color: var(--oro); flex: none; font-size: 1.5rem; line-height: 1; }
.faq__voce[open] summary::after { content: '−'; }
.faq__voce summary:focus-visible { outline-offset: 4px; }
.faq__risposta { max-width: 62ch; padding: 0.5rem 0 0.5rem; }
.faq__risposta p { margin: 0; }
.faq .contenitore--stretto { margin-top: 2.5rem; }

/* ---- Tabella accessibile «Quale materiale per il piano cucina» (S11) ---- */
.tabella-scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 2.5rem; }
.tabella { width: 100%; min-width: 640px; border-collapse: collapse; font-family: var(--sans); font-size: 0.95rem; }
.tabella th, .tabella td { padding: 0.7rem; border-bottom: 1px solid rgba(176, 141, 87, 0.35); text-align: left; vertical-align: top; }
.tabella thead th { font-weight: 500; letter-spacing: 0.04em; font-size: 0.8rem; text-transform: uppercase; color: var(--pietra); }
.tabella tbody th { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; white-space: nowrap; }
.tabella caption { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 1rem; text-align: left; caption-side: top; }

/* ---- Elenco «Perché una cucina in marmo su misura Michelessi» (S11) ---- */
.lista-perche { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.1rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); max-width: var(--medio); }
.lista-perche li { position: relative; padding-left: 1.6rem; font-family: var(--sans); font-weight: 300; line-height: 1.55; }
.lista-perche li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 0.8rem; height: 1px; background: var(--oro); }
.lista-perche strong { font-weight: 500; }

/* ---- «Le altre cucine» / «Vi interessa anche» (C08) ---- */
.correlati__lista { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.75rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.correlati__lista li { border-top: 1px solid rgba(176, 141, 87, 0.35); padding-top: 0.75rem; font-family: var(--serif); font-size: 1.2rem; }
.correlati__lista a { text-decoration: none; }
.correlati__lista a:hover, .correlati__lista a:focus-visible { color: var(--oro); }

/* ---- Titolo di sezione sopra le schede fotografia (C04) ---- */
.titolo-galleria { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.1; margin: 0 0 clamp(2rem, 5vh, 3.5rem); }

/* ---- Sottopagine galleria: briciole e paginazione (C05) ---- */
.briciole ol { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.03em; color: var(--pietra); }
.briciole li + li::before { content: '›'; margin-right: 0.6rem; color: var(--oro); }
.briciole a { text-decoration: none; }
.briciole a:hover, .briciole a:focus-visible { color: var(--oro-scuro); }
.paginazione { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 2rem; font-family: var(--sans); font-size: 0.9rem; }
.paginazione > span, .paginazione > a:not([class]) { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1rem; border: 1px solid rgba(176, 141, 87, 0.5); text-decoration: none; }
.paginazione > a:not([class]):hover, .paginazione > a:not([class]):focus-visible { border-color: var(--oro); color: var(--oro-scuro); }
.paginazione > [aria-current="page"] { background: var(--oro); border-color: var(--oro); color: var(--nero); }
.paginazione__vuoto { opacity: 0.4; }
.galleria-tutte { margin-top: clamp(2.5rem, 6vh, 4rem); text-align: center; }
.galleria-tutte .bottone + .bottone { margin-left: 0.75rem; }
.galleria-tutte p { margin-bottom: 1.25rem; }

/* ---- Solo per lo screen reader ---- */
.solo-lettore { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ==== cantiere SEO 2 settembre 2026: cucine-interno ==== */
/* ============================================================
   CANTIERE SEO — squadra CUCINE DA INTERNO (2 settembre 2026)
   Da fondere in coda a assets/css/stile.css.
   Nomi di classe come nel piano (C01, C02, C04, C08).
   ============================================================ */

/* C01 — paragrafo fattuale sotto l'H1 (sempre visibile) */
.prosa--riassunto{font-size:1.08rem;max-width:62ch;margin:1.5rem auto 2.5rem}

/* C02 — domande e risposte visibili (<details>) */
.faq__voce summary{cursor:pointer;font-family:var(--serif);font-size:1.35rem;list-style:none;display:flex;justify-content:space-between}
.faq__voce summary::after{content:'+';color:var(--oro)}

/* C03 — tabella breve dei materiali (calore / acidi / graffi / naturale) */
.tabella-materiali-scorri .tabella-materiali{width:100%;max-width:62ch;border-collapse:collapse;margin:1.5rem 0 0;font-family:var(--sans);font-size:.95rem}
.tabella-materiali-scorri .tabella-materiali th,.tabella-materiali-scorri .tabella-materiali td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid rgba(176,141,87,.35);vertical-align:top}
.tabella-materiali-scorri .tabella-materiali th{font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:.72rem;color:var(--oro)}
.tabella-materiali-scorri{overflow-x:auto}

/* C04 — le didascalie delle schede passano da h2 a h3:
   le regole di aspetto sono già per classe (.scheda-foto__titolo),
   qui si ribadisce soltanto la base comune ai titoli, così un
   eventuale stile futuro di h3 non cambia le schede. */
h3.scheda-foto__titolo{font-family:var(--serif);font-weight:500;line-height:1.05;margin-top:0;text-wrap:balance}

/* C08 — blocco «Le altre cucine» / «Vi interessa anche» */
.correlati__lista{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:.85rem}
.correlati__lista li{border-top:1px solid rgba(176,141,87,.35);padding-top:.85rem}
.correlati__lista a{font-family:var(--serif);font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.2;color:inherit;text-decoration:none;transition:color .3s ease}
.correlati__nota{display:block;font-family:var(--sans);font-size:.92rem;margin-top:.25rem;opacity:.72}

/* C05 — pagine della galleria: percorso e navigazione fra le pagine */
.galleria-pagine{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:2rem}
.galleria-pagine__indice{margin-top:1rem}
.galleria-pagine__indice a{border-bottom:1px solid rgba(176,141,87,.5)}
.briciole a{border-bottom:1px solid rgba(176,141,87,.5)}


/* ==== cantiere SEO 2 settembre 2026: cucine-esterno ==== */
/* ============================================================
   CANTIERE SEO — squadra CUCINE DA ESTERNO (2 settembre 2026)
   Da accodare a assets/css/stile.css. Classi: C01 .prosa--riassunto,
   C02 .faq, C03 .ricerca / .in-breve / .tabella-materiali / .zone,
   C05 .galleria-tutte / .briciole / .paginazione, C08 .correlati.
   Tutto in currentColor + oro: funziona sul fondo chiaro delle
   sottopagine e sul fondo scuro di cucine-esterno.html.
   ============================================================ */

/* C01 — riassunto fattuale sotto l'H1 */
.eroe__contenuto .prosa--riassunto { margin: 1.4rem 0 1.6rem; }

/* C02 — domande e risposte (details/summary) */
.faq .titolo-grande { margin-bottom: 2rem; }
.faq__lista { max-width: 62rem; }
.faq__voce summary::after { content: '+'; color: var(--oro); font-size: 1.6rem; line-height: 1; flex: none; }
.faq__risposta p { margin: 0; font-size: clamp(.98rem, 1.2vw, 1.06rem); line-height: 1.65; opacity: .85; }

/* C03 — «In breve», i cinque temi, tabella dei materiali, «Dove lavoriamo» */
.in-breve {
  list-style: none; padding: 0; margin: 1.75rem 0 0; max-width: 62rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .9rem 2rem;
}
.in-breve li { position: relative; padding-left: 1.6rem; font-size: 1rem; line-height: 1.55; opacity: .88; }
.in-breve li::before { content: ""; position: absolute; left: 0; top: .78em; width: .9rem; height: 1px; background: var(--oro); }
.ricerca__blocchi {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(2rem, 4vw, 4rem);
}
.ricerca__blocco h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; margin: 0 0 .9rem; }
.ricerca__blocco p { max-width: 62ch; font-size: clamp(.98rem, 1.2vw, 1.06rem); line-height: 1.65; opacity: .85; margin: 0 0 1rem; }
.ricerca__blocco--largo { grid-column: 1 / -1; }
.tabella-materiali__scorri { overflow-x: auto; }
.tabella-materiali__scorri .tabella-materiali { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: .92rem; margin: 1.25rem 0 0; }
.tabella-materiali__scorri .tabella-materiali caption {
  text-align: left; font-family: var(--sans); font-size: .7rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--oro); padding-bottom: .6rem;
}
.tabella-materiali__scorri .tabella-materiali th, .tabella-materiali__scorri .tabella-materiali td {
  text-align: left; vertical-align: top; padding: .65rem .9rem .65rem 0;
  border-top: 1px solid rgba(176,141,87,.3);
}
.tabella-materiali__scorri .tabella-materiali thead th { font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .08em; }
.tabella-materiali__scorri .tabella-materiali tbody th { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; }
.tabella-materiali__scorri .tabella-materiali td { opacity: .85; }
.zone .prosa { margin-top: 1.5rem; max-width: 70ch; }

/* C05 — bottone «vedi le altre», briciole, paginazione delle sottopagine */
.galleria-tutte { text-align: center; margin: clamp(2.5rem, 6vh, 4rem) 0 0; }
.briciole ol {
  list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem .6rem;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
}
.paginazione:has(ol) {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(176,141,87,.35);
  font-family: var(--sans); font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
}
.paginazione ol { list-style: none; display: flex; gap: .25rem; padding: 0; margin: 0; }
.paginazione ol a { display: inline-block; min-width: 2.4rem; padding: .5rem .4rem; text-align: center; border: 1px solid transparent; }
.paginazione ol a[aria-current="page"] { border-color: var(--oro); color: var(--oro-scuro); }
.paginazione a:hover, .paginazione a:focus-visible { color: var(--oro-scuro); }

/* C08 — «Le altre cucine» / «Vi interessa anche» */
.correlati__intro { margin-top: 1.5rem; }
.correlati__lista {
  list-style: none; padding: 0; margin: 2.5rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem 2.5rem;
}
.correlati__lista li { border-top: 1px solid rgba(176,141,87,.35); padding-top: 1.1rem; }
.correlati__lista a { font-family: var(--serif); font-size: 1.45rem; line-height: 1.2; display: block; transition: color .3s; }
.correlati__lista span { display: block; margin-top: .5rem; font-size: .92rem; line-height: 1.55; opacity: .75; }


/* ==== il film vivo della bottega in home (2 settembre 2026) ==== */
.bottega-viva { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--nero); color: var(--bianco); }
.bottega-viva__palco { position: relative; width: 100%; height: 100%; }
.bottega-viva__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bottega-viva__velo { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14,13,11,.8) 0%, rgba(14,13,11,.28) 45%, transparent 70%),
              linear-gradient(to bottom, rgba(14,13,11,.45), transparent 28%); }
.bottega-viva__testata { position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 9vh, 6rem); z-index: 2; text-align: center; padding: 0 var(--bordo); }
.bottega-viva .etichetta { color: var(--oro-chiaro); }
.bottega-viva__titolo { font-family: var(--serif); font-weight: 300; font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1.02; margin: .4rem 0 0; color: var(--bianco); }
.bottega-viva__titolo em { font-style: italic; color: var(--oro-chiaro); }
.bottega-viva__nota { font-family: var(--serif); font-style: italic; font-size: clamp(1rem, 1.5vw, 1.25rem); max-width: 42rem; margin: 1rem auto 0; color: rgba(246,244,239,.88); }
.bottega-viva .video-pausa { right: 1rem; bottom: 1rem; }

/* ============================================================
   L'OROLOGIO DEI CINQUANT'ANNI IN VIDEO (collaudo A18, 2 settembre 2026)
   Il <video> che la sezione 22 di animazioni.js sdraia sopra il
   canvas .eta-tela: stesso seppia che torna colore (--eta-colore)
   e stesso respiro dello zoom (--eta-avz) del motore a quadri,
   così quando il film arriva non si vede nessuno stacco.
   Coprente e muto; nascosto finché non è pronto e con movimento
   ridotto. Solo aggiunte in coda.
   ============================================================ */
.eta-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  transform-origin: 50% 50%;
  transform: scale(calc(1.04 + 0.07 * var(--eta-avz, 0)));
  filter:
    saturate(calc(0.15 + 0.85 * var(--eta-colore, 0)))
    sepia(calc(0.55 * (1 - var(--eta-colore, 0))))
    contrast(calc(1.06 - 0.06 * var(--eta-colore, 0)));
}
.eta-video--pronto { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .eta-video { display: none; }
}

/* ============================================================
   COLLAUDO — SQUADRA REGIA (2 settembre 2026, sera)
   Ritocchi chirurgici del collaudo, solo in coda. Versione
   precedente in _storico/prima del collaudo (2 settembre 2026)/
   «stile - prima della regia del collaudo».
   ============================================================ */

/* --- A11 · barra compatta: aria fra «Contatti» e le bandierine --
   Misurato a 1512 px: 12 px fra l'ultima voce e il selettore
   lingua. Il menù teneva 6,5rem di riserva a destra ma le due
   bandierine appiattite ne occupano ~5,75: qui la riserva sale
   a 8rem, così restano ~36 px di respiro. */
@media (min-width: 901px) {
  .testata--compatta .menu__lista { padding-right: calc(var(--bordo) + 8rem); }
}

/* --- A05 · il cartellino «visione Michelessi» nella galleria fitta --
   La griglia nascondeva ogni .etichetta per tenere le schede
   basse; ma sulle visioni (foto-02-ai, foto-22-ai) il cartellino
   è obbligatorio. Torna visibile, in formato ridotto, solo dove
   la scheda è una visione: alt che comincia con «Visione» /
   «Project vision», file «-ai.», oppure l'attributo data-visione
   (da usare sulle prossime schede, anche dopo la rinomina dei
   file). Le foto vere restano senza. */
.galleria-fitta .scheda-foto[data-visione] .etichetta,
.galleria-fitta .scheda-foto:has([data-visione]) .etichetta,
.galleria-fitta .scheda-foto:has(img[src*="-ai."]) .etichetta,
.galleria-fitta .scheda-foto:has(img[alt^="Visione"]) .etichetta,
.galleria-fitta .scheda-foto:has(img[alt^="Project vision"]) .etichetta,
.galleria-fitta .scheda-foto:has(img[alt^="A Michelessi vision"]) .etichetta {
  display: flex;
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  gap: 0.6rem;
  margin: 0 0 0.45rem;
}
.galleria-fitta .scheda-foto[data-visione] .etichetta::before,
.galleria-fitta .scheda-foto:has([data-visione]) .etichetta::before,
.galleria-fitta .scheda-foto:has(img[src*="-ai."]) .etichetta::before,
.galleria-fitta .scheda-foto:has(img[alt^="Visione"]) .etichetta::before,
.galleria-fitta .scheda-foto:has(img[alt^="Project vision"]) .etichetta::before,
.galleria-fitta .scheda-foto:has(img[alt^="A Michelessi vision"]) .etichetta::before {
  width: 1.4rem;
}

/* --- A06 · galleria fitta anche sulle altre pagine cucine --------
   Quando la griglia arriva sulle sottopagine e sulle 14 gallerie,
   tutto ciò che nel .contenitore non è una scheda (titolo, prosa
   d'apertura, briciole, paginazione) occupa la riga intera:
   niente titoli schiacciati in una colonna. */
.galleria-fitta .contenitore > :not(.scheda-foto) { grid-column: 1 / -1; }

/* --- REGIA · la barra fra 901 e 1099 px (tablet orizzontale) ------
   Trovato in collaudo: in quella fascia il menù è già quello a
   tendina con l'hamburger (max-width 1099), ma scendendo il JS
   aggiunge lo stesso .testata--compatta e le regole «da schermo
   largo» (min-width 901) riportavano le bandierine a
   right: var(--bordo), cioè SOTTO l'hamburger, e stringevano la
   barra a 43 px con l'hamburger (49 px) che sbordava. Qui, solo
   in quella fascia, la barra compatta resta uguale alla barra
   normale: bandierine accanto all'hamburger, altezza intera. */
@media (min-width: 901px) and (max-width: 1099px) {
  .testata--compatta .testata__interno { padding: 0.9rem var(--bordo); }
  .testata--compatta .testata__logo img { height: 2.25rem; }
  .testata--compatta .cambio-lingua { right: calc(var(--bordo) + 3.2rem); gap: 14px; }
  .testata--compatta .cambio-lingua a { flex-direction: column; gap: 4px; min-height: 0; padding: 0; }
  .testata--compatta .cambio-lingua .cl-sigla { font-size: 11px; }
  .testata--compatta .cambio-lingua .cl-bandiera { width: 32px; height: 21px; }
  .testata--compatta .cambio-lingua a.attiva .cl-bandiera { outline-width: 2px; }
}

/* ==== A11 (3 settembre 2026) — nota ====
   Qui c'era una regola «.testata--compatta .cambio-lingua { margin-left: 1rem }».
   Non spostava nulla: .cambio-lingua è position:absolute ancorata solo a
   destra (right: var(--bordo), left:auto), e su un box assoluto così il
   margine sinistro non ha effetto. Misurato nel browser a 1200 px: con
   margin-left 0, 1rem e 8rem il bordo sinistro restava identico.
   Il respiro fra l'ultima voce del menù e le bandierine c'è già, ed è dato
   dalla regola qui sopra (.testata--compatta .menu__lista {
   padding-right: calc(var(--bordo) + 8rem) }), che agisce su un elemento
   statico e quindi funziona davvero. Regola morta rimossa, non sostituita:
   toccare «right» qui romperebbe la fascia 901-1099 px, dove le bandierine
   sono già spostate a calc(var(--bordo) + 3.2rem) per non finire sotto
   l'hamburger. */