/* ==========================================================================
   Styledil — home, step 5 (design approvato il 03/11/2026, versione 6)
   Caratteri serviti dal sito: Montserrat (titoli, leggero) e Figtree (testi).
   Colori misurati dal design (confronta-design.py --colori), in #hex.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colori del design */
  --nero: #0a0a0a;
  --testo: #545252;
  --testo-forte: #3c3c3e;
  --testo-tenue: #646264;
  --azzurro: #1a90a6;
  --bianco: #ffffff;
  --fondo: #fafafa;
  --fondo-2: #f5f5f5;
  --fondo-3: #eeefef;
  --linea: #c9cfcf;
  --linea-chiara: #e6e6e6;
  /* stati (non sono nel design statico) */
  --azzurro-hover: #157d90;
  --nero-hover: #2a2a2a;

  --font-titoli: "Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-testo: "Figtree", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --contenitore: 1240px;
  --margine: max(20px, env(safe-area-inset-left, 0px));
  --margine-dx: max(20px, env(safe-area-inset-right, 0px));
  --raggio: 18px;
  --raggio-grande: 24px;
  /* le due curve del movimento: entrate e uscite (--ease-out), cose che si spostano sullo schermo (--ease-in-out) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --testata: 78px;
  --testata-compatta: 62px;
  --ombra-vetro: 0 18px 44px -12px rgba(18, 28, 34, .22), 0 2px 6px rgba(18, 28, 34, .06);
  --ombra-morbida: 0 30px 70px -28px rgba(18, 28, 34, .28);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata-compatta) + 16px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button, .btn, .freccia, .menu__voci a { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--azzurro); outline-offset: 3px; border-radius: 6px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + var(--margine) + var(--margine-dx));
  margin-inline: auto;
  padding-left: var(--margine);
  padding-right: var(--margine-dx);
}
.vh, .galleria__conto {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--nero); color: var(--bianco); padding: 10px 16px; border-radius: 10px;
}
.salta:focus { top: 12px; }

/* ---------- icone del kit (svg come maschera: il colore lo dà il testo) ---------- */
.ico {
  display: inline-block; flex: none;
  width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat;
  mask: var(--m) center / contain no-repeat;
}
.ico--freccia { --m: url("/assets/img/icone/freccia-destra.svg"); }
.ico--freccia-sx { --m: url("/assets/img/icone/freccia-sinistra.svg"); }
.ico--chevron { --m: url("/assets/img/icone/chevron-destra.svg"); width: .5em; }
.ico--confronto { --m: url("/assets/img/icone/confronto-prima-dopo.svg"); }
.ico--play { --m: url("/assets/img/icone/riproduci-video-filo.svg"); }
.ico--telefono { --m: url("/assets/img/icone/telefono.svg"); }
.ico--posizione { --m: url("/assets/img/icone/posizione.svg"); }
.ico--posta { --m: url("/assets/img/icone/posta-elettronica.svg"); }
.ico--orologio { --m: url("/assets/img/icone/orologio.svg"); } /* gli orari, quando il cliente li scrive dal pannello */
.ico--materiali { --m: url("/assets/img/icone/materiali-certificati.svg"); }
.ico--pagamento { --m: url("/assets/img/icone/pagamento-dilazionabile.svg"); }
.ico--preventivo { --m: url("/assets/img/icone/preventivo-gratuito.svg"); }

/* ---------- tipografia ---------- */
.titolo {
  font-family: var(--font-titoli);
  font-weight: 300;
  color: var(--nero);
  font-size: clamp(2.15rem, 1.35rem + 3.1vw, 3.85rem);
  line-height: 1.08;
  letter-spacing: -.022em;
  text-wrap: balance;
}
.titolo__seconda {
  display: block;
  font-size: .7em;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin-top: .12em;
}
.titolo--medio { font-size: clamp(2rem, 1.3rem + 2.3vw, 3.1rem); }
.occhiello {
  font-family: var(--font-testo);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-forte);
}

/* ---------- pulsanti e collegamenti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 52px; padding: 0 30px;
  border-radius: 999px;
  font-family: var(--font-testo); font-size: 1.0625rem; font-weight: 600; letter-spacing: .005em;
  transition: background-color .2s ease, box-shadow .2s ease, transform .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn--azzurro { background: var(--azzurro); color: var(--bianco); box-shadow: 0 10px 24px -10px rgba(26, 144, 166, .65); }
.btn--nero { background: var(--nero); color: var(--bianco); }
.btn__cerchio {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin-right: -16px;
  border-radius: 50%; background: var(--bianco); color: var(--nero);
  font-size: 15px;
}
.btn__cerchio .ico { transition: transform .2s var(--ease-out); }
.btn--largo { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--azzurro:hover { background: var(--azzurro-hover); }
  .btn--nero:hover { background: var(--nero-hover); }
  .collegamento:hover .ico--chevron { transform: translateX(4px); }
  .btn:hover .btn__cerchio .ico { transform: translateX(3px); }
}
.collegamento {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px;
  color: var(--azzurro); font-weight: 600; font-size: 1.0625rem;
}
.collegamento .ico--chevron { font-size: .8em; transition: transform .2s var(--ease-out); }
.collegamento:active { opacity: .7; }

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid transparent;
  pointer-events: none; /* la scatola resta alta: i clic li prendono solo la fascia e i suoi comandi */
}
/* scorrendo la testata si compatta: il fondo sale, logo e comandi restano in mezzo alla fascia (main.js, solo transform) */
.testata__fondo {
  position: absolute; inset: 0 0 -1px; z-index: -1;
  background: rgba(255, 255, 255, .9);
  border-bottom: 1px solid transparent;
  pointer-events: auto;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.testata.scorsa .testata__fondo { background: rgba(255, 255, 255, .97); border-bottom-color: var(--linea-chiara); box-shadow: 0 8px 30px -22px rgba(0, 0, 0, .35); }
.testata__riga { display: flex; align-items: center; gap: 24px; height: var(--testata); }
.testata__logo, .testata__azione, .testata__apri, .menu { pointer-events: auto; }
.testata__fondo, .testata__logo, .testata__azione, .testata__apri { will-change: transform; }
.testata__azione { display: none; transform-origin: 100% 50%; }
/* il marchio pesa nella parte bassa (il diamante sta sopra): un filo più su, per centrare le lettere */
.testata__logo { position: relative; top: -3px; z-index: 60; display: block; flex: none; margin-right: auto; transform-origin: 0 50%; transition: opacity .2s ease; }
.testata__logo:active { opacity: .7; }
.testata__logo img { height: 44px; width: auto; }
.testata__cta { display: none; }
.testata__apri {
  position: relative; z-index: 60;
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-right: -8px;
  border-radius: 50%;
}
.testata__apri { transition: background-color .2s ease; }
.testata__apri:active { background: var(--fondo-3); }
.testata__linee { transition: transform .16s var(--ease-out); }
.testata__apri:active .testata__linee { transform: scale(.9); }
.testata__linee { position: relative; width: 22px; height: 12px; }
.testata__linee span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: var(--nero); border-radius: 2px;
  transition: transform .2s var(--ease-out);
}
.menu-aperto .testata__linee span { transition-duration: .3s; }
.testata__linee span:first-child { top: 0; }
.testata__linee span:last-child { top: 10.5px; }
/* le due linee diventano una × solo con transform */
.menu-aperto .testata__linee span:first-child { transform: translateY(5.25px) rotate(45deg); }
.menu-aperto .testata__linee span:last-child { transform: translateY(-5.25px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 55;
  height: 100dvh;
  padding: calc(var(--testata) + env(safe-area-inset-top, 0px) + 28px) var(--margine-dx) calc(40px + env(safe-area-inset-bottom, 0px)) var(--margine);
  background: var(--bianco);
  display: flex; flex-direction: column; gap: 36px;
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease-out), visibility 0s linear .2s;
}
.menu-aperto .menu { opacity: 1; visibility: visible; transition: opacity .32s var(--ease-out), visibility 0s; }
/* il menu da telefono si apre in 320 ms con le voci a cascata (50 ms) e si chiude in 200 ms, tutto insieme */
@media (max-width: 959px) {
  .menu__voci li, .menu__telefono { opacity: 0; transform: translateY(18px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
  .menu-aperto .menu__voci li, .menu-aperto .menu__telefono { opacity: 1; transform: none; transition-duration: .5s; }
  .menu-aperto .menu__voci li:nth-child(1) { transition-delay: 40ms; }
  .menu-aperto .menu__voci li:nth-child(2) { transition-delay: 90ms; }
  .menu-aperto .menu__voci li:nth-child(3) { transition-delay: 140ms; }
  .menu-aperto .menu__voci li:nth-child(4) { transition-delay: 190ms; }
  .menu-aperto .menu__voci li:nth-child(5) { transition-delay: 240ms; }
  .menu-aperto .menu__telefono { transition-delay: 290ms; }
}
.menu__voci { display: grid; gap: 6px; }
.menu__voci a {
  display: block; padding: 8px 0;
  font-family: var(--font-titoli); font-weight: 300; font-size: 2.1rem; color: var(--nero); letter-spacing: -.02em;
}
.menu__voci a { transition: color .2s ease, transform .16s var(--ease-out); }
.menu__voci a:active { color: var(--azzurro); transform: scale(.97); }
.menu__telefono { color: var(--azzurro); font-weight: 500; font-size: 1.15rem; }

@media (min-width: 960px) {
  :root { --testata: 96px; --testata-compatta: 75px; --margine: max(32px, env(safe-area-inset-left, 0px)); --margine-dx: max(32px, env(safe-area-inset-right, 0px)); }
  .testata__logo { margin-right: 0; }
  .testata__logo img { height: 50px; }
  .testata__apri { display: none; }
  /* il menu sta in mezzo, fra il logo e il pulsante, come nel design */
  .menu {
    position: static; height: auto; padding: 0; background: none; overflow: visible;
    opacity: 1; visibility: visible; flex-direction: row; transition: none;
    margin-inline: auto;
  }
  .menu__voci { display: flex; gap: 4px; }
  .menu__voci a {
    font-family: var(--font-testo); font-size: 1rem; font-weight: 500; color: var(--testo-forte);
    letter-spacing: .005em; padding: 10px 14px; border-radius: 999px;
    transition: color .2s ease, background-color .2s ease, transform .16s var(--ease-out);
  }
  .menu__telefono { display: none; }
  .testata__azione { display: flex; }
  .testata__cta { display: inline-flex; min-height: 50px; padding: 0 8px 0 26px; gap: 18px; font-size: 1rem; }
  .testata__cta .btn__cerchio { margin-right: 0; }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  .menu__voci a:hover { color: var(--nero); background: var(--fondo-3); }
}

/* ---------- «Servizi»: Bagni, Ristrutturazioni e Mosaico sotto una voce (Copy/extra.md, Menu) ---------- */
.menu__apri-gruppo {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; text-align: left; cursor: default;
  font-family: var(--font-titoli); font-weight: 300; font-size: 2.1rem; color: var(--nero); letter-spacing: -.02em;
}
.menu__freccina { display: none; }
.menu__sotto { display: grid; margin: 0 0 6px 4px; padding-left: 18px; border-left: 1px solid rgba(26, 144, 166, .35); }
.menu__voci .menu__sotto a { padding: 6px 0; font-family: var(--font-testo); font-weight: 500; font-size: 1.25rem; color: var(--testo-forte); letter-spacing: 0; }
@media (min-width: 960px) {
  .menu__solo-telefono { display: none; }
  .menu__gruppo { position: relative; }
  .menu__apri-gruppo {
    width: auto; gap: 8px; padding: 10px 14px; border-radius: 999px; cursor: pointer;
    font-family: var(--font-testo); font-size: 1rem; font-weight: 500; color: var(--testo-forte); letter-spacing: .005em;
    transition: color .2s ease, background-color .2s ease, transform .16s var(--ease-out);
  }
  .menu__apri-gruppo:active { transform: scale(.97); }
  .menu__freccina {
    display: block; width: 7px; height: 7px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease-out);
  }
  .menu__gruppo.aperto .menu__freccina { transform: translateY(1px) rotate(225deg); }
  /* la tendina nasce dalla voce: si apre in 200 ms e si chiude subito (l'uscita è più veloce dell'entrata) */
  .menu__sotto {
    position: absolute; top: 100%; left: 0; z-index: 2;
    min-width: 240px; margin: 10px 0 0; padding: 8px; border: 1px solid var(--linea-chiara); border-radius: 16px;
    background: var(--bianco); box-shadow: var(--ombra-vetro);
    display: none; opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: 30px 0;
  }
  .menu__sotto::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .menu__gruppo.aperto .menu__sotto {
    display: block; opacity: 1; transform: none;
    transition: opacity .2s var(--ease-out), transform .2s var(--ease-out);
  }
  @starting-style {
    .menu__gruppo.aperto .menu__sotto { opacity: 0; transform: translateY(-6px) scale(.97); }
  }
  .menu__voci .menu__sotto a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 1rem; }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) {
  .menu__apri-gruppo:hover { color: var(--nero); background: var(--fondo-3); }
  .menu__gruppo:hover .menu__sotto { display: block; opacity: 1; transform: none; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
  @starting-style { .menu__gruppo:hover .menu__sotto { opacity: 0; transform: translateY(-6px) scale(.97); } }
  .menu__gruppo:hover .menu__freccina { transform: translateY(1px) rotate(225deg); }

}

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 24px 0 52px;
  isolation: isolate;
  overflow-x: clip; /* l'ombra del cubo usciva di 1-2 px a destra fra 1280 e 1300 px */
}
.hero__luce {
  position: absolute; inset: calc(var(--testata) * -1) 0 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 70%, var(--bianco) 100%),
    url("/assets/img/fondi/sfondo-luce-home-900.webp") 30% 100% / cover no-repeat;
  pointer-events: none;
}
.hero__griglia { display: grid; gap: 40px; }
.hero__testo { position: relative; z-index: 2; }
.hero__marchio { margin-top: 26px; }
.hero__marchio img { width: min(76vw, 300px); height: auto; }
.hero__titolo {
  margin-top: 26px; text-wrap: balance;
  font-family: var(--font-titoli); font-weight: 300; color: var(--nero);
  font-size: clamp(2.1rem, 1.2rem + 2.6vw, 3.1rem);
  line-height: 1.08; letter-spacing: -.028em;
}
.hero__sotto { margin-top: 22px; font-size: 1.0625rem; color: var(--testo); max-width: 34em; }
.hero__azioni { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }

/* la scena: il cubo di vetro con la foto dentro, e i due riquadri di vetro */
.hero__scena { position: relative; z-index: 1; padding-bottom: 70px; }
.cubo { position: relative; width: 100%; aspect-ratio: 1 / 1.02; }
.cubo::after {
  content: ""; position: absolute; left: 8%; right: -2%; bottom: -5%; height: 12%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20, 30, 35, .22), rgba(20, 30, 35, 0));
  filter: blur(6px);
}
.cubo__foto {
  position: absolute; inset: 0;
  clip-path: polygon(0 0, 90% 0, 100% 8%, 100% 100%, 10% 100%, 0 92%);
}
.cubo__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.cubo__vetro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cubo__spigoli polyline {
  fill: none; stroke: rgba(128, 196, 208, 1); stroke-width: 1.6; stroke-linejoin: round;
}
.cubo__spigoli .cubo__luce { stroke: rgba(255, 255, 255, .95); stroke-width: 1.2; }
.cubo__riflesso {
  position: absolute; inset: 8% 0 0 10%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .28) 42%, rgba(255, 255, 255, 0) 52%);
  pointer-events: none;
}

.vetro {
  position: absolute; z-index: 3;
  border-radius: var(--raggio);
  background: linear-gradient(150deg, rgba(255, 255, 255, .9), rgba(246, 248, 248, .78));
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--ombra-vetro), inset 0 1px 0 rgba(255, 255, 255, .9);
  color: var(--nero);
}
.vetro--cura {
  left: -2%; bottom: 0; width: 57%;
  display: grid; grid-template-columns: 44% 1fr; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px;
  transition: transform .2s var(--ease-out), box-shadow .25s ease;
}
.vetro--cura:active { transform: scale(.97); }
.vetro--cura img { width: 100%; aspect-ratio: 1.45; object-fit: cover; border-radius: 12px; }
.vetro__testo { font-family: var(--font-testo); font-size: .95rem; line-height: 1.25; font-weight: 500; }
.vetro__freccia {
  position: absolute; right: 10px; bottom: 10px;
  display: none; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--bianco); border: 1px solid var(--linea); color: var(--nero); font-size: 12px;
}
.vetro--anni {
  right: 0; bottom: 6px; width: 41%;
  padding: 14px 14px 14px 26px;
  display: grid; gap: 4px;
}
.vetro--anni::before {
  content: ""; position: absolute; left: 14px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: var(--azzurro);
}
.vetro__anno { font-family: var(--font-titoli); font-weight: 400; font-size: 1.15rem; letter-spacing: -.01em; }
.vetro__luogo { font-size: .8125rem; color: var(--testo); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .vetro--cura:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -16px rgba(18, 28, 34, .3), inset 0 1px 0 #fff; }
}

@media (min-width: 600px) {
  .vetro__freccia { display: grid; }
  .vetro--cura { padding-right: 52px; }
  .hero__azioni { flex-direction: row; align-items: center; gap: 28px; }
  .vetro__testo { font-size: 1.05rem; }
  .vetro__anno { font-size: 1.45rem; }
  .vetro__luogo { font-size: 1rem; }
}
@media (min-width: 960px) {
  .hero { padding: 40px 0 84px; }
  .hero__luce { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 72%, var(--bianco) 100%), url("/assets/img/fondi/sfondo-luce-home.webp"); background-position: 0 0, 30% 100%; background-size: auto, cover; }
  .hero__griglia { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 0; align-items: start; }
  .hero__testo { padding-top: 44px; margin-right: -14%; }
  .occhiello { font-size: .875rem; }
  .hero__marchio { margin-top: 30px; }
  .hero__marchio img { width: min(36vw, 440px); }
  .hero__titolo { margin-top: 40px; }
  /* come nel design: il titolo su due righe passa sopra il bordo del cubo di vetro; il testo sotto resta a sinistra */
  .hero__titolo { width: max-content; max-width: none; font-size: clamp(2.1rem, 0.8rem + 3.05vw, 3.1rem); }
  .hero__sotto { max-width: 86%; }
  .hero__sotto { margin-top: 26px; font-size: 1.1875rem; }
  .hero__azioni { margin-top: 40px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .hero__azioni .btn { min-height: 58px; padding: 0 38px; font-size: 1.125rem; }
  .hero__scena { padding-bottom: 0; }
  .cubo { width: 104%; margin-left: -1%; }
  .vetro--cura { left: -3%; bottom: -8%; width: 56%; padding: 12px 18px 12px 12px; gap: 18px; border-radius: 20px; }
  .vetro--cura img { border-radius: 14px; }
  .vetro__freccia { right: 14px; bottom: 14px; width: 34px; height: 34px; font-size: 14px; }
  .vetro--anni { right: 0; bottom: -7%; width: 39%; padding: 26px 20px 26px 42px; border-radius: 20px; }
  .vetro--anni::before { left: 24px; top: 26px; bottom: 26px; }
  .vetro__anno { font-size: 1.85rem; }
  .vetro__testo { font-size: 1.3rem; line-height: 1.22; }
  .vetro__luogo { font-size: 1.15rem; }
}

/* ---------- servizi ---------- */
.servizi { position: relative; padding: 52px 0 60px; background: var(--bianco); }
.servizi__griglia { margin-top: 44px; display: grid; gap: 44px; }
.servizio { display: grid; grid-template-columns: 112px 1fr; column-gap: 18px; align-items: center; }
.servizio__figura {
  grid-row: span 2;
  position: relative; aspect-ratio: 1; border-radius: 50%;
}
.servizio__figura img {
  width: 100%; height: 100%; object-fit: contain;
  -webkit-mask: radial-gradient(closest-side, #000 82%, transparent 100%);
  mask: radial-gradient(closest-side, #000 82%, transparent 100%);
}
.servizio__titolo {
  position: relative; align-self: end;
  padding-left: 18px;
  font-family: var(--font-testo); font-weight: 500; color: var(--nero);
  font-size: 1.25rem; line-height: 1.2;
}
.servizio__titolo::before { content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 2px; border-radius: 2px; background: var(--azzurro); }
.servizio p { align-self: start; padding-left: 18px; margin-top: 6px; font-size: 1rem; color: var(--testo); }
.servizio__link { grid-column: 2; justify-self: start; padding-left: 18px; min-height: 40px; font-size: 1rem; }
@media (max-width: 759px) { .servizio__figura { grid-row: span 3; } }
.servizi__anche { margin-top: 48px; text-align: center; color: var(--testo); font-size: 1.0625rem; }

@media (min-width: 760px) {
  .servizi__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .servizio { grid-template-columns: 1fr; align-content: start; text-align: left; }
  .servizio__figura { grid-row: auto; width: min(100%, 250px); margin: 0 auto 8px; border-radius: 0; }
  .servizio__titolo { margin-left: 12%; }
  .servizio p { margin-left: 12%; max-width: 17em; }
  .servizio__link { grid-column: auto; margin-left: 12%; margin-top: 4px; }
}
@media (min-width: 960px) {
  .servizi { padding: 64px 0 64px; }
  .servizi__griglia { margin-top: 36px; gap: 56px; }
  .servizio__titolo { font-size: 1.6rem; padding-left: 26px; }
  .servizio p { font-size: 1.125rem; padding-left: 26px; margin-top: 12px; }
  .servizio__link { padding-left: 26px; }
  .servizi__anche { margin-top: 44px; font-size: 1.1875rem; }
}

/* ---------- lavori ---------- */
.lavori { padding: 56px 0 64px; }
.lavori__testa { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; }
.galleria { position: relative; margin-top: 32px; padding-right: 11%; }
.galleria__palco {
  position: relative; z-index: 2;
  border-radius: var(--raggio); overflow: hidden;
  background: var(--fondo-3);
  box-shadow: var(--ombra-morbida);
  touch-action: pan-y;
}
.galleria__foto { position: relative; aspect-ratio: 4 / 3.4; }
.galleria__voce {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease-out), visibility 0s linear .7s;
}
.galleria__voce:first-child, .galleria__voce.attiva { opacity: 1; visibility: visible; transition: opacity .7s var(--ease-out), visibility 0s; }
.js .galleria__voce:first-child:not(.attiva) { opacity: 0; visibility: hidden; }
/* la foto che entra si assesta piano (da 1,04 a 1): la galleria respira anche ferma */
.galleria__voce img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease-out); }
.galleria__voce.attiva img, html:not(.js) .galleria__voce:first-child img { transform: none; }
/* una foto migliorata più piccola del palco: intera e alla sua misura (mai ingrandita),
   sopra la stessa foto sfocata che riempie il palco */
.galleria__voce--intera { display: flex; justify-content: center; overflow: hidden; background: var(--fondo-3); }
.galleria__voce--intera::before {
  content: ""; position: absolute; inset: -40px;
  background: var(--sfondo) center / cover no-repeat;
  filter: blur(26px) saturate(1.05); opacity: .9;
}
.galleria__voce--intera img { position: relative; width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.galleria__barra {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 26px 14px 12px 18px;
  background: linear-gradient(180deg, rgba(40, 34, 30, 0), rgba(40, 34, 30, .62) 45%, rgba(40, 34, 30, .74));
  color: var(--bianco);
}
.galleria__categorie { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.galleria__categorie button {
  min-height: 44px; font-size: .9375rem; font-weight: 500; color: rgba(255, 255, 255, .62);
  transition: color .2s ease, transform .16s var(--ease-out);
}
.galleria__categorie button:active { transform: scale(.97); }
.galleria__categorie button[aria-pressed="true"] { color: var(--bianco); }
.galleria__sep { width: 1px; height: 22px; background: rgba(255, 255, 255, .45); }
.galleria__frecce { display: flex; gap: 10px; }
.freccia {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .8); color: var(--bianco); font-size: 16px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.freccia--piena { background: var(--bianco); color: var(--nero); border-color: var(--bianco); }
.freccia:active { transform: scale(.97); background-color: rgba(255, 255, 255, .22); }
.freccia--piena:active { background-color: var(--fondo-3); }
@media (hover: hover) and (pointer: fine) {
  .freccia:hover { background: var(--bianco); color: var(--nero); }
  .galleria__categorie button:hover { color: var(--bianco); }
  .galleria__prossima:hover img { transform: scale(1.04); }
}
.galleria__prossima {
  position: absolute; right: 0; top: 7%; bottom: 7%; z-index: 1;
  width: 30%;
  border-radius: 14px; overflow: hidden;
  background: var(--fondo-3);
  box-shadow: var(--ombra-vetro);
}
.galleria__prossima { transition: transform .16s var(--ease-out); }
.galleria__prossima:active { transform: scale(.97); }
.galleria__prossima img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s var(--ease-out); }

.lavori__extra { margin-top: 40px; display: grid; gap: 28px; }
.confronto {
  padding: 6px; border-radius: var(--raggio);
  background: var(--bianco);
  box-shadow: var(--ombra-vetro);
}
.confronto__quadro {
  position: relative; overflow: hidden; border-radius: 13px;
  aspect-ratio: 3 / 2;
  background: var(--fondo-3);
  --pos: 50%;
}
.confronto__quadro img { width: 100%; height: 100%; object-fit: cover; }
.confronto__dopo { position: absolute; inset: 0; }
.confronto__prima { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.confronto__etichetta {
  position: absolute; top: 12px; z-index: 2;
  padding: 4px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--linea);
  color: var(--nero); font-size: .8125rem; font-weight: 500;
  pointer-events: none;
}
.confronto__etichetta--prima { left: 12px; }
.confronto__etichetta--dopo { right: 12px; }
.confronto__linea {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2;
  width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 12px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.confronto__maniglia {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  display: grid; place-items: center;
  transform: rotate(45deg);
  border-radius: 7px;
  background: var(--azzurro);
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 22px -6px rgba(26, 144, 166, .7);
  transition: transform .16s var(--ease-out);
}
.confronto__quadro:active .confronto__maniglia { transform: rotate(45deg) scale(1.08); }
/* quando il riquadro entra, due cerchi dalla maniglia dicono che si può trascinare */
.confronto__maniglia::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  border: 2px solid rgba(26, 144, 166, .6); opacity: 0; pointer-events: none;
}
.js .confronto.in .confronto__maniglia::after { animation: richiamo 1.6s var(--ease-out) .9s 2 backwards; }
@keyframes richiamo { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.75); } }
.confronto__maniglia .ico { transform: rotate(-45deg); color: var(--bianco); font-size: 22px; }
.confronto__cursore {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none;
  touch-action: pan-y;
}
.confronto__cursore:focus-visible + * { outline: none; }
.confronto:has(.confronto__cursore:focus-visible) { outline: 2px solid var(--azzurro); outline-offset: 3px; }

.lavori__divisore { display: none; }
.video-lavori { min-width: 0; color: var(--nero); }
.video-lavori__testa { display: flex; align-items: center; gap: 16px; }
.video-lavori__play {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  color: var(--azzurro); font-size: 52px;
}
.video-lavori__testo { display: grid; gap: 2px; margin-right: auto; }
.video-lavori__testo strong { font-weight: 500; font-size: 1.125rem; }
.video-lavori__testo span { color: var(--testo); font-size: .9375rem; }
.video-lavori__frecce { display: none; gap: 8px; }
.freccia--scura { border-color: var(--linea); color: var(--nero); background: var(--bianco); }
.freccia--scura:active { background-color: var(--fondo-3); }
.freccia--nera { background: var(--nero); border-color: var(--nero); color: var(--bianco); }
.freccia--nera:active { background-color: var(--nero-hover); }
/* lo spazio sotto contiene tutta l'ombra delle schede (prima era tagliata a 10 px e restava una striscia);
   il margine negativo lo restituisce, così l'impaginazione non cambia */
.video-riga {
  display: flex; gap: 12px; margin-top: 16px; padding: 4px 2px 44px; margin-bottom: -34px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.video-riga::-webkit-scrollbar { display: none; }
.video-box {
  position: relative; flex: 0 0 auto; width: 58%;
  aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden;
  background: var(--fondo-3); scroll-snap-align: start;
  box-shadow: 0 16px 34px -18px rgba(18, 28, 34, .45);
}
.video-box video { width: 100%; height: 100%; object-fit: cover; transition: transform .28s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .freccia--scura:hover { background: var(--nero); border-color: var(--nero); color: var(--bianco); }
  .freccia--nera:hover { background: var(--nero-hover); }
  .video-box:hover video { transform: scale(1.04); }
}

@media (min-width: 760px) {
  .galleria__foto { aspect-ratio: 1.55; }
  .galleria__barra { padding: 32px 22px 16px 30px; }
  .galleria__categorie { gap: 22px; }
  .galleria__categorie button { font-size: 1.125rem; }
  .lavori__extra { grid-template-columns: minmax(0, 54fr) 1px minmax(0, 46fr); align-items: center; gap: 40px; }
  .lavori__divisore { display: block; width: 1px; height: 120px; background: var(--linea); }
  .video-lavori__frecce { display: flex; }
  .video-box { width: 42%; }
}
@media (min-width: 960px) {
  .lavori { padding: 72px 0 72px; }
  .galleria { margin-top: 36px; padding-right: 26%; }
  .galleria__palco { border-radius: 22px; }
  .galleria__barra { min-height: 88px; padding: 36px 26px 18px 40px; }
  .galleria__categorie button { font-size: 1.25rem; }
  .galleria__sep { height: 28px; margin: 0 18px; }
  .freccia { width: 46px; height: 46px; }
  .galleria__prossima {
    z-index: 3; top: 9%; bottom: auto; width: 35%; aspect-ratio: 1.06;
    border: 7px solid var(--bianco); border-radius: 22px;
    box-shadow: 0 30px 60px -24px rgba(18, 28, 34, .38);
  }
  .lavori__extra { margin-top: 40px; padding-left: 2%; grid-template-columns: minmax(0, 50fr) 1px minmax(0, 46fr); gap: 56px; }
  .video-lavori__play { width: 60px; height: 60px; font-size: 60px; }
  .video-lavori__testo strong { font-size: 1.3rem; }
  .video-lavori__testo span { font-size: 1.0625rem; }
  .video-riga { margin-top: 18px; gap: 14px; }
}

/* ---------- metodo ---------- */
.metodo { padding: 52px 0 52px; background: var(--bianco); }
.passaggi { position: relative; margin-top: 36px; display: grid; gap: 14px; }
.passaggi::before {
  content: ""; position: absolute; left: 32px; top: 32px; bottom: 32px; width: 1px;
  background: rgba(26, 144, 166, .38);
}
/* come nel design: solo i rombi 01-05 sulla linea, coi nomi sotto (i disegni dei passaggi vanno nella pagina «Come lavoriamo») */
.passaggio { position: relative; display: grid; grid-template-columns: 64px 1fr; grid-template-areas: "diamante nome"; align-items: center; gap: 16px; }
.passaggio__diamante { grid-area: diamante; position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.passaggio__diamante img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.passaggio__numero {
  position: relative;
  font-family: var(--font-titoli); font-weight: 400; color: var(--azzurro);
  font-size: 1.15rem; letter-spacing: -.02em;
}
.passaggio__nome { grid-area: nome; font-weight: 500; color: var(--nero); font-size: 1.0625rem; }
.metodo__nota { margin-top: 28px; color: var(--testo); font-size: 1.0625rem; }

@media (min-width: 760px) {
  .passaggi { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
  .passaggi::before { left: 10%; right: 10%; top: 44px; bottom: auto; width: auto; height: 1px; }
  .passaggio { grid-template-columns: 1fr; grid-template-areas: "diamante" "nome"; justify-items: center; gap: 6px; text-align: center; }
  .passaggio__nome { margin-top: 4px; }
  .passaggio__diamante { width: 88px; height: 88px; }
  .passaggio__numero { font-size: 1.6rem; }
  .metodo__nota { text-align: center; margin-top: 30px; }
}
@media (min-width: 960px) {
  .metodo { padding: 64px 0 60px; }
  .passaggi::before { top: 52px; }
  .passaggio__diamante { width: 104px; height: 104px; }
  .passaggio__numero { font-size: 1.9rem; }
  .passaggio__nome { font-size: 1.25rem; }
  .metodo__nota { font-size: 1.1875rem; }
}

/* ---------- scelte insieme ---------- */
.scelte { padding: 8px 0 0; background: linear-gradient(180deg, var(--bianco) 0, var(--fondo) 100%); }
.scelte__pannello {
  position: relative; overflow: hidden;
  border-radius: var(--raggio-grande);
  padding: 36px 20px 250px;
  background:
    linear-gradient(180deg, var(--fondo-3) 52%, rgba(238, 239, 239, 0) 66%),
    url("/assets/img/fondi/diamante-decorativo-home-900.webp") 92% 100% / 150% auto no-repeat,
    var(--fondo-3);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 24px 60px -36px rgba(18, 28, 34, .35);
  display: grid; gap: 28px;
}
/* da telefono 15 px su tutta la larghezza del pannello: 3 righe a 390, senza parole sole */
.scelte__testo p { margin-top: 16px; font-size: .9375rem; color: var(--testo-forte); max-width: 30em; text-wrap: pretty; }
.scelte__divisore { display: none; }
.scelte__lista { display: grid; gap: 18px; }
.scelte__lista li { display: flex; align-items: center; gap: 16px; font-weight: 500; color: var(--nero); font-size: 1rem; }
.ico--grande { font-size: 30px; color: var(--testo-forte); }

@media (min-width: 760px) {
  .scelte__pannello {
    grid-template-columns: minmax(0, 38%) 1px max-content minmax(0, 1fr);
    align-items: center; gap: 40px;
    padding: 48px 48px;
    background:
      linear-gradient(90deg, var(--fondo-3) 50%, rgba(238, 239, 239, 0) 66%),
      url("/assets/img/fondi/diamante-decorativo-home.webp") right center / auto 125% no-repeat,
      var(--fondo-3);
  }
  .scelte__divisore { display: block; width: 1px; align-self: stretch; background: rgba(26, 144, 166, .35); }
  .scelte__testo p { font-size: 1rem; }
}
@media (min-width: 960px) {
  .scelte__pannello { padding: 56px 64px; min-height: 300px; }
  .scelte__testo p { font-size: 1.0625rem; }
  .scelte__lista { gap: 22px; }
  .scelte__lista li { font-size: 1.0625rem; gap: 20px; }
  .ico--grande { font-size: 34px; }
}

/* ---------- recensioni ---------- */
.recensioni { padding: 56px 0 16px; }
.recensioni__griglia { margin-top: 32px; display: grid; gap: 32px; }
.recensione { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; }
.recensione__virgolette {
  grid-row: span 2; width: 30px; height: 26px; margin-top: 4px;
  background: var(--azzurro);
  -webkit-mask: url("/assets/img/icone/virgolette.svg") center / contain no-repeat;
  mask: url("/assets/img/icone/virgolette.svg") center / contain no-repeat;
}
.recensione blockquote p {
  font-style: italic; font-weight: 500; color: var(--nero);
  font-size: 1.1875rem; line-height: 1.4; text-wrap: pretty;
}
.recensione figcaption { margin-top: 10px; color: var(--testo-tenue); font-size: .9375rem; }
.recensioni__link { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 28px; }
.recensioni__sep { width: 1px; height: 24px; background: var(--linea); }
@media (max-width: 599px) { .recensioni__sep { display: none; } }
/* da telefono: una riga che scorre col dito, come foto e video; la riga arriva al bordo dello schermo,
   la scheda è all'85% circa e la successiva si intravede; il corpo scende a 17 px (max 3 righe a 390) */
@media (max-width: 759px) {
  .recensioni__griglia {
    display: flex; gap: 12px;
    margin: 32px calc(-1 * var(--margine-dx)) -20px calc(-1 * var(--margine));
    padding: 4px var(--margine-dx) 24px var(--margine);
    scroll-padding-inline: var(--margine) var(--margine-dx);
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .recensioni__griglia::-webkit-scrollbar { display: none; }
  .recensione {
    flex: 0 0 min(84vw, 460px); scroll-snap-align: start;
    grid-template-columns: 1fr; grid-template-rows: auto 1fr auto;
    padding: 20px 18px 18px;
    border-radius: var(--raggio); background: var(--bianco);
    border: 1px solid var(--linea-chiara);
    box-shadow: 0 12px 26px -20px rgba(18, 28, 34, .3);
  }
  .recensione__virgolette { grid-row: auto; width: 26px; height: 22px; margin: 0 0 12px; }
  .recensione blockquote p { font-size: clamp(1rem, 4.36vw, 1.0625rem); text-wrap: pretty; }
  /* nella riga che scorre le schede entrano solo in dissolvenza: uno spostamento in basso le taglierebbe */
  .js .recensioni__griglia .reveal { transform: none; }
}
.recensioni__nota { margin-top: 10px; text-align: center; font-size: .8125rem; color: var(--testo-tenue); }
.piede__legali a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 760px) {
  .recensioni__griglia { grid-template-columns: 1fr 1fr; gap: 56px; padding-left: 5%; }
}
@media (min-width: 960px) {
  .recensioni { padding: 72px 0 16px; }
  .recensioni__griglia { margin-top: 40px; gap: 80px; padding-left: 7%; }
  .recensione { grid-template-columns: 44px 1fr; column-gap: 16px; }
  .recensione__virgolette { width: 38px; height: 32px; }
  .recensione blockquote p { font-size: 1.5rem; }
  .recensione figcaption { font-size: 1.0625rem; margin-top: 12px; }
  .recensioni__link { margin-top: 34px; gap: 4px 48px; }
}

/* ---------- contatti ---------- */
.contatti { padding: 44px 0 64px; }
.contatti__griglia { display: grid; gap: 36px; }
.contatti__lista { margin-top: 28px; display: grid; gap: 14px; }
.contatti__lista li { display: flex; align-items: center; gap: 18px; font-size: 1.0625rem; color: var(--nero); }
.contatti__lista .ico { font-size: 22px; color: var(--azzurro); }
.contatti__lista a { padding: 4px 0; overflow-wrap: anywhere; }
.contatti .collegamento { margin-top: 18px; }
.contatti__diagonale { display: none; }

.modulo {
  position: relative;
  padding: 26px 22px 24px;
  border-radius: var(--raggio-grande);
  background: linear-gradient(160deg, var(--bianco) 0%, var(--fondo-2) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: var(--ombra-morbida), inset 0 1px 0 #fff;
  display: grid; gap: 6px;
}
.campo { position: relative; padding-top: 14px; }
.campo input:not([type="checkbox"]), .campo textarea {
  width: 100%; display: block;
  padding: 10px 0 9px;
  border: 0; border-bottom: 1px solid var(--linea); border-radius: 0;
  background: transparent;
  font: inherit; font-size: 1rem; color: var(--nero);
  transition: border-color .2s ease;
  -webkit-appearance: none; appearance: none;
}
.campo textarea { resize: vertical; min-height: 44px; line-height: 1.45; }
.campo input:focus, .campo textarea:focus { outline: none; border-bottom-color: var(--azzurro); }
.campo label {
  position: absolute; left: 0; top: 24px;
  font-size: 1rem; color: var(--testo-forte); font-weight: 500;
  transform-origin: 0 0;
  transition: transform .25s var(--ease-out), color .2s ease;
  pointer-events: none;
}
.campo input:focus + label, .campo input:not(:placeholder-shown) + label,
.campo textarea:focus + label, .campo textarea:not(:placeholder-shown) + label {
  transform: translateY(-20px) scale(.78); color: var(--azzurro);
}
.campo--spunta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 16px; }
.campo--spunta input {
  -webkit-appearance: none; appearance: none; flex: none;
  width: 22px; height: 22px; margin: 0;
  border: 1.5px solid var(--testo-forte); border-radius: 5px; background: var(--bianco);
  display: grid; place-items: center; cursor: pointer;
}
.campo--spunta input::after {
  content: ""; width: 11px; height: 6px; margin-top: -3px;
  border-left: 2px solid var(--bianco); border-bottom: 2px solid var(--bianco);
  transform: rotate(-45deg) scale(.6); opacity: 0; transition: transform .2s var(--ease-out), opacity .15s ease;
}
.campo--spunta input:checked { background: var(--azzurro); border-color: var(--azzurro); }
.campo--spunta input:checked::after { transform: rotate(-45deg) scale(1); opacity: 1; }
.campo--spunta label { position: static; transform: none !important; color: var(--testo-forte); font-size: .9375rem; pointer-events: auto; }
.campo--spunta label a { color: var(--azzurro); text-decoration: underline; text-underline-offset: 3px; }
.campo__errore { min-height: 0; font-size: .8125rem; color: #b42318; }
.campo__errore:not(:empty) { margin-top: 4px; }
.campo--spunta .campo__errore { flex-basis: 100%; }
.modulo .btn { margin-top: 18px; min-height: 54px; font-size: 1.0625rem; }
@media (max-width: 599px) {
  /* da telefono il pulsante del modulo sta su una riga, come quello della hero */
  .modulo { padding-left: 18px; padding-right: 18px; }
  .modulo .btn { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 379px) { .modulo .btn { font-size: 1rem; } }
.modulo__privacy { margin-top: 10px; font-size: .8125rem; line-height: 1.45; color: var(--testo-tenue); }
.modulo__privacy a { color: var(--azzurro); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

@media (min-width: 960px) {
  .contatti { padding: 56px 0 84px; }
  .contatti__griglia { grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.05fr); gap: 0; align-items: center; }
  .contatti__lista { margin-top: 36px; gap: 16px; }
  .contatti__lista li { font-size: 1.25rem; gap: 26px; }
  .contatti__lista .ico { font-size: 26px; }
  .contatti .collegamento { margin-top: 28px; font-size: 1.125rem; }
  .contatti__diagonale {
    display: block; justify-self: center; width: 1px; height: 330px;
    background: rgba(26, 144, 166, .55); transform: rotate(18deg);
  }
  .modulo { padding: 40px 52px 34px; border-radius: 26px; gap: 10px; }
  .campo label { font-size: 1.0625rem; }
  .campo input:not([type="checkbox"]), .campo textarea { font-size: 1.0625rem; }
  .modulo .btn { min-height: 58px; font-size: 1.1875rem; }
}

/* ---------- piè di pagina ---------- */
.piede { border-top: 1px solid var(--linea-chiara); background: var(--fondo); padding: 26px 0 calc(22px + 76px); }
.piede__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.piede__marchio { display: flex; align-items: center; gap: 18px; }
.piede__logo img { height: 30px; width: auto; }
.piede__sep { width: 1px; height: 30px; background: var(--azzurro); opacity: .7; }
.piede__marchio p { color: var(--testo-forte); font-size: .9375rem; }
.piede__testi { display: grid; gap: 4px; min-width: 0; }
.piede__marchio .piede__contatti { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: .875rem; color: var(--testo-tenue); }
.piede__contatti a { overflow-wrap: anywhere; }
.piede__punto { color: var(--azzurro); }
@media (max-width: 759px) {
  .piede__marchio { flex-wrap: wrap; }
  .piede__sep { display: none; }
  .piede__testi { flex: 1 1 100%; }
}
.piede__link { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.piede__link a { color: var(--azzurro); font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; }
.piede__legale {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea-chiara);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  font-size: .8125rem; color: var(--testo-tenue);
}
.credit a { color: var(--testo-forte); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .piede__link a:hover, .credit a:hover { color: var(--nero); }
}
@media (min-width: 960px) {
  .piede { padding: 30px 0 26px; }
  .piede__logo img { height: 38px; }
  .piede__sep { height: 38px; margin: 0 8px; }
  .piede__marchio p { font-size: 1.0625rem; }
  .piede__marchio .piede__contatti { font-size: .9375rem; }
  .piede__link { gap: 4px 48px; }
  .piede__link a { font-size: 1.0625rem; }
}

/* ---------- barra dei contatti, solo telefono ---------- */
.barra-azioni {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 10px max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--linea-chiara);
  box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .3);
  transition: transform .3s var(--ease-out);
}
.barra-azioni a {
  display: grid; place-items: center; min-height: 48px; border-radius: 999px;
  font-weight: 600; font-size: 1rem;
  transition: transform .16s var(--ease-out);
}
.barra-azioni a:active { transform: scale(.97); }
.barra-azioni__wa { background: var(--azzurro); color: var(--bianco); }
.barra-azioni__chiama { background: var(--nero); color: var(--bianco); }
.menu-aperto .barra-azioni { transform: translateY(110%); }
@media (min-width: 960px) { .barra-azioni { display: none; } }

/* ---------- la scala del design, da computer grande (il design è grande e arioso) ---------- */
@media (min-width: 1200px) {
  /* la testata del design: alta circa 140 px a 1440, «Styledil» grande, voci e pulsante grandi */
  :root { --testata: clamp(118px, 9.72vw, 140px); --testata-compatta: 84px; }
  .testata__logo { top: -6px; }
  .testata__logo img { height: clamp(66px, 5.7vw, 82px); }
  .menu__voci { gap: clamp(12px, 1.4vw, 20px); }
  .menu__voci a, .menu__apri-gruppo { font-size: clamp(1.125rem, 1.53vw, 1.375rem); padding: 10px 12px; }
  .menu__voci .menu__sotto a { font-size: 1.125rem; padding: 10px 14px; }
  .testata__cta {
    min-height: clamp(54px, 4.3vw, 62px);
    padding: 0 9px 0 clamp(26px, 2.36vw, 34px); gap: clamp(22px, 2.5vw, 36px);
    font-size: clamp(1.125rem, 1.53vw, 1.375rem);
  }
  .testata__cta .btn__cerchio { width: clamp(38px, 3.06vw, 44px); height: clamp(38px, 3.06vw, 44px); font-size: 18px; }

  .occhiello { font-size: 1rem; letter-spacing: .13em; }
  .hero__titolo { font-size: min(3.55rem, 4.42vw); margin-top: 36px; }
  .hero__sotto { font-size: 1.3125rem; line-height: 1.5; }
  .hero__azioni .btn { min-height: 64px; padding: 0 46px; font-size: 1.25rem; }
  .hero__azioni .collegamento { font-size: 1.1875rem; }

  .collegamento { font-size: 1.1875rem; }
  .servizio__figura { width: min(100%, 300px); }
  .servizio__titolo { font-size: 1.875rem; }
  .servizio p { font-size: 1.25rem; }
  .servizi__anche { font-size: 1.25rem; }

  .galleria__barra { min-height: 96px; }
  .galleria__categorie button { font-size: 1.375rem; }
  .video-lavori__testo strong { font-size: 1.5rem; }
  .video-lavori__testo span { font-size: 1.1875rem; }

  .passaggio__nome { font-size: 1.375rem; }
  .metodo__nota { font-size: 1.25rem; }

  .scelte__testo p { font-size: 1.1875rem; }
  .scelte__lista li { font-size: 1.1875rem; }
  .ico--grande { font-size: 38px; }

  .recensione blockquote p { font-size: 1.625rem; }
  .recensione figcaption { font-size: 1.125rem; }

  .contatti__lista li { font-size: 1.375rem; }
  .contatti__lista .ico { font-size: 28px; }
  .campo label, .campo input:not([type="checkbox"]), .campo textarea { font-size: 1.1875rem; }
  .modulo .btn { min-height: 62px; font-size: 1.25rem; }
  .modulo__privacy { font-size: .875rem; }

  .piede__logo img { height: 44px; }
  .piede__sep { height: 44px; }
  .piede__marchio p, .piede__link a { font-size: 1.125rem; }
  .piede__marchio .piede__contatti { font-size: 1rem; }
}

/* ==========================================================================
   PAGINE INTERNE (step 6-bis): ricomposte coi pezzi della home, nessun elemento nuovo.
   La hero col cubo di vetro, i titoli, le schede coi disegni 3D del kit, i riquadri bianchi delle foto (come il
   prima e dopo), i rombi del metodo, il pannello delle scelte, la citazione delle recensioni.
   ========================================================================== */

/* la hero: quella della home, senza il marchio grande e i vetri, col titolo al corpo dei titoli medi */
[data-pagina] { padding-bottom: 48px; }
[data-pagina] .hero__scena { padding-bottom: 0; }
[data-pagina] .cubo { max-width: 560px; margin-inline: auto; }
[data-pagina] .cubo__foto img { object-position: 50% 50%; }
[data-pagina] .hero__titolo { margin-top: 0; font-size: clamp(2rem, 1.3rem + 2.3vw, 3.1rem); line-height: 1.1; }
[data-pagina] .hero__sotto + .hero__sotto { margin-top: 12px; }
[data-pagina] .scelte__lista { margin-top: 26px; }
@media (min-width: 960px) {
  [data-pagina] { padding: 48px 0 80px; }
  [data-pagina] .hero__griglia { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); align-items: center; gap: 56px; }
  [data-pagina] .hero__testo { padding-top: 0; margin-right: 0; }
  [data-pagina] .hero__titolo { width: auto; max-width: none; font-size: clamp(2rem, 1.3rem + 2.3vw, 3.1rem); }
  [data-pagina] .hero__sotto { max-width: 34em; }
  [data-pagina] .cubo { width: 100%; margin: 0; max-width: none; }
}
@media (min-width: 1200px) {
  [data-pagina] .hero__titolo { font-size: 3.1rem; }
}

/* le sezioni: bianche e chiare a turno, come nella home */
[data-sezione] { position: relative; padding: 56px 0; }
[data-sezione~="bianca"] { background: var(--bianco); }
[data-testo] > p, [data-testo] > .collegamento, [data-testo] > .passaggi, [data-testo] > [data-barre] { margin-top: 18px; }
[data-testo] > p { font-size: 1.0625rem; color: var(--testo); max-width: 36em; }
[data-testo] > .collegamento { margin-top: 14px; }
[data-griglia] { display: grid; gap: 32px; }
[data-dopo] { margin-top: 40px; }
[data-sezione] .servizi__griglia { margin-top: 40px; }
@media (min-width: 760px) {
  [data-griglia] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; }
  [data-griglia~="rovescia"] > :first-child { order: 2; }
}
@media (min-width: 960px) {
  [data-sezione] { padding: 80px 0; }
  [data-testo] > p { font-size: 1.125rem; }
  [data-griglia] { gap: 72px; }
}
@media (min-width: 1200px) {
  [data-testo] > p { font-size: 1.25rem; }
}

/* le schede coi disegni 3D: le stesse dei servizi della home, senza testo sotto se la voce è una riga */
[data-voce] .servizio__titolo { align-self: center; }
@media (min-width: 760px) {
  [data-colonne="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  [data-voce] .servizio__titolo { font-size: 1.25rem; }
}
@media (min-width: 960px) {
  [data-voce] .servizio__titolo { font-size: 1.375rem; }
}
@media (min-width: 1200px) {
  [data-voce] .servizio__titolo { font-size: 1.5rem; }
  [data-sezione] .servizio__figura { width: min(100%, 260px); }
}

/* l'elenco con la barra azzurra dei titoli delle schede, quando le voci sono tante */
[data-barre] { display: grid; gap: 14px; }
[data-barre] li { position: relative; padding-left: 20px; font-weight: 500; color: var(--nero); font-size: 1.0625rem; line-height: 1.4; }
[data-barre] li::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 2px; border-radius: 2px; background: var(--azzurro); }
@media (min-width: 960px) { [data-barre] li { font-size: 1.125rem; } }
@media (min-width: 1200px) { [data-barre] li { font-size: 1.1875rem; } }

/* le foto del cliente: il riquadro bianco del prima e dopo della home, in griglia da 2 o 3 */
[data-foto] { padding: 6px; border-radius: var(--raggio); background: var(--bianco); box-shadow: var(--ombra-vetro); }
[data-foto] img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 13px; background: var(--fondo-3); }
[data-foto~="alta"] img { aspect-ratio: 3 / 4; }
[data-foto~="quadra"] img { aspect-ratio: 1; }
[data-foto] figcaption { padding: 10px 8px 4px; font-size: .9375rem; color: var(--testo-tenue); }
[data-foto-griglia] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (min-width: 760px) {
  [data-foto-griglia] { gap: 18px; }
  [data-foto-griglia~="tre"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  /* tre foto da telefono: una riga che scorre col dito, mai una sola in una riga */
  [data-foto-griglia~="tre"] {
    display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--margine-dx)) -20px calc(-1 * var(--margine));
    padding: 4px var(--margine-dx) 24px var(--margine); scroll-padding-inline: var(--margine) var(--margine-dx);
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  [data-foto-griglia~="tre"]::-webkit-scrollbar { display: none; }
  [data-foto-griglia~="tre"] > [data-foto] { flex: 0 0 72vw; scroll-snap-align: start; }
  .js [data-foto-griglia~="tre"] .reveal { transform: none; }
}
@media (hover: hover) and (pointer: fine) {
  [data-foto] { overflow: hidden; }
  [data-foto] img { transition: transform .28s var(--ease-out); }
  [data-foto]:hover img { transform: scale(1.03); }
}

/* i rombi del metodo, anche con tre passaggi o con gli anni */
@media (min-width: 760px) {
  [data-tre] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  [data-tre]::before { left: 16.6%; right: 16.6%; }
  [data-tre] .passaggio__nome { max-width: 17em; }
}
[data-frase] { font-weight: 400; color: var(--testo-forte); line-height: 1.45; }
.passaggio__numero--anno { font-size: 1rem; letter-spacing: -.01em; }
@media (min-width: 760px) { .passaggio__numero--anno { font-size: 1.35rem; } }
@media (min-width: 960px) { .passaggio__numero--anno { font-size: 1.55rem; } }

/* i passaggi di «Come lavoriamo»: un rombo per passaggio, sulla linea azzurra in verticale (da telefono, una scheda per
   passaggio: rombo e disegno in alto, il testo sotto, a tutta larghezza) */
[data-tappe] { position: relative; display: grid; gap: 56px; margin-top: 8px; }
[data-tappa] {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 18px; row-gap: 16px;
  grid-template-areas: "rombo disegno" "corpo corpo" "foto foto"; align-items: center;
}
[data-tappa] > .passaggio__diamante { grid-area: rombo; }
[data-tappa-disegno] { grid-area: disegno; width: 96px; }
[data-tappa-disegno] img { width: 100%; aspect-ratio: 1; object-fit: contain; -webkit-mask: radial-gradient(closest-side, #000 82%, transparent 100%); mask: radial-gradient(closest-side, #000 82%, transparent 100%); }
[data-tappa-corpo] { grid-area: corpo; }
[data-tappa-foto] { grid-area: foto; }
@media (min-width: 760px) {
  [data-tappe] { gap: 72px; }
  [data-tappe]::before { content: ""; position: absolute; left: 44px; top: 44px; bottom: 44px; width: 1px; background: rgba(26, 144, 166, .38); }
  [data-tappa] {
    grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 8px; align-items: start;
    grid-template-areas: "rombo disegno foto" "rombo corpo foto";
  }
  [data-tappa-disegno] { width: 120px; margin-left: -10px; }
}
@media (min-width: 960px) {
  [data-tappe]::before { left: 52px; top: 52px; bottom: 52px; }
  [data-tappa] { grid-template-columns: 104px minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 48px; }
  [data-tappa-disegno] { width: 150px; }
}

/* il pannello delle scelte, anche solo col testo (e i pulsanti) */
[data-pannello] { padding-bottom: 210px; }
[data-pannello] .scelte__testo p { max-width: 34em; }
[data-pannello] .hero__azioni { margin-top: 26px; }
[data-pannello] .ico--grande { display: block; margin-bottom: 18px; color: var(--azzurro); }
@media (min-width: 760px) {
  [data-pannello] { grid-template-columns: minmax(0, 58%) minmax(0, 1fr); padding: 48px; }
}
@media (min-width: 960px) {
  [data-pannello] { padding: 64px; min-height: 320px; }
}

/* la citazione: quella delle recensioni della home */
[data-citazione] { margin-top: 28px; max-width: 34em; }

/* le domande frequenti: schede col titolo a barra azzurra, mai una sola in una riga */
[data-domande] { display: grid; gap: 28px; margin-top: 36px; }
[data-domanda] h3 {
  position: relative; padding-left: 18px;
  font-family: var(--font-testo); font-weight: 500; color: var(--nero); font-size: 1.1875rem; line-height: 1.3;
}
[data-domanda] h3::before { content: ""; position: absolute; left: 0; top: .1em; bottom: .1em; width: 2px; border-radius: 2px; background: var(--azzurro); }
[data-domanda] p { margin-top: 8px; padding-left: 18px; color: var(--testo); font-size: 1rem; }
@media (min-width: 760px) {
  [data-domande] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
}
@media (min-width: 960px) {
  [data-domande] { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 44px; }
  [data-domanda] h3 { font-size: 1.3rem; padding-left: 24px; }
  [data-domanda] p { font-size: 1.0625rem; padding-left: 24px; }
}
@media (min-width: 1200px) {
  [data-domanda] h3 { font-size: 1.4rem; }
  [data-domanda] p { font-size: 1.125rem; }
}

/* il disegno 3D da solo, accanto al testo (come quelli dei servizi) */
[data-disegno] { width: min(100%, 420px); margin-inline: auto; }
[data-disegno] img { width: 100%; aspect-ratio: 1; object-fit: contain; -webkit-mask: radial-gradient(closest-side, #000 82%, transparent 100%); mask: radial-gradient(closest-side, #000 82%, transparent 100%); }

/* la voce del menu della pagina aperta */
.menu__voci a[aria-current="page"], .menu__gruppo:has(a[aria-current="page"]) .menu__apri-gruppo { color: var(--azzurro); }

/* niente parole sole in fondo a un blocco */
[data-sezione] p, [data-pagina] .hero__sotto, [data-barre] li, [data-domanda] p,
[data-frase], [data-foto] figcaption { text-wrap: pretty; }
.servizio__titolo, [data-domanda] h3 { text-wrap: balance; }
@media (max-width: 599px) {
  [data-pannello] .titolo--medio { font-size: 1.75rem; }
  /* il pulsante del pannello su una riga, come quello della hero */
  [data-pannello] .btn { padding-left: 14px; padding-right: 14px; }
}

/* il prima e dopo con la sua didascalia */
.confronto figcaption { padding: 10px 8px 4px; font-size: .9375rem; color: var(--testo-tenue); }

/* ---------- 6-bis, giro 2: Lavori, Chi siamo, Contatti (sempre coi pezzi della home e del kit) ---------- */
[data-ico-freccia-cerchio] { --m: url("/assets/img/icone/freccia-cerchio.svg"); }

/* la galleria dei bagni con il prima e dopo del 2019: quattro per riga da computer, la riga che scorre da telefono */
@media (min-width: 760px) { [data-foto-griglia~="quattro"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* le capsule delle categorie, in cima a Lavori: le etichette del prima e dopo della home */
[data-capsule] ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
[data-capsule] a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: rgba(255, 255, 255, .92); border: 1px solid var(--linea);
  color: var(--nero); font-size: .9375rem; font-weight: 500;
  transition: border-color .2s ease, color .2s ease, transform .16s var(--ease-out);
}
[data-capsule] a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { [data-capsule] a:hover { border-color: var(--azzurro); color: var(--azzurro); } }
@media (min-width: 960px) { [data-capsule] ul { gap: 10px; margin-top: 30px; } [data-capsule] a { padding: 0 20px; font-size: 1rem; } }

/* la galleria dei lavori: 2 foto per riga da telefono, 3 da tablet, 4 da computer, l'ultima riga sempre piena e mai
   una foto sola (main: classi m3, t4, t2, d3, d2 calcolate per ogni categoria); al tocco l'ingrandimento */
[data-griglia-lavori] { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 32px; align-items: start; }
[data-griglia-lavori] > * { grid-column: span 3; }
[data-griglia-lavori] > [data-cella~="m3"] { grid-column: span 2; }
[data-lavoro] img { aspect-ratio: 4 / 5; }
[data-apri] { display: block; border-radius: 13px; cursor: zoom-in; transition: transform .16s var(--ease-out); }
[data-apri]:active { transform: scale(.97); }
[data-griglia-lavori] [data-lavoro] figcaption {
  padding: 9px 6px 3px; font-size: clamp(.8125rem, 3.6vw, .875rem); line-height: 1.35; color: var(--testo-forte); text-wrap: balance;
}
[data-griglia-lavori] [data-lavoro][data-cella~="m3"] figcaption { padding-left: 4px; padding-right: 4px; font-size: clamp(.75rem, 3.3vw, .8125rem); }
@media (min-width: 600px) {
  [data-griglia-lavori] { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  [data-griglia-lavori] > *, [data-griglia-lavori] > [data-cella~="m3"] { grid-column: span 4; }
  [data-griglia-lavori] > [data-cella~="t4"] { grid-column: span 3; }
  [data-griglia-lavori] > [data-cella~="t2"] { grid-column: span 6; }
  [data-griglia-lavori] > [data-cella~="t2"] img { aspect-ratio: 4 / 3; }
  [data-griglia-lavori] [data-lavoro] figcaption, [data-griglia-lavori] [data-lavoro][data-cella~="m3"] figcaption { padding: 9px 6px 3px; font-size: .875rem; }
  [data-griglia-lavori] [data-lavoro][data-cella~="t4"] figcaption { font-size: .8125rem; }
}
/* da 600 a 759 px le quattro della riga da quattro stanno due per riga: le didascalie restano in tre righe */
@media (min-width: 600px) and (max-width: 759px) {
  [data-griglia-lavori] > [data-cella~="t4"] { grid-column: span 6; }
  [data-griglia-lavori] [data-lavoro][data-cella~="t4"] figcaption { font-size: .875rem; }
}
@media (min-width: 960px) {
  /* 60 colonne: 4 per riga (15), 3 (20), 2 (30) o 5 (12); niente fessure fra le colonne (59 non ci starebbero):
     i 18 px fra le schede sono i loro margini, e la griglia li restituisce ai lati */
  [data-griglia-lavori] { grid-template-columns: repeat(60, minmax(0, 1fr)); column-gap: 0; row-gap: 18px; margin: 40px -9px 0; }
  [data-griglia-lavori] > * { margin-inline: 9px; }
  [data-griglia-lavori] > *, [data-griglia-lavori] > [data-cella~="m3"], [data-griglia-lavori] > [data-cella~="t4"], [data-griglia-lavori] > [data-cella~="t2"] { grid-column: span 15; }
  [data-griglia-lavori] > [data-cella~="t2"] img { aspect-ratio: 4 / 5; }
  [data-griglia-lavori] > [data-cella~="d5"] { grid-column: span 12; }
  [data-griglia-lavori] > [data-cella~="d3"] { grid-column: span 20; }
  [data-griglia-lavori] > [data-cella~="d2"] { grid-column: span 30; }
  [data-griglia-lavori] > [data-cella~="d2"] img { aspect-ratio: 4 / 3; }
  [data-griglia-lavori] [data-lavoro] figcaption, [data-griglia-lavori] [data-lavoro][data-cella~="t4"] figcaption { font-size: .9375rem; padding: 10px 8px 4px; }
}

/* i prima e dopo del cliente, così come sono. Da telefono e tablet una riga che scorre, tutte alte uguali; da computer
   righe giustificate: --s è la somma dei rapporti, --b bordo e fessure, così tutte le foto di una riga sono alte uguali.
   In «Alcune ristrutturazioni» (--colonne) le foto di ogni lavoro stanno una sopra l'altra e le tre schede sono alte uguali */
[data-pd-lavori] {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--margine-dx)) -20px calc(-1 * var(--margine));
  padding: 4px var(--margine-dx) 24px var(--margine); scroll-padding-inline: var(--margine) var(--margine-dx);
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
[data-pd-lavori]::-webkit-scrollbar { display: none; }
[data-pd-fila] { display: contents; }
[data-pd-lavoro] {
  flex: none; display: flex; flex-direction: column; scroll-snap-align: start;
  padding: 6px; border-radius: var(--raggio); background: var(--bianco); box-shadow: var(--ombra-vetro);
}
[data-pd-foto] { display: flex; gap: 6px; }
[data-pd-img] { display: block; flex: none; border-radius: 12px; overflow: hidden; cursor: zoom-in; transition: transform .16s var(--ease-out); }
[data-pd-img]:active { transform: scale(.97); }
[data-pd-img] img { display: block; width: auto; height: 220px; aspect-ratio: var(--a); object-fit: cover; background: var(--fondo-3); }
[data-pd-lavoro] figcaption { width: 0; min-width: 100%; padding: 10px 6px 4px; font-size: .9375rem; line-height: 1.35; color: var(--testo-forte); text-wrap: balance; }
/* da telefono la foto del seminterrato (una migliorata, non un montaggio) un po' più larga: la didascalia ci sta */
@media (max-width: 959px) { [data-pd-img~="foto"] img { aspect-ratio: 1.2; } }
[data-anno] { display: block; margin-bottom: 2px; font-family: var(--font-titoli); font-weight: 400; font-size: 1.25rem; letter-spacing: -.01em; color: var(--azzurro); }
[data-frecce] { display: none; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (min-width: 600px) and (max-width: 959px) { [data-frecce] { display: flex; } }
@media (min-width: 600px) { [data-pd-img] img { height: 260px; } }
@media (min-width: 960px) {
  [data-pd-lavori] { display: grid; gap: 22px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  [data-pd-fila] { display: flex; gap: 18px; align-items: stretch; }
  [data-pd-lavoro] { flex: var(--s) 1 var(--b); min-width: 0; }
  [data-pd-img] { flex: var(--a) 1 0px; min-width: 0; }
  [data-pd-img] img { width: 100%; height: auto; }
  [data-pd-lavoro] figcaption { padding: 12px 8px 6px; font-size: 1rem; }
  [data-pd~="colonne"] [data-pd-lavori] { display: flex; gap: 24px; align-items: stretch; }
  [data-pd~="colonne"] [data-pd-lavoro] { flex: var(--g) 1 var(--b); }
  [data-pd~="colonne"] [data-pd-foto] { display: grid; gap: 6px; }
  [data-anno] { font-size: 1.45rem; }
}
@media (hover: hover) and (pointer: fine) {
  [data-pd-img] img { transition: transform .28s var(--ease-out); }
  [data-pd-img]:hover img { transform: scale(1.03); }
}

/* i video dei lavori a tutta pagina: da telefono la riga che scorre fino al bordo, da computer tutti e quattro */
[data-video-pagina] .video-riga {
  margin: 0 calc(-1 * var(--margine-dx)) -34px calc(-1 * var(--margine));
  padding: 4px var(--margine-dx) 44px var(--margine); scroll-padding-inline: var(--margine) var(--margine-dx);
}
[data-video-pagina] .video-box { width: 62vw; max-width: 300px; }
[data-video-pagina] [data-frecce] { margin-top: 0; }
@media (min-width: 600px) { [data-video-pagina] .video-box { width: 36%; } }
@media (min-width: 960px) {
  [data-video-pagina] .video-riga { margin: 0 0 -34px; padding: 4px 2px 44px; overflow: visible; gap: 18px; }
  [data-video-pagina] .video-box { flex: 1 1 0; width: auto; max-width: none; }
}

/* l'ingrandimento delle foto: il nero del sito, le frecce della galleria della home, la × del menu.
   Entra in 280 ms ed esce in 180 ms; mai più grande della foto vera */
html.ingrandimento-aperto { overflow: hidden; }
[data-ingrandimento] {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: rgba(10, 10, 10, .94); color: var(--bianco);
  opacity: 0; transition: opacity .18s var(--ease-out), overlay .18s allow-discrete, display .18s allow-discrete;
}
[data-ingrandimento][open] { opacity: 1; transition: opacity .28s var(--ease-out), overlay .28s allow-discrete, display .28s allow-discrete; }
@starting-style { [data-ingrandimento][open] { opacity: 0; } }
[data-ingrandimento]::backdrop { background: transparent; }
[data-ingr-quadro] {
  position: absolute; inset: calc(64px + env(safe-area-inset-top, 0px)) 16px calc(92px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
[data-ingr-img] {
  display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100% - 56px); min-height: 0;
  border-radius: 12px; background: #1c1c1c; object-fit: contain;
  transition: opacity .2s var(--ease-out), transform .28s var(--ease-out);
}
[data-ingr-img][data-carica] { opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  @starting-style { [data-ingrandimento][open] [data-ingr-img] { transform: scale(.96); } }
}
[data-ingr-didascalia] { max-width: 40em; text-align: center; font-size: .9375rem; line-height: 1.4; color: rgba(255, 255, 255, .88); text-wrap: balance; }
[data-ingr-conto-box] { position: absolute; top: calc(22px + env(safe-area-inset-top, 0px)); left: 20px; font-size: .9375rem; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
[data-ingr-chiudi] {
  position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: 10px;
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8);
  transition: transform .16s var(--ease-out), background-color .2s ease, color .2s ease;
}
[data-ingr-chiudi]::before, [data-ingr-chiudi]::after {
  content: ""; position: absolute; left: 13px; right: 13px; top: 50%; height: 1.5px; margin-top: -.75px;
  border-radius: 2px; background: currentColor;
}
[data-ingr-chiudi]::before { transform: rotate(45deg); }
[data-ingr-chiudi]::after { transform: rotate(-45deg); }
[data-ingr-chiudi]:active { transform: scale(.97); background-color: rgba(255, 255, 255, .18); }
[data-ingr-freccia] { position: absolute; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
[data-ingr-freccia~="prec"] { left: calc(50% - 54px); }
[data-ingr-freccia~="succ"] { left: calc(50% + 10px); }
[data-ingrandimento][data-una] [data-ingr-freccia], [data-ingrandimento][data-una] [data-ingr-conto-box] { display: none; }
@media (hover: hover) and (pointer: fine) { [data-ingr-chiudi]:hover { background: var(--bianco); color: var(--nero); } }
@media (min-width: 960px) {
  [data-ingr-quadro] { inset: 72px 124px 40px; }
  [data-ingr-freccia] { top: 50%; bottom: auto; margin-top: -23px; }
  [data-ingr-freccia~="prec"] { left: 40px; }
  [data-ingr-freccia~="succ"] { left: auto; right: 40px; }
  [data-ingr-conto-box] { top: 30px; left: 40px; }
  [data-ingr-chiudi] { top: 18px; right: 28px; }
  [data-ingr-didascalia] { font-size: 1.0625rem; }
}

/* Chi siamo: la recensione in una scheda bianca; il collegamento dentro il pannello del diamante */
[data-scheda] {
  grid-template-columns: 1fr; padding: 24px 22px 22px;
  border-radius: var(--raggio-grande); background: var(--bianco);
  border: 1px solid var(--linea-chiara); box-shadow: var(--ombra-morbida);
}
[data-scheda] .recensione__virgolette { grid-row: auto; margin: 0 0 14px; }
[data-scheda] blockquote p { font-size: 1.25rem; }
[data-testo] > [data-scheda] + p { margin-top: 26px; font-size: clamp(.9375rem, 4.3vw, 1.0625rem); }
@media (min-width: 960px) { [data-testo] > [data-scheda] + p { font-size: 1.125rem; } }
@media (min-width: 1200px) { [data-testo] > [data-scheda] + p { font-size: 1.25rem; } }
[data-sezione] .recensioni__nota { margin-top: 40px; }
.scelte__testo [data-link] { margin-top: 18px; }
@media (min-width: 760px) { [data-griglia~="recensioni"] { align-items: start; } }
@media (min-width: 960px) {
  [data-scheda] { padding: 40px 44px 36px; }
  [data-scheda] blockquote p { font-size: 1.6rem; line-height: 1.35; }
}

/* Contatti: il titolo a sinistra e il contenuto a destra; i passi coi rombi del metodo, piccoli; il modulo intero */
[data-griglia~="titolo"] { gap: 20px; }
[data-lista-pagina] { margin-top: 0; }
@media (min-width: 960px) {
  [data-griglia~="titolo"] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: 72px; }
  [data-griglia~="titolo"] > [data-testo] > p:first-child { margin-top: 0; }
}
@media (max-width: 599px) {
  [data-lista-pagina] li { gap: 14px; font-size: clamp(.9375rem, 4.4vw, 1.0625rem); }
}
[data-brevi] { display: grid; gap: 14px; margin-top: 24px; }
[data-brevi] li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 14px; }
[data-brevi] .passaggio__diamante { grid-area: auto; width: 52px; height: 52px; }
[data-brevi] .passaggio__numero { font-size: 1rem; }
[data-brevi-testo] { font-size: 1.0625rem; line-height: 1.4; color: var(--testo-forte); text-wrap: balance; }
[data-testo] > [data-brevi] + .collegamento { margin-top: 22px; }
@media (min-width: 760px) and (max-width: 959px) { [data-griglia~="modulo"] { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 960px) {
  [data-griglia~="modulo"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: start; }
  [data-brevi] { gap: 18px; margin-top: 32px; }
  [data-brevi] li { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; }
  [data-brevi] .passaggio__diamante { width: 64px; height: 64px; }
  [data-brevi] .passaggio__numero { font-size: 1.15rem; }
  [data-brevi-testo] { font-size: 1.0625rem; }
}
@media (min-width: 1200px) { [data-brevi-testo] { font-size: 1.1875rem; } }
[data-modulo-titolo] { margin-bottom: 2px; font-family: var(--font-titoli); font-weight: 300; color: var(--nero); font-size: clamp(1.35rem, 5.6vw, 1.6rem); line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
[data-campi] { display: grid; gap: 6px; }
@media (min-width: 600px) {
  [data-modulo-pagina] [data-campi] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  [data-modulo-pagina] [data-largo] { grid-column: 1 / -1; }
}
@media (min-width: 600px) { [data-modulo-titolo] { font-size: 1.6rem; } }
@media (min-width: 960px) { [data-modulo-titolo] { font-size: 1.625rem; } [data-modulo-pagina] [data-campi] { gap: 10px 28px; } }
@media (min-width: 1200px) { [data-modulo-titolo] { font-size: 2rem; } }
.campo select {
  width: 100%; display: block; min-height: 44px; padding: 10px 28px 9px 0;
  border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; background: transparent;
  font: inherit; font-size: 1rem; line-height: 1.45; color: var(--nero); cursor: pointer;
  transition: border-color .2s ease;
  -webkit-appearance: none; appearance: none;
}
.campo select:focus { outline: none; border-bottom-color: var(--azzurro); }
.campo select:focus + label, .campo select:valid + label { transform: translateY(-20px) scale(.78); color: var(--azzurro); }
[data-scelta]::after {
  content: ""; position: absolute; right: 4px; top: 30px; width: 9px; height: 13px; pointer-events: none;
  background: var(--testo-forte); transform: rotate(90deg);
  -webkit-mask: url("/assets/img/icone/chevron-destra.svg") center / contain no-repeat;
  mask: url("/assets/img/icone/chevron-destra.svg") center / contain no-repeat;
}
[data-esito-noscript] { margin-top: 12px; font-size: .9375rem; color: var(--testo-forte); }
@media (min-width: 960px) { .campo select { font-size: 1.0625rem; } }
@media (min-width: 1200px) { .campo select { font-size: 1.1875rem; } [data-scelta]::after { top: 33px; } }

/* le schede dei lavori di Contatti: i disegni 3D dei servizi, la scheda intera porta alla pagina */
[data-voce~="link"] { color: inherit; transition: transform .16s var(--ease-out); }
[data-sezione] [data-voce~="link"] .servizio__titolo { font-size: 1.0625rem; line-height: 1.3; text-wrap: balance; }
@media (max-width: 959px) {
  /* da telefono e da tablet la scheda resta orizzontale (il disegno a sinistra), due per riga da tablet */
  [data-voce~="link"] { grid-template-columns: 112px 1fr; align-items: center; text-align: left; }
  [data-voce~="link"] .servizio__figura { grid-row: auto; width: auto; margin: 0; border-radius: 50%; }
  [data-sezione] [data-voce~="link"] .servizio__titolo { margin-left: 0; align-self: center; }
}
@media (min-width: 760px) and (max-width: 959px) {
  [data-griglia-contatti] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
}
@media (min-width: 960px) {
  [data-griglia-contatti] { gap: 32px; }
  [data-sezione] [data-voce~="link"] .servizio__titolo { margin-left: 4%; font-size: 1rem; }
}
@media (min-width: 1200px) {
  [data-griglia-contatti] { gap: 48px; }
  [data-sezione] [data-voce~="link"] .servizio__titolo { font-size: 1.1875rem; }
}
[data-voce~="link"]:active { transform: scale(.97); }
[data-voce~="link"] .servizio__titolo .ico--chevron { margin-left: 10px; font-size: .7em; color: var(--azzurro); transition: transform .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { [data-voce~="link"]:hover .servizio__titolo .ico--chevron { transform: translateX(4px); } }

/* ---------- 04/11/2026, foto luminose: le etichette dei prima e dopo le scrive il sito (la pillola del cursore) ---------- */
[data-pd-img], [data-foto] { position: relative; }
[data-etichetta] {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 3px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--linea);
  color: var(--nero); font-size: .8125rem; font-weight: 500; line-height: 1.4;
  pointer-events: none;
}
[data-foto] > [data-etichetta] { top: 16px; left: 16px; }
@media (max-width: 599px) { [data-etichetta] { top: 7px; left: 7px; padding: 2px 9px; font-size: .75rem; } }

/* ---------- la sezione «Prima e dopo» della home (fuori procedura, chiesta da Domenico il 04/11/2026): il cursore
   del prima e dopo, grande, su un palco alto uguale per tutte le coppie. La coppia sta intera, alla sua misura, sopra la
   sua foto sfocata (come le foto intere della galleria), così cambiare lavoro non sposta la pagina; accanto, la scelta */
.pd-home { padding: 56px 0 64px; background: var(--bianco); }
.pd-home__sotto { margin-top: 16px; max-width: 36em; font-size: 1.0625rem; color: var(--testo); text-wrap: pretty; }
.pd-home__corpo { margin-top: 28px; display: grid; gap: 18px; }
.pd-home__palco {
  --h: 440px;
  position: relative; isolation: isolate; overflow: hidden;
  height: var(--h); padding: 16px;
  display: grid; place-items: center;
  border-radius: var(--raggio-grande); background: var(--fondo-3);
  box-shadow: var(--ombra-morbida);
}
.pd-home__palco::before {
  content: ""; position: absolute; inset: -40px; z-index: -1;
  background: var(--sfondo) center / cover no-repeat;
  filter: blur(28px) saturate(1.05); opacity: .85;
  transition: opacity .32s var(--ease-out);
}
.confronto--grande {
  width: min(100%, calc((var(--h) - 32px - 12px) * var(--r) + 12px));
  transition: opacity .32s var(--ease-out), transform .32s var(--ease-out);
}
.confronto--grande .confronto__quadro { aspect-ratio: var(--r); }
.pd-home__palco.cambia .confronto--grande { opacity: 0; transform: scale(.985); transition-duration: .16s; }
.pd-home__palco.cambia::before { opacity: .35; transition-duration: .16s; }
.pd-home__scelte {
  display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--margine-dx)) -14px calc(-1 * var(--margine));
  padding: 4px var(--margine-dx) 18px var(--margine); scroll-padding-inline: var(--margine) var(--margine-dx);
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.pd-home__scelte::-webkit-scrollbar { display: none; }
.pd-home__scelte > li { flex: 0 0 auto; scroll-snap-align: start; }
.pd-home__scelta {
  display: grid; gap: 8px; width: 150px; padding: 6px 6px 10px;
  border-radius: 16px; text-align: left;
  transition: background-color .2s ease, box-shadow .2s ease, transform .16s var(--ease-out);
}
.pd-home__scelta:active { transform: scale(.97); }
.pd-home__scelta[aria-pressed="true"] { background: var(--bianco); box-shadow: var(--ombra-vetro); }
.pd-home__mini { display: block; aspect-ratio: 1; border-radius: 11px; overflow: hidden; background: var(--fondo-3); }
.pd-home__mini img { width: 100%; height: 100%; object-fit: cover; }
.pd-home__nome {
  position: relative; padding-left: 12px;
  font-size: .875rem; font-weight: 500; line-height: 1.3; color: var(--nero); text-wrap: balance;
}
.pd-home__nome::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 2px; border-radius: 2px;
  background: var(--linea); transition: background-color .2s ease;
}
.pd-home__scelta[aria-pressed="true"] .pd-home__nome::before { background: var(--azzurro); }
@media (hover: hover) and (pointer: fine) { .pd-home__scelta[aria-pressed="false"]:hover { background: var(--fondo-2); } }
@media (min-width: 600px) {
  .pd-home__palco { --h: 480px; }
  .pd-home__scelta { width: 164px; }
}
@media (min-width: 960px) {
  .pd-home { padding: 72px 0 80px; }
  .pd-home__sotto { font-size: 1.125rem; }
  .pd-home__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 28px; align-items: center; margin-top: 36px; }
  .pd-home__palco { --h: 560px; padding: 22px; }
  .confronto--grande { width: min(100%, calc((var(--h) - 44px - 12px) * var(--r) + 12px)); }
  .pd-home__scelte { display: grid; gap: 6px; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .pd-home__scelta { width: 100%; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 16px; padding: 8px 14px 8px 8px; }
  .pd-home__nome { font-size: 1rem; }
}
@media (min-width: 1200px) {
  .pd-home__sotto { font-size: 1.25rem; }
  .pd-home__palco { --h: 600px; }
  .pd-home__scelta { grid-template-columns: 62px minmax(0, 1fr); }
  .pd-home__nome { font-size: 1.0625rem; }
}
/* le voci della scelta arrivano una dopo l'altra; nella riga che scorre solo in dissolvenza */
.js .pd-home__scelte.reveal { opacity: 1; transform: none; }
.js .pd-home__scelte.reveal > li { opacity: 0; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js .pd-home__scelte.in > li { opacity: 1; transform: none; }
.js .pd-home__scelte.in > li:nth-child(2) { transition-delay: 50ms; }
.js .pd-home__scelte.in > li:nth-child(3) { transition-delay: 100ms; }
.js .pd-home__scelte.in > li:nth-child(4) { transition-delay: 150ms; }
.js .pd-home__scelte.in > li:nth-child(5) { transition-delay: 200ms; }
.js .pd-home__scelte.in > li:nth-child(6) { transition-delay: 250ms; }
.js .pd-home__scelte.in > li:nth-child(7) { transition-delay: 300ms; }
@media (min-width: 960px) { .js .pd-home__scelte.reveal:not(.in) > li { transform: translateX(16px); } }
@media (prefers-reduced-motion: reduce) {
  .js .pd-home__scelte.reveal > li { transform: none !important; transition: opacity .5s var(--ease-out); }
  .pd-home__palco.cambia .confronto--grande { transform: none; }
  .confronto--grande, .pd-home__scelta { transition: opacity .2s var(--ease-out); }
}

/* il testo delle schede dei servizi della home in equilibrio: mai una parola sola in fondo */
.servizio p { text-wrap: balance; }

/* i titoli delle hero più lunghi (Come lavoriamo) in tre righe anche sui telefoni piccoli e fra 960 e 1199 px */
@media (max-width: 389px) { [data-pagina] .hero__titolo { font-size: 1.8rem; } }
@media (min-width: 960px) and (max-width: 1199px) { [data-pagina] .hero__titolo { font-size: clamp(2rem, 0.9rem + 2.3vw, 2.6rem); } }

/* il pulsante e «Chiama il …» affiancati: se non ci stanno (il pannello da tablet), il link va sotto, intero */
.hero__azioni { flex-wrap: wrap; }
.hero__azioni > .collegamento { white-space: nowrap; }
/* i titoli delle schede coi disegni 3D in equilibrio (il «pretty» dei paragrafi delle sezioni non li tocca) */
[data-sezione] .servizio__titolo { text-wrap: balance; }
/* da tablet i titoli medi accanto a una foto o nel pannello: tre righe al massimo */
@media (min-width: 760px) and (max-width: 959px) {
  [data-griglia] .titolo--medio, [data-pannello] .titolo--medio { font-size: 1.9rem; }
}

/* le entrate dei passi, come la lista dei contatti; meno movimento: solo dissolvenze */
.js [data-brevi].reveal { opacity: 1; transform: none; }
.js [data-brevi].reveal > li { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.js [data-brevi].in > li { opacity: 1; transform: none; }
.js [data-brevi].in > li:nth-child(2) { transition-delay: 70ms; }
.js [data-brevi].in > li:nth-child(3) { transition-delay: 140ms; }
.js [data-brevi].in > li:nth-child(4) { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  .js [data-brevi].reveal > li { transform: none; transition: opacity .5s var(--ease-out); }
  [data-capsule] a, [data-apri], [data-pd-img], [data-voce~="link"], [data-ingr-chiudi], [data-ingr-img] { transition: none; }
}

/* ---------- pagina 404 ---------- */
.errore-404 { position: relative; isolation: isolate; min-height: 64vh; display: grid; align-items: center; padding: 72px 0 96px; }
.errore-404__luce {
  position: absolute; inset: calc(var(--testata) * -1) 0 0; z-index: -1;
  background: linear-gradient(180deg, rgba(250, 250, 250, 0) 60%, var(--fondo) 100%), url("/assets/img/fondi/sfondo-luce-home-900.webp") 30% 100% / cover no-repeat;
}
.errore-404 .titolo { margin-top: 18px; }
.errore-404__testo { margin-top: 18px; font-size: 1.125rem; }
.errore-404__azioni { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ---------- pagine legali (testo dei modelli, così com'è) ---------- */
.legale { padding: 56px 0 88px; }
.legale__corpo { max-width: 780px; }
.legale__corpo h1 { font-family: var(--font-titoli); font-weight: 300; color: var(--nero); font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.1; letter-spacing: -.02em; }
.legale__corpo h2 { margin-top: 2.2em; font-family: var(--font-titoli); font-weight: 400; color: var(--nero); font-size: 1.45rem; line-height: 1.25; letter-spacing: -.01em; }
.legale__corpo h3 { margin-top: 1.6em; font-weight: 600; color: var(--nero); font-size: 1.125rem; }
.legale__corpo p, .legale__corpo ul, .legale__corpo ol, .legale__corpo table { margin-top: 1em; }
.legale__corpo ul { list-style: disc; padding-left: 1.3em; }
.legale__corpo ol { list-style: decimal; padding-left: 1.3em; }
.legale__corpo li + li { margin-top: .4em; }
.legale__corpo a { color: var(--azzurro); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legale__corpo table { width: 100%; border-collapse: collapse; font-size: .9375rem; display: block; overflow-x: auto; }
.legale__corpo th, .legale__corpo td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--linea-chiara); }
.legale__corpo th { color: var(--nero); font-weight: 600; }
@media (min-width: 960px) { .legale { padding: 80px 0 110px; } }

/* ==========================================================================
   IL MOVIMENTO (step 5-bis): lo stesso design, ma vivo.
   Solo transform e opacity (clip-path per le linee che si disegnano), le due curve di :root,
   uscite più veloci delle entrate, hover solo col mouse, :active al tocco.
   ========================================================================== */

/* ---------- la hero: entra al caricamento in CSS, senza aspettare il JavaScript ---------- */
@keyframes entra { from { opacity: 0; translate: 0 28px; } }
@keyframes dissolvi { from { opacity: 0; } }
@keyframes assesta { from { scale: 1.13; } }
@keyframes luce-passa {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(220%); }
}
@keyframes luce-respira { to { transform: scale(1.06) translateX(-1.2%); } }

/* titolo, marchio, testi e pulsante, uno dopo l'altro (70 ms) */
.hero__testo > * { animation: entra .9s var(--ease-out) backwards; }
.hero__testo > :nth-child(2) { animation-delay: 70ms; }
.hero__testo > :nth-child(3) { animation-delay: 140ms; }
.hero__testo > :nth-child(4) { animation-delay: 210ms; }
.hero__testo > :nth-child(5) { animation-delay: 280ms; }
/* i due riquadri di vetro arrivano dopo; la foto grande non parte mai trasparente: si assesta e basta */
.vetro { animation: entra .9s var(--ease-out) .42s backwards; }
.vetro--anni { animation-delay: .5s; }
.cubo__foto img { scale: 1.07; will-change: transform; animation: assesta 1.8s var(--ease-out) backwards; }
/* «nella sua luce migliore»: una lama di luce attraversa piano il vetro del cubo (6 s), poi riposa (4 s) */
.cubo__riflesso { overflow: hidden; }
.cubo__riflesso::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-100%);
  animation: luce-passa 10s var(--ease-in-out) 1.2s infinite backwards;
}
/* la luce della stanza respira piano, dal basso (il bordo con i servizi non si muove) */
.hero__luce { transform-origin: 50% 100%; will-change: transform; animation: luce-respira 18s var(--ease-in-out) 1s infinite alternate; }

/* ---------- le sezioni che arrivano scorrendo: .reveal → .in, una volta sola ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }
/* gli elementi che entrano insieme arrivano uno dopo l'altro (70 ms) */
@media (min-width: 760px) {
  .js .servizio.reveal:nth-child(2), .js .recensione.reveal:nth-child(2) { transition-delay: 70ms; }
  .js .servizio.reveal:nth-child(3) { transition-delay: 140ms; }
}
.js .passaggi.reveal, .js .contatti__lista.reveal { opacity: 1; transform: none; }
.js .passaggi.reveal > li, .js .contatti__lista.reveal > li,
.js .scelte__pannello.reveal .scelte__lista > li, .js .video-lavori.reveal .video-box {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.js .video-lavori.reveal .video-box { transform: translateY(16px); }
.js .passaggi.in > li, .js .contatti__lista.in > li,
.js .scelte__pannello.in .scelte__lista > li, .js .video-lavori.in .video-box { opacity: 1; transform: none; }
.js .passaggi.in > li:nth-child(2), .js .contatti__lista.in > li:nth-child(2), .js .video-lavori.in .video-box:nth-child(2) { transition-delay: 70ms; }
.js .passaggi.in > li:nth-child(3), .js .contatti__lista.in > li:nth-child(3), .js .video-lavori.in .video-box:nth-child(3) { transition-delay: 140ms; }
.js .passaggi.in > li:nth-child(4), .js .contatti__lista.in > li:nth-child(4), .js .video-lavori.in .video-box:nth-child(4) { transition-delay: 210ms; }
.js .passaggi.in > li:nth-child(5) { transition-delay: 280ms; }
.js .scelte__pannello.in .scelte__lista > li:nth-child(1) { transition-delay: 180ms; }
.js .scelte__pannello.in .scelte__lista > li:nth-child(2) { transition-delay: 250ms; }
.js .scelte__pannello.in .scelte__lista > li:nth-child(3) { transition-delay: 320ms; }
/* il metodo: la linea si disegna dal primo rombo all'ultimo, mentre i rombi arrivano */
.js .passaggi.reveal::before { clip-path: inset(0 100% 0 0); transition: clip-path .9s var(--ease-in-out) .1s; }
.js .passaggi.in::before { clip-path: inset(0); }
@media (max-width: 759px) {
  .js .passaggi.reveal::before { clip-path: inset(0 0 100% 0); }
  .js .passaggi.in::before { clip-path: inset(0); }
}
/* la diagonale dei contatti si disegna dall'alto (sul ::before: l'elemento osservato resta intero) */
.js .contatti__diagonale.reveal { position: relative; opacity: 1; transform: rotate(18deg); background: none; }
.js .contatti__diagonale.reveal::before {
  content: ""; position: absolute; inset: 0; background: rgba(26, 144, 166, .55);
  clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-in-out) .15s;
}
.js .contatti__diagonale.in { transform: rotate(18deg); }
.js .contatti__diagonale.in::before { clip-path: inset(0); }

/* ---------- col mouse le immagini si avvicinano appena ---------- */
.servizio__figura img { transition: transform .28s var(--ease-out); }
.passaggio__diamante { transition: transform .28s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .servizio:hover .servizio__figura img { transform: translateY(-6px) scale(1.03); }
  .passaggio:hover .passaggio__diamante { transform: translateY(-4px); }
}

/* ---------- meno movimento, non zero: restano le dissolvenze, si tolgono gli spostamenti ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero__testo > *, .vetro { animation-name: dissolvi; }
  .cubo__foto img { scale: 1; animation: none; }
  .hero__luce, .cubo__riflesso::before, .confronto__maniglia::after { animation: none; }
  .js .reveal, .js .passaggi.reveal > li, .js .contatti__lista.reveal > li,
  .js .scelte__pannello.reveal .scelte__lista > li, .js .video-lavori.reveal .video-box {
    transform: none; transition: opacity .5s var(--ease-out);
  }
  .js .passaggi.reveal::before, .js .contatti__diagonale.reveal::before { clip-path: none; transition: none; }
  .galleria__voce { transition-duration: .3s; }
  .galleria__voce img { transform: none; transition: none; }
  .menu__voci li, .menu__telefono { transform: none; }
  .btn, .freccia, .vetro--cura, .barra-azioni a { transition: none; }
}

/* ==========================================================================
   IL SALTO DI LIVELLO (step 6-quater, 04/11/2026) · Design/SALTO-DI-LIVELLO.md
   Stessa struttura, stesso copy, stesso kit, stessi colori e caratteri del marchio: cambia la qualità grafica.
   Il movimento resta quello del 5-bis (solo transform e opacity; translate per le schede che si alzano col mouse).
   ========================================================================== */
:root {
  --ombra-scheda: 0 1px 2px rgba(18, 28, 34, .05), 0 22px 46px -26px rgba(18, 28, 34, .3);
  --ombra-scheda-su: 0 2px 4px rgba(18, 28, 34, .05), 0 34px 64px -28px rgba(18, 28, 34, .38);
}

/* ---------- 1 · la hero spaziale: l'alone bianco dietro il cubo, il pavimento di luce, gli spigoli che brillano ---------- */
.hero__scena::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -18%; right: -18%; top: -14%; bottom: 2%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .96), rgba(255, 255, 255, .6) 46%, rgba(255, 255, 255, 0) 100%);
}
.cubo::after {
  left: -4%; right: -8%; bottom: -7%; height: 15%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(20, 30, 35, .3), rgba(20, 30, 35, .08) 55%, rgba(20, 30, 35, 0));
  filter: blur(10px);
}
.cubo::before {   /* il pavimento di luce: la luce azzurra del vetro che si posa a terra */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: -10%; right: -10%; top: 92%; height: 22%;
  background: radial-gradient(50% 50% at 50% 30%, rgba(128, 196, 208, .34), rgba(128, 196, 208, 0) 70%);
}
.cubo__vetro { filter: drop-shadow(0 0 6px rgba(26, 144, 166, .32)); }
.cubo__spigoli polyline { stroke-width: 2; }
.vetro {
  background: linear-gradient(150deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .52));
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 60px -26px rgba(18, 28, 34, .36), 0 2px 6px rgba(18, 28, 34, .06), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.hero__titolo { letter-spacing: -.034em; }
.hero__titolo-seconda { color: var(--testo-tenue); }
.occhiello::before {
  content: ""; display: inline-block; width: 28px; height: 2px; margin-right: 14px; border-radius: 2px;
  background: var(--azzurro); vertical-align: middle; translate: 0 -2px;
}
@media (min-width: 960px) {
  .hero:not([data-pagina]) { min-height: calc(100svh - var(--testata)); display: grid; align-content: center; }
  .hero:not([data-pagina]) .hero__titolo { line-height: 1.02; }
  .vetro--cura, .vetro--anni { border-radius: 22px; }
}
@media (min-width: 1200px) {
  .hero:not([data-pagina]) .hero__titolo { font-size: min(3.6rem, 4.45vw); }   /* step 7: la prima riga arriva al più sul bordo di vetro del cubo, mai sulla foto */
  [data-pagina] .hero__titolo { font-size: 3.35rem; }
}
/* da telefono la foto nel cubo sale nella prima schermata, subito dopo il titolo; testo e pulsanti sotto */
@media (max-width: 959px) {
  .hero__griglia { display: flex; flex-direction: column; gap: 0; }
  .hero__testo { display: contents; }
  .hero__testo > .occhiello { order: 1; }
  .hero__testo > .hero__marchio { order: 2; }
  .hero__testo > .hero__titolo { order: 3; }
  .hero__scena { order: 4; margin-top: 28px; }
  .hero__testo > .hero__sotto { order: 5; }
  .hero__testo > .scelte__lista, .hero__testo > [data-capsule] { order: 6; }
  .hero__testo > .hero__azioni { order: 7; }
  .hero__scena::before { left: -10%; right: -10%; }
  [data-pagina] .hero__scena { margin-bottom: 6px; }
}

/* ---------- 2 · un sistema per i titoli: la barretta azzurra, la scala più compatta, la seconda riga tenue ---------- */
.titolo { font-size: clamp(2.05rem, 1.25rem + 2.7vw, 3.35rem); line-height: 1.05; letter-spacing: -.03em; }
.titolo--medio { font-size: clamp(1.9rem, 1.2rem + 2.15vw, 2.85rem); }
.titolo__seconda { font-size: .64em; margin-top: .24em; letter-spacing: -.012em; color: var(--testo-tenue); }
.titolo::before {
  content: ""; display: block; width: 40px; height: 2px; margin-bottom: 22px; border-radius: 2px; background: var(--azzurro);
}
[data-tappa] .titolo::before { display: none; }
@media (min-width: 960px) { .titolo::before { width: 48px; margin-bottom: 26px; } }

/* ---------- 3 · il ritmo: più aria fra le sezioni, l'alternanza bianco / grigio più leggibile ---------- */
[data-sezione]:not([data-sezione~="bianca"]), .lavori, .recensioni, .contatti { background: var(--fondo-2); }
.scelte { background: linear-gradient(180deg, var(--bianco) 0, var(--bianco) 100%); padding-bottom: 8px; }
@media (max-width: 959px) {
  [data-sezione] { padding: 64px 0; }
  .servizi, .lavori, .metodo, .pd-home { padding-top: 64px; padding-bottom: 68px; }
  .recensioni { padding-top: 64px; }
}
@media (min-width: 960px) {
  [data-sezione] { padding: 104px 0; }
  .servizi, .lavori, .metodo, .pd-home { padding-top: 104px; padding-bottom: 104px; }
  .recensioni { padding-top: 104px; padding-bottom: 32px; }
  .contatti { padding-top: 72px; padding-bottom: 112px; }
  .scelte { padding-bottom: 32px; }
}

/* ---------- 4 · un piede che chiude: il nero del marchio, il logo bianco del kit ---------- */
.piede { background: var(--nero); border-top: 0; padding: 40px 0 calc(26px + 76px); color: rgba(255, 255, 255, .62); }
.piede__marchio p { color: rgba(255, 255, 255, .86); }
.piede__marchio .piede__contatti { color: rgba(255, 255, 255, .6); }
.piede__link a { color: var(--azzurro); }
.piede__legale { border-top-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .56); }
.piede__legali a, .credit a { color: rgba(255, 255, 255, .86); }
@media (hover: hover) and (pointer: fine) {
  .piede__link a:hover, .credit a:hover, .piede__legali a:hover { color: var(--bianco); }
}
@media (min-width: 960px) { .piede { padding: 46px 0 32px; } .piede__legale { margin-top: 20px; padding-top: 18px; } }   /* step 7: il piede alto come nel design (controlla-struttura) */

/* ---------- 5 · le schede e le foto con un solo trattamento: superficie, bordo sottile, ombra profonda ---------- */
.servizi .servizio, [data-sezione] [data-voce], [data-voce~="link"] {
  padding: 16px 18px 16px 14px; border-radius: 22px;
  background: linear-gradient(180deg, var(--bianco) 0%, var(--fondo) 100%);
  border: 1px solid var(--linea-chiara); box-shadow: var(--ombra-scheda);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), translate .28s var(--ease-out), box-shadow .28s var(--ease-out);
}
[data-voce~="link"] { transition: transform .16s var(--ease-out), translate .28s var(--ease-out), box-shadow .28s var(--ease-out); }
.servizio__figura { background: radial-gradient(closest-side, rgba(26, 144, 166, .08), rgba(26, 144, 166, 0)); }
@media (min-width: 760px) {
  .servizi .servizio, [data-sezione] [data-voce], [data-voce~="link"] { padding: 30px 24px 28px; border-radius: 26px; }
}
@media (hover: hover) and (pointer: fine) {
  .servizi .servizio:hover, [data-sezione] [data-voce]:hover, [data-voce~="link"]:hover { translate: 0 -4px; box-shadow: var(--ombra-scheda-su); }
}
[data-foto], .confronto, [data-pd-lavoro] { border-radius: 22px; box-shadow: var(--ombra-scheda); border: 1px solid rgba(18, 28, 34, .05); }
[data-foto] img { border-radius: 16px; }
/* le recensioni della home: due schede bianche, come da telefono */
@media (min-width: 760px) {
  .recensioni__griglia { padding-left: 0; gap: 28px; }
  .recensioni__griglia .recensione {
    padding: 34px 36px 30px; border-radius: 26px; background: var(--bianco);
    border: 1px solid var(--linea-chiara); box-shadow: var(--ombra-scheda);
  }
}
@media (min-width: 960px) { .recensioni__griglia { gap: 36px; } }
/* la citazione (Ristrutturazioni) e la recensione di Chi siamo: schede bianche con le virgolette azzurre */
[data-citazione] {
  grid-template-columns: 1fr; padding: 24px 26px 22px; border-radius: 22px;
  background: var(--bianco); border: 1px solid var(--linea-chiara); box-shadow: var(--ombra-scheda);
}
[data-citazione] .recensione__virgolette { grid-row: auto; margin: 0 0 12px; }
[data-scheda] { box-shadow: var(--ombra-scheda-su); }
/* le domande frequenti: superfici bianche alte uguali */
[data-domanda] {
  padding: 24px 24px 22px; border-radius: 22px; background: var(--bianco);
  border: 1px solid var(--linea-chiara); box-shadow: var(--ombra-scheda);
}
/* il modulo: la scheda più forte della pagina */
.modulo { border: 1px solid var(--linea-chiara); box-shadow: 0 2px 6px rgba(18, 28, 34, .05), 0 44px 84px -38px rgba(18, 28, 34, .42); }
@media (min-width: 1200px) { [data-modulo-titolo] { font-size: 2.2rem; } }

/* ---------- 6 · le immagini in equilibrio col testo ---------- */
@media (min-width: 760px) {
  [data-griglia] > [data-foto~="alta"] img { aspect-ratio: 4 / 5; max-height: 600px; }
}
@media (max-width: 759px) {
  [data-griglia] > [data-foto~="alta"] img { aspect-ratio: 4 / 3; object-position: 50% 40%; }
}
[data-disegno] { position: relative; }
[data-disegno]::before {
  content: ""; position: absolute; inset: 8% 8% 4%; z-index: -1;
  background: radial-gradient(closest-side, rgba(26, 144, 166, .1), rgba(26, 144, 166, 0));
}

/* ---------- 7 · i dettagli delle pagine ---------- */
/* la versione chiara del pannello del diamante, quando non è l'ultimo della pagina (niente doppioni a vista) */
[data-pannello~="chiaro"] {
  background:
    linear-gradient(180deg, var(--bianco) 50%, rgba(255, 255, 255, 0) 66%),
    url("/assets/img/fondi/diamante-decorativo-home-900.webp") 92% 100% / 130% auto no-repeat,
    var(--bianco);
  border: 1px solid var(--linea-chiara); box-shadow: var(--ombra-scheda);
}
@media (min-width: 760px) {
  [data-pannello~="chiaro"] {
    background:
      linear-gradient(90deg, var(--bianco) 54%, rgba(255, 255, 255, 0) 72%),
      url("/assets/img/fondi/diamante-decorativo-home.webp") right center / auto 96% no-repeat,
      var(--bianco);
  }
}
/* le capsule di Lavori: più nette; da telefono una riga che scorre */
[data-capsule] a { border-color: rgba(18, 28, 34, .14); box-shadow: 0 8px 18px -12px rgba(18, 28, 34, .3); }
@media (max-width: 599px) {
  [data-capsule] ul {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-left: calc(-1 * var(--margine)); margin-right: calc(-1 * var(--margine-dx));
    padding: 4px var(--margine-dx) 10px var(--margine);
  }
  [data-capsule] ul::-webkit-scrollbar { display: none; }
  [data-capsule] li { flex: none; }
}
/* le schede di «Alcune ristrutturazioni»: l'anno come insegna */
[data-anno] { font-size: 1.55rem; }
@media (min-width: 960px) { [data-anno] { font-size: 1.9rem; } }
/* i passaggi di Come lavoriamo: più aria, il numero del rombo più grande */
@media (min-width: 760px) { [data-tappe] { gap: 92px; } [data-tappa] .passaggio__numero { font-size: 1.75rem; } }
@media (min-width: 960px) { [data-tappa] .passaggio__numero { font-size: 2.05rem; } }
/* Contatti: le icone azzurre su un cerchio chiaro, le righe più grandi */
[data-cerchio] {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 50%; background: rgba(26, 144, 166, .09);
}
[data-cerchio] .ico { font-size: 21px; color: var(--azzurro); }
@media (min-width: 960px) {
  [data-cerchio] { width: 56px; height: 56px; }
  [data-cerchio] .ico { font-size: 24px; }
  [data-lista-pagina] li { font-size: 1.3125rem; gap: 20px; }
}
/* il prima e dopo della home: più luce sul palco, cornice più netta */
.pd-home__palco { background: var(--bianco); }
.pd-home__palco::before { opacity: .62; }
.confronto--grande { box-shadow: 0 30px 60px -28px rgba(18, 28, 34, .45), 0 2px 6px rgba(18, 28, 34, .08); }

@media (prefers-reduced-motion: reduce) {
  .servizi .servizio, [data-sezione] [data-voce], [data-voce~="link"] { transition: opacity .5s var(--ease-out); }
}
/* salto, da telefono: nelle schede dei servizi il disegno più piccolo, così il testo ha la larghezza di prima;
   l'occhiello senza la barretta, su una riga */
@media (max-width: 759px) {
  .servizi .servizio, [data-sezione] [data-voce], [data-voce~="link"] {
    grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; padding: 16px 12px 16px 10px;
  }
}
@media (max-width: 599px) { .occhiello::before { display: none; } }
/* salto: le schede non devono allungare i testi (mai più di tre righe da telefono) */
@media (min-width: 760px) {
  .servizi .servizio .servizio__titolo, .servizi .servizio p, .servizi .servizio .servizio__link { margin-left: 0; }
}
@media (min-width: 760px) and (max-width: 959px) {
  .servizi__griglia { grid-template-columns: 1fr; gap: 18px; }
  .servizi .servizio { grid-template-columns: 150px minmax(0, 1fr); align-items: center; column-gap: 24px; padding: 20px 26px 20px 18px; }
  .servizi .servizio .servizio__figura { grid-row: span 3; width: auto; margin: 0; }
  .recensioni__griglia .recensione { padding: 26px 24px 24px; }
  .recensioni__griglia .recensione blockquote p { font-size: 1.0625rem; }
}
@media (min-width: 960px) { [data-domande] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; } }
@media (max-width: 759px) {
  [data-domanda] { padding: 18px 16px 16px 14px; }
  [data-domanda] p { font-size: .9375rem; }
}
@media (max-width: 599px) {
  [data-lista-pagina] li { gap: 12px; font-size: clamp(.9375rem, 4.1vw, 1.0625rem); }
  [data-cerchio] { width: 40px; height: 40px; }
  [data-cerchio] .ico { font-size: 19px; }
}
@media (min-width: 760px) and (max-width: 959px) { .scelte__pannello:not([data-pannello]) .scelte__testo p { font-size: .9375rem; } }

/* =====================================================================================================================
   STEP 7 · COLLAUDO (04/11/2026): le pagine interne coi PEZZI DELLA HOME. Ogni elemento porta la classe del componente
   della home più vicino (confronto, servizio, servizi__griglia, servizio__figura, passaggi, passaggio, passaggio__nome,
   scelte__lista, vetro__anno, video-lavori__frecce, video-lavori__play, confronto__etichetta) e la variante in un
   attributo data-…; qui sotto si tolgono le parti del pezzo della home che la variante non ha, così l'aspetto resta.
   ===================================================================================================================== */
/* elenco a barre = la lista delle scelte della home, con la barretta azzurra al posto del rombo */
.scelte__lista[data-barre] li { display: list-item; gap: normal; align-items: normal; }
/* il disegno 3D di una sezione = la figura delle schede dei servizi, senza cerchio né fondo */
.servizio__figura[data-disegno] { grid-row: auto; aspect-ratio: auto; border-radius: 0; background: none; width: min(100%, 420px); margin: 0 auto; }
.servizio__figura[data-disegno] img, .servizio__figura[data-tappa-disegno] img { height: auto; }
/* i passi di «Come lavoriamo» = i passaggi coi rombi della home, in colonna, con la linea a sinistra */
.passaggi[data-tappe] { grid-template-columns: none; }
.passaggi[data-tappe]::before { content: none; }
.passaggio[data-tappa] { justify-items: normal; text-align: start; }
.servizio__figura[data-tappa-disegno] { position: static; aspect-ratio: auto; border-radius: 0; background: none; margin: 0; width: 96px; }
@media (min-width: 760px) {
  .passaggi[data-tappe]::before { content: ""; right: auto; height: auto; }
  .servizio__figura[data-tappa-disegno] { width: 120px; margin-left: -10px; }
}
@media (min-width: 960px) { .servizio__figura[data-tappa-disegno] { width: 150px; } }
/* i passi brevi dei contatti = i passaggi della home, in elenco */
.passaggi[data-brevi] { position: static; margin-top: 24px; grid-template-columns: none; }
.passaggi[data-brevi]::before { content: none; }
.passaggio__nome[data-brevi-testo] { grid-area: auto; font-weight: 400; margin-top: 0; }
@media (min-width: 960px) { .passaggi[data-brevi] { margin-top: 32px; } }
/* le domande frequenti = le schede dei servizi della home, in due colonne */
.servizi__griglia[data-domande] { margin-top: 36px; gap: 28px; }
.servizio[data-domanda] { display: block; text-align: start; grid-template-columns: none; column-gap: normal; align-items: normal; align-content: normal; }
.servizio[data-domanda] p { align-self: auto; margin-left: 0; max-width: none; text-wrap: pretty; }
@media (min-width: 760px) { .servizi__griglia[data-domande] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; } }
@media (min-width: 960px) { .servizi__griglia[data-domande] { margin-top: 44px; gap: 28px 32px; } }
/* il cerchio delle icone dei contatti = il cerchio del «play» dei video della home */
.video-lavori__play[data-cerchio] { color: inherit; font-size: inherit; }
/* l'ingrandimento delle foto: lo scorrimento in orizzontale del dito resta al sito (come la galleria della home) */
[data-ingr-quadro], [data-ingr-img] { touch-action: pan-y; }
/* il passo senza foto («01 Il sopralluogo»): da computer il disegno prende il posto della foto, a destra, nel cerchio
   azzurro delle schede dei servizi; così la riga ha testo e disegno insieme, mai un elemento solo */
@media (min-width: 760px) {
  .passaggio[data-tappa]:not(:has([data-tappa-foto])) { grid-template-areas: "rombo corpo disegno" "rombo corpo disegno"; }
  .passaggio[data-tappa]:not(:has([data-tappa-foto])) > .servizio__figura {
    align-self: center; justify-self: center; width: min(100%, 240px); margin: 0;
    aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(26, 144, 166, .1), rgba(26, 144, 166, 0));
  }
}
/* «Le scelte giuste» della home: il diamante un po' più a destra e, dove la colonna libera è stretta, più piccolo e in
   alto, accanto alla voce più corta; «dilazionabile» non lo tocca più a nessuna larghezza */
@media (min-width: 760px) and (max-width: 959px) {
  .scelte .scelte__pannello {
    background:
      linear-gradient(270deg, rgba(238, 239, 239, 0) 150px, var(--fondo-3) 345px),
      linear-gradient(180deg, rgba(238, 239, 239, 0) 44%, var(--fondo-3) 60%),
      url("/assets/img/fondi/diamante-decorativo-home.webp") right -36px top 0 / auto 60% no-repeat,
      var(--fondo-3);
  }
}
@media (min-width: 960px) and (max-width: 1099px) {
  .scelte .scelte__pannello {
    background:
      linear-gradient(270deg, rgba(238, 239, 239, 0) 180px, var(--fondo-3) 420px),
      linear-gradient(180deg, rgba(238, 239, 239, 0) 52%, var(--fondo-3) 70%),
      url("/assets/img/fondi/diamante-decorativo-home.webp") right -36px top -4px / auto 72% no-repeat,
      var(--fondo-3);
  }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .scelte .scelte__pannello { background-position: 0 0, right -36px center; background-size: auto, auto 96%; }
}
@media (min-width: 1280px) {
  .scelte .scelte__pannello { background-position: 0 0, right -36px center; background-size: auto, auto 116%; }
}
/* il titolo dei servizi della home, da telefono: la riga grigia più vicina e più stretta */
@media (max-width: 599px) {
  .servizi .titolo__seconda { margin-top: .1em; line-height: 1.14; }
}

/* =====================================================================================================================
   FOTO IN ALTA DEFINIZIONE (04/11/2026 sera, Domenico: «più luce, più belle, strutturate»): ogni foto nel suo formato,
   mai una verticale tagliata a fascia larga, mai la sua copia sfocata intorno
   ===================================================================================================================== */
/* la galleria della home: le foto verticali intere, a due (3:4) o a tre (1:2) nello stesso palco, con un filo bianco */
.galleria__voce[data-coppia] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--bianco); }
.galleria__voce[data-coppia="tre"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.galleria__voce[data-coppia] img { min-width: 0; }
/* i prima e dopo della home: la coppia intera sul fondo chiaro del palco, senza la sua copia sfocata dietro */
.pd-home__palco::before { display: none; }
/* da telefono le foto verticali delle sezioni restano verticali (4:5), non a fascia */
@media (max-width: 759px) {
  [data-griglia] > [data-foto~="alta"] img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
}
/* la foto della squadra di «Come lavoriamo» è piccola all'origine: sta in un posto piccolo, mai ingrandita */
[data-foto~="piccola"] { width: min(100%, 360px); justify-self: center; }
/* il palco dei prima e dopo: una luce morbida al centro al posto della copia sfocata; da computer più alto, la coppia
   in alta definizione si vede più grande */
.pd-home__palco { background: radial-gradient(ellipse 58% 78% at 50% 50%, var(--bianco) 0%, var(--fondo-3) 100%); }
@media (min-width: 960px) { .pd-home__palco { --h: 560px; } }
/* la galleria della home da computer: la foto che viene dopo accanto al palco, non sopra, così le foto a due e a tre
   restano intere */
@media (min-width: 960px) { .galleria__prossima { width: 24%; } }

/* =====================================================================================================================
   IL DIAMANTE DA LOGO (05/11/2026): il disegno del logo è più alto di prima solo sopra la I (viewBox 16 -16 1503 421
   invece di 16 16 1503 389). Le lettere restano alte uguali e al loro posto: il riquadro cresce verso l'alto, di
   32/389 dell'altezza di prima, e un margine negativo della stessa misura lascia tutto il resto dov'era.
   ===================================================================================================================== */
.testata__logo img { height: calc(44px * 1.08226); margin-top: calc(44px * -.08226); }
.piede__logo img { height: calc(30px * 1.08226); margin-top: calc(30px * -.08226); }
.hero__marchio img { margin-top: calc(min(76vw, 300px) * -.02129); }
@media (min-width: 960px) {
  .testata__logo img { height: calc(50px * 1.08226); margin-top: calc(50px * -.08226); }
  .piede__logo img { height: calc(38px * 1.08226); margin-top: calc(38px * -.08226); }
  .hero__marchio img { margin-top: calc(min(36vw, 440px) * -.02129); }
}
@media (min-width: 1200px) {
  .testata__logo img { height: calc(clamp(66px, 5.7vw, 82px) * 1.08226); margin-top: calc(clamp(66px, 5.7vw, 82px) * -.08226); }
  .piede__logo img { height: calc(44px * 1.08226); margin-top: calc(44px * -.08226); }
}

/* ⟦pannello 7-bis, giro 2⟧ 1·p12: una parola lunghissima in un titolo (un indirizzo email o di un sito, scritto dal pannello)
   va a capo dentro la colonna, mai la pagina che scorre di lato; le parole normali vanno a capo come prima */
h1, h2, h3, .titolo { overflow-wrap: anywhere; }