/* ============================================================================
   SITE — Alfra Pianoforti
   ----------------------------------------------------------------------------
   Impianto `diagonale`: la griglia si rompe di proposito — colonne sfalsate,
   fotografie che escono dal contenitore, allineamenti che cambiano da una
   sezione all'altra. Respiro `compatto`, forma `morbida` (raggi generosi,
   superfici piene, separazione affidata al colore e non ai bordi).
   ========================================================================= */

/* ——— Tipografia ————————————————————————————————————————————————————————— */

h1, h2, h3 {
  font-weight: 400;   /* Instrument Serif ha un peso solo */
}

h4 { font-weight: 400; }

body { font-weight: 300; }

strong, b { font-weight: 400; }

.occhiello {
  font-family: var(--font-testo);
  font-size: var(--t-piccolo);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accento);
  margin-bottom: 0.6rem;
}

.occhiello--chiaro { color: var(--accento-chiaro); }

.collegamento {
  color: var(--accento);
  text-decoration-color: color-mix(in srgb, var(--accento) 40%, transparent);
  text-underline-offset: 0.3em;
}

.collegamento:hover { text-decoration-color: currentColor; }

/* ——— Pulsanti — larghi quanto il testo, non quanto la colonna ——————————— */

.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 2.875rem;
  padding: 0.7rem 1.6rem;
  border-radius: var(--raggio-interattivo);
  background: var(--accento);
  color: var(--su-accento);
  font-size: var(--t-piccolo);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background var(--durata-breve) var(--curva),
              transform var(--durata-breve) var(--curva);
}

.pulsante:hover {
  background: #5c0c13;
  transform: translateY(-2px);
}

.pulsante--fantasma {
  background: color-mix(in srgb, var(--accento) 10%, transparent);
  color: var(--accento);
}

.su-scuro .pulsante--fantasma {
  background: color-mix(in srgb, #ffffff 14%, transparent);
  color: var(--su-scuro);
}

.pulsante--fantasma:hover {
  background: color-mix(in srgb, var(--accento) 18%, transparent);
}

.su-scuro .pulsante--fantasma:hover {
  background: color-mix(in srgb, #ffffff 24%, transparent);
}

/* ——— Testata ————————————————————————————————————————————————————————————
   Fondo pieno, non vetro: un fondo semitrasparente lascia il testo misurato
   contro il body invece che contro la barra, e un backdrop-filter renderebbe
   la testata containing block per il pannello mobile. */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fondo);
  transition: box-shadow var(--durata) var(--curva);
}

.testata.e-staccata { box-shadow: 0 1px 0 var(--bordo), 0 0.75rem 1.5rem -1.25rem rgba(22, 17, 15, 0.4); }

.testata__riga {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: 0.9rem;
}

.testata__marchio { display: block; flex-shrink: 0; }

.testata__marchio img {
  width: clamp(6.5rem, 12vw, 8.75rem);
  height: auto;
}

.testata__menu {
  display: none;
  gap: clamp(0.9rem, 2vw, 1.9rem);
  margin: 0;
}

.testata__menu a {
  font-size: var(--t-piccolo);
  letter-spacing: 0.03em;
  text-decoration: none;
  color: var(--testo);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color var(--durata-breve) var(--curva),
              border-color var(--durata-breve) var(--curva);
}

.testata__menu a:hover {
  color: var(--accento);
  border-bottom-color: var(--accento);
}

.testata__telefono {
  display: none;
  margin-left: auto;
  font-size: var(--t-piccolo);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--accento);
  white-space: nowrap;
}

.testata__telefono:hover { text-decoration: underline; }

.testata__bottone {
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--raggio-interattivo);
  background: var(--fondo-alt);
}

.testata__hamburger,
.testata__hamburger::before,
.testata__hamburger::after {
  display: block;
  width: 1.15rem;
  height: 1px;
  background: var(--testo);
  transition: transform var(--durata-breve) var(--curva),
              opacity var(--durata-breve) var(--curva);
}

.testata__hamburger { position: relative; }

.testata__hamburger::before,
.testata__hamburger::after {
  content: '';
  position: absolute;
  left: 0;
}

.testata__hamburger::before { top: -0.34rem; }
.testata__hamburger::after { top: 0.34rem; }

[aria-expanded='true'] .testata__hamburger { background: transparent; }
[aria-expanded='true'] .testata__hamburger::before { transform: translateY(0.34rem) rotate(45deg); }
[aria-expanded='true'] .testata__hamburger::after { transform: translateY(-0.34rem) rotate(-45deg); }

@media (min-width: 62rem) {
  .testata__menu { display: flex; }
  .testata__telefono { display: block; }
  .testata__bottone { display: none; }
}

/* ——— Pannello del menu mobile ——————————————————————————————————————————— */

.pannello-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--scuro);
  color: var(--su-scuro);
  padding: 6rem var(--gronda) 2rem;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--durata) var(--curva), visibility var(--durata);
}

.menu-aperto .pannello-menu { opacity: 1; visibility: visible; }
.menu-aperto { overflow: hidden; }

.pannello-menu ul { display: grid; gap: 0.35rem; margin: 0; }

.pannello-menu a {
  display: block;
  padding-block: 0.5rem;
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  line-height: 1.15;
  letter-spacing: var(--spaziatura-titoli);
  text-decoration: none;
  color: var(--su-scuro);
}

.pannello-menu__nap {
  margin-top: 2rem;
  font-size: var(--t-piccolo);
  color: var(--su-scuro-tenue);
}

.pannello-menu__nap a { color: var(--su-scuro); }

/* ═══ 1. APERTURA ═══════════════════════════════════════════════════════ */

.apertura { position: relative; }

.apertura__scena {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Il tetto a 60rem non è un vezzo: su uno schermo molto alto una scena
     legata solo a 100svh diventa una fotografia con il titolo in fondo e
     mezzo schermo di vuoto sopra. */
  min-height: min(calc(100svh - var(--altezza-header, 5rem)), 60rem);
  /* Fondo pieno sotto le fotografie: il velo lo porta comunque a questo
     colore là dove sta il testo, e senza un fondo opaco l'inchiostro chiaro
     risulterebbe misurato contro il bianco del body. */
  background: var(--scuro);
}

/* Quando la scena è pinnata riempie lo schermo esatto: qualche pixel di
   scarto fra l'altezza della scena e quella del viewport diventa una striscia
   bianca sotto l'apertura per tutta la durata del pin. */
.e-sequenza .apertura__scena {
  min-height: calc(100svh - var(--altezza-header, 5rem));
  height: calc(100svh - var(--altezza-header, 5rem));
}

/* Il ritaglio sta qui e non sulla scena: sulla scena taglierebbe il testo
   quando su uno schermo stretto il contenuto supera l'altezza minima. */
.apertura__sfondi {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.apertura__sfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 900ms var(--curva);
}

.apertura__sfondo.e-attivo { opacity: 1; }

.apertura__velo {
  position: absolute;
  inset: 0;
  /* Un velo solo, non due sovrapposti: due gradienti si moltiplicano e la
     fotografia sparisce. Denso dove sta il testo, quasi assente a destra. */
  background: linear-gradient(102deg,
    rgba(28, 13, 16, 0.92) 0%,
    rgba(28, 13, 16, 0.78) 34%,
    rgba(28, 13, 16, 0.32) 62%,
    rgba(28, 13, 16, 0.14) 100%);
}

.apertura__griglia {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: end;
  padding-block: clamp(1.5rem, 4vh, 3.5rem);
  width: 100%;
}

.apertura__testo { max-width: 44rem; }

.apertura h1 {
  margin-bottom: 1rem;
  font-size: clamp(2.25rem, 1.35rem + 4.2vw, 5.4rem);
  text-wrap: balance;
}

.apertura__sottotitolo {
  max-width: 34rem;
  color: var(--su-scuro-tenue);
  margin-bottom: 1.5rem;
}

.apertura__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.apertura__carte { position: relative; }

/* Stato di riposo: le tre carte stanno una sotto l'altra e si leggono tutte.
   Diventano una sequenza sovrapposta solo quando site.js accende il pin
   (`.e-sequenza`): se il pin non c'è — schermo troppo alto, JS spento — non
   sparisce nessun contenuto. */
.carta-stato {
  border-radius: var(--raggio);
  background: var(--scuro-alt);
  padding: 1.1rem 1.3rem;
  margin-bottom: 0.5rem;
}

.e-sequenza .carta-stato {
  position: absolute;
  inset: auto 0 2.6rem 0;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition: opacity 500ms var(--curva), transform 500ms var(--curva), visibility 500ms;
}

.e-sequenza .carta-stato.e-attivo {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.carta-stato__chiave {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: var(--spaziatura-titoli);
  color: var(--accento-chiaro);
  margin-bottom: 0.4rem;
}

.carta-stato__testo {
  font-size: var(--t-piccolo);
  color: var(--su-scuro-tenue);
  margin: 0;
}

.apertura__indice {
  display: none;
  gap: 0.4rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.apertura__indice li {
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, #ffffff 25%, transparent);
  transition: background var(--durata) var(--curva);
}

.apertura__indice li.e-attivo { background: var(--accento-chiaro); }

.e-sequenza .apertura__indice { display: flex; position: absolute; left: 0; bottom: 0; }
.e-sequenza .apertura__carte { min-height: 11.5rem; }

@media (min-width: 62rem) {
  .apertura__griglia {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.85fr);
    align-items: end;
  }
}

/* ═══ 2. RIFERIMENTI — la fascia sfalsata ═══════════════════════════════ */

.riferimenti {
  background: var(--fondo-alt);
  padding-block: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

.riferimenti__griglia {
  display: grid;
  gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Diagonale: ogni voce scende un gradino rispetto alla precedente. */
@media (min-width: 48rem) {
  .riferimenti__griglia > *:nth-child(2) { transform: translateY(0.75rem); }
  .riferimenti__griglia > *:nth-child(3) { transform: translateY(1.5rem); }
  .riferimenti__griglia > *:nth-child(4) { transform: translateY(2.25rem); }
  .riferimenti { padding-bottom: calc(clamp(1.75rem, 1.2rem + 2vw, 3rem) + 2.25rem); }
}

.riferimenti__chiave {
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  line-height: 1.1;
  letter-spacing: var(--spaziatura-titoli);
  color: var(--accento);
}

.riferimenti__voce {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}

/* ═══ 3. LABORATORIO ════════════════════════════════════════════════════ */

.laboratorio__griglia {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.laboratorio__foto img {
  width: 100%;
  border-radius: var(--raggio);
  object-fit: cover;
}

.laboratorio__foto--alta img { aspect-ratio: 4 / 5; }
.laboratorio__foto--sporgente img { aspect-ratio: 16 / 9; }

.laboratorio h2 {
  max-width: 20ch;
  margin-bottom: 1.25rem;
}

.laboratorio__corpo > p { margin-bottom: 0.9rem; }

.laboratorio__corpo p { max-width: 42rem; }

.laboratorio__firma {
  margin-top: 1.25rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--accento);
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  font-style: italic;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--testo);
}

@media (min-width: 62rem) {
  .laboratorio__griglia {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .laboratorio__foto--alta {
    grid-column: 1 / span 4;
    grid-row: 1;
    margin-top: 3.5rem;
    /* Sporge oltre la gronda sinistra: la griglia si rompe di proposito. */
    margin-left: calc(var(--gronda) * -1);
  }
  .laboratorio__foto--alta img {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .laboratorio__testo {
    grid-column: 6 / span 7;
    grid-row: 1;
  }
  .laboratorio__foto--sporgente {
    grid-column: 2 / span 4;
    grid-row: 2;
    margin-top: -6rem;
  }
}

/* ═══ 4. PROCESSO — la sezione pinnata ══════════════════════════════════ */

.processo {
  background: var(--fondo-alt);
  overflow: hidden;
}

.processo__scena {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: var(--spazio-sezione);
}

.processo__intestazione h2 { max-width: 18ch; margin-bottom: 0.75rem; }

.processo__nota { color: var(--testo-tenue); }

/* A riposo la pista è un contenitore come gli altri: le cinque tappe stanno
   in griglia e si leggono tutte. Diventa una pista orizzontale solo quando
   site.js pinna la sezione (`.e-pista`) — cioè quando lo schermo è abbastanza
   basso perché una scena a tutta altezza abbia senso. */
.processo__pista {
  width: 100%;
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--gronda);
}

.processo__passi {
  display: grid;
  gap: clamp(0.9rem, 2vw, 1.5rem);
  margin: 0;
  padding: 0;
}

.passo {
  border-radius: var(--raggio);
  background: var(--fondo);
  padding: clamp(1.1rem, 2vw, 1.6rem);
}

.passo__numero {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  line-height: 1;
  /* Valore letterale, non `color-mix`: il colore calcolato esce come
     `color(srgb …)` e la misura di leggibilità del renderizzato lo legge come
     un colore diverso da quello che si vede. */
  color: #c5a3a7;
  margin-bottom: 0.5rem;
}

.passo h3 {
  font-size: var(--t-h4);
  margin-bottom: 0.5rem;
}

.passo p {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  margin: 0;
}

@media (min-width: 48rem) {
  .processo__passi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .processo__passi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Diagonale: la seconda fila di tappe scende di un gradino. */
  .processo__passi > *:nth-child(n + 4) { transform: translateY(0.75rem); }
}

.processo.e-pista { height: calc(100svh - var(--altezza-header, 5rem)); }
.processo.e-pista .processo__scena { height: 100%; padding-block: 0; }
.processo.e-pista .processo__pista {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  overflow: visible;
}
.processo.e-pista .processo__passi {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: min(21rem, 30vw);
  width: max-content;
  padding-inline: var(--gronda);
}
/* Diagonale anche qui: le tappe salgono e scendono lungo la pista. */
.processo.e-pista .passo:nth-child(even) { transform: translateY(1.75rem); }
.processo.e-pista .passo:nth-child(odd) { transform: none; }

/* ═══ 5. LAVORAZIONI ════════════════════════════════════════════════════ */

.servizi__testa { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.servizi__testa h2 { max-width: 24ch; margin-bottom: 0.9rem; }
.servizi__introduzione { color: var(--testo-tenue); }

.servizi__griglia {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin: 0;
}

.servizio {
  border-radius: var(--raggio-piccolo);
  background: var(--fondo-alt);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  transition: background var(--durata) var(--curva);
}

.servizio:hover { background: #e9e2e3; }

.servizio h3 {
  font-size: var(--t-h4);
  color: var(--accento);
  margin-bottom: 0.45rem;
}

.servizio p {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
  margin: 0;
}

/* Diagonale: la griglia dei servizi sfalsa la seconda e la terza colonna. */
@media (min-width: 62rem) {
  .servizi__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .servizi__griglia > *:nth-child(3n + 2) { transform: translateY(1.25rem); }
  .servizi__griglia > *:nth-child(3n) { transform: translateY(2.5rem); }
  .servizi { padding-bottom: calc(var(--spazio-sezione) + 2.5rem); }
}

/* ═══ 6. VERNICIATURA — l'unica superficie con la texture animata ═══════ */

.verniciatura {
  position: relative;
  background: var(--scuro);
  padding-block: var(--spazio-sezione);
  overflow: hidden;
}

.verniciatura__grana {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  pointer-events: none;
}

.verniciatura__griglia {
  position: relative;
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.verniciatura h2 { max-width: 18ch; margin-bottom: 1rem; }

.verniciatura__testo p { margin-bottom: 0.9rem; max-width: 40rem; }

.verniciatura__coda {
  font-family: var(--font-titoli);
  font-style: italic;
  font-size: var(--t-h4);
  color: var(--accento-chiaro);
  line-height: 1.35;
}

.verniciatura__figura { margin: 0; }

.verniciatura__figura img {
  width: 100%;
  border-radius: var(--raggio);
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.verniciatura__figura figcaption {
  margin-top: 0.6rem;
  font-size: var(--t-piccolo);
  color: var(--su-scuro-tenue);
}

@media (min-width: 62rem) {
  .verniciatura__griglia {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
  .verniciatura__figura {
    /* Sporge oltre la gronda destra. */
    margin-right: calc(var(--gronda) * -1);
    transform: translateY(2rem);
  }
  .verniciatura__figura img {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* ═══ 7. LAVORI ═════════════════════════════════════════════════════════ */

.lavori__testa { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.lavori__testa h2 { margin-bottom: 0.9rem; }
.lavori__testa p { color: var(--testo-tenue); }

.lavori__mosaico {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
}

.lavori__pezzo { margin: 0; }

.lavori__pezzo img {
  width: 100%;
  border-radius: var(--raggio);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.lavori__pezzo--largo img { aspect-ratio: 16 / 9; }
.lavori__pezzo--basso img { aspect-ratio: 3 / 2; }

.lavori__pezzo figcaption {
  margin-top: 0.55rem;
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}

@media (min-width: 62rem) {
  .lavori__mosaico {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .lavori__pezzo--largo { grid-column: 1 / span 7; }
  .lavori__pezzo--largo + .lavori__pezzo { grid-column: 8 / span 5; grid-row: 1 / span 2; }
  .lavori__pezzo--largo + .lavori__pezzo img { aspect-ratio: 3 / 4; }
  .lavori__mosaico > *:nth-child(3) { grid-column: 1 / span 4; margin-top: 1.5rem; }
  .lavori__pezzo--basso { grid-column: 5 / span 3; margin-top: 1.5rem; }
}

/* ═══ 8. IN VENDITA ═════════════════════════════════════════════════════ */

.vendita { background: var(--fondo-alt); }

.vendita__griglia {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.vendita__testa h2 { max-width: 16ch; margin-bottom: 0.9rem; }
.vendita__testa p { color: var(--testo-tenue); max-width: 34rem; margin-bottom: 0.9rem; }

.vendita__elenco {
  display: grid;
  gap: 0.5rem;
  margin: 0;
}

.vendita__voce {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-radius: var(--raggio-piccolo);
  background: var(--fondo);
  padding: 0.9rem 1.2rem;
}

.vendita__tipo {
  flex-shrink: 0;
  min-width: 5.5rem;
  font-size: var(--t-piccolo);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accento);
}

.vendita__nome {
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  line-height: 1.2;
  letter-spacing: var(--spaziatura-titoli);
  margin: 0;
}

/* Letterale e non `color-mix`: il fondo calcolato usciva come
   `color(srgb 0.945 0.944 0.943)` e la misura sul renderizzato lo leggeva
   come quasi nero — due voci finite in `sotto_soglia` per un colore che a
   schermo era grigio chiarissimo. */
.vendita__voce--extra { background: #f0efef; }

@media (min-width: 62rem) {
  .vendita__griglia { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; }
  .vendita__elenco { transform: translateY(1.5rem); }
}

/* ═══ 9. CLIENTI ════════════════════════════════════════════════════════ */

.clienti__testa { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.clienti__testa h2 { max-width: 22ch; margin-bottom: 0.75rem; }
.clienti__testa p { color: var(--testo-tenue); }

.clienti__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  margin: 0;
  padding: clamp(1rem, 2vw, 1.5rem) 0;
}

.clienti__fila img {
  width: auto;
  height: clamp(2.25rem, 4vw, 3.25rem);
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter var(--durata) var(--curva), opacity var(--durata) var(--curva);
}

.clienti__fila li:hover img { filter: none; opacity: 1; }

.clienti__coda {
  font-size: var(--t-piccolo);
  color: var(--testo-tenue);
}

/* ═══ 10. DOMANDE ═══════════════════════════════════════════════════════ */

.domande { background: var(--fondo-alt); }

.domande__griglia {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.domande__testa h2 { max-width: 14ch; }

.domande__elenco {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
}

.domanda {
  border-radius: var(--raggio-piccolo);
  background: var(--fondo);
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.domanda h3 {
  font-size: var(--t-h4);
  color: var(--accento);
  margin-bottom: 0.45rem;
}

.domanda p { margin: 0; color: var(--testo-tenue); }

@media (min-width: 62rem) {
  .domande__griglia { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); align-items: start; }
  .domande__testa { position: sticky; top: calc(var(--altezza-header, 5rem) + 2rem); }
  .domande__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══ 11. CONTATTI ══════════════════════════════════════════════════════ */

.contatti__griglia { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }

.contatti__testa h2 { max-width: 14ch; margin-bottom: 0.9rem; }
.contatti__testa p { color: var(--testo-tenue); max-width: 34rem; }

.contatti__schede {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.scheda-contatto {
  border-radius: var(--raggio-piccolo);
  background: var(--fondo-alt);
  padding: clamp(1.1rem, 2vw, 1.5rem);
}

.scheda-contatto h3 {
  font-family: var(--font-testo);
  font-size: var(--t-piccolo);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-bottom: 0.6rem;
}

.scheda-contatto p { font-size: var(--t-piccolo); color: var(--testo-tenue); margin-bottom: 0.35rem; }
.scheda-contatto p:last-child { margin-bottom: 0; }
.scheda-contatto a { color: var(--accento); }

.contatti__grande {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  line-height: 1.1;
  letter-spacing: var(--spaziatura-titoli);
  text-decoration: none;
  word-break: break-word;
}

.contatti__grande:hover { text-decoration: underline; }

.contatti__indirizzo {
  font-style: normal;
  font-family: var(--font-titoli);
  font-size: var(--t-h4);
  line-height: 1.25;
  color: var(--testo);
  margin-bottom: 0.5rem;
}

.contatti__azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; }

@media (min-width: 62rem) {
  .contatti__griglia { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .contatti__testa { grid-row: span 2; }
  .contatti__azioni { grid-column: 2; }
}

/* ═══ Piede ═════════════════════════════════════════════════════════════ */

.piede {
  background: var(--scuro);
  padding-top: var(--spazio-sezione);
  overflow: hidden;
}

.piede__griglia {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* Il logotipo è nero su trasparente: sul piede scuro va invertito, non
   ridisegnato. */
.piede__marchio {
  width: clamp(7rem, 14vw, 10rem);
  height: auto;
  filter: invert(1);
  opacity: 0.9;
}

.piede__nome {
  font-family: var(--font-titoli);
  font-size: var(--t-h3);
  line-height: 1;
  letter-spacing: var(--spaziatura-titoli);
  margin-bottom: 0.75rem;
}

.piede address {
  font-style: normal;
  color: var(--su-scuro-tenue);
  margin-bottom: 0.5rem;
}

.piede a { color: var(--su-scuro); }

.piede__dati p { color: var(--su-scuro-tenue); font-size: var(--t-piccolo); }

.piede__menu ul { display: grid; gap: 0.35rem; margin: 0; }

.piede__menu a {
  font-size: var(--t-piccolo);
  color: var(--su-scuro-tenue);
  text-decoration: none;
}

.piede__menu a:hover { color: var(--su-scuro); text-decoration: underline; }

.piede__coda {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: 1.1rem;
}

.piede__coda p { color: var(--su-scuro-tenue); }

@media (min-width: 56rem) {
  .piede__griglia { grid-template-columns: auto minmax(0, 1fr) auto; }
}

/* A schermo stretto il mosaico dei lavori resta in due colonne invece che in
   una sola: quattro fotografie in colonna sarebbero mezzo chilometro. */
@media (min-width: 34rem) and (max-width: 61.99rem) {
  .lavori__mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lavori__pezzo--largo { grid-column: span 2; }
}

/* ——— Movimento ridotto: nessuna diagonale che dipenda dal transform va
       persa, ma le scene pinnate tornano a scorrere normalmente. ————————— */

/* Ramo `prefers-reduced-motion`: site.js esce prima di accendere i pin, quindi
   né `.e-sequenza` né `.e-pista` arrivano mai — le carte dell'apertura e le
   cinque tappe restano nella loro forma a riposo, tutte visibili. Qui resta
   solo da fermare la lente sulle fotografie. */
@media (prefers-reduced-motion: reduce) {
  .apertura__sfondo { transform: none; }
  .servizio, .apertura__sfondo, .clienti__fila img { transition: none; }
}