/* EmaLinoleum — sito dal kit di design approvato (V3). Colori misurati dal design
   (confronta-design.py --colori) e dai token del kit; font Inter del kit, servito dal sito.
   Step 5 (forma del design) · 5-bis (sito vivo) · 6 (copy) · SALTO DI LIVELLO, fase A (09/10/2026):
   testata a due colonne, scala dei titoli fissa, testo più leggibile, ritmo delle sezioni,
   simboli del kit in tessere, componenti nuovi (vedi «componenti» più sotto). */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-variabile-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fondo: #FBFAF8;          /* fondo del design */
  --bianco: #FFFFFF;
  --inchiostro: #14181F;     /* titoli e testo forte */
  --grigio: #4A4C52;         /* testo corrente (PIANO § 3.3: più scuro, 8,2:1 sul fondo) */
  --bronzo: #8C6D35;         /* accento (token del kit) */
  --bronzo-testo: #765A2B;   /* bronzo per testi piccoli (token del kit) */
  --putty: #EFEBE5;          /* fasce delle strutture */
  --putty-2: #ECE7DF;        /* fascia contatti */
  --nota: #FAF9F5;           /* etichetta «Un nostro lavoro» (extra.md) */
  --linea: #D7CEC3;          /* divisori e bordi delle tessere */
  --grafite: #161C24;        /* pulsante pieno */
  --grafite-caldo: #1E1913;  /* pulsante della fascia contatti */

  --font: "Inter", Arial, Helvetica, sans-serif;
  --contenitore: 1232px;
  --margine: clamp(22px, 5vw, 72px);
  --sez: clamp(72px, 8.9vw, 128px);          /* spazio tra le sezioni: 128 / 72 */
  --durata: 200ms;
  --esce: cubic-bezier(.22, .61, .36, 1);
  --testata-h: 124px;                         /* intestazione in cima */
  --testata-solida: 79px;                     /* intestazione scorrendo (con il bordo) */

  /* scala dei titoli (PIANO § 3.2) e del testo (§ 3.3) */
  --h1-home: clamp(40px, 5.3vw, 76px);
  --h1: clamp(34px, 4.2vw, 60px);
  --h2: clamp(30px, 3.35vw, 48px);
  --h3: clamp(19px, 1.55vw, 22px);
  --corpo: 18px;
  --attacco: 19px;
}

/* ── base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  padding-top: var(--testata-h);
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: var(--font);
  font-size: var(--corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--bronzo-testo); outline-offset: 4px; border-radius: 2px; }
address { font-style: normal; }
strong { font-weight: 650; }
h1, h2, h3 { overflow-wrap: break-word; }

.simboli { position: absolute; width: 0; height: 0; overflow: hidden; }
.nascosto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icona { width: 16px; height: 16px; flex: none; stroke-width: 1.5; }

.salta {
  position: absolute; left: 16px; top: -80px; z-index: 100;
  padding: 12px 18px; background: var(--grafite); color: var(--bianco); font-size: 14px;
}
.salta:focus { top: 16px; }

.wrap { width: min(var(--contenitore), 100% - 2 * var(--margine)); margin-inline: auto; }
.sez { margin-top: var(--sez); }

/* ── tipografia: una scala sola ───────────────────────────────────────── */
/* occhiello: bronzo 13 px con il filetto del kit (accento-bronzo) prima del testo */
.occhiello {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; line-height: 1.5; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--bronzo-testo);
}
.occhiello::before {
  content: ""; flex: none; width: 32px; height: 2px;
  background: url("/assets/img/elementi/accento-bronzo.svg") left center / 32px 8px no-repeat;
}

.occhiello .icona { width: 18px; height: 18px; color: var(--bronzo); stroke-width: 1.6; }

.bronzo { color: var(--bronzo); }

/* H2: 48 / 30 px, sempre uguale */
.titolo {
  font-size: var(--h2);
  line-height: 1.1; font-weight: 700; letter-spacing: -.015em;
  font-variation-settings: "opsz" 20;
  color: var(--inchiostro);
}
.occhiello + .titolo { margin-top: 16px; }

/* H3: 22 / 19 px */
.titoletto { font-size: var(--h3); line-height: 1.3; font-weight: 650; letter-spacing: -.01em; color: var(--inchiostro); }
/* riga d'attacco sotto l'H2: 19 / 17 px */
.attacco { margin-top: 18px; font-size: var(--attacco); line-height: 1.5; color: var(--grigio); max-width: 48ch; }
/* corpo: 18 / 17 px, interlinea 1,6, grigio #4A4C52, righe di 60-65 caratteri */
.testo { margin-top: 16px; font-size: var(--corpo); line-height: 1.6; color: var(--grigio); max-width: 62ch; }
/* didascalie: 15 px in inchiostro */
 figcaption { font-size: 15px; line-height: 1.45; color: var(--inchiostro); }

/* apertura di una sezione: occhiello → H2 → riga d'attacco (+ un link a destra, se serve) */
.sez__testa { margin-bottom: clamp(32px, 4vw, 56px); }
.sez__testa[data-forma="riga"] { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; }

/* ── ritmo: tre forme di sezione ───────────────────────────────────────
   1 chiara (.sez) · 2 fascia putty a tutta larghezza per le strutture (.sez--putty)
   3 griglie a tessere aperte con filetti sottili (.servizi, .colonne, .garanzie) */
.sez--putty {
  margin-top: var(--sez); padding-block: var(--sez);
  background: var(--putty);
  --fondo-tessera: var(--fondo);
}
.sez--putty + .sez--putty { margin-top: 0; }

/* ── pulsanti e link ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 28px;
  background: var(--grafite); color: var(--bianco);
  border: 1px solid var(--grafite);
  font-size: 15px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  transition: background var(--durata), color var(--durata), border-color var(--durata), transform .15s var(--esce);
}
.btn .icona { width: 18px; height: 18px; transition: transform var(--durata); }
.btn:hover { background: #2B323D; border-color: #2B323D; }
.btn:hover .icona { transform: translate(2px, -2px); }

.btn--contorno {
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: transparent; color: var(--bronzo-testo); border-color: var(--bronzo);
  font-size: 14px;
}
.btn--contorno:hover { background: var(--putty); border-color: var(--bronzo); }
.btn--contorno:hover .icona { transform: none; }
.btn:active { transform: scale(.97); }
/* contorno inchiostro, angoli vivi (secondo pulsante della testata, fasce) */
.btn--contorno[data-forma="squadra"] { min-height: 52px; color: var(--inchiostro); border-color: var(--inchiostro); border-radius: 0; padding: 0 24px; font-size: 15px; }
.btn--contorno[data-forma="squadra"] .icona { color: var(--bronzo-testo); }
.btn--contorno[data-forma="squadra"]:hover { background: rgba(255, 255, 255, .55); }
.btn--contorno[data-forma="squadra"]:hover .icona { transform: translateX(3px); }

.link-bronzo {
  display: inline-block; min-height: 44px; padding-block: 10px; line-height: 1.5;
  color: var(--bronzo-testo); font-size: 16px; font-weight: 550;
  text-decoration: underline; text-decoration-color: rgba(140, 109, 53, .45);
  text-underline-offset: 6px; text-decoration-thickness: 1px;
  transition: text-decoration-color var(--durata);
}
.link-bronzo .icona { transition: transform var(--durata); }
.link-bronzo:hover { text-decoration-color: var(--bronzo); }
.link-bronzo:hover .icona { transform: translateX(3px); }

.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.azioni[data-forma="domanda"] { margin-top: 36px; gap: 14px 24px; }
.azioni[data-forma="domanda"] .testo { margin: 0; color: var(--inchiostro); }
.metodo__azioni[data-forma="colonna"] { flex-direction: column; align-items: flex-start; align-self: center; }
.sez[data-margine="stretto"] { margin-top: clamp(40px, 5vw, 64px); }

/* ── simboli: le icone del kit a 32 px in tessere da 44 px ────────────── */
.tessera {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--linea); background: var(--fondo-tessera, var(--fondo));
  color: var(--bronzo);
}
.tessera .icona { width: 22px; height: 22px; stroke-width: 1.4; }
.tessera[data-forma="aperta"] { border-color: transparent; background: none; justify-content: flex-start; }
.tessera[data-forma="aperta"] .icona { width: 32px; height: 32px; stroke-width: 1.25; }
.tessera[data-misura="grande"] { width: 56px; height: 56px; }
.tessera[data-misura="grande"] .icona { width: 28px; height: 28px; stroke-width: 1.3; }
.tessera[data-tono="pieno"] { background: var(--grafite); border-color: var(--grafite); color: var(--bianco); }

/* etichetta «Ambientazione» sulle immagini AI vicine a testi sul lavoro */
.etichetta {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px 5px 8px; background: rgba(251, 250, 248, .92);
  font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: .02em;
  color: var(--inchiostro); pointer-events: none;
}
.etichetta .icona { width: 13px; height: 13px; color: var(--bronzo); }

/* ── intestazione (fissa: cambia scorrendo, l'altezza di riserva non cambia) ── */
.testata {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(251, 250, 248, 0); border-bottom: 1px solid transparent;
  transition: background .35s var(--esce), border-color .35s var(--esce), transform .45s var(--esce);
}
.testata.solida { background: var(--fondo); border-bottom-color: var(--linea); }
.testata.via { transform: translateY(-101%); }
.testata__in {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 32px;
  min-height: var(--testata-h); padding-block: 18px;
  transition: min-height .35s var(--esce), padding .35s var(--esce);
}
.testata.solida .testata__in { min-height: 78px; padding-block: 10px; }
.marchio { display: inline-block; justify-self: start; }
.marchio__logo { width: 196px; height: auto; transition: width .35s var(--esce); }
.testata.solida .marchio__logo { width: 148px; }
.menu { display: contents; }
.menu__voci { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 2.6vw, 40px); }
.menu__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; font-weight: 500; color: var(--inchiostro); white-space: nowrap;
  background: linear-gradient(var(--bronzo), var(--bronzo)) 0 calc(100% - 8px) / 0 1px no-repeat;
  transition: background-size var(--durata), color var(--durata);
}
.menu__link:hover, .menu__link[aria-current="page"] { background-size: 100% 1px; }
.menu__riga { display: none; }
.menu__contatti { display: flex; align-items: center; gap: 22px; justify-self: end; }
.menu__tel {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px;
  font-size: 14px; font-weight: 600; color: var(--inchiostro); white-space: nowrap;
  transition: color var(--durata);
}
.menu__tel .icona { width: 18px; height: 18px; color: var(--bronzo); }
.menu__tel:hover { color: var(--bronzo-testo); }
.menu__cta { white-space: nowrap; }
.menu__azioni { display: none; }
.menu-apri { display: none; }
.menu-apri[aria-expanded="false"] [data-stato="aperto"], .menu-apri[aria-expanded="true"] [data-stato="chiuso"] { display: none; }

/* ── testata della pagina (hero): titolo e immagine nella stessa schermata ──
   computer: due colonne, la foto al vivo fino al bordo destro, alta quanto la testata;
   telefono: foto 260 px (200 nelle interne) e il pannello che sale di 40 px sulla foto. */
.apertura { --apertura-h: clamp(600px, calc(100svh - var(--testata-h)), 820px); --fuoco: 44% 50%; }
.apertura[data-pagina] { --apertura-h: clamp(520px, calc(100svh - var(--testata-h) - 200px), 580px); --fuoco: 50% 50%; }
.apertura__griglia {
  display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); column-gap: clamp(40px, 4.4vw, 80px);
  min-height: var(--apertura-h);
  padding-left: max(var(--margine), (100% - var(--contenitore)) / 2);
}
.apertura__testa { align-self: center; min-width: 0; padding: 36px 0 44px; }
.apertura__occhiello {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  font-size: 13px; line-height: 1.5; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bronzo-testo);
}
.apertura__occhiello .icona { width: 18px; height: 18px; color: var(--bronzo); }
.apertura__occhiello::after {
  content: ""; width: 40px; height: 2px; margin-left: 4px;
  background: url("/assets/img/elementi/accento-bronzo.svg") left center / 40px 8px no-repeat;
}
/* briciole di pane (interne): nello stesso posto dell'occhiello */
.apertura__occhiello[data-briciole] { gap: 2px 8px; letter-spacing: .1em; }
.apertura__occhiello[data-briciole]::after { content: none; }
.apertura__occhiello[data-briciole] a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--bronzo-testo); transition: color var(--durata); }
.apertura__occhiello[data-briciole] a:hover { color: var(--inchiostro); }
.apertura__occhiello[data-briciole] a[aria-label] { min-width: 44px; justify-content: center; margin-left: -14px; margin-right: 0; }
.apertura__occhiello[data-briciole] [aria-current] { color: var(--inchiostro); }
.apertura__occhiello[data-briciole] > .icona { width: 14px; height: 14px; color: var(--bronzo); stroke-width: 2; transform: rotate(-90deg); }

.apertura__titolo {
  margin-top: 20px;
  font-size: var(--h1-home); line-height: 1.0; font-weight: 700; letter-spacing: -.02em;
  font-variation-settings: "opsz" 20;
}
.apertura[data-pagina] .apertura__titolo { font-size: var(--h1); line-height: 1.05; letter-spacing: -.018em; }
.apertura__intro { margin-top: 24px; max-width: 31em; font-size: var(--attacco); line-height: 1.5; color: var(--inchiostro); }
.apertura__intro p + p { margin-top: 8px; }
.apertura__azioni { margin-top: 30px; gap: 12px 14px; }
.apertura__foto { position: relative; margin: 0; min-height: 100%; overflow: hidden; background: var(--putty); }
.apertura__foto > picture, .apertura__foto > img, .apertura__foto > picture > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fuoco);
}

/* pagine senza foto (privacy) */
.apertura[data-pagina="testo"] .apertura__griglia { grid-template-columns: minmax(0, 860px); min-height: 0; }
.apertura[data-pagina="testo"] .apertura__testa { padding: 40px 0 0; }
.apertura[data-pagina="testo"] + .sez { margin-top: clamp(40px, 5vw, 72px); }
/* a destra un mosaico di foto vere (lavori) o la scheda contatti (contatti) */
.apertura__foto[data-forma] { min-height: 0; background: none; overflow: visible; align-self: center; padding: 32px max(var(--margine), (100vw - var(--contenitore)) / 2) 32px 0; }
.apertura__foto[data-forma="scheda"] .canali { max-width: 540px; }
/* mosaico 2×2 di foto vere al vivo, alto quanto la testata */
.apertura__foto[data-forma="mosaico"] { align-self: stretch; padding: 0; }
.apertura__foto[data-forma="mosaico"] .mosaico { height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.apertura__foto[data-forma="mosaico"] .mosaico__voce, .apertura__foto[data-forma="mosaico"] .lavoro__apri { height: 100%; }
.apertura__foto[data-forma="mosaico"] .mosaico .lavoro__foto { height: 100%; aspect-ratio: auto; }

/* barra delle garanzie: 2×2 con filetti sottili (3 in riga nelle interne) */
.garanzie {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 600px; margin-top: 40px; border-top: 1px solid var(--linea);
}
.garanzia {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 14px 18px 14px 0; border-bottom: 1px solid var(--linea);
  font-size: 15px; line-height: 1.35; font-weight: 600; color: var(--inchiostro);
}
.garanzie:not([data-col]) .garanzia:nth-child(even) { padding: 14px 0 14px 18px; border-left: 1px solid var(--linea); }
.garanzie[data-col="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 660px; }
.garanzie[data-col="3"] .garanzia { gap: 12px; padding: 14px 14px 14px 16px; border-left: 1px solid var(--linea); }
.garanzie[data-col="3"] .garanzia:first-child { padding-left: 0; border-left: 0; }

/* ── due colonne (etichetta + testo; titolo + elenco) ─────────────────── */
.due-col { display: grid; grid-template-columns: 250px minmax(0, 1fr); column-gap: 56px; }
.due-col > .titoletto { padding-top: 14px; }
.due-col > div > .testo:first-child { margin-top: 12px; }

.due-col--pari { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); column-gap: 80px; }

/* chi siamo (forma del manifesto) */
.manifesto__frase {
  font-size: clamp(22px, 1.95vw, 28px); line-height: 1.3; font-weight: 650; letter-spacing: -.015em;
  font-variation-settings: "opsz" 20; color: var(--inchiostro); max-width: 24ch;
}
.manifesto__link { margin-top: 18px; }

/* ── elenco aperto (righe e domande) ──────────────────────────────────── */

.voce { border-bottom: 1px solid var(--linea); }
.voce:first-child { border-top: 1px solid var(--linea); }
.voce__testa {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 16px 0;
  font-size: 17px; line-height: 1.45; color: var(--inchiostro);
  cursor: pointer; list-style: none;
  transition: color var(--durata), padding var(--durata);
}
.voce__testa::-webkit-details-marker { display: none; }
.voce__nome { flex: 1 1 auto; }
.voce__nome strong { color: var(--inchiostro); }

 .voce__piu, .voce__meno { width: 20px; height: 20px; color: var(--bronzo); stroke-width: 1.8; transition: transform var(--durata); }
.voce__meno { display: none; }
.voce[open] .voce__meno { display: block; }
.voce[open] .voce__piu { display: none; }
@media (hover: hover) {
  a.voce__testa:hover, summary.voce__testa:hover { color: var(--bronzo-testo); padding-left: 6px; }
  
}
a.voce__testa:active, summary.voce__testa:active { color: var(--bronzo-testo); }
div.voce__testa { cursor: default; }
.voce__testo { padding: 0 40px 22px 0; font-size: var(--corpo); line-height: 1.6; color: var(--grigio); max-width: 62ch; }
.domande .voce__nome { font-weight: 550; font-size: 18px; }

/* ── settori: foto sfalsate ───────────────────────────────────────────── */

/* ── pareti negli ospedali (forma: «La differenza è nelle mani») ──────── */

/* ── lavori veri: una riga che scorre ─────────────────────────────────── */

.lavori .testo { margin-top: 14px; }

.frecce__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: transparent; border: 1px solid var(--linea); color: var(--inchiostro);
  transition: background var(--durata), border-color var(--durata), opacity var(--durata), transform .15s var(--esce);
}
.frecce__btn:hover { border-color: var(--bronzo); background: var(--putty); }
.frecce__btn:active { transform: scale(.95); }
.frecce__btn:disabled { opacity: .35; cursor: default; background: transparent; border-color: var(--linea); }
.frecce__btn .icona { width: 18px; height: 18px; }

.lavoro__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--putty); transition: transform .8s var(--esce); }

/* didascalia sotto la foto: 15 px in inchiostro, sempre visibile */
.lavoro__nome { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--inchiostro); }
.lavoro__nome .icona { width: 18px; height: 18px; margin-top: 1px; color: var(--bronzo); }

.lavori__azioni { margin-top: 32px; }

.fascia__in.due-col--pari { align-items: center; row-gap: 36px; }
.fascia .canali { --fondo-tessera: var(--fondo); }

/* ── passaggi (forma: le fasi del metodo) + traccia del processo ──────── */
.fasi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 64px; margin-top: 30px; }
.fasi[data-col="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 48px; }
.fase { min-width: 0; }
.fase__num { display: block; font-size: 34px; line-height: 1.1; font-weight: 650; letter-spacing: -.01em; color: var(--bronzo); }
.fase__titolo { margin-top: 10px; font-size: var(--h3); line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }

.fase .testo { margin-top: 12px; }
.metodo__azioni { margin-top: 48px; }
/* con le icone: la tessera sta sulla traccia (linea del kit, orizzontale da computer, verticale da telefono) */
.fasi[data-traccia] { position: relative; margin-top: 0; }
.fasi[data-traccia]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px; background: var(--linea);
}
.fasi[data-traccia]::after {
  content: ""; position: absolute; right: 0; top: 19px; width: 7px; height: 7px; border-radius: 50%; background: var(--bronzo);
}
.fasi[data-traccia] .tessera { position: relative; z-index: 1; }
.fasi[data-traccia] .fase__num { margin-top: 22px; font-size: 14px; line-height: 1.4; font-weight: 700; letter-spacing: .12em; color: var(--bronzo-testo); }
.fasi[data-traccia] .fase__titolo { margin-top: 6px; }

.occhiello + .fasi, .occhiello + .fasi[data-traccia] { margin-top: 36px; }

/* ── fascia contatti ──────────────────────────────────────────────────── */
.fascia {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: var(--sez);
  background: var(--putty-2);
}
.fascia__sfondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 100% 24%;
  transform: translate3d(0, var(--sposta, 0px), 0) scale(1.14); will-change: transform;
}
.fascia::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--putty-2) 0%, rgba(236, 231, 223, .94) 38%, rgba(236, 231, 223, .35) 70%, rgba(236, 231, 223, 0) 100%);
}
.fascia__in { padding: 84px 0 86px; }
.fascia[data-fondo="putty"] { background: var(--putty); }
.fascia[data-fondo="putty"]::before { content: none; }
.fascia .canali { --fondo-tessera: var(--fondo); }
.fascia__testo .icona { width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; color: var(--bronzo); }
.fascia__testo { margin-top: 18px; font-size: 20px; line-height: 1.45; color: var(--inchiostro); max-width: 44ch; }

.fascia__testo a{ text-decoration: underline; text-decoration-color: rgba(140, 109, 53, .5); text-underline-offset: 4px; }
.fascia__testo a:hover{ color: var(--bronzo-testo); }
.fascia .metodo__azioni { margin-top: 30px; gap: 12px; }

/* ── piè di pagina: 4 colonne ─────────────────────────────────────────── */
.piede { padding: 72px 0 28px; }
.piede__alto {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.15fr); column-gap: 48px;
  padding-bottom: 44px; border-bottom: 1px solid var(--linea);
}
.piede__marchio .marchio__logo { width: 196px; }
.piede__motto { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--grigio); max-width: 28ch; }
.piede__wa { margin-top: 22px; min-height: 48px; padding: 0 20px; font-size: 14px; }
.piede__col { min-width: 0; }
.piede__titolo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; margin-bottom: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--bronzo-testo);
  list-style: none; cursor: default;
}
.piede__titolo::-webkit-details-marker { display: none; }
.piede__titolo .icona { display: none; width: 20px; height: 20px; color: var(--bronzo); }
.piede__lista li + li { margin-top: 2px; }
.piede__lista a, .piede__contatti a, .piede__contatti p {
  display: inline-flex; align-items: center; gap: 10px; min-height: 36px;
  font-size: 15px; line-height: 1.4; color: var(--inchiostro); transition: color var(--durata);
}
.piede__contatti { display: flex; flex-direction: column; align-items: flex-start; }
.piede__contatti .icona { width: 18px; height: 18px; color: var(--bronzo); }
.piede a:hover { color: var(--bronzo-testo); }
.piede__basso {
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 32px; row-gap: 4px;
  padding-top: 14px; font-size: 13px;
}
.piede__basso a { display: inline-flex; align-items: center; min-height: 44px; }
.piede__nota { margin-top: 4px; font-size: 13px; line-height: 1.6; color: var(--grigio); }
.piede__legale { margin-top: 8px; font-size: 12px; line-height: 1.7; color: var(--grigio); }
.piede__firma { margin-top: 4px; font-size: 12px; color: var(--grigio); }
.piede__firma a { display: inline-flex; align-items: center; min-height: 44px; color: var(--inchiostro); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--linea); }

/* pulsante WhatsApp fisso (solo telefono, compare quando il pulsante della testata esce) */
.wa-fisso { display: none; }

/* ── banner cookie (una riga) ─────────────────────────────────────────── */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 6px 16px; background: var(--fondo); border-top: 1px solid var(--linea);
  font-size: 13px; line-height: 1.35;
}
.cookie[hidden] { display: none; }
.cookie__testo a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: -14px -4px; vertical-align: middle; text-decoration: underline; text-underline-offset: 2px; }
.cookie__ok {
  min-height: 44px; min-width: 44px; padding: 0 14px; background: none; border: 0;
  font-size: 13px; font-weight: 700; color: var(--bronzo-testo);
}


/* ════════════════════════════════════════════════════════════════════════
   COMPONENTI NUOVI (salto di livello, fase A) — tutti con i pezzi del kit
   ════════════════════════════════════════════════════════════════════════ */

/* 1 · tutti i servizi: griglia 3×3 di tessere aperte (2 colonne da telefono) */
.servizi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linea); }
.servizi > li { display: flex; border-top: 1px solid var(--linea); }
.servizi > li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--linea); }
.servizio {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%;
  padding: 30px 28px 32px; color: var(--inchiostro);
  transition: background var(--durata);
}
.servizi > li:nth-child(3n + 1) .servizio { padding-left: 0; }
.servizi > li:nth-child(3n) .servizio { padding-right: 0; }
.servizio__nome { margin-top: 18px; font-size: 20px; line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
.servizio__riga { margin-top: 6px; padding-right: 30px; font-size: 16px; line-height: 1.5; color: var(--grigio); }
.servizio__freccia { position: absolute; right: 28px; bottom: 34px; width: 20px; height: 20px; color: var(--bronzo); transition: transform var(--durata); }
.servizi > li:nth-child(3n) .servizio__freccia { right: 0; }
@media (hover: hover) {
  a.servizio:hover .servizio__nome { color: var(--bronzo-testo); }
  a.servizio:hover .servizio__freccia { transform: translateX(4px); }
}
a.servizio:active .servizio__nome { color: var(--bronzo-testo); }
.servizi[data-forma="stretta"] .servizio { padding-block: 22px 24px; }
.servizi[data-forma="stretta"] .servizio__riga { display: none; }
.servizi[data-forma="stretta"] .servizio__nome { margin-top: 12px; font-size: 18px; }

/* scegli in base al locale: la stessa griglia, 4 tessere in riga (2×2 da telefono) */
@media (min-width: 768px) {
  .servizi[data-col="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .servizi[data-col="4"] > li, .servizi[data-col="4"] > li:not(:nth-child(3n + 1)) { border-left: 1px solid var(--linea); }
  .servizi[data-col="4"] > li:nth-child(4n + 1) { border-left: 0; }
  .servizi[data-col="4"] > li .servizio, .servizi[data-col="4"] > li:nth-child(3n + 1) .servizio, .servizi[data-col="4"] > li:nth-child(3n) .servizio { padding: 28px 24px 30px; }
  .servizi[data-col="4"] > li:nth-child(4n + 1) .servizio { padding-left: 0; }
  .servizi[data-col="4"] > li:nth-child(4n) .servizio { padding-right: 0; }
  .servizi[data-col="4"] .servizio__freccia, .servizi[data-col="4"] > li:nth-child(3n) .servizio__freccia { right: 24px; }
  .servizi[data-col="4"] > li:nth-child(4n) .servizio__freccia { right: 0; }
}
.servizio__riga strong { color: var(--inchiostro); font-weight: 600; }

/* 2 · colonne con icona (per chi lavoriamo · fatti con icone · scegli per ambiente) */
.colonne { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 40px; row-gap: 40px; }
.colonne[data-col="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.colonne[data-col="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.colonna { min-width: 0; }
.colonna .titoletto { margin-top: 18px; }
.tessera + .titolo, .tessera + .occhiello { margin-top: 18px; }
.sez__testa .testo { max-width: 60ch; }
.domande .elenco + .testo { margin-top: 28px; }
.domande .azioni { margin-top: 18px; }
.colonna .testo { margin-top: 8px; font-size: 17px; }
.colonna .link-bronzo { margin-top: 8px; font-size: 15px; }
/* tessere con bordo (scegli per ambiente) */
.colonne[data-forma="tessere"] { column-gap: 0; row-gap: 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.colonne[data-forma="tessere"] .colonna { padding: 28px 24px 30px; border-left: 1px solid var(--linea); }
.colonne[data-forma="tessere"] .colonna:first-child { padding-left: 0; border-left: 0; }
/* fatti in una colonna stretta (chi siamo in home): icona accanto al testo */
.colonne[data-forma="righe"] { grid-template-columns: minmax(0, 1fr); row-gap: 0; border-top: 1px solid var(--linea); }
.colonne[data-forma="righe"] .colonna { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.colonne[data-forma="righe"] .titoletto { margin-top: 0; font-size: 17px; }

/* 3 · schede con foto (le 4 ambientazioni di «per chi lavoriamo» · «Continua») */
.schede { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 24px; }
.schede[data-col="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.schede[data-col="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
.scheda { display: flex; flex-direction: column; min-width: 0; height: 100%; color: var(--inchiostro); }
.scheda__foto { position: relative; display: block; overflow: hidden; background: var(--putty); }
.scheda__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .8s var(--esce); }
.scheda .titoletto { display: block; margin-top: 18px; font-size: var(--h3); line-height: 1.3; font-weight: 650; letter-spacing: -.01em; }
.scheda .testo { display: block; margin-top: 6px; max-width: none; font-size: 16px; line-height: 1.5; color: var(--grigio); }

@media (hover: hover) {
  a.scheda:hover .scheda__foto img { transform: scale(1.04); }
  
  a.scheda:hover .titoletto { color: var(--bronzo-testo); }
}
/* «Continua»: due schede 3:2 con la freccia editoriale del kit */
.schede[data-forma="continua"] .scheda__foto img { aspect-ratio: 3 / 2; }
.schede[data-forma="continua"] .titoletto { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-top: 20px; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; }
.schede[data-forma="continua"] .titoletto::after {
  content: ""; flex: none; width: 28px; height: 28px; margin-top: 2px;
  background: url("/assets/img/elementi/freccia-editoriale.svg") center / contain no-repeat;
  transition: transform var(--durata);
}
@media (hover: hover) { .schede[data-forma="continua"] a.scheda:hover .titoletto::after { transform: translate(3px, -3px); } }
/* indice dei pavimenti: 9 schede piccole con immagine, icona e nome (da telefono scorrono di lato) */
.schede[data-forma="indice"] { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
.schede[data-forma="indice"] .scheda__foto img { aspect-ratio: 1; }
.schede[data-forma="indice"] .titoletto { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; line-height: 1.25; }
.schede[data-forma="indice"] .titoletto { align-items: flex-start; }
.schede[data-forma="indice"] .titoletto .icona { width: 18px; height: 18px; margin-top: 1px; color: var(--bronzo); }
/* Contatti nel blocco «Continua»: la 16 fa da fondo, sopra tre icone */
.scheda__foto [data-icone] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 16px; }
.scheda__foto [data-icone] .tessera { width: 64px; height: 64px; border-color: transparent; background: rgba(251, 250, 248, .92); }
.scheda__foto [data-icone] .tessera .icona { width: 30px; height: 30px; stroke-width: 1.3; }

/* 4 · mosaico di foto vere: una grande + quattro (2×2 nella testata dei lavori) */
.mosaico { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; align-items: start; }
.mosaico__voce:first-child { align-self: stretch; }
.mosaico__voce { min-width: 0; }
.mosaico__voce:first-child { grid-row: span 2; }
.mosaico__voce figure { display: flex; flex-direction: column; height: 100%; }
.mosaico__voce .lavoro__apri { position: relative; flex: 1 1 auto; min-height: 0; }
.mosaico__voce .lavoro__foto { aspect-ratio: 4 / 3; }
.mosaico__voce:first-child .lavoro__foto { height: 100%; aspect-ratio: auto; min-height: 320px; }
/* una foto grande accanto alla pila delle due piccole (la grande è alta quanto la pila) */
.mosaico[data-forma="tre"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.mosaico[data-forma="tre"] > .mosaico__voce { grid-row: auto; }
.mosaico[data-forma="tre"] [data-pila] { display: grid; gap: 18px; align-content: start; }
.mosaico[data-forma="tre"] > .mosaico__voce .lavoro__foto { height: 100%; min-height: 0; aspect-ratio: auto; }
.mosaico[data-forma="tre"] [data-pila] .mosaico__voce { grid-row: auto; grid-column: auto; }
.mosaico[data-forma="tre"] [data-pila] .lavoro__foto { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
.mosaico[data-forma="riga"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mosaico[data-forma="riga"][data-col="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaico[data-forma="riga"] .mosaico__voce:first-child { grid-row: auto; }
.mosaico[data-forma="riga"] .mosaico__voce:first-child .lavoro__foto { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
.mosaico[data-forma="quattro"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mosaico[data-forma="quattro"] .mosaico__voce:first-child { grid-row: auto; }
.mosaico[data-forma="quattro"] .lavoro__foto { aspect-ratio: 4 / 3; height: auto; min-height: 0; }

/* 5 · immagine con indicatori numerati e legenda (raccordo a sguscio) */
.indicatori { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); align-items: center; }
.indicatori__foto { position: relative; overflow: hidden; background: var(--putty); }
.indicatori__foto > img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.indicatori__punto {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background: url("/assets/img/elementi/indicatore-dettaglio.svg") center / 64px 64px no-repeat;
  font-size: 14px; font-weight: 700; color: var(--bronzo-testo);
}
.indicatori__punto::before {
  content: ""; position: absolute; inset: 18px; z-index: -1; border-radius: 50%;
  background: var(--fondo); box-shadow: 0 2px 10px rgba(20, 24, 31, .18);
  transition: transform var(--durata), background var(--durata);
}
.indicatori__punto.attivo { color: var(--bianco); }
.indicatori__punto.attivo::before { background: var(--bronzo); transform: scale(1.12); }
.legenda { counter-reset: legenda; border-top: 1px solid var(--linea); }
.legenda li {
  display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--linea);
  font-size: 17px; line-height: 1.5; color: var(--inchiostro); transition: color var(--durata);
}
.legenda li::before {
  counter-increment: legenda; content: counter(legenda);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border: 1px solid var(--bronzo); border-radius: 50%;
  font-size: 13px; font-weight: 700; color: var(--bronzo-testo); transition: background var(--durata), color var(--durata);
}
.legenda li.attivo::before { background: var(--bronzo); color: var(--bianco); }
 .legenda + .testo { margin-top: 18px; }
/* il disegno del raccordo (raccordo-curvo.svg del kit) sotto la legenda */
.indicatori__disegno { display: block; width: 160px; height: 120px; background: url("/assets/img/elementi/raccordo-curvo.svg") left bottom / contain no-repeat; }
.indicatori__foto[data-forma="ritratto"] { margin: 0; }
.indicatori__foto[data-forma="ritratto"] > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.indicatori__foto > img { aspect-ratio: 5 / 4; }
.indicatori__vera { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 18px; align-items: end; margin: 18px 0 0; }
.indicatori__vera .lavoro__nome { margin: 0; max-width: 24ch; }
.legenda li .indicatori__disegno { flex: none; width: 56px; height: 40px; margin: -4px 0 -4px auto; }
.legenda li strong, .legenda li span { font-weight: 600; }
.checklist .indicatori__disegno { display: inline-block; width: 46px; height: 32px; margin: 0 0 -8px 10px; vertical-align: baseline; }

/* 6 · checklist con la spunta («Cosa mandarci») */
.checklist { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.checklist li { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--linea); font-size: 17px; line-height: 1.45; color: var(--inchiostro); }
.checklist .tessera { width: 40px; height: 40px; }
.checklist .tessera .icona { width: 20px; height: 20px; }
.checklist[data-forma="scheda"] { margin-top: 26px; }
.checklist[data-forma="scheda"] li { display: block; min-height: 0; padding: 13px 0; font-size: 17px; color: var(--grigio); }
.checklist[data-forma="scheda"] strong { color: var(--inchiostro); font-weight: 650; }
.titoletto + .checklist { margin-top: 14px; }
.checklist [data-lato="destro"] { width: 22px; height: 22px; margin-left: auto; color: var(--bronzo); stroke-width: 1.4; }
.checklist[data-numerata] { counter-reset: lista; }
.checklist[data-numerata] li::after { counter-increment: lista; content: "0" counter(lista); order: -1; flex: none; width: 26px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--bronzo-testo); }

/* 7 · righe-canale di contatto con le icone grandi (+ scheda contatti) */
.canali { position: relative; isolation: isolate; }
.canali__lista { border-top: 1px solid var(--linea); }
.canale {
  display: flex; align-items: center; gap: 18px; min-height: 84px; padding: 14px 0;
  border-bottom: 1px solid var(--linea); color: var(--inchiostro);
}
.canale__testo { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.canale__etichetta { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bronzo-testo); }
.canale__valore { margin-top: 2px; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.canale__freccia { width: 22px; height: 22px; color: var(--bronzo); transition: transform var(--durata); }
@media (hover: hover) {
  a.canale:hover .canale__valore { color: var(--bronzo-testo); }
  a.canale:hover .canale__freccia { transform: translate(2px, -2px); }
}
a.canale:active .canale__valore { color: var(--bronzo-testo); }
.canali .link-bronzo { margin-top: 14px; }
div.canale .canale__valore { font-size: 17px; font-weight: 500; }
/* scheda contatti: riquadro putty con l'ambientazione 16 in trasparenza */
.canali[data-forma="scheda"] { padding: 30px 32px 34px; background: var(--putty); overflow: hidden; --fondo-tessera: var(--fondo); }
.canali > img[data-sfondo] { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; opacity: .22; }

/* 8 · tabella di confronto dei materiali (su putty; da telefono diventa schede) */
table[data-confronto] { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
table[data-confronto] th, table[data-confronto] td { padding: 18px 20px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
table[data-confronto] thead th { padding-block: 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bronzo-testo); border-bottom-color: var(--bronzo); }
table[data-confronto] tbody th { padding-block: 10px; font-size: 18px; font-weight: 650; color: var(--inchiostro); white-space: nowrap; }
table[data-confronto] tbody th a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: underline; text-decoration-color: rgba(140, 109, 53, .45); text-underline-offset: 5px; transition: color var(--durata); }
table[data-confronto] tbody th a:hover { color: var(--bronzo-testo); }
table[data-confronto] td { padding-top: 22px; color: var(--grigio); }
table[data-confronto] td:last-child { padding-right: 0; }

/* 8b · i dettagli della posa: miniature quadrate da 96 px e testo, su due colonne */
.elenco[data-forma="dettagli"] { columns: 2; column-gap: 56px; border-top: 1px solid var(--linea); }
.elenco[data-forma="dettagli"] .voce { display: flex; align-items: center; gap: 18px; padding: 14px 0; break-inside: avoid; border-top: 0; }
.elenco[data-forma="dettagli"] .lavoro__apri { flex: none; width: 96px; height: 96px; }
.elenco[data-forma="dettagli"] .lavoro__foto { width: 96px; height: 96px; aspect-ratio: 1; }
.elenco[data-forma="dettagli"] .voce__nome { font-size: 17px; line-height: 1.5; color: var(--grigio); }

/* 9 · barre di pulsanti con icona e conteggio: filtri dei lavori, scorciatoie, indice dei pavimenti */
.azioni[data-filtri], .azioni[data-scorciatoie], .azioni[data-indice] { gap: 10px; }
.azioni[data-filtri] .btn--contorno, .azioni[data-scorciatoie] .btn--contorno, .azioni[data-indice] .btn--contorno {
  gap: 8px; padding: 0 18px 0 16px; color: var(--inchiostro); border-color: var(--linea); font-size: 15px; font-weight: 550;
}
.azioni[data-filtri] .btn--contorno .icona, .azioni[data-scorciatoie] .btn--contorno .icona, .azioni[data-indice] .btn--contorno .icona { width: 20px; height: 20px; color: var(--bronzo); stroke-width: 1.4; }
.azioni[data-filtri] .btn--contorno:hover, .azioni[data-scorciatoie] .btn--contorno:hover, .azioni[data-indice] .btn--contorno:hover { border-color: var(--bronzo); }
.azioni[data-filtri] .btn--contorno[aria-pressed="true"] { background: var(--grafite); border-color: var(--grafite); color: var(--bianco); }
.azioni[data-filtri] .btn--contorno[aria-pressed="true"] .icona { color: var(--bianco); }
[data-conta] { font-size: 13px; font-weight: 700; color: var(--bronzo-testo); font-variant-numeric: tabular-nums; }
[aria-pressed="true"] [data-conta] { color: rgba(255, 255, 255, .75); }

/* indice dei pavimenti: barra che resta sotto l'intestazione; la voce corrente in bronzo */
.azioni[data-indice] {
  position: sticky; top: var(--testata-solida); z-index: 40;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
  padding: 10px max(var(--margine), (100% - var(--contenitore)) / 2);
  background: var(--fondo); border-bottom: 1px solid var(--linea);
  transition: top .45s var(--esce), transform .45s var(--esce), opacity .3s;
}
.azioni[data-indice]::-webkit-scrollbar { display: none; }
.azioni[data-indice] .btn--contorno { flex: none; min-height: 44px; }
@media (min-width: 768px) {
  .azioni[data-indice] { gap: 4px; justify-content: space-between; }
  .azioni[data-indice] .btn--contorno { gap: 6px; padding: 0 11px 0 9px; font-size: 14px; border-color: transparent; }
  .azioni[data-indice] .btn--contorno .icona { width: 18px; height: 18px; }
}
@media (min-width: 768px) and (max-width: 1399px) {
  .azioni[data-indice] { gap: 0; }
  .azioni[data-indice] .btn--contorno { gap: 5px; padding: 0 7px 0 6px; font-size: 13px; }
  .azioni[data-indice] .btn--contorno .icona { width: 16px; height: 16px; }
}
@media (max-width: 1239px) {
  /* la sfumatura a destra è un pezzo fermo sopra le pillole: lo sfondo della barra resta pieno */
  .azioni[data-indice]::after {
    content: ""; position: sticky; right: 0; flex: none; align-self: stretch;
    width: 48px; margin-left: -48px; pointer-events: none;
    background: linear-gradient(90deg, rgba(251, 250, 248, 0), var(--fondo) 80%);
  }
}
.azioni[data-indice] .btn--contorno[aria-current="true"] { color: var(--bronzo-testo); border-color: var(--bronzo); background: var(--putty); }
.has-testata-via .azioni[data-indice] { top: 0; }
/* con data-dopo: compare (fissa) solo dopo le schede dell'indice */
.azioni[data-indice][data-dopo] { position: fixed; left: 0; right: 0; transform: translateY(-140%); opacity: 0; pointer-events: none; }
.azioni[data-indice][data-dopo].attivo { transform: none; opacity: 1; pointer-events: auto; }

/* ── ritmo tra i pezzi (fase B) ───────────────────────────────────────── */
.attacco + .attacco { margin-top: 6px; }
.attacco + .titoletto, .fascia__testo + .titoletto, .testo + .titoletto { margin-top: 30px; }
.titolo + .colonne, .attacco + .colonne { margin-top: 28px; }
.colonne + .schede, .colonne + .mosaico { margin-top: 56px; }
.mosaico + .azioni, .colonne + .azioni { margin-top: 28px; }
.due-col + .mosaico { margin-top: 48px; }
.legenda { margin-top: 26px; }
.indicatori { align-items: start; }
.voce__testo:has(+ .voce__testo) { padding-bottom: 8px; }
.checklist[data-forma="scheda"] li:has(.indicatori__disegno) { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.checklist[data-forma="scheda"] li .indicatori__disegno { flex: none; width: 56px; height: 40px; margin: 0; }
.checklist[data-forma="scheda"] + .link-bronzo { margin-top: 18px; }
@media (max-width: 767px) {
  .colonne + .schede, .colonne + .mosaico { margin-top: 32px; }
  .due-col + .mosaico { margin-top: 28px; }
  .apertura__foto > .etichetta { top: 10px; bottom: auto; }
}

/* ── audit totale 1 (09/10) ───────────────────────────────────────────── */
/* 0.1 · foto in riga allineate in alto, didascalia a 12 px */
.mosaico[data-forma="riga"] { align-items: start; align-content: start; align-self: start; }
.mosaico[data-forma="riga"] .mosaico__voce figure { height: auto; }
.mosaico[data-forma="riga"] .lavoro__apri { flex: none; }
/* 0.5 · le ambientazioni staccate dalle colonne, col locale sotto */
.colonne + .schede[data-forma="ambienti"] { margin-top: 64px; }
.schede[data-forma="ambienti"] .titoletto { margin-top: 10px; font-size: 15px; font-weight: 600; letter-spacing: 0; }
/* 0.8 · 0.9 · spazi sopra la checklist e sopra «Apri in Google Maps» */
.attacco + .checklist { margin-top: 22px; }
.canali .btn { margin-top: 22px; }
/* 0.20 · domande: frase e pulsante sotto l'H2, fermi mentre si scorre */
[data-fisso] .sez__testa { margin-bottom: 0; }
[data-fisso] .testo { margin-top: 22px; }
[data-fisso] .azioni { margin-top: 18px; }
@media (min-width: 768px) { [data-fisso] { position: sticky; top: 112px; align-self: start; } }
/* 0.21 · schema «A terra / Alle pareti»: icone grandi e la curva del raccordo in mezzo */
.tessera[data-misura="enorme"] { width: 72px; height: 72px; }
.tessera[data-misura="enorme"] .icona { width: 44px; height: 44px; stroke-width: 1.15; }
.colonne[data-forma="schema"] { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; padding-block: 22px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.colonne[data-forma="schema"] .colonna:not([data-raccordo]) { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 20px; align-items: center; }
.colonne[data-forma="schema"] .colonna .testo { margin-top: 0; color: var(--inchiostro); }
[data-raccordo] { display: flex; align-items: center; gap: 14px; padding-left: 14px; }
[data-raccordo] .indicatori__disegno { width: 66px; height: 48px; }
[data-raccordo] .lavoro__nome { margin: 0; font-size: 14px; color: var(--bronzo-testo); }
/* 0.22 · privacy: blocchi vicini, separati da un filetto */
.sez[data-forma="legale"] { margin-top: 0; }
.sez[data-forma="legale"] > .wrap { padding-block: 52px; border-top: 1px solid var(--linea); }
.apertura[data-pagina="testo"] + .sez[data-forma="legale"] { margin-top: 48px; }
/* 3.2 · la barra fissa dell'indice, quando è nascosta, esce anche dal Tab */
.azioni[data-indice][data-dopo] { visibility: hidden; transition: top .45s var(--esce), transform .45s var(--esce), opacity .3s, visibility 0s .45s; }
.azioni[data-indice][data-dopo].attivo { visibility: visible; transition-delay: 0s; }
/* 3.6 · niente parole sole */
.garanzia > span, .btn, .lavoro__nome, .titoletto, .servizio__nome, .servizio__riga { text-wrap: balance; }
/* 3.7 · «Sottofondo e autolivellante» su una riga da computer */
@media (min-width: 1100px) {
  #sottofondo .due-col--pari { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: 56px; }
  #sottofondo .titolo { font-size: clamp(30px, 3.05vw, 46px); white-space: nowrap; }
}
@media (max-width: 767px) {
  /* 0.10 · quando le due colonne si impilano, il passo delle altre sezioni */
  .due-col--pari { row-gap: 22px; }
  .due-col--pari > .sez__testa { margin-bottom: 0; }
  .colonne + .schede[data-forma="ambienti"] { margin-top: 40px; }
  .colonne[data-forma="schema"] { padding-block: 16px; }
  .colonne[data-forma="schema"] .colonna:not([data-raccordo]) { column-gap: 16px; }
  .sez[data-forma="legale"] > .wrap { padding-block: 36px; }
}
@media (max-width: 767px) {
  /* 2 · pareti e raccordo: prima la testa della sezione, poi l'immagine coi punti e subito la legenda, poi la foto vera */
  div.indicatori { display: flex; flex-direction: column; row-gap: 0; }
  .indicatori > div { display: contents; }
  .indicatori .occhiello, .indicatori .titolo, .indicatori .attacco, .indicatori .testo { order: 1; }
  .indicatori .indicatori__foto { order: 2; margin-top: 24px; }
  .indicatori .legenda { order: 3; }
  .indicatori .indicatori__vera { order: 4; margin-top: 22px; }
  /* 3 · domande: la frase e il pulsante dopo la lista */
  .domande [data-fisso] { display: contents; }
  .domande [data-fisso] .sez__testa { order: 1; }
  .domande .due-col--pari > .reveal { order: 2; }
  .domande [data-fisso] > .testo { order: 3; margin-top: 6px; }
  .domande [data-fisso] > .azioni { order: 4; margin-top: -8px; }
}
/* 4 · i dettagli della posa fino a 379 px: miniatura più piccola, testo a 15 px, al massimo 3 righe */
@media (max-width: 379px) {
  .elenco[data-forma="dettagli"] .voce { gap: 12px; }
  .elenco[data-forma="dettagli"] .voce .lavoro__apri, .elenco[data-forma="dettagli"] .voce .lavoro__foto { width: 56px; height: 56px; }
  .elenco[data-forma="dettagli"] .voce .voce__nome { font-size: 15px; line-height: 1.5; }
}
/* 6 · garanzie lunghe (/ospedali-scuole): una colonna fino a 399 px */
@media (max-width: 399px) {
  .garanzie[data-righe="lunghe"] { grid-template-columns: minmax(0, 1fr); }
  .garanzie[data-righe="lunghe"] .garanzia, .garanzie[data-righe="lunghe"] .garanzia:nth-child(even) { padding: 8px 0; border-left: 0; }
}
/* 3.8 · sotto i 375 px nessun blocco oltre 3 righe */
@media (max-width: 374px) {
  .garanzie:not([data-col]) { grid-template-columns: minmax(0, 1fr); }
  .garanzie:not([data-col]) .garanzia, .garanzie:not([data-col]) .garanzia:nth-child(even) { padding: 8px 0; border-left: 0; }
  .fase .testo, .colonna .testo, .elenco[data-forma="dettagli"] .voce__nome { font-size: 16px; }

  .servizi:not([data-forma="stretta"]) .servizio__riga { font-size: 14px; }
  .apertura[data-pagina] .apertura__testa .apertura__intro { font-size: 15px; }
}

/* ════════════════════════════════════════════════════════════════════════
   HOME RICCA (PIANO-HOME-RICCA, 09/10): varianti data-* delle classi della home
   ════════════════════════════════════════════════════════════════════════ */
/* cornice-fotografia del kit: i quattro angoli bronzo (2 px, lato 36) */
[data-cornice] { position: relative; }
[data-cornice]::after {
  content: ""; position: absolute; inset: var(--cornice-rientro, 14px); z-index: 2; pointer-events: none;
  --c: var(--bronzo); --l: var(--cornice-lato, 36px);
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--l) 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--l) 2px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--l) 2px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2px var(--l) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--l) 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px var(--l) no-repeat;
}
/* tessere piene bronzo, icona chiara */
.tessera[data-tono="bronzo"] { background: var(--bronzo); border-color: var(--bronzo); color: var(--fondo); }
.tessera[data-misura="piccola"] { width: 32px; height: 32px; }
.tessera[data-misura="piccola"] .icona { width: 18px; height: 18px; }
/* numero di sezione nell'occhiello (non è testo: lo scrive il CSS) */
.occhiello[data-n]::before {
  content: attr(data-n) / ""; width: auto; height: auto; padding-left: 44px;
  background-position: left center; color: var(--bronzo); font-variant-numeric: tabular-nums;
}

/* 1 · testata: la foto coi quattro angoli e la scheda dei cantieri che sporge verso il testo */
.apertura:not([data-pagina]) .apertura__foto { overflow: visible; --cornice-rientro: 24px; }
.apertura:not([data-pagina]) .apertura__foto > picture { overflow: hidden; }
.apertura__foto > .etichetta { z-index: 3; }
@media (min-width: 768px) { .apertura:not([data-pagina]) .apertura__foto > .etichetta { right: 36px; bottom: 36px; } }
.scheda[data-forma="cantieri"] {
  position: absolute; left: -48px; bottom: 72px; z-index: 4; display: block; height: auto;
  padding: 12px 12px 4px; background: var(--fondo); border: 1px solid var(--linea);
  box-shadow: 0 18px 36px -28px rgba(20, 24, 31, .45);
}
.mosaico[data-forma="francobolli"] { display: flex; gap: 6px; }
.mosaico[data-forma="francobolli"] .mosaico__voce { overflow: hidden; }
.mosaico[data-forma="francobolli"] img { width: 112px; height: 112px; object-fit: cover; transition: transform .6s var(--esce); }
@media (hover: hover) { .scheda[data-forma="cantieri"]:hover img { transform: scale(1.04); } }
.scheda[data-forma="cantieri"] .link-bronzo { font-size: 15px; }
.js .scheda[data-forma="cantieri"] { animation: affiora .9s var(--esce) .55s both; }
.js .mosaico[data-forma="francobolli"] .mosaico__voce { animation: affiora .6s var(--esce) both; animation-delay: calc(.75s + var(--i, 0) * 80ms); }

/* nastro dei cantieri: 10 foto vere, un giro in 60 s, non si ferma mai */
.mosaico[data-forma="nastro"] {
  display: block; overflow: hidden; margin-top: 40px; padding-block: 32px;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
[data-pista] { display: flex; width: max-content; animation: nastro 60s linear infinite; }
.mosaico[data-forma="riga-nastro"] { display: flex; gap: 8px; padding-right: 8px; }
.mosaico[data-forma="riga-nastro"] .mosaico__voce { flex: none; }
.mosaico[data-forma="riga-nastro"] img { width: 280px; height: 210px; object-fit: cover; background: var(--putty); }
@keyframes nastro { to { transform: translateX(-50%); } }

/* 2 · tutti i servizi: il campionario con la foto */
.servizi[data-forma="campionario"] { gap: 44px 28px; border-bottom: 0; }
.servizi[data-forma="campionario"] > li, .servizi[data-forma="campionario"] > li:not(:nth-child(3n + 1)) { border: 0; }
.servizi[data-forma="campionario"] .servizio,
.servizi[data-forma="campionario"] > li:nth-child(3n + 1) .servizio,
.servizi[data-forma="campionario"] > li:nth-child(3n) .servizio { padding: 0 0 24px; border-bottom: 1px solid var(--linea); }
.servizi[data-forma="campionario"] .scheda__foto { width: 100%; }
.servizi[data-forma="campionario"] .scheda__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--esce); }
[data-aggancio] { position: relative; display: block; height: 0; width: 100%; }
.servizi[data-forma="campionario"] [data-aggancio] .tessera { position: absolute; left: 20px; top: -22px; z-index: 2; transition: background var(--durata), border-color var(--durata); }
.servizi[data-forma="campionario"] .servizio__nome { margin-top: 38px; font-size: 21px; }
.servizi[data-forma="campionario"] .servizio__freccia, .servizi[data-forma="campionario"] > li:nth-child(3n) .servizio__freccia { right: 0; bottom: 26px; }
@media (hover: hover) {
  .servizi[data-forma="campionario"] a.servizio:hover .scheda__foto img { transform: scale(1.04); }
  .servizi[data-forma="campionario"] a.servizio:hover .servizio__freccia { transform: translateX(6px); }
  .servizi[data-forma="campionario"] a.servizio:hover .tessera { background: var(--grafite); border-color: var(--grafite); }
}
.js .servizi[data-forma="campionario"] > .reveal { transition-delay: calc(var(--i, 0) * 60ms); }

/* 3 · i nostri lavori: la cifra 39 e la parete-indice */
.sez__testa [data-cifra] { display: flex; flex-direction: column; align-items: flex-end; text-align: right; color: var(--inchiostro); }
.sez__testa [data-cifra] [data-cresce] { font-size: 96px; line-height: .9; font-weight: 300; letter-spacing: -.03em; color: var(--bronzo); font-variant-numeric: tabular-nums; }
.sez__testa [data-cifra] > span:last-child { margin-top: 8px; font-size: 15px; font-weight: 600; }
.sez__testa [data-cifra]::after {
  content: ""; width: 34px; height: 34px; margin-top: 14px;
  background: url("/assets/img/elementi/freccia-editoriale.svg") center / contain no-repeat; transform: rotate(90deg);
}
.mosaico[data-forma="parete"] { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 306px); gap: 8px; }
.mosaico[data-forma="parete"] .mosaico__voce, .mosaico[data-forma="parete"] .mosaico__voce:first-child { grid-row: auto; align-self: stretch; }
.mosaico[data-forma="parete"] .mosaico__voce:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.mosaico[data-forma="parete"] .mosaico__voce:nth-child(6) { grid-column: 4; grid-row: 1 / span 2; }
.mosaico[data-forma="parete"] .scheda, .mosaico[data-forma="parete"] .scheda__foto { display: block; height: 100%; }
.mosaico[data-forma="parete"] img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--esce); }
@media (hover: hover) { .mosaico[data-forma="parete"] a:hover img { transform: scale(1.03); } }
[data-targhetta] {
  position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
  max-width: calc(100% - 20px); min-height: 32px; padding: 4px 10px; background: var(--fondo);
  font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--inchiostro);
}
[data-targhetta] .icona { width: 16px; height: 16px; color: var(--bronzo); }
[data-targhetta] [data-conta] { margin-left: 2px; }
.mosaico[data-forma="parete"] + .lavori__azioni { margin-top: 32px; }
/* la foto sale dal basso: il taglio sta sul figlio, così l'osservatore vede la voce (Chrome ignora un bersaglio tagliato tutto) */
.js .reveal[data-effetto="sale"] { opacity: 1; transform: none; }
.js .reveal[data-effetto="sale"] > * {
  clip-path: inset(100% 0 0 0);
  transition: clip-path .6s var(--esce); transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal[data-effetto="sale"].in > * { clip-path: inset(0); }

/* 4 · la posa da vicino: sei ritagli con l'indicatore del kit */
.mosaico[data-forma="lente"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 24px; counter-reset: lente; }
.mosaico[data-forma="lente"] .mosaico__voce, .mosaico[data-forma="lente"] .mosaico__voce:first-child { grid-row: auto; align-self: auto; counter-increment: lente; }
.mosaico[data-forma="lente"] .scheda__foto { aspect-ratio: 1; }
.mosaico[data-forma="lente"] .scheda__foto img { width: 100%; height: 100%; object-fit: cover; transform-origin: var(--x) var(--y); transition: transform 1.2s var(--esce); }
.js .mosaico[data-forma="lente"] .reveal.in .scheda__foto img { transform: scale(1.08); }
@media (hover: hover) { .mosaico[data-forma="lente"] a:hover .scheda__foto img { transform: scale(1.15); } }
.indicatori__punto[data-forma="lente"] {
  background-image: url("/assets/img/elementi/indicatore-dettaglio-chiaro.svg");   /* copia chiara del kit, tratto ~2 px */
  filter: drop-shadow(0 1px 3px rgba(20, 24, 31, .45));
}
.indicatori__punto[data-forma="lente"]::before { inset: 27px; background: var(--bronzo); box-shadow: none; }
.mosaico[data-forma="lente"] [data-numero] { display: block; margin-top: 16px; font-size: 32px; line-height: 1; font-weight: 300; letter-spacing: -.02em; color: var(--bronzo); font-variant-numeric: tabular-nums; }
.mosaico[data-forma="lente"] [data-numero]::before { content: counter(lente, decimal-leading-zero); }
.js .mosaico[data-forma="lente"] .reveal.in .indicatori__punto { animation: battito .8s var(--esce) both; animation-delay: calc(.3s + var(--i, 0) * 120ms); }
@keyframes battito { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.mosaico[data-forma="lente"] .titoletto { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); font-size: 17px; }
.mosaico[data-forma="lente"] .titoletto .icona { flex: none; width: 18px; height: 18px; color: var(--bronzo); }
.mosaico[data-forma="lente"] a:hover .titoletto { color: var(--bronzo-testo); }

/* 5 · per chi lavoriamo: ambientazioni sfalsate col riquadro vero */
.schede[data-forma="ambienti"] > li:nth-child(even) { padding-top: 64px; }
.schede[data-forma="ambienti"] .scheda__foto { overflow: visible; }
.schede[data-forma="ambienti"] .titoletto { display: flex; align-items: center; gap: 8px; margin-top: 108px; font-size: 17px; }
.schede[data-forma="ambienti"] .scheda__foto > .etichetta { top: 10px; right: 10px; bottom: auto; }
.schede[data-forma="ambienti"] .titoletto .icona { width: 20px; height: 20px; color: var(--bronzo); }
[data-riquadro] { position: absolute; left: 14px; bottom: -56px; z-index: 3; width: 42%; padding: 6px; background: var(--fondo); --cornice-rientro: -5px; --cornice-lato: 14px; }
[data-riquadro] img { width: 100%; aspect-ratio: 1; object-fit: cover; }
[data-nota] {
  position: absolute; left: 0; bottom: calc(100% + 6px); display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; background: var(--nota); white-space: nowrap;
  font-size: 12px; line-height: 1.2; font-weight: 600; color: var(--inchiostro);
}
[data-nota] .icona { width: 12px; height: 12px; color: var(--bronzo); stroke-width: 2; }
[data-nostro] { position: relative; }
[data-nostro] > [data-nota] { left: 10px; top: 10px; bottom: auto; z-index: 2; pointer-events: none; }
[data-riquadro] > [data-nota] { left: -5px; top: calc(100% + 12px); bottom: auto; }   /* sotto il riquadro, sul fondo della pagina */
.js .reveal [data-riquadro] { opacity: 0; transform: translate(-10px, 10px); transition: opacity .7s var(--esce) .25s, transform .7s var(--esce) .25s; }
.js .reveal.in [data-riquadro] { opacity: 1; transform: none; }

/* 6 · pareti: la tavola tecnica */
.indicatori[data-forma="tavola"] { align-items: start; }
[data-carta] { position: relative; }
[data-carta]::before { content: ""; position: absolute; inset: 24px -24px -24px 24px; background: url("/assets/img/elementi/griglia-modulare.svg") 0 0 / 400px 400px repeat; opacity: 1; }
[data-carta] .indicatori__foto { position: relative; z-index: 1; }
[data-legenda] { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 20px; align-items: center; margin-top: 24px; }
[data-legenda] .legenda { margin-top: 0; }
.indicatori__disegno[data-forma="grande"] { width: 100%; height: auto; background: none; }
.indicatori__disegno[data-forma="grande"] svg { display: block; width: 100%; height: auto; overflow: visible; }
.indicatori__disegno[data-forma="grande"] path { stroke: var(--bronzo); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .reveal .indicatori__disegno[data-forma="grande"] path { stroke-dashoffset: 1; transition: stroke-dashoffset .9s var(--esce) .3s; }
.js .reveal.in .indicatori__disegno[data-forma="grande"] path { stroke-dashoffset: 0; }
.indicatori__disegno[data-forma="grande"] circle { fill: var(--fondo); stroke: var(--bronzo); stroke-width: 1.5; }
.indicatori__disegno[data-forma="grande"] text { fill: var(--bronzo-testo); font: 700 16px var(--font); text-anchor: middle; }
.indicatori[data-forma="tavola"] + .mosaico[data-forma="riga"] { margin-top: 56px; }
.indicatori[data-forma="tavola"] + .mosaico .indicatori__vera .lavoro__nome { max-width: none; margin-top: 12px; }
@media (min-width: 768px) { .indicatori[data-forma="tavola"] + .mosaico .mosaico__voce:nth-child(n) .lavoro__foto { aspect-ratio: 3 / 2; height: auto; object-fit: cover; } }
.mosaico .indicatori__vera { display: block; max-width: none; margin: 0; }
.js .indicatori[data-forma="tavola"] .reveal.in .indicatori__punto::before { animation: accendi 1.2s var(--esce) both; }
.js .indicatori[data-forma="tavola"] .reveal.in .indicatori__punto:nth-of-type(2)::before { animation-delay: .3s; }
.js .indicatori[data-forma="tavola"] .reveal.in .indicatori__punto:nth-of-type(3)::before { animation-delay: .9s; }
.js .indicatori[data-forma="tavola"] .reveal.in .indicatori__punto:nth-of-type(4)::before { animation-delay: 1.5s; }
.js .indicatori[data-forma="tavola"] .reveal.in .legenda li::before { animation: accendi-legenda 1.2s var(--esce) both; }
.js .indicatori[data-forma="tavola"] .reveal.in .legenda li:nth-child(1)::before { animation-delay: .3s; }
.js .indicatori[data-forma="tavola"] .reveal.in .legenda li:nth-child(2)::before { animation-delay: .9s; }
.js .indicatori[data-forma="tavola"] .reveal.in .legenda li:nth-child(3)::before { animation-delay: 1.5s; }
@keyframes accendi { 0%, 100% { background: var(--fondo); } 30%, 70% { background: var(--bronzo); } }
@keyframes accendi-legenda { 0%, 100% { background: transparent; color: var(--bronzo-testo); } 30%, 70% { background: var(--bronzo); color: var(--bianco); } }

/* 7 · come funziona: numeri grandi e motivo a plance */
.sez--putty[data-motivo="plance"] { background: url("/assets/img/elementi/pattern-plance.svg") right var(--margine) top -110px / 360px auto no-repeat, var(--putty); }
.fasi[data-numeri="grandi"]::before { top: 28px; }
.fasi[data-numeri="grandi"]::after { top: 25px; }
.fasi[data-numeri="grandi"] .fase__num { margin-top: 20px; font-size: 56px; line-height: 1; font-weight: 300; letter-spacing: -.03em; color: var(--bronzo); }
.fasi[data-numeri="grandi"] .fase__titolo { margin-top: 12px; }
.js .fasi[data-numeri="grandi"].reveal .fase__num { opacity: .3; transform: translateY(12px); transition: opacity .6s var(--esce), transform .6s var(--esce); }
.js .fasi[data-numeri="grandi"].reveal.in .fase__num { opacity: 1; transform: none; }
.js .fasi[data-numeri="grandi"] .fase:nth-child(2) .fase__num { transition-delay: .4s; }
.js .fasi[data-numeri="grandi"] .fase:nth-child(3) .fase__num { transition-delay: .75s; }
.js .fasi[data-numeri="grandi"] .fase:nth-child(4) .fase__num { transition-delay: 1.1s; }

/* 8 · chi siamo: le tre cifre e la foto */
.colonne[data-forma="cifre"] { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0; row-gap: 0; margin-top: 34px; }
.colonne[data-forma="cifre"] .colonna { padding: 4px 18px; border-left: 1px solid var(--linea); }
.colonne[data-forma="cifre"] .colonna:first-child { padding-left: 0; border-left: 0; }
.colonne[data-forma="cifre"] [data-cifra] { display: flex; align-items: flex-end; min-height: 64px; margin-top: 14px; font-size: 60px; line-height: 1; font-weight: 300; letter-spacing: -.03em; color: var(--bronzo); }
.colonne[data-forma="cifre"] .colonna:last-child [data-cifra] { font-size: 30px; font-weight: 400; letter-spacing: -.01em; padding-bottom: 6px; }
.colonne[data-forma="cifre"] .testo { margin-top: 8px; font-size: 15px; line-height: 1.4; color: var(--inchiostro); }
.colonne[data-forma="cifre"] + .azioni { margin-top: 30px; gap: 14px 28px; }
.manifesto figure .scheda__foto { display: block; --cornice-rientro: 16px; }
.manifesto figure .lavoro__foto { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.manifesto > .due-col--pari { align-items: center; }
@media (min-width: 1100px) { .manifesto figure { justify-self: end; width: 100%; max-width: 480px; } }
.manifesto .manifesto__frase { font-size: clamp(22px, 1.95vw, 27px); margin-top: 20px; max-width: 30ch; }

/* 9 · domande: l'ambientazione 14 nella colonna ferma, un'icona per domanda */
.domande [data-fisso] > figure.scheda__foto { margin: 28px 0 0; max-width: 440px; --cornice-rientro: 12px; --cornice-lato: 28px; }
.domande [data-fisso] > figure.scheda__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.voce__testa .tessera[data-misura="piccola"] { flex: none; }
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .voce::details-content { height: 0; overflow: clip; transition: height .24s var(--esce), content-visibility .24s allow-discrete; }
  .voce[open]::details-content { height: auto; }
}

/* 10 · contatti: cornice ai canali, icone più grandi, righe che rispondono */
.canali[data-cornice] { --cornice-rientro: -14px -14px -30px; }
.domande [data-fisso] > figure.scheda__foto > .etichetta { right: 20px; bottom: 20px; }
.canale .tessera[data-misura="grande"] .icona { width: 30px; height: 30px; }
a.canale { transition: transform var(--durata) var(--esce); }
@media (hover: hover) { a.canale:hover { transform: translateX(4px); } }

@media (max-width: 1099px) {
  .mosaico[data-forma="francobolli"] img { width: 80px; height: 80px; }
  .mosaico[data-forma="parete"] { grid-template-rows: repeat(2, 240px); }
  .mosaico[data-forma="lente"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schede[data-forma="ambienti"] > li:nth-child(even) { padding-top: 0; }
  [data-legenda] { grid-template-columns: minmax(0, 1fr) 240px; }
}

@media (max-width: 767px) {
  /* testata: tre francobolli e la pillola sulla foto, sopra il pannello */
  .scheda[data-forma="cantieri"] { left: 12px; bottom: 82px; display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; box-shadow: none; }
  .mosaico[data-forma="francobolli"] { gap: 4px; }
  .mosaico[data-forma="francobolli"] img { width: 52px; height: 52px; border: 2px solid var(--fondo); }
  .scheda[data-forma="cantieri"] .link-bronzo { align-self: flex-start; min-height: 44px; white-space: nowrap; padding: 4px 14px; border-radius: 999px; background: var(--fondo); font-size: 13px; line-height: 1.25; text-decoration: none; }
  .scheda[data-forma="cantieri"] .link-bronzo .icona { width: 14px; height: 14px; }
  .apertura:not([data-pagina]) .apertura__foto { --cornice-rientro: 12px 12px 52px; --cornice-lato: 22px; }   /* gli angoli bassi sopra il bordo del pannello */
  .apertura__foto > .etichetta { top: 10px; bottom: auto; }
  .apertura:not([data-pagina]) .apertura__foto > .etichetta { top: 16px; right: 44px; }   /* dentro la cornice, come da computer */
  /* nastro */
  .mosaico[data-forma="nastro"] { margin-top: 28px; padding-block: 22px; }
  .mosaico[data-forma="riga-nastro"] { gap: 6px; padding-right: 6px; }
  .mosaico[data-forma="riga-nastro"] img { width: 150px; height: 112px; }
  /* campionario: righe con la miniatura */
  .servizi[data-forma="campionario"] { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--linea); }
  .servizi[data-forma="campionario"] > li:nth-child(even), .servizi[data-forma="campionario"] > li:last-child:nth-child(odd) { border-left: 0; grid-column: auto; }
  .servizi[data-forma="campionario"] .servizio,
  .servizi[data-forma="campionario"] > li:nth-child(odd) .servizio,
  .servizi[data-forma="campionario"] > li:nth-child(even) .servizio {
    display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 12px 0;
  }
  .servizi[data-forma="campionario"] .scheda__foto { grid-column: 1; grid-row: 1 / span 2; width: 96px; height: 96px; }
  .servizi[data-forma="campionario"] .scheda__foto img { height: 100%; aspect-ratio: auto; }
  .servizi[data-forma="campionario"] [data-aggancio] { grid-column: 1; grid-row: 1 / span 2; align-self: end; width: 96px; }
  .servizi[data-forma="campionario"] [data-aggancio] .tessera { left: auto; right: -6px; top: -22px; width: 28px; height: 28px; }
  .servizi[data-forma="campionario"] [data-aggancio] .tessera .icona { width: 16px; height: 16px; }
  .servizi[data-forma="campionario"] .servizio__nome { grid-column: 2; align-self: end; margin-top: 0; font-size: 17px; }
  .servizi[data-forma="campionario"] .servizio__riga { grid-column: 2; align-self: start; margin-top: 2px; font-size: 15px; line-height: 1.4; }
  .servizi[data-forma="campionario"] > li:nth-child(n) .servizio__freccia { display: none; }   /* tutta la riga è il link: il nome sta su una riga */
  .servizi[data-forma="campionario"] .etichetta { left: 0; right: 0; top: 0; bottom: auto; justify-content: center; max-width: none; padding: 2px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
  /* parete: 2 colonne × 3 righe in 4:5 */
  .sez__testa[data-forma="riga"]:has([data-cifra]) { align-items: flex-start; }
  .sez__testa [data-cifra] { flex-direction: row; align-items: baseline; gap: 10px; text-align: left; }
  .sez__testa [data-cifra] [data-cresce] { font-size: 48px; }
  .sez__testa [data-cifra] > span:last-child { margin-top: 0; }
  .sez__testa [data-cifra]::after { width: 22px; height: 22px; margin: 0; align-self: center; }
  .mosaico[data-forma="parete"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 6px; }
  .mosaico[data-forma="parete"] .mosaico__voce, .mosaico[data-forma="parete"] .mosaico__voce:nth-child(1), .mosaico[data-forma="parete"] .mosaico__voce:nth-child(6) { grid-column: auto; grid-row: auto; }
  .mosaico[data-forma="parete"] .mosaico__voce:nth-child(6) { order: 1; }
  .mosaico[data-forma="parete"] .mosaico__voce:nth-child(n + 2):nth-child(-n + 5) { order: 2; }
  .mosaico[data-forma="parete"] .mosaico__voce:nth-child(1) { order: 0; }
  .mosaico[data-forma="parete"] img { height: auto; aspect-ratio: 4 / 5; }
  [data-targhetta] { left: 6px; bottom: 6px; max-width: calc(100% - 12px); min-height: 28px; padding: 3px 7px; font-size: 12px; }
  [data-targhetta] { display: block; padding: 5px 7px; }
  [data-targhetta] .icona { display: none; }
  [data-targhetta] [data-conta] { margin-left: 3px; }
  .mosaico[data-forma="parete"] + .lavori__azioni .btn { width: 100%; }
  /* la posa da vicino: una riga che scorre col dito */
  .mosaico[data-forma="lente"] {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding: 0 var(--margine) 6px; scroll-padding-inline: var(--margine);
  }
  .mosaico[data-forma="lente"]::-webkit-scrollbar { display: none; }
  .mosaico[data-forma="lente"] > .mosaico__voce { flex: 0 0 220px; scroll-snap-align: start; }
  .indicatori__punto[data-forma="lente"] { width: 44px; height: 44px; margin: -22px 0 0 -22px; background-image: url("/assets/img/elementi/indicatore-dettaglio-chiaro-piccolo.svg"); background-size: 44px 44px; }
  .indicatori__punto[data-forma="lente"]::before { inset: 17px; }
  .mosaico[data-forma="lente"] [data-numero] { margin-top: 12px; font-size: 28px; }
  .mosaico[data-forma="lente"] .titoletto { margin-top: 6px; padding-bottom: 8px; font-size: 15px; }
  /* per chi: le schede scorrono col dito */
  .schede[data-forma="ambienti"] {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding: 0 var(--margine) 6px; scroll-padding-inline: var(--margine);
  }
  .schede[data-forma="ambienti"]::-webkit-scrollbar { display: none; }
  .schede[data-forma="ambienti"] > li { flex: 0 0 240px; scroll-snap-align: start; padding-top: 0; }
  .schede[data-forma="ambienti"] > li:nth-child(even) { padding-top: 0; }
  [data-riquadro] { width: 104px; }
  .schede[data-forma="ambienti"] .titoletto { margin-top: 104px; font-size: 16px; }
  /* pareti */
  [data-carta]::before { display: none; }
  .indicatori[data-forma="tavola"] .indicatori__foto > img { aspect-ratio: 1; }
  .indicatori [data-legenda] { order: 3; grid-template-columns: minmax(0, 1fr); }
  .indicatori [data-legenda] .indicatori__disegno[data-forma="grande"] { max-width: 280px; margin-top: 20px; }
  .indicatori [data-legenda] > .legenda { order: 0; }
  .indicatori[data-forma="tavola"] + .mosaico .indicatori__vera .lavoro__nome { margin-top: 8px; font-size: 14px; }
  .indicatori[data-forma="tavola"] + .mosaico[data-forma="riga"] { margin-top: 32px; }
  /* come funziona */
  .sez--putty[data-motivo="plance"] { background: var(--putty); }
  .fasi[data-numeri="grandi"] .fase { grid-template-columns: 56px minmax(0, 1fr); }
  .fasi[data-numeri="grandi"]::before { left: 28px; top: 28px; }
  .fasi[data-numeri="grandi"]::after { left: 25px; }
  .fasi[data-numeri="grandi"] .fase__num { margin-top: 0; font-size: 36px; }
  /* chi siamo */
  .colonne[data-forma="cifre"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .colonne[data-forma="cifre"] .colonna { padding: 0 10px; }
  .colonne[data-forma="cifre"] .tessera { width: 36px; height: 36px; }
  .colonne[data-forma="cifre"] .tessera .icona { width: 18px; height: 18px; }
  .colonne[data-forma="cifre"] [data-cifra] { min-height: 40px; margin-top: 10px; font-size: 36px; }
  .colonne[data-forma="cifre"] .colonna:last-child [data-cifra] { font-size: 19px; padding-bottom: 4px; }
  .colonne[data-forma="cifre"] .testo { margin-top: 6px; font-size: 13px; }
  .manifesto .manifesto__frase { font-size: 19px; line-height: 1.4; }
  .manifesto .azioni { flex-direction: column; align-items: stretch; gap: 6px; }
  .manifesto .azioni .btn { width: 100%; }
  .manifesto figure .lavoro__foto { aspect-ratio: 3 / 2; }
  /* domande */
  .domande [data-fisso] > figure.scheda__foto { order: 1; max-width: none; margin-top: 4px; }
  .domande [data-fisso] > figure.scheda__foto img { aspect-ratio: 2 / 1; }
  .voce__testa .tessera[data-misura="piccola"] { width: 30px; height: 30px; }
  .occhiello[data-n]::before { padding-left: 34px; }
}

/* ── vita: entrate, movimento, risposte (step 5-bis) ──────────────────── */
@property --scala { syntax: "<number>"; inherits: false; initial-value: 1; }

.apertura__titolo .riga { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.apertura__titolo .riga > span { display: block; }
.js .apertura__titolo .riga > span { animation: sale 1s var(--esce) both; }
.js .apertura__titolo .riga:nth-child(2) > span { animation-delay: .1s; }
.js .apertura__titolo .riga:nth-child(3) > span { animation-delay: .2s; }
.js .apertura__occhiello { animation: affiora .8s var(--esce) both; }
.js .apertura__intro, .js .apertura__azioni { animation: affiora 1s var(--esce) .3s both; }
.js .apertura__azioni { animation-delay: .4s; }
.js .apertura .garanzie { animation: affiora 1s var(--esce) .55s both; }
.apertura__foto img { transform: scale(var(--scala)); }
.js .apertura__foto img { animation: assesta 1.8s var(--esce) both; }
.js .apertura__foto[data-forma] { animation: affiora 1s var(--esce) .25s both; }
@keyframes sale { from { transform: translateY(105%); } to { transform: none; } }
@keyframes affiora { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes assesta { from { --scala: 1.07; } to { --scala: 1; } }

.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .9s var(--esce), transform .9s var(--esce);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-effetto="foto"] {
  opacity: .35; transform: none; clip-path: inset(8% 6% 8% 6%);
  transition: clip-path 1.3s var(--esce), opacity 1s var(--esce);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js .reveal[data-effetto="foto"].in { opacity: 1; clip-path: inset(0 0 0 0); }

/* la traccia del processo si disegna quando arriva */
.js .fasi[data-traccia].reveal::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.4s var(--esce) .2s; }
.js .fasi[data-traccia].reveal.in::before { transform: none; }
.voce[open] .voce__testo { animation: affiora .5s var(--esce) both; }
.js .cookie:not([hidden]) { animation: affiora .6s var(--esce) .8s both; }

/* ── schermi bassi (1280×720): la testata della home resta tutta nella prima schermata ── */
@media (min-width: 768px) and (max-height: 820px) {
  .apertura:not([data-pagina]) .apertura__testa { padding-block: 24px 28px; }
  .apertura:not([data-pagina]) .apertura__titolo { margin-top: 14px; font-size: min(var(--h1-home), 8.6vh); }
  .apertura:not([data-pagina]) .apertura__intro { margin-top: 16px; }
  .apertura:not([data-pagina]) .apertura__azioni { margin-top: 22px; }
  .apertura:not([data-pagina]) .garanzie { margin-top: 24px; }
  .apertura:not([data-pagina]) .garanzia { padding-block: 10px; }
}

/* ── computer piccolo: il numero diventa solo l'icona ─────────────────── */
@media (max-width: 1279px) {
  .menu__tel span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu__tel { justify-content: center; border: 1px solid var(--linea); border-radius: 50%; width: 44px; }
  .menu__contatti { gap: 12px; }
  .menu__voci { gap: clamp(20px, 2.2vw, 30px); }
}

/* ── tablet e computer piccolo: il menu si apre col pulsante ──────────── */
@media (max-width: 1099px) {
  .marchio__logo { width: 168px; }
  .testata__in { display: flex; align-items: center; justify-content: space-between; }
  .menu-apri {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-right: -10px; padding: 0;
    background: none; border: 0; color: var(--inchiostro);
  }
  .menu-apri .icona { width: 28px; height: 28px; }
  .menu-apri .icona--chiudi { display: none; }
  .menu-apri[aria-expanded="true"] .icona--menu { display: none; }
  .menu-apri[aria-expanded="true"] .icona--chiudi { display: block; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch;
    max-height: calc(100dvh - 70px); overflow-y: auto; overscroll-behavior: contain;
    padding: 4px var(--margine) 24px; background: var(--fondo);
    border-bottom: 1px solid var(--linea); box-shadow: 0 18px 30px -24px rgba(20, 24, 31, .35);
  }
  .menu.aperto { display: flex; }
  .menu__voci { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__link {
    flex-direction: column; align-items: flex-start; justify-content: center;
    min-height: 66px; padding-block: 10px; white-space: normal;
    border-bottom: 1px solid var(--linea); background: none;
  }
  .menu__nome { font-size: 18px; font-weight: 600; line-height: 1.3; }
  .menu__riga { display: block; margin-top: 2px; font-size: 14px; font-weight: 400; line-height: 1.35; color: var(--grigio); }
  .menu__link[aria-current="page"] .menu__nome { color: var(--bronzo-testo); }
  .menu__contatti { display: none; }
  .menu__azioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
  .menu__azioni .btn { min-height: 52px; padding: 0 14px; gap: 10px; }
  .menu__nota { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--inchiostro); }
  .menu__nota .icona { width: 18px; height: 18px; color: var(--bronzo); }

  .apertura__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); column-gap: 36px; }
  .due-col { grid-template-columns: 180px minmax(0, 1fr); column-gap: 32px; }
  .due-col--pari { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 48px; }
  
  
  
  
  .fasi, .fasi[data-col="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; row-gap: 44px; }
  .fasi[data-traccia]::before, .fasi[data-traccia]::after { display: none; }
  .piede__alto { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }

  .colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colonne[data-forma="tessere"] .colonna:nth-child(odd) { padding-left: 0; border-left: 0; }
  .colonne[data-forma="tessere"] .colonna:nth-child(n + 3) { border-top: 1px solid var(--linea); }
  .schede { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schede[data-forma="indice"] {
    display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .schede[data-forma="indice"]::-webkit-scrollbar { display: none; }
  .schede[data-forma="indice"] > li { flex: 0 0 116px; }
  .indicatori { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
}

/* ── telefono ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root { --testata-h: 78px; --testata-solida: 67px; --corpo: 17px; --attacco: 17px; }
  
  
  .testata__in { min-height: var(--testata-h); padding-block: 10px; }
  .testata.solida .testata__in { min-height: 66px; padding-block: 8px; }
  .marchio__logo { width: 128px; }
  .testata.solida .marchio__logo { width: 108px; }
  .menu { max-height: calc(100dvh - 66px); }

  .occhiello { font-size: 12px; letter-spacing: .14em; gap: 10px; }
  .occhiello::before { width: 24px; background-size: 24px 8px; }
  .titolo{ font-size: 30px; line-height: 1.12; letter-spacing: -.015em; }
  .occhiello + .titolo { margin-top: 12px; }
  .attacco { margin-top: 14px; }
  .testo { margin-top: 12px; }

  /* testata: prima la foto, poi il pannello che sale di 40 px */
  .apertura__griglia { grid-template-columns: minmax(0, 1fr); padding-left: 0; min-height: 0; }
  .apertura__foto { order: -1; height: 260px; min-height: 0; }
  .apertura[data-pagina] .apertura__foto { height: 200px; }
  .apertura__testa {
    position: relative; z-index: 1; align-self: start;
    margin: -40px var(--margine) 0 0; padding: 22px 0 0 var(--margine);
    background: var(--fondo);
  }
  .apertura__occhiello { font-size: 13px; letter-spacing: .12em; }
  .apertura__occhiello .icona { width: 16px; height: 16px; }
  .apertura__occhiello::after { width: 28px; background-size: 28px 8px; }
  .apertura__occhiello[data-briciole] { font-size: 12px; letter-spacing: .08em; }
  .apertura__occhiello[data-briciole] a { min-height: 44px; }
  .apertura__titolo { margin-top: 12px; font-size: clamp(34px, 9.6vw, 40px); line-height: 1.02; }
  .apertura[data-pagina] .apertura__titolo { margin-top: 6px; font-size: 34px; line-height: 1.08; }
  .apertura[data-pagina] .apertura__titolo .riga, .apertura[data-pagina] .apertura__titolo .riga > span { display: inline; }
  .apertura[data-pagina] .apertura__titolo .riga { overflow: visible; padding: 0; margin: 0; }
  .js .apertura[data-pagina] .apertura__titolo .riga > span { animation: none; }
  .js .apertura[data-pagina] .apertura__titolo { animation: affiora .9s var(--esce) both; }
  .apertura__intro { margin-top: 14px; font-size: 17px; }
  .apertura[data-pagina] .apertura__intro { font-size: 16px; letter-spacing: -.005em; }
  .apertura__azioni { margin-top: 20px; flex-direction: column; align-items: stretch; gap: 4px; }
  .apertura__azioni .btn { width: 100%; }
  .apertura__azioni .btn--contorno { min-height: 44px; border: 0; background: none; color: var(--bronzo-testo); text-decoration: underline; text-decoration-color: rgba(140, 109, 53, .45); text-underline-offset: 6px; }
  .apertura__azioni .btn--contorno .icona { color: var(--bronzo-testo); }
  .garanzie { margin-top: 18px; }
  .garanzia { gap: 10px; padding: 11px 10px 11px 0; font-size: 15px; line-height: 1.3; }
  .garanzie:not([data-col]) .garanzia:nth-child(even) { padding: 11px 0 11px 10px; }
  .garanzia .tessera { width: 38px; height: 38px; }
  .garanzia .tessera .icona { width: 20px; height: 20px; }
  .garanzie[data-col="3"] { grid-template-columns: minmax(0, 1fr); }
  .garanzie[data-col="3"] .garanzia, .garanzie[data-col="3"] .garanzia:first-child { flex-direction: row; align-items: center; gap: 12px; padding: 9px 0; border-left: 0; }
  .apertura[data-pagina="testo"] .apertura__testa, .apertura[data-pagina="contatti"] .apertura__testa { margin: 0; padding: 26px var(--margine) 0; }
  .apertura__foto[data-forma="mosaico"] { height: 200px; }
  .apertura__foto[data-forma="mosaico"] .mosaico { grid-template-rows: minmax(0, 1fr); gap: 3px; }
  .apertura__foto[data-forma], .apertura[data-pagina] .apertura__foto[data-forma="scheda"] { order: 0; height: auto; padding: 28px var(--margine) 0; }
  .apertura__foto[data-forma="mosaico"] { order: -1; padding: 0; }
  .apertura__foto[data-forma="mosaico"] .mosaico__voce:nth-child(n + 3) { display: none; }

  .due-col, .due-col--pari { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  
  
  
  .manifesto__frase { max-width: none; font-size: 18px; line-height: 1.4; letter-spacing: -.01em; }

  
  .elenco { margin-top: 28px; }
  .voce__testa { min-height: 58px; padding: 14px 0; font-size: 17px; gap: 14px; }
  
   .voce__piu, .voce__meno { width: 22px; height: 22px; stroke-width: 1.9; }
  .voce__testo { padding-right: 8px; }
  .domande .voce__nome { font-size: 17px; }

  
  
  
  
  
  

  
  
  
  

  
  
  
  
  .lavoro__nome { margin-top: 10px; font-size: 15px; }
  .mosaico[data-griglia] .lavoro__nome { font-size: 15px; line-height: 1.4; }
  .mosaico[data-griglia] > [data-larga] .lavoro__foto { aspect-ratio: 3 / 2; }
  
  .lavori__azioni { margin-top: 24px; gap: 8px 24px; }

  .fasi, .fasi[data-col="4"] { grid-template-columns: minmax(0, 1fr); row-gap: 34px; margin-top: 24px; }
  .fase__num { font-size: 31px; }
  
  .fase .testo { margin-top: 10px; }
  .metodo__azioni { margin-top: 34px; }
  /* traccia verticale */
  .fasi[data-traccia] { row-gap: 0; margin-top: 0; }
  .fasi[data-traccia]::before { display: block; left: 22px; right: auto; top: 22px; bottom: 30px; width: 1px; height: auto; }
  .fasi[data-traccia]::after { display: block; left: 19px; right: auto; top: auto; bottom: 26px; }
  .js .fasi[data-traccia].reveal::before { transform: scaleY(0); transform-origin: center top; }
  .fasi[data-traccia] .fase { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding-bottom: 30px; }
  .fasi[data-traccia] .tessera { grid-row: 1 / span 4; }
  .fasi[data-traccia] .fase__num { margin-top: 0; }

  .fascia__sfondo { object-position: 70% 0; }
  .fascia::before { background: linear-gradient(90deg, rgba(236, 231, 223, .94) 0%, rgba(236, 231, 223, .74) 60%, rgba(236, 231, 223, .1) 100%); }
  .fascia__in { padding: 56px 0 58px; }
  .fascia__testo { margin-top: 14px; font-size: 17px; }
  
  .fascia .metodo__azioni { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 10px; }

  /* piè: una colonna; le liste dei pavimenti e delle pagine su due colonne */
  .piede { padding: 52px 0 96px; }
  .piede__alto { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-bottom: 22px; }
  .piede__marchio { padding-bottom: 26px; }
  .piede__marchio .marchio__logo { width: 130px; }
  .piede__wa { width: 100%; min-height: 52px; }
  .piede__col { border-top: 1px solid var(--linea); }
  .piede__titolo { min-height: 56px; margin-bottom: 0; }
  summary.piede__titolo { cursor: pointer; }
  details.piede__col .piede__titolo .icona--piu { display: block; }
  details.piede__col[open] .piede__titolo .icona--piu { display: none; }
  details.piede__col[open] .piede__titolo .icona--meno { display: block; }
  .piede__lista { padding-bottom: 14px; columns: 2; column-gap: 20px; }
  .piede__lista li { break-inside: avoid; }
  .piede__lista a, .piede__contatti a, .piede__contatti p { min-height: 44px; }
  .piede__contatti { padding-bottom: 8px; }
  .piede__basso { column-gap: 24px; padding-top: 8px; }
  .piede__basso a { min-width: 44px; justify-content: center; }

  .wa-fisso {
    display: inline-flex; position: fixed; right: 14px; bottom: 14px; z-index: 55;
    min-height: 48px; padding: 0 18px 0 16px; gap: 8px; font-size: 15px; border-radius: 999px;
    box-shadow: 0 10px 26px -12px rgba(20, 24, 31, .6);
    transform: translateY(160%); opacity: 0; pointer-events: none;
    transition: transform .4s var(--esce), bottom .3s var(--esce), opacity .3s;
  }
  .wa-fisso .icona { width: 20px; height: 20px; }
  .wa-fisso.vis, .no-js .wa-fisso { transform: none; opacity: 1; pointer-events: auto; }
  .con-cookie .wa-fisso { bottom: 68px; }

  .cookie { justify-content: space-between; gap: 10px; padding: 4px 8px 4px 14px; font-size: 12px; }
  

  /* componenti nuovi da telefono */
  .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servizi > li:not(:nth-child(3n + 1)) { border-left: 0; }
  .servizi > li:nth-child(even) { border-left: 1px solid var(--linea); }
  .servizio, .servizi > li:nth-child(3n + 1) .servizio, .servizi > li:nth-child(3n) .servizio { padding: 20px 14px 22px; }
  .servizi > li:nth-child(odd) .servizio { padding-left: 0; }
  .servizi > li:nth-child(even) .servizio { padding-right: 0; }
  .servizi > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .servizio__nome { margin-top: 12px; font-size: 17px; }
  .servizio__riga { padding-right: 0; font-size: 13px; line-height: 1.45; }
  .servizi > li:nth-child(odd) .servizio { padding-left: 0; padding-right: 10px; }
  .servizi > li:nth-child(even) .servizio { padding-left: 10px; padding-right: 0; }
  .servizi > li:last-child:nth-child(odd) .servizio { padding-right: 0; }
  .servizio__freccia, .servizi > li:nth-child(3n) .servizio__freccia { position: static; margin-top: 10px; }
  .servizi:not([data-forma]) { grid-template-columns: minmax(0, 1fr); }
  .servizi:not([data-forma]) > li, .servizi:not([data-forma]) > li:nth-child(even) { border-left: 0; }
  .servizi:not([data-forma]) .servizio, .servizi:not([data-forma]) > li:nth-child(odd) .servizio, .servizi:not([data-forma]) > li:nth-child(even) .servizio {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; column-gap: 14px; align-items: center; padding: 16px 0;
  }
  .servizi:not([data-forma]) .tessera { grid-row: 1 / span 2; align-self: start; }
  .servizi:not([data-forma]) .servizio__nome { grid-column: 2; margin-top: 0; }
  .servizi:not([data-forma]) .servizio__riga { grid-column: 2; margin-top: 2px; font-size: 15px; line-height: 1.45; }
  .servizi:not([data-forma]) .servizio__freccia { grid-column: 3; grid-row: 1 / span 2; margin: 0; }

  .colonne, .colonne[data-col="3"], .colonne[data-col="2"] { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .colonne[data-col="4"] { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .colonne[data-col="4"] .colonna { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .colonne[data-col="4"] .colonna .tessera { grid-row: span 2; }
  .colonne[data-col="4"] .colonna .titoletto { margin-top: 0; }
  .colonne[data-col="4"] .colonna .testo { margin-top: 2px; }
  .colonna .titoletto { margin-top: 12px; }
  .colonna .testo { font-size: 17px; }
  .colonne[data-forma="tessere"] { grid-template-columns: minmax(0, 1fr); }
  .colonne[data-forma="tessere"] .colonna, .colonne[data-forma="tessere"] .colonna:nth-child(odd) { padding: 20px 0 22px; border-left: 0; }
  .colonne[data-forma="tessere"] .colonna + .colonna { border-top: 1px solid var(--linea); }

  .schede, .schede[data-col="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .schede[data-col="2"] { grid-template-columns: minmax(0, 1fr); gap: 28px; }

  .scheda .titoletto { margin-top: 12px; }
  .scheda .testo { font-size: 15px; }

  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .mosaico__voce:first-child { grid-column: 1 / -1; grid-row: auto; }
  .mosaico__voce:first-child .lavoro__foto { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .mosaico[data-forma="quattro"] .mosaico__voce:first-child, .mosaico[data-forma="lente"] .mosaico__voce:first-child { grid-column: auto; }
  .mosaico[data-forma="tre"] { gap: 10px; }
  .mosaico[data-forma="tre"] [data-pila] { gap: 12px; }
  .mosaico[data-forma="tre"] .mosaico__voce:first-child { grid-column: auto; }
  .mosaico[data-forma="tre"] > .mosaico__voce .lavoro__foto { height: 100%; aspect-ratio: auto; }
  .mosaico[data-forma="riga"] { gap: 16px 10px; }
  .mosaico[data-forma="riga"][data-col="2"] .mosaico__voce:first-child { grid-column: auto; }
  .apertura[data-pagina="mosaico"] .apertura__foto[data-forma="mosaico"] { height: 260px; }
  .elenco[data-forma="dettagli"] { columns: 1; }
  .elenco[data-forma="dettagli"] .voce { gap: 14px; }
  .elenco[data-forma="dettagli"] .lavoro__apri, .elenco[data-forma="dettagli"] .lavoro__foto { width: 80px; height: 80px; }
  .elenco[data-forma="dettagli"] .voce__nome { font-size: 16px; }
  .indicatori__vera { grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .indicatori__vera .lavoro__nome { max-width: none; }

  .indicatori__punto { width: 52px; height: 52px; margin: -26px 0 0 -26px; background-size: 52px 52px; font-size: 13px; }
  .indicatori__punto::before { inset: 14px; }
  .legenda li { gap: 14px; padding: 14px 0; font-size: 16px; }

  .checklist li { min-height: 58px; font-size: 16px; }
  .canale { gap: 14px; min-height: 76px; }
  .canali[data-forma="scheda"] { padding: 18px 18px 24px; }

  table[data-confronto], table[data-confronto] tbody, table[data-confronto] tr, table[data-confronto] th, table[data-confronto] td { display: block; }
  table[data-confronto] thead { display: none; }
  table[data-confronto] tr { padding: 18px 0 14px; border-bottom: 1px solid var(--linea); }
  table[data-confronto] th, table[data-confronto] td { padding: 0; border: 0; }
  table[data-confronto] tbody th { margin-bottom: 8px; white-space: normal; }
  table[data-confronto] td { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; padding: 4px 0; font-size: 16px; }
  table[data-confronto] td::before { content: attr(data-etichetta); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bronzo-testo); padding-top: 2px; }

  .azioni[data-filtri], .azioni[data-scorciatoie] {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine);
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
    mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .azioni[data-filtri]::-webkit-scrollbar, .azioni[data-scorciatoie]::-webkit-scrollbar { display: none; }
  .azioni[data-filtri] .btn--contorno, .azioni[data-scorciatoie] .btn--contorno { flex: none; min-height: 44px; }
  .azioni[data-indice] { padding-block: 8px; }
}

@media (max-width: 380px) {
  .cookie { gap: 6px; padding: 4px 6px 4px 10px; font-size: 11px; }
  .menu__azioni { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-pista] { animation: none !important; }
  .mosaico[data-forma="nastro"] { overflow-x: auto; scrollbar-width: none; }
  [data-pista] > [aria-hidden="true"] { display: none; }
  .js .reveal[data-effetto="sale"] > * { clip-path: none; }
  .js .reveal [data-riquadro], .js .fasi[data-numeri="grandi"].reveal .fase__num { opacity: 1; transform: none; }
  .js .scheda[data-forma="cantieri"], .js .mosaico[data-forma="francobolli"] .mosaico__voce { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .reveal, .js .reveal[data-effetto="foto"] { opacity: 1; transform: none; clip-path: none; }
   .js .fasi[data-traccia].reveal::before { transform: none; }
  .js .apertura__titolo .riga > span, .js .apertura__intro, .js .apertura__azioni, .js .apertura__occhiello,
  .js .apertura .garanzie, .js .apertura__foto img, .js .apertura__foto[data-forma], .js .cookie:not([hidden]) { animation: none; }
  .testata.via { transform: none; }
  .fascia__sfondo { transform: scale(1.14); }
}

/* ── pagine interne (6-bis): solo i pezzi della home, varianti con attributi ── */
.due-col--pari[data-verso="inverso"] { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
.due-col--pari[data-verso="inverso"] > :first-child { order: 2; }


.fasi[data-col="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 32px; }
.fasi[data-col="5"] .fase__titolo { font-size: 19px; }
.lavoro__apri {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit;
  cursor: zoom-in; overflow: hidden;
}
span.lavoro__apri { cursor: default; }
.lavoro__apri img { transition: transform .8s var(--esce); }
@media (hover: hover) { .lavoro__apri:hover img { transform: scale(1.04); } }
.lavoro__apri:focus-visible { outline-offset: 3px; }

/* galleria a griglia (la riga dei lavori, ferma): mai una riga con una foto sola, lo regola main.js */
.mosaico[data-griglia] {
  grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px;
  width: min(var(--contenitore), 100% - 2 * var(--margine)); margin-inline: auto;
}
.mosaico[data-griglia] > .mosaico__voce, .mosaico[data-griglia] > .mosaico__voce:first-child { grid-column: span 4; grid-row: auto; }
.mosaico[data-griglia][data-col="4"] > .mosaico__voce { grid-column: span 3; }
.mosaico[data-griglia] > .mosaico__voce[hidden] { display: none; }
.mosaico[data-griglia] .lavoro__foto, .mosaico[data-griglia] .mosaico__voce:first-child .lavoro__foto { height: auto; min-height: 0; aspect-ratio: 4 / 3; }

.lavori .azioni[data-filtri] + * { margin-top: 0; }
.lavori .wrap + .mosaico[data-griglia] { margin-top: 36px; }

/* visore delle foto */
.visore {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--grafite); color: var(--bianco); overscroll-behavior: contain;
}
.visore[open] { display: flex; align-items: center; justify-content: center; }
.visore::backdrop { background: rgba(20, 24, 31, .7); }
.visore__figura { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: min(1400px, 100vw - 160px); }
.visore__foto { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 160px); object-fit: contain; touch-action: pan-y; }
.visore__didascalia { max-width: 64ch; font-size: 15px; line-height: 1.5; text-align: center; color: rgba(255, 255, 255, .86); }
.visore__conta { position: absolute; top: 24px; left: 28px; margin: 0; font-size: 13px; letter-spacing: .08em; color: rgba(255, 255, 255, .7); }
.visore__chiudi {
  position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: none; color: var(--bianco);
}
.visore__chiudi .icona { width: 20px; height: 20px; }
.visore .frecce__btn { position: absolute; top: 50%; transform: translateY(-50%); color: var(--bianco); border-color: rgba(255, 255, 255, .35); }
.visore .frecce__btn:hover { background: rgba(255, 255, 255, .1); border-color: var(--bianco); }
.visore .frecce__btn:active { transform: translateY(-50%) scale(.95); }
.visore__prec { left: 20px; }
.visore__succ { right: 20px; }
.visore__chiudi:focus-visible, .visore .frecce__btn:focus-visible { outline-color: var(--bianco); }
.js .visore[open] .visore__foto { animation: affiora .35s var(--esce) both; }

@media (max-width: 1099px) {
  .due-col--pari[data-verso="inverso"] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .fasi[data-col="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .due-col--pari[data-verso="inverso"] { grid-template-columns: minmax(0, 1fr); }
  .due-col--pari[data-verso="inverso"] > :first-child { order: 0; }
  
  
  
  
  
  
  
  .fasi[data-col="5"] { grid-template-columns: minmax(0, 1fr); }
  .mosaico[data-griglia] { width: calc(100% - 24px); gap: 18px 8px; }
  .mosaico[data-griglia] > .mosaico__voce, .mosaico[data-griglia] > .mosaico__voce:first-child, .mosaico[data-griglia][data-col="4"] > .mosaico__voce { grid-column: span 6; }
  
  .lavori .wrap + .mosaico[data-griglia] { margin-top: 22px; }
  .visore__figura { max-width: 100vw; padding-inline: 8px; }
  .visore__foto { max-height: calc(100dvh - 190px); }
  .visore .frecce__btn { top: auto; bottom: 22px; transform: none; }
  .visore .frecce__btn:active { transform: scale(.95); }
  .visore__prec { left: calc(50% - 60px); }
  .visore__succ { right: calc(50% - 60px); }
  .visore__didascalia { padding-inline: 14px; font-size: 14px; }
}
main > .sez:last-child { padding-bottom: clamp(56px, 7vw, 104px); }

/* ── collaudo (step 7): righe, tocchi, menu ───────────────────────────── */
h1, h2, h3, .apertura__titolo .riga > span, .manifesto__frase, figcaption { text-wrap: balance; }
p, .voce__nome { text-wrap: pretty; }

/* menu aperto da telefono: un velo sotto il pannello prende il tocco (non attiva quello che c'è sotto) */
@media (max-width: 1099px) {
  .menu.aperto::after {
    content: ""; position: fixed; left: 0; right: 0; bottom: 0; top: 0; z-index: -1;
    background: rgba(20, 24, 31, .28);
  }
}
/* senza JavaScript: niente pulsante, le voci del menu restano visibili */
.no-js body { padding-top: 0; }
.no-js .testata { position: static; }
@media (max-width: 1099px) {
  .no-js .menu-apri { display: none; }
  .no-js .testata__in { flex-wrap: wrap; }
  .no-js .menu {
    display: flex; position: static; flex-direction: column; align-items: flex-start;
    width: 100%; max-height: none; padding: 0 0 10px; background: none; border: 0; box-shadow: none;
  }
  .no-js .menu__voci { flex-direction: row; flex-wrap: wrap; gap: 0 20px; }
  .no-js .menu__link { min-height: 44px; border: 0; padding: 0; }
  .no-js .menu__nome { font-size: 15px; }
  .no-js .menu__riga { display: none; }
  .no-js .menu__azioni { display: none; }
  .no-js .menu__contatti { display: flex; margin-top: 6px; }
}
.piede__lista a { min-width: 44px; }

/* ── sotto i 375 px, dopo le regole del telefono (audit home ricca 10/10) ── */
@media (max-width: 374px) {
  .garanzie:not([data-col]) .garanzia, .garanzie:not([data-col]) .garanzia:nth-child(even) { padding: 8px 0; border-left: 0; }
  .servizi[data-forma="campionario"] .servizio__riga { font-size: 14px; }
  .servizi[data-forma="campionario"] .servizio__nome { font-size: 16px; }
  .indicatori[data-forma="tavola"] + .mosaico .lavoro__nome .icona { display: none; }
}

/* «Pareti»: tra 768 e 1365 px il disegno a 240 px, così la legenda resta su 1-2 righe (audit 2) */
@media (min-width: 768px) and (max-width: 1365px) {
  [data-legenda] { grid-template-columns: minmax(0, 1fr) 240px; }
}

/* ── struttura nuova (10/10): varianti delle pagine interne, coi pezzi della home ── */
/* Lavori · dove lavoriamo: quattro ambienti, due foto vere ciascuno */
.colonne[data-forma="dove"] { column-gap: 56px; row-gap: 0; }
.colonne[data-forma="dove"] .colonna { padding: 30px 0 34px; border-top: 1px solid var(--linea); }
.colonne[data-forma="dove"] .titoletto { margin-top: 14px; font-size: clamp(19px, 1.6vw, 22px); }
.colonne[data-forma="dove"] .testo { margin-top: 6px; }
.colonne[data-forma="dove"] .mosaico { margin-top: 20px; }
.colonne[data-forma="dove"] .azioni { margin-top: 14px; }
/* Chi siamo · il metodo: i titoli sono frasi col verbo */
.colonne[data-forma="metodo"] .titoletto { font-size: 19px; line-height: 1.3; }
/* Contatti · cosa mandarci nel primo messaggio: la voce e, sotto, la sua frase */
.checklist[data-forma="frasi"] li { align-items: flex-start; padding: 16px 0; }
.checklist[data-forma="frasi"] li::after { margin-top: 11px; }
.checklist[data-forma="frasi"] .titoletto { margin: 0; font-size: 18px; line-height: 1.35; }
.checklist[data-forma="frasi"] .testo { margin-top: 3px; font-size: 16px; line-height: 1.5; color: var(--grigio); }
/* Pavimenti · tra pavimento e parete: il raccordo spiegato per intero */
.indicatori[data-forma="raccordo"] { margin-top: clamp(56px, 7vw, 96px); }
.indicatori[data-forma="raccordo"] .titoletto { margin: 0; font-size: 22px; line-height: 1.3; }
.indicatori[data-forma="raccordo"] .titoletto + .attacco { margin-top: 12px; }
.indicatori[data-forma="raccordo"] .indicatori__disegno { margin-top: 18px; }
.indicatori[data-forma="raccordo"] + .azioni { margin-top: 32px; }
/* home · contatti: «Apri in Google Maps» e «Vai alla pagina Contatti» sotto i canali */
.canali .azioni[data-forma="link"] { margin-top: 14px; gap: 10px 28px; }
.canali .azioni[data-forma="link"] .link-bronzo { margin-top: 0; }
@media (max-width: 767px) {
  .colonne[data-forma="dove"] .colonna { padding: 24px 0 28px; }
  .indicatori[data-forma="raccordo"] > div > .titoletto { order: 1; font-size: 19px; }
  .indicatori[data-forma="raccordo"] > div > .indicatori__disegno { order: 3; }
  .checklist[data-forma="frasi"] .titoletto { font-size: 17px; }
  .checklist[data-forma="frasi"] .testo { font-size: 15px; }
}
@media (max-width: 374px) {
  .apertura[data-pagina] .apertura__titolo { font-size: 31px; }
  .colonne[data-forma="dove"] .lavoro__nome { font-size: 13px; }
}

/* ── audit della struttura (10/10) ─────────────────────────────────────── */
/* d · righe senza parole sole; la freccia del link attaccata all'ultima parola */
.link-bronzo { text-wrap: pretty; }
.attacco, .fase .testo { text-wrap: balance; }
.link-bronzo [data-coda] { white-space: nowrap; }
.link-bronzo [data-coda] .icona { margin-left: 8px; vertical-align: -4px; }
.scheda[data-forma="cantieri"] .link-bronzo { display: inline-block; }
@media (max-width: 767px) { .scheda[data-forma="cantieri"] .link-bronzo { padding: 12px 14px; line-height: 20px; } }
/* c · visore con una foto sola: niente frecce né contatore */
.visore[data-sola] .visore__prec, .visore[data-sola] .visore__succ, .visore[data-sola] .visore__conta { display: none; }
/* home · § 6 il riassunto delle pareti: testo a sinistra, le due foto vere grandi a destra */
.due-col[data-forma="riassunto"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: clamp(40px, 5vw, 72px); align-items: center; }
.due-col[data-forma="riassunto"] .mosaico { gap: 20px; }
.due-col[data-forma="riassunto"] .indicatori__vera .lavoro__nome { max-width: none; margin-top: 12px; }
/* home · § 5 dove lavoriamo e § 8 la riga dei clienti */
.sez__testa + .schede[data-forma="ambienti"] { margin-top: 48px; }
.manifesto__frase + .testo { margin-top: 16px; font-size: 17px; color: var(--inchiostro); }
/* Pavimenti · il raccordo a sguscio: foto coi tre punti, legenda, disegno e la foto vera */
.due-col[data-forma="raccordo"] { margin-top: clamp(56px, 7vw, 96px); align-items: start; }
.scheda__foto[data-forma="ritratto"] { margin: 0; }
.scheda__foto[data-forma="ritratto"] > img { aspect-ratio: 4 / 5; }
.due-col[data-forma="raccordo"] .titoletto { margin: 0; font-size: 22px; line-height: 1.3; }
.due-col[data-forma="raccordo"] .titoletto + .attacco { margin-top: 12px; }
.checklist[data-forma="legenda"] { counter-reset: legenda; margin-top: 26px; }
.checklist[data-forma="legenda"] li { min-height: 0; padding: 14px 0; font-weight: 600; }
.checklist[data-forma="legenda"] li::before {
  counter-increment: legenda; content: counter(legenda);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px; border: 1px solid var(--bronzo); border-radius: 50%;
  font-size: 13px; font-weight: 700; color: var(--bronzo-testo); transition: background var(--durata), color var(--durata);
}
.checklist[data-forma="legenda"] li.attivo::before { background: var(--bronzo); color: var(--bianco); }
[data-disegno] { display: block; width: 160px; height: 120px; margin-top: 18px; background: url("/assets/img/elementi/raccordo-curvo.svg") left bottom / contain no-repeat; }
/* Lavori · i dettagli della posa: i sei ritagli della home, grandi, ognuno accanto alla sua frase */
.mosaico[data-forma="dettagli"] { grid-template-columns: minmax(0, 1fr); gap: 0; counter-reset: lente; }
.mosaico[data-forma="dettagli"] > .mosaico__voce, .mosaico[data-forma="dettagli"] > .mosaico__voce:first-child {
  grid-row: auto; grid-column: auto; display: grid; grid-template-columns: 420px minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center;
  padding: 36px 0; border-top: 1px solid var(--linea); counter-increment: lente;
}
@media (min-width: 768px) { .mosaico[data-forma="dettagli"] > .mosaico__voce > div { width: min(100%, 440px); } }
/* righe pari: il ritaglio a destra */
.mosaico[data-forma="dettagli"] > .mosaico__voce:nth-child(even) { grid-template-columns: minmax(0, 1fr) 420px; }
.mosaico[data-forma="dettagli"] > .mosaico__voce:nth-child(even) > .lavoro__apri { grid-column: 2; grid-row: 1; }
.mosaico[data-forma="dettagli"] > .mosaico__voce:nth-child(even) > div { grid-column: 1; grid-row: 1; justify-self: end; }
.mosaico[data-forma="dettagli"] .lavoro__apri { display: block; width: 100%; }
.mosaico[data-forma="dettagli"] .scheda__foto img { aspect-ratio: 1; object-fit: cover; }
.mosaico[data-forma="dettagli"] [data-numero] { display: block; font-size: 32px; line-height: 1; font-weight: 300; letter-spacing: -.02em; color: var(--bronzo); font-variant-numeric: tabular-nums; }
.mosaico[data-forma="dettagli"] [data-numero]::before { content: counter(lente, decimal-leading-zero); }
.mosaico[data-forma="dettagli"] .titoletto { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 22px; line-height: 1.3; }
.mosaico[data-forma="dettagli"] .titoletto .icona { flex: none; width: 20px; height: 20px; color: var(--bronzo); }
.mosaico[data-forma="dettagli"] .testo { margin-top: 8px; font-size: 18px; line-height: 1.55; color: var(--grigio); }
.indicatori__punto[data-forma="lente"] { pointer-events: none; }
/* Chi siamo · i punti fermi: righe con l'icona, il testo e il link alla scheda */
.colonne[data-forma="metodo"] { grid-template-columns: minmax(0, 1fr); row-gap: 0; margin-top: 28px; border-top: 1px solid var(--linea); }
.colonne[data-forma="metodo"] .colonna { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--linea); }
.colonne[data-forma="metodo"] .titoletto { margin-top: 8px; }
.colonne[data-forma="metodo"] .link-bronzo { margin-top: 2px; font-size: 15px; }
@media (min-width: 768px) and (max-width: 1099px) {
  /* il ritaglio resta più grande di quello della home (2 colonne a questa larghezza) */
  .mosaico[data-forma="dettagli"] > .mosaico__voce, .mosaico[data-forma="dettagli"] > .mosaico__voce:first-child { grid-template-columns: min(470px, 52%) minmax(0, 1fr); column-gap: 40px; }
  .mosaico[data-forma="dettagli"] > .mosaico__voce:nth-child(even) { grid-template-columns: minmax(0, 1fr) min(470px, 52%); }
  .mosaico[data-forma="dettagli"] .titoletto { font-size: 20px; }
  .mosaico[data-forma="dettagli"] .testo { font-size: 17px; }
}
@media (max-width: 767px) {
  .due-col[data-forma="riassunto"] { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .due-col[data-forma="riassunto"] .mosaico { gap: 12px; }
  .due-col[data-forma="riassunto"] .mosaico__voce:first-child { grid-column: auto; }
  .due-col[data-forma="raccordo"] .titoletto { font-size: 19px; }
  /* i dettagli: una riga che scorre col dito, come «La posa da vicino» della home */
  .mosaico[data-forma="dettagli"] {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--margine)); padding: 0 var(--margine) 6px; scroll-padding-inline: var(--margine);
  }
  .mosaico[data-forma="dettagli"]::-webkit-scrollbar { display: none; }
  .mosaico[data-forma="dettagli"] > .mosaico__voce, .mosaico[data-forma="dettagli"] > .mosaico__voce:first-child {
    display: block; flex: 0 0 240px; scroll-snap-align: start; padding: 0; border-top: 0;
  }
  .mosaico[data-forma="dettagli"] [data-numero] { margin-top: 12px; font-size: 28px; }
  .mosaico[data-forma="dettagli"] .titoletto { margin-top: 6px; font-size: 17px; }
  .mosaico[data-forma="dettagli"] .testo { margin-top: 6px; font-size: 15px; line-height: 1.5; }
  .mosaico[data-forma="dettagli"] .indicatori__punto[data-forma="lente"] { width: 44px; height: 44px; margin: -22px 0 0 -22px; background-image: url("/assets/img/elementi/indicatore-dettaglio-chiaro-piccolo.svg"); background-size: 44px 44px; }
  .mosaico[data-forma="dettagli"] .indicatori__punto[data-forma="lente"]::before { inset: 17px; }
}
@media (max-width: 374px) {
  .mosaico[data-griglia] .lavoro__nome { font-size: 13px; }
}