/* ============================================================
   ARZANI COSTRUZIONI — Design system "Basalto"
   Un solo foglio di stile. Token in custom properties.
   Temi per sezione via [data-tema]. Nessun framework.
   ============================================================ */

/* ---------- Font (auto-ostati, subset latin, variabili) ---------- */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/young-serif-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/martian-mono-latin.woff2') format('woff2');
}

/* ---------- Token ---------- */
:root {
  /* Palette Basalto */
  --basalto: #121010;        /* fondo dominante scuro */
  --basalto-2: #1B1817;      /* superficie rialzata su scuro */
  --basalto-3: #262220;      /* bordi/superfici su scuro */
  --ferro: #474340;          /* testo secondario su chiaro */
  --cenere: #A99F92;         /* testo secondario su scuro */
  --osso: #E7E0D3;           /* fondo sezioni chiare */
  --osso-2: #DBD2C0;         /* superficie su chiaro */
  --bronzo: #8C6134;         /* filetti, dettagli grandi su chiaro */
  --rame: #C86A2C;           /* unico accento vivo: CTA, dati, hover */
  --rame-chiaro: #DA7F3F;    /* hover dell'accento su scuro */

  /* Semantici (default: tema scuro) */
  --bg: var(--basalto);
  --bg-rialzato: var(--basalto-2);
  --inchiostro: var(--osso);
  --inchiostro-2: var(--cenere);
  --linea: rgba(231, 224, 211, 0.14);
  --linea-forte: rgba(231, 224, 211, 0.3);

  /* Tipografia */
  --f-display: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --f-testo: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --f-mono: 'Martian Mono', ui-monospace, 'SF Mono', monospace;

  --t-hero: clamp(1.8rem, 0.75rem + 4.7vw, 3.9rem);
  --t-hero-grande: clamp(2.2rem, 1rem + 5vw, 4.5rem);
  --t-sezione: clamp(1.65rem, 1.1rem + 2.5vw, 2.85rem);
  --t-titolo: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem);
  --t-corpo: 1.0625rem;
  --t-piccolo: 0.9375rem;
  --t-mono: 0.72rem;
  --t-mono-micro: 0.62rem;

  /* Spaziatura fluida — la scala, dal grande al piccolo:
     sezione → blocco → giunto → cta → titolo */
  --sp-sezione: clamp(4rem, 2.75rem + 6.5vw, 7.5rem);
  --sp-blocco: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
  --sp-giunto: clamp(1.4rem, 1rem + 2vw, 2.2rem);
  --sp-cta: clamp(1.8rem, 1.4rem + 1.5vw, 2.4rem);
  --sp-titolo: 1rem;
  --sp-titolo-grande: clamp(1.1rem, 0.9rem + 1.3vw, 1.5rem); /* sotto un H1 in scala --t-hero-grande */
  --sp-lato: clamp(1.25rem, 0.6rem + 3.5vw, 4rem);
  --larghezza-max: 76rem;

  /* Movimento */
  --morbido: cubic-bezier(0.25, 1, 0.5, 1);      /* ease-out-quart */
  --deciso: cubic-bezier(0.16, 1, 0.3, 1);       /* ease-out-expo */
  --veloce: 180ms;
  --medio: 320ms;
  --lento: 700ms;

  /* Livelli */
  --z-nav: 40;
  --z-barra-mobile: 50;
  --z-salto: 60;
}

/* Tema chiaro per sezione */
[data-tema="chiaro"] {
  --bg: var(--osso);
  --bg-rialzato: var(--osso-2);
  --inchiostro: var(--basalto);
  --inchiostro-2: var(--ferro);
  --linea: rgba(18, 16, 16, 0.16);
  --linea-forte: rgba(18, 16, 16, 0.4);
}

/* Tema rame: la linea prodotto (blocchi) */
[data-tema="rame"] {
  --bg: var(--rame);
  --bg-rialzato: #B95F24;
  --inchiostro: var(--basalto);
  --inchiostro-2: #241407;
  --linea: rgba(18, 16, 16, 0.25);
  --linea-forte: rgba(18, 16, 16, 0.5);
}

/* ---------- Reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul[class], ol[class] { list-style: none; }
a { color: inherit; }

body {
  background: var(--basalto);
  color: var(--osso);
  font-family: var(--f-testo);
  font-size: var(--t-corpo);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Grana materica: feTurbulence in SVG, opacità minima */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%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");
}

::selection { background: var(--rame); color: var(--basalto); }

/* ---------- Focus visibile ovunque ---------- */
:focus-visible {
  outline: 2px solid var(--rame);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Nelle sezioni chiare il rame da solo sta a 2.88:1 sul fondo osso, sotto
   il minimo di 3:1 per un indicatore non testuale. L'anello portante
   diventa allora il basalto (14.4:1 su osso, 12.6:1 su osso-2, 5:1 sul
   rame di .b-primario) e il rame resta come alone esterno: il segnale di
   marca non cambia, cambia cio' che lo rende leggibile.
   Nessun token nuovo. Fuori campo restano il tema scuro, il tema rame e
   la barra .ancore, che sta fuori da ogni [data-tema] e tiene il suo
   outline-offset negativo perche' l'ul scorre in orizzontale. */
[data-tema="chiaro"] a:focus-visible,
[data-tema="chiaro"] button:focus-visible,
[data-tema="chiaro"] input:focus-visible,
[data-tema="chiaro"] select:focus-visible,
[data-tema="chiaro"] textarea:focus-visible,
[data-tema="chiaro"] summary:focus-visible,
[data-tema="chiaro"] [tabindex]:focus-visible {
  outline-color: var(--basalto);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--rame);
}

.salta-contenuto {
  position: absolute;
  top: -100%;
  left: var(--sp-lato);
  z-index: var(--z-salto);
  background: var(--rame);
  color: var(--basalto);
  font-weight: 600;
  padding: 0.6em 1em;
  border-radius: 3px;
  transition: top var(--veloce) var(--morbido);
}
.salta-contenuto:focus { top: 0.75rem; }

.solo-lettore {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* ---------- Tipografia base ---------- */
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.08; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--t-hero); letter-spacing: -0.01em; }
h2 { font-size: var(--t-sezione); }
h3 { font-size: var(--t-titolo); line-height: 1.2; }
p  { max-width: 62ch; text-wrap: pretty; }

/* Il punto rame: chiusura tipografica ricorrente dei titoli */
.punto { color: var(--rame); }
[data-tema="rame"] .punto { color: var(--osso); }

.etichetta-mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--inchiostro-2);
}

/* ---------- Struttura ---------- */
.contenitore {
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: var(--sp-lato);
}

/* Le colonne di griglia non devono mai allargarsi oltre il viewport
   per colpa del min-content di una parola lunga */
.hero-griglia > *, .blocchi-griglia > *, .richiamo-griglia > *,
.piede-griglia > *, .lavori-griglia > * { min-width: 0; }

.sezione {
  position: relative;
  background: var(--bg);
  color: var(--inchiostro);
  padding-block: var(--sp-sezione);
}

/* Giunto: la linea di malta tra i blocchi del sito (elemento firma).
   Filetto bronzo che si "stende" quando la sezione entra in vista. */
.giunto {
  height: 1px;
  background: var(--bronzo);
  border: 0;
  margin: 0;
  transform-origin: left center;
}

.testata-sezione { margin-bottom: var(--sp-blocco); }
.testata-sezione .giunto,
.area-testata .giunto,
.richiamo .giunto { margin-bottom: var(--sp-giunto); }
.testata-sezione p { margin-top: var(--sp-titolo); font-size: var(--t-corpo); color: var(--inchiostro-2); }

/* ---------- Bottoni ---------- */
.bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.95em 1.6em;
  border-radius: 3px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--veloce) var(--morbido),
              background-color var(--veloce) var(--morbido),
              border-color var(--veloce) var(--morbido),
              box-shadow var(--veloce) var(--morbido);
}
.bottone:active { transform: translateY(1px); }

/* Velo di cazzuola: passata diagonale al passaggio del mouse */
.bottone::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: linear-gradient(115deg, transparent 42%, rgba(231,224,211,0.28) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}
@media (hover: hover) {
  .bottone:hover::before { transition: transform 600ms var(--deciso); transform: translateX(130%); }
}

.b-primario { background: var(--rame); color: var(--basalto); }
.b-primario:hover { background: var(--rame-chiaro); box-shadow: 0 10px 28px -12px rgba(200, 106, 44, 0.55); }
[data-tema="rame"] .b-primario { background: var(--basalto); color: var(--osso); }
[data-tema="rame"] .b-primario:hover { background: #241E1A; box-shadow: 0 10px 28px -12px rgba(18,16,16,0.6); }

.b-secondario { border-color: var(--linea-forte); color: var(--inchiostro); background: transparent; }
.b-secondario:hover { border-color: var(--inchiostro); }

.b-tel { font-family: var(--f-mono); font-weight: 500; font-size: 0.875rem; letter-spacing: 0.02em; }

/* Link testuali con sottolineatura che si stende */
.link-freccia {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-weight: 600;
  text-decoration: none;
  color: var(--inchiostro);
  padding-bottom: 2px;
  background-image: linear-gradient(var(--rame), var(--rame));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: left bottom;
  transition: background-size var(--medio) var(--deciso);
}
.link-freccia:hover, .link-freccia:focus-visible { background-size: 100% 2px; }
.link-freccia svg { transition: transform var(--veloce) var(--morbido); }
.link-freccia:hover svg { transform: translateX(4px); }

/* ---------- Navigazione ---------- */
.testa {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(18, 16, 16, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
  color: var(--osso);
}
.testa-riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

/* Marchio: logo orizzontale nudo, senza targa ne' padding.
   object-fit: contain tiene le proporzioni dentro il box. */
.marchio { display: inline-flex; text-decoration: none; line-height: 1; }
.marchio-img {
  display: block;
  width: 140px;
  height: 51px;
  max-height: 51px;
  object-fit: contain;
}
@media (min-width: 56.25em) {
  .marchio-img { width: 170px; height: 62px; max-height: 62px; }
}

.nav-voci { display: none; }
@media (min-width: 56.25em) {
  .nav-voci { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.2rem); }
  .nav-voci a {
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--cenere);
    padding-bottom: 2px;
    background-image: linear-gradient(var(--rame), var(--rame));
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: left bottom;
    transition: color var(--veloce) var(--morbido), background-size var(--medio) var(--deciso);
  }
  .nav-voci a:hover, .nav-voci a[aria-current="page"] { color: var(--osso); background-size: 100% 2px; }
}

.testa .b-tel { display: none; }
@media (min-width: 36em) { .testa .b-tel { display: inline-flex; } }

/* Menu mobile: details/summary, funziona senza JS */
.menu-mobile { position: relative; }
@media (min-width: 56.25em) { .menu-mobile { display: none; } }
.menu-mobile summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.6em 0.2em;
  color: var(--osso);
}
.menu-mobile summary::-webkit-details-marker { display: none; }
.menu-mobile summary .righe { display: inline-flex; flex-direction: column; gap: 4px; }
.menu-mobile summary .righe span {
  width: 20px; height: 2px;
  background: var(--osso);
  transition: transform var(--veloce) var(--morbido), opacity var(--veloce) var(--morbido);
}
.menu-mobile[open] summary .righe span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-mobile[open] summary .righe span:nth-child(2) { opacity: 0; }
.menu-mobile[open] summary .righe span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-pannello {
  position: absolute;
  right: 0;
  top: calc(100% + 0.9rem);
  min-width: 15rem;
  background: var(--basalto-2);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 0.5rem;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6);
}
.menu-pannello a {
  display: block;
  padding: 0.8em 1em;
  text-decoration: none;
  font-weight: 500;
  color: var(--osso);
  border-radius: 3px;
}
.menu-pannello a:hover { background: var(--basalto-3); }
.menu-pannello .menu-tel {
  margin-top: 0.35rem;
  border-top: 1px solid var(--linea);
  padding-top: 0.75rem;
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--rame);
}

/* Barra fissa mobile: Chiama + WhatsApp sempre sotto il pollice */
.barra-mobile {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-barra-mobile);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--basalto-3);
  border-top: 1px solid var(--basalto-3);
  padding-bottom: env(safe-area-inset-bottom);
}
.barra-mobile a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3.4rem;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}
.barra-mobile .chiama { background: var(--rame); color: var(--basalto); }
.barra-mobile .whatsapp { background: var(--basalto-2); color: var(--osso); }
@media (min-width: 56.25em) { .barra-mobile { display: none; } }
@media (max-width: 56.24em) { body { padding-bottom: calc(3.4rem + env(safe-area-inset-bottom)); } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--basalto);
  color: var(--osso);
  overflow: clip;
}
.hero-griglia {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 7vh, 5.5rem);
  min-height: calc(100svh - 4.25rem);
}
@media (min-width: 56.25em) {
  .hero-griglia { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

.hero h1 { max-width: 16ch; font-size: var(--t-hero-grande); }
.hero-sotto {
  margin-top: var(--sp-titolo-grande);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  color: var(--cenere);
  max-width: 44ch;
}
.hero-cta { margin-top: var(--sp-cta); display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* --- Hero della homepage ---------------------------------------------
   Tutto ciò che segue è agganciato a .hero-home: .hero, .hero-griglia,
   .hero-sotto, .hero-cta e .hero-3d sono riusate anche dalla pagina
   blocchi, che non deve cambiare. Nessun token nuovo, nessuna libreria. */

/* Microfrase sotto le CTA e riga di fiducia: stessa voce dei testi
   secondari (cenere su basalto, 7.2:1), peso tipografico discreto. */
.hero-postilla,
.hero-fiducia {
  font-size: var(--t-piccolo);
  color: var(--cenere);
  max-width: 46ch;
}
.hero-postilla { margin-top: 1rem; }
.hero-fiducia {
  margin-top: var(--sp-giunto);
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
}

/* CTA telefono: l'etichetta nel carattere di testo, il numero in mono.
   Il mono resta riservato ai numeri, come in tutto il sito, e la riga
   non diventa un blocco monospaziato largo su schermi stretti. */
.hero-home .b-tel {
  font-family: var(--f-testo);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0;
}
.hero-home .b-tel-numero {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Tablet e laptop stretti: due colonne, ma con la colonna testo più
   larga e l'illustrazione più bassa, così titolo e CTA non si
   comprimono contro il riquadro. */
@media (min-width: 56.25em) and (max-width: 68em) {
  .hero-home .hero-griglia {
    gap: 2.25rem;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    padding-block: clamp(2.5rem, 5vh, 4rem);
  }
  .hero-home h1 { font-size: clamp(2rem, 0.9rem + 3.6vw, 3.1rem); }
  .hero-home .hero-3d { max-height: 54vh; }
}

/* Smartphone: colonna singola (default della griglia), bottoni a piena
   larghezza e titolo leggibile anche a 320px. L'aspect-ratio del
   riquadro resta gestito da CSS: l'illustrazione non si deforma. */
@media (max-width: 34em) {
  .hero-home h1 { font-size: clamp(1.95rem, 1.1rem + 4.2vw, 2.7rem); max-width: 18ch; }
  .hero-home .hero-cta { gap: 0.7rem; }
  .hero-home .hero-cta .bottone { width: 100%; justify-content: center; }
  .hero-home .hero-3d { aspect-ratio: 5 / 4; max-height: 44vh; }
}

/* Contenitore dell'animazione 3D (fase 2). Oggi: cantiere in tratto SVG. */
.hero-3d {
  position: relative;
  aspect-ratio: 5 / 4.4;
  max-height: 72vh;
  border: 1px solid var(--linea);
  border-radius: 6px;
  background:
    radial-gradient(58% 42% at 50% 74%, rgba(200, 106, 44, 0.13), transparent 70%),
    linear-gradient(#171412, #0D0B0A);
  overflow: hidden;
}
.hero-3d svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
.hero-3d .quota-angolo {
  position: absolute;
  font-family: var(--f-mono);
  font-size: var(--t-mono-micro);
  letter-spacing: 0.14em;
  color: rgba(231, 224, 211, 0.62);
}
.hero-3d .quota-angolo.basso { bottom: 0.8rem; right: 1rem; color: var(--rame); }

/* Tacche di quota agli angoli del riquadro 3D */
.hero-3d::before, .hero-3d::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--bronzo);
  pointer-events: none;
}
.hero-3d::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero-3d::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Il disegno del cantiere: tratti che si posano per fasi (anteprima del 3D) */
.cantiere-tratto path, .cantiere-tratto line, .cantiere-tratto ellipse { fill: none; stroke-linecap: round; }
.f-terreno { stroke: rgba(169, 159, 146, 0.5); stroke-dasharray: 5 6; }
.f-fondamenta { stroke: rgba(231, 224, 211, 0.5); }
.f-muri, .f-porta { stroke: rgba(231, 224, 211, 0.72); }
.f-tetto { stroke: var(--rame); }

/* ---------- Fascia dati ---------- */
.fascia-dati {
  border-block: 1px solid var(--linea);
  background: var(--basalto);
  color: var(--osso);
}
.fascia-dati ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
}
@media (min-width: 48em) { .fascia-dati ul { grid-template-columns: repeat(4, 1fr); } }
.fascia-dati li {
  padding: 1.4rem clamp(1rem, 2.5vw, 2rem);
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.fascia-dati li:nth-child(even) { border-right: 0; }
@media (min-width: 48em) {
  .fascia-dati li { border-bottom: 0; }
  .fascia-dati li:nth-child(even) { border-right: 1px solid var(--linea); }
  .fascia-dati li:last-child { border-right: 0; }
}
.fascia-dati .dato {
  display: block;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  color: var(--rame);
}
.fascia-dati .dato-nome {
  font-size: var(--t-piccolo);
  color: var(--cenere);
}

/* ---------- Cosa facciamo: i conci ---------- */
.conci {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px; /* il giunto di malta tra i blocchi */
  background: var(--linea);
}
[data-tema="chiaro"] .conci { background: rgba(18,16,16,0.35); }

.concio {
  grid-column: span 12;
  background: var(--basalto);
  color: var(--osso);
  text-decoration: none;
  padding: clamp(1.5rem, 4vw, 2.4rem);
  padding-bottom: clamp(3rem, 6vw, 3.6rem); /* corsia della freccia */
  position: relative;
  transition: background-color var(--veloce) var(--morbido);
}
.concio:hover { background: var(--basalto-2); }

/* Corsi sfalsati come muratura reale (desktop) */
@media (min-width: 48em) {
  .concio:nth-child(1) { grid-column: span 7; }
  .concio:nth-child(2) { grid-column: span 5; }
  .concio:nth-child(3) { grid-column: span 5; }
  .concio:nth-child(4) { grid-column: span 7; }
  .concio:nth-child(5) { grid-column: span 7; }
  .concio:nth-child(6) { grid-column: span 5; }
  .concio:nth-child(7) { grid-column: span 12; }
}
@media (min-width: 36em) and (max-width: 47.99em) {
  .concio { grid-column: span 6; }
  .concio:nth-child(7) { grid-column: span 12; }
}

.concio-numero {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  color: var(--cenere);
  transition: color var(--veloce) var(--morbido);
}
.concio:hover .concio-numero { color: var(--rame); }
.concio h3 { color: var(--osso); margin-bottom: 0.7rem; }
.concio p { font-size: var(--t-piccolo); color: var(--cenere); max-width: 48ch; }
.concio .freccia {
  position: absolute;
  right: clamp(1.5rem, 4vw, 2.4rem);
  bottom: clamp(1.3rem, 3vw, 1.8rem);
  display: inline-flex;
  color: var(--rame);
  transform: translateX(-6px);
  opacity: 0;
  transition: transform var(--medio) var(--deciso), opacity var(--medio) var(--morbido);
}
.concio:hover .freccia, .concio:focus-visible .freccia { transform: translateX(0); opacity: 1; }
@media (hover: none) { .concio .freccia { opacity: 1; transform: none; } }

/* Il settimo concio (blocchi) parla la lingua del prodotto */
.concio-prodotto {
  background: var(--rame);
  color: var(--basalto);
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  padding-bottom: clamp(1.5rem, 4vw, 2.4rem);
}
.concio-prodotto .freccia { position: static; color: var(--basalto); }
.concio-prodotto:hover { background: var(--rame-chiaro); }
.concio-prodotto h3,
.concio-prodotto:hover .concio-numero,
.concio-prodotto .concio-numero { color: var(--basalto); }
.concio-prodotto p { color: #241407; }

/* ---------- Parco mezzi ---------- */
.parco-mezzi { overflow: clip; }
.parco-testata {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.parco-scia {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(15.5rem, 30vw, 20rem);
  gap: clamp(1rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-block: 1.5rem 2rem;
  padding-inline: var(--sp-lato);
  margin-inline: calc(-1 * var(--sp-lato));
  scrollbar-width: thin;
  scrollbar-color: var(--basalto-3) transparent;
}
/* Nastro continuo (solo con JS e senza reduced-motion): niente snap,
   niente barra, bordi sfumati; il trascinamento resta attivo */
.parco-scia.nastro-attivo {
  scroll-snap-type: none;
  scroll-behavior: auto;
  scrollbar-width: none;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000 calc(100% - 3.5rem), transparent);
}
/* La sfumatura dice "c'e' altro da scorrere": sul lato dove il nastro
   e' finito si spegne, cosi' prima e ultima scheda restano interamente
   visibili anche dove il padding e' piu' stretto della sfumatura. */
.parco-scia.nastro-attivo.a-inizio {
  -webkit-mask-image: linear-gradient(90deg, #000, #000 calc(100% - 3.5rem), transparent);
  mask-image: linear-gradient(90deg, #000, #000 calc(100% - 3.5rem), transparent);
}
.parco-scia.nastro-attivo.a-fine {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000);
  mask-image: linear-gradient(90deg, transparent, #000 3.5rem, #000);
}
.parco-scia.nastro-attivo.a-inizio.a-fine {
  -webkit-mask-image: none;
  mask-image: none;
}
.parco-scia.nastro-attivo::-webkit-scrollbar { display: none; }
.parco-scia.nastro-attivo.trascinato { cursor: grabbing; user-select: none; }
.parco-scia.nastro-attivo.trascinato .mezzo { pointer-events: none; }

.mezzo { scroll-snap-align: start; }
.mezzo figure { margin: 0 0 1rem; }
.mezzo h3 { font-size: 1.2rem; margin-bottom: 0.3rem; }
.mezzo .specifica {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  color: var(--cenere);
  text-transform: uppercase;
}
.mezzo p { font-size: var(--t-piccolo); color: var(--cenere); margin-top: 0.55rem; }

/* ---------- Segnaposto foto dichiarati (nessuna stock photo) ---------- */
.ph-foto {
  position: relative;
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: 4px;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(169, 159, 146, 0.09) 14px 15px),
    var(--bg-rialzato);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ph-foto > span {
  font-family: var(--f-mono);
  font-size: var(--t-mono-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inchiostro-2);
  text-align: center;
  padding: 1rem;
  max-width: 90%;
}
.ph-foto::before, .ph-foto::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--bronzo);
}
.ph-foto::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.ph-foto::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

/* Foto vera al posto del segnaposto: stesso contenitore, stesso rapporto,
   stessa cornice. Si aggiunge .posata al .ph-foto e dentro ci va l'<img>.
   Il contenitore resta l'unico responsabile del rapporto d'aspetto (che
   arriva da aspect-ratio inline), l'immagine lo riempie ritagliandosi:
   cosi' le foto del committente entrano con qualunque proporzione nativa
   senza doverle ritagliare a mano una per una.
   Le tacche d'angolo e la trama diagonale spariscono: erano il segno che
   il contenuto mancava. */
.ph-foto.posata {
  background: var(--bg-rialzato);
}
.ph-foto.posata::before, .ph-foto.posata::after { content: none; }
.ph-foto.posata > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Nella sezione blocchi il segnaposto ha fondo rame: con la foto vera
   torna neutro, altrimenti il bordo caldo tinge i margini del ritaglio. */
.blocchi .ph-foto.posata {
  background: var(--bg-rialzato);
  border-color: rgba(18, 16, 16, 0.45);
}

/* ---------- Come lavoriamo: il filo a piombo ---------- */
.metodo-griglia {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 46rem;
}
.filo {
  position: absolute;
  top: 0.4rem;
  bottom: 2.2rem;
  left: 1.05rem;
  width: 2px;
  background: var(--linea);
}
.filo-attivo {
  position: absolute;
  inset: 0;
  background: var(--bronzo);
  transform-origin: top center;
  transform: scaleY(var(--avanzamento, 0));
}
.piombino {
  position: absolute;
  left: 50%;
  bottom: -1.5rem;
  transform: translateX(-50%);
  color: var(--bronzo);
}

.passo {
  position: relative;
  padding-left: 3.4rem;
  padding-block: clamp(1.3rem, 3vw, 2rem);
}
.passo + .passo { border-top: 1px dashed var(--linea); }
.passo-numero {
  position: absolute;
  left: 0;
  top: clamp(1.3rem, 3vw, 2rem);
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--linea-forte);
  border-radius: 3px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  color: var(--inchiostro);
}
.passo.attivo .passo-numero { border-color: var(--bronzo); color: var(--bronzo); }
.passo h3 { margin-bottom: 0.4rem; }
.passo p { color: var(--inchiostro-2); font-size: var(--t-corpo); }

/* ---------- Blocchi a incastro (linea prodotto, tema rame) ---------- */
.blocchi .testata-sezione p { color: var(--inchiostro-2); }
.blocchi-griglia {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 56.25em) { .blocchi-griglia { grid-template-columns: 1.05fr 0.95fr; } }

/* Anteprima in home: testo più corto della foto, non va centrato
   rispetto a lei (il titolo è fuori griglia, sopra) */
.blocchi-anteprima { align-items: start; }

/* Richiamo alla pagina blocchi (servizi.html): non una scheda tecnica
   parallela, solo il ponte. La sezione si chiude subito dopo i pulsanti,
   senza il vuoto verticale che lasciava la griglia a due colonne. */
.blocchi-richiamo { margin-top: var(--sp-giunto); }
.blocchi-aperto {
  display: flex;
  gap: 0.8em;
  align-items: baseline;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
}
.tacca {
  font-family: var(--f-mono);
  font-size: var(--t-mono-micro);
  color: var(--inchiostro);
  white-space: nowrap;
}
.blocchi .ph-foto {
  border-color: rgba(18, 16, 16, 0.45);
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(18, 16, 16, 0.25) 14px 15px),
    #8F4517;
}
.blocchi .ph-foto > span { color: var(--osso); }
.blocchi .ph-foto::before, .blocchi .ph-foto::after { border-color: var(--basalto); }
.blocchi-cta { margin-top: var(--sp-cta); display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* Trama a incastro: profilo dei blocchi lungo il bordo superiore della sezione */
.merlatura {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 18px;
  color: var(--osso);
}

/* ---------- Lavori recenti ---------- */
.lavori-griglia {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 48em) { .lavori-griglia { grid-template-columns: repeat(3, 1fr); } }
.lavoro { text-decoration: none; color: inherit; display: block; }
.lavoro figure { margin-bottom: 0.9rem; overflow: hidden; border-radius: 4px; }
.lavoro .ph-foto { transition: transform var(--medio) var(--morbido); }
.lavoro:hover .ph-foto { transform: scale(1.02); }
.lavoro-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cenere);
  margin-bottom: 0.35rem;
}
.lavoro h3 { font-size: 1.15rem; font-family: var(--f-testo); font-weight: 600; }

/* ---------- Zone servite ---------- */
/* Testata a piena larghezza come nelle altre sezioni della home,
   poi le due province in griglia sotto: stessa cadenza di
   "Cosa facciamo" e "Parco mezzi", non un layout a sé. */
.zone-elenchi { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (min-width: 36em) { .zone-elenchi { grid-template-columns: 1fr 1fr; } }
.zone-gruppo .voce-titolo {
  font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bronzo); margin-bottom: 0.7rem;
}
.zone-lista { font-size: var(--t-piccolo); }
.zone-lista li {
  padding-block: 0.42rem;
  border-bottom: 1px solid var(--linea);
  break-inside: avoid;
  color: var(--inchiostro-2);
}
.zone-lista li.capoluogo { color: var(--inchiostro); font-weight: 600; }
.zone-nota {
  margin-top: 1.2rem;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
}

/* ---------- Richiamo preventivo (fondo pagina, ovunque) ---------- */
.richiamo {
  background: var(--basalto);
  color: var(--osso);
  border-top: 1px solid var(--linea);
}
.richiamo-griglia {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 56.25em) { .richiamo-griglia { grid-template-columns: 1.2fr 0.8fr; } }
.richiamo h2 { max-width: 18ch; }
.richiamo .telefoni { display: grid; gap: 1rem; }
.richiamo .telefoni a {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 1.9rem);
  color: var(--osso);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transition: color var(--veloce) var(--morbido);
}
.richiamo .telefoni a:hover { color: var(--rame); }
.richiamo .telefoni .nota {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  color: var(--cenere);
  letter-spacing: 0.08em;
}
.richiamo-cta { margin-top: var(--sp-cta); display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- Footer ---------- */
.piede {
  background: #0C0A09;
  color: var(--cenere);
  border-top: 1px solid var(--linea);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  font-size: var(--t-piccolo);
}
.piede-griglia {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 48em) { .piede-griglia { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
/* Logo circolare del footer: immagine nuda, senza targa ne' padding. */
.marchio-piede {
  display: block;
  width: 82px;
  height: 82px;
  object-fit: contain;
  margin-bottom: 1rem;
}
@media (min-width: 56.25em) {
  .marchio-piede { width: 112px; height: 112px; }
}
.piede-titolo {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8A8175;
  margin-bottom: 1rem;
}
.piede ul { display: grid; gap: 0.5rem; list-style: none; }
.piede a { color: var(--cenere); text-decoration: none; }
.piede a:hover { color: var(--osso); }
.piede address { font-style: normal; line-height: 1.8; }
.piede .orari td { padding: 0.15rem 0; }
.piede .orari td:first-child { padding-right: 1.2rem; color: #8A8175; }
.piede-fondo {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  color: #8A8175;
}

/* ============================================================
   PAGINE INTERNE
   ============================================================ */

/* Testata di pagina */
.pagina-testata {
  background: var(--basalto);
  color: var(--osso);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2.25rem, 4.5vw, 3.5rem);
}
.pagina-testata h1 { font-size: clamp(2.1rem, 1.3rem + 3.3vw, 3.5rem); max-width: 18ch; }
.pagina-testata .sotto { margin-top: 1.1rem; color: var(--cenere); max-width: 52ch; font-size: clamp(1.02rem, 1rem + 0.3vw, 1.15rem); }
/* Riga d'indirizzo sotto la descrizione: stessa voce, un gradino
   tipografico sotto, così la gerarchia della testata resta leggibile. */
.pagina-testata .indicazione { margin-top: 0.85rem; color: var(--cenere); max-width: 52ch; font-size: var(--t-piccolo); }

.briciole {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cenere);
  margin-bottom: 1.4rem;
}
.briciole a { color: var(--cenere); text-decoration: none; }
.briciole a:hover { color: var(--rame); }
.briciole .separatore { color: var(--bronzo); }

/* Barra ancore sticky (pagina Servizi) */
.ancore {
  position: sticky;
  top: 4.25rem;
  z-index: 30;
  background: rgba(18, 16, 16, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(231, 224, 211, 0.14);
}
.ancore ul {
  list-style: none;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;  /* lo swipe orizzontale non torna indietro nella cronologia */
  scrollbar-width: none;
  padding-inline: var(--sp-lato);
  max-width: var(--larghezza-max);
  margin-inline: auto;
}
.ancore ul::-webkit-scrollbar { display: none; }
.ancore li { flex: none; }
.ancore a {
  display: block;
  padding: 1.05em 0.9em;
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cenere);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--veloce) var(--morbido), border-color var(--veloce) var(--morbido);
}
.ancore a:hover { color: var(--osso); }
.ancore a.attiva { color: var(--rame); border-bottom-color: var(--rame); }
/* Il contorno di focus va portato dentro: l'ul scorre in orizzontale e
   un outline sporgente verrebbe tagliato sulla prima e sull'ultima voce. */
.ancore a:focus-visible { outline-offset: -3px; }

/* Blocchi non e' una delle sei lavorazioni ma la linea prodotti:
   separata da un filetto discreto, non da un colore diverso. */
.ancore .prodotto { position: relative; margin-left: 0.85rem; padding-left: 0.85rem; }
.ancore .prodotto::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.15rem;
  margin-top: -0.575rem;
  background: var(--linea-forte);
}

/* Blocco area di servizio: stesso schema per tutte e sette */
.area { scroll-margin-top: 8.5rem; }
.area-testata { max-width: 56rem; }
.area-numero {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.1em;
  color: var(--inchiostro-2);
  display: block;
  margin-bottom: 0.9rem;
}
.area-testata .chi { margin-top: var(--sp-titolo); font-size: clamp(1.02rem, 1rem + 0.3vw, 1.15rem); color: var(--inchiostro-2); }

.area-griglia {
  display: grid;
  gap: clamp(2rem, 4.5vw, 3.5rem);
  margin-top: var(--sp-blocco);
  align-items: start;
}
@media (min-width: 62em) { .area-griglia { grid-template-columns: 1.05fr 0.95fr; } }
.area-griglia > * { min-width: 0; }
.area-griglia.compatta { margin-top: 0; }

.blocco-voce { margin-top: 2.2rem; }
.blocco-voce:first-child { margin-top: 0; }
.blocco-voce .voce-titolo {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronzo);
  margin-bottom: 0.9rem;
}
[data-tema="chiaro"] .blocco-voce .voce-titolo { color: var(--bronzo); }
.sezione:not([data-tema]) .blocco-voce .voce-titolo { color: var(--rame); }

.lista-lavorazioni { display: grid; gap: 0; }
@media (min-width: 36em) { .lista-lavorazioni { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 2.5rem); } }
.lista-lavorazioni li {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  padding-block: 0.55rem;
  border-bottom: 1px dashed var(--linea);
  font-size: var(--t-piccolo);
  color: var(--inchiostro);
}
.lista-lavorazioni li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--rame);
  transform: translateY(-1px);
}

.quando-serve { display: grid; gap: 0.85rem; }
.quando-serve li {
  border: 1px solid var(--linea);
  background: var(--bg-rialzato);
  padding: 1rem 1.2rem;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
}
.quando-serve li strong { color: var(--inchiostro); font-weight: 600; display: block; margin-bottom: 0.15rem; }

.come-noi { font-size: var(--t-piccolo); color: var(--inchiostro-2); max-width: 58ch; }
.come-noi strong { color: var(--inchiostro); font-weight: 600; }

.area-cta { margin-top: var(--sp-cta); display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; align-items: center; }
/* Microtesto sotto le CTA di un'area: va a capo da solo (base 100%) e
   non entra nel ritmo orizzontale dei pulsanti. Colore dei testi
   secondari del tema in corso, quindi leggibile su chiaro e su scuro. */
.area-cta .cta-nota {
  flex: 1 0 100%;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
  max-width: 48ch;
}

/* Aree con due pulsanti: su telefono vanno a piena larghezza, cosi'
   nessuna etichetta lunga si spezza in righe storte. Classe dedicata,
   non tocca le altre .area-cta della pagina. */
@media (max-width: 34em) {
  .area-cta-estesa { gap: 0.7rem; }
  .area-cta-estesa .bottone { width: 100%; justify-content: center; }
}
.area .ph-foto { margin-bottom: 2rem; }

/* Le due colonne di un'area devono chiudersi insieme, qualunque sia la
   lunghezza dei due contenuti: la foto assorbe l'altezza che avanza e i
   pulsanti restano ancorati in basso. Senza questo, aree come Coperture
   o Nuove costruzioni lasciavano un vuoto in fondo alla colonna corta.
   Solo dentro .area (servizi.html): .area-griglia.compatta di azienda.html
   non ha foto e resta com'è. */
@media (min-width: 62em) {
  .area .area-griglia { align-items: stretch; }
  .area .area-griglia > * { display: flex; flex-direction: column; }
  .area .area-griglia .ph-foto { flex: 1 1 auto; min-height: 18rem; }
  .area .area-cta { margin-top: auto; padding-top: var(--sp-cta); }
}

/* ---------- Prosa lunga (privacy) ---------- */
.prosa { max-width: 46rem; }
.prosa h2 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); margin-top: clamp(2.2rem, 4vw, 3rem); margin-bottom: 0.8rem; }
.prosa p { color: var(--inchiostro-2); margin-bottom: 0.9rem; }
.prosa ul { list-style: none; display: grid; gap: 0.5rem; margin-bottom: 0.9rem; }
.prosa ul li { position: relative; padding-left: 1.2em; color: var(--inchiostro-2); }
.prosa ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; background: var(--rame); }
.prosa strong { color: var(--inchiostro); font-weight: 600; }
.prosa a { color: var(--inchiostro); text-underline-offset: 3px; text-decoration-color: var(--rame); }

/* ---------- Filtri (Realizzazioni) ---------- */
.filtri { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filtri button {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75em 1.1em;
  border: 1px solid var(--linea-forte);
  border-radius: 3px;
  background: transparent;
  color: var(--inchiostro-2);
  cursor: pointer;
  transition: color var(--veloce) var(--morbido), background-color var(--veloce) var(--morbido), border-color var(--veloce) var(--morbido);
}
.filtri button:hover { color: var(--inchiostro); border-color: var(--inchiostro); }
.filtri button[aria-pressed="true"] { background: var(--inchiostro); color: var(--bg); border-color: var(--inchiostro); }

/* ---------- Galleria (Realizzazioni) ---------- */
.galleria {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
/* Due schede per riga: quattro voci in griglia omogenea (2+2), foto
   più grandi. Senza questo modificatore l'auto-fill le sistema 3+1,
   lasciando mezza riga vuota. */
.galleria.a-due { gap: clamp(1.5rem, 3.5vw, 2.75rem); }
@media (min-width: 46em) { .galleria.a-due { grid-template-columns: 1fr 1fr; } }

.scheda { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.scheda figure { margin: 0 0 0.9rem; overflow: hidden; border-radius: 4px; }
.scheda .ph-foto { transition: transform var(--medio) var(--morbido); }
.scheda:hover .ph-foto { transform: scale(1.02); }
.scheda h3 { font-size: 1.1rem; font-family: var(--f-testo); font-weight: 600; }
.scheda[hidden] { display: none; }
.galleria-vuota { display: none; color: var(--inchiostro-2); font-size: var(--t-piccolo); padding-block: 2rem; }
.galleria-vuota.visibile { display: block; }

/* ---------- Lucernario (lightbox) ---------- */
.lucernario { border: 0; padding: 0; background: transparent; max-width: min(58rem, 94vw); width: 100%; }
.lucernario::backdrop { background: rgba(12, 10, 9, 0.86); }
.lucernario .telaio {
  background: var(--basalto-2);
  border: 1px solid rgba(231, 224, 211, 0.14);
  border-radius: 6px;
  padding: clamp(1rem, 2vw, 1.5rem);
  color: var(--osso);
}
.lucernario .lavoro-meta { color: var(--cenere); }
.lucernario .riga { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.1rem; flex-wrap: wrap; }
.lucernario .comandi { display: flex; gap: 0.5rem; }
.lucernario .comandi button {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid rgba(231, 224, 211, 0.3);
  border-radius: 3px;
  background: transparent;
  color: var(--osso);
  cursor: pointer;
  transition: border-color var(--veloce) var(--morbido);
}
.lucernario .comandi button:hover { border-color: var(--osso); }
/* Nella griglia la foto si ritaglia per tenere il passo alle schede; qui va
   vista intera, comprese le verticali. Il fondo resta scuro come il telaio,
   cosi' le bande laterali non stonano. */
.lucernario .l-foto { background: var(--basalto); border-color: rgba(231, 224, 211, 0.14); }
.lucernario .l-foto > img { object-fit: contain; }

/* ---------- Prima / Dopo ---------- */
.prima-dopo {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--linea);
  --taglio: 50%;
}
.prima-dopo .ph-foto { border: 0; border-radius: 0; }
.pd-sopra { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--taglio)) 0 0); }
.pd-linea { position: absolute; top: 0; bottom: 0; left: var(--taglio); width: 2px; background: var(--rame); pointer-events: none; transform: translateX(-1px); }
.pd-maniglia {
  position: absolute; top: 50%; left: var(--taglio);
  transform: translate(-50%, -50%);
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--rame);
  color: var(--basalto);
  display: grid; place-items: center;
  pointer-events: none;
}
.pd-cursore { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.prima-dopo:focus-within { outline: 2px solid var(--rame); outline-offset: 3px; }
.pd-etichetta {
  position: absolute; top: 0.7rem;
  font-family: var(--f-mono); font-size: var(--t-mono-micro); letter-spacing: 0.12em;
  padding: 0.4em 0.7em; border-radius: 2px;
  background: rgba(12, 10, 9, 0.72); color: var(--osso);
  pointer-events: none;
}
.pd-etichetta.prima { left: 0.7rem; }
.pd-etichetta.dopo { right: 0.7rem; }

/* ---------- Modulo (Contatti) ---------- */
.contatto-griglia { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62em) { .contatto-griglia { grid-template-columns: 1.05fr 0.95fr; } }
.contatto-griglia > * { min-width: 0; }
#modulo { scroll-margin-top: 5.5rem; }

.modulo { display: grid; gap: 1.15rem; }
.campo { display: grid; gap: 0.45rem; }
.campo > label { font-weight: 600; font-size: var(--t-piccolo); }
.campo .facoltativo { font-weight: 400; color: var(--inchiostro-2); }
.campo input, .campo select, .campo textarea {
  width: 100%;
  background: var(--bg-rialzato);
  border: 1px solid var(--linea-forte);
  border-radius: 3px;
  padding: 0.8em 1em;
  color: var(--inchiostro);
  transition: border-color var(--veloce) var(--morbido);
}
/* Il bordo dei campi del modulo deve reggere 3:1 contro il fondo chiaro:
   --linea-forte composita a 2,82:1, sotto il minimo di WCAG 1.4.11. Sta
   qui, prima di :focus e di .non-valido, che restano prioritari. */
.modulo .campo input,
.modulo .campo select,
.modulo .campo textarea { border-color: rgba(18, 16, 16, 0.48); }

.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--rame); }
.campo textarea { min-height: 9rem; resize: vertical; }
.campo select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23474340' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1em center;
}
.campo .aiuto { font-size: var(--t-piccolo); color: var(--inchiostro-2); }
.campo .errore { display: none; font-size: var(--t-piccolo); color: #9E3315; }
.campo.non-valido .errore { display: block; }
.campo.non-valido input, .campo.non-valido select, .campo.non-valido textarea { border-color: #9E3315; }

.consenso { display: flex; align-items: flex-start; gap: 0.7em; font-size: var(--t-piccolo); color: var(--inchiostro-2); }
/* 24x24 px netti: minimo di WCAG 2.2 per un bersaglio. La label resta
   cliccabile per intero, la casella cresce di 5,6 px. */
.consenso input { width: 1.5rem; height: 1.5rem; margin-top: 0.05rem; accent-color: var(--rame); flex: none; }
.consenso a { color: var(--inchiostro); text-underline-offset: 3px; text-decoration-color: var(--rame); }

.canali { display: grid; gap: 1.4rem; }
.canali .voce-titolo {
  font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bronzo); margin-bottom: 0.5rem;
}
.canali .tel-grande {
  font-family: var(--f-mono); font-weight: 500;
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.6rem);
  color: var(--inchiostro); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.55em;
}
.canali .tel-grande:hover { color: var(--bronzo); }

.mappa {
  border: 1px solid var(--linea);
  border-radius: 4px;
  background: var(--bg-rialzato);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  gap: 0.9rem;
}
.mappa address { font-style: normal; line-height: 1.7; color: var(--inchiostro-2); }
.mappa address strong { color: var(--inchiostro); }

/* ---------- 404 ---------- */
.codice-errore {
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(4rem, 12vw, 7.5rem);
  line-height: 1;
  color: var(--rame);
}
.mappa-sito { display: grid; gap: 0.6rem; margin-top: 2rem; max-width: 22rem; }
.mappa-sito a {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  border: 1px solid var(--linea); border-radius: 3px;
  padding: 0.9em 1.1em; text-decoration: none; font-weight: 600; color: var(--osso);
  transition: border-color var(--veloce) var(--morbido), background-color var(--veloce) var(--morbido);
}
.mappa-sito a:hover { border-color: var(--rame); background: var(--basalto-2); }

/* ---------- Hero 3D: dissolvenza incrociata SVG → canvas ---------- */
.hero-3d canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
}
.hero-3d.tre-attivo canvas { opacity: 1; }
.hero-3d.tre-attivo .cantiere-tratto { opacity: 0; }
/* Fallback generico riusabile per qualunque scena (pagina blocchi):
   qualsiasi elemento marcato .tre-fallback sparisce quando il 3D è attivo */
.hero-3d.tre-attivo .tre-fallback { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hero-3d canvas { transition: opacity 900ms var(--morbido); }
  .hero-3d .cantiere-tratto,
  .hero-3d .tre-fallback { transition: opacity 900ms var(--morbido); }
}

/* ============================================================
   PAGINA BLOCCHI — quasi una seconda home: stessa grammatica,
   più densità di 3D e movimento. Riusa .hero/.hero-griglia/
   .hero-3d/.hero-cta/.hero-sotto/.quota-angolo/.cantiere-tratto
   verbatim (vedi sopra); qui solo ciò che è davvero nuovo.
   ============================================================ */

/* Disegno del muro (fallback dell'hero): corsi che si tracciano,
   piramidi già rame. Riusa il contenitore .cantiere-tratto. */
.f-corso-1 { stroke: rgba(231, 224, 211, 0.5); }
.f-corso-2 { stroke: rgba(231, 224, 211, 0.68); }
.f-corso-3 { stroke: rgba(231, 224, 211, 0.85); }
.f-piramidi { stroke: var(--rame); }

/* Schema dei due formati (blocco intero e mezzo blocco), in assonometria:
   disegno statico, non una scena. Stesso tratto del resto del sistema. */
.formati { display: grid; gap: 0.85rem; margin-top: var(--sp-blocco); }
@media (min-width: 40em) { .formati { grid-template-columns: 1fr 1fr; } }
.formati li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border: 1px solid var(--linea);
  background: var(--bg-rialzato);
  padding: 1rem 1.2rem;
}
.schema-formato { flex: none; width: 66px; height: auto; fill: none; stroke: var(--inchiostro-2); }
.schema-formato path {
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.schema-formato .s-piramide { stroke: var(--rame); }
.formato-nome { font-weight: 600; color: var(--inchiostro); }
.formato-dato {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.06em;
  color: var(--rame);
  margin-top: 0.35rem;
}
.formato-nota { font-size: var(--t-piccolo); color: var(--inchiostro-2); margin-top: 0.5rem; }

/* Quote sui lati del visore blocco (in aggiunta a .quota-angolo) */
.quota-lato {
  position: absolute;
  font-family: var(--f-mono);
  font-size: var(--t-mono-micro);
  letter-spacing: 0.1em;
  color: rgba(231, 224, 211, 0.7);
  white-space: nowrap;
}
.quota-lato.sopra { top: 0.8rem; left: 50%; transform: translateX(-50%); }
.quota-lato.sotto { bottom: 0.8rem; left: 50%; transform: translateX(-50%); color: var(--rame); }
.quota-lato.sinistra { left: 0.8rem; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.quota-lato.destra { right: 0.8rem; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }

/* .hero-griglia riusata fuori dall'hero (pagina blocchi): stesso
   layout a due colonne, senza il min-height a piena schermata */
.hero-griglia.senza-minaltezza { min-height: 0; }

/* .hero-sotto riusata sotto un h2 (non un h1 d'hero): stessa voce,
   ma lo stacco dal titolo torna quello standard, non quello grande
   riservato all'H1. Classe dedicata: non tocca .hero-sotto altrove
   (tutte le sezioni .richiamo del sito la usano sotto un h2 già oggi
   e devono restare invariate). */
.hero-sotto.sotto-h2 { margin-top: var(--sp-titolo); }
.hero-sotto.sotto-h2 + p { margin-top: var(--sp-blocco); color: var(--inchiostro-2); max-width: 44ch; }

/* Vantaggi "perché a secco": riusa .quando-serve (bordo + forte + testo) */
.blocchi-vantaggi { display: grid; gap: 0.85rem; }
@media (min-width: 40em) { .blocchi-vantaggi { grid-template-columns: 1fr 1fr; } }

/* Configuratore */
.config-nota-blocco {
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
  background: var(--bg-rialzato);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 0.9em 1.1em;
  margin-bottom: var(--sp-blocco);
}
.config-nota-blocco strong { color: var(--inchiostro); }

/* [hidden] deve vincere sempre: le regole d'autore (come display:grid
   qui sotto) battono lo user-agent per origine, non per specificità,
   quindi senza questa riga il blocco resterebbe visibile pur "nascosto" */
#config-interattivo[hidden],
.config-opzioni[hidden],
.opzione[hidden],
.config-avviso[hidden] { display: none; }
.configuratore-griglia { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 62em) { .configuratore-griglia { grid-template-columns: 1fr 1fr; } }
.configuratore-griglia > * { min-width: 0; }

.configuratore-inputs { display: grid; gap: 1.1rem; margin-bottom: 1.6rem; }
@media (min-width: 30em) { .configuratore-inputs { grid-template-columns: 1fr 1fr; } }
.configuratore-inputs .campo input {
  font-family: var(--f-mono);
  font-size: 1.15rem;
  font-weight: 500;
  padding: 0.75em 0.9em;
}

/* Scelta della lunghezza realizzabile: con blocchi da 1,60 m il muro
   cade quasi sempre tra due misure, e chi deve chiudere uno spazio
   preciso deve poter scegliere quale delle due. */
.config-opzioni { border: 0; margin-bottom: 1.6rem; }
.config-opzioni legend {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rame);
  padding: 0;
}
.opzioni-nota { font-size: var(--t-piccolo); color: var(--inchiostro-2); margin-top: 0.7rem; }
.opzioni-righe { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
@media (min-width: 30em) { .opzioni-righe { grid-template-columns: 1fr 1fr; } }
.opzione {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 0.85em 1em;
  cursor: pointer;
  transition: border-color var(--veloce) var(--morbido), background-color var(--veloce) var(--morbido);
}
.opzione:hover { border-color: var(--linea-forte); }
.opzione input { accent-color: var(--rame); flex: none; margin: 0; }
.opzione:has(input:checked) { border-color: var(--rame); background: var(--bg-rialzato); }
.opzione:has(input:focus-visible) { outline: 2px solid var(--rame); outline-offset: 2px; }
.opzione-corpo { display: block; }
.opzione-misura {
  display: block;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--inchiostro);
}
.opzione:has(input:checked) .opzione-misura { color: var(--rame); }
.opzione-nome { display: block; font-size: var(--t-piccolo); color: var(--inchiostro-2); margin-top: 0.25rem; }

/* Separatori a gap: reggono 2, 3 o 4 celle senza riscrivere i bordi */
.configuratore-risultati {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}
@media (min-width: 30em) { .configuratore-risultati { grid-template-columns: 1fr 1fr; } }
.risultato { padding: 1.1em 1.2em; background: var(--bg); }
.risultato .dato {
  display: block;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
  color: var(--rame);
}
.risultato .dato-nome { font-size: var(--t-piccolo); color: var(--inchiostro-2); }

.config-avviso {
  display: flex;
  gap: 0.7em;
  font-size: var(--t-piccolo);
  color: var(--inchiostro-2);
  background: var(--bg-rialzato);
  border-left: 3px solid var(--bronzo);
  border-radius: 0 4px 4px 0;
  padding: 0.85em 1em;
  margin-bottom: 1.6rem;
}
.config-avviso svg { flex: none; color: var(--bronzo); margin-top: 0.15em; }

.config-postilla { font-size: var(--t-piccolo); color: var(--inchiostro-2); margin-bottom: 1.6rem; }

.config-statico p { color: var(--inchiostro-2); margin-bottom: 1.2rem; }

.configuratore-anteprima .hero-3d { aspect-ratio: 4 / 3.6; max-height: none; }

/* Griglia CSS dei corsi: anteprima sempre disponibile, senza 3D.
   Il blocco è 2:1 come il prodotto (160×80) e i corsi sfalsati sono
   chiusi da un mezzo blocco a ciascuna estremità: stessa posa del
   calcolo. Contrasto allineato al tratto dell'hero, non più basso. */
.griglia-corsi {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  gap: 3px;
  padding: 10%;
}
.riga-corso { display: flex; gap: 3px; }
.blocco-cella {
  width: var(--cella, 2rem);
  height: calc(var(--cella, 2rem) / 2);
  background: rgba(231, 224, 211, 0.16);
  border: 1px solid rgba(231, 224, 211, 0.62);
  flex: none;
}
.blocco-cella.mezza { width: calc(var(--cella, 2rem) / 2); }
.blocco-cella.ultima { background: rgba(200, 106, 44, 0.34); border-color: var(--rame); }

/* ============================================================
   MOVIMENTO — solo migliorativo: senza JS tutto resta visibile.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* --- Coreografia d'ingresso dell'hero (CSS puro, parte da sola) --- */
  @keyframes sale-da-sotto {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes si-stende {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @keyframes appare {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes si-posa {
    0%   { opacity: 0; transform: scale(1.045); }
    62%  { opacity: 1; transform: scale(0.992); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes traccia {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
  }

  .hero h1,
  .hero .hero-sotto,
  .hero .hero-cta { animation: sale-da-sotto 0.8s var(--deciso) both; }
  .hero .hero-postilla,
  .hero .hero-fiducia { animation: sale-da-sotto 0.8s var(--deciso) both; }
  .hero .hero-sotto { animation-delay: 120ms; }
  .hero .hero-cta { animation-delay: 220ms; }
  .hero .hero-postilla { animation-delay: 300ms; }
  .hero .hero-fiducia { animation-delay: 370ms; }
  .hero-3d { animation: appare 0.9s var(--morbido) 150ms both; }

  /* Il cantiere si costruisce per fasi: terreno, fondamenta, muri,
     porta, tetto. Il tetto si disegna in cenere e poi si accende
     nel rame: la stessa drammaturgia del 3D. */
  @keyframes si-accende { from { stroke: #A99F92; } to { stroke: var(--rame); } }
  .cantiere-tratto [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traccia 700ms var(--deciso) both; }
  .cantiere-tratto .f-terreno    { animation-delay: 250ms; animation-duration: 550ms; }
  .cantiere-tratto .f-fondamenta { animation-delay: 600ms; animation-duration: 750ms; }
  .cantiere-tratto .f-muri       { animation-delay: 1200ms; animation-duration: 950ms; }
  .cantiere-tratto .f-porta      { animation-delay: 2100ms; animation-duration: 450ms; }
  .cantiere-tratto .f-tetto      { animation: traccia 950ms var(--deciso) 2350ms both, si-accende 750ms var(--morbido) 3100ms both; }

  /* Il muro (pagina blocchi): due corsi che si tracciano, le
     piramidi d'incastro già in rame come ultimo tocco. */
  .cantiere-tratto .f-corso-1  { animation-delay: 300ms; animation-duration: 700ms; }
  .cantiere-tratto .f-corso-2  { animation-delay: 1150ms; animation-duration: 700ms; }
  .cantiere-tratto .f-piramidi { animation-delay: 2000ms; animation-duration: 500ms; }

  /* --- Rivelazioni allo scroll (richiedono JS: pre-nascoste solo con .js) --- */
  .js [data-rivela] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--morbido), transform 0.7s var(--deciso);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js [data-rivela].in-vista { opacity: 1; transform: none; }

  /* I conci si posano come blocchi, non semplice fade */
  .js .concio[data-rivela] { transform: translateY(34px); }
  .js .concio[data-rivela].in-vista { transform: none; }

  /* I dati si stampigliano */
  .js .fascia-dati [data-rivela] { transform: none; }
  .js .fascia-dati [data-rivela].in-vista .dato { animation: si-posa 0.55s var(--morbido) calc(var(--i, 0) * 90ms) both; }

  /* Il giunto si stende quando entra in vista */
  .js .giunto[data-rivela] { opacity: 1; transform: scaleX(0); transition: transform 1s var(--deciso); }
  .js .giunto[data-rivela].in-vista { transform: scaleX(1); }

  /* Foto placeholder nei lavori: leggera parallasse di posa */
  .js .lavoro[data-rivela] { transform: translateY(30px) }
  .js .lavoro[data-rivela].in-vista { transform: none; }
}

/* Reduced motion: niente animazioni, contenuto immediato */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .filo-attivo { transform: scaleY(1); }
}