/* ===========================================================================
   ACUSTICA — design system
   ---------------------------------------------------------------------------
   I token colore sono estratti dal volantino Marmomac 2022, non inventati:
   il sito e il materiale già stampato parlano la stessa lingua.

   La regola che governa tutto:
       la pietra è l'unico elemento colorato della pagina.
   Nero, bianco, e un filo d'oro. Nient'altro compete con il marmo.
   =========================================================================== */

:root {
  /* Palette --------------------------------------------------------------- */
  --oro:        #b49a63;
  --oro-chiaro: #d4bd8c;
  --oro-scuro:  #8d764a;
  --moro:       #3e3733;
  --perla:      #edede9;
  --nero:       #1a1715;
  --nero-fondo: #100e0d;
  --bianco:     #fbfaf8;

  /* Ruoli ----------------------------------------------------------------- */
  --fondo:        var(--bianco);
  --testo:        var(--moro);
  --testo-tenue:  #857d75;
  --filo:         #ddd8d0;

  /* Tipografia ------------------------------------------------------------
     Servita in locale: nessun font remoto, nessuna dipendenza da CDN.
     Da sostituire con Cormorant Garamond su licenza quando il brand book
     sarà chiuso — vedi 'piano di sviluppo/01-branding/identita-visiva.md'. */
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
           Palatino, "Book Antiqua", Georgia, serif;
  --sans:  ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto,
           "Helvetica Neue", Arial, sans-serif;

  /* Misure ---------------------------------------------------------------- */
  --max:      1280px;
  --max-testo: 62ch;
  --gutter:   clamp(1.25rem, 4vw, 3.5rem);
  --sezione:  clamp(4rem, 10vw, 9rem);

  --transizione: 280ms cubic-bezier(.2, .6, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--sans);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

/* Vince su ogni display: impostato più sotto — senza questo un elemento
   nascosto con [hidden] ma dichiarato display:flex resta visibile. */
[hidden] { display: none !important; }

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

/* ---------------------------------------------------------------------------
   Tipografia
   --------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem); }
h2 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3.4rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); }
h4 { font-size: 1.1rem; font-family: var(--sans); font-weight: 600; }

p { margin: 0 0 1.3em; max-width: var(--max-testo); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--oro); text-underline-offset: .25em; }
a:hover { color: var(--oro-scuro); }

strong { font-weight: 600; }

/* Occhiello: la piccola etichetta in maiuscoletto sopra i titoli */
.occhiello {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro-scuro);
  margin: 0 0 1.4em;
  display: flex;
  align-items: center;
  gap: .9em;
}
.occhiello::after {
  content: "";
  flex: 1;
  max-width: 5rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
}

.sommario {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  line-height: 1.45;
  color: var(--moro);
}

.tenue { color: var(--testo-tenue); }
.piccolo { font-size: .875rem; line-height: 1.6; }
.nota {
  font-size: .82rem;
  line-height: 1.6;
  color: var(--testo-tenue);
  max-width: 56ch;
}
/* Fascia annuncio fiera (Marmomac 2026). Temporanea: si toglie svuotando
   la chiave "avviso" nei contenuti/*.json. */
.avviso-fiera {
  display: block;
  text-align: center;
  background: var(--moro);
  color: #f3ece0;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .55rem 1rem;
  text-decoration: none;
}
.avviso-fiera:hover { background: #4a423c; color: #fff; }
.avviso-fiera b { color: var(--oro-chiaro); font-weight: 600; letter-spacing: .1em; }

/* Dicitura di tutela: Stele è un design UE registrato (non un marchio → niente ®). */
.registrato {
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin: 1.8em 0 0;
}

/* ---------------------------------------------------------------------------
   Impaginazione
   --------------------------------------------------------------------------- */
.contenitore {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenitore--stretto { max-width: 780px; }

.sezione { padding-block: var(--sezione); }
.sezione--sottile { padding-block: calc(var(--sezione) * .55); }

/* Sezioni scure: qui vive il prodotto */
.scuro {
  background: var(--nero);
  color: var(--perla);
  --testo: var(--perla);
  --testo-tenue: #9a918a;
  --filo: #322c28;
}
.scuro h1, .scuro h2, .scuro h3, .scuro .sommario { color: var(--perla); }
.scuro .occhiello { color: var(--oro); }

.griglia { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
/* Hub approfondimenti: flex centrato così l'ultima riga incompleta resta al
   centro (con 14 card l'ultima è una coppia). Larghezza card ~ quella della 3-col. */
.griglia--carte { display: flex; flex-wrap: wrap; justify-content: center; }
.griglia--carte > .modello { flex: 0 1 21rem; }
/* Atelier, sezione «Chi lavora la pietra / Il progetto»: due colonne di testo
   allineate in ALTO (il default .griglia--2 è center, che sfasa i titoli quando
   le colonne hanno altezze diverse). */
#ghirardi .griglia--2 { align-items: start; }
@media (min-width: 860px) {
  .griglia--2 { grid-template-columns: 1fr 1fr; align-items: center; }
  .griglia--3 { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .griglia--4 { grid-template-columns: repeat(4, 1fr); align-items: start; }
  .griglia--laterale { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
}
@media (min-width: 560px) and (max-width: 859px) {
  .griglia--3 { grid-template-columns: 1fr 1fr; }
  .griglia--4 { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   Marchio — il logotipo del volantino, ridisegnato in SVG.
   La linea interrotta dal cerchio non è un ornamento: è il frontale del
   diffusore, anello e linea, ridotto a segno.
   --------------------------------------------------------------------------- */
.marchio {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .32em;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}
.marchio__nome {
  font-family: var(--serif);
  font-size: 1.5rem;
  letter-spacing: .3em;
  text-indent: .3em;
  font-weight: 400;
  white-space: nowrap;
}
.marchio__segno { display: block; width: 100%; height: 10px; overflow: visible; }
.marchio__segno line, .marchio__segno circle { stroke: var(--oro); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.marchio__qualificatore {
  font-family: var(--sans);
  font-size: .58rem;
  letter-spacing: .38em;
  text-indent: .38em;
  text-transform: uppercase;
  color: var(--oro);
}
.marchio--grande .marchio__nome { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4.5rem); }
.marchio--grande .marchio__segno { height: 22px; }
.marchio--grande .marchio__qualificatore { font-size: clamp(.6rem, .5rem + .35vw, .85rem); }

/* ---------------------------------------------------------------------------
   Testata
   --------------------------------------------------------------------------- */
.testata {
  position: sticky;
  top: 0;
  /* Sopra al suggerimento di lingua (70): il menu a scomparsa vive dentro la
     testata, e se la testata stesse sotto, la barra gli si sovrapporrebbe. */
  z-index: 80;
  background: color-mix(in srgb, var(--nero) 92%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #2b2523;
  color: var(--perla);
}
.testata__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  padding-block: .75rem;
}
.testata .marchio__nome { font-size: 1.15rem; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav a {
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--perla);
  opacity: .82;
  transition: opacity var(--transizione), color var(--transizione);
  white-space: nowrap;
}
.nav a:hover { opacity: 1; color: var(--oro-chiaro); }
.nav a[aria-current="page"] { opacity: 1; color: var(--oro); }

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid #46403c;
  color: var(--perla);
  padding: .55rem .9rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 940px) {
  .nav__toggle { display: block; }
  /* Il pannello copre tutto lo schermo sotto la testata. Prima si fermava
     all'altezza del suo contenuto e sotto ricompariva la pagina — sul
     configuratore, dove i campioni di pietra sono chiari e grandi, sembrava
     che il menu ci si sovrapponesse. Un pannello pieno toglie il dubbio.
     `--testata-h` la misura site.js: 76px scritto a mano si sfilava appena
     la barra cresceva di un pixel. Il fallback serve senza JavaScript. */
  .nav {
    /* Trappola: la testata ha un backdrop-filter, e un filtro rende
       l'elemento il blocco contenitore dei discendenti `fixed`. Quindi
       `bottom: 0` qui dentro vuol dire "in fondo alla barra", non "in fondo
       allo schermo", e il pannello resta alto un pelo. L'altezza va detta in
       unità di viewport, che il blocco contenitore non lo guardano. */
    position: fixed;
    inset: var(--testata-h, 76px) 0 auto;
    height: calc(100dvh - var(--testata-h, 76px));
    z-index: 1;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--nero);
    border-bottom: 1px solid #2b2523;
    padding: .5rem var(--gutter) 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav[hidden] { display: none; }
  .nav a { padding: 1rem 0; border-bottom: 1px solid #241f1d; font-size: .95rem; }
  .nav .bottone { margin-top: 1.25rem; text-align: center; }
}

/* ---------------------------------------------------------------------------
   Bottoni
   --------------------------------------------------------------------------- */
/* Mentre il menu è aperto la pagina dietro non scorre. */
.menu-aperto { overflow: hidden; }

.bottone {
  display: inline-block;
  padding: .95em 2em;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--oro);
  background: transparent;
  color: var(--oro);
  cursor: pointer;
  transition: background var(--transizione), color var(--transizione), border-color var(--transizione);
}
.bottone:hover { background: var(--oro); color: var(--nero); }

.bottone--pieno { background: var(--oro); color: var(--nero); }
.bottone--pieno:hover { background: var(--oro-chiaro); border-color: var(--oro-chiaro); color: var(--nero); }

.bottone--sobrio { border-color: currentColor; color: inherit; opacity: .8; }
.bottone--sobrio:hover { background: currentColor; opacity: 1; }
.scuro .bottone--sobrio:hover { color: var(--nero); }

/* Pulsante WhatsApp: icona a fianco del testo, monocromatica — eredita il
   colore del bottone (oro, e nero al passaggio del mouse) per restare in
   palette invece del verde WhatsApp, che stonerebbe. */
.bottone--wa { display: inline-flex; align-items: center; gap: .6em; }
.bottone--wa .icona { width: 1.2em; height: 1.2em; fill: currentColor; flex: none; }

.bottoni { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; }

/* ---------------------------------------------------------------------------
   Apertura
   ---------------------------------------------------------------------------
   Testo a sinistra, il diffusore acceso a destra su fondo nero. Il prodotto è
   l'unica cosa illuminata della schermata — che è esattamente ciò che fa nella
   stanza di chi lo compra.
   --------------------------------------------------------------------------- */
.apertura {
  position: relative;
  background: var(--nero-fondo);
  color: var(--perla);
  overflow: hidden;
  --testo-tenue: #9a918a;
}
.apertura__griglia {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  min-height: min(86vh, 820px);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
@media (min-width: 900px) {
  .apertura__griglia { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}

/* --- Apertura con filmato ---------------------------------------------------
   Il filmato riempie la sezione; sopra ci va una velatura che scende da
   sinistra, perché il testo bianco su marmo illuminato non si legge. La
   velatura è più densa dove sta il testo e si apre a destra, dove sta il
   diffusore: si vede l'oggetto e si legge il titolo. */
/* Il filmato occupa la sua sezione per intero, senza niente sopra: si chiude
   sulle tre righe del manifesto, e un titolo sovrapposto ci finiva addosso.
   `contain` e non `cover`: ritagliando, quelle righe verrebbero tagliate ai
   lati. Il fotogramma si vede tutto, e il nero attorno è quello della pagina. */
.apertura--video { padding: 0; }
.apertura__video {
  display: block;
  width: 100%;
  height: min(clamp(420px, 42vw, 700px), 68vh);
  object-fit: cover;
  object-position: center;
  background: var(--nero-fondo);
}

/* Perché `cover` qui non taglia la scritta finale, e su telefono sì.
   Il riquadro è più LARGO di 16:9: riempiendolo, il fotogramma viene ritagliato
   sopra e sotto, mai ai lati. Le tre righe stanno fra il 33% e il 66%
   dell'altezza, cioè al centro, e restano dentro anche su schermi molto
   larghi. Su telefono invece il riquadro è più STRETTO di 16:9: lì `cover`
   taglierebbe ai lati e le righe verrebbero mozzate, quindi si mostra il
   fotogramma intero e il nero attorno è quello della pagina. */
@media (max-width: 899px) {
  .apertura__video { height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
}

/* Il titolo, subito sotto. Stessa sezione scura, nessuna velatura da gestire. */
.apertura--testo { padding-block: clamp(2.75rem, 6vw, 4.5rem) clamp(3.25rem, 7vw, 5rem); }
.apertura--testo .apertura__testo { max-width: 46rem; }


.apertura__testo { position: relative; z-index: 1; }
/* Più contenuto del titolo di pagina: qui il titolo divide lo spazio con la
   fotografia, e a 5.5rem andrebbe a capo in punti sgradevoli. */
.apertura h1 {
  font-size: clamp(2.4rem, 1.5rem + 3.1vw, 4.1rem);
  margin-bottom: .4em;
  color: var(--perla);
}
.apertura .sommario { color: var(--perla); max-width: 40ch; opacity: .9; }

.apertura__figura { position: relative; justify-self: center; margin: 0; }
.apertura__figura img {
  position: relative;
  z-index: 1;
  max-height: min(76vh, 700px);
  width: auto;
  margin-inline: auto;
}
/* Alone caldo dietro il diffusore: la luce che emette, restituita alla pagina */
.apertura__figura::before {
  content: "";
  position: absolute;
  inset: -18%;
  background: radial-gradient(ellipse at center, rgba(180,154,99,.20), rgba(180,154,99,0) 68%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   I caratteri d'ascolto
   ---------------------------------------------------------------------------
   Tre colonne, una per modo di ascoltare. Ognuna dice cosa dà, cosa costa e
   per chi è: la gamma non è una scala, e una colonna che elencasse solo i
   pregi la farebbe tornare una scala.
   --------------------------------------------------------------------------- */
.carattere { border-top: 1px solid var(--oro-scuro); padding-top: 1.4rem; }
.carattere__nome {
  font-family: var(--serif); font-size: 1.35rem; line-height: 1.2;
  margin: 0 0 .2rem; color: var(--perla);
}
.carattere__modello {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro); margin: 0 0 1.1rem;
}
.carattere__voce { font-size: .92rem; line-height: 1.6; margin: 0 0 .7rem; }
.carattere__voce b {
  display: block; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tenue); font-weight: 600;
  margin-bottom: .15rem;
}

/* ---------------------------------------------------------------------------
   La gamma — una scheda per modello
   ---------------------------------------------------------------------------
   Immagine, nome, una riga. Niente prezzo e niente elenco di caratteristiche:
   qui si sceglie quale dei due oggetti si vuole guardare, non si compra.
   --------------------------------------------------------------------------- */
.modello {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--filo);
  transition: border-color var(--transizione), transform var(--transizione);
}
.modello:hover { border-color: var(--oro); transform: translateY(-3px); }
.modello__stato { position: absolute; top: .85rem; right: .85rem; z-index: 2; font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: .3rem .6rem; color: var(--perla); background: rgba(20,18,16,.72); border: 1px solid var(--oro); border-radius: 2px; }
.modello img { width: 100%; height: clamp(200px, 26vw, 300px); object-fit: cover; display: block; }
.modello__testo { padding: 1.6rem 1.5rem 1.75rem; }
.modello__nome {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 0 0 .5rem;
  color: var(--nero);
}
.modello__riga { font-size: .95rem; line-height: 1.6; margin: 0 0 1rem; }
.modello__freccia {
  font-size: .78rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--oro-scuro);
}
.scuro .modello { border-color: #3a332e; }
.scuro .modello__nome { color: var(--perla); }

/* I modelli non ancora nati -------------------------------------------------
   Stessa casella, stesso peso: se fossero più piccole o in coda sembrerebbero
   un ripensamento, e invece la gamma è progettata da prima che esistessero.
   Niente render inventati — un macro della pietra di quella serie: è onesto,
   e su un sito di marmo è anche più bello di un prodotto finto. */
.modello--attesa { cursor: default; }
.modello--attesa:hover { border-color: var(--filo); transform: none; }
.modello--attesa img { filter: saturate(.82) brightness(.94); }

/* La targhetta sta sull'immagine, non sopra il nome: così le quattro caselle
   hanno il testo allineato alla stessa altezza. Una riga in più su due sole
   tessere disallineava tutta la fila. */
.modello__attesa {
  position: absolute;
  top: .85rem;
  left: .85rem;
  margin: 0;
  padding: .3rem .6rem .28rem;
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro-chiaro);
  background: rgba(16, 14, 13, .74);
}


/* ---------------------------------------------------------------------------
   Figure e fasce
   --------------------------------------------------------------------------- */
figure { margin: 0; }
figcaption {
  margin-top: .9rem;
  font-size: .8rem;
  line-height: 1.55;
  color: var(--testo-tenue);
  max-width: 48ch;
}

.fascia { position: relative; overflow: hidden; background: var(--nero); }
.fascia img,
.fascia video { width: 100%; height: clamp(220px, 34vw, 460px); object-fit: cover; display: block; }

.media--bordata { border: 1px solid var(--filo); }

/* Il teaser di Gemina Lucis. L'emblema (la coppa di luce) corona il nome,
   centrato sull'asse. La foto del particolare è verticale e slanciata,
   contenuta e incorniciata in un rettangolo aureo (1 : 1,618): object-fit
   ritaglia i fianchi, non l'altezza, così la coppa resta intera e sull'asse. */
.teaser-emblema { display: block; margin: 0 auto .5rem; }
.teaser-foto { max-width: 340px; margin-left: auto; margin-right: auto; }
.teaser-foto img { width: 100%; aspect-ratio: 1 / 1.618; object-fit: cover; }

/* Lo slogan sull'ultimo fotogramma ------------------------------------------
   Il filmato della stele non gira in anello: a ogni ripartenza si vedeva un
   lampeggio. Chiude in nero, si ferma, e sul nero sale lo slogan — come la
   hero della home, dove le righe sono impresse nei pixel. Qui sono testo
   vero: si legge con lo schermo, si traduce, e non serve un file per lingua. */
.fascia--finale video { background: var(--nero-fondo); }

/* Una fascia che non ritaglia. Le altre tagliano a un'altezza fissa, e su un
   soggetto lungo va bene. Il Basis Gravis 200 invece è un blocco compatto: il
   ritaglio gli toglieva i piedi, cioè proprio il dettaglio di cui parla la
   pagina. Qui l'altezza la decide l'immagine. */
.fascia--intera img { height: auto; }

.fascia__slogan {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28em;
  padding: 0 var(--gutter);
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.6vw, 2.1rem);
  line-height: 1.25;
  color: var(--perla);
  /* Il fotogramma finale è quasi nero ma non del tutto: il velo garantisce
     il contrasto senza spegnere del tutto l'immagine sotto. */
  background: linear-gradient(rgba(16, 14, 13, .30), rgba(16, 14, 13, .62));
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease;
  pointer-events: none;
}

.fascia__slogan span { display: block; }
.fascia__slogan span + span { color: var(--oro-chiaro); }
.fascia__slogan span + span + span { color: var(--perla); }

.fascia.e-finito .fascia__slogan { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .fascia__slogan { transition: none; }
}



/* ---------------------------------------------------------------------------
   Le due strade — la biforcazione della home
   --------------------------------------------------------------------------- */
.strada {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--filo);
  background: var(--fondo);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transizione), transform var(--transizione);
}
.strada:hover { border-color: var(--oro); transform: translateY(-3px); color: inherit; }
.strada h3 { margin: 0; }
.strada p { margin: 0; font-size: .95rem; }
.strada__freccia {
  margin-top: auto;
  padding-top: .5rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-scuro);
}

/* ---------------------------------------------------------------------------
   Dati e specifiche
   --------------------------------------------------------------------------- */
.dati { border-top: 1px solid var(--filo); margin: 0; }
.dati div {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  padding: .95rem 0;
  border-bottom: 1px solid var(--filo);
}
.dati dt { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--testo-tenue); }
.dati dd { margin: 0; font-family: var(--serif); font-size: 1.25rem; text-align: right; }
.dati dd small { font-family: var(--sans); font-size: .72rem; letter-spacing: .06em; color: var(--testo-tenue); display: block; }

.cifre { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cifra__valore {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem);
  line-height: 1;
  color: var(--oro);
  display: block;
}
.cifra__etichetta {
  display: block;
  margin-top: .6rem;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* Avviso: usato per le condizioni di misura e i dati provvisori */
.avviso {
  border-left: 2px solid var(--oro);
  padding: .2rem 0 .2rem 1.35rem;
  margin: 2rem 0;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--testo-tenue);
  max-width: 58ch;
}
.avviso strong { color: var(--testo); }

/* ---------------------------------------------------------------------------
   Piede
   --------------------------------------------------------------------------- */
.piede {
  background: var(--nero-fondo);
  color: var(--perla);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.5rem;
  font-size: .9rem;
}
.piede a { text-decoration: none; opacity: .78; }
.piede a:hover { opacity: 1; color: var(--oro-chiaro); }
.piede h4 {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1.1rem;
}
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
/* La riga sui render. È piccola per non pesare, ma tiene il colore della
   chiusura qui sotto: a un contrasto più basso diventerebbe una scritta che
   nessuno legge, che è il modo elegante di non averla dichiarata. */
.piede__nota {
  margin: 1.1rem 0 0;
  max-width: 62ch;
  font-size: .72rem;
  line-height: 1.55;
  color: #8a827c;
}

.piede__chiusura {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid #2b2523;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: .78rem;
  color: #8a827c;
}

/* ---------------------------------------------------------------------------
   Utilità
   --------------------------------------------------------------------------- */
.centrato { text-align: center; }
.centrato .occhiello { justify-content: center; }
.centrato .occhiello::after { display: none; }
.centrato p, .centrato .sommario { margin-inline: auto; }

.salta {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--oro);
  color: var(--nero);
  padding: .8rem 1.4rem;
  z-index: 100;
}
.salta:focus { left: 0; }

/* ---------------------------------------------------------------------------
   Spaziature d'appoggio
   ---------------------------------------------------------------------------
   Erano attributi style="" dentro i modelli. TRAPPOLA, pagata con un sito che
   online si vedeva diverso da come si vedeva in locale: la CSP dichiara
   `style-src 'self'`, quindi il browser BLOCCA ogni stile inline. Quei margini
   semplicemente non esistevano sul sito pubblicato — l'immagine "In una stanza
   vera" era allineata a sinistra invece che centrata, e nessuna prova se ne
   accorgeva perché il server di sviluppo non manda intestazioni CSP.

   Regola, ora controllata da prova-pagine.py: nei modelli non si scrive mai
   style="". Se serve una spaziatura, sta qui.
   --------------------------------------------------------------------------- */
.sopra-05 { margin-top: .5rem; }
.sopra-1  { margin-top: 1rem; }
.sopra-15 { margin-top: 1.5rem; }
.sopra-2  { margin-top: 2rem; }
.sopra-25 { margin-top: 2.5rem; }
.sopra-3  { margin-top: 3rem; }
.sopra-35 { margin-top: 3.5rem; }
.sotto-25 { margin-bottom: 2.5rem; }
.sotto-3  { margin-bottom: 3rem; }
.sotto-35 { margin-bottom: 3.5rem; }
.coda-sezione   { padding-bottom: var(--sezione); }
.in-mezzo       { justify-content: center; }
.in-alto        { align-items: flex-start; }
.centra-blocco  { margin-inline: auto; }
.misura-lettura { max-width: 62ch; }
.sopra-4  { margin-top: 4rem; }
/* La 404 centra il suo unico blocco in verticale. */
.pagina-vuota { min-height: 70vh; display: grid; align-items: center; }

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

/* ===========================================================================
   Configuratore
   =========================================================================== */

.conf {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  padding-bottom: var(--sezione);
}
@media (min-width: 960px) {
  .conf { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: start; }
  .conf__anteprima { position: sticky; top: 100px; }
}

/* --- Anteprima ----------------------------------------------------------- */

/* Il telaio serviva a dare un fondo al disegno SVG, che era trasparente.
   La fotografia ha già la sua stanza dentro: il fondo nero con l'imbottitura
   attorno la faceva sembrare una figurina incollata su un cartoncino. Ora la
   fotografia riempie il telaio e basta. */
.anteprima__telaio {
  background: var(--nero-fondo);
  border-radius: 2px;
  overflow: hidden;
}
/* L'anteprima del configuratore: un render per pietra, montato dalle quote
   del DWG da render/scena.py. Le tredici immagini sono identiche in tutto
   tranne la pietra, e lo sono per costruzione. */
.anteprima__foto { position: relative; margin: 0; line-height: 0; }
.anteprima__foto img { width: 100%; height: auto; display: block; }
/* Onice retroilluminato: la lastra si accende da dentro. */
.anteprima__foto.anteprima--retro img { filter: brightness(1.18) saturate(1.12); }
.anteprima__foto.anteprima--retro { filter: drop-shadow(0 0 42px rgba(212, 189, 140, .38)); }

/* La fotografia porta già la sua ombra dentro lo scatto: quella disegnata
   qui serviva al disegno SVG, che era ritagliato sul fondo. Il max-width di
   340 px era la misura del disegno, e sulla fotografia la strozzava. */
#anteprima { width: 100%; }

.nota--forte {
  margin-top: 1.5rem;
  border-left: 2px solid var(--oro);
  padding-left: 1.15rem;
  color: var(--testo);
  font-size: .86rem;
}

/* --- Blocchi di scelta --------------------------------------------------- */

.blocco { border: 0; padding: 0; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }

.blocco__titolo {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
  padding: 0;
  margin-bottom: .5rem;
}
.blocco__numero {
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--oro-scuro);
  border: 1px solid var(--oro);
  border-radius: 50%;
  width: 1.9em;
  height: 1.9em;
  display: inline-grid;
  place-items: center;
  flex: none;
}
.blocco__testo { font-size: .92rem; color: var(--testo-tenue); margin-bottom: 1.75rem; }

.gruppo__titolo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem 1rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo);
  margin: 2rem 0 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--filo);
}
.blocco > div > .gruppo__titolo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.gruppo__prezzo { color: var(--oro-scuro); letter-spacing: .08em; }
.gruppo__sottotitolo {
  flex: 1 0 100%;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--testo-tenue);
}

/* --- Campioni pietra ----------------------------------------------------- */

.campioni {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: .9rem;
}

.campione {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1px solid var(--filo);
  padding: .35rem .35rem .7rem;
  transition: border-color var(--transizione), transform var(--transizione);
}
.campione:hover { border-color: var(--oro); }
.campione input { position: absolute; opacity: 0; width: 0; height: 0; }
.campione:focus-within { outline: 2px solid var(--oro); outline-offset: 2px; }

.campione img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.campione__nome {
  display: block;
  margin-top: .55rem;
  font-size: .82rem;
  line-height: 1.25;
  font-weight: 600;
}
.campione__origine { display: block; font-size: .7rem; color: var(--testo-tenue); }
.campione__nota {
  display: block;
  margin-top: .3rem;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #b08a5a;
}

.campione--scelto { border-color: var(--oro); box-shadow: inset 0 0 0 2px var(--oro); }
.campione--scelto .campione__nome { color: var(--oro-scuro); }

/* --- Pillole e opzioni --------------------------------------------------- */

.pillole { display: flex; flex-wrap: wrap; gap: .7rem; }

.pillola {
  cursor: pointer;
  border: 1px solid var(--filo);
  padding: .7rem 1.25rem;
  font-size: .86rem;
  transition: border-color var(--transizione), background var(--transizione);
}
.pillola:hover { border-color: var(--oro); }
.pillola input { position: absolute; opacity: 0; width: 0; height: 0; }
.pillola:focus-within { outline: 2px solid var(--oro); outline-offset: 2px; }
.pillola--scelta { border-color: var(--oro); background: rgba(180, 154, 99, .1); color: var(--oro-scuro); }

.opzione {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  cursor: pointer;
  border: 1px solid var(--filo);
  padding: 1.1rem 1.25rem;
  margin-bottom: .9rem;
}
.opzione:hover { border-color: var(--oro); }
.opzione input { margin-top: .35rem; accent-color: var(--oro-scuro); flex: none; }
.opzione strong { display: block; margin-bottom: .3rem; }

/* --- Riepilogo ----------------------------------------------------------- */

.riepilogo {
  background: var(--nero);
  color: var(--perla);
  --testo: var(--perla);
  --testo-tenue: #9a918a;
  --filo: #332d29;
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.riepilogo__titolo { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--perla); }
.riepilogo .dati dd { font-size: 1rem; }
.riepilogo .dati dt { text-transform: none; letter-spacing: 0; font-size: .86rem; }

.riepilogo__totale {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.5rem 0 .75rem;
}
.riepilogo__totale span {
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.riepilogo__totale strong {
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  font-weight: 400;
  color: var(--oro);
  line-height: 1;
}
.riepilogo .bottoni { margin-top: 1.75rem; }
.riepilogo a { color: var(--oro-chiaro); }

.anteprima__scelte {
  margin: 1.15rem 0 0;
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem;
}
.anteprima__scelte strong { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
.anteprima__sep { color: var(--oro); padding-inline: .3rem; }

/* ===========================================================================
   Catalogo pietre (pagina "La materia")
   =========================================================================== */

.famiglia { margin-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.famiglia__titolo {
  font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  margin-bottom: .2em;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filo);
}
.famiglia__sottotitolo { color: var(--testo-tenue); margin-bottom: 2.5rem; }

.pietre {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.pietra img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pietra h3 { font-size: 1.35rem; margin: 1rem 0 .1em; }
.pietra__origine {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro-scuro);
  margin-bottom: .9rem;
}
.pietra p { max-width: none; }
.pietra__nota {
  margin-top: .8rem;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  border-top: 1px solid var(--filo);
  padding-top: .6rem;
}

/* Photo essay della lavorazione */
.essay {
  display: grid;
  gap: clamp(.75rem, 1.5vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.essay figure { overflow: hidden; background: var(--nero); }
.essay img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform var(--transizione), opacity var(--transizione);
  opacity: .92;
}
.essay figure:hover img { transform: scale(1.03); opacity: 1; }

/* ===========================================================================
   Elenchi e moduli
   =========================================================================== */

.risorse { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--filo); }
.risorse li {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--filo);
}
.risorse__nome { font-family: var(--serif); font-size: 1.2rem; }
.risorse__stato {
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.modulo { display: grid; gap: 1.4rem; max-width: 620px; }

/* Consenso privacy sotto i moduli: checkbox + link all'informativa. Obbligatorio
   (anche lato server, in invia.php). Testo piccolo e discreto. */
.consenso { display: flex; gap: .55rem; align-items: flex-start;
            font-size: .82rem; line-height: 1.5; color: var(--testo-tenue); max-width: 58ch; }
.consenso input { margin-top: .2rem; flex: 0 0 auto; }
.consenso a { color: inherit; text-decoration: underline; }
.scuro .consenso { color: var(--perla); }

/* Atelier: indice ad àncore sotto l'intestazione; scroll-margin perché il salto
   a una sezione non finisca sotto la testata. */
.indice-atelier { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.7rem;
                  font-size: .8rem; letter-spacing: .04em; }
.indice-atelier a { color: var(--oro); text-decoration: none;
                    border-bottom: 1px solid transparent; padding-bottom: 2px; }
.indice-atelier a:hover { border-bottom-color: var(--oro); }
.ancora { scroll-margin-top: 92px; }
html { scroll-behavior: smooth; }

/* Frontespizio delle guide: illustrazione SVG in linea oro, centrata sotto
   l'intestazione. Evocativa, non tecnica. */
.figura-guida { display: block; margin: 2.4rem auto .4rem; width: 320px; max-width: 82%; height: auto; }
/* Simbolo in cima a ogni card dell'hub Approfondimenti. */
.card-fig { display: block; width: 150px; max-width: 70%; height: auto; margin: .2rem auto 1rem; }

/* Guide: ogni sezione a due colonne (illustrazione + testo), lati alternati
   per un ritmo da rivista. Su mobile si impila. */
.guida-sez { display: flex; align-items: center; gap: 2.8rem; margin: 0 auto 3.4rem; max-width: 860px; }
.guida-sez:nth-child(even) { flex-direction: row-reverse; }
.guida-sez__fig { flex: 0 0 200px; }
.guida-sez__fig img { width: 100%; height: auto; display: block; }
.guida-sez__txt { max-width: 52ch; }
.guida-sez__txt h2 { margin-top: 0; }
@media (max-width: 640px) {
  .guida-sez, .guida-sez:nth-child(even) { flex-direction: column; gap: 1rem; text-align: left; }
  .guida-sez__fig { flex: 0 0 auto; width: 190px; }
}
.campo { display: grid; gap: .5rem; }
.campo > span {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.campo input, .campo textarea, .campo select {
  border: 1px solid var(--filo);
  background: transparent;
  padding: .85rem 1rem;
  font-size: 1rem;
  width: 100%;
  border-radius: 0;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: 2px solid var(--oro);
  outline-offset: -1px;
  border-color: var(--oro);
}
.campo textarea { min-height: 9rem; resize: vertical; }

/* ===========================================================================
   Lingua
   ---------------------------------------------------------------------------
   Il selettore è un <details>: si apre e si chiude da solo, senza JavaScript.
   Con quattro lingue un elenco in linea non ci sta più, e una <select> avrebbe
   l'aspetto del sistema operativo invece che del sito.
   =========================================================================== */

.lingue { position: relative; font-size: .72rem; }

.lingue summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .5em .7em;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  opacity: .8;
  transition: opacity var(--transizione), border-color var(--transizione);
}
.lingue summary::-webkit-details-marker { display: none; }
.lingue summary::after {
  content: "";
  width: .4em; height: .4em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-.1em);
  transition: transform var(--transizione);
}
.lingue summary:hover { opacity: 1; color: var(--oro-chiaro); }
.lingue[open] summary { opacity: 1; color: var(--oro); border-color: #46403c; }
.lingue[open] summary::after { transform: rotate(-135deg) translateY(-.1em); }

.lingue ul {
  position: absolute;
  top: calc(100% + .4rem);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 9rem;
  margin: 0; padding: .35rem 0;
  list-style: none;
  background: var(--nero);
  border: 1px solid #46403c;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.lingue li { margin: 0; }
.lingue ul a {
  display: block;
  padding: .55rem 1rem;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: none;
  color: var(--perla);
  opacity: .8;
}
.lingue ul a:hover { opacity: 1; background: rgba(180, 154, 99, .14); color: var(--oro-chiaro); }
.lingue ul a[aria-current="true"] { opacity: 1; color: var(--oro); }

@media (max-width: 940px) {
  /* Nel menu a scomparsa non serve una tendina dentro una tendina:
     le lingue si mostrano tutte, in fila. */
  .nav .lingue { margin-top: 1.25rem; border-top: 1px solid #241f1d; padding-top: 1rem; }
  .lingue summary { display: none; }
  .lingue ul {
    position: static; display: flex; flex-wrap: wrap; gap: .5rem;
    border: 0; background: none; box-shadow: none; padding: 0; min-width: 0;
  }
  .lingue ul a { border: 1px solid #46403c; padding: .5rem .9rem; }
}

/* ---------------------------------------------------------------------------
   Gli elenchi di documenti
   ---------------------------------------------------------------------------
   Stanno in Progettisti, non in una pagina "Download" a sé: una pagina di file
   è un magazzino, e chi ci arriva scarica un PDF invece di leggere l'oggetto.
   Qui invece sono uno strumento di lavoro, nel posto dove si lavora.
   --------------------------------------------------------------------------- */
.elenco-doc { list-style: none; margin: .6rem 0 0; padding: 0; }
.elenco-doc li { margin: 0; border-top: 1px solid var(--filo); }
.elenco-doc li:last-child { border-bottom: 1px solid var(--filo); }
.elenco-doc a,
.elenco-doc--attesa li {
  display: block;
  padding: .7rem 0;
  font-size: .95rem;
  text-decoration: none;
  color: var(--testo);
}
.elenco-doc a { transition: color var(--transizione), padding-left var(--transizione); }
.elenco-doc a::after { content: " \2192"; color: var(--oro-scuro); }
.elenco-doc a:hover { color: var(--oro-scuro); padding-left: .35rem; }
.elenco-doc--attesa li { color: var(--testo-tenue); }
.elenco-doc--attesa li::before { content: "\2014\00a0\00a0"; color: var(--filo); }
.scuro .elenco-doc li { border-color: #3a332e; }
.scuro .elenco-doc a { color: var(--perla); }

/* ---------------------------------------------------------------------------
   La tendina della gamma
   ---------------------------------------------------------------------------
   Stessa meccanica della tendina delle lingue, ma ancorata a sinistra: si apre
   sotto la prima voce del menu, non sull'angolo destro. Esiste perché la gamma
   cresce — due modelli, un complemento, e due serie in arrivo — e una barra che
   elenca i prodotti uno accanto all'altro non regge la crescita.
   --------------------------------------------------------------------------- */
.gamma { position: relative; }

.gamma summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: .8rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--perla);
  opacity: .82;
  white-space: nowrap;
  transition: opacity var(--transizione), color var(--transizione);
}
.gamma summary::-webkit-details-marker { display: none; }
.gamma summary::after {
  content: "";
  width: .38em; height: .38em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-.12em);
  transition: transform var(--transizione);
}
.gamma summary:hover { opacity: 1; color: var(--oro-chiaro); }
.gamma[open] summary { opacity: 1; color: var(--oro); }
.gamma[open] summary::after { transform: rotate(-135deg) translateY(-.12em); }

.gamma ul {
  position: absolute;
  top: calc(100% + .9rem);
  inset-inline-start: 0;
  z-index: 60;
  min-width: 13rem;
  margin: 0; padding: .35rem 0;
  list-style: none;
  background: var(--nero);
  border: 1px solid #46403c;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.gamma li { margin: 0; }
.gamma ul a {
  display: block;
  padding: .6rem 1.1rem;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: none;
  text-decoration: none;
  color: var(--perla);
  opacity: .82;
}
.gamma ul a:hover { opacity: 1; background: rgba(180, 154, 99, .14); color: var(--oro-chiaro); }
.gamma ul a[aria-current="page"] { opacity: 1; color: var(--oro); }
/* L'ultima voce è l'indice delle schede, non un prodotto: si stacca. */
.gamma li:last-child a { border-top: 1px solid #2c2724; margin-top: .3rem; padding-top: .7rem; }

@media (max-width: 940px) {
  /* Nel menu a scomparsa la tendina non serve: i prodotti si mostrano in
     colonna, indentati sotto l'etichetta. Un <details> chiuso non disegna il
     proprio contenuto, quindi sullo stretto resta sempre aperto. */
  .gamma summary { opacity: .55; font-size: .7rem; cursor: default; }
  .gamma summary::after { display: none; }
  .gamma ul {
    position: static; border: 0; background: none; box-shadow: none;
    padding: .2rem 0 0; min-width: 0;
  }
  .gamma ul a { padding: .5rem 0 .5rem 1rem; font-size: .95rem; }
  .gamma li:last-child a { border-top: 0; margin-top: 0; padding-top: .5rem; }
}

/* ---------------------------------------------------------------------------
   Il suggerimento di lingua
   ---------------------------------------------------------------------------
   Compare quando la lingua del browser non è quella della pagina. NON
   reindirizza: rompere i segnalibri e sbalzare Google — che scansiona
   dall'estero — fuori dalla pagina italiana costa più di quanto valga la
   comodità. Si propone, non si decide al posto di chi legge.
   --------------------------------------------------------------------------- */
.suggerimento {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  background: var(--nero);
  border-top: 1px solid var(--oro-scuro);
  color: var(--perla);
  padding: .9rem var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .6rem 1.25rem;
  font-size: .9rem;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .35);
}
.suggerimento a {
  color: var(--oro);
  font-weight: 600;
  text-underline-offset: .25em;
}
.suggerimento button {
  background: none;
  border: 1px solid #46403c;
  color: #9a918a;
  padding: .35rem .8rem;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.suggerimento button:hover { color: var(--perla); border-color: var(--perla); }

/* La striscia di pietre in fondo al configuratore. Non è un selettore: è un
   elenco. Perciò niente bordo che si accende al passaggio del mouse e niente
   cursore a mano — sembrerebbe cliccabile e non lo è. */
.pietre-elenco {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
}
.pietre-elenco li { margin: 0; }
.pietre-elenco img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: 2px;
}
.pietre-elenco span {
  display: block; margin-top: .4rem;
  font-size: .78rem; line-height: 1.25; color: var(--testo);
}
.pietre-elenco small { display: block; font-size: .68rem; color: var(--testo-tenue); }

/* La trappola per i robot nei moduli: un campo che un umano non vede e non
   raggiunge col tabulatore. Fuori schermo e non `display:none`, perché certi
   robot saltano i campi nascosti proprio così. Non si può usare uno stile
   inline: la CSP del sito li blocca. */
.esca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* La scelta del modello, in testa al configuratore. Non è un passo numerato
   come gli altri: viene prima, e decide quali passi esistono. */
.blocco--modello { border-bottom: 1px solid var(--filo); padding-bottom: 1.1rem; }
.blocco--modello select {
  width: 100%; padding: .7rem .8rem; font: inherit; font-size: 1rem;
  color: var(--testo); background: var(--fondo);
  border: 1px solid var(--filo); border-radius: 2px;
}
.blocco--modello select:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* La lente sui campioni di pietra.
   Un <dialog> vero: si chiude con Esc, blocca il fondo e gestisce il fuoco da
   solo — nessuna libreria, nessuna trappola di accessibilità da riscrivere.
   Non è un'immagine appesa al nero: è una scheda, con la cornice, il nome, la
   cava e la descrizione. Il campione va guardato come si guarda una lastra. */
.pietra__ingrandisci {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; line-height: 0;
}
.pietra__ingrandisci:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.lente { border: 0; padding: 0; background: none; max-width: none; max-height: none; }
.lente::backdrop { background: rgba(10, 9, 8, .9); }

.lente__scheda {
  position: relative;
  width: min(92vw, 880px);
  max-height: 92vh;
  overflow: auto;
  background: var(--nero);
  border: 1px solid rgba(180, 154, 99, .35);
  color: var(--perla);
  padding: clamp(1rem, 3vw, 1.9rem);
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .lente__scheda { grid-template-columns: 1.15fr 1fr; align-items: start; }
}

.lente__telaio { position: relative; line-height: 0; background: var(--nero-fondo); }
.lente__foto {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  transition: filter .35s ease, opacity .35s ease;
}

/* Mentre arriva la copia grande si mostra la piccola, che è già in cache:
   appena sfocata, con un filo dorato che scorre. Meglio di un rettangolo
   vuoto con una rotellina — qualcosa da guardare c'è subito. */
.lente--carica .lente__foto { filter: blur(6px) saturate(.9); opacity: .85; }
.lente__carica { display: none; }
.lente--carica .lente__carica {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(180, 154, 99, .2); overflow: hidden;
}
.lente--carica .lente__carica i {
  display: block; width: 38%; height: 100%; background: var(--oro-chiaro);
  animation: lente-scorre 1.1s linear infinite;
}
@keyframes lente-scorre {
  from { transform: translateX(-100%); }
  to   { transform: translateX(365%); }
}
@media (prefers-reduced-motion: reduce) {
  .lente--carica .lente__carica i { animation: none; width: 100%; opacity: .6; }
  .lente__foto { transition: none; }
}

.lente__testo { line-height: 1.5; }
.lente__nome {
  font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.1; margin: 0 0 .35rem; color: var(--perla);
}
.lente__origine {
  margin: 0 0 .9rem; font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro);
}
.lente__descrizione { margin: 0; font-size: .92rem; color: #cfc9c1; }

.lente__chiudi {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 2.2rem; height: 2.2rem; padding: 0; line-height: 1;
  font-size: 1.5rem; color: var(--perla);
  background: rgba(16, 14, 13, .7); border: 1px solid rgba(237, 237, 233, .25);
  border-radius: 50%; cursor: pointer;
}
.lente__chiudi:hover { border-color: var(--oro); color: var(--oro-chiaro); }
.lente__chiudi:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

/* La conferma d'invio prende il posto del modulo.
   Prima era una riga grigia in fondo, sotto un'altra nota: c'era nel codice e
   non si vedeva. Chi ha appena mandato una richiesta deve capirlo in un colpo
   d'occhio, senza cercare. */
.conferma {
  border-left: 2px solid var(--oro);
  padding: 1.4rem 0 1.4rem 1.5rem;
}
.conferma:focus { outline: none; }
.conferma__titolo {
  font-family: var(--serif); font-size: 1.55rem; line-height: 1.15;
  margin: 0 0 .5rem; color: var(--testo);
}
.conferma__testo { margin: 0; color: var(--testo-tenue); }
.conferma__rif {
  margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
}
.conferma__rif span {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--testo-tenue);
}
.conferma__rif b {
  font-family: var(--mono, monospace); font-size: 1rem; letter-spacing: .06em;
  color: var(--oro-scuro);
}

/* Testo di design: una riga in rilievo, in grazia, per i passaggi che devono
   restare in mente. Non è un grassetto sans — è un respiro tipografico. */
.rilievo {
  font-family: var(--serif); font-size: clamp(1.2rem, 2.3vw, 1.5rem);
  line-height: 1.32; color: var(--testo); margin: 1.9rem 0 .2rem;
  max-width: 30ch;
}
.scuro .rilievo { color: var(--perla); }

/* La chiusura sulla gamma: i tre nomi come una firma, sopra un filo. */
.gamma-trio {
  margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--filo);
  font-family: var(--serif); font-size: 1.08rem; color: var(--oro-scuro);
}
.gamma-trio strong { color: var(--testo); font-weight: 600; }