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

/* ══════════════════════════════════════════════════════════════
   BLACK METAL — concept «IL TAGLIO»
   Il waterjet ritaglia il pezzo dalla lastra: è quello che fa
   l'azienda, ed è quello che fa la pagina. I titoli delle sezioni
   vengono scoperti da una linea rossa che li attraversa.
   Due temi: la lastra scura e la lastra chiara.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* la lastra scura — il tema di partenza */
  --fondo:        #0F1419;
  --fondo-alto:   #161C24;
  --fondo-scheda: #1A1F2E;
  --bordo:        #2C3444;
  --bordo-forte:  #3C4557;
  --testo:        #F5F7FA;
  --testo-medio:  #C4C9D1;
  --testo-muto:   #8A94A6;
  --rosso:        #C8102E;
  --rosso-vivo:   #E4243F;
  --grana:        rgba(196, 201, 209, .045);
  --ombra:        0 18px 50px -20px rgba(0, 0, 0, .8);

  --curva:   cubic-bezier(.16, 1, .3, 1);
  --colonna: min(1200px, 100% - 2.5rem);
  --display: 'Oswald', 'Haettenschweiler', Impact, system-ui, sans-serif;
  --testo-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

[data-tema="chiaro"] {
  /* la lastra chiara — stessa officina, luce del giorno */
  --fondo:        #EEF0F3;
  --fondo-alto:   #F7F8FA;
  --fondo-scheda: #FFFFFF;
  --bordo:        #D5DAE1;
  --bordo-forte:  #B9C0CB;
  --testo:        #10151B;
  --testo-medio:  #39424F;
  --testo-muto:   #626C7A;
  --rosso:        #B70C28;
  --rosso-vivo:   #C8102E;
  --grana:        rgba(16, 21, 27, .04);
  --ombra:        0 18px 50px -24px rgba(16, 21, 27, .28);
}

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

/* Un elemento con l'attributo hidden resta nascosto, qualunque classe
   abbia: «.ancora { display: block }» vinceva sull'attributo e il
   pulsante «Mostra altri lavori» non spariva mai. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--testo-font);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
  transition: background-color .45s var(--curva), color .45s var(--curva);
}

/* la grana della lastra, sotto tutto */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--grana) 1px, transparent 1px),
    linear-gradient(90deg, var(--grana) 1px, transparent 1px);
  background-size: 52px 52px;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

.colonna { width: var(--colonna); margin-inline: auto; position: relative; z-index: 1; }

/* ── tipografia ─────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .012em;
  line-height: 1.06;
  margin: 0;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.1rem, 6.4vw, 4rem); }
h2 { font-size: clamp(1.65rem, 4.3vw, 2.85rem); }
h3 { font-size: clamp(1.02rem, 2.1vw, 1.22rem); letter-spacing: .03em; }
p  { margin: 0 0 1rem; color: var(--testo-medio); max-width: 62ch; }
strong { color: var(--testo); font-weight: 500; }

.occhiello {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--rosso);
  margin: 0 0 1rem;
  display: block;
}

/* ── LA FIRMA · il taglio ────────────────────────────────
   Una linea rossa attraversa il titolo e lo lascia dietro di sé.
   Solo transform e opacity: non tocca il layout.            */
.taglio { position: relative; display: inline-block; overflow: hidden; padding-block: .06em; }
.taglio > span {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.05s var(--curva);
}
.taglio::after {
  content: "";
  position: absolute;
  top: -6%; bottom: -6%; left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--rosso-vivo) 18%, var(--rosso-vivo) 82%, transparent);
  box-shadow: 0 0 14px 2px var(--rosso-vivo);
  opacity: 0;
  transform: translateX(0);
}
.visibile .taglio > span { clip-path: inset(0 0 0 0); }
.visibile .taglio::after { animation: lama 1.05s var(--curva) forwards; }
@keyframes lama {
  0%   { opacity: 0;  transform: translateX(0); }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { opacity: 0;  transform: translateX(var(--corsa, 340px)); }
}

/* comparsa dei blocchi: sempre reversibile, mai bloccante.
   Se il JS non parte, .comparsa resta com'è e SI VEDE lo stesso. */
.comparsa { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--curva), transform .7s var(--curva); }
.visibile .comparsa, .comparsa.visibile { opacity: 1; transform: none; }
.comparsa:nth-child(2) { transition-delay: .07s; }
.comparsa:nth-child(3) { transition-delay: .14s; }
.comparsa:nth-child(4) { transition-delay: .21s; }

/* ── testata ─────────────────────────────────────────────── */
.testata {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bordo);
}
.testata .colonna { display: flex; align-items: center; gap: 1.25rem; padding-block: .8rem; }
.marchio { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-right: auto; }
.marchio img { height: 46px; width: auto; }
.marchio span {
  font-family: var(--display); font-size: .66rem; font-weight: 500;
  letter-spacing: .22em; color: var(--testo-muto); text-transform: uppercase; line-height: 1.5;
  border-left: 1px solid var(--bordo); padding-left: .75rem;
}
.menu { display: flex; gap: 1.55rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  font-family: var(--display); font-size: .82rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; text-decoration: none; color: var(--testo-medio);
  padding-block: .3rem; position: relative; transition: color .3s var(--curva);
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 2px;
  background: var(--rosso); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--curva);
}
.menu a:hover, .menu a[aria-current] { color: var(--testo); }
.menu a:hover::after, .menu a[aria-current]::after { transform: scaleX(1); }

.interruttore, .apri-menu {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  background: transparent; color: var(--testo-medio);
  border: 1px solid var(--bordo); border-radius: 2px;
  cursor: pointer; transition: color .3s var(--curva), border-color .3s var(--curva);
}
.interruttore:hover, .apri-menu:hover { color: var(--testo); border-color: var(--bordo-forte); }
.interruttore svg { width: 19px; height: 19px; }
.interruttore .luna { display: none; }
[data-tema="chiaro"] .interruttore .sole { display: none; }
[data-tema="chiaro"] .interruttore .luna { display: block; }
.apri-menu { display: none; }

/* ── bottoni ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-size: .88rem; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none;
  padding: .92rem 1.6rem; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--curva), background-color .3s var(--curva), border-color .3s var(--curva);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-pieno { background: var(--rosso); color: #fff; }
.btn-pieno:hover { background: var(--rosso-vivo); transform: translateY(-2px); }
.btn-vuoto { border-color: var(--bordo-forte); color: var(--testo); }
.btn-vuoto:hover { border-color: var(--rosso); color: var(--rosso-vivo); transform: translateY(-2px); }

/* ── sezioni ─────────────────────────────────────────────── */
.sezione { padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; }
.sezione.alterna { background: var(--fondo-alto); }
/* il bordo fra le fasce è un taglio, non una linea */
.sezione.alterna::before, .sezione.alterna::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--bordo);
}
.sezione.alterna::before { top: 0; }
.sezione.alterna::after  { bottom: 0; }
.intestazione { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.intestazione p { font-size: 1.08rem; margin-top: 1.25rem; }

/* ── apertura ────────────────────────────────────────────── */
.apertura { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 7rem); }
.apertura .colonna { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.apertura h1 { margin-block: .75rem 1.5rem; }
.apertura h1 .rosso { color: var(--rosso-vivo); display: block; }
.apertura .sommario { font-size: 1.12rem; color: var(--testo-medio); max-width: 34ch; }
.azioni { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* la lastra: il video verticale dentro un pezzo tagliato */
.lastra {
  position: relative; border: 1px solid var(--bordo-forte); background: var(--fondo-scheda);
  box-shadow: var(--ombra);
  /* l'angolo in alto a destra è tagliato, come un pezzo uscito dal waterjet */
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.lastra video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.lastra .didascalia {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.25rem .95rem;
  background: linear-gradient(to top, rgba(10, 13, 17, .92), transparent);
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  font-family: var(--display); color: #E8EBF0;
}

.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--bordo); margin-top: 2.75rem; border: 1px solid var(--bordo); }
.numeri div { background: var(--fondo); padding: 1.1rem 1rem; }
.numeri b { font-family: var(--display); font-size: 1.7rem; font-weight: 600; color: var(--testo); display: block; line-height: 1; }
.numeri small { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--testo-muto); }

/* ── griglie e schede ────────────────────────────────────── */
.griglia { display: grid; gap: 1.25rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.scheda {
  background: var(--fondo-scheda); border: 1px solid var(--bordo); border-radius: 2px;
  padding: 1.6rem 1.4rem; position: relative; overflow: hidden;
  transition: border-color .35s var(--curva), transform .35s var(--curva);
}
.scheda:hover { border-color: var(--bordo-forte); transform: translateY(-3px); }
.scheda .indice {
  font-family: var(--display); font-size: .74rem; letter-spacing: .18em;
  color: var(--rosso); display: block; margin-bottom: .7rem;
}
.scheda h3 { margin-bottom: .7rem; }
.scheda p  { font-size: .94rem; margin-bottom: 0; }
.scheda ul { margin: .9rem 0 0; padding: 0; list-style: none; }
.scheda li { font-size: .88rem; color: var(--testo-muto); padding-left: 1.15rem; position: relative; margin-bottom: .35rem; }
.scheda li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 1px; background: var(--rosso); }

.misura { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px solid var(--bordo); font-size: .89rem; }
.misura span { color: var(--testo-muto); }
.misura b { font-family: var(--display); font-weight: 500; color: var(--testo); letter-spacing: .02em; }

/* ── verificatore ────────────────────────────────────────── */
.verificatore { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.campo { margin-bottom: 1.35rem; }
.campo label { display: block; font-family: var(--display); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--testo-muto); margin-bottom: .55rem; }
.scelte { display: flex; flex-wrap: wrap; gap: .5rem; }
.scelte button {
  font-family: var(--testo-font); font-size: .88rem;
  background: transparent; color: var(--testo-medio);
  border: 1px solid var(--bordo); border-radius: 2px; padding: .55rem .95rem;
  cursor: pointer; transition: all .25s var(--curva);
}
.scelte button:hover { border-color: var(--bordo-forte); color: var(--testo); }
.scelte button[aria-pressed="true"] { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.campo input[type="range"] { width: 100%; accent-color: var(--rosso); }
.valore { font-family: var(--display); font-size: 1.5rem; color: var(--testo); }

.esito { background: var(--fondo-scheda); border: 1px solid var(--bordo); border-left: 3px solid var(--rosso); padding: 1.6rem 1.5rem; }
.esito .titolo { font-family: var(--display); font-size: 1.2rem; text-transform: uppercase; margin-bottom: .6rem; display: block; }
.esito.si .titolo { color: #4ADE80; }
[data-tema="chiaro"] .esito.si .titolo { color: #14804A; }
.esito.no .titolo { color: var(--rosso-vivo); }
.esito p { font-size: .94rem; margin-bottom: 0; }

/* ── galleria ────────────────────────────────────────────── */
.filtri { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.filtri button {
  font-family: var(--display); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  background: transparent; color: var(--testo-muto);
  border: 1px solid var(--bordo); border-radius: 2px; padding: .55rem 1rem; cursor: pointer;
  transition: all .25s var(--curva);
}
.filtri button:hover { color: var(--testo); border-color: var(--bordo-forte); }
.filtri button[aria-pressed="true"] { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.filtri button small { opacity: .65; margin-left: .4rem; }

/* Niente ritagli: ogni foto si vede per intero, nelle sue proporzioni.
   L'impaginazione a colonne le incastra senza lasciare buchi.              */
.galleria { columns: 4; column-gap: .8rem; }
.galleria figure {
  break-inside: avoid; margin: 0 0 .8rem; position: relative; overflow: hidden;
  background: var(--fondo-scheda); border: 1px solid var(--bordo); cursor: pointer;
  transition: border-color .35s var(--curva);
}
.galleria figure:hover { border-color: var(--bordo-forte); }
.galleria img { width: 100%; height: auto; display: block; transition: transform .6s var(--curva); }
.galleria figure:hover img { transform: scale(1.04); }
/* la riga di video piccoli, in proporzione 16:9 */
.video-riga { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; margin-top: 2rem; }
.video-riga figure { margin: 0; border: 1px solid var(--bordo); background: var(--fondo-scheda); position: relative; overflow: hidden; }
.video-riga video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.video-riga figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem .75rem .6rem;
  background: linear-gradient(to top, rgba(10,13,17,.9), transparent);
  font-family: var(--display); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: #E8EBF0;
}
.galleria figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.6rem .8rem .7rem;
  background: linear-gradient(to top, rgba(10, 13, 17, .93), transparent);
  font-size: .78rem; color: #E8EBF0; opacity: 0; transform: translateY(6px);
  transition: opacity .35s var(--curva), transform .35s var(--curva);
}
.galleria figure:hover figcaption { opacity: 1; transform: none; }
.ancora { display: block; margin: 1.75rem auto 0; }
.ancora[hidden] { display: none; }

/* ── lightbox ────────────────────────────────────────────── */
.lente[hidden] { display: none !important; }
.lente {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 11, 15, .96);
  display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; padding: 1rem;
}
[data-tema="chiaro"] .lente { background: rgba(238, 240, 243, .97); }
.lente-alto { display: flex; justify-content: flex-end; }
.lente-corpo { display: grid; place-items: center; min-height: 0; position: relative; }
.lente-corpo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lente-basso { text-align: center; color: var(--testo-medio); font-size: .9rem; }
.lente-basso b { display: block; font-family: var(--display); text-transform: uppercase; color: var(--testo); margin-bottom: .2rem; }
.lente button {
  background: transparent; border: 1px solid var(--bordo-forte); color: var(--testo);
  width: 46px; height: 46px; border-radius: 2px; cursor: pointer; display: grid; place-items: center;
}
.lente button:hover { border-color: var(--rosso); color: var(--rosso-vivo); }
.lente .prec, .lente .succ { position: absolute; top: 50%; transform: translateY(-50%); }
.lente .prec { left: 0; }
.lente .succ { right: 0; }

/* ── domande ─────────────────────────────────────────────── */
.domanda { border-top: 1px solid var(--bordo); }
.domanda:last-of-type { border-bottom: 1px solid var(--bordo); }
.domanda summary {
  cursor: pointer; list-style: none; padding: 1.35rem 2.5rem 1.35rem 0; position: relative;
  font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em;
  color: var(--testo);
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%; width: 13px; height: 2px;
  background: var(--rosso); transform: translateY(-50%);
}
.domanda summary::before {
  content: ""; position: absolute; right: .4rem; top: 50%; width: 13px; height: 2px;
  background: var(--rosso); transform: translateY(-50%) rotate(90deg);
  transition: transform .3s var(--curva); z-index: 1;
}
.domanda[open] summary::before { transform: translateY(-50%) rotate(0); }
.domanda p { padding-bottom: 1.35rem; margin: 0; font-size: .96rem; }

/* ── contatti e piede ────────────────────────────────────── */
.contatti-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.recapito { display: flex; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--bordo); align-items: center; text-decoration: none; }
.recapito:last-child { border-bottom: 1px solid var(--bordo); }
.recapito svg { width: 20px; height: 20px; color: var(--rosso); flex: none; }
.recapito small { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--testo-muto); }
.recapito b { font-family: var(--display); font-size: 1.1rem; font-weight: 500; color: var(--testo); }


/* il pulsante WhatsApp, sempre raggiungibile */
.wa-fisso {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 70;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #0B1F14;
  display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6);
  transition: transform .3s var(--curva);
}
.wa-fisso:hover { transform: scale(1.07); }
.wa-fisso svg { width: 28px; height: 28px; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 1000px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .galleria { columns: 3; }
  .apertura .colonna { grid-template-columns: 1fr; }
  .apertura .lastra { max-width: 380px; }
  .verificatore, .contatti-griglia { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  :root { --colonna: min(1200px, 100% - 2rem); }
  .menu {
    position: fixed; inset: 0 0 auto; top: 68px;
    flex-direction: column; gap: 0;
    background: var(--fondo-alto); border-bottom: 1px solid var(--bordo);
    padding: .5rem 1.25rem 1.25rem;
    transform: translateY(-130%); transition: transform .4s var(--curva);
  }
  .menu[data-aperto="1"] { transform: none; }
  .menu a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--bordo); font-size: .95rem; }
  .apri-menu { display: grid; }
  .g2, .g3, .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3.larga, .g2.larga { grid-template-columns: 1fr; }
  .galleria { columns: 2; column-gap: .5rem; }
  .galleria figure { margin-bottom: .5rem; }
  .video-riga { grid-template-columns: 1fr; }
  /* quattro numeri: due per riga, nessuno resta solo */
  .numeri { grid-template-columns: 1fr 1fr; }
  .numeri div { padding: .9rem .6rem; }
  .numeri b { font-size: 1.25rem; }
  .numeri small { font-size: .62rem; letter-spacing: .08em; }
  .marchio span { display: none; }
  .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── chi non vuole il movimento non lo vede ──────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .comparsa { opacity: 1; transform: none; }
  .taglio > span { clip-path: none; }
  .taglio::after { display: none; }
}

/* ── se il JavaScript non parte, la pagina si vede lo stesso ── */
.no-js .comparsa { opacity: 1; transform: none; }
.no-js .taglio > span { clip-path: none; }


/* ── aggiunte del 15/09/2026 ──────────────────────────────── */

/* quattro numeri invece di tre */
.numeri.quattro { grid-template-columns: repeat(4, 1fr); }

/* 🔴 Il pulsante WhatsApp copriva i valori delle schede da telefono
   (visto nello screenshot del cliente del 15/09). Su schermo stretto
   etichetta e valore vanno su due righe, a sinistra: niente si sovrappone. */
@media (max-width: 760px) {
  .numeri.quattro { grid-template-columns: 1fr 1fr; }
  .misura { flex-direction: column; align-items: flex-start; gap: .15rem; padding: .6rem 0; }
  .misura b { font-size: 1.05rem; }
  /* e comunque le schede lasciano respiro nell'angolo del pulsante */
  .sezione:last-of-type .scheda:last-child { padding-bottom: 4.5rem; }
  .wa-fisso { width: 50px; height: 50px; right: .9rem; bottom: .9rem; }
  .wa-fisso svg { width: 25px; height: 25px; }
  /* la testata non deve lasciar trasparire il testo che le scorre sotto */
  .testata { background: color-mix(in srgb, var(--fondo) 97%, transparent); }
}



/* ══ IL PIÈ DI PAGINA ═══════════════════════════════════════
   Quattro colonne: il marchio con i recapiti, le lavorazioni,
   le sezioni del sito e dove siamo. Sotto, la riga legale.     */
.piede { border-top: 1px solid var(--bordo); background: var(--fondo-alto); margin-top: 0; }

.piede-griglia {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.25rem, 4vw, 3rem);
}
.piede-col h3 {
  font-size: .82rem; letter-spacing: .2em; color: var(--rosso);
  margin-bottom: 1.15rem;
}
.piede-col ul { list-style: none; margin: 0; padding: 0; }
.piede-col li { margin-bottom: .6rem; }
.piede-col a, .piede address, .piede p {
  color: var(--testo-medio); text-decoration: none; font-size: .92rem;
  font-style: normal; line-height: 1.55;
}
.piede-col li a { position: relative; transition: color .25s var(--curva), padding-left .25s var(--curva); }
.piede-col li a::before {
  content: ""; position: absolute; left: 0; top: .62em; width: 0; height: 1px;
  background: var(--rosso); transition: width .25s var(--curva);
}
.piede-col li a:hover { color: var(--testo); padding-left: 1.1rem; }
.piede-col li a:hover::before { width: .75rem; }

/* il marchio */
.piede-marchio img {
  width: 148px; height: auto; margin-bottom: 1.25rem;
  border: 1px solid var(--bordo); border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.piede-marchio p { max-width: 34ch; margin-bottom: 1.4rem; }

.piede-recapiti { display: grid; gap: .55rem; }
.piede-recapiti a { display: flex; align-items: center; gap: .6rem; transition: color .25s var(--curva); }
.piede-recapiti a:hover { color: var(--rosso-vivo); }
.piede-recapiti svg { width: 16px; height: 16px; color: var(--rosso); flex: none; }

/* dove siamo */
.piede address { margin-bottom: 1rem; }
.piede-mappa { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.25rem; transition: color .25s var(--curva); }
.piede-mappa:hover { color: var(--rosso-vivo); }
.piede-mappa svg { width: 16px; height: 16px; color: var(--rosso); flex: none; }
.piede-zona { font-size: .85rem !important; color: var(--testo-muto) !important; margin-bottom: 1.4rem; }
.piede-cta { font-size: .8rem; padding: .78rem 1.15rem; }

/* la riga legale */
.piede-legale {
  display: flex; flex-wrap: wrap; gap: 1rem 1.75rem;
  justify-content: space-between; align-items: center;
  border-top: 1px solid var(--bordo);
  padding-block: 1.35rem 1.6rem;
  /* il pulsante WhatsApp galleggia nell'angolo: la riga gli lascia posto */
  padding-right: 5.5rem;
  font-size: .81rem; color: var(--testo-muto);
}
.piede-legale strong { color: var(--testo-medio); font-weight: 500; }
.piede-legale a { color: var(--testo-muto); text-decoration: none; }
.piede-legale a:hover { color: var(--rosso-vivo); }
.firma { font-size: .81rem; }

@media (max-width: 1000px) {
  .piede-griglia { grid-template-columns: 1fr 1fr; }
  .piede-marchio { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .piede-griglia { grid-template-columns: 1fr; gap: 2.25rem; }
  .piede-legale { flex-direction: column; align-items: flex-start; gap: .6rem; padding-right: 0; padding-bottom: 4.5rem; }
  .piede-cta { width: 100%; justify-content: center; }
}


/* ══ MODIFICHE 4 · 21/09/2026 ═══════════════════════════════

   LA TARGA NELL'APERTURA
   Il logo di Mirko com'è: la targa di metallo spazzolato, solo
   rifilata ai bordi (logo-targa.webp). Il cliente l'ha voluta nella
   pagina iniziale, sopra l'occhiello, al posto del logo vecchio.
   Non si ridisegna e non si deforma: cambia solo la misura.
   ══════════════════════════════════════════════════════════════ */
.apertura { padding-top: clamp(1rem, 2.2vw, 1.25rem); }
/* la targa e il video partono dalla stessa riga */
.apertura .colonna { align-items: start; }
.targa-apertura {
  display: block; width: auto; max-width: none;
  /* grande e al centro della colonna, come nel fotomontaggio del cliente.
     L'altezza cresce con lo schermo ma lascia sempre i pulsanti del
     preventivo nel primo schermo: 240 px su 1440×900, 198 su 1366×768. */
  height: clamp(96px, calc(100vh - 570px), 240px); aspect-ratio: 398 / 480;
  margin: 0 auto 1.4rem;
  border: 1px solid var(--bordo-forte); background: #333332;
  /* lo spigolo tagliato, lo stesso del video e del logo nel piede */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

/* fra 1001 e 1199 px la colonna del titolo è più stretta e il testo va
   su più righe: la targa si ferma prima, così i pulsanti restano su */
@media (min-width: 1001px) and (max-width: 1199px) {
  .targa-apertura { height: clamp(80px, calc(100vh - 635px), 240px); }
}

/* LA TESTATA
   Il logo piccolo resta sempre in alto a sinistra, anche in cima alla
   pagina: i loghi sono due, quello piccolo qui e la targa grande
   nell'apertura (voluto da Domenico il 21/09).                      */
.testata .colonna { padding-block: .7rem; }
.marchio img { height: 50px; width: auto; aspect-ratio: 398 / 480; border: 1px solid var(--bordo-forte); }

/* I VIDEO DELLE MACCHINE DA TELEFONO
   Uno sotto l'altro a tutta larghezza erano tre schermate di video:
   ora stanno in una riga che si fa scorrere col dito, e il terzo
   si vede spuntare, così si capisce che ce n'è ancora.             */
@media (max-width: 760px) {
  .video-riga {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 0;
    padding-bottom: .4rem; scrollbar-width: none;
  }
  .video-riga::-webkit-scrollbar { display: none; }
  .video-riga figure { scroll-snap-align: start; }
  .targa-apertura { height: clamp(120px, 21vh, 180px); margin-bottom: 1.2rem; }
  .marchio img { height: 46px; }
}

/* la scritta accanto al logo: la riga verticale una volta sola
   (prima la prendevano anche i due testi interni, e le righe erano tre) */
.marchio span span { border: 0; padding: 0; }

/* ── 21/09 · pulsanti «vuoti» su un <button> ─────────────────
   Il browser dà a ogni <button> uno sfondo grigio chiaro di suo: sotto
   il testo chiaro del tema scuro «Mostra altri lavori» spariva.        */
.btn-vuoto { background: transparent; }

/* ── 21/09 · la foto dello stabilimento in «Chi siamo» ──────────
   È verticale: la cornice la tiene in proporzione e non la fa
   diventare più alta dello schermo.                                 */
#chi-siamo figure img {
  width: 100%; aspect-ratio: 4 / 5; max-height: 78vh;
  object-fit: cover; object-position: 50% 45%; display: block;
}


/* ══ CONTROLLO COMPLETO · 21/09/2026 ═════════════════════════
   Le correzioni uscite dal controllo di tutto il sito, pulsante
   per pulsante, in tutti e due i temi, da computer e da telefono. */

/* i controlli del browser (cursori, barre di scorrimento) prendono il tema */
:root { color-scheme: dark; --rosso-testo: #F24A5F; }
[data-tema="chiaro"] { color-scheme: light; --rosso-testo: var(--rosso); }

/* i testi rossi piccoli: nel tema scuro il rosso del marchio non si leggeva
   (3:1). Questo rosso più chiaro supera 4,5:1 su tutti i fondi scuri. */
.occhiello, .scheda .indice, .piede-col h3, .esito.no .titolo { color: var(--rosso-testo); }

/* il pulsante del piè di pagina: il colore dei link del piede lo copriva */
.piede-col a.btn-pieno, .piede-col a.btn-pieno:hover { color: #fff; }
.piede-col a.piede-cta { font-size: .8rem; }

/* i numeri dei filtri: leggibili, distinti solo dal peso */
.filtri button small { opacity: 1; font-weight: 400; }

/* il titolo con il taglio e il primo paragrafo non si toccano più */
h2.taglio + p { margin-top: 1.25rem; }

/* le etichette sotto i quattro numeri dell'apertura, righe strette */
.numeri small { display: block; line-height: 1.35; margin-top: .45rem; }

/* ── LE GALLERIE A RIGHE GIUSTIFICATE ─────────────────────────
   Prima erano a colonne: restavano buchi in fondo e «Mostra altri
   lavori» rimescolava le foto già viste. Ora ogni riga è piena, le
   foto restano intere nelle loro proporzioni (--r = larghezza/altezza,
   la scrive sito.js) e quelle nuove si aggiungono sotto.             */
.galleria { columns: auto; display: flex; flex-wrap: wrap; gap: .8rem; }
.galleria::after { content: ""; flex: 999 1 0px; }
.galleria figure {
  margin: 0; break-inside: auto;
  flex: var(--r, 1.333) 1 calc(var(--r, 1.333) * 210px);
  aspect-ratio: var(--r, 1.333);
}
.galleria img { width: 100%; height: 100%; object-fit: cover; }
.galleria figure:focus-visible { outline: 2px solid var(--rosso-vivo); outline-offset: 2px; }

/* ── LA LENTE ─────────────────────────────────────────────────
   La foto sta tutta nello schermo e non copre più la didascalia;
   le frecce hanno un fondo, così si vedono sopra ogni foto.        */
.lente-corpo { grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden; }
.lente-corpo img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
.lente .prec, .lente .succ {
  background: rgba(8, 11, 15, .6); color: #F5F7FA; border-color: rgba(245, 247, 250, .35); z-index: 1;
}
[data-tema="chiaro"] .lente .prec, [data-tema="chiaro"] .lente .succ {
  background: rgba(255, 255, 255, .85); color: #10151B; border-color: var(--bordo-forte);
}

/* il pulsante del menu diventa una X quando il menu è aperto */
.apri-menu .croce { display: none; }
.apri-menu[aria-expanded="true"] .linee { display: none; }
.apri-menu[aria-expanded="true"] .croce { display: inline; }

.wa-fisso { transition: transform .3s var(--curva), opacity .3s var(--curva), visibility 0s; }

@media (max-width: 760px) {
  /* servizi e materiali: una scheda per riga, non più 2 da 160 px */
  .g4.larga { grid-template-columns: 1fr; }
  .galleria { gap: .5rem; }
  .galleria figure { flex-basis: calc(var(--r, 1.333) * 110px); }
  /* il menu chiuso non si raggiunge più col tasto Tab */
  .menu { visibility: hidden; transition: transform .4s var(--curva), visibility 0s linear .4s; }
  .menu[data-aperto="1"] { visibility: visible; transition: transform .4s var(--curva); }
  /* arrivando da un link del menu, la sezione non resta incollata alla testata */
  main section[id] { scroll-margin-top: 56px; }
}

/* il pulsante WhatsApp resta a riposo finché si vedono i pulsanti dell'apertura:
   da telefono e da tablet copriva uno dei quattro numeri o la didascalia del video */
@media (max-width: 1024px) {
  .wa-fisso.a-riposo {
    opacity: 0; visibility: hidden; transform: scale(.85); pointer-events: none;
    transition: transform .3s var(--curva), opacity .3s var(--curva), visibility 0s linear .3s;
  }
}

/* con il JavaScript le righe le calcola sito.js (impagina): misure esatte */
.galleria.impaginata figure { flex: none; aspect-ratio: auto; }


/* ══ PANNELLO · correzioni del 21/09/2026 ═════════════════════
   Quello che il cliente cambia dal pannello non deve mai rompere
   la pagina: un logo di un'altra forma, una foto orizzontale, un
   a capo, un indirizzo web lunghissimo in un titolo.              */

/* IL LOGO CARICATO NON SI DEFORMA
   La proporzione 398:480 del logo di oggi resta solo come ripiego
   prima che il file arrivi («auto»): poi vale quella vera del file.
   L'altezza resta la stessa, quindi i pulsanti non si spostano; se
   il logo è molto largo si ferma alla colonna e si vede intero.    */
.targa-apertura { aspect-ratio: auto 398 / 480; width: auto; max-width: 100%; object-fit: contain; }
.marchio img { aspect-ratio: auto 398 / 480; width: auto; max-width: 150px; object-fit: contain; }

/* LA FOTO DI «CHI SIAMO»
   Una foto orizzontale resta orizzontale e si vede intera. Una
   verticale si ferma a 4:5, come oggi: l'altezza massima è 1,25
   volte la larghezza (125cqi) e mai più dello schermo.            */
#chi-siamo figure { container-type: inline-size; }
#chi-siamo figure img { aspect-ratio: auto 4 / 5; max-height: 78vh; max-height: min(78vh, 125cqi); }

/* GLI A CAPO SCRITTI NEL PANNELLO
   Una riga vuota nel pannello resta una riga vuota sul sito, nei
   testi come nelle risposte e nelle descrizioni delle schede.      */
p[data-campo], .domanda p, .scheda p { white-space: pre-line; }

/* UN INDIRIZZO WEB O UN'EMAIL IN UN TITOLO
   Una parola lunghissima va a capo invece di far scorrere la
   pagina di lato; la colonna dell'apertura può stringersi.         */
h1, h2, h3, .taglio span { overflow-wrap: anywhere; }
.apertura .colonna > * { min-width: 0; }


/* ══ PANNELLO · correzioni del secondo collaudo, 21/09/2026 ══════ */

/* LA LENTE DA TELEFONO
   Un titolo con un indirizzo web lunghissimo allargava la colonna oltre
   lo schermo: spariva la X per chiudere. La colonna resta larga quanto
   lo schermo e le parole lunghe vanno a capo.                        */
.lente { grid-template-columns: minmax(0, 1fr); }
.lente-basso { overflow-wrap: anywhere; }

/* IL LOGO CON LO SFONDO TRASPARENTE
   Il pannello, quando lo carica, guarda se è trasparente e se la scritta
   è scura o chiara, e sceglie la lastra da mettergli dietro: così non
   sparisce né sul tema scuro né su quello chiaro. Un logo con il suo
   sfondo (come quello di oggi) non ha data-fondo e non cambia.        */
img[data-fondo="chiaro"] { background: #F2F3F5; }
img[data-fondo="scuro"] { background: #333332; }
.marchio img[data-fondo], .piede-marchio img[data-fondo] { padding: 4px; }

/* UNA VOCE DEL MENU SVUOTATA DAL PANNELLO
   Sparisce, invece di lasciare una riga vuota che si può toccare.      */
.menu li:has(> a:empty), .piede-col li:has(> a:empty) { display: none; }

/* IL MENU FRA 761 E 1000 PX (tablet in verticale)
   Le sei voci, il marchio e l'interruttore del tema non ci stavano in
   una riga: «Taglio ad acqua» andava su tre righe e la testata si
   gonfiava. Qui il menu diventa quello del telefono, con il pulsante ☰.
   Solo il menu: griglie e gallerie dei tablet restano come sono.      */
@media (min-width: 761px) and (max-width: 1000px) {
  .menu {
    position: fixed; inset: 0 0 auto; top: 73px;
    flex-direction: column; gap: 0;
    background: var(--fondo-alto); border-bottom: 1px solid var(--bordo);
    padding: .5rem 1.25rem 1.25rem;
    transform: translateY(-130%); visibility: hidden;
    transition: transform .4s var(--curva), visibility 0s linear .4s;
  }
  .menu[data-aperto="1"] { transform: none; visibility: visible; transition: transform .4s var(--curva); }
  .menu a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--bordo); font-size: .95rem; }
  .apri-menu { display: grid; }
}
/* da computer una voce non va mai a capo: il menu resta su una riga */
@media (min-width: 1001px) {
  .menu a { white-space: nowrap; }
  /* Voci scritte dal pannello tanto lunghe da non starci in una riga:
     la pagina scorreva di lato. sito.js lo misura e mette «menu-stretto»:
     il menu diventa quello col pulsante ☰, come fra 761 e 1000 px. */
  .menu-stretto .menu {
    position: fixed; inset: 0 0 auto; top: 73px;
    flex-direction: column; gap: 0;
    background: var(--fondo-alto); border-bottom: 1px solid var(--bordo);
    padding: .5rem 1.25rem 1.25rem;
    transform: translateY(-130%); visibility: hidden;
    transition: transform .4s var(--curva), visibility 0s linear .4s;
  }
  .menu-stretto .menu[data-aperto="1"] { transform: none; visibility: visible; transition: transform .4s var(--curva); }
  .menu-stretto .menu a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--bordo); font-size: .95rem; }
  .menu-stretto .apri-menu { display: grid; }
}

/* IL PULSANTE DELL'AUDIO
   Regola THK: i video partono da soli, muti, in loop e senza controlli.
   Solo se il video caricato ha l'audio compare questo pulsante, uno
   solo, nell'angolo in alto a sinistra del video. Alto almeno 44 px:
   da telefono si tocca con un dito.                                   */
.audio {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .5rem .85rem;
  font-family: var(--display); font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; text-align: left;
  color: #F5F7FA; background: rgba(8, 11, 15, .75);
  border: 1px solid rgba(245, 247, 250, .4); border-radius: 2px; cursor: pointer;
  transition: border-color .25s var(--curva);
}
.audio svg { width: 16px; height: 16px; flex: none; }
.audio[aria-pressed="false"] .onde { opacity: .35; }
.audio:hover, .audio:focus-visible { border-color: var(--rosso-vivo); }