/* ==========================================================================
   EUROSTONE — FOGLIO DI STILE PRINCIPALE
   Mobile-first. Ogni @media è min-width: si parte dal telefono e si sale.
   Ordine: 1 Reset · 2 Base · 3 Layout · 4 Utility · 5 Componenti · 6 Pagine
   ========================================================================== */

@import url('../fonts/fonts.css');

/* ==========================================================================
   1. RESET
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;   /* niente ingrandimento automatico iOS in landscape */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-6));
  /* Il contenimento orizzontale va sulla radice, non sul body: `overflow-x`
     diverso da `visible` sul body ne fa un contenitore di scorrimento
     autonomo, e da lì in poi scroll-padding-top, le ancore e il ripristino
     della posizione smettono di funzionare. Errore facile e difficile da
     diagnosticare. */
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background-color: var(--superficie-base);
  color: var(--testo-primario);
  font-family: var(--font-testo);
  font-size: var(--testo-base);
  line-height: var(--interlinea-corpo);
  font-weight: var(--peso-normale);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

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

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

ul[class], ol[class] { list-style: none; padding: 0; }

a { color: inherit; }

:target { scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }

/* Focus: mai rimosso. Visibile solo da tastiera, ma sempre presente. */
:focus-visible {
  outline: var(--focus-anello);
  outline-offset: var(--focus-offset);
  border-radius: var(--raggio-xs);
}
.su-scuro :focus-visible,
.footer :focus-visible,
.banda-cta :focus-visible,
.hero :focus-visible,
.testata :focus-visible { outline: var(--focus-anello-scuro); }

::selection { background: var(--caffe-100); color: var(--caffe-900); }

body { background: var(--superficie-base); }

/* ==========================================================================
   2. BASE — tipografia
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--peso-medio);   /* il Cormorant a 400 è troppo esile sotto i 30px */
  line-height: var(--interlinea-titolo);
  letter-spacing: var(--spaziatura-titolo);
  color: var(--testo-primario);
}

h1 { font-size: var(--testo-4xl); line-height: var(--interlinea-stretta);
     letter-spacing: var(--spaziatura-display); }
h2 { font-size: var(--testo-3xl); line-height: 1.06; letter-spacing: var(--spaziatura-display); }
h3 { font-size: var(--testo-2xl); }
h4 { font-size: var(--testo-xl); font-weight: var(--peso-semi); }

h5, h6 {
  font-family: var(--font-testo);
  font-size: var(--testo-sm);
  font-weight: var(--peso-semi);
  line-height: var(--interlinea-media);
}

p { max-width: var(--misura-testo); }

strong, b { font-weight: var(--peso-semi); }

small { font-size: var(--testo-sm); }

/* Occhiello: la piccola etichetta maiuscola sopra i titoli di sezione.
   Elemento ricorrente del sistema, è ciò che dà il tono editoriale. */
.occhiello {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-testo);
  font-size: var(--testo-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-occhiello);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--testo-secondario);
  margin-bottom: var(--sp-5);
}
/* Nelle ispirazioni l'etichetta è solo testo spaziato, senza trattino:
   il tono editoriale lo dà la spaziatura, non un ornamento. */
.occhiello--centro { justify-content: center; text-align: center; margin-inline: auto; }
.occhiello { max-width: none; }
.su-scuro .occhiello,
.hero .occhiello,
.testata .occhiello { color: var(--bronzo-400); }

/* Sommario: il paragrafo introduttivo sotto un titolo di sezione */
.sommario {
  font-size: var(--testo-lg);
  font-weight: var(--peso-light);
  line-height: 1.6;
  color: var(--testo-secondario);
  max-width: 58ch;
}
.su-scuro .sommario,
.hero .sommario,
.testata .sommario { color: var(--testo-su-scuro-sec); }

/* Corsivo Cormorant: una parola-chiave dentro i titoli display. Stesso
   colore del titolo: nelle ispirazioni il corsivo basta da solo. */
.enfasi {
  font-style: italic;
  font-weight: var(--peso-normale);
  color: inherit;
}

/* Numeri tabulari per cifre, prezzi, misure: evita il salto di layout */
.cifre { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ==========================================================================
   3. LAYOUT
   ========================================================================== */

.contenitore {
  width: 100%;
  max-width: var(--contenitore);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.contenitore--stretto { max-width: var(--contenitore-stretto); }
.contenitore--largo   { max-width: var(--contenitore-largo); }

.sezione    { padding-block: var(--sezione-y); }
.sezione--lg { padding-block: var(--sezione-y-lg); }
.sezione--sm { padding-block: var(--sezione-y-sm); }
.sezione--alt   { background: var(--superficie-alt); }
.sezione--scura { background: var(--superficie-scura); color: var(--testo-su-scuro); }
.sezione--scura h1, .sezione--scura h2,
.sezione--scura h3, .sezione--scura h4 { color: var(--testo-su-scuro); }

/* Intestazione di sezione */
.intestazione-sezione { margin-bottom: var(--sp-10); }
/* Lo stacco fra titolo e sommario non può dipendere dal fatto che il titolo
   stia su una riga sola: appena va a capo — e con ventiquattro materiali
   succede — i due blocchi si toccano. */
.intestazione-sezione > .sommario { margin-top: var(--sp-4); }
.intestazione-sezione--centro { text-align: center; }
.intestazione-sezione--centro .sommario { margin-inline: auto; }

@media (min-width: 900px) {
  /* Intestazione su due colonne: titolo a sinistra, sommario+azione a destra */
  .intestazione-sezione--divisa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: var(--sp-12);
    align-items: end;
    margin-bottom: var(--sp-12);
  }
  .intestazione-sezione--divisa .sommario { margin-bottom: var(--sp-1); }
}

/* Griglia riutilizzabile */
.griglia { display: grid; gap: var(--sp-6); }
@media (min-width: 620px)  { .griglia--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 620px)  { .griglia--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .griglia--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px)  { .griglia--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .griglia--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   4. UTILITY
   ========================================================================== */

/* Testo per soli screen reader */
.solo-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Salta al contenuto — primo elemento focalizzabile della pagina */
.salta-contenuto {
  position: absolute;
  top: var(--sp-2); left: var(--sp-2);
  z-index: var(--z-skiplink);
  padding: var(--sp-3) var(--sp-5);
  background: var(--caffe-900);
  color: var(--testo-su-scuro);
  font-size: var(--testo-sm);
  font-weight: var(--peso-medio);
  border-radius: var(--raggio-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-veloce) var(--ease-entrata);
}
.salta-contenuto:focus { transform: translateY(0); }

.filetto {
  height: 1px;
  background: var(--bordo-tenue);
  border: 0;
}
.su-scuro .filetto, .footer .filetto,
.hero .filetto, .testata .filetto { background: var(--bordo-su-scuro); }

.nascosto { display: none !important; }

/* ==========================================================================
   5. COMPONENTI
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 Bottoni
   Altezza minima 44px su ogni variante: l'area di tocco non è negoziabile.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--raggio-sm);
  cursor: pointer;
  transition: background-color var(--dur-veloce) var(--ease-standard),
              border-color   var(--dur-veloce) var(--ease-standard),
              color          var(--dur-veloce) var(--ease-standard),
              box-shadow     var(--dur-veloce) var(--ease-standard);
  /* transform escluso di proposito: nessuno spostamento del layout al press */
}
.btn:active { transform: scale(0.985); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0;
           transition: transform var(--dur-veloce) var(--ease-standard); }
.btn:hover svg { transform: translateX(3px); }

.btn--primario {
  background: var(--azione-primaria-bg);
  color: var(--azione-primaria-testo);
}
.btn--primario:hover { background: var(--azione-primaria-bg-hover); }

/* L'accento è il bottone pieno: scuro su fondo chiaro, crema su fondo
   scuro. Così resta il più visibile della pagina su qualsiasi sezione. */
.btn--accento {
  background: var(--azione-primaria-bg);
  color: var(--azione-primaria-testo);
}
.btn--accento:hover { background: var(--azione-primaria-bg-hover); }
.su-scuro .btn--accento, .hero .btn--accento, .testata .btn--accento,
.banda-cta .btn--accento, .sezione--scura .btn--accento, .footer .btn--accento {
  background: var(--azione-accento-bg);
  color: var(--azione-accento-testo);
}
.su-scuro .btn--accento:hover, .hero .btn--accento:hover, .testata .btn--accento:hover,
.banda-cta .btn--accento:hover, .sezione--scura .btn--accento:hover,
.footer .btn--accento:hover { background: var(--azione-accento-bg-hover); }

.btn--secondario {
  background: transparent;
  border-color: var(--azione-secondaria-bordo);
  color: var(--azione-secondaria-testo);
}
.btn--secondario:hover {
  background: var(--azione-secondaria-bg-hover);
  border-color: var(--azione-secondaria-bg-hover);
  color: var(--azione-primaria-testo);
}
.su-scuro .btn--secondario, .footer .btn--secondario,
.hero .btn--secondario, .testata .btn--secondario {
  border-color: rgba(247, 244, 238, 0.5);
  color: var(--testo-su-scuro);
}
.su-scuro .btn--secondario:hover, .footer .btn--secondario:hover,
.hero .btn--secondario:hover,
.testata .btn--secondario:hover { background: var(--testo-su-scuro); border-color: var(--testo-su-scuro); color: var(--caffe-950); }

.btn--fantasma {
  background: transparent;
  color: var(--testo-primario);
  padding-inline: var(--sp-3);
}
.btn--fantasma:hover { background: var(--superficie-incassata); }

.btn--lg { min-height: 56px; padding: var(--sp-4) var(--sp-8); font-size: var(--testo-xs); }
.btn--pieno { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Stato di caricamento */
.btn[data-caricamento="true"] { pointer-events: none; opacity: 0.75; }
.btn[data-caricamento="true"] .btn__etichetta { visibility: hidden; }
.btn[data-caricamento="true"]::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: gira 620ms linear infinite;
}
.btn { position: relative; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Link testuale con freccia — «View collection →» delle ispirazioni:
   sottolineato a tutta larghezza, con la freccia che scivola al passaggio. */
.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--tocco-min);
  padding-top: var(--sp-2);
  font-size: var(--testo-sm);
  font-weight: var(--peso-normale);
  letter-spacing: 0.01em;
  color: var(--testo-primario);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size var(--dur-media) var(--ease-entrata), color var(--dur-veloce);
}
.link-freccia svg {
  width: 16px; height: 16px;
  transition: transform var(--dur-media) var(--ease-entrata);
}
.link-freccia:hover svg { transform: translateX(5px); }
.link-freccia:hover { color: var(--testo-brand); }
.su-scuro .link-freccia,
.hero .link-freccia,
.testata .link-freccia { color: var(--testo-su-scuro); }
.su-scuro .link-freccia:hover,
.hero .link-freccia:hover,
.testata .link-freccia:hover { color: var(--bronzo-400); }

/* --------------------------------------------------------------------------
   5.2 Header e navigazione
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(247, 244, 238, 0.9);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--bordo-tenue);
  transition: background-color var(--dur-media) var(--ease-standard),
              border-color var(--dur-media) var(--ease-standard);
}
/* Sopra l'hero a tutto schermo l'header è trasparente e chiaro */
.header[data-trasparente="true"] {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Sopra l'hero l'header non ha fondo, e il suo contrasto dipenderebbe da
   quanto è chiara la fotografia proprio in quella fascia. Questo velo lo
   rende indipendente dall'immagine: qualunque foto venga caricata, il menu
   resta leggibile. */
.header[data-trasparente="true"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--header-h) * 2.2);
  background: linear-gradient(to bottom,
    rgba(18, 16, 14, 0.72) 0%,
    rgba(18, 16, 14, 0.42) 46%,
    rgba(18, 16, 14, 0) 100%);
  pointer-events: none;
  z-index: -1;
}
.header { position: sticky; isolation: isolate; }
.header[data-trasparente="true"] .header__interno,
.header[data-trasparente="true"] .nav__link,
.header[data-trasparente="true"] .header__telefono { color: var(--testo-su-scuro); }
.header[data-trasparente="true"] .apri-menu { color: var(--testo-su-scuro); }

.header__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  height: var(--header-h);
  /* Nessuna transizione su `height`: animare una proprietà di layout obbliga
     il browser a ricalcolare il flusso a ogni frame. Se in futuro si volesse
     un header che si compatta allo scroll, va fatto con `transform` su un
     elemento interno, non animando l'altezza del contenitore. */
}

.marchio {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  /* Incomprimibile. Con sei voci di menu il flex lo schiacciava fino a 33px,
     rendendo il marchio illeggibile: è l'ultimo elemento che deve cedere
     spazio, non il primo. Chi cede è la spaziatura del menu (sotto). */
  flex-shrink: 0;
}
.marchio__img { height: 44px; width: auto; }
.header[data-trasparente="true"] .marchio__img--scuro { display: none; }
.marchio__img--chiaro { display: none; }
.header[data-trasparente="true"] .marchio__img--chiaro { display: block; }

/* Navigazione desktop */
.nav { display: none; }
.nav__lista { display: flex; align-items: center; gap: var(--sp-1); }
.nav__link {
  display: inline-flex;
  align-items: center;
  height: var(--tocco-min);
  padding-inline: var(--sp-4);
  font-size: var(--testo-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--testo-primario);
  border-radius: var(--raggio-sm);
  position: relative;
  transition: color var(--dur-veloce) var(--ease-standard);
}
.nav__link:hover { color: var(--testo-brand); }
/* Pagina corrente: filetto sottile sotto la voce, non solo colore
   (§color-not-only). Lo stesso filetto compare al passaggio del mouse. */
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--sp-4); right: var(--sp-4); bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-media) var(--ease-entrata);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link:hover { color: var(--testo-primario); }

.header__azioni {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;     /* il marchio si comprime, le azioni no */
}
.header__telefono { display: none; }

/* ------------------------------------------------- selettore di lingua ---
   Due codici affiancati, non una tendina: un click invece di due, e il
   visitatore vede subito che la lingua alternativa esiste. Nascosto sotto i
   900px, dove lo spazio va alla CTA: nel drawer c'è la versione estesa. */
.lingue {
  display: none;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 900px) { .lingue { display: inline-flex; } }

.lingue__voce {
  /* 44px di altezza non servono: è un bersaglio da puntatore, e sotto i
     900px questo selettore non esiste. Nel drawer, dove si usa col dito,
     la regola di .lingue--drawer riporta l'area al minimo tattile. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font-testo);
  font-size: var(--testo-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--testo-terziario);
  background: none;
}
.lingue__voce + .lingue__voce { border-left: 1px solid var(--bordo-default); }
.lingue__voce { min-height: 22px; letter-spacing: .14em; font-weight: 500; }
.lingue__voce[aria-current="true"] {
  color: var(--testo-primario);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.lingue__voce:hover { color: var(--testo-brand); }

/* Sopra la hero scura il bordo del gruppo sparirebbe del tutto. */
.header[data-trasparente="true"] .lingue { border-color: var(--bordo-su-scuro); }
.header[data-trasparente="true"] .lingue__voce { color: var(--testo-su-scuro-sec); }
.header[data-trasparente="true"] .lingue__voce[aria-current="true"] {
  color: var(--testo-su-scuro);
}
.header[data-trasparente="true"] .lingue__voce + .lingue__voce {
  border-left-color: var(--bordo-su-scuro);
}

/* Dentro .drawer__azioni, che è una griglia, l'inline-flex verrebbe comunque
   stirato a tutta larghezza: justify-self lo riporta alla sua dimensione. */
.lingue--drawer { display: inline-flex; justify-self: start; }
.lingue--drawer .lingue__voce { min-height: 44px; min-width: 56px; font-size: var(--testo-sm); }

/* Le azioni dell'header non vanno mai a capo: una CTA su due righe alza
   l'header e schiaccia l'hamburger sotto la soglia dei 44px. */
.header__azioni .btn { white-space: nowrap; }

/* Su schermo stretto la CTA si accorcia invece di sparire: resta la
   conversione principale del sito, ma smette di rubare spazio al menu. */
.header__cta-corto { display: none; }
@media (max-width: 700px) {
  .header__cta-lungo { display: none; }
  .header__cta-corto { display: inline; }
  .header__azioni .btn { padding-inline: var(--sp-4); }
}
@media (max-width: 400px) {
  .marchio__img { height: 34px; }
  .header__azioni .btn { padding-inline: var(--sp-3); font-size: var(--testo-xs); }
}

@media (min-width: 1080px) {
  .nav { display: block; }
  .apri-menu { display: none; }
  /* Fra 1080 e 1280 lo spazio è appena sufficiente per sei voci: si stringe
     la spaziatura del menu invece di nascondere una voce o comprimere il
     marchio. */
  .nav__link { padding-inline: var(--sp-3); }
}
/* Con la settima voce (Pietre rustiche) fra 1080 e 1280 lo spazio non basta
   più nemmeno stringendo: le voci non vanno a capo, la spaziatura scende a
   8px e la CTA dell'header passa alla forma corta, come su telefono. */
@media (min-width: 1080px) and (max-width: 1279px) {
  .nav__link { padding-inline: var(--sp-2); white-space: nowrap; }
  .header__cta-lungo { display: none; }
  .header__cta-corto { display: inline; }
}
@media (min-width: 1280px) {
  .nav__link { padding-inline: var(--sp-4); white-space: nowrap; }
}
@media (min-width: 1400px) {
  .header__telefono {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tocco-min);
    padding-inline: var(--sp-3);
    font-size: var(--testo-xs);
    font-weight: var(--peso-medio);
    letter-spacing: .08em;
    text-decoration: none;
    white-space: nowrap;
  }
  .header__telefono svg { width: 15px; height: 15px; }
}

/* Bottone hamburger */
.apri-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;                    /* mai compresso sotto l'area di tocco */
  width: var(--tocco-min);
  min-width: var(--tocco-min);
  height: var(--tocco-min);
  background: transparent;
  border: 0;
  border-radius: var(--raggio-sm);
  cursor: pointer;
  color: var(--testo-primario);
}
.apri-menu svg { width: 24px; height: 24px; }

/* --------------------------------------------------------------------------
   5.3 Menu mobile (drawer)
   -------------------------------------------------------------------------- */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(11, 10, 9, 0.55);   /* 55%: isola davvero il contenuto sotto */
  backdrop-filter: blur(2px);
  z-index: var(--z-drawer-velo);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-media) var(--ease-standard);
}
.velo[data-aperto="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(420px, 88vw);
  z-index: var(--z-drawer);
  background: var(--superficie-base);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-lenta) var(--ease-entrata);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer[data-aperto="true"] { transform: translateX(0); }

.drawer__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter);
  min-height: var(--header-h);
  border-bottom: 1px solid var(--bordo-tenue);
  position: sticky; top: 0;
  background: var(--superficie-base);
}
.drawer__corpo { padding: var(--sp-6) var(--gutter) var(--sp-10); }

.chiudi-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tocco-min); height: var(--tocco-min);
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--raggio-sm);
}
.chiudi-menu svg { width: 24px; height: 24px; }

.nav-mobile__lista { display: flex; flex-direction: column; }
.nav-mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding-block: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--testo-2xl);
  font-weight: var(--peso-medio);
  text-decoration: none;
  border-bottom: 1px solid var(--bordo-tenue);
}
.nav-mobile__link[aria-current="page"] { font-style: italic; }
.nav-mobile__link[aria-current="page"]::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--bronzo-500); flex-shrink: 0;
}
.drawer__azioni { display: grid; gap: var(--sp-3); margin-top: var(--sp-8); }
.drawer__contatti {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--bordo-tenue);
  font-size: var(--testo-sm);
  color: var(--testo-secondario);
  display: grid;
  gap: var(--sp-3);
}
.drawer__contatti a {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: var(--tocco-min); text-decoration: none;
}
.drawer__contatti svg { width: 18px; height: 18px; color: var(--bronzo-600); flex-shrink: 0; }

body[data-scroll-bloccato="true"] { overflow: hidden; }

/* --------------------------------------------------------------------------
   5.4 Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  color: var(--testo-su-scuro);
  margin-top: calc(var(--header-h) * -1);   /* passa sotto l'header trasparente */
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: var(--z-sotto); }
.hero__media img, .hero__media svg {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Doppio velo: gradiente dal basso + wash blu, per garantire il contrasto
   del testo qualunque sia la fotografia caricata */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* Velo verticale: denso in basso, dove sta il testo; leggero a metà
       altezza, dove la pietra deve restare visibile; di nuovo un po' più
       carico in alto, per il contrasto dell'header trasparente. */
    linear-gradient(to top,
      rgba(18, 16, 14,0.94) 0%,
      rgba(18, 16, 14,0.58) 34%,
      rgba(18, 16, 14,0.10) 66%,
      rgba(18, 16, 14,0.30) 100%),
    /* Velo orizzontale: solo a sinistra, sotto la colonna di testo. A destra
       si azzera, così il materiale conserva i suoi toni caldi invece di
       diventare una campitura blu uniforme. */
    linear-gradient(to right,
      rgba(28, 25, 22,0.62) 0%,
      rgba(28, 25, 22,0.22) 46%,
      rgba(28, 25, 22,0) 78%);
}
.hero__contenuto {
  position: relative;
  /* L'hero sta sotto l'header con un margine negativo: il padding superiore
     deve superare l'altezza dell'header, altrimenti su viewport basso
     l'occhiello scivola sotto il menu. */
  padding-block: calc(var(--header-h) + var(--sp-8)) var(--sp-12);
  width: 100%;
}
.hero__titolo {
  font-size: var(--testo-5xl);
  color: var(--testo-su-scuro);
  max-width: 16ch;
  margin-bottom: var(--sp-5);
}
.hero__sommario {
  font-size: var(--testo-lg);
  color: var(--testo-su-scuro-sec);
  max-width: 52ch;
  margin-bottom: var(--sp-8);
}
.hero__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hero__azioni .btn { flex: 1 1 auto; min-width: 180px; }

@media (min-width: 700px) {
  .hero__azioni .btn { flex: 0 0 auto; }
}

/* Barra dei dati sotto l'hero */
.hero__dati {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6) var(--sp-4);
  margin-top: var(--sp-12);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--bordo-su-scuro);
}
@media (min-width: 900px) {
  .hero__dati { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); }
}
.dato__valore {
  font-family: var(--font-display);
  font-size: var(--testo-3xl);
  line-height: 1;
  color: var(--testo-su-scuro);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--sp-2);
}
.dato__etichetta {
  font-size: var(--testo-xs);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--testo-su-scuro-sec);
}

/* Indicatore di scorrimento */
.hero__scorri {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-8);
  display: none;
  writing-mode: vertical-rl;
  font-size: var(--testo-2xs);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--testo-su-scuro-sec);
  text-decoration: none;
  align-items: center;
  gap: var(--sp-3);
}
@media (min-width: 1080px) and (min-height: 700px) { .hero__scorri { display: flex; } }
.hero__scorri::after {
  content: ""; width: 1px; height: 56px;
  background: linear-gradient(to bottom, var(--bronzo-500), transparent);
}

/* --------------------------------------------------------------------------
   5.5 Card materiale
   -------------------------------------------------------------------------- */

/* Card editoriale, come le collezioni delle ispirazioni: nessuna cornice né
   ombra, l'immagine fa da superficie e il testo le sta sotto, allineato al
   suo bordo. Il passaggio del mouse ingrandisce appena la pietra. */
.card-materiale {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
}
/* Anello solo da tastiera: con :focus-within compariva anche al clic del mouse (2 nov 2026) */
.card-materiale:has(:focus-visible) { outline: var(--focus-anello); outline-offset: var(--focus-offset); }

.card-materiale__media {
  position: relative;
  aspect-ratio: 4 / 3;             /* spazio riservato: nessun salto di layout */
  overflow: hidden;
  background: var(--superficie-incassata);
}
.card-materiale__media::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(28, 25, 22, 0);
  transition: background-color var(--dur-lenta) var(--ease-morbida);
}
.card-materiale:hover .card-materiale__media::after { background: rgba(28, 25, 22, 0.06); }
.card-materiale__media img, .card-materiale__media svg {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--moto-lenta) var(--ease-entrata);
}
.card-materiale:hover .card-materiale__media img,
.card-materiale:hover .card-materiale__media svg { transform: scale(var(--moto-zoom)); }

.card-materiale__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) 0 var(--sp-2);
  flex: 1;
}
.card-materiale__categoria {
  font-size: var(--testo-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--testo-terziario);
}
.card-materiale__titolo {
  font-family: var(--font-display);
  font-size: var(--testo-2xl);
  font-weight: var(--peso-medio);
  line-height: 1.1;
}
/* L'intera card è cliccabile, ma il link resta uno solo per gli screen reader */
.card-materiale__titolo a { text-decoration: none; }
.card-materiale__titolo a::after { content: ""; position: absolute; inset: 0; }
.card-materiale__testo {
  font-size: var(--testo-sm);
  color: var(--testo-secondario);
  line-height: var(--interlinea-media);
}
.card-materiale__pie {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: auto; padding-top: var(--sp-4);
}

/* Pastiglia colore/attributo */
.pastiglia {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
  color: var(--testo-secondario);
  background: transparent;
  border: 1px solid var(--bordo-default);
  border-radius: var(--raggio-pill);
}
.pastiglia__punto {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18);
  flex-shrink: 0;
}
.pastiglia--evidenza {
  color: var(--bronzo-700);
  background: var(--bronzo-100);
  border-color: var(--bronzo-200);
}

/* --------------------------------------------------------------------------
   5.6 Filtri catalogo
   -------------------------------------------------------------------------- */

.filtri {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  background: var(--superficie-base);
  border-bottom: 1px solid var(--bordo-tenue);
  padding-block: var(--sp-4);
  margin-bottom: var(--sp-8);
}
.filtri__barra {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.filtri__ricerca { position: relative; flex: 1 1 260px; min-width: 0; }
.filtri__ricerca svg {
  position: absolute; left: var(--sp-4); top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  color: var(--testo-terziario);
  pointer-events: none;
}
.filtri__ricerca input {
  width: 100%;
  min-height: var(--tocco-min);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-12);
  font-size: var(--testo-base);   /* 16px: evita lo zoom automatico su iOS */
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  border-radius: var(--raggio-sm);
}

/* Gruppo di filtri a pastiglia, scorrevole in orizzontale su mobile */
.filtri__gruppi { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); }
.filtro-gruppo__titolo {
  font-size: var(--testo-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--testo-terziario);
  margin-bottom: var(--sp-2);
}
.filtro-gruppo__opzioni {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-2);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 900px) { .filtro-gruppo__opzioni { flex-wrap: wrap; overflow: visible; } }

.filtro {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding: var(--sp-2) var(--sp-4);
  white-space: nowrap;
  font-size: var(--testo-sm);
  font-weight: var(--peso-medio);
  color: var(--testo-secondario);
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  border-radius: var(--raggio-pill);
  cursor: pointer;
  transition: all var(--dur-veloce) var(--ease-standard);
}
.filtro:hover { border-color: var(--bordo-forte); color: var(--testo-primario); }
/* Selezionato: fondo pieno + segno di spunta, non solo il colore */
.filtro[aria-pressed="true"] {
  background: var(--caffe-900);
  border-color: var(--caffe-900);
  color: var(--testo-su-scuro);
}
.filtro[aria-pressed="true"]::before {
  content: "";
  width: 14px; height: 14px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-3.5-3.5a1 1 0 1 1 1.4-1.4l2.8 2.79 6.8-6.79a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0l-3.5-3.5a1 1 0 1 1 1.4-1.4l2.8 2.79 6.8-6.79a1 1 0 0 1 1.4 0Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.filtro__punto {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2); flex-shrink: 0;
}

.filtri__stato {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-4);
  font-size: var(--testo-sm);
  color: var(--testo-secondario);
}
.azzera-filtri {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tocco-min);
  background: none; border: 0; cursor: pointer;
  font-size: var(--testo-sm); font-weight: var(--peso-medio);
  color: var(--testo-brand);
  text-decoration: underline; text-underline-offset: 3px;
}

/* Stato vuoto */
.stato-vuoto {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-16) var(--sp-6);
  border: 1px dashed var(--bordo-default);
  border-radius: var(--raggio-md);
}
.stato-vuoto svg { width: 44px; height: 44px; margin: 0 auto var(--sp-4); color: var(--testo-terziario); }
.stato-vuoto h3 { font-size: var(--testo-xl); margin-bottom: var(--sp-2); }
.stato-vuoto p { margin: 0 auto var(--sp-6); color: var(--testo-secondario); max-width: 46ch; }

/* --------------------------------------------------------------------------
   5.7 Form
   -------------------------------------------------------------------------- */

.campo { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.campo__etichetta {
  font-size: var(--testo-sm);
  font-weight: var(--peso-medio);
  color: var(--testo-primario);
}
.campo__obbligatorio { color: var(--testo-errore); margin-left: 2px; }

.campo__aiuto {
  font-size: var(--testo-sm);
  color: var(--testo-terziario);
  line-height: var(--interlinea-media);
}

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  min-height: var(--tocco-min);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--testo-base);      /* 16px obbligatorio su mobile */
  color: var(--testo-primario);
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  border-radius: var(--raggio-sm);
  transition: border-color var(--dur-veloce) var(--ease-standard),
              box-shadow var(--dur-veloce) var(--ease-standard);
}
.campo textarea { min-height: 140px; resize: vertical; line-height: var(--interlinea-media); }
.campo select {
  appearance: none;
  padding-right: var(--sp-10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23756E5F'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5'  stroke='%23756E5F' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 20px;
}
.campo input:hover, .campo textarea:hover, .campo select:hover { border-color: var(--bordo-forte); }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none;
  border-color: var(--bordo-focus);
  box-shadow: 0 0 0 3px var(--caffe-100);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--testo-disabilitato); }

/* Errore: bordo + icona + messaggio. Mai il solo colore. */
.campo[data-errore="true"] input,
.campo[data-errore="true"] textarea,
.campo[data-errore="true"] select { border-color: var(--testo-errore); }
.campo[data-errore="true"] input:focus { box-shadow: 0 0 0 3px var(--rosso-050); }

.campo__errore {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--testo-sm);
  font-weight: var(--peso-medio);
  color: var(--testo-errore);
}
.campo__errore svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.campo__errore:empty { display: none; }

/* Riepilogo errori in cima al form */
.riepilogo-errori {
  padding: var(--sp-5);
  margin-bottom: var(--sp-8);
  background: var(--rosso-050);
  border: 1px solid var(--rosso-600);
  border-radius: var(--raggio-md);
}
.riepilogo-errori h3 {
  font-family: var(--font-testo);
  font-size: var(--testo-base);
  font-weight: var(--peso-semi);
  color: var(--testo-errore);
  margin-bottom: var(--sp-3);
}
.riepilogo-errori ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.riepilogo-errori a { color: var(--testo-errore); font-size: var(--testo-sm); }

/* Checkbox e radio */
.scelta {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-height: var(--tocco-min);
  padding-block: var(--sp-2);
  cursor: pointer;
}
.scelta input[type="checkbox"],
.scelta input[type="radio"] {
  width: 22px; height: 22px;
  min-height: 0;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--caffe-900);
  cursor: pointer;
}
.scelta__testo { font-size: var(--testo-sm); line-height: var(--interlinea-media); }

/* Griglia a schede selezionabili (tipologia progetto, materiale, ecc.) */
.schede-scelta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.scheda-scelta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  min-height: 88px;
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  border-radius: var(--raggio-md);
  cursor: pointer;
  transition: all var(--dur-veloce) var(--ease-standard);
}
.scheda-scelta:hover { border-color: var(--bordo-forte); }
.scheda-scelta input { position: absolute; opacity: 0; pointer-events: none; }
.scheda-scelta:has(input:checked) {
  border-color: var(--caffe-900);
  background: var(--caffe-050);
  box-shadow: inset 0 0 0 1px var(--caffe-900);
}
.scheda-scelta:has(input:focus-visible) { outline: var(--focus-anello); outline-offset: 2px; }
.scheda-scelta svg { width: 24px; height: 24px; color: var(--bronzo-600); }
.scheda-scelta__nome { font-size: var(--testo-sm); font-weight: var(--peso-medio); }

/* Indicatore di avanzamento multi-step */
.passi { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.passo { flex: 1; display: grid; gap: var(--sp-2); }
.passo__barra { height: 3px; background: var(--bordo-default); border-radius: var(--raggio-pill); }
.passo[data-stato="completo"] .passo__barra,
.passo[data-stato="attivo"]   .passo__barra { background: var(--caffe-900); }
.passo__nome {
  font-size: var(--testo-xs);
  color: var(--testo-terziario);
  letter-spacing: 0.02em;
}
.passo[data-stato="attivo"] .passo__nome { color: var(--testo-primario); font-weight: var(--peso-semi); }

/* --------------------------------------------------------------------------
   5.8 Banda CTA
   -------------------------------------------------------------------------- */

.banda-cta {
  background: var(--superficie-scura);
  color: var(--testo-su-scuro);
  text-align: center;
}
.banda-cta h2 { color: var(--testo-su-scuro); max-width: 22ch; margin-inline: auto; }
.banda-cta .sommario { margin-inline: auto; margin-block: var(--sp-5) var(--sp-8); }
.banda-cta__azioni {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  justify-content: center;
}

/* --------------------------------------------------------------------------
   5.9 Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--superficie-scura-alt);
  color: var(--testo-su-scuro-sec);
  padding-top: var(--sezione-y);
  font-size: var(--testo-sm);
}
.footer__griglia {
  display: grid;
  gap: var(--sp-10);
  padding-bottom: var(--sp-12);
}
@media (min-width: 700px)  { .footer__griglia { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1080px) { .footer__griglia { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--sp-12); } }

.footer__marchio-img { height: 52px; width: auto; margin-bottom: var(--sp-5); }
.footer__claim { color: var(--testo-su-scuro-sec); max-width: 34ch; line-height: var(--interlinea-media); }

.footer__titolo {
  font-family: var(--font-testo);
  font-size: var(--testo-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-occhiello);
  text-transform: uppercase;
  color: var(--testo-su-scuro);
  margin-bottom: var(--sp-4);
}
.footer__lista { display: grid; gap: var(--sp-1); }
.footer__lista a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  text-decoration: none;
  color: var(--testo-su-scuro-sec);
  transition: color var(--dur-veloce) var(--ease-standard);
}
.footer__lista a:hover { color: var(--testo-su-scuro); }

.footer__contatto {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  text-decoration: none;
  color: var(--testo-su-scuro-sec);
  line-height: var(--interlinea-media);
}
.footer__contatto svg { width: 18px; height: 18px; color: var(--bronzo-500); flex-shrink: 0; margin-top: 2px; }
a.footer__contatto { min-height: var(--tocco-min); }
a.footer__contatto:hover { color: var(--testo-su-scuro); }

.footer__coda {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--bordo-su-scuro);
  font-size: var(--testo-xs);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
}
@media (min-width: 800px) {
  .footer__coda { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer__legale { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer__legale a {
  display: inline-flex; align-items: center; min-height: 36px;
  text-decoration: none;
}
.footer__legale a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   5.10 Breadcrumb
   -------------------------------------------------------------------------- */

.briciole {
  padding-block: var(--sp-5);
  font-size: var(--testo-sm);
  color: var(--testo-terziario);
}
.briciole ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); list-style: none; padding: 0; }
.briciole li { display: flex; align-items: center; gap: var(--sp-2); }
.briciole li:not(:last-child)::after {
  content: "";
  width: 5px; height: 5px;
  border-right: 1px solid var(--bordo-forte);
  border-top: 1px solid var(--bordo-forte);
  transform: rotate(45deg);
}
.briciole a { text-decoration: none; }
.briciole a:hover { color: var(--testo-primario); text-decoration: underline; text-underline-offset: 3px; }
.briciole [aria-current="page"] { color: var(--testo-secondario); }

/* --------------------------------------------------------------------------
   5.11 Intestazione di pagina interna
   -------------------------------------------------------------------------- */

.testata {
  position: relative;
  background: var(--superficie-scura);
  color: var(--testo-su-scuro);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--sp-16));
  padding-bottom: var(--sp-16);
  overflow: hidden;
  isolation: isolate;
}
/* Restyling 29 ottobre 2026: la foto si vede piena, come nella seconda
   ispirazione; il contrasto lo dà un velo caffè solo sul lato del testo. */
.testata__media { position: absolute; inset: 0; z-index: var(--z-sotto); }
/* Il <picture> è inline e senza altezza propria: senza questa riga
   l'`height:100%` dell'immagine non ha un riferimento su cui risolversi,
   cade su `auto`, e sotto la foto resta una fascia di fondo scoperta. */
.testata__media picture { display: block; width: 100%; height: 100%; }
.testata__media img, .testata__media svg { width: 100%; height: 100%; object-fit: cover; }
.testata__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(28, 25, 22, 0.86) 0%, rgba(28, 25, 22, 0.62) 38%, rgba(28, 25, 22, 0.18) 72%, rgba(28, 25, 22, 0.10) 100%),
    linear-gradient(0deg, rgba(28, 25, 22, 0.35) 0%, rgba(28, 25, 22, 0) 40%);
}
.testata h1 { color: var(--testo-su-scuro); max-width: 20ch; }
.testata .sommario { margin-top: var(--sp-5); max-width: 46ch; color: rgba(255, 255, 255, .9); }
/* Le testate con foto hanno un'altezza minima: la foto è il contenuto. */
.testata:has(.testata__media img) { min-height: min(62vh, 560px); display: flex; flex-direction: column; justify-content: flex-end; }
.testata .briciole { color: var(--testo-su-scuro-sec); padding-top: 0; }
.testata .briciole [aria-current="page"] { color: var(--testo-su-scuro); }
.testata .briciole li:not(:last-child)::after { border-color: var(--testo-su-scuro-sec); }

/* --------------------------------------------------------------------------
   5.12 Banner cookie — vedi docs/04-gdpr-2026-compliance.md
   -------------------------------------------------------------------------- */

.cookie {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--z-cookie);
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform var(--dur-lenta) var(--ease-entrata);
}
.cookie[data-visibile="true"] { transform: translateY(0); }
.cookie[hidden] { display: none !important; }

.cookie__pannello {
  max-width: 940px;
  margin-inline: auto;
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-xl);
  padding: var(--sp-6);
  max-height: min(84vh, 760px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 700px) { .cookie__pannello { padding: var(--sp-8); } }

.cookie__testa { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cookie__testa svg { width: 22px; height: 22px; color: var(--bronzo-600); flex-shrink: 0; }
.cookie__titolo { font-family: var(--font-display); font-size: var(--testo-xl); }
.cookie__testo {
  font-size: var(--testo-sm);
  color: var(--testo-secondario);
  line-height: var(--interlinea-media);
  max-width: 76ch;
}
.cookie__testo a { color: var(--testo-brand); text-decoration: underline; text-underline-offset: 2px; }

/* Le tre azioni hanno lo stesso peso visivo: rifiutare deve costare
   esattamente quanto accettare (EDPB, dark pattern) */
.cookie__azioni {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
@media (min-width: 700px) {
  .cookie__azioni { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cookie__azioni .btn { width: 100%; }

/* Pannello preferenze granulari */
.cookie__preferenze { margin-top: var(--sp-6); border-top: 1px solid var(--bordo-tenue); padding-top: var(--sp-6); }
.cookie__preferenze[hidden] { display: none; }

.categoria-cookie {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--bordo-tenue);
}
.categoria-cookie:last-of-type { border-bottom: 0; }
.categoria-cookie__testa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
}
.categoria-cookie__nome { font-size: var(--testo-base); font-weight: var(--peso-semi); }
.categoria-cookie__testo {
  font-size: var(--testo-sm);
  color: var(--testo-secondario);
  line-height: var(--interlinea-media);
  margin-top: var(--sp-2);
  max-width: 72ch;
}
.categoria-cookie__dettagli {
  margin-top: var(--sp-3);
  font-size: var(--testo-xs);
  color: var(--testo-terziario);
}
.categoria-cookie__dettagli summary {
  cursor: pointer;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  color: var(--testo-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.categoria-cookie__dettagli table { width: 100%; margin-top: var(--sp-3); border-collapse: collapse; }
.categoria-cookie__dettagli th, .categoria-cookie__dettagli td {
  text-align: left; padding: var(--sp-2); border-bottom: 1px solid var(--bordo-tenue);
  vertical-align: top;
}
.categoria-cookie__dettagli th { font-weight: var(--peso-semi); color: var(--testo-secondario); }

/* Interruttore */
.interruttore {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex-shrink: 0;
  min-height: var(--tocco-min);
  cursor: pointer;
}
.interruttore input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.interruttore__pista {
  width: 48px; height: 28px;
  background: var(--pietra-300);
  border-radius: var(--raggio-pill);
  padding: 3px;
  transition: background-color var(--dur-veloce) var(--ease-standard);
  flex-shrink: 0;
}
.interruttore__pallino {
  width: 22px; height: 22px;
  background: var(--pietra-000);
  border-radius: 50%;
  box-shadow: var(--ombra-sm);
  transition: transform var(--dur-veloce) var(--ease-standard);
}
.interruttore input:checked ~ .interruttore__pista { background: var(--verde-600); }
.interruttore input:checked ~ .interruttore__pista .interruttore__pallino { transform: translateX(20px); }
.interruttore input:focus-visible ~ .interruttore__pista {
  outline: var(--focus-anello); outline-offset: var(--focus-offset);
}
.interruttore input:disabled ~ .interruttore__pista { background: var(--verde-600); opacity: 0.5; cursor: not-allowed; }
/* Stato leggibile anche senza vedere il colore */
.interruttore__stato {
  font-size: var(--testo-xs);
  font-weight: var(--peso-medio);
  color: var(--testo-secondario);
  min-width: 74px;
}

/* Pulsante persistente per riaprire le preferenze (obbligatorio: il consenso
   dev'essere revocabile con la stessa facilità con cui è stato prestato) */
.riapri-cookie {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: var(--tocco-min); height: var(--tocco-min);
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  border-radius: 50%;
  box-shadow: var(--ombra-md);
  cursor: pointer;
  color: var(--testo-secondario);
  transition: color var(--dur-veloce) var(--ease-standard),
              border-color var(--dur-veloce) var(--ease-standard);
}
.riapri-cookie:hover { color: var(--testo-primario); border-color: var(--bordo-forte); }
.riapri-cookie svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   5.13 Toast
   -------------------------------------------------------------------------- */

.toast-area {
  position: fixed;
  bottom: var(--sp-6); right: var(--sp-6);
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: grid; gap: var(--sp-3);
  width: min(400px, calc(100vw - var(--sp-8)));
  pointer-events: none;
}
/* L'esito è portato dall'icona e dal testo, non da una fascia colorata sul
   fianco: il filetto spesso su un lato è estraneo al resto del sistema, che
   usa ovunque bordi da 1px, e sarebbe comunque ridondante rispetto
   all'icona. Il requisito di non affidare l'informazione al solo colore
   resta soddisfatto — icona più messaggio scritto. */
.toast {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  border-radius: var(--raggio-md);
  box-shadow: var(--ombra-lg);
  font-size: var(--testo-sm);
  pointer-events: auto;
  animation: entra-toast var(--dur-media) var(--ease-entrata);
}
.toast svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--verde-600); }
.toast[data-tipo="errore"] svg { color: var(--rosso-600); }
@keyframes entra-toast {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   5.14 Rivelazione allo scroll — l'unica animazione "decorativa" ammessa,
        e solo perché comunica la struttura della pagina.
   -------------------------------------------------------------------------- */

.rivela {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-scenica) var(--ease-entrata),
              transform var(--dur-scenica) var(--ease-entrata);
  transition-delay: var(--ritardo, 0ms);
  will-change: opacity, transform;
}
.rivela[data-visibile="true"] { opacity: 1; transform: none; will-change: auto; }
/* Se JS non parte, il contenuto resta visibile: nessuna pagina bianca */
.no-js .rivela { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rivela { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5.15 Accordion (FAQ)
   -------------------------------------------------------------------------- */

.accordion { border-top: 1px solid var(--bordo-tenue); }
.accordion__voce { border-bottom: 1px solid var(--bordo-tenue); }
.accordion__testa {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  width: 100%;
  min-height: 64px;
  padding: var(--sp-5) 0;
  background: none; border: 0;
  font-family: var(--font-display);
  font-size: var(--testo-lg);
  text-align: left;
  cursor: pointer;
  color: var(--testo-primario);
}
.accordion__icona {
  position: relative;
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--bronzo-600);
}
.accordion__icona::before, .accordion__icona::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor;
  transition: transform var(--dur-media) var(--ease-standard);
}
.accordion__icona::after { transform: rotate(90deg); }
.accordion__testa[aria-expanded="true"] .accordion__icona::after { transform: rotate(0deg); }
.accordion__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-media) var(--ease-standard);
}
.accordion__testa[aria-expanded="true"] + .accordion__corpo { grid-template-rows: 1fr; }
.accordion__corpo > div { overflow: hidden; }
.accordion__corpo p { padding-bottom: var(--sp-6); color: var(--testo-secondario); }

/* ==========================================================================
   6. PAGINE
   ========================================================================== */

/* 6.1 Home — griglia editoriale materiali in evidenza */
.vetrina {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 760px) {
  .vetrina {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: var(--sp-4);
  }
  /* Composizione asimmetrica: la prima tessera domina */
  .vetrina > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .vetrina > :nth-child(2) { grid-column: span 2; }
  .vetrina > :nth-child(3) { grid-column: span 1; }
  .vetrina > :nth-child(4) { grid-column: span 1; }
  .vetrina > :nth-child(5) { grid-column: span 2; grid-row: span 1; }
  .vetrina > :nth-child(6) { grid-column: span 2; grid-row: span 1; }
}
.tessera {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 280px;
  padding: var(--sp-8);
  border-radius: 0;
  overflow: hidden;
  color: var(--testo-su-scuro);
  text-decoration: none;
  isolation: isolate;
}
.tessera__media { position: absolute; inset: 0; z-index: var(--z-sotto); }
.tessera__media img, .tessera__media svg {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-scenica) var(--ease-morbida);
}
.tessera:hover .tessera__media img, .tessera:hover .tessera__media svg { transform: scale(var(--moto-zoom)); }
.tessera__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(18, 16, 14,0.88) 0%, rgba(18, 16, 14,0.28) 55%, rgba(18, 16, 14,0.08) 100%);
}
.tessera__contenuto { position: relative; }
.tessera__categoria {
  font-size: var(--testo-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--bronzo-400);
  display: block;
  margin-bottom: var(--sp-2);
}
.tessera__titolo {
  /* Gli elementi della tessera sono <span> dentro un link: senza `display:
     block` restano in linea e titolo e descrizione finiscono sulla stessa
     riga appena la card si stringe. */
  display: block;
  font-family: var(--font-display);
  font-size: var(--testo-2xl);
  line-height: var(--interlinea-titolo);
  color: var(--testo-su-scuro);
}
.tessera__testo {
  display: block;
  font-size: var(--testo-sm);
  color: var(--testo-su-scuro-sec);
  margin-top: var(--sp-2);
  max-width: 40ch;
}

/* 6.2 Sezione a due colonne testo/immagine */
.duo {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 900px) {
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); }
  .duo--invertita > :first-child { order: 2; }
}
.duo__media {
  position: relative;
  border-radius: var(--raggio-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.duo__media img, .duo__media svg { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) { .duo__media { aspect-ratio: 3 / 4; } }

/* Citazione */
.citazione {
  border-left: 2px solid var(--bronzo-500);
  padding-left: var(--sp-6);
  margin-block: var(--sp-8);
}
.citazione p {
  font-family: var(--font-display);
  font-size: var(--testo-3xl);
  line-height: 1.2;
  font-style: italic;
  line-height: var(--interlinea-media);
  letter-spacing: var(--spaziatura-titolo);
  max-width: 30ch;
}
.citazione footer {
  margin-top: var(--sp-4);
  font-size: var(--testo-sm);
  color: var(--testo-terziario);
}
.citazione cite { font-style: normal; font-weight: var(--peso-semi); color: var(--testo-primario); display: block; }
.su-scuro .citazione cite { color: var(--testo-su-scuro); }

/* 6.3 Card lavorazione */
.card-lavorazione {
  display: flex;
  flex-direction: column;
  background: transparent;
  height: 100%;
}
/* Le foto delle finiture sono tutte 1200 × 750 (16:10): il riquadro ha lo
   stesso rapporto, così non si ritaglia niente. Il <picture> va a blocco e
   alto quanto il riquadro, se no sotto la foto resta una banda di fondo. */
.card-lavorazione__media { aspect-ratio: 16 / 10; background: var(--superficie-incassata); overflow: hidden; }
.card-lavorazione__media picture { display: block; width: 100%; height: 100%; }
.card-lavorazione__media img, .card-lavorazione__media svg { width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--moto-lenta) var(--ease-entrata); }
.card-lavorazione:hover .card-lavorazione__media img { transform: scale(var(--moto-zoom)); }
.card-lavorazione__corpo { padding: var(--sp-5) 0 var(--sp-2); display: grid; gap: var(--sp-3); }
.card-lavorazione__titolo { font-family: var(--font-display); font-size: var(--testo-2xl); line-height: 1.1; }
.card-lavorazione__testo { font-size: var(--testo-sm); color: var(--testo-secondario); line-height: var(--interlinea-media); }
.card-lavorazione__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--bordo-tenue);
}

/* 6.4 Card servizio — colonne aperte separate da un filetto, come i tre
   materiali dell'ispirazione «Form / Stone»: niente riquadri. */
.card-servizio {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-6) 0 0;
  background: transparent;
  border-top: 1px solid var(--bordo-default);
  height: 100%;
}
.card-servizio__icona {
  display: inline-flex; align-items: center; justify-content: flex-start;
  width: 32px; height: 32px;
  color: var(--bronzo-700);
}
.card-servizio__icona svg { width: 28px; height: 28px; stroke-width: 1.2; }
.card-servizio h3 { font-size: var(--testo-2xl); line-height: 1.1; }
@media (min-width: 1080px) {
  .griglia--4 > .card-servizio { padding-right: var(--sp-4); }
}
.card-servizio p { font-size: var(--testo-sm); color: var(--testo-secondario); line-height: var(--interlinea-media); }

/* 6.5 Scheda materiale (dettaglio) */
.scheda-materiale { display: grid; gap: var(--sp-10); }
@media (min-width: 1000px) {
  .scheda-materiale { grid-template-columns: 1.15fr 1fr; gap: var(--sp-16); align-items: start; }
  .scheda-materiale__media { position: sticky; top: calc(var(--header-h) + var(--sp-8)); }
}
.scheda-materiale__media img, .scheda-materiale__media svg {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--raggio-md);
}

/* Tabella dati tecnici */
.tabella-dati { width: 100%; border-collapse: collapse; font-size: var(--testo-sm); }
.tabella-dati caption {
  text-align: left;
  font-size: var(--testo-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--testo-terziario);
  padding-bottom: var(--sp-3);
}
.tabella-dati th, .tabella-dati td {
  text-align: left;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--bordo-tenue);
  vertical-align: top;
}
.tabella-dati th { font-weight: var(--peso-medio); color: var(--testo-secondario); width: 40%; }
.tabella-dati td { color: var(--testo-primario); }

/* 6.6 Contatti */
.mappa-segnaposto {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--superficie-incassata);
  border: 1px solid var(--bordo-default);
  border-radius: var(--raggio-md);
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-8);
  overflow: hidden;
}
.mappa-segnaposto svg { width: 40px; height: 40px; color: var(--testo-terziario); margin: 0 auto var(--sp-4); }
.mappa-segnaposto h2, .mappa-segnaposto h3 { font-size: var(--testo-lg); margin-bottom: var(--sp-2); }
.mappa-segnaposto p { font-size: var(--testo-sm); color: var(--testo-secondario); max-width: 44ch; margin-bottom: var(--sp-5); }

/* 6.7 Pagine legali (testo lungo) */
.prosa { max-width: 74ch; }
.prosa h2 { font-size: var(--testo-2xl); margin-top: var(--sp-12); margin-bottom: var(--sp-4); }
.prosa h3 { font-size: var(--testo-lg); font-family: var(--font-testo); font-weight: var(--peso-semi);
            margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.prosa p  { margin-bottom: var(--sp-4); color: var(--testo-secondario); }
.prosa ul { margin: 0 0 var(--sp-4) var(--sp-6); color: var(--testo-secondario); display: grid; gap: var(--sp-2); }
.prosa a  { color: var(--testo-brand); text-underline-offset: 3px; }
.prosa table { width: 100%; border-collapse: collapse; font-size: var(--testo-sm); margin-bottom: var(--sp-6); }
.prosa th, .prosa td { text-align: left; padding: var(--sp-3); border: 1px solid var(--bordo-tenue); vertical-align: top; }
.prosa th { background: var(--superficie-alt); font-weight: var(--peso-semi); }
.prosa__data { font-size: var(--testo-sm); color: var(--testo-terziario); }

/* Tabelle larghe: scorrono da sole, la pagina non scorre mai in orizzontale */
.scorri-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   7. STAMPA
   ========================================================================== */

@media print {
  .header, .footer, .cookie, .riapri-cookie, .drawer, .velo,
  .banda-cta, .hero__scorri, .filtri { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .rivela { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   8. COMPONENTI CINETICI
   --------------------------------------------------------------------------
   Il movimento qui non è decorazione: ogni elemento di questa sezione esiste
   perché comunica qualcosa che una composizione ferma non riuscirebbe a dire.
   Lo slider mostra che il catalogo è vasto; la fascia scorrevole che i nomi
   sono tanti; il carosello che si può esplorare; i contatori che i numeri
   sono un risultato accumulato nel tempo.
   Tutto quanto segue si spegne sotto `prefers-reduced-motion`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   8.1 Hero con slider di materiali
   -------------------------------------------------------------------------- */

.hero-slider {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  margin-top: calc(var(--header-h) * -1);
  color: var(--testo-su-scuro);
  overflow: hidden;
  isolation: isolate;
  background: var(--caffe-950);
}

.hero-slider__pista { position: absolute; inset: 0; z-index: var(--z-sotto); }

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--moto-lenta) var(--ease-morbida);
  will-change: opacity;
}
.slide[data-attiva="true"] { opacity: 1; }

.slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Zoom lentissimo sulla sola slide attiva: dà vita all'immagine ferma
     senza mai attirare l'attenzione su di sé. 12 secondi, non 3. */
  transform: scale(1.06);
  transition: transform var(--moto-lenta) linear;
}
.slide[data-attiva="true"] img { transform: scale(1); }

/* Doppio velo, come nell'hero statico: garantisce il contrasto del testo
   qualunque fotografia venga caricata. */
.hero-slider__pista::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* Base uniforme: senza, una lastra bianca resterebbe bianca sotto un
       gradiente che si azzera a metà altezza. */
    linear-gradient(rgba(18, 16, 14,0.52), rgba(18, 16, 14,0.52)),
    /* Verticale: molto denso in basso dove sta il testo, più leggero in alto
       dove la texture deve restare leggibile. */
    linear-gradient(to top,
      rgba(18, 16, 14,0.90) 0%, rgba(18, 16, 14,0.52) 38%,
      rgba(18, 16, 14,0.06) 72%, rgba(18, 16, 14,0.30) 100%),
    /* Orizzontale: rinforza solo la colonna di sinistra, sotto il titolo. */
    linear-gradient(to right,
      rgba(28, 25, 22,0.58) 0%, rgba(28, 25, 22,0.20) 50%, rgba(28, 25, 22,0) 82%);
}

.hero-slider__contenuto {
  position: relative;
  z-index: 2;   /* davanti al nome monumentale, dietro la card dei comandi */
  width: 100%;
  padding-block: calc(var(--header-h) + var(--sp-10)) var(--sp-10);
}
@media (min-width: 1100px) {
  /* Il titolo occupa la metà sinistra: la scena vive nell'altra metà. */
  .hero-slider__titolo,
  .hero-slider__sommario { max-width: min(52%, 34ch); }
  .hero-slider__azioni { max-width: 52%; }
}

.hero-slider__titolo {
  font-size: var(--testo-5xl);
  color: var(--testo-su-scuro);
  max-width: 15ch;
  margin-bottom: var(--sp-5);
}
/* Le tre righe entrano scaglionate al caricamento: la pagina si "monta"
   davanti a chi arriva invece di essere già lì. */
.hero-slider__riga {
  display: block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: sali-riga 900ms var(--ease-entrata) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 180ms);
}
@keyframes sali-riga { to { opacity: 1; transform: none; } }

.hero-slider__sommario {
  font-size: var(--testo-lg);
  color: var(--testo-su-scuro-sec);
  max-width: 46ch;
  margin-bottom: var(--sp-8);
  opacity: 0;
  animation: sali-riga 900ms var(--ease-entrata) 560ms forwards;
}
.hero-slider__azioni {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  opacity: 0;
  animation: sali-riga 900ms var(--ease-entrata) 680ms forwards;
}
.hero-slider__azioni .btn { flex: 1 1 auto; min-width: 190px; }
@media (min-width: 700px) { .hero-slider__azioni .btn { flex: 0 0 auto; } }

/* Barra dati, condivisa con l'hero statico */
.hero-slider .hero__dati { margin-top: var(--sp-12); }

/* Binario verticale a sinistra — il payoff del marchio, ruotato.
   Elemento decorativo: nascosto agli assistivi, il testo esiste già altrove. */
.rail {
  position: absolute;
  left: var(--sp-6);
  bottom: var(--sp-24);   /* sopra l'indicatore "Scorri", che sta a --sp-8 */
  z-index: 2;
  display: none;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--testo-2xs);
  letter-spacing: var(--spaziatura-occhiello);
  text-transform: uppercase;
  color: var(--testo-su-scuro-sec);
  align-items: center;
  gap: var(--sp-4);
}
.rail::after {
  content: "";
  width: 1px; height: 72px;
  background: linear-gradient(to top, var(--bronzo-500), transparent);
}
@media (min-width: 1280px) and (min-height: 720px) { .rail { display: flex; } }

/* --------------------------------------------------------------------------
   8.2 Card flottante del materiale in vista
   È il pattern che ricorre su tutti i siti di settore di fascia alta: dice
   che cosa si sta guardando, a che punto si è, e dà il controllo.
   -------------------------------------------------------------------------- */

.card-slider {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-12);
  z-index: 3;
  width: 320px;
  display: none;
  padding: var(--sp-4);
  border-radius: var(--raggio-lg);
  background: rgba(247, 244, 238, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 24px 60px rgba(18, 16, 14, 0.42);
  opacity: 0;
  animation: sali-riga 900ms var(--ease-entrata) 900ms forwards;
}
@media (min-width: 1080px) { .card-slider { display: block; } }

.card-slider__occhiello {
  font-size: var(--testo-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--bronzo-400);
  margin-bottom: var(--sp-3);
}
.card-slider__corpo {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
  min-height: var(--tocco-min);
}
.card-slider__miniatura {
  width: 56px; height: 56px;
  border-radius: var(--raggio-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.2);
}
.card-slider__nome {
  font-family: var(--font-display);
  font-size: var(--testo-lg);
  color: var(--testo-su-scuro);
  line-height: 1.15;
}
.card-slider__meta {
  font-size: var(--testo-xs);
  color: var(--testo-su-scuro-sec);
  margin-top: 2px;
}
.card-slider__corpo:hover .card-slider__nome { text-decoration: underline; text-underline-offset: 3px; }

.card-slider__controlli {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.16);
}
.card-slider__conteggio {
  font-size: var(--testo-xs);
  font-variant-numeric: tabular-nums;
  color: var(--testo-su-scuro-sec);
  white-space: nowrap;
}
.card-slider__conteggio b { color: var(--testo-su-scuro); font-weight: var(--peso-semi); }

.card-slider__barra {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.22);
  border-radius: var(--raggio-pill);
  overflow: hidden;
}
.card-slider__barra span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--bronzo-500);
  transform-origin: left;
  transform: scaleX(0);
}
.card-slider__barra span[data-corre="true"] {
  animation: avanza var(--durata-slide, 6500ms) linear forwards;
}
@keyframes avanza { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.freccia-slider {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  color: var(--testo-su-scuro);
  cursor: pointer;
  transition: background-color var(--dur-veloce) var(--ease-standard),
              border-color var(--dur-veloce) var(--ease-standard);
}
.freccia-slider:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); }
.freccia-slider svg { width: 16px; height: 16px; }
/* L'area di tocco reale resta 44px anche se il cerchio ne misura 36 */
.freccia-slider::before {
  content: ""; position: absolute;
  width: var(--tocco-min); height: var(--tocco-min);
}
.freccia-slider { position: relative; }

/* --------------------------------------------------------------------------
   8.3 Fascia scorrevole (marquee)
   -------------------------------------------------------------------------- */

.fascia {
  overflow: hidden;
  padding-block: var(--sp-6);
  background: var(--caffe-900);
  color: var(--testo-su-scuro);
  border-block: 1px solid var(--bordo-su-scuro);
  /* Sfuma ai bordi: il testo entra ed esce invece di essere tagliato netto */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.fascia__pista {
  display: flex;
  width: max-content;
  animation: scorri-fascia var(--durata-fascia, 48s) linear infinite;
}
.fascia:hover .fascia__pista,
.fascia:focus-within .fascia__pista { animation-play-state: paused; }

.fascia__gruppo {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
  padding-right: var(--sp-10);
  flex-shrink: 0;
}
.fascia__voce {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  white-space: nowrap;
  text-decoration: none;
  color: var(--testo-su-scuro);
  transition: color var(--dur-veloce) var(--ease-standard);
}
.fascia__voce:hover { color: var(--bronzo-400); }
.fascia__punto {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--bronzo-500);
  flex-shrink: 0;
}
@keyframes scorri-fascia { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   8.4 Carosello orizzontale trascinabile
   -------------------------------------------------------------------------- */

.carosello { position: relative; }

.carosello__pista {
  display: flex;
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Il carosello sfonda il contenitore e arriva al bordo dello schermo:
     è ciò che comunica "continua oltre", molto più di una freccia. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: var(--sp-2) var(--sp-6);
  cursor: grab;
}
.carosello__pista::-webkit-scrollbar { display: none; }
.carosello__pista[data-trascina="true"] { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.carosello__pista[data-trascina="true"] * { pointer-events: none; }

.carosello__voce {
  flex: 0 0 auto;
  width: min(78vw, 380px);
  scroll-snap-align: start;
}
@media (min-width: 900px)  { .carosello__voce { width: 340px; } }
@media (min-width: 1440px) { .carosello__voce { width: 380px; } }

.carosello__comandi {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-2);
}
.carosello__barra {
  flex: 1;
  max-width: 220px;
  height: 2px;
  background: var(--bordo-default);
  border-radius: var(--raggio-pill);
  overflow: hidden;
}
.carosello__barra span {
  display: block; height: 100%;
  background: var(--caffe-700);
  border-radius: var(--raggio-pill);
  transform-origin: left;
  transition: transform var(--dur-veloce) var(--ease-standard);
}
.freccia-carosello {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tocco-min); height: var(--tocco-min);
  flex-shrink: 0;
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  border-radius: 50%;
  color: var(--testo-primario);
  cursor: pointer;
  transition: border-color var(--dur-veloce) var(--ease-standard),
              background-color var(--dur-veloce) var(--ease-standard);
}
.freccia-carosello:hover:not([disabled]) { border-color: var(--caffe-700); background: var(--caffe-050); }
.freccia-carosello[disabled] { opacity: 0.35; cursor: not-allowed; }
.freccia-carosello svg { width: 18px; height: 18px; }
.su-scuro .freccia-carosello {
  background: transparent; border-color: var(--bordo-su-scuro); color: var(--testo-su-scuro);
}
.su-scuro .carosello__barra { background: var(--bordo-su-scuro); }
.su-scuro .carosello__barra span { background: var(--bronzo-500); }

/* --------------------------------------------------------------------------
   8.5 Composizioni stratificate
   I pannelli escono dalla griglia e si sovrappongono. È ciò che dà profondità
   a una pagina che altrimenti resterebbe una pila di rettangoli allineati.
   -------------------------------------------------------------------------- */

.strato { position: relative; }

/* Numerale sovradimensionato sul fondo, tagliato dal bordo della sezione */
.numerale {
  position: absolute;
  z-index: 0;
  font-family: var(--font-display);
  font-size: clamp(9rem, 26vw, 26rem);
  line-height: 0.78;
  font-variant-numeric: tabular-nums;
  color: var(--pietra-100);
  pointer-events: none;
  user-select: none;
}
.numerale--sinistra { left: calc(var(--gutter) * -0.6); bottom: -0.12em; }
.numerale--destra   { right: calc(var(--gutter) * -0.6); top: -0.14em; }
.su-scuro .numerale { color: rgba(255, 255, 255, 0.055); }
.strato > *:not(.numerale) { position: relative; z-index: 1; }

/* Due colonne con l'immagine che sfonda il contenitore verso il bordo */
.duo-sfondante { display: grid; gap: var(--sp-8); align-items: center; }
@media (min-width: 980px) {
  .duo-sfondante {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--sp-16);
  }
  .duo-sfondante__media {
    /* Esce dal contenitore fino al bordo dello schermo. Sta nella colonna di
       destra anche quando nel codice viene prima del testo (le schede formato
       la mettono sempre per prima): senza order sfondava sopra al testo. */
    order: 2;
    /* Lo sfondamento si calcola dal contenitore, non dalla colonna: con
       calc(50% - 50vw) il 50% era della colonna e l'immagine usciva di un
       terzo oltre lo schermo, tagliata da overflow-x: clip. */
    --sfonda: calc((min(100vw, var(--contenitore)) - 100vw) / 2 - var(--gutter));
    margin-right: var(--sfonda);
    border-radius: var(--raggio-md) 0 0 var(--raggio-md);
  }
  .duo-sfondante--invertita { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .duo-sfondante--invertita .duo-sfondante__media {
    order: -1;
    margin-right: 0;
    margin-left: var(--sfonda);
    border-radius: 0 var(--raggio-md) var(--raggio-md) 0;
  }
}
.duo-sfondante__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--raggio-md);
  aspect-ratio: 4 / 3;
}
.duo-sfondante__media img { width: 100%; height: 100%; object-fit: cover; }

/* Pannello che si sovrappone al bordo dell'immagine (riferimento "norm") */
.pannello-sovrapposto {
  position: relative;
  z-index: 2;
  padding: var(--sp-6);
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-tenue);
  border-radius: var(--raggio-lg);
  box-shadow: var(--ombra-xl);
}
@media (min-width: 980px) {
  .pannello-sovrapposto {
    margin-top: calc(var(--sp-16) * -1);
    margin-left: var(--sp-10);
    max-width: 460px;
    padding: var(--sp-8);
  }
}

/* --------------------------------------------------------------------------
   8.6 Parallasse
   Ampiezza volutamente minima (max 8%): oltre, su un sito di prodotto,
   diventa disorientante e fa perdere il riferimento con lo scorrimento.
   -------------------------------------------------------------------------- */

.parallasse { will-change: transform; }
.parallasse img { transform: translate3d(0, var(--sposta, 0), 0) scale(1.12); }

/* --------------------------------------------------------------------------
   8.7 Contatori
   -------------------------------------------------------------------------- */

.dato__valore[data-conta] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   8.8 Movimento ridotto — qui si spegne tutto
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .slide img { transform: none; transition: none; }
  .slide { transition: none; }
  .hero-slider__riga,
  .hero-slider__sommario,
  .hero-slider__azioni,
  .card-slider { animation: none; opacity: 1; transform: none; }
  .fascia__pista { animation: none; }
  /* Senza animazione la fascia mostrerebbe solo il primo gruppo: la si
     lascia scorrevole a mano, come una qualunque lista orizzontale. */
  .fascia { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .card-slider__barra span { animation: none; transform: scaleX(1); }
  .carosello__pista { scroll-behavior: auto; }
  .parallasse img { transform: none; }
}

/* --------------------------------------------------------------------------
   8.9 Testata editoriale
   Registro più deciso per le pagine-indice: tipografia sovradimensionata che
   sfonda i margini, dati tecnici in colonna, striscia di anteprime dietro il
   titolo. Serve a dare peso alla pagina più importante del sito — il catalogo
   — senza portare quel tono su tutte le altre, dove sarebbe rumore.
   -------------------------------------------------------------------------- */

.testata-ed {
  position: relative;
  background: var(--caffe-950);
  color: var(--testo-su-scuro);
  margin-top: calc(var(--header-h) * -1);
  padding-top: calc(var(--header-h) + var(--sp-12));
  padding-bottom: var(--sp-12);
  overflow: hidden;
  isolation: isolate;
}

/* Striscia di anteprime che scorre dietro al titolo, molto attenuata:
   si intuisce che sotto c'è il catalogo, senza rubare la scena al testo. */
.testata-ed__striscia {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  z-index: var(--z-sotto);
  display: flex;
  gap: var(--sp-3);
  opacity: 0.26;
  /* Sfocatura leggera: senza, i bordi netti fra un'anteprima e l'altra
     leggono come bande verticali e competono con il titolo. Sfocate,
     diventano atmosfera. */
  filter: blur(2px);
  -webkit-mask-image: linear-gradient(to top, #000 6%, transparent 88%);
          mask-image: linear-gradient(to top, #000 6%, transparent 88%);
  animation: scorri-striscia 90s linear infinite;
  width: max-content;
}
.testata-ed__striscia img {
  width: 240px; height: 100%;
  object-fit: cover;
  border-radius: var(--raggio-sm);
  flex-shrink: 0;
}

@keyframes scorri-striscia { to { transform: translateX(-50%); } }

.testata-ed__titolo {
  font-size: clamp(3.5rem, 1.4rem + 9.5vw, 11rem);
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--testo-su-scuro);
  /* Sfonda leggermente il margine sinistro: è ciò che dà l'impressione che
     la parola sia più grande della pagina. Solo da tablet in su — su mobile
     produrrebbe scorrimento orizzontale. */
  margin-left: 0;
}
@media (min-width: 900px) {
  .testata-ed__titolo { margin-left: -0.055em; }
}
.testata-ed__titolo em {
  display: block;
  font-style: italic;
  color: var(--bronzo-500);
}

/* Riga di dati tecnici sotto il titolo, in stile scheda merceologica */
.testata-ed__dati {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5) var(--sp-8);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--bordo-su-scuro);
}
@media (min-width: 900px) {
  .testata-ed__dati { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.testata-ed__dato dt {
  font-size: var(--testo-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--bronzo-400);
  margin-bottom: var(--sp-2);
}
.testata-ed__dato dd {
  font-size: var(--testo-sm);
  color: var(--testo-su-scuro-sec);
  line-height: var(--interlinea-media);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .testata-ed__striscia { animation: none; }
}

/* ==========================================================================
   9. HERO "CAVA" — la composizione monumentale
   --------------------------------------------------------------------------
   Il nome del materiale in vista è scritto in corpo enorme dietro la scena, e
   la lastra lo attraversa. È il dispositivo dei riferimenti Rochester e
   CREATIVE, ed è pertinente qui più che altrove: il protagonista è la pietra,
   e il suo nome è già l'unico titolo che serve.

   Sotto, una fascia di dati tecnici in stile scheda merceologica: è la parte
   "Indice". Fa capire in due secondi che il sito è uno strumento di lavoro e
   non una brochure.
   ========================================================================== */

/* Il nome del materiale, dietro tutto */
.eco-materiale {
  position: absolute;
  /* Non centrato: la scena sta a destra, il titolo a sinistra. Centrarla
     significherebbe farla collidere con l'H1, che è esattamente il difetto
     della prima versione. */
  right: 0;
  top: 38%;
  transform: translateY(-50%);
  z-index: 0;
  width: 66%;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 15vw, 15rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  /* Non un semplice bianco trasparente: un contorno appena acceso più un
     riempimento tenue. Sul chiaro resta leggibile, sullo scuro non sparisce. */
  color: rgba(255, 255, 255, 0.09);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
  transition: opacity var(--dur-lenta) var(--ease-standard);
}
@media (min-width: 900px) {
  .eco-materiale { letter-spacing: 0.02em; }
}

/* La lastra: un pannello che sta DAVANTI al nome e lo taglia a metà.
   È questa sovrapposizione a creare la profondità, non un'ombra. */
.lastra-hero {
  position: absolute;
  right: 5vw;
  top: 38%;
  transform: translateY(-50%);
  z-index: 1;
  /* Più stretta del nome che copre: se lo nascondesse del tutto,
     la sovrapposizione smetterebbe di leggersi. */
  width: min(38vw, 470px);
  aspect-ratio: 4 / 3;
  border-radius: var(--raggio-sm);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(18, 16, 14, 0.55),
              0 0 0 1px rgba(255, 255, 255, 0.10);
  pointer-events: none;
}
.lastra-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform var(--moto-lenta) linear, opacity var(--dur-lenta) var(--ease-standard);
}
.lastra-hero[data-cambio="true"] img { opacity: 0; }

/* Sotto i 1100px la scena a destra non ha più spazio: resta solo il nome,
   allargato a tutta la pagina e molto tenue, come filigrana di fondo. */
@media (max-width: 1099px) {
  .lastra-hero { display: none; }
  .eco-materiale {
    right: auto; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    top: 24%;
    font-size: clamp(2.75rem, 14vw, 7rem);
    color: rgba(255, 255, 255, 0.05);
    -webkit-text-stroke-width: 0.5px;
  }
}
/* Sotto i 700px la filigrana cade esattamente dietro l'H1. Su un telefono
   la leggibilità del titolo vale più di un effetto: sparisce. */
@media (max-width: 699px) {
  .eco-materiale { display: none; }
}

/* Fascia tecnica in basso — la parte "Indice" */
.indice-hero {
  position: relative;
  z-index: 3;
  display: grid;
  gap: var(--sp-5) var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--bordo-su-scuro);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .indice-hero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  /* Lascia libera la fascia destra dove galleggia la card dei comandi:
     senza, la quarta colonna finisce sotto il vetro e non si legge. */
  .indice-hero { padding-right: 360px; }
}
.indice-hero dt {
  font-size: var(--testo-2xs);
  font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--bronzo-400);
  margin-bottom: var(--sp-2);
}
.indice-hero dd {
  margin: 0;
  font-size: var(--testo-sm);
  line-height: var(--interlinea-media);
  color: var(--testo-su-scuro-sec);
}
.indice-hero dd b { color: var(--testo-su-scuro); font-weight: var(--peso-medio); }

@media (prefers-reduced-motion: reduce) {
  .lastra-hero img { transform: none; transition: none; }
  .eco-materiale { transition: none; }
}

/* ==========================================================================
   10. HERO VIDEO
   --------------------------------------------------------------------------
   Il filmato di cava fa il lavoro emotivo, la fascia tecnica in basso quello
   informativo. Nessun altro elemento in movimento: un video e uno slider di
   materiali si contenderebbero l'attenzione e perderebbero entrambi.
   ========================================================================== */

.hero-video {
  position: relative;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  margin-top: calc(var(--header-h) * -1);
  color: var(--testo-su-scuro);
  overflow: hidden;
  isolation: isolate;
  background: var(--caffe-950);
}

.hero-video__media { position: absolute; inset: 0; z-index: var(--z-sotto); }

.hero-video__video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Il poster riempie il riquadro esattamente come il video: senza questa
     riga il fotogramma di attesa comparirebbe rimpicciolito e lettereboxed,
     e il passaggio al video sarebbe uno scatto. */
  object-position: center;
  display: block;
}

/* Il filmato è girato su marmo bianco in pieno sole: è la sorgente più
   luminosa che questo sito dovrà mai velare. Il velo è tarato su quella, non
   su un'immagine di media luminosità. */
.hero-video__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(18, 16, 14, 0.34), rgba(18, 16, 14, 0.34)),
    linear-gradient(to top,
      rgba(18, 16, 14, 0.90) 0%,
      rgba(18, 16, 14, 0.56) 42%,
      rgba(18, 16, 14, 0.06) 76%,
      rgba(18, 16, 14, 0.34) 100%),
    linear-gradient(to right,
      rgba(28, 25, 22, 0.55) 0%,
      rgba(28, 25, 22, 0.18) 52%,
      rgba(28, 25, 22, 0) 84%);
}

.hero-video__contenuto {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: calc(var(--header-h) + var(--sp-10)) var(--sp-10);
}

.hero-video__titolo {
  font-size: var(--testo-5xl);
  color: var(--testo-su-scuro);
  max-width: 15ch;
  margin-bottom: var(--sp-5);
}
.hero-video__riga {
  display: block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: sali-riga 900ms var(--ease-entrata) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 180ms);
}
.hero-video__sommario {
  font-size: var(--testo-lg);
  color: var(--testo-su-scuro-sec);
  max-width: 46ch;
  margin-bottom: var(--sp-8);
  opacity: 0;
  animation: sali-riga 900ms var(--ease-entrata) 560ms forwards;
}
.hero-video__azioni {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-12);
  opacity: 0;
  animation: sali-riga 900ms var(--ease-entrata) 680ms forwards;
}
.hero-video__azioni .btn { flex: 1 1 auto; min-width: 190px; }
@media (min-width: 700px) { .hero-video__azioni .btn { flex: 0 0 auto; } }

/* Senza slider non serve lasciare libera la fascia destra */
.hero-video .indice-hero { padding-right: 0; }

/* Comando di pausa — obbligatorio per WCAG 2.2.2 su qualunque contenuto
   che parte da solo e dura più di cinque secondi. */
.hero-video__pausa {
  position: absolute;
  right: var(--gutter);
  bottom: var(--sp-8);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tocco-min);
  height: var(--tocco-min);
  background: rgba(247, 244, 238, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--testo-su-scuro);
  cursor: pointer;
  transition: background-color var(--dur-veloce) var(--ease-standard),
              border-color var(--dur-veloce) var(--ease-standard);
}
.hero-video__pausa:hover {
  background: rgba(247, 244, 238, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
}
.hero-video__pausa svg { width: 18px; height: 18px; }
.hero-video__pausa[hidden] { display: none; }
/* Le due icone si alternano via attributo `hidden`. Su un <svg> l'attributo
   non basta da solo: senza questa regola comparivano entrambe affiancate. */
.hero-video__pausa svg[hidden] { display: none; }

.hero-video__scorri {
  position: absolute;
  left: var(--gutter);
  bottom: var(--sp-8);
  z-index: 3;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--testo-2xs);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--testo-su-scuro-sec);
  text-decoration: none;
}
.hero-video__scorri::after {
  content: "";
  width: 56px; height: 1px;
  background: linear-gradient(to right, var(--bronzo-500), transparent);
}
/* Volutamente non mostrato: in basso a sinistra c'è già il pulsante delle
   preferenze cookie, che è un elemento di conformità e non si sposta, e la
   fascia tecnica in fondo alla hero dice da sola che la pagina continua. */

@media (prefers-reduced-motion: reduce) {
  .hero-video__riga,
  .hero-video__sommario,
  .hero-video__azioni { animation: none; opacity: 1; transform: none; }
}


/* ==========================================================================
   11. LASTRE — le varietà di un materiale, fotografate nella stessa scena

   Tutte le immagini alla STESSA larghezza, sempre. La scala non la fa il
   CSS: sta dentro la fotografia, perché ogni lastra è stata montata nello
   stesso capannone sullo stesso cavalletto con lo stesso fattore px/cm
   (tools/componi-lastre.py). Dare larghezze diverse alle immagini
   distruggerebbe proprio il confronto che questa sezione esiste per fare.
   ========================================================================== */

.lastre {
  display: grid;
  gap: var(--sezione-y) var(--sp-8);
  margin-top: var(--sp-10);
}
@media (min-width: 900px) {
  .lastre { grid-template-columns: repeat(2, 1fr); }
}

.lastra { margin: 0; }

/* Le famiglie grandi raggruppano le lastre per colore: un indice di
   pastiglie in testa e un titolo per gruppo (costruisci.py, gruppi_lastre). */
.lastre-indice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
}
.lastre-indice .pastiglia {
  min-height: 36px;
  padding-inline: var(--sp-4);
  font-size: var(--testo-sm);
  color: var(--testo-primario);
  text-decoration: none;
  transition: border-color var(--moto-rapida), background-color var(--moto-rapida);
}
.lastre-indice .pastiglia:hover { border-color: var(--bordo-forte); }
.lastre-indice__n {
  font-variant-numeric: tabular-nums;
  color: var(--testo-terziario);
}

.lastre-gruppo { margin-top: var(--sezione-y); }
.lastre-gruppo__titolo {
  padding-top: var(--sp-6);
  border-top: 1px solid var(--bordo-tenue);
  font-size: var(--testo-2xl);
}
.lastre-gruppo__nota {
  max-width: 62ch;
  margin-top: var(--sp-3);
  color: var(--testo-secondario);
  line-height: var(--interlinea-corpo);
}
.lastre-gruppo .lastre { margin-top: var(--sp-8); }

.lastra__foto,
.lastra picture img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raggio-md);
  background: var(--pietra-100);
}

.lastra__dati { margin-top: var(--sp-5); }

.lastra__nome {
  font-size: var(--testo-xl);
  margin-bottom: var(--sp-2);
}
.lastra__misura {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  font-family: var(--font-testo);
  font-size: var(--testo-sm);
  color: var(--testo-secondario);
}
.lastra__misura b {
  font-variant-numeric: tabular-nums;
  color: var(--testo-primario);
}
.lastra__misura span {
  font-size: var(--testo-xs);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--testo-terziario);
}
.lastra__nota {
  margin-top: var(--sp-3);
  color: var(--testo-secondario);
  line-height: var(--interlinea-corpo);
}

/* Gli impieghi erano link alti 19,5px. WCAG 2.2 AA (2.5.8) chiede 24×24 CSS
   px — i 44px sono la soglia AAA — quindi basta poco per stare in regola, e
   poco è meglio: gonfiare una lista di testo la fa sembrare una pulsantiera. */
.elenco-impieghi {
  display: grid;
  gap: var(--sp-1);
  margin-left: var(--sp-5);
}
.elenco-impieghi a {
  display: inline-block;
  padding-block: 5px;
}

.scheda-materiale__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
}

.lastre__avviso {
  margin-top: var(--sezione-y);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--bordo-tenue);
  max-width: 72ch;
}


/* ==========================================================================
   12. TESTATA AMBIENTATA — la scheda materiale si apre sul materiale posato

   La testata normale annega l'immagine sotto un velo blu all'89%: va bene per
   una texture generata, che è un fondale. Un'ambientazione invece è il
   contenuto, e va vista. Qui il velo diventa direzionale — scuro dove c'è il
   testo, trasparente dove c'è la stanza — e la testata cresce fino a metà
   schermo, perché è la prima risposta alla domanda «come viene, posata?».
   ========================================================================== */

.testata--opera {
  min-height: min(70vh, 660px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: var(--sp-12);
}

.testata--opera .testata__media { opacity: 1; }

/* Il sommario deve restare DENTRO la zona velata. Con il max-width di 58ch
   ereditato da .sommario la prima riga sforava oltre il 72% della larghezza,
   finiva su una zona chiara della fotografia e scendeva a 1,84:1 — sotto
   qualunque soglia. La misura qui non è estetica, è il vincolo di leggibilità. */
.testata--opera .sommario {
  max-width: 40ch;
  color: rgba(255, 255, 255, .96);
}
.testata--opera h1 { max-width: 16ch; }

.testata--opera .testata__media::after {
  /* Il velo è LATERALE, non a fascia: scuro sulla colonna sinistra dove sta
     il testo, trasparente a destra dove sta la stanza. Un velo orizzontale in
     basso, che era il primo tentativo, creava una barra piatta da footer e
     copriva proprio il pavimento — cioè l'impiego che l'immagine deve
     mostrare. Il secondo gradiente è solo una sicurezza sul fondo. */
  background:
    linear-gradient(to right,
      rgba(18, 16, 14, .92) 0%,
      rgba(18, 16, 14, .84) 30%,
      rgba(18, 16, 14, .62) 52%,
      rgba(18, 16, 14, .22) 68%,
      rgba(18, 16, 14, 0) 82%),
    linear-gradient(to top,
      rgba(18, 16, 14, .46) 0%,
      rgba(18, 16, 14, .16) 22%,
      rgba(18, 16, 14, 0) 46%);
}

/* Didascalia tecnica: dice che cosa si sta guardando. Senza, l'immagine è
   solo bella; con, è informazione di capitolato. */
.testata__didascalia {
  position: absolute;
  right: var(--sp-6);
  bottom: var(--sp-5);
  z-index: 1;
  margin: 0;
  max-width: 36ch;
  /* Pastiglia e non testo nudo: l'angolo in basso a destra cade sul lato
     chiaro dell'immagine, dove il velo non arriva, e lì il testo bianco
     sparisce. Con il fondo proprio il contrasto è garantito su tutte e
     ventiquattro le schede, qualunque cosa mostri la fotografia. */
  padding: var(--sp-2) var(--sp-4);
  background: rgba(18, 16, 14, .84);
  border-radius: var(--raggio-sm);
  font-family: var(--font-testo);
  font-size: var(--testo-2xs);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}
@supports (backdrop-filter: blur(6px)) {
  .testata__didascalia {
    background: rgba(18, 16, 14, .74);
    backdrop-filter: blur(6px);
  }
}
@media (max-width: 720px) {
  .testata--opera { min-height: min(66vh, 560px); }

  /* Su una colonna da 375px il velo laterale non ha più un «lato»: il testo
     occupa tutta la larghezza e ci finisce sotto per intero, e la stanza
     sparisce. Qui torna verticale — scuro in basso dove sta il testo, aperto
     in alto dove sta la fotografia. */
  .testata--opera .testata__media::after,
  .testata--materia .testata__media::after {
    background: linear-gradient(to top,
      rgba(18, 16, 14, .94) 0%,
      rgba(18, 16, 14, .88) 26%,
      rgba(18, 16, 14, .56) 48%,
      rgba(18, 16, 14, .22) 70%,
      rgba(18, 16, 14, .06) 100%);
  }
  .testata--opera .sommario,
  .testata--materia .sommario { max-width: none; }
  .testata__didascalia {
    position: static;
    max-width: none;
    align-self: flex-start;
    margin: var(--sp-6) var(--sp-5) 0;
  }
}

/* --------------------------------------------------------------------------
   12.1 Testata senza ambientazione — ventitré schede su ventiquattro

   Il velo standard porta l'immagine all'11% di visibilità: giusto quando
   dietro c'è un fondale generico, sbagliato quando dietro c'è la texture del
   materiale, che è l'unica cosa che quelle pagine hanno da mostrare finché
   non arrivano le fotografie. Qui la pietra si vede, il testo regge lo
   stesso perché il velo resta forte sulla colonna sinistra.
   -------------------------------------------------------------------------- */

.testata--materia .testata__media { opacity: .85; }
.testata--materia .testata__media::after {
  background:
    linear-gradient(to right,
      rgba(18, 16, 14, .93) 0%,
      rgba(18, 16, 14, .86) 32%,
      rgba(18, 16, 14, .58) 52%,
      rgba(18, 16, 14, .30) 70%,
      rgba(18, 16, 14, .18) 100%);
}
.testata--materia .sommario { max-width: 46ch; }

/* ==========================================================================
   13. IN OPERA — la galleria delle ambientazioni

   Due immagini di formato diverso: la panoramica larga e il dettaglio
   quadrato. Non si forzano allo stesso rapporto — un dettaglio ritagliato in
   panoramica smette di essere un dettaglio.
   ========================================================================== */

.opera {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
}
@media (min-width: 900px) {
  .opera {
    grid-template-columns: 1.62fr 1fr;   /* la larga prende più spazio */
    align-items: end;
  }
}

.opera__voce { margin: 0; }

.opera__foto,
.opera__voce img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--raggio-md);
  background: var(--pietra-100);
}

.opera__voce figcaption {
  margin-top: var(--sp-4);
  font-family: var(--font-testo);
  font-size: var(--testo-xs);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--testo-terziario);
}

.opera__avviso {
  margin-top: var(--sp-10);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--bordo-tenue);
  max-width: 72ch;
}

/* ==========================================================================
   PIETRE RUSTICHE (/pietre-rustiche/)
   --------------------------------------------------------------------------
   Articoli da piazzale, non lastre: ogni scheda è una foto grande del
   bancale con le miniature sotto, e i dati di fornitura in una lista corta.
   Tre colonne su schermo largo, perché i prodotti di un gruppo si scelgono
   confrontandoli fianco a fianco.
   ========================================================================== */

.glossario {
  display: grid;
  gap: var(--sp-6) var(--sp-10);
  margin-top: var(--sp-10);
}
@media (min-width: 700px)  { .glossario { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .glossario { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.glossario__voce {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--bordo-tenue);
}
.glossario dt {
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  color: var(--testo-primario);
}
.glossario dd {
  margin: var(--sp-2) 0 0;
  color: var(--testo-secondario);
  line-height: var(--interlinea-corpo);
}

.rustiche {
  display: grid;
  gap: var(--sp-16) var(--sp-8);
  margin-top: var(--sp-8);
}
@media (min-width: 700px)  { .rustiche { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rustiche { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rustica { display: flex; flex-direction: column; margin: 0; scroll-margin-top: calc(var(--header-h) + var(--sp-6)); }

.rustica__principale {
  aspect-ratio: 4 / 5;
  border-radius: var(--raggio-md);
  overflow: hidden;
  background: var(--pietra-100);
}
.rustica__principale picture { display: block; width: 100%; height: 100%; }
.rustica__principale img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rustica__principale img[data-orizzontale="true"] { object-fit: contain; }

.rustica__miniature {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.rustica__mini {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: var(--raggio-sm);
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--moto-rapida);
}
.rustica__mini:hover { border-color: var(--bordo-forte); }
/* Cinque miniature (quattro foto e la resa in opera) stanno in una riga
   anche su un telefono da 375px solo se scendono a 56px. */
@media (max-width: 420px) { .rustica__mini { width: 56px; height: 56px; } }
.rustica__mini[aria-current="true"] { border-color: var(--testo-brand); }
.rustica__mini picture, .rustica__mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rustica__targhetta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2px 4px;
  background: rgba(18, 16, 14, .82);
  color: #fff;
  font-size: var(--testo-2xs);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
}

.rustica__corpo { display: flex; flex-direction: column; flex: 1; padding-top: var(--sp-5); }
.rustica__materiale {
  font-size: var(--testo-2xs);
  letter-spacing: var(--spaziatura-label);
  text-transform: uppercase;
  color: var(--testo-terziario);
}
.rustica__nome { margin-top: var(--sp-2); font-size: var(--testo-xl); }
.rustica__testo {
  margin-top: var(--sp-3);
  color: var(--testo-secondario);
  line-height: var(--interlinea-corpo);
}
.rustica__dati {
  margin-top: var(--sp-5);
  font-size: var(--testo-sm);
  border-top: 1px solid var(--bordo-tenue);
}
.rustica__dati div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 34%) 1fr;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--bordo-tenue);
}
.rustica__dati dt { font-weight: var(--peso-medio); color: var(--testo-secondario); }
.rustica__dati dd { margin: 0; color: var(--testo-primario); }
.rustica__impieghi { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.rustica__cta { margin-top: auto; padding-top: var(--sp-6); align-self: flex-start; }

/* Le rese in opera della pagina sono undici, orizzontali e verticali
   mescolate: in colonne alla Pinterest nessuna va ritagliata. */
.opera--mosaico { display: block; columns: 2 340px; column-gap: var(--sp-6); }
.opera--mosaico .opera__voce { break-inside: avoid; margin-bottom: var(--sp-8); }

.ordine-rustiche h3 { font-size: var(--testo-xl); }
.ordine-rustiche p {
  margin-top: var(--sp-3);
  color: var(--testo-secondario);
  line-height: var(--interlinea-corpo);
}

/* ==========================================================================
   7. HOME — HERO EDITORIALE (restyling del 29 ottobre 2026)
   Fotografia chiara a tutta pagina, come nella prima ispirazione del
   cliente: la parete di travertino a sinistra resta libera e ospita il
   titolo, scuro. Sopra questo hero l'header è trasparente ma con testo
   scuro e logo a colori: il velo nero pensato per le testate scure qui
   sporcherebbe la parete chiara.
   ========================================================================== */

.pagina-home .header[data-trasparente="true"]::before {
  background: linear-gradient(to bottom, rgba(247, 244, 238, 0.7), rgba(247, 244, 238, 0));
}
.pagina-home .header[data-trasparente="true"] .header__interno,
.pagina-home .header[data-trasparente="true"] .nav__link,
.pagina-home .header[data-trasparente="true"] .header__telefono,
.pagina-home .header[data-trasparente="true"] .apri-menu { color: var(--testo-primario); }
.pagina-home .header[data-trasparente="true"] .marchio__img--scuro { display: block; }
.pagina-home .header[data-trasparente="true"] .marchio__img--chiaro { display: none; }
.pagina-home .header[data-trasparente="true"] .lingue { border-color: var(--bordo-default); }
.pagina-home .header[data-trasparente="true"] .lingue__voce { color: var(--testo-secondario); }

.hero-ed {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  background: var(--superficie-alt);
  isolation: isolate;
}
.hero-ed__media picture { display: block; width: 100%; height: 100%; }
.hero-ed__media img { width: 100%; height: 100%; object-fit: cover; }

/* Telefono: la foto sopra, inquadrata sull'arco, e il testo sotto su crema.
   Su una colonna stretta la parete libera non esiste più. */
.hero-ed__media {
  aspect-ratio: 4 / 5;
  max-height: 72svh;
  width: 100%;
}
.hero-ed__media img { object-position: 64% 50%; }
.hero-ed__contenuto { padding-block: var(--sp-10) var(--sp-12); }

.hero-ed__occhiello { margin-bottom: var(--sp-6); }
.hero-ed__titolo {
  font-size: clamp(2.25rem, 1rem + 5.2vw, 6.5rem);
  font-weight: var(--peso-normale);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--testo-primario);
}
.hero-ed__riga { display: block; }
.hero-ed__titolo .enfasi { font-weight: var(--peso-normale); }
.hero-ed__sommario {
  margin-top: var(--sp-6);
  max-width: 34ch;
  font-size: var(--testo-lg);
  line-height: 1.6;
  color: var(--testo-secondario);
}
.hero-ed__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-10);
}

/* Le tre righe entrano scaglionate al caricamento, come nell'hero di prima */
@media (prefers-reduced-motion: no-preference) {
  .hero-ed__riga, .hero-ed__occhiello, .hero-ed__sommario, .hero-ed__azioni {
    animation: hero-ed-entra 1s var(--ease-entrata) both;
    animation-delay: calc(120ms + var(--i, 3) * 110ms);
  }
  .hero-ed__occhiello { --i: -1; }
  .hero-ed__media img { animation: hero-ed-foto 1.8s var(--ease-entrata) both; }
}
@keyframes hero-ed-entra { from { opacity: 0; transform: translateY(18px); } }
@keyframes hero-ed-foto  { from { opacity: 0; transform: scale(1.04); } }

/* Da tablet in su: foto a tutta pagina, testo sulla parete a sinistra */
@media (min-width: 900px) {
  .hero-ed {
    display: flex;
    align-items: center;
    min-height: min(100svh, 980px);
    min-height: clamp(640px, 100svh, 980px);
  }
  .hero-ed__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    max-height: none;
    z-index: var(--z-sotto);
  }
  .hero-ed__media img { object-position: 30% 50%; }
  /* Velo crema solo sulla fascia del testo: la parete è già chiara, il velo
     serve a non dipendere dalle macchie del travertino. */
  .hero-ed__media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* 2 nov 2026: la foto sotto il video ora è la cava a gradoni, fitta di
       bianchi e grigi; il velo leggero pensato per la parete di travertino non
       bastava. Stesso velo del video in onda: leggibile da subito, e quando il
       video parte non cambia nulla. */
    z-index: 1;
    background: linear-gradient(90deg,
      rgba(247, 244, 238, 0.94) 0%,
      rgba(247, 244, 238, 0.86) 34%,
      rgba(247, 244, 238, 0.45) 50%,
      rgba(247, 244, 238, 0) 66%);
  }
  .hero-ed__contenuto {
    padding-top: calc(var(--header-h) + var(--sp-12));
    padding-bottom: var(--sp-20);
  }
  /* Il titolo deve restare sulla parete chiara, che finisce poco prima
     della metà della finestra (la foto è ancorata al 30%). Lo spazio
     disponibile è quindi il 48% della finestra meno il margine del
     contenitore, e il corpo si ricava da lì: la riga più lunga misura circa
     nove em. Su schermi molto larghi il titolo non sconfina più sull'arco. */
  .hero-ed {
    --spazio-parete: calc(48vw - max(0px, (100vw - var(--contenitore)) / 2) - var(--gutter));
  }
  .hero-ed__titolo {
    max-width: var(--spazio-parete);
    font-size: min(clamp(2.25rem, 1rem + 5.2vw, 6.5rem), calc(var(--spazio-parete) / 9.1));
  }
  .hero-ed__sommario { max-width: 34ch; }
}

/* Fascia dei quattro dati sotto l'hero: colonne separate da filetti, con
   l'etichetta spaziata delle ispirazioni sopra un testo breve. */
.indice-ed {
  background: var(--superficie-base);
  border-bottom: 1px solid var(--bordo-default);
}
.indice-ed__griglia {
  display: grid;
  grid-template-columns: 1fr;
  margin-block: 0;
}
.indice-ed__griglia > div {
  padding-block: var(--sp-6);
  border-top: 1px solid var(--bordo-default);
}
.indice-ed__griglia > div:first-child { border-top: 0; }
.indice-ed dt {
  font-size: var(--testo-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-occhiello);
  text-transform: uppercase;
  color: var(--testo-terziario);
}
.indice-ed dd {
  margin: var(--sp-3) 0 0;
  font-size: var(--testo-sm);
  line-height: 1.55;
  color: var(--testo-secondario);
  max-width: 30ch;
}
.indice-ed dd b {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  font-weight: var(--peso-medio);
  color: var(--testo-primario);
}
@media (min-width: 620px) {
  .indice-ed__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indice-ed__griglia > div:nth-child(2) { border-top: 0; }
  .indice-ed__griglia > div:nth-child(even) { padding-left: var(--sp-6); border-left: 1px solid var(--bordo-default); }
}
@media (min-width: 1080px) {
  .indice-ed__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .indice-ed__griglia > div { border-top: 0; padding-block: var(--sp-10); }
  .indice-ed__griglia > div + div { padding-left: var(--sp-8); border-left: 1px solid var(--bordo-default); }
}

/* Telefono: una colonna sola non ha un «lato del testo», e il testo
   (briciole comprese) occupa tutta la larghezza. Velo verticale uniforme su
   tutte le testate con foto, anche su quelle chiare (Calacatta, cortili). */
@media (max-width: 719px) {
  .testata .testata__media::after,
  .testata--opera .testata__media::after {
    background: linear-gradient(180deg,
      rgba(28, 25, 22, 0.74) 0%,
      rgba(28, 25, 22, 0.62) 45%,
      rgba(28, 25, 22, 0.80) 100%);
  }
}

/* Contatti senza testata (29 ottobre 2026): le briciole stanno in testa alla
   prima sezione, con lo stesso stacco dall'header delle altre pagine. */
.sezione--contatti { padding-top: var(--sp-10); }
.sezione--contatti .briciole { margin-bottom: var(--sp-10); }
.sezione--contatti h1 { font-size: var(--testo-4xl); }

/* Hero con video di cava (29 ottobre 2026). La foto resta sotto come poster;
   il video, quando parte, entra in dissolvenza sopra di lei. */
@media (max-width: 899px) { .hero-ed__media { position: relative; } }
.hero-ed__video {
  position: absolute; inset: 0;
  pointer-events: none;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
  opacity: 0;
  transition: opacity var(--moto-lenta) var(--ease-morbida);
}
.hero-ed__video.in-onda { opacity: 1; }
/* Il video scorre solo su desktop: a sinistra, sotto il titolo nero, il marmo
   si muove e passano macchine gialle. Il velo crema si rinforza solo quando
   il video è in onda, così sulla foto resta leggero. */
@media (min-width: 900px) {
  .hero-ed__media:has(.hero-ed__video.in-onda)::after {
    z-index: 1;
    background: linear-gradient(90deg,
      rgba(247, 244, 238, 0.94) 0%,
      rgba(247, 244, 238, 0.86) 34%,
      rgba(247, 244, 238, 0.45) 50%,
      rgba(247, 244, 238, 0) 66%);
  }
}
/* Pulsante di pausa su fondo chiaro */
.hero-ed__pausa {
  color: var(--testo-primario);
  background: rgba(247, 244, 238, 0.7);
  border-color: rgba(28, 25, 22, 0.18);
}
.hero-ed__pausa:hover { background: rgba(247, 244, 238, 0.92); border-color: rgba(28, 25, 22, 0.35); }

/* ==========================================================================
   8. HOME — «CHI SIAMO» SULLA PARETE DI CAVA (29 ottobre 2026)
   La fotografia riempie la sezione e il testo sta su un pannello crema che le
   si sovrappone, come la banda «Our philosophy» della terza ispirazione. La
   parete è piena di dettaglio: il testo non ci va sopra direttamente, e il
   pannello lascia libera la parte destra, dove i gradoni sono più leggibili.
   ========================================================================== */
.parete-cava {
  position: relative;
  isolation: isolate;
  background: var(--superficie-base);
}
.parete-cava__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.parete-cava__media picture { display: block; width: 100%; height: 100%; }
.parete-cava__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  /* La parallasse sposta la foto di pochi punti: la scala tiene i bordi coperti. */
  transform: translateY(var(--sposta, 0)) scale(1.12);
  will-change: transform;
}
/* Telefono: il pannello sale sul bordo basso della foto. */
.parete-cava__contenitore { position: relative; margin-top: calc(var(--sp-12) * -1); padding-bottom: var(--sezione-y); }
.parete-cava__pannello {
  position: relative;
  background: var(--superficie-base);
  padding: var(--sp-8) var(--sp-6) var(--sp-10);
  border-top: 1px solid var(--bordo-accento);
}
.parete-cava__titolo { font-size: var(--testo-3xl); }
.parete-cava__pannello .sommario { max-width: 44ch; }

@media (min-width: 900px) {
  .parete-cava {
    display: flex;
    align-items: center;
    min-height: clamp(640px, 90vh, 880px);
    padding-block: var(--sezione-y);
    overflow: hidden;
  }
  .parete-cava__media { position: absolute; inset: 0; z-index: var(--z-sotto); aspect-ratio: auto; }
  /* Un velo caldo appena percettibile a sinistra, dietro il pannello: lega i
     grigi della parete al crema del sito senza spegnere la foto a destra. */
  .parete-cava__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(247, 244, 238, 0.35) 0%, rgba(247, 244, 238, 0.12) 45%, rgba(247, 244, 238, 0) 70%);
  }
  .parete-cava__contenitore { margin-top: 0; padding-bottom: 0; }
  .parete-cava__pannello {
    width: min(100%, 36rem);
    padding: clamp(2.5rem, 1.5rem + 2.6vw, 4.5rem);
    box-shadow: 0 30px 80px rgba(28, 25, 22, 0.18);
  }
}

/* ==========================================================================
   9. HOME — CAROSELLO DELLE LASTRE (29 ottobre 2026)
   Card editoriale come nelle ispirazioni (FORM/STONE, AURUM): l'immagine in
   alto, pulita, e il testo sotto sul fondo scuro della sezione. La pista parte
   allineata al titolo e scorre fino al bordo dello schermo: dice «continua»
   meglio di una freccia. Le card entrano morbide mentre scorrono.
   ========================================================================== */
.carosello--lastre .carosello__pista {
  /* da bordo a bordo dello schermo, con il primo elemento allineato al testo */
  /* Scorrimento centrato (29 ottobre 2026): ogni card si ferma al centro
     esatto dello schermo. Il margine laterale è metà schermo meno metà card,
     così anche la prima e l'ultima possono arrivare al centro. */
  --rientro: calc(50cqw - var(--larghezza-card) / 2);
  margin-inline: calc(50% - 50cqw);
  padding-inline: var(--rientro);
  scroll-padding-inline: 0;
  gap: clamp(1rem, 0.6rem + 1.4vw, 2rem);
  padding-block: var(--sp-4) var(--sp-8);
}
/* Le misure si prendono dalla sezione (unità cqw), non da 100vw: 100vw
   include la barra di scorrimento quando il sistema la mostra, e il centro
   finirebbe spostato di mezza barra. */
.sezione:has(.carosello--lastre) { container-type: inline-size; }
.carosello--lastre { --larghezza-card: min(76cqw, 340px); }
@media (min-width: 900px)  { .carosello--lastre { --larghezza-card: 330px; } }
@media (min-width: 1440px) { .carosello--lastre { --larghezza-card: 360px; } }
.carosello--lastre .carosello__voce { width: var(--larghezza-card); scroll-snap-align: center; }

.lastra-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--testo-su-scuro);
  -webkit-user-drag: none;
}
.lastra-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--superficie-scura-elev);
}
.lastra-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform var(--moto-lenta) var(--ease-entrata), filter var(--moto-media) var(--ease-standard);
  filter: saturate(0.94);
  user-select: none;
}
/* Un filo di luce sul bordo interno: la lastra non si scioglie nel nero. */
.lastra-card__media::after {
  content: "";
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  pointer-events: none;
}
.lastra-card__numero {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  padding: 0.3em 0.6em;
  font-size: var(--testo-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-label);
  color: var(--caffe-900);
  background: rgba(247, 244, 238, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lastra-card__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-top: var(--sp-5);
  border-top: 1px solid transparent;
}
.lastra-card__categoria {
  font-size: var(--testo-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-occhiello);
  text-transform: uppercase;
  color: var(--bronzo-400);
}
.lastra-card__titolo {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--testo-2xl);
  font-weight: var(--peso-medio);
  line-height: 1.08;
  color: var(--testo-su-scuro);
}
/* Due righe sempre: le card restano allineate qualunque sia la descrizione. */
.lastra-card__testo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: var(--sp-3);
  min-height: calc(2 * 1.55em);
  font-size: var(--testo-sm);
  line-height: 1.55;
  color: var(--testo-su-scuro-sec);
}
.lastra-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  align-self: flex-start;
  margin-top: var(--sp-5);
  padding-bottom: var(--sp-1);
  font-size: var(--testo-sm);
  color: var(--testo-su-scuro);
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat;
  transition: background-size var(--moto-media) var(--ease-entrata), color var(--dur-veloce);
}
.lastra-card__link svg { width: 16px; height: 16px; transition: transform var(--moto-media) var(--ease-entrata); }

@media (hover: hover) {
  .lastra-card:hover .lastra-card__media img { transform: scale(var(--moto-zoom)); filter: saturate(1); }
  .lastra-card:hover .lastra-card__link { color: var(--bronzo-400); background-size: 0% 1px; background-position: right bottom; }
  .lastra-card:hover .lastra-card__link svg { transform: translateX(6px); }
}
.lastra-card:focus-visible { outline-offset: 6px; }

/* Entrata legata allo scorrimento orizzontale: la card che arriva da destra
   cresce e si schiarisce mentre entra. Solo dove il browser lo supporta e
   solo senza riduzione del movimento. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Simmetrica: la card si schiarisce entrando da QUALSIASI lato e si
       attenua uscendo da qualsiasi lato. Con il solo «entry» l'effetto
       c'era scorrendo in avanti e mancava tornando indietro, perché da
       sinistra una card rientra nella fase «exit» della timeline. */
    .carosello--lastre .carosello__voce {
      animation: lastra-scorre linear both;
      animation-timeline: view(inline);
      animation-range: normal;
    }
    @keyframes lastra-scorre {
      entry 0%   { opacity: 0.55; transform: translateY(14px) scale(0.97); }
      entry 100% { opacity: 1;    transform: none; }
      exit 0%    { opacity: 1;    transform: none; }
      exit 100%  { opacity: 0.55; transform: translateY(14px) scale(0.97); }
    }
  }
}

/* Comandi: contatore, barra di avanzamento e frecce sulla stessa riga */
.carosello--lastre .carosello__comandi { gap: var(--sp-5); margin-top: var(--sp-4); justify-content: center; }
.carosello__indice {
  font-family: var(--font-display);
  font-size: var(--testo-lg);
  color: var(--testo-su-scuro-sec);
  font-variant-numeric: tabular-nums;
  min-width: 4.5ch;
}
.carosello__indice b { font-weight: var(--peso-medio); color: var(--testo-su-scuro); }
.carosello--lastre .carosello__barra { max-width: 280px; height: 1px; }
.carosello--lastre .carosello__barra span { transition: transform var(--moto-media) var(--ease-entrata); }
.carosello--lastre .freccia-carosello {
  width: 52px; height: 52px;
  transition: background-color var(--dur-media) var(--ease-standard),
              border-color var(--dur-media) var(--ease-standard),
              color var(--dur-media) var(--ease-standard);
}
.su-scuro .carosello--lastre .freccia-carosello:hover:not([disabled]) {
  background: var(--pietra-025); border-color: var(--pietra-025); color: var(--caffe-900);
}
@media (max-width: 619px) { .carosello--lastre .carosello__barra { display: none; } .carosello--lastre .carosello__comandi { justify-content: space-between; } }

/* Desktop: card quadrate, così immagine e testo stanno nella stessa schermata. */
@media (min-width: 900px) { .lastra-card__media { aspect-ratio: 1 / 1; } }

/* «Lavorazioni» in home (29 ottobre 2026): lo stesso schema della parete di
   cava, specchiato. Il pannello sta a destra, la piscina resta libera a
   sinistra; dentro il pannello, sotto un filetto, le tredici finiture. */
.parete-cava__finiture {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--bordo-tenue);
}

.parete-cava--destra .parete-cava__media img { object-position: 20% 55%; }

@media (min-width: 900px) {
  .parete-cava--destra .parete-cava__contenitore { display: flex; justify-content: flex-end; }
  .parete-cava--destra .parete-cava__pannello { width: min(100%, 38rem); }
  .parete-cava--destra .parete-cava__media::after {
    background: linear-gradient(270deg, rgba(247, 244, 238, 0.35) 0%, rgba(247, 244, 238, 0.12) 45%, rgba(247, 244, 238, 0) 70%);
  }
}

/* Le tredici finiture divise per uso, ognuna un link alla sua scheda.
   Tredici pastiglie in fila non dicevano niente; tre famiglie aiutano a
   scegliere (il grado antiscivolo è quello di lavorazioni.json). */
.finiture__titolo {
  margin: 0 0 var(--sp-5);
  font-size: var(--testo-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-occhiello);
  text-transform: uppercase;
  color: var(--testo-accento);
}
.finiture { display: grid; gap: var(--sp-5); margin: 0; }
.finiture__gruppo { display: grid; gap: var(--sp-2); }
.finiture__gruppo dt {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--testo-sm);
  font-weight: var(--peso-medio);
  color: var(--testo-primario);
}
.finiture__gruppo dt::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--bordo-accento);
}
.finiture__gruppo dd { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.pastiglia--link {
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-media) var(--ease-standard),
              border-color var(--dur-media) var(--ease-standard),
              color var(--dur-media) var(--ease-standard);
}
.pastiglia--link:hover {
  background: var(--caffe-900);
  border-color: var(--caffe-900);
  color: var(--pietra-025);
}
.parete-cava__azioni {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-8);
  margin-top: var(--sp-8);
}
.parete-cava__azioni .btn svg { width: 16px; height: 16px; }

/* Le finiture in tre benefici (29 ottobre 2026): chi guarda la home non
   ragiona per «bocciardato medio» ma per «non scivola», «è morbida», «sembra
   antica». I tredici nomi tecnici restano nella pagina Lavorazioni. */
.effetti { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordo-tenue); }
.parete-cava__finiture:has(.effetti) { border-top: 0; padding-top: 0; }
.effetti li {
  display: grid;
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--bordo-tenue);
}
.effetti strong {
  font-family: var(--font-display);
  font-size: var(--testo-xl);
  font-weight: var(--peso-medio);
  line-height: 1.15;
  color: var(--testo-primario);
}
.effetti span { font-size: var(--testo-sm); line-height: 1.55; color: var(--testo-secondario); }

/* ==========================================================================
   10. HOME — «IL NOSTRO METODO» (29 ottobre 2026)
   Banda scura a tutta sezione: la foto del tavolo di progetto e il testo
   direttamente sull'ombra a sinistra, come «Our philosophy» della terza
   ispirazione. Fa da contrappunto alle due sezioni chiare a pannello.
   ========================================================================== */
.metodo-ed {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--superficie-scura);
  color: var(--testo-su-scuro);
}
.metodo-ed__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.metodo-ed__media picture { display: block; width: 100%; height: 100%; }
.metodo-ed__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  transform: translateY(var(--sposta, 0)) scale(1.1);
}
/* Telefono: la foto sfuma nel fondo scuro sotto, dove sta il testo */
.metodo-ed__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28, 25, 22, 0) 55%, var(--superficie-scura) 100%);
}
.metodo-ed__contenuto { position: relative; padding-block: var(--sp-6) var(--sezione-y); }
.metodo-ed__testo { max-width: 34rem; }
.metodo-ed__citazione { margin: 0; }
.metodo-ed__citazione::before {
  content: "\201C";
  display: block;
  height: 0.55em;
  font-family: var(--font-display);
  font-size: clamp(4rem, 3rem + 3vw, 6.5rem);
  line-height: 1;
  color: var(--bronzo-500);
}
.metodo-ed__citazione p {
  max-width: none;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3.4rem);
  font-weight: var(--peso-normale);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--testo-su-scuro);
}
.metodo-ed__citazione footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-6);
  font-size: var(--testo-sm);
  color: var(--testo-su-scuro-sec);
}
.metodo-ed__citazione footer::before { content: ""; width: 28px; height: 1px; background: var(--bronzo-500); }
.metodo-ed__citazione cite { font-style: normal; font-weight: var(--peso-medio); color: var(--testo-su-scuro); }
.metodo-ed__sommario {
  margin-top: var(--sp-8);
  max-width: 44ch;
  font-size: var(--testo-lg);
  line-height: 1.65;
  color: var(--testo-su-scuro-sec);
}
.metodo-ed__cta { margin-top: var(--sp-8); }
.metodo-ed__cta svg { width: 16px; height: 16px; }

@media (min-width: 900px) {
  .metodo-ed {
    display: flex;
    align-items: center;
    min-height: clamp(680px, 92vh, 900px);
  }
  .metodo-ed__media { position: absolute; inset: 0; z-index: var(--z-sotto); aspect-ratio: auto; }
  .metodo-ed__media img { object-position: 60% 50%; }
  /* Velo laterale: il testo sta sempre su un fondo quasi nero, la scena a
     destra resta piena. */
  /* Il velo segue la fine reale del testo (margine del contenitore + 34rem),
     non una percentuale fissa: a 1000 px il paragrafo arrivava al 58% della
     larghezza, proprio dove il velo finiva, e finiva sopra il foglio bianco. */
  .metodo-ed__media::after {
    --fine-testo: calc(max(0px, (100% - var(--contenitore)) / 2) + var(--gutter) + 34rem);
    background: linear-gradient(90deg,
      rgba(18, 16, 14, 0.94) 0%,
      rgba(18, 16, 14, 0.86) var(--fine-testo),
      rgba(18, 16, 14, 0.35) calc(var(--fine-testo) + 14%),
      rgba(18, 16, 14, 0) calc(var(--fine-testo) + 28%));
  }
  .metodo-ed__contenuto { padding-block: var(--sezione-y); }
}

/* Banda preventivo chiara (home, 29 ottobre 2026): dopo la banda scura del
   «metodo» due campiture scure di fila si fondevano. Fondo sabbia, testo e
   bottone principale scuri. */
.banda-cta--chiara {
  background: var(--superficie-alt);
  color: var(--testo-primario);
  border-top: 1px solid var(--bordo-tenue);
}
.banda-cta--chiara h2 { color: var(--testo-primario); }
.banda-cta--chiara .sommario { color: var(--testo-secondario); }
.banda-cta--chiara .occhiello { color: var(--testo-accento); }
.banda-cta--chiara .btn--accento { background: var(--azione-primaria-bg); color: var(--azione-primaria-testo); }
.banda-cta--chiara .btn--accento:hover { background: var(--azione-primaria-bg-hover); }
.banda-cta--chiara :focus-visible { outline: var(--focus-anello); }

/* Azienda: testata con video di cava (29 ottobre 2026). Più alta delle altre
   testate, perché qui il video è il protagonista. La foto resta sotto e il
   video entra in dissolvenza quando parte; il velo della testata lo copre
   come copre la foto, così il testo resta leggibile. */
.testata.testata--video:has(video) { min-height: min(86vh, 820px); display: flex; flex-direction: column; justify-content: flex-end; }
.testata__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--moto-lenta) var(--ease-morbida);
}
.testata__video.in-onda { opacity: 1; }
.testata--video .hero-video__pausa { bottom: var(--sp-6); }

/* Azienda, «Chi siamo» (29 ottobre 2026): racconto e citazione affiancati,
   poi la galleria di lastre a tutta larghezza in formato cinema. Il corridoio
   in prospettiva porta lo sguardo verso la sezione successiva. */
.chi-siamo-az__griglia { display: grid; gap: var(--sp-10); }
.chi-siamo-az__citazione { margin: 0; }
@media (min-width: 900px) {
  .chi-siamo-az__griglia {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--sp-16);
    align-items: center;
  }
}
.banda-lastre {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--superficie-alt);
}
.banda-lastre picture { display: block; width: 100%; height: 100%; }
.banda-lastre img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 42% 60%;
  transform: translateY(var(--sposta, 0)) scale(1.12);
}
@media (min-width: 900px) { .banda-lastre { aspect-ratio: 21 / 9; max-height: 82vh; } }

/* Azienda, «Tre promesse» (29 ottobre 2026): niente riquadri pieni senza
   respiro né icone in scatola. Tre colonne aperte separate da filetti, con un
   grande numero serif in bronzo: si leggono come impegni in sequenza. */
.promesse {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  border-top: 1px solid var(--bordo-su-scuro);
}
.promesse__voce {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-4);
  padding-block: var(--sp-8) var(--sp-10);
  border-bottom: 1px solid var(--bordo-su-scuro);
}
/* Il filetto bronzo cresce sulla colonna al passaggio del mouse */
.promesse__voce::before {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 48px; height: 1px;
  background: var(--bronzo-500);
  transition: width var(--moto-media) var(--ease-entrata);
}
.promesse__numero {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2.4rem + 2.6vw, 5rem);
  font-weight: var(--peso-normale);
  line-height: 0.9;
  color: var(--bronzo-500);
  font-variant-numeric: lining-nums;
  transition: color var(--moto-media) var(--ease-standard);
}
.promesse__titolo {
  font-size: var(--testo-2xl);
  color: var(--testo-su-scuro);
}
.promesse__testo {
  max-width: 34ch;
  font-size: var(--testo-base);
  line-height: 1.65;
  color: var(--testo-su-scuro-sec);
}
@media (hover: hover) {
  .promesse__voce:hover::before { width: 100%; }
  .promesse__voce:hover .promesse__numero { color: var(--bronzo-400); }
}
@media (min-width: 900px) {
  .promesse { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--bordo-su-scuro); }
  .promesse__voce { border-bottom: 0; padding: var(--sp-10) var(--sp-8) var(--sp-12); }
  .promesse__voce:first-child { padding-left: 0; }
  .promesse__voce + .promesse__voce { border-left: 1px solid var(--bordo-su-scuro); }
  .promesse__voce + .promesse__voce::before { left: var(--sp-8); }
  .promesse__voce + .promesse__voce:hover::before { width: calc(100% - var(--sp-8)); }
}

/* ==========================================================================
   Azienda, «Dal blocco al cantiere» (29 ottobre 2026)
   Una sequenza, non una griglia: introduzione ferma a sinistra (sticky) e i
   cinque passaggi in colonna a destra, uniti da una linea verticale che si
   riempie di bronzo mentre si scorre. Ogni passaggio ha il suo segno.
   ========================================================================== */
.passaggi-griglia { display: grid; gap: var(--sp-10); }
.passaggi-intro .sommario { margin-top: var(--sp-5); }
.passaggi-intro .link-freccia { margin-top: var(--sp-8); }
.passaggi {
  --segno: 52px;
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid;
}
/* Un tratto di linea fra un segno e il successivo: di fondo grigio, e sopra
   un tratto bronzo che si allunga mentre il passaggio scorre in vista. */
.passaggi__voce:not(:last-child)::before,
.passaggi__voce:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--segno) / 2);
  top: var(--segno);
  bottom: 0;
  width: 1px;
  background: var(--bordo-default);
}
.passaggi__voce:not(:last-child)::after { background: var(--bronzo-600); transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .passaggi__voce:not(:last-child)::after {
      animation: passaggi-linea linear both;
      animation-timeline: view();
      animation-range: entry 60% cover 55%;
    }
    @keyframes passaggi-linea { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}
.passaggi__voce:last-child { padding-bottom: 0; }
.passaggi__voce {
  position: relative;
  display: grid;
  grid-template-columns: var(--segno) minmax(0, 1fr);
  gap: var(--sp-6);
  padding-bottom: var(--sp-10);
}
.passaggi__segno {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: var(--segno); height: var(--segno);
  border: 1px solid var(--bordo-default);
  border-radius: 50%;
  background: var(--superficie-base);
  color: var(--testo-accento);
  transition: background-color var(--moto-media) var(--ease-standard), border-color var(--moto-media) var(--ease-standard), color var(--moto-media) var(--ease-standard);
}
.passaggi__segno svg { width: 22px; height: 22px; }
.passaggi__corpo { padding-top: var(--sp-2); }
.passaggi__numero {
  display: block;
  font-size: var(--testo-2xs);
  font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-occhiello);
  color: var(--testo-accento);
}
.passaggi__titolo { margin-top: var(--sp-2); font-size: var(--testo-2xl); }
.passaggi__testo {
  margin-top: var(--sp-3);
  max-width: 52ch;
  line-height: var(--interlinea-corpo);
  color: var(--testo-secondario);
}
@media (hover: hover) {
  .passaggi__voce:hover .passaggi__segno { background: var(--caffe-900); border-color: var(--caffe-900); color: var(--bronzo-400); }
}
@media (min-width: 960px) {
  .passaggi-griglia {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--sp-20);
    align-items: start;
  }
  /* L'introduzione resta in vista mentre scorrono i passaggi */
  .passaggi-intro { position: sticky; top: calc(var(--header-h) + var(--sp-12)); }
  .passaggi { --segno: 60px; }
  .passaggi__voce { gap: var(--sp-8); padding-bottom: var(--sp-12); }
}

/* ==========================================================================
   Materiali: testata cinematografica (29 ottobre 2026)
   Sei lastre del catalogo si alternano in dissolvenza (6 s ciascuna, ciclo
   di 36 s), ognuna con un lento movimento di camera diverso (Ken Burns).
   Velo scuro a sinistra e in basso per il testo, vignettatura e grana da
   pellicola. La striscia di miniature di prima è stata tolta.
   ========================================================================== */
.testata-ed { min-height: min(92vh, 900px); display: flex; flex-direction: column; justify-content: flex-end; }
.testata-ed__sfondo { position: absolute; inset: 0; z-index: var(--z-sotto); overflow: hidden; background: var(--caffe-950); }
.testata-ed__lastra { position: absolute; inset: 0; display: block; opacity: 0; }
.testata-ed__lastra:first-child { opacity: 1; }
.testata-ed__lastra img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.testata-ed__sfondo::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse at 70% 40%, rgba(12, 11, 10, 0) 0%, rgba(12, 11, 10, 0.55) 75%),
    linear-gradient(90deg, rgba(12, 11, 10, 0.88) 0%, rgba(12, 11, 10, 0.62) 45%, rgba(12, 11, 10, 0.25) 100%),
    linear-gradient(0deg, rgba(12, 11, 10, 0.92) 0%, rgba(12, 11, 10, 0.35) 45%, rgba(12, 11, 10, 0.45) 100%);
}
.testata-ed__grana {
  position: absolute; inset: -50%; z-index: 3; pointer-events: none;
  opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .testata-ed__lastra {
    animation: lastra-dissolvenza 36s linear infinite;
    animation-delay: calc(var(--n) * 6s - 1.5s);
  }
  .testata-ed__lastra:first-child { opacity: 0; }
  .testata-ed__lastra img { animation: lastra-camera 36s linear infinite; animation-delay: calc(var(--n) * 6s - 1.5s); }
  .testata-ed__lastra:nth-child(even) img { animation-name: lastra-camera-2; }
  .testata-ed__grana { animation: grana 0.9s steps(4) infinite; }
}
@keyframes lastra-dissolvenza {
  0% { opacity: 0; } 4.2% { opacity: 1; } 16.7% { opacity: 1; } 20.9% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes lastra-camera {
  0% { transform: scale(1.04) translate3d(0, 0, 0); } 21% { transform: scale(1.16) translate3d(-2%, -1%, 0); } 100% { transform: scale(1.16) translate3d(-2%, -1%, 0); }
}
@keyframes lastra-camera-2 {
  0% { transform: scale(1.16) translate3d(2%, 1%, 0); } 21% { transform: scale(1.04) translate3d(0, 0, 0); } 100% { transform: scale(1.04) translate3d(0, 0, 0); }
}
@keyframes grana {
  0% { transform: translate(0, 0); } 25% { transform: translate(-5%, 3%); } 50% { transform: translate(4%, -4%); } 75% { transform: translate(-3%, -2%); } 100% { transform: translate(0, 0); }
}
.testata-ed .contenitore { position: relative; z-index: 1; }
.testata-ed__titolo { text-shadow: 0 2px 40px rgba(12, 11, 10, 0.35); }
/* Briciole leggibili anche sulle lastre chiare (Calacatta Viola) */
.testata-ed .briciole { color: var(--testo-su-scuro-sec); }
.testata-ed .briciole [aria-current="page"] { color: var(--testo-su-scuro); }

/* ==========================================================================
   Materiali: catalogo a quattro famiglie (29 ottobre 2026)
   ========================================================================== */
.catalogo-intro { padding-bottom: var(--sp-10); }
.catalogo-intro__griglia { display: grid; gap: var(--sp-6); align-items: end; }
@media (min-width: 900px) { .catalogo-intro__griglia { grid-template-columns: 1fr 0.9fr; gap: var(--sp-16); } }

/* Indice fisso sotto l'header: quattro voci, quella in vista sottolineata */
.catalogo-indice {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 1);
  background: rgba(247, 244, 238, 0.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-block: 1px solid var(--bordo-tenue);
}
.catalogo-indice__pista {
  display: flex; gap: var(--sp-8);
  overflow-x: auto; scrollbar-width: none;
}
.catalogo-indice__pista::-webkit-scrollbar { display: none; }
.catalogo-indice__voce {
  position: relative;
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  flex-shrink: 0;
  padding-block: var(--sp-4);
  font-size: var(--testo-sm);
  color: var(--testo-secondario);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-media) var(--ease-standard);
}
.catalogo-indice__voce span { font-size: var(--testo-2xs); letter-spacing: var(--spaziatura-label); color: var(--testo-accento); }
.catalogo-indice__voce::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--caffe-900);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--moto-media) var(--ease-entrata);
}
.catalogo-indice__voce:hover, .catalogo-indice__voce[aria-current] { color: var(--testo-primario); }
.catalogo-indice__voce[aria-current]::after { transform: scaleX(1); }
.catalogo-gruppo { scroll-margin-top: calc(var(--header-h) + 60px); padding-block: var(--sezione-y-sm); }
.catalogo-gruppo + .catalogo-gruppo { border-top: 1px solid var(--bordo-tenue); }
.catalogo-gruppo:last-child { padding-bottom: var(--sezione-y); }

.catalogo-gruppo__testa {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-6);
  align-items: end;
  margin-bottom: var(--sp-10);
}
.catalogo-gruppo__numero {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: clamp(3rem, 2.2rem + 2.6vw, 5rem);
  line-height: 0.85;
  color: var(--bronzo-600);
}
.catalogo-gruppo__titolo { font-size: var(--testo-3xl); }
.catalogo-gruppo__testo { margin-top: var(--sp-2); color: var(--testo-secondario); max-width: 52ch; }
.catalogo-gruppo__conta {
  grid-column: 2;
  font-size: var(--testo-2xs); font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-occhiello); text-transform: uppercase;
  color: var(--testo-accento);
}
@media (min-width: 900px) {
  .catalogo-gruppo__testa { grid-template-columns: auto 1fr auto; }
  .catalogo-gruppo__numero { grid-row: auto; }
  .catalogo-gruppo__conta { grid-column: auto; padding-bottom: var(--sp-2); }
}
.catalogo-gruppo__griglia { row-gap: var(--sp-12); column-gap: var(--sp-6); }

/* Card: il marmo e, al passaggio, la pietra posata */
.card-materiale__media { aspect-ratio: 4 / 3; }
.card-materiale__opera {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--moto-media) var(--ease-morbida), transform var(--moto-lenta) var(--ease-entrata) !important;
}
@media (hover: hover) {
  .card-materiale:hover .card-materiale__opera { opacity: 1; }
}
.card-materiale__varieta {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4); z-index: 1;
  padding: 0.35em 0.75em;
  font-size: var(--testo-2xs); font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-label); text-transform: uppercase;
  color: var(--caffe-900);
  background: rgba(247, 244, 238, 0.88);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.card-materiale__corpo { gap: var(--sp-2); padding-top: var(--sp-5); }
.card-materiale__testo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; min-height: calc(2 * 1.45em);
}
.card-materiale__pie {
  justify-content: space-between; align-items: center;
  padding-top: var(--sp-4); margin-top: var(--sp-3);
  border-top: 1px solid var(--bordo-tenue);
}
.card-materiale__punti { display: inline-flex; }
.card-materiale__punto {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--superficie-base);
  box-shadow: 0 0 0 1px rgba(28, 25, 22, 0.15);
}
.card-materiale__punto + .card-materiale__punto { margin-left: -4px; }
.card-materiale__scopri {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--testo-sm); color: var(--testo-primario);
}
.card-materiale__scopri svg { width: 16px; height: 16px; transition: transform var(--moto-media) var(--ease-entrata); }
.card-materiale:hover .card-materiale__scopri svg { transform: translateX(5px); }
.card-materiale:hover .card-materiale__titolo a { color: var(--testo-brand); }

/* Card finale «fuori catalogo»: occupa due colonne e chiude la griglia */
.card-cta {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-4);
  min-height: 320px;
  padding: clamp(1.75rem, 1rem + 2vw, 3rem);
  background: var(--caffe-900);
  color: var(--testo-su-scuro);
  text-decoration: none;
  position: relative; overflow: hidden;
}
.card-cta::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/img/editoriale/catalogo/lastra-1-1000.webp") center / cover;
  opacity: 0.22;
  transition: transform var(--moto-lenta) var(--ease-entrata), opacity var(--moto-media);
}
.card-cta:hover::before { transform: scale(var(--moto-zoom)); opacity: 0.3; }
.card-cta > * { position: relative; }
.card-cta__occhiello { font-size: var(--testo-2xs); letter-spacing: var(--spaziatura-occhiello); text-transform: uppercase; color: var(--bronzo-400); }
.card-cta__titolo { font-family: var(--font-display); font-size: var(--testo-3xl); line-height: 1.05; }
.card-cta__testo { max-width: 46ch; color: var(--testo-su-scuro-sec); }
.card-cta__btn { align-self: flex-start; margin-top: var(--sp-2); background: var(--azione-accento-bg); color: var(--azione-accento-testo); }
.card-cta__btn svg { width: 16px; height: 16px; }
@media (min-width: 960px) { .card-cta { grid-column: span 2; } }
/* Testata del gruppo: numero sopra su telefono, a sinistra del titolo da tablet */
.catalogo-gruppo__testa { grid-template-columns: 1fr; align-items: start; }
.catalogo-gruppo__numero { grid-row: auto; font-size: clamp(2.5rem, 2rem + 2vw, 4.25rem); }
.catalogo-gruppo__conta { grid-column: auto; }
@media (min-width: 700px) {
  .catalogo-gruppo__testa { grid-template-columns: auto 1fr auto; align-items: end; column-gap: var(--sp-8); }
  .catalogo-gruppo__numero { align-self: start; padding-top: 0.08em; }
  .catalogo-gruppo__conta { padding-bottom: var(--sp-2); text-align: right; }
}

/* ==========================================================================
   Catalogo: card morbide (29 ottobre 2026)
   Le card diventano piccoli «campioni da showroom»: una superficie chiara con
   gli angoli arrotondati, la foto incassata con un raggio più stretto (raggi
   concentrici: interno = esterno − margine), un'ombra calda e diffusa che si
   alza appena al passaggio. Più calma e più tattile degli spigoli vivi, senza
   perdere il rigore editoriale del resto della pagina.
   ========================================================================== */
.catalogo {
  --card-raggio: 22px;
  --card-margine: 10px;
}
.catalogo .card-materiale {
  padding: var(--card-margine);
  background: #FCFAF6;
  border-radius: var(--card-raggio);
  box-shadow:
    0 1px 2px rgba(60, 45, 30, 0.04),
    0 10px 30px -12px rgba(60, 45, 30, 0.10);
  transition: transform var(--moto-media) var(--ease-entrata), box-shadow var(--moto-media) var(--ease-entrata);
}
.catalogo .card-materiale:has(:focus-visible) { outline-offset: 4px; border-radius: var(--card-raggio); }
.catalogo .card-materiale__media {
  border-radius: calc(var(--card-raggio) - var(--card-margine));
  isolation: isolate;              /* Safari: il raggio resta anche durante lo zoom */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.catalogo .card-materiale__corpo { padding: var(--sp-5) var(--sp-3) var(--sp-2); }
.catalogo .card-materiale__pie { border-top-color: rgba(60, 45, 30, 0.08); }
.catalogo .card-materiale__varieta {
  left: var(--sp-3); bottom: var(--sp-3);
  border-radius: var(--raggio-pill);
  padding: 0.45em 0.9em;
  box-shadow: 0 2px 10px rgba(28, 25, 22, 0.12);
}
.catalogo .card-materiale__punto { border-color: #FCFAF6; }
.catalogo .card-materiale__scopri {
  padding: 0.5em 0.6em 0.5em 1em;
  margin-right: calc(var(--sp-1) * -1);
  border-radius: var(--raggio-pill);
  transition: background-color var(--moto-media) var(--ease-standard), color var(--moto-media) var(--ease-standard);
}
@media (hover: hover) {
  .catalogo .card-materiale:hover {
    transform: translateY(-6px);
    box-shadow:
      0 2px 4px rgba(60, 45, 30, 0.05),
      0 28px 50px -18px rgba(60, 45, 30, 0.22);
  }
  .catalogo .card-materiale:hover .card-materiale__scopri { background: var(--caffe-900); color: var(--pietra-025); }
  .catalogo .card-materiale:hover .card-materiale__titolo a { color: inherit; }
}
.catalogo .catalogo-gruppo__griglia { row-gap: var(--sp-8); column-gap: var(--sp-6); }

/* Card «fuori catalogo» con la stessa forma */
.catalogo .card-cta { border-radius: var(--card-raggio); isolation: isolate; }
.catalogo .card-cta__btn { border-radius: var(--raggio-pill); }

/* Indice: voce attiva come pillola morbida, coerente con le card */
.catalogo-indice__pista { gap: var(--sp-2); padding-block: var(--sp-2); }
.catalogo-indice__voce { padding: 0.55em 1.1em; border-radius: var(--raggio-pill); transition: background-color var(--moto-media) var(--ease-standard), color var(--moto-media) var(--ease-standard); }
.catalogo-indice__voce::after { display: none; }
.catalogo-indice__voce:hover { background: var(--superficie-alt); }
.catalogo-indice__voce[aria-current] { background: var(--caffe-900); color: var(--pietra-025); }
.catalogo-indice__voce[aria-current] span { color: var(--bronzo-400); }

/* Variante senza superficie bianca (29 ottobre 2026): la card torna sul fondo
   della pagina, la morbidezza la porta solo la foto arrotondata. Ombra e
   sollevamento passano dalla card alla foto. */
.catalogo .card-materiale {
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.catalogo .card-materiale__media {
  border-radius: 18px;
  box-shadow: 0 10px 28px -14px rgba(60, 45, 30, 0.22);
  transition: transform var(--moto-media) var(--ease-entrata), box-shadow var(--moto-media) var(--ease-entrata);
}
.catalogo .card-materiale__corpo { padding: var(--sp-5) var(--sp-1) 0; }
.catalogo .card-materiale__punto { border-color: var(--superficie-base); }
@media (hover: hover) {
  .catalogo .card-materiale:hover { transform: none; box-shadow: none; }
  .catalogo .card-materiale:hover .card-materiale__media {
    transform: translateY(-6px);
    box-shadow: 0 30px 50px -22px rgba(60, 45, 30, 0.35);
  }
}
.catalogo .catalogo-gruppo__griglia { row-gap: var(--sp-12); }

/* ==========================================================================
   Catalogo, versione essenziale (29 ottobre 2026)
   Foto verticale 4:5 come una lastra in piedi; nella card solo nome, una
   riga di testo e la riga «categoria · origine · varietà». Il link «Scopri»
   compare al passaggio del mouse; su touch resta visibile. Su telefono la
   foto in opera entra da sola quando la card è al centro dello schermo.
   La versione precedente è in foto-sorgenti/archivio-sezioni/catalogo-card-v1/.
   ========================================================================== */
.catalogo .card-materiale__media { aspect-ratio: 4 / 5; }
.catalogo .card-materiale__varieta {
  position: static; padding: 0; background: none; box-shadow: none; border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--testo-accento); font: inherit; letter-spacing: inherit;
}
.catalogo .card-materiale__corpo { gap: var(--sp-1); padding-top: var(--sp-4); }
.catalogo .card-materiale__titolo { margin-top: var(--sp-1); }
.catalogo .card-materiale__testo { -webkit-line-clamp: 1; min-height: 0; }
.catalogo .card-materiale__pie { border-top: 0; margin-top: 0; padding-top: var(--sp-3); justify-content: flex-start; }
.catalogo .card-materiale__scopri { margin-left: calc(var(--sp-3) * -1); }
@media (hover: hover) {
  .catalogo .card-materiale__scopri { opacity: 0; transform: translateY(6px); transition: opacity var(--moto-media) var(--ease-entrata), transform var(--moto-media) var(--ease-entrata), background-color var(--moto-media), color var(--moto-media); }
  .catalogo .card-materiale:hover .card-materiale__scopri,
  .catalogo .card-materiale:has(:focus-visible) .card-materiale__scopri { opacity: 1; transform: none; }
}
/* Telefono e tablet: la foto in opera entra quando la card è al centro */
.catalogo .card-materiale.in-opera .card-materiale__opera { opacity: 1; }

/* ==========================================================================
   Movimento automatico: pausa e arresto fuori schermo (29 ottobre 2026)
   ========================================================================== */
[data-in-pausa], [data-in-pausa] *, [data-in-pausa] *::before, [data-in-pausa] *::after,
[data-fuori-schermo], [data-fuori-schermo] *, [data-fuori-schermo] *::before, [data-fuori-schermo] *::after {
  animation-play-state: paused !important;
}
.pausa-moto {
  position: absolute;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tocco-min); height: var(--tocco-min);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(18, 16, 14, 0.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--testo-su-scuro);
  cursor: pointer;
  transition: background-color var(--moto-rapida) var(--curva-entrata), border-color var(--moto-rapida) var(--curva-entrata);
}
.pausa-moto:hover { background: rgba(247, 244, 238, 0.18); border-color: rgba(255, 255, 255, 0.45); }
.pausa-moto svg { width: 18px; height: 18px; }
.pausa-moto .pausa-moto__play { display: none; }
.pausa-moto[aria-pressed="true"] .pausa-moto__pausa { display: none; }
.pausa-moto[aria-pressed="true"] .pausa-moto__play { display: block; }
.pausa-moto:focus-visible { outline: var(--focus-anello-scuro); outline-offset: 3px; }
.pausa-moto--testata { right: var(--gutter); bottom: var(--sp-8); }
/* La fascia ha i bordi sfumati da una maschera: il pulsante sta fuori, nella cornice */
.fascia-cornice { position: relative; }
.pausa-moto--fascia {
  right: var(--sp-3); top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  background: var(--caffe-900);
}
.pausa-moto--fascia::after { content: ""; position: absolute; inset: -4px; }  /* area di tocco 44 px */
@media (prefers-reduced-motion: reduce) { .pausa-moto { display: none; } }

/* ==========================================================================
   Transizioni fra pagine (29 ottobre 2026)
   Navigazione fra pagine dello stesso sito con le View Transitions native:
   la pagina sfuma con continuità invece di «saltare». Dal catalogo alla
   scheda, la foto della card si espande nella testata e il nome vola nel
   titolo (stessi view-transition-name: pietra-<slug>, nome-<slug>).
   Dove il browser non le supporta la navigazione resta quella normale.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root) { animation: vt-esce var(--moto-media) var(--curva-uscita) both; }
::view-transition-new(root) { animation: vt-entra var(--moto-media) var(--curva-entrata) both; }
@keyframes vt-esce { to { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; transform: translateY(12px); } }
::view-transition-group(*) { animation-duration: 700ms; animation-timing-function: var(--curva-entrata); }
::view-transition-old(*):not(:root), ::view-transition-new(*):not(:root) { height: 100%; object-fit: cover; }
/* L'header resta fermo: non deve sfumare a ogni cambio pagina */
.header { view-transition-name: header; }
::view-transition-group(header) { animation: none; }
::view-transition-old(header) { display: none; }
::view-transition-new(header) { animation: none; }

/* Titoli svelati riga per riga (vedi cinetica.js). Il margine negativo
   compensa il padding che lascia spazio a discendenti e corsivi. */
.titolo-svelato .parola {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.08em 0.14em 0;
  margin: 0 -0.08em -0.14em 0;
}
.titolo-svelato .parola > span {
  display: inline-block;
  transform: translateY(108%);
  transition: transform var(--moto-lenta) var(--curva-entrata);
  transition-delay: calc(var(--riga, 0) * 110ms);
}
.titolo-svelato[data-svelato="true"] .parola > span { transform: none; }

/* ==========================================================================
   Pietre rustiche, versione a pannello (30 ottobre 2026)
   Originale in foto-sorgenti/archivio-sezioni/rustiche-v1/.
   ========================================================================== */

/* Testata a scene: le quattro rese in opera in dissolvenza */
.testata.testata--scene:has(.testata__media img) { min-height: min(88vh, 860px); }
.testata--scene .testata__media { overflow: hidden; }
.testata--scene .testata__media::after { z-index: 2; }
.testata--scene .testata__media picture.testata-ed__lastra { position: absolute; inset: 0; }
.testata--scene .testata-ed__lastra img { width: 100%; height: 100%; object-fit: cover; }

/* L'indice resta fisso solo dentro la zona dei prodotti */
.zona-prodotti { position: relative; }
.catalogo--rustiche .catalogo-gruppo:first-child { padding-top: var(--sezione-y-sm); }

/* La scheda completa: con JS sta nel pannello, senza JS sotto la card */
.schede-a-pannello .rustica-card .rustica__scheda { display: none; }
.rustica-card .rustica__scheda { margin-top: var(--sp-6); }
.rustica-card .card-materiale__media { cursor: pointer; }

/* Card «campione»: riempie i posti vuoti dell'ultima riga */
.card-campione { min-height: 280px; }
@media (min-width: 960px) { .catalogo .card-campione { grid-column: span var(--colonne, 1); } }
.card-campione::before { background-image: url("/assets/img/rustiche/posa-opera-incerta-burattata-23.webp"); }

/* ---------------------------------------------------------- pannello --- */
.pannello-scheda {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(640px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--superficie-base);
  color: var(--testo-primario);
  box-shadow: -30px 0 80px rgba(28, 25, 22, 0.25);
  overflow: hidden;
}
.pannello-scheda::backdrop {
  background: rgba(18, 16, 14, 0.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.pannello-scheda[open] { display: flex; flex-direction: column; }
@media (prefers-reduced-motion: no-preference) {
  .pannello-scheda[open] { animation: pannello-entra var(--moto-media) var(--curva-entrata); }
  .pannello-scheda[open]::backdrop { animation: velo-entra var(--moto-media) var(--curva-entrata); }
}
@keyframes pannello-entra { from { transform: translateX(40px); opacity: 0; } }
@keyframes velo-entra { from { opacity: 0; } }
.pannello-aperto body { overflow: hidden; }

.pannello-scheda__barra {
  position: absolute; top: 0; right: 0; z-index: 3;
  padding: var(--sp-4);
}
.pannello-scheda__chiudi {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tocco-min); height: var(--tocco-min);
  border: 0; border-radius: 50%;
  background: rgba(247, 244, 238, 0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--testo-primario);
  box-shadow: 0 4px 16px rgba(28, 25, 22, 0.18);
  cursor: pointer;
  transition: background-color var(--moto-rapida) var(--curva-entrata), transform var(--moto-rapida) var(--curva-entrata);
}
.pannello-scheda__chiudi:hover { background: var(--pietra-000); transform: rotate(90deg); }
.pannello-scheda__chiudi svg { width: 20px; height: 20px; }
.pannello-scheda__corpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4) var(--sp-4) var(--sp-12); }

/* Galleria nel pannello */
.pannello-scheda .rustica__galleria { display: grid; gap: var(--sp-3); }
.pannello-scheda .rustica__principale {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 62vh;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: var(--superficie-incassata);
  touch-action: pan-y;
}
.pannello-scheda .rustica__principale img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--moto-rapida) var(--curva-uscita), transform var(--moto-media) var(--curva-entrata); }
.pannello-scheda .rustica__principale img[data-orizzontale="true"] { object-fit: contain; background: var(--superficie-incassata); }
.pannello-scheda .rustica__principale.cambia img { opacity: 0; transform: scale(1.02); }
.rustica__contatore {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  padding: 0.35em 0.8em;
  border-radius: var(--raggio-pill);
  font-size: var(--testo-xs);
  font-variant-numeric: tabular-nums;
  color: var(--caffe-900);
  background: rgba(247, 244, 238, 0.88);
}
.pannello-scheda .rustica__miniature { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pannello-scheda .rustica__mini { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; transition: border-color var(--moto-rapida) var(--curva-entrata), opacity var(--moto-rapida); opacity: 0.7; }
.pannello-scheda .rustica__mini:hover { opacity: 1; }
.pannello-scheda .rustica__mini[aria-current="true"] { border-color: var(--caffe-900); opacity: 1; }
.pannello-scheda .rustica__targhetta { border-radius: 0 0 8px 8px; }
.pannello-scheda .rustica__corpo { padding: var(--sp-6) var(--sp-2) 0; }
.pannello-scheda .rustica__nome { font-size: var(--testo-3xl); margin-top: var(--sp-2); }
.pannello-scheda .rustica__testo { margin-top: var(--sp-4); }
.rustica__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); margin-top: var(--sp-8); }
.rustica__azioni .btn svg { width: 16px; height: 16px; }

/* Transizione card → pannello: la foto si espande */
::view-transition-group(scheda-attiva) { animation-duration: 600ms; animation-timing-function: var(--curva-entrata); }
::view-transition-old(scheda-attiva), ::view-transition-new(scheda-attiva) { object-fit: cover; height: 100%; }

/* ---- Pietre rustiche: scene in opera (30 ottobre 2026) ---------------- */
/* Banda che apre ogni famiglia: la pietra posata prima dei prodotti */
.banda-scena {
  position: relative;
  display: block;
  margin: 0 0 var(--sp-10);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: zoom-in;
}
@media (min-width: 900px) { .banda-scena { aspect-ratio: 21 / 8; margin-bottom: var(--sp-12); } }
.catalogo--rustiche .catalogo-gruppo { padding-top: 0; }
.catalogo--rustiche .catalogo-gruppo:first-child { padding-top: 0; }
.catalogo--rustiche .catalogo-gruppo + .catalogo-gruppo { border-top: 0; margin-top: var(--sezione-y-sm); }
.banda-scena picture, .opera__apri picture { display: block; width: 100%; height: 100%; }
.banda-scena img, .opera__apri img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--moto-lenta) var(--curva-entrata);
}
.banda-scena:hover img, .opera__apri:hover img { transform: scale(var(--moto-zoom)); }
.opera__apri { position: relative; display: block; overflow: hidden; border-radius: 14px; cursor: zoom-in; }
.scena__icona {
  position: absolute; right: var(--sp-4); bottom: var(--sp-4);
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(247, 244, 238, 0.88);
  color: var(--caffe-900);
  opacity: 0; transform: scale(0.85);
  transition: opacity var(--moto-media) var(--curva-entrata), transform var(--moto-media) var(--curva-entrata);
}
.scena__icona svg { width: 18px; height: 18px; }
.banda-scena:hover .scena__icona, .opera__apri:hover .scena__icona,
.banda-scena:focus-visible .scena__icona, .opera__apri:focus-visible .scena__icona { opacity: 1; transform: none; }
@media (hover: none) { .scena__icona { opacity: 1; transform: none; } }

/* Visore a schermo intero */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(14, 12, 10, 0.96);
  color: var(--testo-su-scuro);
}
.lightbox::backdrop { background: rgba(14, 12, 10, 0.9); }
.lightbox[open] { display: grid; place-items: center; }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open]::backdrop { animation: velo-entra var(--moto-media) var(--curva-entrata); }
}
.lightbox__figura {
  margin: 0; width: 100%; height: 100%;
  display: grid; grid-template-rows: 1fr auto; place-items: center;
  padding: clamp(3.5rem, 2rem + 4vw, 5.5rem) clamp(1rem, 4vw, 6rem) var(--sp-6);
  gap: var(--sp-4);
}
.lightbox__foto {
  max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0;
  object-fit: contain; border-radius: 6px;
  transition: opacity var(--moto-rapida) var(--curva-uscita);
  user-select: none; -webkit-user-drag: none;
}
.lightbox__foto.cambia { opacity: 0; }
.lightbox__didascalia {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--sp-2) var(--sp-4);
  text-align: center; font-size: var(--testo-sm); color: var(--testo-su-scuro);
}
.lightbox__didascalia small { color: var(--testo-su-scuro-sec); font-size: var(--testo-xs); }
.lightbox__didascalia b { font-weight: var(--peso-normale); color: var(--bronzo-400); font-variant-numeric: tabular-nums; }
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--testo-su-scuro); cursor: pointer;
  transition: background-color var(--moto-rapida) var(--curva-entrata), border-color var(--moto-rapida) var(--curva-entrata);
}
.lightbox__btn:hover { background: var(--pietra-025); color: var(--caffe-900); border-color: var(--pietra-025); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__chiudi { top: var(--sp-4); right: var(--sp-4); }
.lightbox__prec { left: var(--sp-4); top: 50%; transform: translateY(-50%); }
.lightbox__succ { right: var(--sp-4); top: 50%; transform: translateY(-50%); }
@media (max-width: 699px) { .lightbox__prec, .lightbox__succ { top: auto; bottom: var(--sp-4); transform: none; } }
::view-transition-group(scena-attiva) { animation-duration: 650ms; animation-timing-function: var(--curva-entrata); }
::view-transition-old(scena-attiva), ::view-transition-new(scena-attiva) { height: 100%; object-fit: cover; }
/* La foto non deve mai spingere la didascalia fuori dallo schermo */
.lightbox__figura { grid-template-rows: minmax(0, 1fr) auto; }
.lightbox__foto { max-height: 100%; height: 100%; width: auto; }
.lightbox__figura { position: absolute; inset: 0; height: auto; }
.lightbox__foto { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 0; }

/* ---- Pietre rustiche: glossario integrato (30 ottobre 2026) ----------- */
.termine {
  text-decoration: underline dotted;
  text-decoration-color: var(--bronzo-600);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  cursor: help;
  border-radius: 3px;
  transition: background-color var(--moto-rapida) var(--curva-entrata), color var(--moto-rapida) var(--curva-entrata);
}
.termine:hover, .termine:focus-visible { background: var(--bronzo-100); color: var(--testo-primario); }
.fumetto-termine {
  position: fixed;
  z-index: 1000;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  background: var(--caffe-900);
  color: var(--testo-su-scuro-sec);
  font-size: var(--testo-sm);
  line-height: 1.5;
  box-shadow: 0 14px 40px rgba(28, 25, 22, 0.28);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--moto-rapida) var(--curva-entrata), transform var(--moto-rapida) var(--curva-entrata);
}
.fumetto-termine[data-sotto="true"] { transform: translateY(-4px); }
.fumetto-termine.visibile { opacity: 1; transform: none; }
.fumetto-termine b {
  display: block;
  margin-bottom: var(--sp-1);
  font-family: var(--font-display);
  font-size: var(--testo-lg);
  font-weight: var(--peso-medio);
  color: var(--testo-su-scuro);
}

/* Glossario in alto più compatto: un'introduzione, non un capitolo */
.sezione-glossario { padding-block: var(--sezione-y-sm); }
.sezione-glossario .glossario { gap: 0; border-top: 1px solid var(--bordo-default); }
.sezione-glossario .glossario__voce { padding: var(--sp-4) 0; border-bottom: 1px solid var(--bordo-tenue); }
.sezione-glossario .glossario dt { font-size: var(--testo-lg); }
.sezione-glossario .glossario dd { font-size: var(--testo-sm); }
@media (min-width: 700px) {
  .sezione-glossario .glossario { column-gap: var(--sp-8); }
}
@media (min-width: 1100px) {
  .sezione-glossario .glossario { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Prestazioni (30 ottobre 2026) ------------------------------------- */
/* Le famiglie fuori schermo non si calcolano finché non servono: il browser
   salta layout e disegno di decine di card. contain-intrinsic-size riserva
   uno spazio plausibile, così la barra di scorrimento non salta. */
.catalogo-gruppo { content-visibility: auto; contain-intrinsic-size: auto 1600px; }
.sezione-opera { content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.termine-esempio { text-decoration: underline dotted; text-decoration-color: var(--bronzo-600); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }

/* ==========================================================================
   Pagina prodotto delle pietre rustiche (30 ottobre 2026)
   Galleria grande a sinistra, scheda fissa a destra mentre si scorre;
   su telefono la galleria sopra, a tutta larghezza, e la scheda sotto.
   ========================================================================== */
.prodotto-r { padding-bottom: var(--sezione-y-sm); }
.prodotto-r__griglia { display: grid; }
.prodotto-r__galleria { display: grid; gap: var(--sp-3); }
.prodotto-r__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--superficie-incassata);
  touch-action: pan-y;
}
.prodotto-r__foto picture { display: block; width: 100%; height: 100%; }
.prodotto-r__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--moto-rapida) var(--curva-uscita), transform var(--moto-media) var(--curva-entrata);
}
.prodotto-r__foto img[data-orizzontale="true"] { object-fit: contain; }
.prodotto-r__foto.cambia img { opacity: 0; transform: scale(1.02); }
.prodotto-r__miniature { display: flex; gap: var(--sp-2); overflow-x: auto; padding: 0 var(--gutter); scrollbar-width: none; }
.prodotto-r .rustica__mini {
  flex-shrink: 0; width: 64px; height: 64px;
  border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; opacity: 0.7;
  transition: border-color var(--moto-rapida) var(--curva-entrata), opacity var(--moto-rapida) var(--curva-entrata);
}
.prodotto-r .rustica__mini:hover { opacity: 1; }
.prodotto-r .rustica__mini[aria-current="true"] { border-color: var(--caffe-900); opacity: 1; }
.prodotto-r .rustica__mini img { width: 100%; height: 100%; object-fit: cover; }

.prodotto-r__scheda-interno { padding: var(--sp-6) var(--gutter) 0; }
.prodotto-r__scheda .briciole { padding-top: 0; margin-bottom: var(--sp-6); }
.prodotto-r__nome { font-size: var(--testo-4xl); line-height: 1.02; }
.prodotto-r__materiale {
  margin-top: var(--sp-3);
  font-size: var(--testo-2xs); font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-occhiello); text-transform: uppercase;
  color: var(--testo-accento);
}
.prodotto-r__testo { margin-top: var(--sp-6); font-size: var(--testo-lg); line-height: 1.65; color: var(--testo-secondario); }
.prodotto-r__dati { margin-top: var(--sp-8); }
.prodotto-r .rustica__impieghi { margin-top: var(--sp-5); }
.prodotto-r__azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-8); margin-top: var(--sp-8); }
.prodotto-r__azioni .btn svg { width: 16px; height: 16px; }
.prodotto-r__nota { margin-top: var(--sp-5); font-size: var(--testo-sm); color: var(--testo-terziario); max-width: 52ch; }

/* Sfoglia la gamma: prodotto precedente e successivo */
.prodotto-r__sfoglia {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  margin-top: var(--sp-10); padding-top: var(--sp-6);
  border-top: 1px solid var(--bordo-default);
}
.prodotto-r__nav {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  text-decoration: none; color: var(--testo-primario);
  font-family: var(--font-display); font-size: var(--testo-lg); line-height: 1.15;
  transition: background-color var(--moto-rapida) var(--curva-entrata);
}
.prodotto-r__nav small {
  display: block; margin-bottom: var(--sp-1);
  font-family: var(--font-testo); font-size: var(--testo-2xs);
  letter-spacing: var(--spaziatura-occhiello); text-transform: uppercase;
  color: var(--testo-accento);
}
.prodotto-r__nav svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform var(--moto-media) var(--curva-entrata); }
.prodotto-r__nav--succ { justify-content: flex-end; text-align: right; }
.prodotto-r__nav:hover { background: var(--superficie-alt); }
.prodotto-r__nav--succ:hover svg { transform: translateX(4px); }
.prodotto-r__nav--prec:hover svg { transform: translateX(-4px); }

@media (min-width: 960px) {
  .prodotto-r__griglia {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - var(--header-h));
  }
  .prodotto-r__galleria {
    position: sticky; top: var(--header-h);
    height: calc(100vh - var(--header-h));
    grid-template-columns: 84px minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-4) 0 var(--sp-4) var(--gutter);
  }
  .prodotto-r__foto { order: 2; aspect-ratio: auto; height: 100%; border-radius: 20px; }
  .prodotto-r__miniature { order: 1; flex-direction: column; overflow-y: auto; overflow-x: hidden; padding: 0; }
  .prodotto-r .rustica__mini { width: 84px; height: 84px; }
  .prodotto-r__scheda-interno { padding: var(--sp-12) clamp(2rem, 1rem + 3vw, 5rem) var(--sp-12); max-width: 40rem; }
}
.pagina-prodotto-r .rustica__contatore {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4);
}

/* ==========================================================================
   Lavorazioni: selettore e famiglie di finiture (31 ottobre 2026)
   Originale in foto-sorgenti/archivio-sezioni/lavorazioni-v1/.
   ========================================================================== */
.selettore-finiture {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sezione-y-sm);
  padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-radius: 22px;
  background: var(--superficie-alt);
}
@media (min-width: 960px) {
  .selettore-finiture { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; column-gap: var(--sp-10); }
  .selettore__esito { grid-column: 1 / -1; }
}
.selettore__h { font-size: var(--testo-3xl); }
.selettore__testa p { margin-top: var(--sp-2); color: var(--testo-secondario); }
.selettore__titolo {
  margin-bottom: var(--sp-3);
  font-size: var(--testo-2xs); font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-occhiello); text-transform: uppercase;
  color: var(--testo-accento);
}
.selettore__scelte { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
button.scelta {
  padding: 0.6em 1.15em;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio-pill);
  background: transparent;
  color: var(--testo-primario);
  font-size: var(--testo-sm);
  cursor: pointer;
  transition: background-color var(--moto-rapida) var(--curva-entrata), color var(--moto-rapida) var(--curva-entrata), border-color var(--moto-rapida) var(--curva-entrata);
}
button.scelta:hover { border-color: var(--caffe-900); }
button.scelta[aria-pressed="true"] { background: var(--caffe-900); border-color: var(--caffe-900); color: var(--pietra-025); }
.selettore__esito { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-5); border-top: 1px solid var(--bordo-default); }
.selettore__esito p { font-family: var(--font-display); font-size: var(--testo-xl); max-width: none; }
.selettore__azzera { background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--testo-sm); }

.famiglia-finiture + .famiglia-finiture { margin-top: var(--sezione-y-sm); }
.famiglia-finiture__griglia { row-gap: var(--sp-10); }
.famiglia-finiture[data-vuota] .catalogo-gruppo__testa { opacity: 0.4; transition: opacity var(--moto-media) var(--curva-entrata); }
.famiglia-finiture .catalogo-gruppo__testa { transition: opacity var(--moto-media) var(--curva-entrata); }

/* Card asciutta */
.card-finitura .card-lavorazione__media { border-radius: 16px; }
.card-finitura { transition: opacity var(--moto-media) var(--curva-entrata), filter var(--moto-media) var(--curva-entrata); }
.card-finitura[data-attenuata] { opacity: 0.32; filter: saturate(0.4); }
.card-finitura__breve { font-size: var(--testo-base); color: var(--testo-secondario); line-height: 1.55; }
.card-finitura__dati { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--bordo-tenue); }
.antiscivolo { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--testo-xs); color: var(--testo-secondario); }
.antiscivolo b { font-weight: var(--peso-medio); color: var(--testo-primario); }
.antiscivolo__tacche { display: inline-flex; gap: 3px; }
.antiscivolo__tacche i {
  display: block; width: 14px; height: 6px; border-radius: 3px;
  background: var(--bordo-default);
  position: relative; overflow: hidden;
}
.antiscivolo__tacche i.piena::after {
  content: ""; position: absolute; inset: 0;
  background: var(--bronzo-600);
  transform-origin: left;
  transform: scaleX(1);
}
/* Le tacche si riempiono quando la card entra nello schermo */
@media (prefers-reduced-motion: no-preference) {
  .card-finitura.rivela:not([data-visibile="true"]) .antiscivolo__tacche i.piena::after { transform: scaleX(0); }
  .antiscivolo__tacche i.piena::after {
    transition: transform var(--moto-media) var(--curva-entrata);
    transition-delay: calc(300ms + var(--k) * 120ms);
  }
}
.card-finitura__usi { display: inline-flex; gap: var(--sp-3); }
.uso-finitura { display: inline-flex; align-items: center; gap: 5px; font-size: var(--testo-xs); color: var(--testo-secondario); }
.uso-finitura svg { width: 16px; height: 16px; color: var(--testo-accento); }
.card-finitura__dettagli summary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  list-style: none; cursor: pointer;
  font-size: var(--testo-sm); color: var(--testo-primario);
  padding-bottom: 2px; border-bottom: 1px solid currentColor;
}
.card-finitura__dettagli summary::-webkit-details-marker { display: none; }
.card-finitura__dettagli summary::after { content: "+"; font-size: 1.1em; line-height: 1; transition: transform var(--moto-rapida) var(--curva-entrata); }
.card-finitura__dettagli[open] summary::after { transform: rotate(45deg); }
.card-finitura__dettagli p { margin-top: var(--sp-3); font-size: var(--testo-sm); color: var(--testo-secondario); line-height: var(--interlinea-corpo); }
.selettore__azzera[hidden], [data-selettore-finiture][hidden] { display: none !important; }
/* Una famiglia senza finiture adatte si chiude: le adatte salgono subito
   sotto il selettore invece di restare in fondo alla pagina. */
.famiglia-finiture[data-vuota] { display: none; }
.famiglia-finiture:not([data-vuota]) ~ .famiglia-finiture:not([data-vuota]) { margin-top: var(--sezione-y-sm); }
.selettore-finiture + .famiglia-finiture[data-vuota] + .famiglia-finiture,
.famiglia-finiture[data-vuota] + .famiglia-finiture { margin-top: 0; }

/* ==========================================================================
   Lavorazioni, secondo blocco (31 ottobre 2026): luce radente, testata a
   scene, confronto prima/dopo. Stato precedente in archivio-sezioni/lavorazioni-v2/.
   ========================================================================== */
/* Luce radente: una lama di luce calda che attraversa la texture */
.card-finitura .card-lavorazione__media { position: relative; }
.card-finitura .card-lavorazione__media::after,
.luce-radente {
  content: "";
  position: absolute; inset: -20% -60%;
  background: linear-gradient(105deg,
    rgba(255, 244, 220, 0) 35%,
    rgba(255, 244, 220, 0.38) 48%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 244, 220, 0.38) 52%,
    rgba(255, 244, 220, 0) 65%);
  mix-blend-mode: soft-light;
  transform: translateX(-60%);
  opacity: 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .card-finitura:hover .card-lavorazione__media::after,
  .card-finitura.in-luce .card-lavorazione__media::after {
    animation: lama-luce 1.4s var(--curva-entrata) both;
  }
  .card-finitura:hover .card-lavorazione__media img { filter: contrast(1.06) brightness(1.02); }
}
.card-finitura .card-lavorazione__media img { transition: transform var(--moto-lenta) var(--curva-entrata), filter var(--moto-media) var(--curva-entrata); }
@keyframes lama-luce {
  0% { transform: translateX(-60%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(60%); opacity: 0; }
}

/* Testata: le scene di finiture con una luce che le attraversa lentamente */
.testata--finiture .luce-radente { z-index: 1; inset: -10% -40%; }
@media (prefers-reduced-motion: no-preference) {
  .testata--finiture .luce-radente { animation: lama-luce-lenta 12s ease-in-out infinite; }
}
@keyframes lama-luce-lenta {
  0% { transform: translateX(-55%); opacity: 0; }
  20% { opacity: 0.9; }
  80% { opacity: 0.9; }
  100% { transform: translateX(55%); opacity: 0; }
}
.testata.testata--finiture:has(.testata__media img) { min-height: min(80vh, 760px); }

/* Confronto prima/dopo */
.confronto { display: grid; gap: var(--sp-5); }
.confronto__schede { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.confronto__schede .scelta[aria-selected="true"] { background: var(--caffe-900); border-color: var(--caffe-900); color: var(--pietra-025); }
.confronto__quadro {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  background: var(--superficie-incassata);
  touch-action: pan-y;
}
.confronto__quadro img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--moto-rapida) var(--curva-uscita); }
.confronto.cambia .confronto__quadro img { opacity: 0; }
.confronto__prima { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.confronto__quadro::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px;
  background: var(--pietra-025); box-shadow: 0 0 12px rgba(0, 0, 0, 0.25); pointer-events: none;
}
.confronto__maniglia {
  position: absolute; top: 50%; left: var(--pos); z-index: 2;
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--pietra-025); color: var(--caffe-900);
  box-shadow: 0 6px 22px rgba(28, 25, 22, 0.28);
  pointer-events: none;
  transition: transform var(--moto-rapida) var(--curva-entrata);
}
.confronto__maniglia svg { width: 22px; height: 22px; }
.confronto__quadro:hover .confronto__maniglia, .confronto__cursore:focus-visible ~ .confronto__maniglia { transform: scale(1.08); }
.confronto__cursore {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
}
.confronto__quadro:has(.confronto__cursore:focus-visible) { outline: var(--focus-anello); outline-offset: 4px; }
.confronto__etichetta {
  position: absolute; top: var(--sp-4); z-index: 1;
  padding: 0.4em 0.9em; border-radius: var(--raggio-pill);
  font-size: var(--testo-2xs); font-weight: var(--peso-medio);
  letter-spacing: var(--spaziatura-label); text-transform: uppercase;
  color: var(--caffe-900); background: rgba(247, 244, 238, 0.88);
}
.confronto__etichetta--sx { left: var(--sp-4); }
.confronto__etichetta--dx { right: var(--sp-4); }
.confronto__nota { margin-top: 0; }
.confronto__quadro { max-height: min(68vh, 640px); width: 100%; }

/* Lavorazioni: «Continua a esplorare» (31 ottobre 2026) */
.esplora__griglia { display: grid; gap: var(--sp-5); }
@media (min-width: 800px) { .esplora__griglia { grid-template-columns: 1fr 1fr; } }
.esplora__voce {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3; border-radius: 22px;
  color: var(--testo-su-scuro); text-decoration: none;
  isolation: isolate;
}
.esplora__voce picture, .esplora__voce img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.esplora__voce img { transition: transform var(--moto-lenta) var(--curva-entrata); }
.esplora__voce::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Velatura più piena (2 nov 2026): con la nuova foto chiara del patio il testo
     bianco si perdeva, soprattutto sui telefoni dove occupa metà della card. */
  background: linear-gradient(0deg, rgba(18, 16, 14, 0.9) 0%, rgba(18, 16, 14, 0.62) 45%, rgba(18, 16, 14, 0.18) 80%, rgba(18, 16, 14, 0.05) 100%);
}
.esplora__testo { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; gap: var(--sp-2); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); }
.esplora__testo b { font-family: var(--font-display); font-weight: var(--peso-medio); font-size: var(--testo-3xl); line-height: 1.05; }
.esplora__testo span { color: var(--testo-su-scuro-sec); max-width: 40ch; }
.esplora__testo i {
  display: grid; place-items: center; width: 46px; height: 46px; margin-top: var(--sp-2);
  border-radius: 50%; background: var(--pietra-025); color: var(--caffe-900);
  transition: transform var(--moto-media) var(--curva-entrata);
}
.esplora__testo i svg { width: 18px; height: 18px; }
.esplora__voce:hover img { transform: scale(var(--moto-zoom)); }
.esplora__voce:hover .esplora__testo i { transform: translateX(6px); }
.esplora__voce:focus-visible { outline: var(--focus-anello); outline-offset: 4px; }
/* Lavorazioni nell'insieme (31 ottobre 2026): il confronto apre la pagina
   («guarda la differenza»), poi la scelta; nota e invito in riga. */
.confronto-sezione .confronto { gap: var(--sp-4); }
.confronto-sezione .confronto > p:last-child { margin-top: var(--sp-2); }
#trova-finitura { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

/* ==========================================================================
   Contatti, revisione del 30 ottobre 2026
   Apertura con promessa di risposta e stato della sede in tempo reale, tre
   canali con copia rapida, mappa disegnata (niente Google, niente cookie).
   Versione precedente in foto-sorgenti/archivio-sezioni/contatti-v1/.
   ========================================================================== */
.sezione--contatti h1 { font-size: var(--testo-5xl); }
.sezione--contatti h1 em { font-style: italic; color: var(--testo-accento); }

.contatti-apertura { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .contatti-apertura { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-16); align-items: end; }
}
.contatti-apertura__testo .sommario { margin: 0; }

/* Stato della sede */
.stato-sede {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--sp-3); row-gap: var(--sp-1);
  margin-top: var(--sp-6);
  font-size: var(--testo-sm); color: var(--testo-secondario);
}
.stato-sede__punto {
  position: relative; flex: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--pietra-400);
  transform: translateY(-1px);
}
.stato-sede__testo strong { color: var(--testo-primario); font-weight: var(--peso-semi); }
.stato-sede__ora { flex-basis: 100%; padding-left: calc(9px + var(--sp-3)); color: var(--testo-terziario); font-size: var(--testo-xs); letter-spacing: 0.02em; }
.stato-sede__ora:empty { display: none; }
.stato-sede[data-aperto="true"] .stato-sede__punto { background: var(--verde-600); }
.stato-sede[data-aperto="true"] .stato-sede__punto::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--verde-600);
  animation: stato-pulsa 2.4s var(--curva-uscita) 4;
}
@keyframes stato-pulsa {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* Canali */
.canali {
  list-style: none; margin: var(--sp-16) 0 0; padding: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--bordo-forte);
}
@media (min-width: 900px) { .canali { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.canale {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--sp-8) 0;
  border-bottom: 1px solid var(--bordo-default);
}
@media (min-width: 900px) {
  .canale { padding: var(--sp-8) var(--sp-8) var(--sp-6); border-bottom: 0; }
  .canale:first-child { padding-left: 0; }
  .canale + .canale { border-left: 1px solid var(--bordo-default); }
}
/* Filetto bronzo che si allunga sopra il canale al passaggio */
.canale::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--bronzo-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--moto-media) var(--curva-entrata);
}
.canale:hover::before, .canale:focus-within::before { transform: scaleX(1); }
.canale__etichetta {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--testo-2xs); font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label); text-transform: uppercase;
  color: var(--testo-accento);
  margin-bottom: var(--sp-4);
}
.canale__etichetta svg { width: 16px; height: 16px; }
.canale__valore {
  font-family: var(--font-display); font-size: var(--testo-2xl);
  font-weight: var(--peso-medio); line-height: 1.15;
  color: var(--testo-primario); text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--moto-rapida) var(--curva-entrata);
}
.canale__valore:hover { color: var(--testo-brand); }
.canale__nota { margin-top: var(--sp-2); font-size: var(--testo-sm); color: var(--testo-terziario); }
.canale__azioni {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6);
  margin-top: auto; padding-top: var(--sp-6);
}

/* Bottone «Copia» */
.copia {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-1);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--testo-xs); font-weight: var(--peso-medio);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--testo-secondario);
  transition: color var(--moto-rapida) var(--curva-entrata);
}
.copia:hover { color: var(--testo-primario); }
.copia svg { width: 16px; height: 16px; flex: none; }
.copia .copia__ok { display: none; }
.copia--fatto { color: var(--testo-successo); }
.copia--fatto:hover { color: var(--testo-successo); }
.copia--fatto svg { display: none; }
.copia--fatto .copia__ok { display: block; animation: copia-spunta var(--moto-media) var(--curva-entrata); }
@keyframes copia-spunta { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Luogo: mappa + indicazioni */
.contatti-luogo { display: grid; gap: var(--sp-12); margin-top: var(--sp-20); }
@media (min-width: 900px) {
  .contatti-luogo { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--sp-16); align-items: start; }
}
.contatti-luogo__dati h2 { font-size: var(--testo-3xl); margin-bottom: var(--sp-8); }
.come-arrivare { display: grid; gap: var(--sp-6); margin-bottom: var(--sp-10); }
.come-arrivare h3 {
  font-family: var(--font-testo); font-size: var(--testo-base); font-weight: var(--peso-semi);
  margin-bottom: var(--sp-1);
}
.come-arrivare p { font-size: var(--testo-sm); color: var(--testo-secondario); }

.mappa-sede { margin: 0; border: 1px solid var(--bordo-default); background: var(--superficie-elevata); }
.mappa-sede__svg { display: block; width: 100%; height: auto; }
.mappa__mare { fill: #E9E4DA; }
.mappa__onda { stroke: rgba(122, 97, 69, 0.07); stroke-width: 1; }
.mappa__terra { fill: var(--pietra-025); stroke: var(--bronzo-600); stroke-width: 1.2; stroke-linejoin: round; }
.mappa__strade path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mappa__ss16 { stroke: var(--pietra-300); stroke-width: 3; }
.mappa__sp { stroke: var(--pietra-200); stroke-width: 1.6; }
.mappa__strada-nome { font: 500 9.5px var(--font-testo); letter-spacing: 0.14em; fill: var(--testo-terziario); text-transform: uppercase; }
.mappa__percorso {
  fill: none; stroke: var(--bronzo-700); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 0.012 0.012;
}
.mappa__citta circle { fill: var(--pietra-500); }
.mappa__citta text { font: 400 12px var(--font-testo); fill: var(--testo-secondario); }
.mappa__citta .mappa__citta--grande { font: 500 15px var(--font-display); fill: var(--testo-primario); letter-spacing: 0.02em; }
.mappa__cave path { fill: var(--bronzo-500); stroke: var(--bronzo-700); stroke-width: 1; }
.mappa__cave text { font: italic 500 14px var(--font-display); fill: var(--bronzo-700); }
.mappa__aeroporto circle { fill: var(--caffe-900); }
.mappa__aeroporto path { fill: var(--pietra-025); }
.mappa__aeroporto text { font: 500 12px var(--font-testo); fill: var(--testo-primario); }
.mappa__mare-nome { font: italic 400 20px var(--font-display); letter-spacing: 0.24em; fill: var(--bronzo-600); }
.mappa__pin-corpo path { fill: var(--caffe-900); }
.mappa__pin-corpo circle { fill: var(--bronzo-400); }
.mappa__alone { fill: rgba(28, 25, 22, 0.22); }
.mappa__eurostone { font: 600 19px var(--font-display); fill: var(--testo-primario); letter-spacing: 0.01em; }
.mappa__eurostone-luogo { font: 500 10px var(--font-testo); letter-spacing: 0.18em; text-transform: uppercase; fill: var(--testo-accento); }
.mappa__scala path { stroke: var(--testo-secondario); stroke-width: 1.2; fill: none; }
.mappa__scala text, .mappa__nord text { font: 500 10px var(--font-testo); letter-spacing: 0.1em; fill: var(--testo-secondario); }
.mappa__nord path { fill: var(--testo-secondario); }
/* Al telefono la mappa è larga ~360px: etichette più grandi, città minori via */
@media (max-width: 599px) {
  .mappa__citta text { font-size: 17px; }
  .mappa__citta .mappa__citta--grande { font-size: 21px; }
  .mappa__citta circle:nth-of-type(n+5):not(:last-of-type),
  .mappa__citta text:nth-of-type(n+5):not(:last-of-type) { display: none; }
  .mappa__cave text, .mappa__aeroporto text { font-size: 18px; }
  .mappa__eurostone { font-size: 25px; }
  .mappa__eurostone-luogo { font-size: 13px; }
  .mappa__mare-nome { font-size: 24px; }
  .mappa__strada-nome { display: none; }
}

.mappa-sede__legenda {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  border-top: 1px solid var(--bordo-default);
  font-size: var(--testo-sm); color: var(--testo-secondario);
}
.mappa-sede__legenda span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mappa-sede__legenda .btn { margin-left: auto; }
@media (max-width: 599px) { .mappa-sede__legenda .btn { margin-left: 0; width: 100%; } }
.mappa-sede__segno { display: inline-block; flex: none; }
.mappa-sede__segno--percorso { width: 22px; height: 0; border-top: 2.5px dotted var(--bronzo-700); }
.mappa-sede__segno--cave { width: 12px; height: 9px; background: var(--bronzo-500); clip-path: polygon(0 100%, 28% 0, 72% 0, 100% 100%); }

/* Ingresso della mappa: il percorso si disegna, il segnaposto cade e
   lascia un alone. Solo se lo script ha marcato la mappa come animata. */
@media (prefers-reduced-motion: no-preference) {
  .mappa-sede[data-animata] .mappa__percorso {
    stroke-dasharray: 1 1; stroke-dashoffset: 1;
  }
  .mappa-sede[data-animata].in-vista .mappa__percorso {
    animation: mappa-traccia 1.8s var(--curva-entrata) 0.5s forwards,
               mappa-tratteggio 0s linear 2.3s forwards;
  }
  .mappa-sede[data-animata] .mappa__pin-corpo,
  .mappa-sede[data-animata] .mappa__eurostone,
  .mappa-sede[data-animata] .mappa__eurostone-luogo { opacity: 0; }
  .mappa__pin-corpo { transform-box: fill-box; transform-origin: 50% 100%; }
  .mappa-sede[data-animata].in-vista .mappa__pin-corpo { animation: mappa-pin 0.9s var(--curva-entrata) 2s forwards; }
  .mappa-sede[data-animata].in-vista .mappa__eurostone,
  .mappa-sede[data-animata].in-vista .mappa__eurostone-luogo { animation: mappa-appare 0.6s var(--curva-entrata) 2.5s forwards; }
  .mappa__alone { transform-box: fill-box; transform-origin: center; }
  .mappa-sede[data-animata] .mappa__alone { opacity: 0; }
  .mappa-sede[data-animata].in-vista .mappa__alone { animation: mappa-alone 1.6s var(--curva-uscita) 2.35s 2 backwards; opacity: 1; }
}
@keyframes mappa-traccia { to { stroke-dashoffset: 0; } }
/* A disegno finito il tratto torna puntinato, come in legenda */
@keyframes mappa-tratteggio { to { stroke-dasharray: 0.012 0.012; stroke-dashoffset: 0; } }
@keyframes mappa-pin {
  0%   { opacity: 0; transform: translateY(-46px) scale(0.9); }
  55%  { opacity: 1; transform: translateY(0) scale(1, 0.92); }
  75%  { transform: translateY(-5px) scale(1); }
  100% { opacity: 1; transform: none; }
}
@keyframes mappa-appare { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
@keyframes mappa-alone {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ==========================================================================
   Contatti — modulo «Scrivici» funzionante (30 ottobre 2026)
   Versione precedente in foto-sorgenti/archivio-sezioni/contatti-v2/.
   ========================================================================== */
.modulo-contatti__coppia { display: grid; gap: 0 var(--sp-6); }
@media (min-width: 700px) { .modulo-contatti__coppia { grid-template-columns: 1fr 1fr; align-items: start; } }

fieldset.campo { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.campo legend { padding: 0; margin-bottom: var(--sp-2); }

/* «Sono un…»: radio vere, vestite da pillole */
.ruoli { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ruolo { position: relative; cursor: pointer; }
.ruolo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ruolo span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 1.15em;
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-pill);
  background: var(--superficie-elevata);
  font-size: var(--testo-sm); color: var(--testo-primario);
  transition: background-color var(--moto-rapida) var(--curva-entrata),
              border-color var(--moto-rapida) var(--curva-entrata),
              color var(--moto-rapida) var(--curva-entrata);
}
.ruolo:hover span { border-color: var(--caffe-900); }
.ruolo input:checked + span { background: var(--caffe-900); border-color: var(--caffe-900); color: var(--pietra-025); }
.ruolo input:focus-visible + span { outline: var(--focus-anello); outline-offset: var(--focus-offset); }
.campo--ruolo[data-errore="true"] .ruolo span { border-color: var(--testo-errore); }
.campo--paese select { max-width: 26rem; }

/* La trappola per i bot resta fuori dallo schermo (non display:none:
   alcuni bot saltano i campi nascosti in quel modo) */
.trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.modulo-contatti__invio { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-6); }
.modulo-contatti__nota { font-size: var(--testo-sm); color: var(--testo-terziario); }
.modulo-contatti__errore, .esito-statico--ko {
  margin-top: var(--sp-6); padding: var(--sp-5);
  background: var(--rosso-050); border-left: 3px solid var(--rosso-600);
  font-size: var(--testo-sm); color: var(--testo-primario); max-width: none;
}
.modulo-contatti__errore a, .esito-statico a { color: var(--testo-brand); }

/* Esiti per chi non ha JavaScript: visibili solo se l'ancora li punta */
.esito-statico { display: none; }
.esito-statico:target { display: block; }
.esito-statico--ok { margin-bottom: var(--sp-8); padding: var(--sp-5); background: var(--verde-050); border-left: 3px solid var(--verde-600); font-size: var(--testo-sm); max-width: none; }

/* Conferma dopo l'invio: il cerchio si chiude, poi la spunta si traccia */
.esito-invio {
  padding: var(--sp-12) var(--sp-8);
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  text-align: center;
  outline: none;
}
.esito-invio > * { margin-inline: auto; }
.esito-invio__segno { width: 72px; height: 72px; margin-bottom: var(--sp-6); }
.esito-invio__cerchio { fill: none; stroke: var(--bronzo-600); stroke-width: 1.5; }
.esito-invio__spunta { fill: none; stroke: var(--caffe-900); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.esito-invio h3 { font-size: var(--testo-3xl); margin-bottom: var(--sp-3); }
.esito-invio p { color: var(--testo-secondario); margin-bottom: var(--sp-6); }
.esito-invio p strong { color: var(--testo-primario); font-weight: var(--peso-medio); overflow-wrap: anywhere; }
.esito-invio .link-freccia { background: none; border: 0; border-bottom: 1px solid currentColor; cursor: pointer; font: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .esito-invio--entra .esito-invio__cerchio { stroke-dasharray: 1; stroke-dashoffset: 1; animation: esito-traccia 0.7s var(--curva-entrata) 0.15s forwards; }
  .esito-invio--entra .esito-invio__spunta { stroke-dasharray: 1; stroke-dashoffset: 1; animation: esito-traccia 0.45s var(--curva-entrata) 0.75s forwards; }
  .esito-invio--entra h3, .esito-invio--entra p, .esito-invio--entra .link-freccia {
    opacity: 0; animation: esito-sale 0.6s var(--curva-entrata) forwards;
  }
  .esito-invio--entra h3 { animation-delay: 0.5s; }
  .esito-invio--entra p { animation-delay: 0.62s; }
  .esito-invio--entra .link-freccia { animation-delay: 0.74s; }
}
@keyframes esito-traccia { to { stroke-dashoffset: 0; } }
@keyframes esito-sale { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Richiedi preventivo — blocco 1 (30 ottobre 2026): invio reale, allegati,
   Paese, «Sono un…», quantità con unità, consegna. Gli stili prima scritti
   nell'HTML stanno qui. Versione precedente in
   foto-sorgenti/archivio-sezioni/preventivo-v1/.
   ========================================================================== */
/* L'attributo hidden vince sempre: prima uno stile scritto nell'HTML
   (display:flex) teneva visibili a tutti gli avvisi «materiale già scelto»
   e «bozza ritrovata». */
[hidden] { display: none !important; }

.passi { list-style: none; padding: 0; }
.riepilogo-errori h2 {
  font-family: var(--font-testo); font-size: var(--testo-base); font-weight: var(--peso-semi);
  color: var(--testo-errore); margin-bottom: var(--sp-3); letter-spacing: 0;
}
.avviso-modulo {
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: none; margin-bottom: var(--sp-6); padding: var(--sp-4) var(--sp-5);
  background: var(--superficie-alt); border-left: 3px solid var(--bronzo-600);
  font-size: var(--testo-sm); color: var(--testo-secondario);
}
.avviso-modulo svg { width: 18px; height: 18px; flex: none; color: var(--bronzo-700); }
.avviso-modulo--bozza { justify-content: space-between; flex-wrap: wrap; background: var(--bronzo-100); color: var(--bronzo-700); }
.btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-4); }

.passo-modulo { border: 0; padding: 0; margin: 0; min-width: 0; }
.passo-modulo__titolo { font-size: var(--testo-2xl); margin-bottom: var(--sp-2); }
.passo-modulo__aiuto { margin-bottom: var(--sp-8); }
.passo-modulo__azioni { display: flex; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-8); }
.passo-modulo__azioni--solo-avanti { justify-content: flex-end; }
.passo-modulo__filetto { margin-block: var(--sp-8); }
.passo-modulo__nota { margin-top: var(--sp-4); text-align: right; max-width: none; }
/* Senza JavaScript i passi sono tutti visibili: i bottoni di navigazione non servono */
.no-js [data-avanti], .no-js [data-indietro], .no-js .passi { display: none; }
.no-js .passo-modulo + .passo-modulo { margin-top: var(--sp-16); }

.campo__facoltativo { font-weight: var(--peso-normale); color: var(--testo-terziario); }
.campo__aiuto--staccato { margin-top: calc(var(--sp-3) * -1); margin-bottom: var(--sp-5); }
.scheda-scelta--breve { min-height: 0; }
.scheda-scelta--breve .scheda-scelta__nome { padding-block: var(--sp-1); }
.scelta a { color: var(--testo-brand); }

/* Quantità: numero e unità sulla stessa riga */
.quantita { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.campo .quantita input { width: 9rem; flex: none; }

/* Allegati: un'area da toccare, non il bottone grigio del browser */
.allegati {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 64px; padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--bordo-forte); background: var(--superficie-elevata);
  cursor: pointer;
  transition: border-color var(--moto-rapida) var(--curva-entrata), background-color var(--moto-rapida) var(--curva-entrata);
}
.allegati:hover { border-color: var(--caffe-900); }
.allegati:focus-within { outline: var(--focus-anello); outline-offset: var(--focus-offset); }
.allegati svg { width: 22px; height: 22px; color: var(--bronzo-700); flex: none; }
.allegati__azione { font-size: var(--testo-sm); font-weight: var(--peso-medio); }
.allegati input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.campo[data-errore="true"] .allegati { border-color: var(--testo-errore); }
.allegati__elenco { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.allegati__elenco:empty { display: none; }
.allegati__elenco li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4);
  background: var(--superficie-alt); font-size: var(--testo-sm);
}
.allegati__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allegati__peso { color: var(--testo-terziario); font-variant-numeric: tabular-nums; }
.allegati__togli {
  min-height: 36px; padding: 0 var(--sp-2); background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--testo-xs); text-decoration: underline; color: var(--testo-secondario);
}
.allegati__togli:hover { color: var(--testo-errore); }

/* Esito: stesso disegno del modulo Contatti */
.esito-invio h2 { font-size: var(--testo-3xl); margin-bottom: var(--sp-3); }
.esito-invio__azioni { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
@media (prefers-reduced-motion: no-preference) {
  .esito-invio--entra h2, .esito-invio--entra .esito-invio__azioni { opacity: 0; animation: esito-sale 0.6s var(--curva-entrata) forwards; }
  .esito-invio--entra h2 { animation-delay: 0.5s; }
  .esito-invio--entra .esito-invio__azioni { animation-delay: 0.74s; }
}
@media (max-width: 599px) { .passo-modulo__nota { text-align: left; } }

/* ==========================================================================
   Richiedi preventivo — blocco 2, impaginazione (30 ottobre 2026)
   Testata compatta, modulo a sinistra e riepilogo «La tua richiesta» fisso
   a destra; su telefono restano solo le garanzie, sopra il modulo.
   Versione precedente in foto-sorgenti/archivio-sezioni/preventivo-v2/.
   ========================================================================== */
.testata.testata--compatta { padding-top: calc(var(--header-h) + var(--sp-10)); padding-bottom: var(--sp-10); }
.testata.testata--compatta:has(.testata__media img) { min-height: 0; }
.testata--compatta h1 { font-size: var(--testo-4xl); }
.testata--compatta .testata__media img { object-position: 50% 60%; }

.sezione--preventivo { padding-top: var(--sp-12); }
.preventivo-layout { display: grid; gap: var(--sp-8); }
@media (min-width: 1000px) {
  .preventivo-layout { max-width: 74rem; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-12); align-items: start; }
  .preventivo-layout__lato { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}
.preventivo-layout__modulo { min-width: 0; }

/* Riepilogo */
.riepilogo-richiesta {
  padding: var(--sp-5) var(--sp-6);
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  border-top: 2px solid var(--caffe-900);
}
.riepilogo-richiesta__titolo { font-size: var(--testo-xl); margin-bottom: var(--sp-1); }
.riepilogo-richiesta__vuoto { font-size: var(--testo-sm); color: var(--testo-terziario); }
.riepilogo-richiesta__voci { margin: var(--sp-4) 0 0; }
.riepilogo-richiesta__voce {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--sp-3);
  padding: 0.4rem 0; border-top: 1px solid var(--bordo-tenue);
  font-size: var(--testo-sm); line-height: 1.4;
}
.riepilogo-richiesta__voce dt { color: var(--testo-terziario); }
.riepilogo-richiesta__voce dd { margin: 0; color: var(--testo-disabilitato); overflow-wrap: anywhere; }
.riepilogo-richiesta__voce[data-piena="true"] dd { color: var(--testo-primario); font-weight: var(--peso-medio); }

/* Garanzie */
.garanzie { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.garanzie li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--testo-sm); color: var(--testo-secondario); }
.garanzie svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--bronzo-700); }

/* Contatto diretto */
.parlarne { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--bordo-default); display: grid; gap: var(--sp-1); }
.parlarne__titolo {
  font-size: var(--testo-2xs); font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label); text-transform: uppercase; color: var(--testo-accento);
  margin-bottom: var(--sp-2);
}
.parlarne__tel { font-family: var(--font-display); font-size: var(--testo-xl); color: var(--testo-primario); text-decoration: none; }
.parlarne__mail { font-size: var(--testo-sm); color: var(--testo-brand); }
.parlarne a:hover { color: var(--testo-brand); }
.parlarne__orari { font-size: var(--testo-xs); color: var(--testo-terziario); margin-top: var(--sp-1); }

/* Telefono e tablet: le garanzie salgono sopra il modulo, in due colonne;
   riepilogo e contatto (già in testata e a piè di pagina) si tolgono. */
@media (max-width: 999px) {
  .preventivo-layout__lato { order: -1; }
  .preventivo-layout__lato .riepilogo-richiesta, .preventivo-layout__lato .parlarne { display: none; }
  .garanzie { margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4);
              padding-bottom: var(--sp-6); border-bottom: 1px solid var(--bordo-default); }
  .garanzie li { font-size: var(--testo-xs); }
}

/* Schede d'uso: icona e nome sulla stessa riga, altezza contenuta */
.schede-scelta--usi { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); }
.scheda-scelta--breve { flex-direction: row; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-3) var(--sp-4); }
.scheda-scelta--breve svg { width: 22px; height: 22px; flex: none; }
.scheda-scelta--breve .scheda-scelta__nome { padding-block: 0; line-height: 1.25; }
@media (max-width: 599px) { .schede-scelta--usi { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   Richiedi preventivo — blocco 3, movimento (30 ottobre 2026)
   Il cambio di passo (scivolamento con direzione e campi in scaletta) è in
   preventivo.js; qui la barra dei passi, le spunte sulle schede, gli errori,
   le voci del riepilogo. Con «riduci movimento» tutto resta fermo e
   cambia di stato all'istante. Versione precedente in
   foto-sorgenti/archivio-sezioni/preventivo-v3/.
   ========================================================================== */

/* Spunta sulle schede scelte: c'è sempre, anche senza movimento */
.scheda-scelta::after {
  content: ""; position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--caffe-900) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-6.5' fill='none' stroke='%23F7F4EE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  opacity: 0; transform: scale(0.4);
  pointer-events: none;
}
.scheda-scelta--breve::after { top: 0; bottom: 0; margin-block: auto; right: 12px; }
.scheda-scelta--breve { padding-right: 40px; }
.scheda-scelta:has(input:checked)::after { opacity: 1; transform: none; }
.scheda-scelta:has(input:checked) svg { color: var(--caffe-900); }

@media (prefers-reduced-motion: no-preference) {
  /* Barra dei passi: il tratto si riempie da sinistra invece di cambiare colore */
  .passo__barra { position: relative; overflow: hidden; }
  .passo[data-stato] .passo__barra { background: var(--bordo-default); }
  .passo__barra::after {
    content: ""; position: absolute; inset: 0;
    background: var(--caffe-900);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.7s var(--curva-entrata);
  }
  .passo[data-stato="completo"] .passo__barra::after,
  .passo[data-stato="attivo"] .passo__barra::after { transform: scaleX(1); }
  .passo[data-stato="attivo"] .passo__barra::after { transition-delay: 0.12s; }
  .passo__nome { transition: color var(--moto-media) var(--curva-entrata); }

  /* Schede: la spunta compare con un piccolo rimbalzo, la scheda cede al tocco */
  .scheda-scelta::after {
    transition: opacity var(--moto-rapida) var(--curva-entrata),
                transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .scheda-scelta { transition: border-color var(--moto-rapida) var(--curva-entrata),
                               background-color var(--moto-rapida) var(--curva-entrata),
                               box-shadow var(--moto-rapida) var(--curva-entrata),
                               transform var(--moto-rapida) var(--curva-entrata); }
  .scheda-scelta:active { transform: scale(0.985); }
  .scheda-scelta svg { transition: color var(--moto-rapida) var(--curva-entrata); }
  .ruolo:active span { transform: scale(0.97); }
  .ruolo span { transition: background-color var(--moto-rapida) var(--curva-entrata),
                            border-color var(--moto-rapida) var(--curva-entrata),
                            color var(--moto-rapida) var(--curva-entrata),
                            transform var(--moto-rapida) var(--curva-entrata); }

  /* Errori: scendono di pochi pixel invece di comparire di colpo */
  .campo__errore { animation: errore-entra 0.35s var(--curva-entrata); }
  .riepilogo-errori:not([hidden]) { animation: errore-entra 0.45s var(--curva-entrata); }
  .avviso-modulo:not([hidden]) { animation: errore-entra 0.5s var(--curva-entrata) 0.2s backwards; }

  /* Riepilogo: la voce che si riempie si illumina e il valore sale al suo posto */
  .riepilogo-richiesta__voce.appena-riempita { animation: voce-lampo 1.4s var(--curva-uscita); }
  .riepilogo-richiesta__voce.appena-riempita dd { animation: voce-sale 0.5s var(--curva-entrata); }
  .riepilogo-richiesta__voce dd { transition: color var(--moto-media) var(--curva-entrata); }

  /* Allegati: ogni file aggiunto entra nell'elenco */
  .allegati__elenco li { animation: errore-entra 0.4s var(--curva-entrata); }
  .allegati.trascina { border-color: var(--caffe-900); background: var(--caffe-050); }
}
@keyframes errore-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes voce-lampo { 0% { background: var(--bronzo-100); } 100% { background: transparent; } }
@keyframes voce-sale { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Senza JavaScript il riepilogo non si compila: restano garanzie e contatto */
.no-js .riepilogo-richiesta { display: none; }
.no-js .garanzie { margin-top: 0; }
.no-js .passo-modulo__azioni { justify-content: flex-end; }

/* ==========================================================================
   Schede materiale — blocco 1, impaginazione (30 ottobre 2026)
   Lastre ritagliate tutte con la stessa cornice (tools/ritaglia-lastre.py),
   tre per riga e con le quote; striscia di sintesi sotto la testata;
   «Il materiale» con la scheda di sintesi fissa a lato.
   Versione precedente in foto-sorgenti/archivio-sezioni/materiale-v1/.
   ========================================================================== */

/* Striscia di sintesi */
.striscia-sintesi { background: var(--superficie-elevata); border-bottom: 1px solid var(--bordo-default); }
.striscia-sintesi__corpo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-5) var(--sp-8); padding-block: var(--sp-6);
}
.striscia-sintesi__voci { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-10); margin: 0; }
.striscia-sintesi__voci > div { display: grid; gap: 2px; }
.striscia-sintesi__voci dt {
  font-size: var(--testo-2xs); font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label); text-transform: uppercase; color: var(--testo-accento);
}
.striscia-sintesi__voci dd { margin: 0; font-size: var(--testo-sm); color: var(--testo-primario); }
@media (max-width: 699px) {
  .striscia-sintesi__voci { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); width: 100%; }
  .striscia-sintesi__cta { width: 100%; }
}

/* Lastre: tre per riga, stessa cornice, quote sui bordi */
.lastre { gap: var(--sp-12) var(--sp-6); }
@media (min-width: 700px) { .lastre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .lastre { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lastra__quadro { position: relative; overflow: hidden; border-radius: var(--raggio-md); background: var(--pietra-100); }
.lastra__quadro picture { display: block; }
.lastra__quadro .lastra__foto { display: block; width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: cover; border-radius: 0; }
.lastra__dati { margin-top: var(--sp-4); }
.lastra__nome { font-size: var(--testo-lg); }
.lastra__nota { font-size: var(--testo-sm); }

/* Quote: una linea con i terminali sopra la lastra (larghezza) e una a
   sinistra (altezza), posizionate dal generatore in percentuale */
.lastra__quote {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  pointer-events: none; color: rgba(28, 25, 22, 0.78);
}
.lastra__quota { position: absolute; display: flex; align-items: center; justify-content: center; }
.lastra__quota--l { left: 0; right: 0; bottom: 100%; height: 14px; margin-bottom: 4px; border-inline: 1px solid currentColor; }
.lastra__quota--l::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid currentColor; }
.lastra__quota--a { top: 0; bottom: 0; right: 100%; width: 14px; margin-right: 4px; border-block: 1px solid currentColor; }
.lastra__quota--a::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 1px solid currentColor; }
.lastra__quota i {
  position: relative; z-index: 1;
  padding: 1px 6px; background: rgba(247, 244, 238, 0.92);
  font: 500 10px/1.3 var(--font-testo); font-style: normal; letter-spacing: 0.04em;
  color: var(--caffe-900); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.lastra__quota--a i { transform: rotate(-90deg); }
/* Sotto i 380px di immagine le quote affollano la lastra: restano le misure scritte */
@media (max-width: 420px) { .lastra__quote { display: none; } }

/* «Il materiale»: testo a sinistra, scheda di sintesi fissa a destra */
@media (min-width: 1000px) {
  .scheda-materiale { grid-template-columns: minmax(0, 1fr) 400px; }
  .scheda-sintesi { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}
.scheda-materiale__descrizione { margin-top: var(--sp-4); color: var(--testo-secondario); line-height: var(--interlinea-corpo); }
.scheda-materiale__sottotitolo {
  font-family: var(--font-testo); font-size: var(--testo-base); font-weight: var(--peso-semi);
  letter-spacing: 0; margin-top: var(--sp-10); margin-bottom: var(--sp-4);
}
.scheda-materiale .card-materiale__pie,
.scheda-sintesi .card-materiale__pie { justify-content: flex-start; border-top: 0; margin-top: 0; padding-top: 0; }
.scheda-materiale__link { margin-top: var(--sp-4); }
.elenco-varieta { display: grid; gap: var(--sp-2); margin-left: var(--sp-5); color: var(--testo-secondario); }

.scheda-sintesi {
  padding: var(--sp-6);
  background: var(--superficie-elevata);
  border: 1px solid var(--bordo-default);
  border-top: 2px solid var(--caffe-900);
}
.scheda-sintesi__titolo {
  font-size: var(--testo-2xs); font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label); text-transform: uppercase; color: var(--testo-accento);
  margin-bottom: var(--sp-4);
}
.scheda-sintesi__cromie { margin-bottom: var(--sp-4); }
.scheda-sintesi .tabella-dati th { width: 38%; }
.scheda-sintesi__cta { display: grid; gap: var(--sp-3); margin-top: var(--sp-6); }
.scheda-sintesi__cta .btn { width: 100%; }
.scheda-sintesi__nota { margin-top: var(--sp-5); font-size: var(--testo-xs); line-height: var(--interlinea-media); color: var(--testo-terziario); }
.materiali-affini__tutti { margin-top: var(--sp-10); }

/* ==========================================================================
   Schede materiale — blocco 2, conversione (30 ottobre 2026)
   Barra «Campione · Preventivo» che segue lo scorrimento (cinetica.js) e
   «Richiedi questa selezione» su ogni lastra.
   Versione precedente in foto-sorgenti/archivio-sezioni/materiale-v2/.
   ========================================================================== */
.barra-materiale {
  position: fixed; left: 0; right: 0; z-index: calc(var(--z-header, 100) - 1);
  top: var(--header-h);
  background: rgba(247, 244, 238, 0.96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordo-default);
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform var(--moto-media) var(--curva-entrata),
              opacity var(--moto-rapida) var(--curva-entrata),
              visibility 0s linear var(--moto-media);
}
.barra-materiale[data-visibile="true"] {
  transform: none; opacity: 1; visibility: visible;
  transition: transform var(--moto-media) var(--curva-entrata), opacity var(--moto-rapida) var(--curva-entrata);
}
.barra-materiale__corpo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: 64px; }
.barra-materiale__nome {
  display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; max-width: none;
  font-family: var(--font-display); font-size: var(--testo-xl); color: var(--testo-primario);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-materiale__sotto { font-family: var(--font-testo); font-size: var(--testo-xs); color: var(--testo-terziario); }
.barra-materiale__azioni { display: flex; gap: var(--sp-2); flex: none; }
.barra-materiale .btn--sm { min-height: 40px; padding-inline: var(--sp-5); }
.barra-materiale__breve { display: none; }

/* Telefono: la barra scende in fondo, a portata di pollice */
@media (max-width: 699px) {
  .barra-materiale {
    top: auto; bottom: 0;
    border-bottom: 0; border-top: 1px solid var(--bordo-default);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
  }
  .barra-materiale__corpo { min-height: 60px; }
  .barra-materiale__nome { font-size: var(--testo-lg); }
  .barra-materiale__sotto { display: none; }
  .barra-materiale__lungo { display: none; }
  .barra-materiale__breve { display: inline; }
  .barra-materiale .btn--sm { padding-inline: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  .barra-materiale, .barra-materiale[data-visibile="true"] { transition: none; }
}

.lastra__richiedi { margin-top: var(--sp-3); font-size: var(--testo-sm); }
/* Le ancore (indice delle quarziti, #selezione) non finiscono sotto la barra */
@media (min-width: 700px) { .lastre-gruppo, .lastra, #il-materiale { scroll-margin-top: calc(var(--header-h) + 64px + var(--sp-6)); } }

/* ==========================================================================
   Schede materiale — blocco 3, movimento (30 ottobre 2026)
   Le lastre si posano (la foto si scopre dall'alto e si assesta), le quote
   si tracciano dopo, la luce radente scorre al passaggio, la lastra si
   apre a schermo intero con la lente (materiale.js). Con «riduci
   movimento» tutto è già al suo posto.
   Versione precedente in foto-sorgenti/archivio-sezioni/materiale-v3/.
   ========================================================================== */

/* Bottone invisibile sopra la foto: apre l'ingrandimento */
.lastra__ingrandisci {
  position: absolute; inset: 0; z-index: 2;
  background: none; border: 0; padding: 0; cursor: zoom-in;
}
.lastra__ingrandisci:focus-visible { outline: var(--focus-anello); outline-offset: -3px; }

/* Luce radente, nell'area esatta della lastra */
.lastra__luce {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  overflow: hidden; pointer-events: none; z-index: 1;
}
.lastra__luce::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.0) 20%,
              rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%);
  mix-blend-mode: soft-light;
  transform: skewX(-12deg); opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* La posa: la foto si scopre dall'alto verso il cavalletto e si assesta */
  html:not(.no-js) .lastra.rivela .lastra__foto {
    clip-path: inset(0 0 100% 0); transform: scale(1.05); transform-origin: 50% 85%;
    transition: clip-path 1.1s var(--curva-entrata) var(--ritardo, 0ms),
                transform 1.6s var(--curva-entrata) var(--ritardo, 0ms);
  }
  html:not(.no-js) .lastra.rivela[data-visibile="true"] .lastra__foto { clip-path: inset(0); transform: none; }
  .lastra.rivela { transform: none; }

  /* Le quote si tracciano a lastra posata */
  html:not(.no-js) .lastra.rivela .lastra__quota--l { transform: scaleX(0); }
  html:not(.no-js) .lastra.rivela .lastra__quota--a { transform: scaleY(0); }
  html:not(.no-js) .lastra.rivela .lastra__quota i { opacity: 0; }
  .lastra .lastra__quota { transition: transform 0.8s var(--curva-entrata) calc(var(--ritardo, 0ms) + 0.75s); }
  .lastra .lastra__quota--a { transition-delay: calc(var(--ritardo, 0ms) + 0.95s); }
  .lastra .lastra__quota i { transition: opacity 0.5s var(--curva-entrata) calc(var(--ritardo, 0ms) + 1.2s); }
  html:not(.no-js) .lastra.rivela[data-visibile="true"] .lastra__quota { transform: none; }
  html:not(.no-js) .lastra.rivela[data-visibile="true"] .lastra__quota i { opacity: 1; }

  /* Luce radente al passaggio, solo con un puntatore vero */
  @media (hover: hover) and (pointer: fine) {
    .lastra__quadro:hover .lastra__luce::after { animation: luce-radente 1.3s var(--curva-entrata); }
    .lastra__quadro .lastra__foto { transition: filter var(--moto-media) var(--curva-entrata); }
    .lastra__quadro:hover .lastra__foto { filter: contrast(1.03) brightness(1.02); }
  }

  /* Scheda di sintesi: le righe entrano in scaletta */
  .scheda-sintesi[data-animata] tr,
  .scheda-sintesi[data-animata] .scheda-sintesi__cta,
  .scheda-sintesi[data-animata] .scheda-sintesi__cromie { opacity: 0; transform: translateY(8px); }
  .scheda-sintesi[data-visibile] tr,
  .scheda-sintesi[data-visibile] .scheda-sintesi__cta,
  .scheda-sintesi[data-visibile] .scheda-sintesi__cromie {
    opacity: 1; transform: none;
    transition: opacity 0.5s var(--curva-entrata), transform 0.6s var(--curva-entrata);
  }
  .scheda-sintesi[data-visibile] .scheda-sintesi__cromie { transition-delay: 0.05s; }
  .scheda-sintesi[data-visibile] tr:nth-child(1) { transition-delay: 0.1s; }
  .scheda-sintesi[data-visibile] tr:nth-child(2) { transition-delay: 0.15s; }
  .scheda-sintesi[data-visibile] tr:nth-child(3) { transition-delay: 0.2s; }
  .scheda-sintesi[data-visibile] tr:nth-child(4) { transition-delay: 0.25s; }
  .scheda-sintesi[data-visibile] tr:nth-child(5) { transition-delay: 0.3s; }
  .scheda-sintesi[data-visibile] tr:nth-child(6) { transition-delay: 0.35s; }
  .scheda-sintesi[data-visibile] .scheda-sintesi__cta { transition-delay: 0.45s; }
}
@keyframes luce-radente {
  0%   { left: -60%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 115%; opacity: 0; }
}

/* Ingrandimento a schermo intero */
.lastra-grande {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(14, 12, 10, 0.97); color: var(--testo-su-scuro);
}
.lastra-grande[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lastra-grande::backdrop { background: rgba(14, 12, 10, 0.9); }
.lastra-grande__scena { display: grid; place-items: center; min-height: 0; padding: var(--sp-6) var(--sp-6) 0; }
.lastra-grande__foto {
  max-width: 100%; max-height: calc(100dvh - 120px); width: auto; height: auto;
  cursor: crosshair; user-select: none;
  transition: opacity 160ms var(--curva-uscita), transform 160ms var(--curva-uscita);
}
.lastra-grande__foto.cambia { opacity: 0; transform: translateX(var(--da, 24px)); }
.lastra-grande__lente {
  position: fixed; left: 0; top: 0; width: 220px; height: 220px; border-radius: 50%;
  border: 2px solid rgba(247, 244, 238, 0.9);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  background-repeat: no-repeat; pointer-events: none; z-index: 3;
}
.lastra-grande__barra {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-4) var(--sp-6) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
}
.lastra-grande__testo { display: flex; align-items: baseline; gap: var(--sp-3); margin: 0; max-width: none; flex: 1; min-width: 0; }
.lastra-grande__testo b { font-family: var(--font-display); font-weight: var(--peso-medio); font-size: var(--testo-xl); }
.lastra-grande__testo span { font-size: var(--testo-sm); color: var(--testo-su-scuro-sec); font-variant-numeric: tabular-nums; }
.lastra-grande__conta { font-size: var(--testo-xs); letter-spacing: 0.1em; color: var(--testo-su-scuro-sec); font-variant-numeric: tabular-nums; }
.lastra-grande__comandi { display: flex; gap: var(--sp-2); }
.lastra-grande__btn {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 1px solid var(--bordo-su-scuro); color: var(--testo-su-scuro); cursor: pointer;
  transition: background-color var(--moto-rapida) var(--curva-entrata);
}
.lastra-grande__btn:hover { background: rgba(255, 255, 255, 0.08); }
.lastra-grande__btn:focus-visible { outline: var(--focus-anello-scuro); outline-offset: 2px; }
.lastra-grande__btn svg { width: 20px; height: 20px; }
.lastra-grande__suggerimento { flex-basis: 100%; order: 3; margin: 0; font-size: var(--testo-xs); letter-spacing: 0.04em; color: var(--testo-su-scuro-sec); }
@media (hover: none), (pointer: coarse) { .lastra-grande__suggerimento { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .lastra-grande[open]::backdrop { animation: velo-entra var(--moto-media) var(--curva-entrata); }
}
::view-transition-group(lastra-attiva) { animation-duration: 650ms; animation-timing-function: var(--curva-entrata); }
::view-transition-old(lastra-attiva), ::view-transition-new(lastra-attiva) { height: 100%; object-fit: cover; }

/* ==========================================================================
   Home — revisione del 30 ottobre 2026, blocco 1
   Versione precedente in foto-sorgenti/archivio-sezioni/home-revisione-v1/.
   ========================================================================== */
/* Telefono: sotto «Chi siamo» il vuoto si sommava a quello della sezione dopo */
@media (max-width: 899px) {
  .parete-cava__contenitore { padding-bottom: var(--sp-4); }
}
/* Servizi: icona accanto al titolo e testo di una riga, su tutte le misure */
.griglia--4 > .card-servizio {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--sp-3); align-items: center; align-content: start;
}
.griglia--4 > .card-servizio .card-servizio__icona { grid-column: 1; margin: 0; }
.griglia--4 > .card-servizio h3 { grid-column: 2; margin: 0; }
.griglia--4 > .card-servizio p { grid-column: 1 / -1; margin-top: var(--sp-3); }
@media (max-width: 699px) {
  .griglia--4 > .card-servizio { padding-block: var(--sp-5); }
}
/* Su quattro colonne i titoli vanno a capo in modo diverso: con subgrid la
   riga del titolo è alta uguale in tutte le schede e i testi partono allineati */
@media (min-width: 1080px) {
  @supports (grid-template-rows: subgrid) {
    .griglia--4:has(> .card-servizio) { grid-auto-rows: auto; row-gap: 0; }
    .griglia--4 > .card-servizio { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* ==========================================================================
   Home — revisione blocco 2 (30 ottobre 2026): ricerca rapida nella
   testata (ricerca.js) e avviso della lingua su tutto il sito (cinetica.js).
   Versione precedente in foto-sorgenti/archivio-sezioni/home-revisione-v2/.
   ========================================================================== */
.ricerca-hero { position: relative; width: min(100%, 30rem); margin-top: var(--sp-8); }
.ricerca-hero__campo { position: relative; }
.ricerca-hero__icona { position: absolute; left: var(--sp-4); top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--testo-terziario); pointer-events: none; }
.ricerca-hero input {
  width: 100%; min-height: 52px; padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 26px);
  font: inherit; font-size: var(--testo-base); color: var(--testo-primario);
  background: rgba(247, 244, 238, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--bordo-forte); border-radius: 0;
  transition: border-color var(--moto-rapida) var(--curva-entrata), box-shadow var(--moto-rapida) var(--curva-entrata);
}
.ricerca-hero input::placeholder { color: var(--testo-terziario); }
.ricerca-hero input:hover { border-color: var(--caffe-700); }
.ricerca-hero input:focus { outline: none; border-color: var(--caffe-900); box-shadow: 0 0 0 3px var(--caffe-100); }
.ricerca-hero input::-webkit-search-cancel-button { cursor: pointer; }

.ricerca-hero__esiti {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 20;
  list-style: none; margin: 0; padding: var(--sp-2) 0;
  background: var(--superficie-elevata); border: 1px solid var(--bordo-default);
  box-shadow: 0 18px 40px rgba(28, 25, 22, 0.16);
  max-height: min(60vh, 26rem); overflow-y: auto;
}
.ricerca-hero__voce a {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: var(--sp-3); align-items: center;
  padding: var(--sp-2) var(--sp-4); text-decoration: none; color: var(--testo-primario);
}
.ricerca-hero__colore { grid-row: span 2; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(28, 25, 22, 0.2); }
.ricerca-hero__nome { font-size: var(--testo-base); }
.ricerca-hero__nome mark { background: none; color: inherit; font-weight: var(--peso-semi); }
.ricerca-hero__tipo { font-size: var(--testo-xs); color: var(--testo-terziario); }
.ricerca-hero__voce[aria-selected="true"] a, .ricerca-hero__voce a:hover { background: var(--caffe-050); }
.ricerca-hero__vuoto { padding: var(--sp-3) var(--sp-4); font-size: var(--testo-sm); color: var(--testo-secondario); }
.ricerca-hero__vuoto a { display: block; margin-top: var(--sp-1); color: var(--testo-brand); }
@media (prefers-reduced-motion: no-preference) {
  .ricerca-hero__esiti:not([hidden]) { animation: errore-entra 0.25s var(--curva-entrata); }
}

/* Avviso della lingua */
.avviso-lingua {
  position: fixed; z-index: calc(var(--z-cookie) - 1);
  /* a destra: in basso a sinistra c'è il bottone delle preferenze cookie */
  right: var(--sp-5); bottom: var(--sp-5); max-width: min(26rem, calc(100vw - 2 * var(--sp-5)));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-5);
  background: var(--caffe-900); color: var(--testo-su-scuro);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--moto-media) var(--curva-entrata), transform var(--moto-media) var(--curva-entrata);
}
.avviso-lingua.visibile { opacity: 1; transform: none; }
.avviso-lingua p { margin: 0; font-size: var(--testo-sm); max-width: none; }
.avviso-lingua__vai { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--testo-sm); font-weight: var(--peso-medio); color: var(--bronzo-400); text-underline-offset: 3px; }
.avviso-lingua__vai svg { width: 16px; height: 16px; }
.avviso-lingua__chiudi {
  position: absolute; top: var(--sp-2); right: var(--sp-2); width: 36px; height: 36px;
  display: grid; place-items: center; background: none; border: 0; color: var(--testo-su-scuro-sec); cursor: pointer;
}
.avviso-lingua__chiudi svg { width: 18px; height: 18px; }
.avviso-lingua__chiudi:hover { color: var(--testo-su-scuro); }
.avviso-lingua :focus-visible { outline: var(--focus-anello-scuro); outline-offset: 2px; }
/* Telefono: in alto sotto l'intestazione, così non copre la barra del preventivo */
@media (max-width: 699px) {
  .avviso-lingua { left: var(--sp-3); right: var(--sp-3); bottom: auto; top: calc(var(--header-h) + var(--sp-2)); max-width: none; transform: translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .avviso-lingua { transition: none; } }

/* ==========================================================================
   Home — revisione blocco 3, movimento (30 ottobre 2026)
   Numeri che contano (contatori di cinetica.js), profondità della testata
   allo scorrimento, lastre del catalogo inclinate verso il cursore,
   citazione del fondatore che si svela riga per riga.
   Versione precedente in foto-sorgenti/archivio-sezioni/home-revisione-v3/.
   ========================================================================== */
.indice-ed .cifra { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .hero-ed { overflow: clip; }
  .hero-ed__media {
    transform: translateY(calc(var(--hero-p, 0) * 8%)) scale(calc(1 + var(--hero-p, 0) * 0.06));
    transform-origin: 50% 30%;
    will-change: transform;
  }
  .hero-ed__contenuto {
    opacity: calc(1 - var(--hero-p, 0) * 0.8);
    transform: translateY(calc(var(--hero-p, 0) * -40px));
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .carosello--lastre .lastra-card__media {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.5s var(--curva-entrata);
  }
}

/* Citazione: le parole salgono riga per riga (titoliSvelati), poi firma,
   testo e bottone entrano in scaletta. Solo se lo script l'ha preparata. */
@media (prefers-reduced-motion: no-preference) {
  .metodo-ed__testo:has(.titolo-svelato) .metodo-ed__citazione footer,
  .metodo-ed__testo:has(.titolo-svelato) .metodo-ed__sommario,
  .metodo-ed__testo:has(.titolo-svelato) .metodo-ed__cta {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.7s var(--curva-entrata), transform 0.8s var(--curva-entrata);
  }
  .metodo-ed__testo:has([data-svelato="true"]) .metodo-ed__citazione footer { opacity: 1; transform: none; transition-delay: 0.9s; }
  .metodo-ed__testo:has([data-svelato="true"]) .metodo-ed__sommario { opacity: 1; transform: none; transition-delay: 1.1s; }
  .metodo-ed__testo:has([data-svelato="true"]) .metodo-ed__cta { opacity: 1; transform: none; transition-delay: 1.3s; }
}
/* La foto sotto il video è il suo primo fotogramma: deve avere la stessa
   inquadratura del video (60% 50%), altrimenti al passaggio la scena scorre
   di lato. Il 30% era tarato sul portico di prima. */
@media (min-width: 900px) { .hero-ed--video .hero-ed__media img { object-position: 60% 50%; } }

/* ==========================================================================
   Azienda — revisione blocco 1 (30 ottobre 2026): video senza nero con il
   suo primo fotogramma sotto, stili di «Chi siamo» portati qui, invito al
   preventivo dopo le promesse. Versione precedente in
   foto-sorgenti/archivio-sezioni/azienda-revisione-v1/.
   ========================================================================== */
.chi-siamo-az__testo { margin-top: var(--sp-4); color: var(--testo-secondario); line-height: var(--interlinea-corpo); }
.chi-siamo-az h2 + .chi-siamo-az__testo { margin-top: var(--sp-5); }
.chi-siamo-az__testo strong { color: var(--testo-primario); }
.promesse__invito { margin-top: var(--sp-10); }
.su-scuro .promesse__invito .link-freccia { color: var(--testo-su-scuro); }
.su-scuro .promesse__invito .link-freccia:hover { color: var(--bronzo-400); }

/* ==========================================================================
   Azienda — revisione blocco 3, movimento (30 ottobre 2026)
   Versione precedente in foto-sorgenti/archivio-sezioni/azienda-revisione-v3/.
   ========================================================================== */
/* Profondità della testata con video (stessa logica della home) */
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .testata--video .testata__media {
    transform: translateY(calc(var(--hero-p, 0) * 8%)) scale(calc(1 + var(--hero-p, 0) * 0.06));
    transform-origin: 50% 30%;
  }
  .testata--video > .contenitore {
    opacity: calc(1 - var(--hero-p, 0) * 0.8);
    transform: translateY(calc(var(--hero-p, 0) * -40px));
  }
}

/* Percorso «Dal blocco al cantiere»: linea guidata dallo scorrimento
   (percorsoPassaggi in cinetica.js) e passaggi che si accendono */
@media (prefers-reduced-motion: no-preference) {
  .passaggi[data-percorso] .passaggi__voce:not(:last-child)::after {
    animation: none;
    transform: scaleY(var(--linea, 0));
    transition: transform 0.15s linear;
  }
  .passaggi[data-percorso] .passaggi__segno {
    transition: background-color 0.5s var(--curva-entrata), border-color 0.5s var(--curva-entrata),
                color 0.5s var(--curva-entrata), transform 0.6s var(--curva-entrata);
  }
  .passaggi[data-percorso] .passaggi__voce[data-acceso="true"] .passaggi__segno { transform: scale(1.06); }
  .passaggi[data-percorso] .passaggi__voce[data-acceso="true"] .passaggi__segno::after {
    content: ""; position: absolute; inset: -1px; border-radius: 50%;
    border: 1px solid var(--bronzo-600);
    animation: segno-onda 1.1s var(--curva-uscita) 1 forwards;
  }
  .passaggi[data-percorso] .passaggi__corpo { transition: opacity 0.5s var(--curva-entrata); }
  .passaggi[data-percorso] .passaggi__voce[data-acceso="false"] .passaggi__corpo { opacity: 0.55; }
}
@keyframes segno-onda { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.6); opacity: 0; } }
/* Il passaggio raggiunto ha il cerchio pieno: vale anche senza movimento */
.passaggi[data-percorso] .passaggi__voce[data-acceso="true"] .passaggi__segno {
  background: var(--caffe-900); border-color: var(--caffe-900); color: var(--bronzo-400);
}

/* Promesse: il filetto si allunga, poi numero, titolo e testo in scaletta */
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .promesse__voce.rivela::before { width: 0; }
  html:not(.no-js) .promesse__voce.rivela .promesse__numero,
  html:not(.no-js) .promesse__voce.rivela .promesse__titolo,
  html:not(.no-js) .promesse__voce.rivela .promesse__testo { opacity: 0; transform: translateY(14px); }
  html:not(.no-js) .promesse__voce.rivela[data-visibile="true"]::before {
    width: 48px; transition: width 0.8s var(--curva-entrata) var(--ritardo, 0ms);
  }
  html:not(.no-js) .promesse__voce.rivela[data-visibile="true"] .promesse__numero,
  html:not(.no-js) .promesse__voce.rivela[data-visibile="true"] .promesse__titolo,
  html:not(.no-js) .promesse__voce.rivela[data-visibile="true"] .promesse__testo {
    opacity: 1; transform: none;
    transition: opacity 0.7s var(--curva-entrata), transform 0.8s var(--curva-entrata), color var(--moto-media) var(--ease-standard);
  }
  html:not(.no-js) .promesse__voce.rivela[data-visibile="true"] .promesse__numero { transition-delay: calc(var(--ritardo, 0ms) + 0.15s); }
  html:not(.no-js) .promesse__voce.rivela[data-visibile="true"] .promesse__titolo { transition-delay: calc(var(--ritardo, 0ms) + 0.3s); }
  html:not(.no-js) .promesse__voce.rivela[data-visibile="true"] .promesse__testo  { transition-delay: calc(var(--ritardo, 0ms) + 0.42s); }
}

/* Citazione di «Chi siamo»: le parole salgono, poi la firma */
@media (prefers-reduced-motion: no-preference) {
  .chi-siamo-az__citazione:has(.titolo-svelato) footer {
    opacity: 0; transform: translateY(8px);
    transition: opacity 0.7s var(--curva-entrata), transform 0.8s var(--curva-entrata);
  }
  .chi-siamo-az__citazione:has([data-svelato="true"]) footer { opacity: 1; transform: none; transition-delay: 0.9s; }
}
/* La regola d'entrata non deve bloccare il filetto che si allunga al passaggio */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .promesse__voce.rivela[data-visibile="true"]:hover::before { width: 100%; transition: width var(--moto-media) var(--ease-entrata); }
}
@media (hover: hover) and (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .promesse__voce + .promesse__voce.rivela[data-visibile="true"]:hover::before { width: calc(100% - var(--sp-8)); }
}

/* ==========================================================================
   Pagina 404, revisione del 30 ottobre 2026
   Il «404» è inciso in un marmo nero venato d'oro (la texture della famiglia
   Marmi neri, background-clip: text); sotto, la ricerca rapida della home,
   i «Forse cercavi…» ricavati dall'indirizzo e quattro destinazioni.
   Versione precedente in foto-sorgenti/archivio-sezioni/pagina-404-v1/.
   ========================================================================== */
.errore-404 { padding-block: calc(var(--sp-12)) var(--sezione-y); }
.errore-404__corpo { display: grid; justify-items: center; text-align: center; max-width: 52rem; }

.errore-404__cifre {
  display: flex; justify-content: center; gap: 0.02em; margin: 0 0 var(--sp-6);
  font-family: var(--font-display); font-weight: var(--peso-medio);
  font-size: clamp(8.5rem, 4rem + 19vw, 18rem); line-height: 0.85; letter-spacing: -0.02em;
  max-width: none;
}
.errore-404__cifre span {
  --pos: 40% 50%;
  display: block; position: relative;
  color: var(--caffe-900);                         /* ripiego se background-clip manca */
  /* Due strati ritagliati sul testo: la lama di luce e il marmo */
  background:
    linear-gradient(105deg, transparent 42%, rgba(255, 238, 205, 0.55) 50%, transparent 58%) var(--luce, 160%) 0 / 250% 100% no-repeat,
    var(--caffe-900) url("/assets/img/materiali/marmi-neri.jpg") var(--pos) / var(--venatura, 150%) auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.errore-404__cifre span:nth-child(2) { --pos: 55% 30%; }
.errore-404__cifre span:nth-child(3) { --pos: 70% 70%; }
@property --luce { syntax: '<percentage>'; inherits: false; initial-value: 160%; }
@property --venatura { syntax: '<percentage>'; inherits: false; initial-value: 150%; }

.errore-404__titolo { font-size: var(--testo-4xl); max-width: 18ch; margin-inline: auto; }
.errore-404__sommario { margin: var(--sp-5) auto 0; max-width: 46ch; }

.errore-404__ricerca { margin: var(--sp-10) auto 0; width: min(100%, 34rem); text-align: left; }

.errore-404__forse { margin-top: var(--sp-8); width: min(100%, 34rem); text-align: left; }
.errore-404__forse-titolo, .errore-404__sezione {
  font-size: var(--testo-2xs); font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label); text-transform: uppercase; color: var(--testo-accento);
  margin-bottom: var(--sp-3);
}
.errore-404__forse ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bordo-default); }
.errore-404__forse a {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--bordo-default);
  text-decoration: none; color: var(--testo-primario);
}
.errore-404__forse-nome { font-family: var(--font-display); font-size: var(--testo-xl); }
.errore-404__forse-tipo { font-size: var(--testo-xs); color: var(--testo-terziario); }
.errore-404__forse a:hover .errore-404__forse-nome { color: var(--testo-brand); }

.errore-404__destinazioni { margin-top: var(--sp-16); width: 100%; text-align: left; }
.errore-404__sezione { max-width: none; }
.errore-404__elenco {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0; text-align: left;
  border-top: 1px solid var(--bordo-forte);
}
@media (min-width: 700px) { .errore-404__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); } }
.errore-404__voce a {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: var(--sp-4); row-gap: 2px;
  padding: var(--sp-5) 0; border-bottom: 1px solid var(--bordo-default);
  text-decoration: none; color: var(--testo-primario);
}
.errore-404__nome { font-family: var(--font-display); font-size: var(--testo-xl); }
.errore-404__nota { grid-column: 1; font-size: var(--testo-sm); color: var(--testo-terziario); }
.errore-404__voce svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; height: 18px; color: var(--testo-accento);
  transition: transform var(--moto-rapida) var(--curva-entrata); }
.errore-404__voce a:hover .errore-404__nome { color: var(--testo-brand); }
.errore-404__voce a:hover svg { transform: translateX(4px); }

.errore-404__aiuto { margin-top: var(--sp-10); font-size: var(--testo-sm); color: var(--testo-terziario); max-width: 52ch; }
.errore-404__aiuto a { color: var(--testo-brand); }
.errore-404__casa { margin-top: var(--sp-6); }

/* Movimento: le cifre salgono una dopo l'altra da dietro una maschera, poi
   una lama di luce attraversa il marmo una volta sola (solo dentro le cifre)
   e la venatura si assesta lentamente. Il titolo si svela da solo, come in
   tutto il sito (titoliSvelati). Con «riduci movimento» tutto è fermo. */
@media (prefers-reduced-motion: no-preference) {
  .errore-404__cifre { overflow: hidden; padding-bottom: 0.04em; }
  .errore-404__cifre span {
    animation: cifra-sale 1.1s var(--curva-entrata) both,
               cifra-venatura 6s var(--curva-entrata) both,
               cifra-luce 1.8s var(--curva-entrata) 1.3s both;
  }
  .errore-404__cifre span:nth-child(2) { animation-delay: 0.12s, 0.12s, 1.4s; }
  .errore-404__cifre span:nth-child(3) { animation-delay: 0.24s, 0.24s, 1.5s; }
  .errore-404 .occhiello, .errore-404__sommario, .errore-404__ricerca {
    animation: hero-ed-entra 0.9s var(--curva-entrata) both;
  }
  .errore-404 .occhiello { animation-delay: 0.45s; }
  .errore-404__sommario { animation-delay: 0.7s; }
  .errore-404__ricerca { animation-delay: 0.8s; }
  .errore-404__forse:not([hidden]) { animation: errore-entra 0.6s var(--curva-entrata) both; }
}
@keyframes cifra-sale { from { transform: translateY(105%); } to { transform: none; } }
@keyframes cifra-venatura { from { --venatura: 175%; } to { --venatura: 150%; } }
@keyframes cifra-luce { from { --luce: 160%; } to { --luce: -60%; } }
.errore-404__titolo { text-wrap: balance; }

/* ==========================================================================
   Header, menu e piè di pagina — blocco 1 (30 ottobre 2026)
   Versione precedente in foto-sorgenti/archivio-sezioni/header-footer-v1/.
   ========================================================================== */
/* Il claim della home apre il piè di pagina */
.footer__firma {
  max-width: none;
  margin: 0 0 var(--sp-12);
  padding-bottom: var(--sp-10);
  border-bottom: 1px solid var(--bordo-su-scuro);
  font-family: var(--font-display); font-weight: var(--peso-normale);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4.25rem); line-height: 1.05; letter-spacing: -0.01em;
  color: var(--testo-su-scuro);
}
.footer__firma em { font-style: italic; color: var(--bronzo-400); }

/* ==========================================================================
   Header, menu e piè di pagina — blocco 2, navigazione (30 ottobre 2026)
   Lente con la ricerca su ogni pagina, menu esteso (ricerca e gruppi del
   catalogo), stato della sede nel menu e nel piè di pagina.
   Versione precedente in foto-sorgenti/archivio-sezioni/header-footer-v2/.
   ========================================================================== */
.apri-ricerca {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--tocco-min); height: var(--tocco-min);
  background: transparent; border: 0; border-radius: var(--raggio-sm);
  color: var(--testo-primario); cursor: pointer;
  transition: color var(--moto-rapida) var(--curva-entrata);
}
.apri-ricerca svg { width: 20px; height: 20px; }
.apri-ricerca:hover { color: var(--testo-brand); }
.apri-ricerca:focus-visible { outline: var(--focus-anello); outline-offset: 2px; }

/* Finestra di ricerca: un pannello che scende dall'alto, con il velo sotto */
.cerca-sito {
  width: 100%; max-width: none; max-height: none; height: auto;
  margin: 0; padding: 0; border: 0;
  inset: 0 0 auto 0;
  background: var(--superficie-base); color: var(--testo-primario);
  border-bottom: 1px solid var(--bordo-default);
  box-shadow: 0 24px 60px rgba(28, 25, 22, 0.18);
  overflow: visible;
}
.cerca-sito::backdrop { background: rgba(18, 16, 14, 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cerca-sito__corpo { padding-block: var(--sp-8) var(--sp-10); }
.cerca-sito__testa { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.cerca-sito__testa .occhiello { margin: 0; }
.cerca-sito__chiudi {
  width: var(--tocco-min); height: var(--tocco-min); display: grid; place-items: center;
  background: none; border: 0; color: var(--testo-primario); cursor: pointer;
}
.cerca-sito__chiudi svg { width: 22px; height: 22px; }
.cerca-sito__form { width: 100%; max-width: 46rem; margin-top: var(--sp-5); }
.cerca-sito__form input { min-height: 60px; font-size: var(--testo-lg); background: var(--superficie-elevata); }
.cerca-sito__frequenti { margin-top: var(--sp-8); }
.cerca-sito__frequenti ul, .drawer__catalogo ul { list-style: none; margin: 0; padding: 0; }
.cerca-sito__frequenti ul { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cerca-sito__frequenti a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sp-4);
  border: 1px solid var(--bordo-forte); border-radius: var(--raggio-pill);
  font-size: var(--testo-sm); color: var(--testo-primario); text-decoration: none;
  transition: background-color var(--moto-rapida) var(--curva-entrata), color var(--moto-rapida) var(--curva-entrata);
}
.cerca-sito__frequenti a:hover { background: var(--caffe-900); border-color: var(--caffe-900); color: var(--pietra-025); }
.ricerca-aperta body { overflow: hidden; }

/* Menu esteso */
.drawer__titolo {
  font-size: var(--testo-2xs); font-weight: var(--peso-semi);
  letter-spacing: var(--spaziatura-label); text-transform: uppercase; color: var(--testo-accento);
  margin-bottom: var(--sp-3);
}
.drawer__cerca {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%;
  min-height: 52px; margin-top: var(--sp-6); padding: 0 var(--sp-4);
  background: var(--superficie-elevata); border: 1px solid var(--bordo-forte);
  font: inherit; font-size: var(--testo-base); color: var(--testo-terziario); text-align: left; cursor: pointer;
}
.drawer__cerca svg { width: 18px; height: 18px; color: var(--testo-terziario); }
.drawer__cerca:hover { border-color: var(--caffe-900); color: var(--testo-primario); }
.drawer__catalogo { margin-top: var(--sp-8); }
.drawer__catalogo a {
  display: flex; align-items: center; min-height: 40px;
  font-size: var(--testo-base); color: var(--testo-secondario); text-decoration: none;
}
.drawer__catalogo a:hover { color: var(--testo-brand); }
.drawer__indirizzo { margin-top: var(--sp-2); }

/* Stato della sede, versione compatta (menu e piè di pagina) */
.stato-sede--compatto { margin-top: var(--sp-3); font-size: var(--testo-xs); }
.stato-sede--compatto .stato-sede__ora { display: none; }
.footer .stato-sede:not(.stato-sede--vivo) { display: none; }
.stato-sede--scuro { color: var(--testo-su-scuro-sec); }
.stato-sede--scuro .stato-sede__testo strong { color: var(--testo-su-scuro); }
.stato-sede--scuro[data-aperto="true"] .stato-sede__punto,
.stato-sede--scuro[data-aperto="true"] .stato-sede__punto::after { background: #5FB58A; }
.footer__orari { font-size: var(--testo-xs); margin-top: var(--sp-5); }

@media (prefers-reduced-motion: no-preference) {
  .cerca-sito[open] { animation: cerca-scende 0.45s var(--curva-entrata); }
  .cerca-sito[open]::backdrop { animation: velo-entra 0.4s var(--curva-entrata); }
  .cerca-sito.chiude { animation: cerca-sale 0.18s var(--curva-uscita) forwards; }
}
@keyframes cerca-scende { from { transform: translateY(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cerca-sale { to { transform: translateY(-16px); opacity: 0; } }

/* ==========================================================================
   Header, menu e piè di pagina — blocco 3, movimento (30 ottobre 2026)
   Logica in cinetica.js (intestazioneScorrimento); colonne del piè di
   pagina in scaletta con .rivela (app.js); claim che si svela
   (titoliSvelati). Versione precedente in
   foto-sorgenti/archivio-sezioni/header-footer-v3/.
   ========================================================================== */
/* Intestazione che si assottiglia: la fascia alta esce dallo schermo e il
   contenuto si ricentra, senza cambiare l'altezza nel flusso della pagina */
.header { transition: background-color var(--dur-media) var(--ease-standard), border-color var(--dur-media) var(--ease-standard), transform 0.45s var(--curva-entrata); }
.header__interno, .marchio { transition: transform 0.45s var(--curva-entrata); }
.header[data-compatto="true"] { transform: translateY(-20px); }
.header[data-compatto="true"] .header__interno { transform: translateY(10px); }
.header[data-compatto="true"] .marchio { transform: scale(0.88); transform-origin: left center; }
.header[data-nascosto="true"] { transform: translateY(-100%); box-shadow: none; }
/* Chi sta attaccato sotto l'intestazione la segue */
.catalogo-indice { top: var(--header-visibile, var(--header-h)); transition: top 0.45s var(--curva-entrata); }
@media (min-width: 700px) { .barra-materiale { top: var(--header-visibile, var(--header-h)); } }
@media (prefers-reduced-motion: reduce) {
  .header, .header__interno, .marchio, .catalogo-indice { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Hamburger: al passaggio le righe si accorciano a scalare */
  .apri-menu__riga { transform-box: fill-box; transform-origin: right center; transition: transform 0.35s var(--curva-entrata); }
  .apri-menu:hover .apri-menu__riga:nth-child(2) { transform: scaleX(0.62); }
  .apri-menu:hover .apri-menu__riga:nth-child(3) { transform: scaleX(0.8); transition-delay: 0.05s; }

  /* Menu: la X ruota al suo posto, le voci salgono in scaletta */
  .drawer .chiudi-menu svg { transition: transform 0.6s var(--curva-entrata); transform: rotate(-90deg); }
  .drawer[data-aperto="true"] .chiudi-menu svg { transform: none; }
  .drawer .nav-mobile__lista > li,
  .drawer .drawer__cerca, .drawer .drawer__catalogo, .drawer .drawer__azioni, .drawer .drawer__contatti {
    opacity: 0; transform: translateX(24px);
    transition: opacity 0.2s var(--curva-uscita), transform 0.2s var(--curva-uscita);
  }
  .drawer[data-aperto="true"] .nav-mobile__lista > li,
  .drawer[data-aperto="true"] .drawer__cerca, .drawer[data-aperto="true"] .drawer__catalogo,
  .drawer[data-aperto="true"] .drawer__azioni, .drawer[data-aperto="true"] .drawer__contatti {
    opacity: 1; transform: none;
    transition: opacity 0.6s var(--curva-entrata), transform 0.7s var(--curva-entrata);
  }
  .drawer[data-aperto="true"] .nav-mobile__lista > li:nth-child(1) { transition-delay: 0.12s; }
  .drawer[data-aperto="true"] .nav-mobile__lista > li:nth-child(2) { transition-delay: 0.16s; }
  .drawer[data-aperto="true"] .nav-mobile__lista > li:nth-child(3) { transition-delay: 0.20s; }
  .drawer[data-aperto="true"] .nav-mobile__lista > li:nth-child(4) { transition-delay: 0.24s; }
  .drawer[data-aperto="true"] .nav-mobile__lista > li:nth-child(5) { transition-delay: 0.28s; }
  .drawer[data-aperto="true"] .nav-mobile__lista > li:nth-child(6) { transition-delay: 0.32s; }
  .drawer[data-aperto="true"] .drawer__cerca { transition-delay: 0.38s; }
  .drawer[data-aperto="true"] .drawer__catalogo { transition-delay: 0.44s; }
  .drawer[data-aperto="true"] .drawer__azioni { transition-delay: 0.50s; }
  .drawer[data-aperto="true"] .drawer__contatti { transition-delay: 0.56s; }
}

/* ==========================================================================
   Revisione generale (2 novembre 2026) — tocco e leggibilità sui telefoni
   · Briciole, «Come si ottiene» e recapiti dei Contatti misuravano 17–30 px
     d'altezza: area di tocco portata a 44 px senza spostare l'impaginazione
     (padding compensato da margine negativo).
   · Le etichette maiuscole da 11 px salgono a 12 px sotto i 700 px: su schermi
     piccoli e in piena luce 11 px spaziati si leggono a fatica.
   Versione precedente: foto-sorgenti/archivio-sezioni/sito-completo-2026-11-02/
   ========================================================================== */
@media (max-width: 700px) {
  :root { --testo-2xs: 0.75rem; }
}
@media (pointer: coarse) {
  .briciole a { display: inline-block; padding-block: 11px; margin-block: -11px; }
  .card-finitura__dettagli summary { min-height: var(--tocco-min); }
  .canale__valore { display: inline-block; padding-block: 7px; margin-block: -7px; }
}
/* Intestazione divisa sotto i 900 px: le due colonne si impilano e il blocco
   del sommario (spesso un <div> con sommario e link) toccava il titolo. */
@media (max-width: 899px) {
  .intestazione-sezione--divisa > * + * { margin-top: var(--sp-4); }
}

/* ==========================================================================
   Galleria «Le finiture, posate» nella pagina Lavorazioni (3 novembre 2026)
   Una scena larga in apertura, poi sei in griglia 3 × 2: le sette immagini
   chiudono pari. Sui telefoni una colonna; tra 620 e 899 px due colonne
   (la larga resta a tutta riga). Il visore è quello di rustiche.js.
   ========================================================================== */
.galleria-lav { display: grid; gap: var(--sp-6); margin-top: var(--sp-10); }
@media (min-width: 620px) { .galleria-lav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .galleria-lav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.galleria-lav__voce { margin: 0; }
.galleria-lav__voce--larga { grid-column: 1 / -1; }
.galleria-lav__voce .opera__apri { aspect-ratio: 3 / 2; }
.galleria-lav__voce--larga .opera__apri { aspect-ratio: 21 / 9; }
@media (max-width: 619px) { .galleria-lav__voce--larga .opera__apri { aspect-ratio: 3 / 2; } }
.galleria-lav__voce img { width: 100%; height: 100%; object-fit: cover; }
.galleria-lav__voce figcaption {
  margin-top: var(--sp-3);
  font-size: var(--testo-xs); letter-spacing: var(--spaziatura-label);
  text-transform: uppercase; color: var(--testo-terziario);
}

/* ==========================================================================
   Video di testata sui telefoni (3 novembre 2026): home e Azienda hanno una
   versione verticale (data-src-mobile), già ritagliata nel formato della
   testata. La foto sotto ha la stessa inquadratura, così la dissolvenza non
   si vede; il pulsante di pausa della home sta sul video, non sotto il testo.
   ========================================================================== */
@media (max-width: 899px) {
  .hero-ed__media img { object-position: 55% 50%; }
  .hero-ed__video, .testata__video { object-position: 50% 50%; }
  .hero-ed__pausa {
    top: calc(min(125vw, 72svh) - var(--tocco-min) - var(--sp-4));
    bottom: auto;
  }
}