/* Nova Ristrutturazioni · landing · «Il cantiere vivo» (REDESIGN-SPEC 03/10/2026)
   Strati: reset → sistema (token, tipografia) → componenti → sezioni → movimento.
   Gli stati iniziali nascosti esistono SOLO sotto html.mv (primo.js): senza JS o con
   «riduci movimento» la pagina è tutta visibile, nello stato finale. */

@font-face {
  font-family: "Gelasio";
  src: url("../fonts/gelasio-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Gelasio";
  src: url("../fonts/gelasio-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* riserve con le metriche di Archivo (misurate: larghezza media 99,03% di Arial, ascesa 878, discesa 210) */
@font-face {
  font-family: "Archivo Riserva";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Helvetica Neue");
  size-adjust: 99.03%; ascent-override: 88.66%; descent-override: 21.21%; line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Riserva Android";
  src: local("Roboto");
  size-adjust: 101%; ascent-override: 86.93%; descent-override: 20.79%; line-gap-override: 0%;
}

@layer reset, sistema, componenti, sezioni, movimento;

/* =========================================================== RESET */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  img, video, svg, picture { display: block; max-width: 100%; }
  img { height: auto; }
  button, input { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; }
  [hidden] { display: none !important; }
}

/* =========================================================== SISTEMA */
@layer sistema {
  :root {
    /* palette (tabella 1.1) */
    --antracite: #20282D;
    --antracite-profondo: #171D20;
    --antracite-rilievo: #2A3338;
    --linea-scuro: #3A454B;
    --ambra: #FFB33B;
    --ambra-viva: #F7902B;
    --ambra-icona: #BF6513;
    --ambra-testo: #8A5712;
    --intonaco: #F0EFEB;
    --carta: #F8F6F1;
    --sabbia: #E9E4DA;
    --sabbia-leggera: #F3EFE8;
    --calce: #FBFAF7;
    --grafite: #747F81;
    --testo: #171D20;
    --testo-2: #53595C;
    --su-scuro: #D2D6D7;
    --su-scuro-2: #AEB5B8;
    --su-ambra: #12181B;
    /* i nomi della tabella 1.1 (alias: i nomi brevi qui sopra restano validi) */
    --testo-su-scuro: #FFFFFF;
    --testo-su-scuro-2: var(--su-scuro);
    --testo-su-scuro-3: var(--su-scuro-2);
    --testo-su-ambra: var(--su-ambra);
    --linea: #D7CABB;
    --bordo-card: #DED5C7;
    --crema: #FFF7E4;
    --verde: #009246; --rosso: #CE2B37;

    /* luci (1.1): l'opacità segue la manopola --intensita */
    --lama: rgba(255, 240, 214, .55);
    --luce-calda: radial-gradient(closest-side, rgba(255, 179, 59, calc(.12 * var(--intensita))), transparent);
    --luce-terra: radial-gradient(closest-side, rgba(255, 179, 59, calc(.10 * var(--intensita))), transparent);
    --faro: linear-gradient(100deg, transparent 42%, rgba(255, 214, 150, calc(.07 * var(--intensita))) 50%, transparent 58%);

    /* tessere della grana (15.3): la sola grana del kit, su trasparente, ripetibile, mostrata a 256 px */
    --grana-intonaco: url("../img/fondo/grana-intonaco.webp");
    --grana-antracite: url("../img/fondo/grana-antracite.webp");

    /* caratteri */
    --f-titoli: "Gelasio", Georgia, "Times New Roman", serif;
    --f-testo: "Archivo", "Archivo Riserva", "Archivo Riserva Android", Arial, sans-serif;

    /* scala (tabella 1.2: H2 32 a 390 · 42 a 1024 · 52 a 1440; 28 a 320 qui sotto) */
    --fs-h1: clamp(33px, 25.4px + 3.24vw, 72px);
    --fs-h2: clamp(28px, 25.85px + 1.577vw, 42px);
    --fs-citazione: clamp(21px, 20.3px + .95vw, 34px);
    --fs-voce: clamp(18px, 17.1px + .48vw, 24px);
    --fs-apertura: clamp(16px, 15.9px + .29vw, 20px);
    --fs-corpo: clamp(16px, 15.6px + .1vw, 17px);

    /* spazi */
    --g: 16px;
    --max: 1280px;
    --cornice: 1600px;
    --spazio: clamp(80px, 10vw, 152px);
    --raggio: 14px;
    --testata-h: 88px;
    --barra: 88px;

    /* movimento (1.7) */
    --e-posa: cubic-bezier(.16, 1, .3, 1);
    --e-traccia: cubic-bezier(.65, 0, .35, 1);
    --e-materia: cubic-bezier(.76, 0, .24, 1);
    --e-ritiro: cubic-bezier(.32, 0, .67, 0);
    --e-micro: cubic-bezier(.2, .7, .2, 1);
    --e-respiro: cubic-bezier(.37, 0, .63, 1);
    --t-micro: 200ms; --t-ui: 350ms; --t-posa: 800ms; --t-traccia: 900ms;
    --t-ritiro: 300ms; --t-maschera: 1100ms; --t-zoom: 1400ms;
    --sf-testo: 80ms; --sf-righe: 90ms; --sf-icone: 120ms;
    --salita: 24px;
    --intensita: 1;
  }
  @media (min-width: 360px) { :root { --g: 20px; } }
  @media (min-width: 768px) { :root { --g: 24px; } }
  @media (min-width: 1024px) { :root { --fs-h2: clamp(42px, 17.4px + 2.4vw, 52px); } }
  @media (min-width: 1280px) { :root { --g: 32px; } }
  @media (max-width: 767.98px) { :root { --salita: 16px; } }
  @media (max-width: 1023.98px) { :root { --testata-h: 64px; --barra: 64px; } }
  @media (max-width: 359.98px) {
    :root { --testata-h: 60px; --barra: 60px; --fs-h1: 33px; --fs-h2: 28px; --fs-citazione: 21px; --fs-voce: 18px; }
  }
  html.leggero { --intensita: .6; }

  html { scroll-behavior: auto; overflow-x: clip; }
  body {
    font-family: var(--f-testo);
    font-size: var(--fs-corpo);
    line-height: 1.6;
    color: var(--testo);
    background: var(--intonaco);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    text-rendering: optimizeLegibility;
  }
  html.menu-aperto, html.menu-aperto body { overflow: hidden; }
  h1, h2, h3 { font-family: var(--f-titoli); font-weight: 400; text-wrap: balance; }
  p { text-wrap: pretty; }
  ::selection { background: rgba(255, 179, 59, .45); color: var(--testo); }

  /* focus: doppio anello su chiaro, ambra su scuro */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--testo);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 179, 59, .55);
    border-radius: 4px;
  }
  .su-scuro :focus-visible, .apertura :focus-visible, .testata :focus-visible, .piede :focus-visible, .metodo :focus-visible, .cookie-bar :focus-visible {
    outline: 2px solid var(--ambra);
    outline-offset: 3px;
    box-shadow: none;
  }

  .salta {
    position: absolute; left: 16px; top: -80px; z-index: 100;
    padding: 12px 18px; border-radius: 999px;
    background: var(--ambra); color: var(--su-ambra);
    font-weight: 600; text-decoration: none;
  }
  .salta:focus { top: 12px; }
  .ambra { color: var(--ambra); }
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

  .contenitore {
    position: relative;
    width: min(100% - 2 * var(--g), var(--max));
    margin-inline: auto;
  }
  .sezione {
    position: relative;
    isolation: isolate;
    padding-block: var(--spazio);
    scroll-margin-top: 84px;
    overflow-x: clip; /* i disegni ai margini (right: -150px) restano dentro la sezione; clip non rompe lo sticky */
  }
  @media (max-width: 1023.98px) { .sezione { padding-block: 80px 72px; scroll-margin-top: 72px; } }
  .sezione > .contenitore { z-index: 2; }
}

/* =========================================================== COMPONENTI */
@layer componenti {
  /* ---- icone a tratto (sprite del kit, pathLength = 1) ---- */
  .icona {
    width: 24px; height: 24px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--tratto, 8);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 2;
    stroke-dashoffset: 0;
    overflow: visible;
  }

  /* ---- occhiello, titoli ---- */
  .occhiello {
    font-family: var(--f-testo);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ambra-testo);
    margin-bottom: 18px;
  }
  @media (max-width: 1279.98px) { .occhiello { font-size: 12px; } }
  @media (max-width: 359.98px) { .occhiello { font-size: 11px; } }
  .titolo-sezione {
    font-size: var(--fs-h2);
    line-height: 1.08;
    color: var(--testo);
    letter-spacing: -.005em;
  }
  @media (max-width: 767.98px) { .titolo-sezione { line-height: 1.12; } }

  /* ---- la QUOTA: linea con stanghette e tagli a 45° (dal disegno tecnico del kit) ---- */
  .quota {
    --q: 72px;
    position: relative;
    display: block;
    width: var(--q);
    height: 12px;
    margin-block: 22px 26px;
    color: var(--ambra-icona);
  }
  .quota::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 50%;
    height: 1.5px; margin-top: -.75px;
    background: currentColor;
  }
  .quota::after {
    content: "";
    position: absolute; inset: 0 -3px;
    background:
      linear-gradient(currentColor, currentColor) 3px 50% / 1.5px 10px no-repeat,
      linear-gradient(currentColor, currentColor) calc(100% - 3px) 50% / 1.5px 10px no-repeat,
      linear-gradient(-45deg, transparent calc(50% - .8px), currentColor calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)) 0 50% / 8px 8px no-repeat,
      linear-gradient(-45deg, transparent calc(50% - .8px), currentColor calc(50% - .8px) calc(50% + .8px), transparent calc(50% + .8px)) 100% 50% / 8px 8px no-repeat;
  }
  .quota--centro { margin-inline: auto; }
  .apertura .quota, .metodo .quota, .piede .quota { color: var(--ambra); }
  @media (max-width: 767.98px) { .quota { --q: 56px; margin-block: 18px 20px; } }

  /* ---- il CARTIGLIO della tavola ---- */
  .cartiglio {
    position: absolute;
    top: calc(var(--spazio) * -.56);
    left: 0;
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--f-testo);
    font-size: 11px; font-weight: 600; line-height: 1;
    letter-spacing: .2em;
    color: var(--testo-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .cartiglio::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }
  .metodo .cartiglio, .piede .cartiglio { color: var(--su-scuro-2); }
  @media (max-width: 1023.98px) { .cartiglio { top: -48px; font-size: 10px; } }

  /* ---- pulsanti ---- */
  .pulsante {
    position: relative;
    isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--ambra);
    color: var(--su-ambra);
    font-family: var(--f-testo);
    font-size: 17px; font-weight: 600; line-height: 1.1;
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--t-micro) var(--e-micro), background-color var(--t-micro) var(--e-micro);
    --tratto: 10;
  }
  .pulsante::after { /* la luce che attraversa */
    content: "";
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  .pulsante .icona { width: 22px; height: 22px; }
  .pulsante:hover, .pulsante:focus-visible { background: #FFBE57; }
  .pulsante:active { transform: scale(.98); }
  /* focus dei pulsanti ambra (stanno tutti sullo scuro: apertura, testata, menu, footer, 404): anello bianco
     staccato dal pulsante da 3 px scuri (#12181B). Si vede sullo scuro (bianco) e anche sul chiaro (lo scuro) */
  .pulsante:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 3px var(--su-ambra); }
  .pulsante__freccia { transition: transform var(--t-micro) var(--e-micro); }
  .pulsante:hover .pulsante__freccia, .pulsante:focus-visible .pulsante__freccia { transform: translateX(4px); }
  .pulsante--grande { min-height: 60px; padding: 0 30px 0 32px; }
  @media (max-width: 767.98px) { .pulsante { font-size: 16px; } }
  .pulsante--bordo {
    background: transparent; color: #fff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4);
  }
  .pulsante--bordo:hover, .pulsante--bordo:focus-visible { background: rgba(255, 255, 255, .08); }
  .pulsante--bordo:focus-visible { outline-color: var(--ambra); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); } /* su scuro: l'anello ambra di sempre */
  .pulsante--bordo .icona { color: var(--ambra); }

  /* link con icona WhatsApp (apertura, footer, menu) */
  .apertura__whatsapp, .piede__whatsapp, .menu__whatsapp {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 48px;
    color: #fff;
    font-size: 17px; font-weight: 500;
    text-decoration: none;
    --tratto: 9;
  }
  .apertura__whatsapp span, .piede__whatsapp span {
    position: relative;
    background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
    padding-bottom: 2px;
  }
  .apertura__whatsapp span::after, .piede__whatsapp span::after { /* sottolineatura ambra all'hover: scaleX, niente background-size animato */
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--ambra);
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform var(--t-micro) var(--e-micro);
  }
  .apertura__whatsapp .icona, .piede__whatsapp .icona, .menu__whatsapp .icona {
    width: 26px; height: 26px; color: var(--ambra);
    transition: transform var(--t-micro) var(--e-micro);
  }
  .apertura__whatsapp:hover span::after, .piede__whatsapp:hover span::after,
  .apertura__whatsapp:focus-visible span::after, .piede__whatsapp:focus-visible span::after { transform: none; }
  .apertura__whatsapp:hover .icona, .piede__whatsapp:hover .icona { transform: translateY(-2px); }

  /* ---- fondi «riempiti e in movimento» (1.4) ---- */
  .fondo {
    position: absolute; inset: 0;
    z-index: 0;
    overflow: clip;
    pointer-events: none;
  }
  .fondo span { position: absolute; display: block; }
  /* grana: tessera del kit (intonaco chiaro) su tutti i fondi chiari, antracite sui fondi scuri.
     È la sola grana su trasparente: sopra intonaco e antracite dà esattamente le texture del kit,
     sopra carta e sabbia resta la stessa grana. Così passa identica da una sezione all'altra. */
  .fondo__grana {
    inset: -40px;
    background: var(--grana-intonaco) 0 0 / 256px 256px repeat;
  }
  .fondo--tavola { background: var(--intonaco); }
  .fondo--parete { background: var(--intonaco); }
  .fondo--terra { background: var(--sabbia); }
  .fondo--antracite { background: var(--antracite); }
  .fondo--antracite .fondo__grana, .menu__fondo .fondo__grana { background-image: var(--grana-antracite); }

  /* griglia di progetto 53 × 59 (modulo del disegno tecnico del kit): piena ai margini, 25% dietro i testi,
     e sfumata in alto e in basso, così non finisce con un taglio dritto sul bordo della sezione */
  .fondo__griglia {
    inset: 0;
    --griglia-x: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .25) 20%, rgba(0, 0, 0, .25) 80%, #000 100%);
    --griglia-y: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 200px), transparent 100%);
    -webkit-mask-image: var(--griglia-x), var(--griglia-y);
    mask-image: var(--griglia-x), var(--griglia-y);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
  .fondo__griglia--v { background: repeating-linear-gradient(90deg, rgba(116, 127, 129, .14) 0 1px, transparent 1px 53px); }
  .fondo__griglia--o { background: repeating-linear-gradient(180deg, rgba(116, 127, 129, .14) 0 1px, transparent 1px 59px); }
  @media (max-width: 767.98px) {
    .fondo__griglia {
      --griglia-x: linear-gradient(90deg, #000 0 20px, transparent 20px calc(100% - 20px), #000 calc(100% - 20px));
      --griglia-y: linear-gradient(180deg, transparent 0, #000 100px, #000 calc(100% - 140px), transparent 100%);
    }
  }

  /* luce calda: piccola e ingrandita (memoria GPU bassa). Lato s = 30vw, ma al massimo il 40% della
     sezione; ingrandita 2 volte ha raggio s: con top ≥ s/2 il cerchio non tocca il bordo alto e (si sposta
     di 4vh in giù) nemmeno quello basso. Così ai bordi delle sezioni non lascia tagli dritti. */
  .fondo__luce {
    top: max(8%, min(15vw, 20%)); left: 6%;
    width: auto; height: min(30vw, 40%); aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: var(--luce-calda);
    transform: scale(2);
  }
  .fondo--terra .fondo__luce { left: 40%; top: calc(50% - min(15vw, 20%)); background: var(--luce-terra); } /* ferma, al centro: non arriva ai bordi */

  /* lama di sole con i montanti della finestra: l'elemento scalato copre la sezione, la maschera
     la sfuma nel 18% alto e basso (fra due fondi chiari niente tagli dritti) */
  .fondo__finestra {
    top: 30%; left: 30%;
    width: 40%; height: 40%;
    background: linear-gradient(105deg, transparent 0 34%, var(--lama) 36% 44%, transparent 44.6% 45.8%, var(--lama) 46.4% 54%, transparent 54.6% 55.8%, var(--lama) 56.4% 64%, transparent 66% 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    opacity: var(--intensita);
    transform: scale(2.5);
  }
  html.leggero .fondo__finestra { display: none; }

  /* faro su antracite */
  .fondo__faro {
    top: 0; bottom: 0; left: 0;
    width: 200%;
    background: var(--faro);
    transform: translateX(-25%);
  }

  /* onde fra chiaro e scuro: la parte chiara non è più una tinta piatta, ma il fondo della sezione
     vicina con la sua grana, ritagliato con la forma dell'onda (maschera SVG con lo stesso tracciato) */
  .apertura__onda:not(.apertura__onda-linea), .metodo__onda--su, .metodo__onda--giu:not(.metodo__onda-linea), .piede__onda:not(.piede__onda-linea) {
    background: var(--grana-intonaco) 0 0 / 256px 256px repeat, var(--onda-colore, var(--intonaco));
    -webkit-mask: var(--onda-forma) 0 0 / 100% 100% no-repeat;
    mask: var(--onda-forma) 0 0 / 100% 100% no-repeat;
  }
  .apertura__onda { --onda-forma: url("../img/fondo/onda-apertura.svg"); }
  .metodo__onda--su { --onda-forma: url("../img/fondo/onda-metodo-su.svg"); --onda-colore: var(--intonaco); }
  .metodo__onda--giu { --onda-forma: url("../img/fondo/onda-metodo-giu.svg"); }
  .piede__onda { --onda-forma: url("../img/fondo/onda-piede.svg"); --onda-colore: var(--sabbia-leggera); }

  /* ---- decorazioni: disegno tecnico, gru, ponteggio ---- */
  .disegno {
    position: absolute;
    z-index: 1;
    width: auto;
    height: 380px;
    aspect-ratio: 380 / 600;
    color: var(--grafite);
    fill: none;
    stroke: currentColor;
    stroke-width: .75;
    opacity: .48;
    stroke-dasharray: 1 2;
    pointer-events: none;
  }
  .gru, .ponteggio {
    fill: none;
    stroke: var(--ambra);
    stroke-linecap: round;
    stroke-dasharray: 1 2;
    pointer-events: none;
  }
  .gru { stroke-width: 1.25; }
  .ponteggio { stroke-width: 1.1; }

  /* ---- media con maschera e parallasse ---- */
  .media { position: relative; overflow: hidden; border-radius: var(--raggio); background: var(--sabbia); }
  .media__parallasse, .media__respiro { position: absolute; inset: -24px 0; }
  .media__img { width: 100%; height: 100%; object-fit: cover; }
}

/* =========================================================== SEZIONI */
@layer sezioni {

  /* ---------------------------------------------------- LINEA SAL */
  .sal {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 55;
    height: 2px;
    pointer-events: none;
    transform: translateY(var(--barra));
    transition: transform var(--t-ui) var(--e-micro);
  }
  html:not(.mv) .sal { display: none; }
  .sal__barra {
    position: absolute; inset: 0;
    background: var(--ambra);
    transform: scaleX(0);
    transform-origin: 0 50%;
  }
  .sal__tricolore {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--verde) 0 33.33%, #FFFFFF 33.33% 66.66%, var(--rosso) 66.66% 100%);
    opacity: 0;
    transition: opacity 600ms var(--e-respiro);
  }
  .sal--finita .sal__tricolore { opacity: 1; }

  /* ---------------------------------------------------- HEADER */
  .testata {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 50;
    height: var(--testata-h);
    color: #fff;
    transform: translate3d(0, 0, 0);
    transition: transform 300ms var(--e-posa); /* ricompare in 300 ms; si nasconde in 350 (--nascosta) */
  }
  .testata::before { /* la barra piena: si accende con l'opacità, si accorcia col transform */
    content: "";
    position: absolute; inset: 0;
    background: var(--antracite); /* opaca: senza sfocatura il 4% di trasparenza lasciava leggere i testi sotto */
    border-bottom: 1px solid var(--linea-scuro);
    opacity: 0;
    transform: scaleY(.773);
    transform-origin: 50% 0;
    transition: opacity var(--t-ui) var(--e-micro);
  }
  .testata--piena::before, .testata.aperta::before { opacity: 1; }
  .testata--nascosta { transform: translate3d(0, -100%, 0); transition-duration: var(--t-ui); transition-timing-function: var(--e-ritiro); }
  .testata__cornice {
    position: relative;
    display: flex; align-items: center; gap: 24px;
    width: min(100% - 2 * var(--g), var(--max));
    height: 100%;
    margin-inline: auto;
    transition: transform var(--t-ui) var(--e-micro);
  }
  .testata--piena .testata__cornice { transform: translateY(-10px); }
  .testata__logo {
    display: block;
    flex: none;
    height: 52px;
    transform-origin: 0 50%;
    transition: transform var(--t-ui) var(--e-micro);
    border-radius: 6px;
  }
  .testata__logo img { width: auto; height: 100%; object-fit: contain; }
  .testata--piena .testata__logo { transform: scale(.8); }

  .menu { margin-left: auto; position: relative; }
  .menu__fondo, .menu__pulsanti, .menu__tondo { display: none; }
  .menu__voci { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
  .menu__voci a {
    position: relative;
    display: block;
    padding: 10px 0;
    font-size: 15px; font-weight: 500;
    color: #fff; /* bianco pieno: sul fotogramma più chiaro del video 4,8:1 (all'88% scendeva a 4,1) */
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--t-micro);
  }
  .menu__voci a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 4px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 250ms var(--e-micro);
  }
  .menu__voci a:hover, .menu__voci a:focus-visible { color: #fff; }
  .menu__voci a:hover::after, .menu__voci a:focus-visible::after { transform: scaleX(1); }
  .menu__voci a.attiva { color: #fff; }
  .testata__indicatore {
    position: absolute; left: 0; bottom: 0;
    width: 100px; height: 2px;
    background: var(--ambra);
    transform-origin: 0 50%;
    transform: translateX(var(--ind-x, 0)) scaleX(var(--ind-s, 0));
    opacity: var(--ind-o, 0);
    transition: transform 400ms var(--e-traccia), opacity 300ms;
    pointer-events: none;
  }
  .pulsante--testata { min-height: 44px; padding: 0 22px 0 18px; font-size: 16px; gap: 10px; flex: none; }
  .pulsante--testata .icona { width: 18px; height: 18px; --tratto: 11; }
  .testata__chiama, .testata__apri { display: none; }

  /* ---- telefono e tablet: barra, tondo «Chiama», pulsante del menu, pannello ---- */
  @media (max-width: 1023.98px) {
    .testata__logo { height: 34px; }
    .testata--piena .testata__cornice { transform: none; }
    .testata--piena .testata__logo { transform: none; }
    .testata::before { transform: none; }
    .pulsante--testata { display: none; }
    .testata__chiama {
      display: grid; place-items: center;
      width: 44px; height: 44px;
      margin-left: auto;
      border-radius: 50%;
      border: 1.5px solid var(--ambra);
      color: var(--ambra);
      --tratto: 10;
    }
    .testata__chiama .icona { width: 20px; height: 20px; }
    .testata__apri {
      position: relative;
      display: block;
      width: 48px; height: 48px;
      margin-right: -8px;
      border-radius: 50%;
    }
    .testata__apri span {
      position: absolute; left: 12px;
      width: 24px; height: 2px;
      border-radius: 2px;
      background: #fff;
      transition: transform 300ms var(--e-micro), opacity 300ms var(--e-micro);
    }
    .testata__apri span:nth-child(1) { top: 16px; }
    .testata__apri span:nth-child(2) { top: 23px; }
    .testata__apri span:nth-child(3) { top: 30px; }
    .testata.aperta .testata__apri span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .testata.aperta .testata__apri span:nth-child(2) { transform: scaleX(0); opacity: 0; }
    .testata.aperta .testata__apri span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* il pannello del menu: a tutta altezza sotto la barra */
    .menu {
      position: absolute;
      top: 100%; left: calc(50% - 50vw);
      width: 100vw;
      height: calc(100svh - var(--testata-h));
      margin: 0;
      display: flex; flex-direction: column;
      padding: 16px var(--g) calc(24px + env(safe-area-inset-bottom));
      background: var(--antracite-profondo);
      overflow-y: auto;
      overscroll-behavior: contain;
      clip-path: inset(0 0 100% 0);
      visibility: hidden;
      transition: clip-path 300ms var(--e-ritiro), visibility 0s linear 300ms;
    }
    .testata.aperta .menu {
      clip-path: inset(0 0 0 0);
      visibility: visible;
      transition: clip-path 500ms var(--e-posa), visibility 0s;
    }
    .menu__fondo { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
    .menu__fondo .fondo__grana { position: absolute; inset: 0; opacity: .5; }
    .menu__gru {
      position: absolute; right: -6%; bottom: 0;
      height: 55%; width: auto; aspect-ratio: 380 / 600;
      opacity: .22;
    }
    .menu__voci { position: relative; display: block; }
    .menu__voci li { border-bottom: 1px solid var(--linea-scuro); position: relative; }
    .menu__voci li::after { /* filo che si stende sotto la voce */
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
      background: rgba(255, 179, 59, .35);
      transform: scaleX(0); transform-origin: 0 50%;
    }
    .menu__voci a {
      display: flex; align-items: center; gap: 16px;
      min-height: 64px;
      padding: 0;
      font-family: var(--f-titoli);
      font-size: 28px; font-weight: 400;
      color: #fff;
    }
    .menu__voci a::after { display: none; }
    .menu__voci a.attiva { color: var(--ambra); }
    .menu__tondo {
      display: grid; place-items: center;
      width: 40px; height: 40px; flex: none;
      border-radius: 50%;
      border: 1px solid var(--linea-scuro);
      color: var(--ambra);
      --tratto: 7;
    }
    .menu__tondo .icona { width: 24px; height: 24px; }
    .testata__indicatore { display: none; }
    .menu__pulsanti {
      position: relative;
      display: grid; gap: 10px;
      margin-top: auto;
      padding-top: 28px;
    }
    .menu__chiama { min-height: 56px; width: 100%; }
    .menu__whatsapp {
      justify-content: center;
      min-height: 52px;
      border-radius: 999px;
      box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4);
    }
  }
  @media (max-width: 359.98px) {
    .testata__logo { height: 30px; }
    .testata__chiama { width: 40px; height: 40px; position: relative; }
    .testata__chiama::after { content: ""; position: absolute; inset: -2px; }
    .menu__voci a { min-height: 56px; font-size: 24px; }
    .menu__tondo { width: 34px; height: 34px; }
    .menu__tondo .icona { width: 20px; height: 20px; }
    .menu__gru { height: 40%; opacity: .16; }
    .menu__chiama { min-height: 52px; }
  }
  @media (max-width: 1023.98px) and (max-height: 559.98px) {
    .menu__voci a { min-height: 48px; font-size: 22px; }
    .menu__pulsanti { margin-top: 20px; }
  }
  /* senza JS (o se main.js non è partito: primo.js toglie .js) la barra è sempre piena, a ogni larghezza */
  html:not(.js) .testata::before { opacity: 1; }
  @media (min-width: 1024px) { html:not(.js) .testata:not(.testata--piena)::before { transform: none; } }
  /* al telefono e al tablet: logo e tondo «Chiama» sulla prima riga, il menu è una riga che scorre sotto */
  @media (max-width: 1023.98px) {
    html:not(.js) .testata { position: absolute; height: auto; }
    html:not(.js) .testata__cornice { flex-wrap: wrap; row-gap: 4px; padding-block: 10px 2px; }
    html:not(.js) .testata__apri { display: none; }
    html:not(.js) .menu {
      order: 3; flex: 0 0 calc(100% + 2 * var(--g));
      position: static; width: auto; height: auto; margin: 0 calc(-1 * var(--g)); padding: 0;
      clip-path: none; visibility: visible; background: none;
      overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--linea-scuro) transparent;
    }
    html:not(.js) .menu__fondo, html:not(.js) .menu__pulsanti { display: none; }
    html:not(.js) .menu__voci { display: flex; gap: 22px; width: max-content; padding-inline: var(--g); }
    html:not(.js) .menu__voci li { border: 0; }
    html:not(.js) .menu__voci a { min-height: 44px; font-family: var(--f-testo); font-size: 15px; }
    html:not(.js) .menu__tondo { display: none; }
    /* la testata su due righe è alta circa 104 px: il titolo delle pagine interne parte più in basso */
    html:not(.js) .pagina { padding-top: calc(var(--testata-h) + 88px); }
  }

  /* pagine interne: barra sempre piena; logo 40 px da computer, al telefono 34 / 30 px come nella home */
  @media (min-width: 1024px) { .testata--pagina .testata__logo { height: 40px; } }
  .testata--pagina.testata--piena .testata__logo { transform: none; }

  /* ---------------------------------------------------- APERTURA */
  /* fondo «antracite viva» come metodo e footer (antracite, grana, faro): niente foto né video dietro i testi.
     Da computer due colonne: i testi a sinistra, a destra il cantiere nel suo riquadro, centrato in verticale.
     Tablet e telefono una colonna: logo, H1, riquadro, righello, testi, pulsanti (la cornice si «scioglie») */
  .apertura {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: max(640px, min(100svh, 860px));
    background: var(--antracite);
    color: #fff;
    overflow: clip;
  }
  html:not(.mv) .apertura .fondo__faro { display: none; } /* riduci movimento e senza JS: niente faro, non una banda ferma */

  .apertura__contenuto {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1fr);
    column-gap: 64px;
    align-items: center;
    width: min(100% - 2 * var(--g), var(--max));
    margin-inline: auto;
    padding-top: calc(var(--testata-h) + 32px);
    padding-bottom: clamp(88px, 8vw, 120px);
  }
  .apertura__cornice {
    position: relative;
    grid-column: 1; grid-row: 1;
    padding-left: 48px;
    --logo-w: clamp(380px, 22vw + 90px, 440px);
    --logo-spazio: 26px;
  }
  /* logo master orizzontale chiaro, in linea sopra l'H1 (path identici al kit). Nel disegno la casetta ha
     44,5 unità su 1480 di margine a sinistra: il margine negativo la allinea al bordo dell'H1 */
  .apertura__logo {
    display: block;
    flex: none;
    width: var(--logo-w); height: auto;
    aspect-ratio: 1480 / 430;
    margin: 0 0 var(--logo-spazio) calc(var(--logo-w) * -44.5 / 1480);
    overflow: visible;
  }
  .apertura__cornice::before { /* quota verticale: parte dall'H1, sotto il logo */
    content: "";
    position: absolute; left: 24px; top: calc(var(--logo-w) * 430 / 1480 + var(--logo-spazio) + 14px); bottom: 30px;
    width: 1.5px;
    background: var(--ambra);
    transform-origin: 50% 0;
  }
  .apertura__titolo, .apertura__testo, .apertura__azioni { position: relative; }
  .apertura__titolo::before, .apertura__testo::before, .apertura__azioni::before { /* stanghette della quota verticale */
    content: "";
    position: absolute; left: -29px; top: 22px;
    width: 11px; height: 1.5px;
    background: var(--ambra);
    transform-origin: 0 50%;
  }
  .apertura__testo::before { top: .8em; }
  .apertura__azioni::before { top: 29px; }
  .apertura__titolo {
    font-size: var(--fs-h1);
    line-height: 1.02;
    letter-spacing: -.012em;
    color: #fff;
    max-width: 13.5em;
  }
  .apertura__quota { margin-block: 26px 24px; }
  .apertura__testo, .apertura__invito {
    max-width: 50ch; /* riga di 60–66 caratteri (1.2): in Archivo 1ch ≈ 1,27 caratteri medi */
    font-size: var(--fs-apertura);
    line-height: 1.5;
  }
  .apertura__testo { color: rgba(255, 255, 255, .92); }
  .apertura__invito { color: #fff; font-weight: 500; margin-top: 4px; }
  .apertura__azioni {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
    margin-top: 32px;
  }
  @media (min-width: 1024px) {
    /* l'H1 sta nella sua colonna su 3 righe: «Ristrutturazioni chiavi» è largo 9,96 volte il corpo */
    .apertura__cornice { container-type: inline-size; }
    .apertura__titolo { font-size: min(var(--fs-h1), 9.6cqi); }
  }

  /* ---- il cantiere nel suo riquadro: 5 foto sovrapposte (la 05 è la casa finita, sopra a tutte).
     Con movimento (main.js) le foto 02-05 partono chiuse e si scoprono a tendina, da sinistra a destra,
     con una linea ambra sul bordo; senza movimento e senza JS si vede la 05, etichetta DOPO ---- */
  .cantiere {
    position: relative;
    grid-column: 2; grid-row: 1;
    width: 100%;
  }
  .cantiere__riquadro {
    position: relative;
    isolation: isolate;
    aspect-ratio: 16 / 9; /* la foto intera, come è stata scattata (1672 × 941) */
    border-radius: var(--raggio);
    overflow: hidden;
    background: var(--antracite-profondo);
    box-shadow: 0 40px 80px -36px rgba(0, 0, 0, .75), 0 16px 32px -18px rgba(0, 0, 0, .5);
  }
  .cantiere__riquadro::after { /* filo ambra al 40% sopra le foto */
    content: "";
    position: absolute; inset: 0; z-index: 8;
    border: 1px solid rgba(255, 179, 59, .4);
    border-radius: inherit;
    pointer-events: none;
  }
  .cantiere__foto {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
  }
  /* senza movimento le foto 02-04 non servono (sotto la 05): nascoste, e «lazy», non si scaricano */
  html:not(.mv) .cantiere__foto:nth-of-type(2), html:not(.mv) .cantiere__foto:nth-of-type(3), html:not(.mv) .cantiere__foto:nth-of-type(4) { display: none; }
  html.mv .cantiere__foto:nth-of-type(n+2) { clip-path: inset(0 100% 0 0); }
  html.mv .cantiere__foto.scoperta { clip-path: inset(0); transition: clip-path 900ms var(--e-materia); }
  html.mv .cantiere__foto.torna { z-index: 2; animation: dissolvi 500ms var(--e-respiro) both; } /* ritorno alla 01, sopra le altre */
  @keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }

  /* la linea ambra della tendina: uno strato largo quanto la foto, spostato col transform (stessa curva e
     stessa durata del clip-path), con la linea sul suo bordo destro: corre esattamente sul bordo della tendina */
  .cantiere__lama {
    position: absolute; inset: 0; z-index: 5;
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
    pointer-events: none;
  }
  .cantiere__lama::after {
    content: "";
    position: absolute; top: 0; bottom: 0; right: -1.5px;
    width: 3px;
    background: var(--ambra);
    box-shadow: 0 0 14px 2px rgba(255, 179, 59, .45), 0 0 3px rgba(255, 179, 59, .9);
  }
  .cantiere__lama.corre { opacity: 1; transform: none; transition: transform 900ms var(--e-materia), opacity 120ms linear; }
  .cantiere__lama.finita { opacity: 0; transition: opacity 350ms var(--e-respiro); }

  /* etichetta PRIMA / DOPO (come quelle di «Lavori fatti», a pillola) e contatore */
  .cantiere__etichetta {
    position: absolute; top: 14px; left: 14px; z-index: 6;
    display: grid;
  }
  .cantiere__etichetta > span, .cantiere__contatore {
    padding: 7px 11px 6px;
    border-radius: 999px;
    font-family: var(--f-testo);
    font-size: 11px; font-weight: 600; line-height: 1;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .cantiere__etichetta > span {
    grid-area: 1 / 1; justify-self: start;
    transform-origin: 0 50%;
    transition: opacity 300ms var(--e-micro), transform 450ms var(--e-posa);
  }
  .cantiere__prima { background: var(--antracite); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); opacity: 0; }
  .cantiere__dopo { background: var(--ambra); color: var(--su-ambra); }
  html.mv .cantiere__prima { opacity: 1; }
  html.mv .cantiere__dopo { opacity: 0; transform: scale(.86); }
  html.mv .cantiere--dopo .cantiere__prima { opacity: 0; }
  html.mv .cantiere--dopo .cantiere__dopo { opacity: 1; transform: none; }
  .cantiere__contatore {
    position: absolute; top: 14px; right: 14px; z-index: 6;
    display: flex; align-items: baseline; gap: .45em;
    background: rgba(23, 29, 32, .8);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
    color: #fff;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
  }
  .cantiere__numeri { display: grid; }
  .cantiere__num { grid-area: 1 / 1; opacity: 0; }
  .cantiere__num:last-child { opacity: 1; }
  .cantiere__totale { color: rgba(255, 255, 255, .78); }
  html.mv .cantiere__num { opacity: 0; transform: translate3d(0, 8px, 0); transition: opacity 300ms var(--e-micro), transform 450ms var(--e-posa); }
  html.mv .cantiere__num.attivo { opacity: 1; transform: none; }
  html.mv .cantiere__num.uscito { transform: translate3d(0, -8px, 0); }

  /* righello delle fasi, sotto il riquadro e largo quanto lui */
  .righello {
    position: relative;
    width: 100%;
    margin-top: 20px;
    --nodo: 40px;
  }
  .righello__linea {
    position: absolute;
    left: calc(var(--nodo) / 2); right: calc(var(--nodo) / 2);
    top: calc(var(--nodo) / 2 - .5px);
    height: 1px;
    background: rgba(255, 255, 255, .35);
  }
  .righello__riempimento {
    position: absolute; left: 0; right: 0; top: -.5px;
    height: 2px;
    background: var(--ambra);
    transform-origin: 0 50%;
    transform: scaleX(var(--riempi, 1));
  }
  html.mv .righello__riempimento { transition: transform 900ms var(--e-materia); }
  html.mv .righello--torna .righello__riempimento { transition: transform 500ms var(--e-respiro); }
  .righello__nodi { position: relative; display: flex; justify-content: space-between; }
  .righello__nodo {
    position: relative;
    display: grid; justify-items: center; gap: 10px;
    width: var(--nodo);
  }
  .righello__cerchio {
    position: relative;
    display: grid; place-items: center;
    width: var(--nodo); height: var(--nodo);
    color: var(--ambra);
    --tratto: 9;
  }
  .righello__cerchio::before { /* il nodo: punto piccolo, cerchio grande quando è attivo (bordo e fondo: micro-stato ammesso) */
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background-color: var(--antracite-profondo);
    border: 1.5px solid rgba(255, 255, 255, .55);
    transform: scale(.2);
    transition: transform 300ms var(--e-micro), border-color 300ms var(--e-micro), background-color 300ms;
  }
  .righello__cerchio::after { /* l'alone del nodo attivo: un'ombra ferma che si accende con l'opacità */
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(255, 179, 59, .12);
    opacity: 0;
    transform: scale(.2);
    transition: opacity 300ms var(--e-micro), transform 300ms var(--e-micro);
    pointer-events: none;
  }
  .righello__nodo--fatto .righello__cerchio::before { background-color: var(--ambra); border-color: var(--ambra); }
  .righello__nodo--attivo .righello__cerchio::before {
    transform: scale(1);
    background-color: var(--antracite-profondo);
    border-color: var(--ambra);
  }
  .righello__nodo--attivo .righello__cerchio::after { opacity: 1; transform: scale(1); }
  .righello__cerchio .icona {
    position: relative;
    width: 20px; height: 20px;
    opacity: 0;
    stroke-dashoffset: 1;
    transform: scale(.92);
    transition: stroke-dashoffset 250ms var(--e-ritiro), opacity 250ms var(--e-ritiro), transform 250ms var(--e-ritiro);
  }
  .righello__nodo--attivo .righello__cerchio .icona {
    opacity: 1; stroke-dashoffset: 0; transform: none;
    transition: stroke-dashoffset 500ms var(--e-traccia) 120ms, opacity 150ms linear 120ms, transform 400ms var(--e-posa) 120ms;
  }
  .righello__numero {
    font-family: var(--f-testo);
    font-size: 12px; font-weight: 600; line-height: 1;
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .86);
    font-variant-numeric: tabular-nums;
  }

  .apertura__onda {
    position: absolute; left: 0; right: 0; bottom: -1px;
    z-index: 3;
    width: 100%;
    height: clamp(26px, 4.8vw, 72px);
    pointer-events: none;
    overflow: visible;
  }
  .apertura__onda .onda-fondo { fill: none; } /* la parte chiara la disegna la maschera con la grana (componenti, «onde») */
  .apertura__onda .onda-linea { fill: none; stroke: var(--ambra); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .apertura__onda-linea { z-index: 4; }

  @media (min-width: 1024px) and (max-width: 1279.98px) {
    /* computer stretto: il riquadro si stringe, i testi tengono la loro colonna */
    .apertura__contenuto { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); column-gap: 40px; }
    .righello { --nodo: 36px; margin-top: 16px; }
  }
  @media (max-width: 1023.98px) {
    /* tablet e telefono: una colonna. La cornice si scioglie (display: contents) e i suoi pezzi si mettono in
       fila col riquadro: logo, H1, riquadro e righello, testo e invito, pulsanti */
    .apertura { min-height: 0; }
    .apertura__contenuto {
      display: flex; flex-direction: column; align-items: stretch;
      padding-top: calc(var(--testata-h) + 20px);
      padding-bottom: calc(var(--g) + 72px);
    }
    .apertura__cornice { display: contents; --logo-w: 340px; }
    .apertura__cornice::before,
    .apertura__titolo::before, .apertura__testo::before, .apertura__azioni::before { display: none; }
    .apertura__logo { order: 1; }
    .apertura__titolo { order: 2; }
    .apertura__quota { display: none; }
    .cantiere { order: 3; width: min(100%, 640px); margin-top: 28px; }
    .apertura__testo { order: 4; margin-top: 28px; }
    .apertura__invito { order: 5; }
    .apertura__azioni { order: 6; }
    /* senza JS la testata ha sotto la riga del menu (40 px) */
    html:not(.js) .apertura__contenuto { padding-top: calc(var(--testata-h) + 40px + 16px); }
  }
  @media (max-width: 767.98px) {
    .apertura__contenuto { padding-top: calc(var(--testata-h) + 14px); padding-bottom: calc(26px + 72px); }
    .apertura__cornice { --logo-w: clamp(220px, 57.14vw + 37px, 270px); --logo-spazio: 14px; }
    .apertura__titolo { line-height: 1.06; max-width: none; }
    .apertura__titolo .a-capo { display: none; }
    .cantiere { width: 100%; margin-top: 18px; }
    .cantiere__riquadro { aspect-ratio: 16 / 10; }
    .cantiere__foto { object-position: 62% 50%; }
    .cantiere__etichetta { top: 10px; left: 10px; }
    .cantiere__contatore { top: 10px; right: 10px; }
    .righello { --nodo: 34px; margin-top: 12px; }
    .righello__cerchio .icona { width: 17px; height: 17px; --tratto: 10; }
    .righello__numero { display: none; } /* il numero della fase lo dice il contatore nel riquadro */
    .apertura__testo { margin-top: 18px; }
    .apertura__azioni { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 20px; }
    .apertura__azioni .pulsante--grande { min-height: 54px; max-width: 340px; width: 100%; }
    .apertura__whatsapp { align-self: flex-start; }
  }
  @media (max-width: 359.98px) {
    .apertura__azioni .pulsante--grande { font-size: 16px; padding: 0 18px; max-width: none; }
    .apertura__testo, .apertura__invito { font-size: 16px; }
    .cantiere__etichetta > span, .cantiere__contatore { font-size: 10px; padding: 6px 9px 5px; }
  }
  @media (max-width: 767.98px) and (max-height: 760px) {
    /* telefoni bassi (375 × 667, 360 × 640, 320): tutto più stretto, sopra i 72 px del banner cookie */
    .apertura__contenuto { padding-top: calc(var(--testata-h) + 8px); padding-bottom: 80px; }
    .apertura__cornice { --logo-w: clamp(220px, 57.14vw + 22px, 260px); --logo-spazio: 10px; }
    .apertura__titolo { font-size: calc(var(--fs-h1) - 3px); line-height: 1.02; }
    .cantiere { margin-top: 12px; }
    .cantiere__riquadro { aspect-ratio: 16 / 9; } /* più basso: il pulsante sale di 20 px */
    .righello { --nodo: 28px; margin-top: 8px; }
    .righello__cerchio .icona { width: 15px; height: 15px; }
    .apertura__testo, .apertura__invito { font-size: 16px; line-height: 1.36; }
    .apertura__testo { margin-top: 12px; }
    .apertura__invito { margin-top: 2px; }
    .apertura__azioni { margin-top: 14px; gap: 4px; }
    .apertura__azioni .pulsante--grande { min-height: 50px; }
    .apertura__whatsapp { min-height: 44px; }
  }

  /* ---------------------------------------------------- SERVIZI */
  .servizi { background: var(--intonaco); }
  .servizi__disegno--sx { left: -150px; top: 30%; }
  .servizi__disegno--dx { right: -120px; top: 4%; }
  .servizi__griglia {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(40px, 5.5vw, 96px);
  }
  .servizi__testa { grid-column: 1; grid-row: 1; padding-bottom: 28px; }
  .servizi__sottotitolo { font-size: 18px; line-height: 1.55; color: var(--testo-2); max-width: 30em; }
  .servizi__corpo { display: contents; }
  .servizi__elenco { grid-column: 1; grid-row: 2; border-top: 1px solid var(--linea); counter-reset: voce; }

  /* ogni riga è un pulsante (dentro il suo h3): clic, tocco, Invio o Spazio la rendono attiva */
  .servizio { position: relative; border-bottom: 1px solid var(--linea); }
  .servizio__voce { font-size: inherit; }
  .servizio__pulsante {
    display: grid;
    grid-template-columns: 64px 34px minmax(0, 1fr);
    align-items: center;
    column-gap: 20px;
    width: 100%;
    min-height: 136px;
    padding: 16px 12px 16px 22px;
    text-align: left;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 250ms var(--e-traccia);
  }
  html.js .servizio__pulsante { cursor: pointer; }
  .servizio__pulsante:focus-visible { outline-offset: -2px; box-shadow: inset 0 0 0 6px rgba(255, 179, 59, .35); border-radius: 6px; }
  /* hover: la riga si accende appena (solo dove c'è un mouse, e solo se il clic fa qualcosa) */
  @media (hover: hover) {
    html.js .servizio__pulsante:hover { background-color: rgba(255, 179, 59, .08); }
    html.js .servizio__pulsante:hover .servizio__titolo { color: var(--testo); }
    html.js .servizio__pulsante:hover .servizio__cerchio { opacity: 1; }
  }
  /* il tempo del giro automatico: una barretta ambra sul fondo della voce attiva (main.js, layer movimento) */
  .servizio__tempo {
    position: absolute; left: 22px; right: 0; bottom: -1px;
    height: 2px; border-radius: 2px;
    background: var(--ambra);
    transform-origin: 0 50%; transform: scaleX(0);
    opacity: 0;
    pointer-events: none;
  }
  .servizio__regolo {
    position: absolute; left: 0; top: 26px; bottom: 26px;
    width: 3px; border-radius: 3px;
    background: var(--ambra);
    transform: scaleY(0); transform-origin: 50% 0;
    transition: transform 300ms var(--e-ritiro);
  }
  .servizio__icona {
    width: 64px; height: 64px;
    color: var(--ambra-icona);
    fill: none; stroke: currentColor;
    stroke-linecap: round; stroke-linejoin: round;
    overflow: visible;
  }
  .servizio__cerchio {
    fill: rgba(255, 179, 59, 0);
    stroke-width: 1.9;
    opacity: .55;
    transition: fill 300ms var(--e-traccia), opacity 300ms var(--e-traccia);
  }
  .servizio__disegno {
    stroke-width: 3.6;
    stroke-dasharray: 1 2;
    stroke-dashoffset: 0;
  }
  .servizio__disegno--b { opacity: 0; }
  .servizio__numero {
    font-family: var(--f-titoli);
    font-size: 22px; line-height: 1;
    color: var(--testo-2);
    font-variant-numeric: lining-nums tabular-nums;
    transition: color 300ms var(--e-traccia);
  }
  .servizio__titolo {
    font-size: var(--fs-voce);
    line-height: 1.25;
    color: var(--testo-2);
    transition: color 300ms var(--e-traccia);
  }
  .servizio--attivo .servizio__regolo { transform: scaleY(1); transition: transform 400ms var(--e-traccia); }
  .servizio--attivo .servizio__cerchio { fill: rgba(255, 179, 59, .14); opacity: 1; }
  .servizio--attivo .servizio__titolo { color: var(--testo); }
  .servizio--attivo .servizio__numero { color: var(--ambra-testo); }

  /* la finestra di cantiere */
  .finestra {
    grid-column: 2; grid-row: 2;
    align-self: center;
    position: relative;
    aspect-ratio: 5 / 4;
    border-radius: var(--raggio);
    box-shadow: 0 30px 60px -30px rgba(23, 29, 32, .35);
    background: var(--antracite);
    isolation: isolate;
  }
  .finestra__lastre { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
  .finestra__lastra { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
  .finestra__lastra img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(var(--z, 1.12));
  }
  .finestra__lastra--1 img { object-position: 18% 50%; transform-origin: 18% 50%; }
  .finestra__lastra--2 img { object-position: 100% 75%; transform-origin: 100% 75%; } /* secchio e calcinacci: a 80% restavano fuori dal bordo */
  .finestra__lastra--3 img { object-position: 50% 20%; transform-origin: 50% 20%; }
  .finestra__lastra--4 img { object-position: 35% 70%; transform-origin: 35% 70%; }
  .finestra__lastra--5 img { object-position: 50% 50%; transform-origin: 50% 50%; --z: 1; }
  .finestra__lastra--attiva { z-index: 3; }
  .finestra__lastra--prima { z-index: 2; }
  .finestra__filo {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 4;
    width: 2px;
    background: var(--ambra);
    box-shadow: 0 0 12px rgba(255, 179, 59, .6);
    opacity: 0;
    pointer-events: none;
  }
  .finestra__contatore {
    position: absolute; top: 16px; left: 16px; z-index: 5;
    padding: 7px 12px 6px;
    border-radius: 999px;
    background: rgba(23, 29, 32, .82);
    color: #fff;
    font-family: var(--f-testo);
    font-size: 12px; font-weight: 600; line-height: 1;
    letter-spacing: .14em;
    font-variant-numeric: tabular-nums;
  }
  .finestra__numero { display: inline-block; }
  .finestra__barra {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    height: 4px;
    border-radius: 0 0 var(--raggio) var(--raggio);
    background: var(--ambra);
    transform-origin: 0 50%;
    transform: scaleX(var(--voce-barra, .2));
    transition: transform 400ms var(--e-traccia);
  }

  @media (max-width: 1023.98px) and (min-width: 768px) {
    .servizio__pulsante { grid-template-columns: 56px 30px minmax(0, 1fr); column-gap: 16px; min-height: 112px; }
    .servizio__icona { width: 56px; height: 56px; }
  }
  @media (max-width: 767.98px) {
    .servizi__disegno--sx { display: none; }
    .servizi__disegno--dx { right: -120px; top: 20px; height: 300px; opacity: .24; }
    .servizi__griglia { display: block; }
    .servizi__testa { padding-bottom: 24px; }
    .servizi__sottotitolo { font-size: 16px; }
    .servizi__corpo { display: block; position: relative; }
    /* al telefono la finestra sta sopra la lista, al suo posto (non incollata) */
    .finestra {
      aspect-ratio: 16 / 10;
      border-radius: 12px;
      margin-bottom: 18px;
    }
    .servizio__pulsante {
      grid-template-columns: 56px 26px minmax(0, 1fr);
      column-gap: 14px;
      min-height: 96px;
      padding: 12px 8px 12px 16px;
    }
    .servizio__tempo { left: 16px; }
    .servizio__regolo { top: 20px; bottom: 20px; }
    .servizio__icona { width: 56px; height: 56px; }
    .servizio__numero { font-size: 19px; }
    .finestra__contatore { top: 10px; left: 10px; font-size: 11px; padding: 6px 10px 5px; }
  }
  /* senza JS: voce 01 accesa e foto 01 (nell'HTML), senza contatore né barretta */
  html:not(.js) .finestra__contatore, html:not(.js) .finestra__barra { display: none; }
  @media (max-width: 359.98px) {
    .servizio__pulsante { min-height: 88px; grid-template-columns: 48px 24px minmax(0, 1fr); column-gap: 12px; }
    .servizio__icona { width: 48px; height: 48px; }
  }

  /* ---------------------------------------------------- LAVORI FATTI */
  .possibilita { background: var(--carta); }
  .possibilita .fondo--parete { background: var(--carta); }
  /* giunta fra due fondi chiari: la sfumatura dal colore di sopra sta nel fondo, SOTTO la grana,
     la lama e la griglia (che sfumano da sole): la grana passa identica e non resta nessuna linea */
  section.possibilita > .fondo, section.ambienti > .fondo, section.zona > .fondo, section.chi > .fondo, section.faq > .fondo {
    background-image: linear-gradient(180deg, var(--giunta, var(--intonaco)), transparent 160px);
    background-image: linear-gradient(180deg, var(--giunta, var(--intonaco)) 0, color-mix(in srgb, var(--giunta, var(--intonaco)) 94%, transparent) 24px, color-mix(in srgb, var(--giunta, var(--intonaco)) 76%, transparent) 52px, color-mix(in srgb, var(--giunta, var(--intonaco)) 50%, transparent) 80px, color-mix(in srgb, var(--giunta, var(--intonaco)) 24%, transparent) 108px, color-mix(in srgb, var(--giunta, var(--intonaco)) 6%, transparent) 136px, transparent 160px);
  }
  .possibilita__testa { text-align: center; max-width: 820px; margin-inline: auto; }
  .possibilita__sottotitolo { max-width: 50ch; margin-inline: auto; color: var(--testo-2); font-size: 18px; line-height: 1.55; text-wrap: balance; }
  .possibilita__sottotitolo + .possibilita__sottotitolo { margin-top: 6px; }
  .possibilita__card {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px);
    align-items: start;
    margin-top: clamp(40px, 5vw, 64px);
  }
  /* 2 × 2 a scacchiera: riga 1 Cucina grande e Bagno piccola più in basso, riga 2 il contrario */
  .confronto-card { grid-column: span 7; }
  .confronto-card--bagno, .confronto-card--open-space { grid-column: span 5; margin-top: 72px; }
  .confronto-card__corpo {
    position: relative;
    padding: 8px;
    border-radius: var(--raggio);
    background: var(--calce);
    border: 1px solid var(--bordo-card);
    transition: transform 250ms var(--e-micro);
  }
  .confronto-card__corpo::after {
    content: "";
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    box-shadow: 0 28px 48px -24px rgba(23, 29, 32, 1);
    opacity: .10;
    transition: opacity 250ms var(--e-micro);
  }
  @media (pointer: fine) {
    .confronto-card__corpo:hover { transform: translateY(-4px); }
    .confronto-card__corpo:hover::after { opacity: .18; }
    .confronto-card__corpo:hover .confronto__pallino { transform: translate(-50%, -50%) scale(1.06); }
  }
  .confronto {
    --pos: 50%;
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
    overflow: hidden;
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    background: var(--sabbia);
  }
  .confronto__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 50%;
    pointer-events: none;
    -webkit-user-drag: none;
  }
  .confronto__img--prima { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .confronto__etichetta {
    position: absolute; bottom: 14px; z-index: 2;
    padding: 6px 10px 5px;
    border-radius: 6px;
    font-family: var(--f-testo);
    font-size: 11px; font-weight: 600; line-height: 1;
    letter-spacing: .16em; text-transform: uppercase;
    transition: opacity 200ms;
  }
  .confronto__etichetta--prima { left: 14px; background: var(--antracite); color: #fff; }
  .confronto__etichetta--dopo { right: 14px; background: var(--ambra); color: var(--su-ambra); }
  .confronto--poco-prima .confronto__etichetta--prima, .confronto--poco-dopo .confronto__etichetta--dopo { opacity: 0; }
  .confronto__linea { /* strato largo quanto la foto, spostato col transform: niente layout a ogni fotogramma */
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 3;
    width: 100%;
    transform: translateX(var(--pos));
    pointer-events: none;
  }
  .confronto__linea::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--crema); }
  .confronto__linea::after { content: ""; position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: var(--ambra); }
  .confronto__pallino {
    position: absolute; top: 50%; left: 0;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--calce);
    box-shadow: 0 6px 18px rgba(23, 29, 32, .28), inset 0 0 0 1px rgba(23, 29, 32, .08);
    color: var(--antracite);
    transform: translate(-50%, -50%);
    transition: transform 250ms var(--e-micro);
    --tratto: 12;
  }
  .confronto__chevron { width: 16px; height: 16px; transition: transform 160ms var(--e-micro); }
  .confronto__chevron--sx { transform: scaleX(-1); margin-right: -1px; }
  .confronto__chevron--dx { margin-left: -1px; }
  .confronto--verso-sx .confronto__chevron--sx { transform: scaleX(-1) translateX(3px); }
  .confronto--verso-dx .confronto__chevron--dx { transform: translateX(3px); }
  .confronto--battito .confronto__pallino { animation: battito 500ms var(--e-micro); }
  .confronto__cursore {
    position: absolute; inset: 0; z-index: 4;
    width: 100%; height: 100%; margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .confronto:has(.confronto__cursore:focus-visible) .confronto__pallino {
    outline: 2px solid var(--testo); outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 179, 59, .55);
  }
  .confronto-card__nome {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    min-height: 58px;
    padding-top: 6px;
    font-family: var(--f-titoli);
    font-size: 22px;
    color: var(--testo);
  }
  .confronto-card__icona { width: 34px; height: 34px; color: var(--ambra-icona); --tratto: 6; }
  .possibilita__nota { margin-top: 36px; text-align: center; font-size: 14px; color: var(--testo-2); }
  @media (max-width: 767.98px) {
    .possibilita__sottotitolo { font-size: 16px; }
    .possibilita__card { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
    .confronto-card, .confronto-card--bagno, .confronto-card--open-space { grid-column: auto; margin-top: 0; }
    /* una colonna sola: foto 4:3 mai più alte di 260 px (4 confronti, niente foto giganti in fila) */
    .confronto { max-height: 260px; }
    .confronto-card__corpo { padding: 6px; }
    .confronto-card__nome { min-height: 50px; font-size: 20px; }
    .possibilita__nota { margin-top: 24px; }
  }
  @media (max-width: 359.98px) {
    .confronto__etichetta { font-size: 10px; bottom: 10px; }
    .confronto__etichetta--prima { left: 10px; } .confronto__etichetta--dopo { right: 10px; }
    .confronto__pallino { width: 44px; height: 44px; }
  }

  /* ---------------------------------------------------- GLI AMBIENTI */
  .ambienti { --giunta: var(--carta); background: var(--intonaco); }
  .ambienti__disegno { right: -165px; top: 6%; opacity: .22; }
  .ambienti__testa {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(40px, 8vw, 128px);
    align-items: end;
  }
  .ambienti__titolo { max-width: 13em; }
  .ambienti__testi { padding-bottom: 26px; }
  .ambienti__sottotitolo {
    font-family: var(--f-titoli);
    font-style: italic;
    font-size: clamp(20px, 18.4px + .42vw, 24px);
    line-height: 1.35;
    color: var(--testo);
  }
  .ambienti__paragrafo { margin-top: 10px; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--testo-2); }
  /* griglia 3 + 4: la prima riga più grande (3:2), la seconda di quattro (4:3); al telefono l'esterno largo e poi coppie */
  .ambienti__griglia {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(28px, 2.8vw, 40px) clamp(16px, 1.7vw, 24px);
    margin-top: clamp(40px, 5vw, 64px);
  }
  .ambiente { grid-column: span 3; margin: 0; min-width: 0; }
  .ambiente:nth-child(-n+3) { grid-column: span 4; }
  .ambiente__foto {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--raggio);
    background: var(--sabbia);
  }
  .ambiente:nth-child(-n+3) .ambiente__foto { aspect-ratio: 3 / 2; }
  .ambiente__img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ambiente__nome {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px;
    font-family: var(--f-testo);
    font-size: 15px; font-weight: 600; line-height: 1.25;
    letter-spacing: .01em;
    color: var(--testo);
  }
  .ambiente__nome::before {
    content: ""; flex: none;
    width: 22px; height: 2px;
    background: var(--ambra);
    transform-origin: 0 50%;
    transition: transform 350ms var(--e-micro);
  }
  @media (pointer: fine) { .ambiente:hover .ambiente__nome::before { transform: scaleX(1.6); } }
  @media (max-width: 1023.98px) {
    .ambienti__disegno { display: none; }
    .ambienti__testa { grid-template-columns: minmax(0, 1fr); }
    .ambienti__testi { padding-bottom: 0; }
  }
  @media (max-width: 767.98px) {
    .ambienti__paragrafo { font-size: 16px; }
    .ambienti__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; margin-top: 32px; }
    .ambiente, .ambiente:nth-child(-n+3) { grid-column: auto; }
    .ambiente .ambiente__foto, .ambiente:nth-child(-n+3) .ambiente__foto { aspect-ratio: 4 / 3; }
    .ambiente:first-child { grid-column: 1 / -1; }
    .ambiente:first-child .ambiente__foto { aspect-ratio: 16 / 9; }
    .ambiente__nome { margin-top: 10px; gap: 8px; font-size: 14px; }
    .ambiente__nome::before { width: 16px; }
  }

  /* ---------------------------------------------------- METODO */
  .metodo {
    background: var(--antracite);
    color: #fff;
    padding-block: calc(var(--spazio) + 30px) calc(var(--spazio) + 20px);
    overflow: clip;
  }
  .metodo__onda {
    position: absolute; left: 0; right: 0; z-index: 3;
    width: 100%;
    height: clamp(30px, 4.2vw, 62px);
    pointer-events: none;
    overflow: visible;
  }
  .metodo__onda--su { top: -1px; fill: none; }   /* carta + grana dei lavori, con la maschera dell'onda */
  .metodo__onda--giu { bottom: -1px; fill: none; } /* intonaco + grana dell'impresa */
  .metodo__linea { fill: none; stroke: var(--ambra); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .metodo__onda-linea { z-index: 4; }
  html:not(.mv) .metodo .fondo__faro { display: none; } /* riduci movimento e senza JS: niente faro (§ 7), non una banda ferma */
  .metodo__gru {
    position: absolute; z-index: 1;
    left: max(-80px, calc(50% - 760px)); /* da 1440 in su come prima; sotto, il carico resta lontano dall'icona del passo 1 */
    /* 19%: la punta del braccio resta sotto il cartiglio (in alto a sinistra, § 1.5) anche con la
       parallasse a -40; la gru poggia più in basso, vicino all'onda */
    top: 19%; height: min(72%, 600px); width: auto;
    aspect-ratio: 380 / 600;
    opacity: .7;
  }
  /* la gru cala il carico (fune e blocco, sempre in vista nel margine): cavo e gancio della punta
     sinistra cadono fuori schermo fino a ~1520 px e restano fermi */
  .metodo__gru .gru__fune { transform-origin: 320px 111px; }
  .metodo__ponteggio {
    position: absolute; z-index: 1;
    right: max(-200px, calc(50% - 832px)); /* sempre 24 px o più a destra della colonna del passo 4 */
    top: 14%; height: min(70%, 580px); width: auto;
    aspect-ratio: 380 / 610;
    opacity: .62;
  }
  .metodo__contenuto { text-align: center; }
  .metodo__titolo { color: #fff; max-width: 15em; margin-inline: auto; }
  .metodo__percorso { position: relative; margin-top: clamp(32px, 4vw, 56px); max-width: 960px; margin-inline: auto; }
  .metodo__passi { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .passo { display: grid; }
  /* ogni passo è un pulsante: clic, tocco o Invio accendono i passi fino a lui (vedi METODO in main.js) */
  .passo__tasto {
    display: grid; justify-items: center; align-content: start; gap: 14px;
    width: 100%; margin: 0; padding: 0;
    border: 0; background: none; color: inherit;
    font: inherit; text-align: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .passo__tasto:focus-visible { outline-offset: 6px; border-radius: 10px; }
  .passo__icona {
    width: 36px; height: 36px;
    color: var(--ambra);
    --tratto: 5.5;
  }
  .passo__numero {
    position: relative;
    display: grid; place-items: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.8px var(--ambra);
    background: var(--antracite);
    font-family: var(--f-titoli);
    font-size: 24px; line-height: 1;
    color: var(--ambra);
    font-variant-numeric: tabular-nums;
    transition: background-color 300ms var(--e-traccia), color 300ms var(--e-traccia), transform 300ms var(--e-posa);
  }
  @media (hover: hover) {
    .passo__tasto:hover .passo__numero { transform: scale(1.06); }
    .passo:not(.passo--acceso) .passo__tasto:hover .passo__numero { background: rgba(255, 179, 59, .16); }
    .passo:not(.passo--acceso) .passo__tasto:hover .passo__nome { color: #fff; }
  }
  .passo__numero::after { /* stanghetta di quota sotto il cerchio */
    content: ""; position: absolute; left: 50%; bottom: -14px;
    width: 1.5px; height: 9px; margin-left: -.75px;
    background: var(--linea-scuro);
  }
  .passo__nome {
    max-width: 240px;
    margin-top: 8px;
    font-family: var(--f-titoli);
    font-size: 19px; line-height: 1.35;
    color: var(--su-scuro);
    text-wrap: pretty; /* come i paragrafi (è uno span): niente parola sola in fondo */
    transition: color 300ms var(--e-traccia);
  }
  /* senza JS tutti e 4 accesi; con JS li accende main.js (riduci movimento: tutti, e il clic è istantaneo) */
  html:not(.js) .passo .passo__numero, .passo--acceso .passo__numero { background: var(--ambra); color: var(--su-ambra); }
  html:not(.js) .passo .passo__nome, .passo--acceso .passo__nome { color: #fff; }
  html.js:not(.mv) .passo:not(.passo--acceso) .passo__icona { opacity: 0; }
  html:not(.mv) .passo__numero, html:not(.mv) .passo__nome { transition: none; }
  .metodo__binario {
    position: absolute;
    left: 12.5%; right: 12.5%;
    top: calc(36px + 14px + 32px - 1px);
    height: 2px;
    background: var(--linea-scuro);
  }
  .metodo__progresso { /* --riempito (0-1) lo scrive main.js: fino al passo scelto; senza JS pieno */
    position: absolute; inset: 0;
    background: var(--ambra);
    transform-origin: 0 50%;
    transform: scaleX(var(--riempito, 1));
  }
  @media (max-width: 1279.98px) {
    .metodo__gru { left: -70px; opacity: .22; }
    .metodo__ponteggio { right: -150px; opacity: .22; }
  }
  @media (max-width: 1023.98px) {
    /* dietro il titolo, con la punta sotto il cartiglio (in alto a sinistra) anche con la parallasse a -16 */
    .metodo__gru { left: -50px; top: calc(var(--spazio) + 16px); height: 46%; opacity: .25; }
    .metodo__ponteggio { right: -120px; top: auto; bottom: 0; height: 40%; opacity: .25; }
  }
  @media (max-width: 767.98px) {
    .metodo { padding-block: 104px 112px; }
    .metodo__onda { height: 48px; }
    .metodo__contenuto { text-align: left; }
    .metodo__titolo { margin-inline: 0; }
    .metodo .quota--centro { margin-inline: 0; }
    .metodo__percorso { margin-top: 28px; }
    .metodo__passi { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .passo__tasto {
      grid-template-columns: 52px minmax(0, 1fr);
      grid-template-rows: auto auto;
      justify-items: start; align-items: center;
      column-gap: 18px; row-gap: 6px;
    }
    .passo__numero { grid-column: 1; grid-row: 1 / span 2; align-self: start; width: 52px; height: 52px; font-size: 21px; }
    .passo__numero::after { display: none; }
    .passo__icona { grid-column: 2; grid-row: 1; width: 24px; height: 24px; --tratto: 8; }
    .passo__nome { grid-column: 2; grid-row: 2; margin: 0; max-width: 30em; font-size: 17px; text-align: left; }
    .metodo__binario { left: 25px; right: auto; top: 26px; bottom: 26px; width: 2px; height: auto; }
    .metodo__progresso { transform-origin: 50% 0; transform: scaleY(var(--riempito, 1)); }
    /* ponteggio in basso a destra al 25%: a misura fissa (come il 40% di prima), e i passi 3 e 4, che
       gli stanno accanto, si fermano 24 px prima del suo primo tratto (§ 7 Telefono) */
    .metodo__ponteggio { height: 292px; }
    .metodo__passi .passo:nth-child(n+3) .passo__nome { padding-right: 64px; }
  }
  @media (max-width: 359.98px) {
    .passo__tasto { grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
    .passo__numero { width: 44px; height: 44px; font-size: 18px; }
    .passo__nome { font-size: 16px; }
    .passo__icona { width: 20px; height: 20px; }
    .metodo__binario { left: 21px; top: 22px; bottom: 22px; }
  }

  /* ---------------------------------------------------- UN'IMPRESA SOLA */
  .riferimento { background: var(--intonaco); }
  .riferimento__disegno { right: -130px; top: 10%; opacity: .22; }
  .riferimento__griglia {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(40px, 8vw, 128px);
    align-items: center;
  }
  .riferimento__media { position: relative; }
  .riferimento__cornice { aspect-ratio: 3 / 2; }
  .riferimento__icona {
    position: absolute; z-index: 3;
    width: 56px; height: 56px;
  }
  .riferimento__galleggia {
    display: grid; place-items: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--calce);
    box-shadow: inset 0 0 0 1px var(--linea), 0 10px 22px -12px rgba(23, 29, 32, .35);
    color: var(--ambra-icona);
    --tratto: 6;
  }
  .riferimento__galleggia .icona { width: 36px; height: 36px; }
  .riferimento__icona--1 { left: -26px; top: -26px; }
  .riferimento__icona--2 { right: 20%; top: -28px; }
  .riferimento__icona--3 { left: -26px; bottom: -26px; }
  .riferimento__icona--4 { left: -28px; top: calc(50% - 28px); }
  @media (min-width: 1024px) and (max-width: 1279.98px) { /* il tondo resta a 8 px dal bordo dello schermo */
    .riferimento__icona--1, .riferimento__icona--3, .riferimento__icona--4 { left: max(-26px, calc(8px - var(--g))); }
  }
  .riferimento__squadra {
    position: absolute; z-index: 2;
    right: -44px; bottom: -36px;
    width: 248px; height: 72px;
    overflow: visible;
  }
  .riferimento__squadra-fondo { fill: var(--calce); }
  .riferimento__squadra-bordo { fill: none; stroke: var(--ambra); stroke-width: 1.5; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
  .riferimento__titolo { max-width: 12em; }
  .riferimento__evidenza {
    position: relative;
    max-width: 18em;
    margin-top: 28px;
    text-wrap: balance;
    font-family: var(--f-titoli);
    font-style: italic;
    font-size: var(--fs-citazione);
    line-height: 1.3;
    color: var(--testo);
  }
  .riferimento__paragrafo { font-size: 18px; line-height: 1.6; color: var(--testo-2); }
  .riferimento__paragrafo + .riferimento__paragrafo { margin-top: 10px; }
  .riferimento__chiusa {
    position: relative;
    display: inline-block;
    margin-top: 16px;
    padding-bottom: 6px;
    font-size: 18px; font-weight: 600;
    color: var(--testo);
  }
  .riferimento__chiusa::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 72px; height: 2px; background: var(--ambra);
    transform-origin: 0 50%;
  }
  @media (max-width: 1023.98px) {
    .riferimento__griglia { grid-template-columns: minmax(0, 1fr); row-gap: 72px; }
    .riferimento__disegno { display: none; }
    .riferimento__icona { width: 40px; height: 40px; }
    .riferimento__galleggia .icona { width: 28px; height: 28px; --tratto: 7; }
    .riferimento__icona--1 { left: 10px; top: 10px; }
    .riferimento__icona--2 { right: 10px; top: 10px; }
    .riferimento__icona--3 { left: 10px; bottom: 10px; }
    .riferimento__icona--4 { left: auto; right: 10px; top: auto; bottom: 10px; }
    .riferimento__squadra { right: auto; left: calc(50% - 100px); bottom: -30px; width: 200px; height: 58px; }
  }
  /* senza movimento (riduci movimento o senza JS): le icone sono già in fila dentro la squadra, come a fine convergenza */
  html:not(.mv) .riferimento__icona { left: auto; top: auto; bottom: -28px; transform: scale(.8); }
  html:not(.mv) .riferimento__icona--2 { right: 140px; }
  html:not(.mv) .riferimento__icona--1 { right: 81.33px; }
  html:not(.mv) .riferimento__icona--3 { right: 22.67px; }
  html:not(.mv) .riferimento__icona--4 { right: -36px; }
  @media (max-width: 1023.98px) {
    html:not(.mv) .riferimento__icona { right: auto; bottom: -21px; transform: scale(.9); }
    html:not(.mv) .riferimento__icona--2 { left: calc(50% - 91px); }
    html:not(.mv) .riferimento__icona--1 { left: calc(50% - 43.66px); }
    html:not(.mv) .riferimento__icona--3 { left: calc(50% + 3.65px); }
    html:not(.mv) .riferimento__icona--4 { left: calc(50% + 50.97px); }
  }
  @media (max-width: 767.98px) {
    .riferimento__griglia { row-gap: 56px; }
    .riferimento__paragrafo, .riferimento__chiusa { font-size: 16px; }
    .riferimento__evidenza { margin-top: 20px; }
  }
  @media (max-width: 359.98px) {
    .riferimento__galleggia .icona { width: 24px; height: 24px; }
    .riferimento__icona { width: 36px; height: 36px; }
    html:not(.mv) .riferimento__icona { bottom: -19px; transform: none; }
    html:not(.mv) .riferimento__icona--2 { left: calc(50% - 89px); }
    html:not(.mv) .riferimento__icona--1 { left: calc(50% - 41.66px); }
    html:not(.mv) .riferimento__icona--3 { left: calc(50% + 5.65px); }
    html:not(.mv) .riferimento__icona--4 { left: calc(50% + 52.97px); }
  }

  /* ---------------------------------------------------- DOVE LAVORIAMO */
  .zona { --giunta: var(--intonaco); background: var(--sabbia); overflow: clip; }
  .zona__griglia {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    align-items: center;
    column-gap: 24px;
    min-height: 560px;
  }
  .zona__testo { grid-column: 1; position: relative; z-index: 3; }
  .zona__regioni { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
  .zona__regione {
    position: relative;
    isolation: isolate;
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 48px;
    padding: 0 20px 0 14px;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1.5px var(--ambra-icona);
    background: rgba(251, 250, 247, .55);
    font-family: var(--f-titoli);
    font-size: 19px;
    color: var(--testo);
    --tratto: 8;
  }
  .zona__regione::after { /* chip acceso: fondo e anello fermi in uno strato che si accende con l'opacità */
    content: "";
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: var(--calce);
    box-shadow: inset 0 0 0 2px var(--ambra-icona);
    opacity: 0;
    transition: opacity 200ms var(--e-micro);
    pointer-events: none;
  }
  .zona__regione.acceso::after { opacity: 1; }
  .zona__spillo { width: 24px; height: 24px; color: var(--ambra-icona); }
  .zona__paragrafo { color: var(--testo-2); max-width: 30em; }
  .zona__paragrafo + .zona__paragrafo { margin-top: 10px; }
  .zona__link {
    display: inline-block;
    margin-top: 10px;
    padding-block: 10px;
    color: var(--ambra-testo);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-wrap: balance;
    --tratto: 10;
  }
  .zona__link .icona { display: inline-block; width: 20px; height: 20px; margin-left: 10px; vertical-align: -4px; transition: transform var(--t-micro) var(--e-micro); }
  .zona__link:hover .icona, .zona__link:focus-visible .icona { transform: translateX(4px); }
  .zona__mappa { grid-column: 2; position: relative; z-index: 3; margin-left: -6%; margin-right: -14%; }
  .mappa { width: 100%; height: auto; overflow: visible; }
  .mappa__italia { fill: #DCDAD4; stroke: #FAF8F2; stroke-width: 1.2; stroke-linejoin: round; }
  .mappa__regione {
    fill: var(--ambra-viva);
    stroke: #FAF8F2; stroke-width: 1.2; stroke-linejoin: round;
    transform-box: fill-box;
    transition: fill 200ms var(--e-micro), stroke 200ms var(--e-micro); /* micro-stato ammesso; lo spessore cambia senza transizione */
  }
  .mappa__regione--abruzzo { transform-origin: 51% 70%; }
  .mappa__regione--marche { transform-origin: 80% 100%; }
  .mappa__regione.acceso { fill: #F9A24D; stroke: var(--ambra-icona); stroke-width: 2; }
  .mappa__filo { fill: none; stroke: var(--ambra-testo); stroke-width: 1.6; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
  .mappa__attacco { fill: var(--antracite); }
  .mappa__sede { fill: var(--antracite); }
  .mappa__onda { fill: none; stroke: var(--antracite); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
  .mappa__etichetta { font-family: var(--f-testo); font-size: 22px; font-weight: 600; fill: var(--ambra-testo); letter-spacing: .02em; paint-order: stroke; stroke: rgba(251, 250, 247, .94); stroke-width: 7px; stroke-linejoin: round; }
  .mappa__citta { font-family: var(--f-testo); font-size: 18px; font-weight: 600; fill: var(--testo); letter-spacing: .04em; paint-order: stroke; stroke: rgba(251, 250, 247, .9); stroke-width: 5px; stroke-linejoin: round; }
  .zona__foto {
    position: absolute; z-index: 1;
    top: clamp(48px, 6vw, 96px); bottom: clamp(48px, 6vw, 96px);
    right: max(0px, calc((100% - var(--cornice)) / 2));
    width: min(32%, 520px);
    border-radius: 0;
    background: transparent;
    -webkit-mask-image: url("../img/fondo/onda-verticale.svg"), linear-gradient(#000, #000);
    mask-image: url("../img/fondo/onda-verticale.svg"), linear-gradient(#000, #000);
    -webkit-mask-size: 90px 100%, calc(100% - 89px) 100%;
    mask-size: 90px 100%, calc(100% - 89px) 100%;
    -webkit-mask-position: 0 0, 100% 0;
    mask-position: 0 0, 100% 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .zona__foto .media__parallasse { inset: -32px 0; }
  .zona__foto .media__respiro { inset: 0; }
  @media (min-width: 1600px) { .zona__foto { border-radius: 0 var(--raggio) var(--raggio) 0; } }
  @media (max-width: 1279.98px) { .mappa__citta { font-size: 20px; } .mappa__etichetta { font-size: 25px; } }
  @media (max-width: 1023.98px) {
    .zona { padding-bottom: 0; }
    .zona__griglia { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: 28px; }
    .zona__mappa { grid-column: 1; margin: 0 auto; width: min(86%, 380px); }
    .zona__foto {
      position: relative; inset: auto;
      width: 100%;
      aspect-ratio: 16 / 9;
      margin-top: 32px;
      -webkit-mask-image: url("../img/fondo/onda-orizzontale.svg"), linear-gradient(#000 calc(100% - 72px), transparent); /* in basso sfuma verso chi siamo */
      mask-image: url("../img/fondo/onda-orizzontale.svg"), linear-gradient(#000 calc(100% - 72px), transparent);
      -webkit-mask-size: 100% 48px, 100% calc(100% - 47px);
      mask-size: 100% 48px, 100% calc(100% - 47px);
      -webkit-mask-position: 0 0, 0 100%;
      mask-position: 0 0, 0 100%;
    }
    .zona__foto .media__parallasse { inset: 0; }
  }
  @media (max-width: 767.98px) {
    .zona__mappa { width: min(100%, 340px); margin-top: -8px; }
    .zona__regioni { flex-wrap: nowrap; }
    .mappa__etichetta { font-size: 34px; stroke-width: 9px; }
    .mappa__citta { font-size: 26px; stroke-width: 7px; }
  }
  @media (max-width: 359.98px) {
    .zona__regione { min-height: 40px; font-size: 17px; padding: 0 14px 0 10px; }
    .zona__mappa { width: 270px; }
  }

  /* ---------------------------------------------------- CHI SIAMO */
  .chi { --giunta: var(--sabbia); background: var(--intonaco); }
  /* codici che non vanno spezzati sul trattino («AQ-180227», «2-bis», «REA AQ-214374»): stesso testo,
     solo niente a capo dentro (chi siamo, domande, footer di tutte le pagine, privacy) */
  .intero { white-space: nowrap; }
  .chi__disegno--sx { left: -130px; bottom: 6%; }
  .chi__disegno--dx { right: -165px; top: 8%; } /* a 1440 resta nel margine (bordo sinistro a 1364, testo fino a 1360) */
  /* fra 1024 e 1439 il margine è più stretto del disegno: passa dietro la colonna dei testi, quindi 22% (regola 1.3) */
  @media (min-width: 1024px) and (max-width: 1439.98px) { .chi__disegno--dx { opacity: .22; } }
  .chi__griglia {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(40px, 8vw, 128px);
    align-items: center;
  }
  .chi__media { position: relative; }
  .chi__foto { aspect-ratio: 3 / 2; }
  .chi__cantiere {
    position: absolute; z-index: 2;
    right: -9%; bottom: -24%;
    width: 46%;
    aspect-ratio: 16 / 9;
    border: 6px solid var(--calce);
  }
  .chi__paragrafo { color: var(--testo-2); font-size: 18px; max-width: 46ch; }
  .chi__elenco {
    margin-top: 26px;
    padding: 8px 24px;
    border-radius: var(--raggio);
    background: var(--carta);
    border: 1px solid var(--linea);
  }
  .chi__voce {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 22px;
    align-items: start;
    gap: 14px;
    padding: 16px 0;
    font-size: 17px; line-height: 1.45;
    color: var(--testo);
  }
  .chi__voce + .chi__voce { border-top: 1px solid var(--linea); }
  .chi__icona { width: 28px; height: 28px; color: var(--ambra-icona); --tratto: 7; margin-top: -2px; }
  .chi__spunta { width: 22px; height: 22px; color: var(--ambra-icona); --tratto: 11; margin-top: 1px; }
  .chi__chiusa {
    position: relative;
    display: inline-block;
    text-wrap: balance;
    margin-top: 24px;
    padding-bottom: 8px;
    font-family: var(--f-titoli);
    font-style: italic;
    font-size: 20px;
    color: var(--testo);
  }
  .chi__chiusa::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 64px; height: 2px; background: var(--ambra);
    transform-origin: 0 50%;
  }
  @media (max-width: 1023.98px) {
    .chi__griglia { grid-template-columns: minmax(0, 1fr); row-gap: 100px; }
    .chi__cantiere { right: -6px; bottom: -80px; width: 48%; border-width: 5px; }
    .chi__disegno--sx { display: none; }
    .chi__disegno--dx { opacity: .24; }
  }
  @media (max-width: 767.98px) {
    .chi__paragrafo { font-size: 16px; }
    .chi__elenco { padding: 4px 18px; }
  }
  @media (max-width: 359.98px) {
    .chi__elenco { padding: 2px 16px; }
    .chi__voce { grid-template-columns: 24px minmax(0, 1fr) 20px; gap: 10px; font-size: 15px; }
    .chi__icona { width: 24px; height: 24px; }
  }

  /* ---------------------------------------------------- DOMANDE */
  .faq { --giunta: var(--intonaco); background: var(--sabbia-leggera); padding-bottom: calc(var(--spazio) + 40px); }
  .faq .fondo--tavola { background: var(--sabbia-leggera); }
  @media (min-width: 768px) { /* al telefono vale la maschera dei componenti (griglia solo nei 20 px ai margini) */
    .faq .fondo__griglia { /* la sfumatura in alto e in basso (--griglia-y) resta quella dei componenti */
      --griglia-x: linear-gradient(90deg, #000 0, rgba(0, 0, 0, .6) 10%, transparent 22%, transparent 78%, rgba(0, 0, 0, .6) 90%, #000 100%);
    }
  }
  .faq__ponteggio {
    position: absolute; z-index: 1;
    left: -60px; bottom: 6%;
    height: 520px; width: auto; aspect-ratio: 380 / 610;
    color: var(--grafite);
    fill: none; stroke: currentColor; stroke-width: 1.1;
    opacity: .10;
    pointer-events: none;
  }
  .faq__griglia {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(32px, 5vw, 80px);
    align-items: start;
  }
  .faq__testa { position: sticky; top: 120px; }
  .faq__elenco { display: grid; gap: 12px; }
  .faq__voce {
    position: relative;
    isolation: isolate;
    border-radius: 10px;
    background: rgba(251, 250, 247, .6);
    box-shadow: inset 0 0 0 1px var(--linea);
  }
  .faq__voce::after { /* voce aperta: il fondo carta (col suo filetto) si accende con l'opacità, non col colore */
    content: "";
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: var(--carta);
    box-shadow: inset 0 0 0 1px var(--linea);
    opacity: 0;
    transition: opacity 300ms var(--e-traccia);
    pointer-events: none;
  }
  .faq__voce.aperta::after { opacity: 1; }
  .faq__voce::before { /* regolo ambra della voce aperta */
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
    width: 3px; border-radius: 3px;
    background: var(--ambra);
    transform: scaleY(0); transform-origin: 50% 0;
    transition: transform 250ms var(--e-ritiro);
  }
  .faq__voce.aperta::before { transform: scaleY(1); transition: transform 350ms var(--e-traccia); }
  .faq__domanda button {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    width: 100%;
    min-height: 64px;
    padding: 16px 20px 16px 24px;
    border-radius: 10px;
    text-align: left;
    font-family: var(--f-titoli);
    font-size: var(--fs-voce); line-height: 1.25; /* 24 · 22 · 19 · 18 (tabella 1.2) */
    color: var(--testo);
    transition: color 200ms;
  }
  .faq__domanda button:hover, .faq__domanda button:focus-visible { color: var(--ambra-testo); }
  .faq__segno {
    position: relative;
    flex: none;
    width: 32px; height: 32px;
    transform: translateX(var(--sx, 0)) rotate(var(--ruota, 0deg));
    transition: transform 250ms var(--e-micro);
  }
  .faq__segno::before, .faq__segno::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    background: var(--ambra-icona);
    border-radius: 2px;
  }
  .faq__segno::before { width: 16px; height: 2px; margin: -1px 0 0 -8px; transition: transform 250ms var(--e-micro); }
  .faq__segno::after { width: 2px; height: 16px; margin: -8px 0 0 -1px; }
  .faq__domanda button:hover, .faq__domanda button:focus-visible { --sx: 2px; }
  .aperta { --ruota: 90deg; }
  .aperta .faq__segno::before { transform: scaleX(0); }
  .faq__risposta { display: grid; grid-template-rows: 1fr; }
  .faq__risposta > div { overflow: hidden; }
  .faq__risposta p { padding: 0 24px 22px; font-size: 17px; line-height: 1.6; color: var(--testo-2); max-width: calc(50ch + 48px); }
  html.js .faq__voce:not(.aperta) .faq__risposta { grid-template-rows: 0fr; }
  html.js .faq__voce:not(.aperta) .faq__risposta > div { visibility: hidden; }
  /* senza JS le risposte sono tutte aperte e i pulsanti non fanno nulla: niente segno (diceva «+» su una
     voce aperta), niente mano e niente colore all'hover; nell'HTML aria-expanded è "true" su tutte */
  html:not(.js) .faq__segno { display: none; }
  html:not(.js) .faq__voce::after { opacity: 1; } /* tutte aperte: tutte col fondo carta, e nessun regolo che ne distingua una */
  html:not(.js) .faq__voce::before { display: none; }
  html:not(.js) .faq__domanda button { cursor: default; }
  html:not(.js) .faq__domanda button:hover { color: var(--testo); }
  @media (max-width: 1023.98px) {
    .faq__griglia { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
    .faq__testa { position: static; text-align: center; }
    .faq__testa .quota { margin-inline: auto; margin-bottom: 0; }
  }
  @media (max-width: 767.98px) {
    .faq__domanda button { min-height: 56px; padding: 14px 16px 14px 18px; }
    .faq__segno { width: 24px; height: 24px; }
    .faq__risposta p { font-size: 16px; padding: 0 18px 18px; }
    .faq__ponteggio { display: none; }
  }
  @media (max-width: 359.98px) {
    .faq__domanda button { padding: 14px; }
    .faq__risposta p { padding: 0 14px 16px; }
  }

  /* ---------------------------------------------------- FOOTER */
  .piede {
    background: var(--antracite);
    color: var(--su-scuro);
    padding-block: 0 0;
    overflow: clip;
  }
  .piede__onda {
    position: relative; z-index: 3;
    display: block;
    width: 100%;
    height: clamp(28px, 3.8vw, 56px);
    margin-bottom: -1px;
    overflow: visible;
  }
  .piede__onda-fondo { fill: none; } /* sabbia leggera + grana delle domande, con la maschera dell'onda */
  .piede__onda-linea { position: absolute; top: 0; left: 0; z-index: 4; }
  .piede__linea { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .piede__ponteggio {
    position: absolute; z-index: 1;
    top: 300px;
    height: 360px; width: auto; aspect-ratio: 380 / 610;
    opacity: .6;
  }
  .piede__ponteggio--sx { left: -150px; }
  .piede__ponteggio--dx { right: -170px; }
  /* sotto 1440 il margine è più stretto della parte visibile del ponteggio: passa dietro i testi,
     quindi al massimo 22% (regola ferma 1.3: dietro un testo mai oltre il 25%) */
  @media (max-width: 1439.98px) { .piede__ponteggio { opacity: .22; } }
  .piede__riga {
    position: relative; z-index: 2;
    margin-top: clamp(24px, 3vw, 40px);
    height: 168px;
    overflow: hidden;
  }
  /* il giro si chiude: lo spazio fra le foto c'è anche dopo l'ultima (padding-right), così la traccia è
     larga 12 × (foto + spazio) e -50% vale esattamente 6 foto: a fine giro la riga non scatta */
  .piede__riga-traccia {
    --spazio-riga: 16px;
    display: flex; gap: var(--spazio-riga);
    padding-right: var(--spazio-riga);
    width: max-content;
    height: 100%;
  }
  .piede__riga-traccia img {
    width: 252px; height: 168px;
    flex: none;
    object-fit: cover;
    border-radius: 10px;
  }
  .piede__sfuma { position: absolute; top: 0; bottom: 0; width: clamp(40px, 10vw, 160px); pointer-events: none; }
  .piede__sfuma--sx { left: 0; background: linear-gradient(90deg, var(--antracite), transparent); }
  .piede__sfuma--dx { right: 0; background: linear-gradient(-90deg, var(--antracite), transparent); }
  .piede__griglia {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
    margin-top: clamp(96px, 9vw, 136px);
    padding-bottom: 56px;
  }
  .piede .cartiglio { top: -40px; }
  .piede__griglia > div { padding-inline: clamp(24px, 3vw, 48px); }
  .piede__griglia > div:first-of-type { padding-left: 0; }
  .piede__griglia > div + div { border-left: 1px solid var(--linea-scuro); }
  .piede__titolo { font-size: var(--fs-h2); line-height: 1.08; color: #fff; }
  .piede__invito .quota { margin-block: 18px 20px; }
  .piede__sottotitolo { color: var(--su-scuro); max-width: 24em; }
  .piede__sottotitolo + .piede__sottotitolo { margin-top: 8px; }
  .piede__pulsante { margin-top: 26px; }
  .piede__whatsapp { margin-top: 10px; }
  .piede__etichetta { font-size: 14px; font-weight: 600; letter-spacing: .04em; color: var(--su-scuro-2); }
  .piede__recapito { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
  .piede__icona {
    position: relative;
    isolation: isolate;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--linea-scuro);
    color: var(--ambra);
    --tratto: 7;
  }
  .piede__icona::before { /* hover: anello ambra e fondo caldo fermi, accesi con l'opacità */
    content: "";
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: rgba(255, 179, 59, .08);
    box-shadow: inset 0 0 0 1px var(--ambra);
    opacity: 0;
    transition: opacity var(--t-micro) var(--e-micro);
    pointer-events: none;
  }
  .piede__icona:hover::before { opacity: 1; }
  .piede__icona .icona { width: 24px; height: 24px; }
  .piede__numero { margin-left: 4px; font-size: 22px; font-weight: 500; color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
  .piede__email { display: flex; align-items: center; flex-wrap: wrap; gap: 0 8px; margin-top: 22px; }
  .piede__diagonale { width: 16px; height: 16px; color: var(--ambra); --tratto: 12; opacity: 0; transform: translate(-4px, 4px); transition: opacity var(--t-micro), transform var(--t-micro) var(--e-micro); }
  .piede__email:hover .piede__diagonale, .piede__email:focus-within .piede__diagonale { opacity: 1; transform: none; }
  .piede__zone { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; color: var(--su-scuro); }
  .piede__spillo { width: 22px; height: 22px; color: var(--ambra); --tratto: 9; margin-top: 2px; }
  .piede a { text-decoration: none; transition: color 200ms; }
  .piede__email a, .piede__dati a, .piede__legale a { color: #fff; }
  /* sottolineatura che si stende all'hover: un filo fermo in ::after scalato in X (niente background-size animato) */
  .piede__email a, .piede__dati a, .piede__legale a, .piede__numero { position: relative; }
  .piede__email a::after, .piede__dati a::after, .piede__legale a::after, .piede__numero::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 200ms var(--e-micro);
    pointer-events: none;
  }
  .piede__email a:hover::after, .piede__dati a:hover::after, .piede__legale a:hover::after, .piede__numero:hover::after,
  .piede__email a:focus-visible::after, .piede__dati a:focus-visible::after, .piede__legale a:focus-visible::after, .piede__numero:focus-visible::after { transform: none; }
  .piede .pulsante, .piede__icona, .piede__whatsapp { background-image: none; }
  .piede__whatsapp span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
  .piede .pulsante { background-color: var(--ambra); }
  .piede .pulsante:hover { background-color: #FFBE57; }
  .piede .pulsante::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); }
  .piede__marchio { display: grid; align-content: start; }
  .piede__logo { width: 240px; height: auto; aspect-ratio: 1480 / 430; object-fit: contain; }
  .piede__societa { margin-top: 18px; font-size: 17px; color: #fff; }
  .piede__dati { margin-top: 6px; font-size: 14px; color: var(--su-scuro-2); }
  .piede__dati a { color: var(--su-scuro); }
  .piede__dominio { margin-top: 6px; font-size: 14px; color: var(--su-scuro); }
  .piede__legale {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px;
    padding-block: 22px calc(22px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linea-scuro);
    font-size: 13px;
    color: var(--su-scuro-2);
  }
  .piede__link { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
  .piede__barra { width: 1px; height: 14px; background: var(--linea-scuro); }
  .piede__legale a { color: var(--su-scuro); }
  @media (max-width: 1023.98px) {
    .piede__griglia { grid-template-columns: minmax(0, 1fr); margin-top: 88px; padding-bottom: 32px; }
    .piede__griglia > div { padding: 28px 0; }
    .piede__griglia > div:first-of-type { padding-top: 0; }
    .piede__griglia > div + div { border-left: 0; border-top: 1px solid var(--linea-scuro); }
    .piede__pulsante { width: 100%; max-width: 340px; }
    .piede__ponteggio { top: auto; bottom: 60px; height: 240px; opacity: .22; } /* negli angoli passa dietro i dati e la riga legale: 22%, non 30% (regola 1.3) */
    .piede__ponteggio--sx { left: -120px; } .piede__ponteggio--dx { right: -130px; }
    .piede__logo { width: 200px; }
    .piede .cartiglio { top: -44px; }
  }
  @media (max-width: 767.98px) {
    .piede__riga { height: 112px; margin-top: 20px; }
    .piede__riga-traccia { --spazio-riga: 12px; }
    .piede__riga-traccia img { width: 168px; height: 112px; border-radius: 8px; }
    .piede__legale { flex-direction: column; align-items: flex-start; }
    .piede__link .credit { flex-basis: 100%; }
    /* la firma va su una riga a sé: la barra subito prima resterebbe orfana dopo «Cookie»
       (:last-of-type non la trovava, l'ultimo span è .credit) */
    .piede__link > .piede__barra:nth-last-child(2) { display: none; }
  }
  @media (max-width: 359.98px) {
    .piede__riga { height: 96px; }
    .piede__riga-traccia img { width: 144px; height: 96px; }
    .piede__numero { font-size: 20px; }
    .piede__legale { font-size: 12px; }
    .piede__ponteggio--sx { left: -140px; } /* resta nell'angolo, quasi fuori dai testi che partono a 16 px */
  }
  /* riduci movimento: la riga è ferma e si scorre a mano, una foto alla volta (6 case, la copia per il
     giro si nasconde). Lo scroller è dentro aria-hidden: nell'HTML ha tabindex="-1", così il Tab non ci entra */
  @media (prefers-reduced-motion: reduce) {
    .piede__riga {
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--g);
      scrollbar-width: none;
    }
    .piede__riga::-webkit-scrollbar { display: none; }
    .piede__riga-traccia { padding-inline: var(--g); }
    .piede__riga-traccia img { scroll-snap-align: start; }
    .piede__riga-traccia img:nth-child(n + 7) { display: none; }
    .piede__sfuma { display: none; }
  }

  /* ---------------------------------------------------- BANNER COOKIE */
  .cookie-bar {
    position: fixed; z-index: 70;
    left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: 12px;
    width: max-content; max-width: min(560px, calc(100% - 24px));
    padding: 6px 8px 6px 20px;
    border-radius: 999px;
    background: rgba(32, 40, 45, .97);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--linea-scuro);
    color: #fff;
    font-size: 13px; line-height: 1.3;
    transform: translateX(-50%);
    isolation: isolate;
  }
  .cookie-bar::before { /* la grana del kit, ferma */
    content: "";
    position: absolute; inset: 0; z-index: -1;
    border-radius: inherit;
    background: var(--grana-antracite) 0 0 / 256px 256px;
    pointer-events: none;
  }
  .cookie-bar p { white-space: nowrap; }
  html.menu-aperto .cookie-bar { visibility: hidden; }
  /* si fa da parte (scende) quando coprirebbe il titolo o i pulsanti dell'apertura: schermi bassi, orizzontale */
  .cookie-bar--via { opacity: 0; translate: 0 calc(100% + 24px); visibility: hidden; pointer-events: none; }
  .cookie-bar__ok {
    flex: none;
    min-height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--ambra);
    color: var(--su-ambra);
    font-weight: 600; font-size: 13px;
  }
  .cookie-bar__link { flex: none; color: #fff; white-space: nowrap; text-underline-offset: 3px; padding-right: 10px; }
  .cookie-bar__ok:hover, .cookie-bar__ok:focus-visible { background: #FFBE57; }
  .cookie-bar__ok:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 3px var(--su-ambra); } /* come i pulsanti ambra */
  #contenuto:focus { outline: none; box-shadow: none; } /* riceve il focus (tabindex -1) se si chiude il banner da tastiera */
  /* finché il banner è aperto, in fondo alla pagina la riga legale (firma compresa) resta sopra il banner */
  html.cookie-aperto .piede__legale { padding-bottom: calc(22px + 64px + env(safe-area-inset-bottom)); }
  @media (max-width: 767.98px) {
    .cookie-bar { left: 12px; right: 12px; width: auto; max-width: none; transform: none; justify-content: space-between; gap: 7px; padding: 6px 8px 6px 12px; font-size: 12px; }
    .cookie-bar__ok { font-size: 12px; padding: 0 12px; }
    .cookie-bar__link { padding-right: 6px; }
  }
  @media (max-width: 359.98px) {
    .cookie-bar { left: 8px; right: 8px; font-size: 11px; padding: 5px 4px 5px 10px; gap: 5px; }
    .cookie-bar__ok { min-height: 28px; padding: 0 9px; font-size: 11px; }
    .cookie-bar__link { padding-right: 4px; }
  }

  /* ---------------------------------------------------- PAGINE INTERNE (privacy, 404) */
  .pagina { position: relative; isolation: isolate; padding-top: calc(var(--testata-h) + 64px); }
  .pagina__cornice { z-index: 2; }
  .pagina__testo { max-width: 760px; margin-inline: auto; padding-bottom: 40px; }
  .pagina__testo h1 { font-size: var(--fs-h2); line-height: 1.1; margin-bottom: 14px; }
  .pagina__testo h2 { font-size: 26px; line-height: 1.2; margin: 40px 0 12px; scroll-margin-top: 90px; }
  .pagina__testo p { color: var(--testo-2); margin-top: 12px; }
  .pagina__testo a { color: var(--ambra-testo); text-underline-offset: 3px; }
  .pagina__testo a[href^="mailto:"] { white-space: nowrap; } /* la PEC non va a capo sul trattino («nova-» / «srls@…») */
  .pagina__testo strong { color: var(--testo); font-weight: 600; }
  .pagina__nota { font-size: 14px; }
  .pagina-interna .piede__onda { --onda-colore: var(--intonaco); }
  .pagina--cantiere {
    min-height: min(100svh, 860px);
    display: grid; align-items: center;
    padding-block: calc(var(--testata-h) + 48px) 120px;
    color: #fff;
    background: var(--antracite-profondo);
  }
  .pagina__sfondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
  .pagina__sfondo img { width: 100%; height: 100%; object-fit: cover; }
  /* velo all'85% (§14); in basso la foto sfuma nell'antracite profondo, lo stesso colore della parte alta
     dell'onda del footer: niente taglio orizzontale fra la foto e l'onda */
  .pagina__velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 29, 32, 0) 70%, var(--antracite-profondo) 100%), rgba(23, 29, 32, .85); }
  .pagina__404 h1 { font-size: var(--fs-h1); line-height: 1.04; color: #fff; }
  .pagina__404 p { font-size: var(--fs-apertura); color: rgba(255, 255, 255, .92); max-width: 32em; }
  .pagina__404 .quota { color: var(--ambra); }
  .pagina__azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
  .pagina-404 .piede__onda:not(.piede__onda-linea) { background: var(--antracite-profondo); }
  @media (max-width: 767.98px) {
    .pagina { padding-top: calc(var(--testata-h) + 40px); }
    .pagina__azioni { flex-direction: column; align-items: stretch; }
    .pagina__azioni .pulsante { max-width: 340px; }
  }
}

/* =========================================================== MOVIMENTO
   Tutto qui sotto vale solo con html.mv: niente JS o «riduci movimento» = niente di nascosto. */
@layer movimento {
  @keyframes posa { from { opacity: 0; transform: translate3d(0, var(--salita), 0); } to { opacity: 1; transform: none; } }
  @keyframes posa-giu { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
  @keyframes traccia { from { stroke-dashoffset: 1; opacity: 0; } 15% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
  @keyframes rivela-titolo {
    from { clip-path: inset(0% -6% 100% -6%); transform: translate3d(0, 32px, 0); }
    to { clip-path: inset(-10% -6% -14% -6%); transform: none; }
  }
  @keyframes linea-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes linea-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes premi { from { opacity: 0; transform: translate3d(0, var(--salita), 0) scale(.96); } to { opacity: 1; transform: none; } }
  @keyframes luce-pulsante { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
  @keyframes battito { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 45% { transform: translate(-50%, -50%) scale(1.12); } }
  @keyframes cornetta { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(8deg); } }
  @keyframes squillo { 0%, 100% { transform: rotate(0); } 12%, 45%, 78% { transform: rotate(-10deg); } 28%, 62%, 92% { transform: rotate(10deg); } }
  @keyframes chiave { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-20deg); } }
  @keyframes spillo { from { transform: translateY(-10px); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
  @keyframes onda-sede { from { transform: scale(1); opacity: .5; } to { transform: scale(3); opacity: 0; } }
  @keyframes scorri { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
  @keyframes lama { from { transform: translateX(-14%) scale(2.5); } to { transform: translateX(14%) scale(2.5); } }
  @keyframes luce { from { transform: translate3d(-10vw, 0, 0) scale(2); } to { transform: translate3d(30vw, 4vh, 0) scale(2); } }
  @keyframes faro { from { transform: translateX(-50%); } to { transform: translateX(0); } }
  @keyframes respira { from { opacity: .75; } to { opacity: 1; } }
  @keyframes deriva { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(40px, 24px, 0); } }
  @keyframes striscione { from { transform: scale(1) translateY(-3px); } to { transform: scale(1.015) translateY(3px); } }
  @keyframes ken-burns { from { transform: scale(1.04) translateX(-1%); } to { transform: scale(1.10) translateX(1%); } }

  /* ---- APERTURA: entra al caricamento, senza aspettare il JS ---- */
  /* la testata entra con «translate» (proprietà a sé): il transform resta libero per la barra piena
     (logo scale .8) e per la pressione dei pulsanti, anche ad animazione finita */
  @keyframes testata-giu { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: none; } }
  html.mv .testata__logo { animation: testata-giu 600ms var(--e-posa) 100ms both; }
  @media (min-width: 1024px) {
    html.mv .menu__voci li { animation: testata-giu 600ms var(--e-posa) both; }
    html.mv .menu__voci li:nth-child(1) { animation-delay: 150ms; }
    html.mv .menu__voci li:nth-child(2) { animation-delay: 200ms; }
    html.mv .menu__voci li:nth-child(3) { animation-delay: 250ms; }
    html.mv .menu__voci li:nth-child(4) { animation-delay: 300ms; }
    html.mv .menu__voci li:nth-child(5) { animation-delay: 350ms; }
    html.mv .menu__voci li:nth-child(6) { animation-delay: 400ms; }
    html.mv .pulsante--testata { animation: testata-giu 600ms var(--e-posa) 420ms both; }
    html.mv .pulsante--testata .icona { animation: traccia 800ms var(--e-traccia) 600ms both; }
    /* hover e focus di «Chiama»: la cornetta oscilla; «traccia» resta nella lista, così all'uscita non riparte */
    html.mv .pulsante--testata:is(:hover, :focus-visible) .icona { animation: traccia 800ms var(--e-traccia) 600ms both, cornetta 400ms var(--e-micro) both; transform-origin: 50% 50%; }
  }
  /* ENTRATA DEL LOGO (≈ 3,2 s), ben leggibile anche al telefono. Parte solo con html.via, cioè quando la pagina
     si vede davvero (poster e font pronti, main.js): prima le animazioni dell'apertura restano in pausa sullo
     stato iniziale. 1 · la casetta si disegna a tratto in 1,4 s, seguita da una scia di luce ambra sfocata che
     poi si spegne; 2 · la base tricolore si stende da sinistra; 3 · NOVA e RISTRUTTURAZIONI salgono e compaiono;
     4 · un riflesso di luce attraversa casetta e scritta. Il tratteggio riparte a ogni sottotracciato: con
     pathLength 1 il profilo è 0,506 del totale, quindi trattino e vuoto da .52. Tutto «backwards» e la scia e il
     riflesso finiscono a opacità 0: a fine corsa il logo è identico al master del kit */
  html.mv:not(.via) .apertura *, html.mv:not(.via) .apertura *::before, html.mv:not(.via) .apertura *::after { animation-play-state: paused !important; }
  @keyframes logo-tratto { from { stroke-dasharray: .52 .52; stroke-dashoffset: .52; } to { stroke-dasharray: .52 .52; stroke-dashoffset: 0; } }
  @keyframes logo-alone {
    0% { stroke-dasharray: .52 .52; stroke-dashoffset: .52; opacity: 0; }
    12% { opacity: .75; }
    74% { stroke-dasharray: .52 .52; stroke-dashoffset: 0; opacity: .6; }
    100% { stroke-dasharray: .52 .52; stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes logo-scritta { from { opacity: 0; transform: translate3d(0, 120px, 0); } to { opacity: 1; transform: none; } }
  @keyframes logo-luce {
    0% { opacity: 0; transform: translate3d(0, 0, 0) skewX(-18deg); }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(2200px, 0, 0) skewX(-18deg); }
  }
  .apertura__logo-alone { filter: blur(10px); }
  html.mv .apertura__logo-alone { animation: logo-alone 1900ms var(--e-traccia) 150ms backwards; }
  html.mv .apertura__logo-casa { animation: logo-tratto 1400ms var(--e-traccia) 150ms backwards; }
  html.mv .apertura__logo-base { transform-box: fill-box; transform-origin: 0 50%; animation: linea-x 550ms var(--e-traccia) 1300ms backwards; }
  html.mv .apertura__logo-nova { animation: logo-scritta 850ms var(--e-posa) 1500ms backwards; }
  html.mv .apertura__logo-scritta { animation: logo-scritta 850ms var(--e-posa) 1650ms backwards; }
  html.mv .apertura__logo-luce { animation: logo-luce 1500ms var(--e-respiro) 2250ms backwards; }

  /* poi l'H1 e il resto, dopo il logo (il pulsante è visibile entro 2 s da html.via, fermo a 2,2 s) */
  /* backwards: nascosto durante l'attesa, a fine corsa né clip-path né transform (lo «clearProps» della specifica) */
  html.mv .apertura__titolo { animation: rivela-titolo 1000ms var(--e-posa) 1300ms backwards; }
  /* (tolto il passaggio di colore bianco → ambra dello span: regola 5, il colore si anima solo nei micro-stati) */
  html.mv .apertura__quota::before { transform-origin: 50% 50%; animation: linea-x 600ms var(--e-traccia) 1550ms both; }
  html.mv .apertura__quota::after { animation: linea-y 200ms var(--e-traccia) 2150ms both; }
  /* quota verticale: 1000 ms in power2.inOut da 900 ms; ogni stanghetta parte quando la linea la raggiunge
     (titolo al 2% della corsa, testo al 63-72%, pulsante al 99,8%) */
  html.mv .apertura__cornice::before { animation: linea-y 1000ms var(--e-traccia) 1350ms both; }
  html.mv .apertura__titolo::before { animation: linea-x 300ms var(--e-traccia) 1480ms both; }
  html.mv .apertura__testo::before { animation: linea-x 300ms var(--e-traccia) 1910ms both; }
  html.mv .apertura__azioni::before { animation: linea-x 300ms var(--e-traccia) 2270ms both; }
  html.mv .apertura__testo { animation: posa 700ms var(--e-posa) 1450ms both; }
  html.mv .apertura__invito { animation: posa 700ms var(--e-posa) 1530ms both; }
  html.mv .apertura__azioni .pulsante { animation: premi 600ms var(--e-posa) 1600ms both; }
  html.mv .apertura__azioni .pulsante::after { animation: luce-pulsante 900ms var(--e-traccia) 3000ms both; }
  html.mv .apertura__whatsapp { animation: posa 600ms var(--e-posa) 1680ms both; }
  html.mv .apertura__whatsapp .icona { animation: traccia 700ms var(--e-traccia) 1780ms both; }
  @keyframes linea-da-sinistra { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-20px 0 -20px 0); } }
  html.mv .apertura__onda-linea { animation: linea-da-sinistra 1400ms var(--e-traccia) 1450ms both; }
  /* il riquadro del cantiere entra mentre il logo finisce; il ciclo delle tendine parte dopo (main.js).
     Parte da opacity .01 e non da 0: così Chrome conta la foto 01 (precaricata) come LCP al primo disegno,
     invece della 02 scoperta dalla prima tendina dopo ~4 s */
  @keyframes posa-riquadro { from { opacity: .01; transform: translate3d(0, var(--salita), 0); } to { opacity: 1; transform: none; } }
  html.mv .cantiere__riquadro { animation: posa-riquadro 800ms var(--e-posa) 900ms both; }
  html.mv .righello { --salita: 12px; animation: posa 600ms var(--e-posa) 1250ms both; }

  /* il logo piccolo della testata: in cima all'apertura c'è già quello grande, compare con la barra piena
     (dopo 80 px). Senza JS e con «riduci movimento» (niente html.mv) resta sempre visibile */
  .testata__logo img { transition: opacity var(--t-ui) var(--e-micro); }
  html.mv .testata:not(.testata--pagina):not(.testata--piena):not(.aperta) .testata__logo:not(:focus-visible) img { opacity: 0; }

  /* hover dei pulsanti: la luce che attraversa, la cornetta */
  html.mv .pulsante:hover::after, html.mv .pulsante:focus-visible::after { animation: luce-pulsante 600ms var(--e-traccia) both; }

  /* ---- POSA: le entrate (un IntersectionObserver aggiunge .entrato, una volta) ---- */
  html.mv .posa { opacity: 0; transform: translate3d(0, var(--salita), 0); }
  html.mv .posa.entrato {
    opacity: 1; transform: none;
    transition: opacity var(--t-posa) var(--e-posa), transform var(--t-posa) var(--e-posa);
    transition-delay: calc(var(--i, 0) * var(--sf-testo));
  }
  html.mv .servizio.posa.entrato, html.mv .faq__voce.posa.entrato { transition-delay: calc(var(--i, 0) * var(--sf-righe)); }
  /* card prima/dopo: da computer salgono di 40 px e si scoprono dall'alto, al telefono la posa normale.
     :not(.entrato) perché lo stato finale vinca sempre (prima la regola dei 40 px, di pari specificità,
     teneva le card abbassate per sempre). Ritardi fissi, Cucina 0 e Bagno 150 ms: --i è l'indice nel
     lotto dell'observer e faceva aspettare la Cucina 600 ms dietro titolo e paragrafi. */
  html.mv .confronto-card.posa.entrato { transition-duration: 900ms; transition-delay: 0ms; }
  @media (min-width: 768px) {
    html.mv .confronto-card.posa:not(.entrato):not(:focus-within) { transform: translate3d(0, 40px, 0); }
    html.mv .confronto-card.posa .confronto-card__corpo { clip-path: inset(10% 0 0 0 round var(--raggio)); }
    /* lo stato finale contiene l'ombra del ::after (sotto 52 px, ai lati 24): inset(0) la tagliava */
    html.mv .confronto-card.posa.entrato .confronto-card__corpo { clip-path: inset(-30px -30px -60px -30px round var(--raggio)); transition: clip-path 900ms var(--e-posa) 0ms, transform 250ms var(--e-micro) 0ms; }
    html.mv .confronto-card--bagno.posa.entrato { transition-delay: 150ms; }
    html.mv .confronto-card--bagno.posa.entrato .confronto-card__corpo { transition-delay: 150ms, 0ms; }
    html.mv .confronto-card--soggiorno.posa.entrato { transition-delay: 150ms; }
    html.mv .confronto-card--soggiorno.posa.entrato .confronto-card__corpo { transition-delay: 150ms, 0ms; }
  }
  /* ---- GLI AMBIENTI: le foto si scoprono dal basso a maschera, sfalsate per colonna; poi sale la didascalia ---- */
  html.mv .ambiente__foto.maschera { clip-path: inset(100% 0 0 0 round var(--raggio)); }
  html.mv .ambiente__foto.maschera.entrato { clip-path: inset(0 0 0 0 round var(--raggio)); transition: clip-path var(--t-maschera) var(--e-materia) var(--rit, 0ms); }
  html.mv .ambiente__foto.maschera .ambiente__img { transform: scale(1.14); }
  html.mv .ambiente__foto.maschera.entrato .ambiente__img { transform: none; transition: transform var(--t-zoom) var(--e-posa) var(--rit, 0ms); }
  html.mv .ambiente__nome { opacity: 0; transform: translate3d(0, 10px, 0); }
  html.mv .ambiente__foto.entrato + .ambiente__nome { opacity: 1; transform: none; transition: opacity 600ms var(--e-posa) calc(var(--rit, 0ms) + 500ms), transform 600ms var(--e-posa) calc(var(--rit, 0ms) + 500ms); }
  html.mv .ambiente:nth-child(2), html.mv .ambiente:nth-child(5) { --rit: 120ms; }
  html.mv .ambiente:nth-child(3), html.mv .ambiente:nth-child(6) { --rit: 240ms; }
  html.mv .ambiente:nth-child(7) { --rit: 360ms; }
  @media (max-width: 767.98px) { /* al telefono l'esterno da solo, poi coppie: la seconda di ogni coppia 120 ms dopo */
    html.mv .ambiente:nth-child(n) { --rit: 0ms; }
    html.mv .ambiente:nth-child(odd):not(:first-child) { --rit: 120ms; }
  }
  @media (pointer: fine) { /* hover: la foto si avvicina appena, la didascalia sale */
    html.mv .ambiente:hover .ambiente__foto.entrato .ambiente__img { transform: scale(1.06); transition: transform 900ms var(--e-posa); }
    html.mv .ambiente:hover .ambiente__foto.entrato + .ambiente__nome { transform: translate3d(0, -4px, 0); transition: transform 350ms var(--e-micro); }
  }
  /* la quota si apre dal centro, poi le stanghette */
  html.mv .quota.posa { transform: none; opacity: 1; }
  html.mv .quota.posa::before { transform: scaleX(0); transform-origin: 50% 50%; }
  html.mv .quota.posa::after { transform: scaleY(0); }
  html.mv .quota.posa.entrato::before { transform: none; transition: transform 600ms var(--e-traccia) calc(var(--i, 0) * var(--sf-testo)); }
  html.mv .quota.posa.entrato::after { transform: none; transition: transform 200ms var(--e-traccia) calc(var(--i, 0) * var(--sf-testo) + 600ms); }

  /* ---- MASCHERA: le foto si scoprono (una volta) ---- */
  html.mv .maschera--giu { clip-path: inset(0 0 100% 0); }
  html.mv .maschera--su { clip-path: inset(100% 0 0 0); }
  html.mv .maschera--dx { clip-path: inset(0 100% 0 0); }
  html.mv .maschera--sx { clip-path: inset(0 0 0 100%); }
  html.mv .maschera.entrato { clip-path: inset(0 0 0 0); transition: clip-path var(--t-maschera) var(--e-materia); }
  html.mv .maschera--sx.entrato { transition-duration: 1200ms; }
  html.mv .maschera .media__img { transform: scale(1.08); }
  html.mv .maschera--dx .media__img { transform: scale(1.06); }
  html.mv .maschera.entrato .media__img { transform: none; transition: transform var(--t-zoom) var(--e-posa); }
  html.mv .finestra__lastre.maschera .finestra__lastra img { --z: 1.24; }
  html.mv .finestra__lastre.maschera .finestra__lastra--5 img { --z: 1.12; }
  html.mv .finestra__lastre.maschera.entrato .finestra__lastra img { --z: 1.12; transition: transform var(--t-zoom) var(--e-posa); }
  html.mv .finestra__lastre.maschera.entrato .finestra__lastra--5 img { --z: 1; }

  /* ---- TRACCIA / RITIRO: le icone appaiono e scompaiono ---- */
  html.mv [data-traccia] {
    stroke-dashoffset: 1; opacity: 0; transform: scale(.92);
    transition: stroke-dashoffset var(--t-ritiro) var(--e-ritiro), opacity var(--t-ritiro) var(--e-ritiro), transform var(--t-ritiro) var(--e-ritiro);
  }
  html.mv [data-traccia].tracciata {
    stroke-dashoffset: 0; opacity: 1; transform: none;
    transition: stroke-dashoffset 800ms var(--e-traccia) var(--rit, 0ms), opacity 200ms linear var(--rit, 0ms), transform 600ms var(--e-posa) var(--rit, 0ms);
  }
  html.mv .chi__voce:nth-child(1) .chi__icona { --rit: 0ms; }
  html.mv .chi__voce:nth-child(1) .chi__spunta { --rit: 600ms; }
  html.mv .chi__voce:nth-child(2) .chi__icona { --rit: 250ms; }
  html.mv .chi__voce:nth-child(2) .chi__spunta { --rit: 850ms; }
  html.mv .chi__voce:nth-child(3) .chi__icona { --rit: 500ms; }
  html.mv .chi__voce:nth-child(3) .chi__spunta { --rit: 1100ms; }
  html.mv .chi__voce:nth-child(4) .chi__icona { --rit: 750ms; }
  html.mv .chi__voce:nth-child(4) .chi__spunta { --rit: 1350ms; }
  html.mv .piede__icona--wa .icona { --rit: 150ms; }
  html.mv .piede__icona--wa .icona:not(.tracciata) { transform: scale(.8); }
  html.mv .zona__spillo { opacity: 0; }
  html.mv .zona__regione.entrato .zona__spillo { animation: spillo 500ms cubic-bezier(.34, 1.48, .68, 1) calc(var(--i, 0) * 80ms + 400ms) both; } /* cade col chip già posato */
  html.mv .zona__regione:nth-child(2).entrato .zona__spillo { animation-delay: calc(var(--i, 0) * 80ms + 550ms); }
  html.mv .piede__spillo.tracciata { animation: spillo 500ms cubic-bezier(.34, 1.48, .68, 1) var(--rit, 0ms) both; } /* = back.out(1.4) di GSAP (scarto massimo 0,004) */
  html.mv .piede__icona--tel .icona.squilla { animation: squillo 600ms var(--e-micro) 650ms both; }
  html.mv .riferimento__icona--2 [data-traccia] { --rit: 120ms; }
  html.mv .riferimento__icona--3 [data-traccia] { --rit: 240ms; }
  html.mv .riferimento__icona--4 [data-traccia] { --rit: 360ms; }

  /* ---- decorazioni che si tracciano entrando ---- */
  html.mv .disegno { stroke-dashoffset: 1; }
  html.mv .disegno.entrato { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms var(--e-traccia); }
  html.mv .fondo__griglia--v { clip-path: inset(0 0 100% 0); }
  html.mv .fondo__griglia--o { clip-path: inset(0 100% 0 0); }
  html.mv .entrato > .fondo__griglia { clip-path: inset(0 0 0 0); transition: clip-path 1200ms var(--e-traccia); }
  html.mv .entrato > .fondo__griglia--o { transition-delay: 200ms; }

  /* ---- SERVIZI: le icone si montano e si smontano con la voce attiva ---- */
  html.mv .servizio__disegno { stroke-dashoffset: 1; transition: stroke-dashoffset 300ms var(--e-ritiro), opacity 350ms var(--e-posa), transform 350ms var(--e-posa); }
  html.mv .servizio--attivo .servizio__disegno { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--e-traccia) 150ms, opacity 350ms var(--e-posa), transform 350ms var(--e-posa); }
  html.mv .servizio--attivo .servizio__disegno--b { opacity: 0; }
  html.mv .servizio--scambio .servizio__disegno--a { opacity: 0; transform: translateY(-8px); }
  html.mv .servizio--scambio .servizio__disegno--b { opacity: 1; transform: none; }
  html.mv .servizio__disegno--b { transform: translateY(8px); }
  /* giro automatico (main.js: .servizi--giro, ogni 4 s; .servizi--ferma fuori schermo o col Tab dentro):
     la barretta si riempie in 4 s e alla fine (animationend) main.js passa alla voce dopo */
  html.mv .servizi--giro .servizio--attivo .servizio__tempo { opacity: 1; animation: servizi-tempo 4000ms linear both; transition: opacity 200ms linear; }
  html.mv .servizi--ferma .servizio__tempo { animation-play-state: paused; }
  @keyframes servizi-tempo { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  html.mv .servizio--attivo .servizio__icona--chiave .servizio__disegno { transform-box: view-box; transform-origin: 42px 43px; animation: chiave 600ms var(--e-traccia) 450ms both; }

  /* ---- METODO ---- */
  html.mv .metodo__progresso { transition: transform 600ms var(--e-traccia); }
  html.mv .passo__icona { stroke-dashoffset: 1; opacity: 0; transform: translateY(8px); transition: stroke-dashoffset 250ms var(--e-ritiro), opacity 250ms var(--e-ritiro), transform 250ms var(--e-ritiro); }
  html.mv .passo--acceso .passo__icona { stroke-dashoffset: 0; opacity: 1; transform: none; transition: stroke-dashoffset 600ms var(--e-traccia), opacity 200ms linear, transform 600ms var(--e-posa); }
  /* la posa del testo (opacity/transform) non deve togliere la transizione del colore quando il passo si accende */
  html.mv .passo__nome.posa.entrato { transition: opacity var(--t-posa) var(--e-posa), transform var(--t-posa) var(--e-posa), color 300ms var(--e-traccia);
    transition-delay: calc(var(--i, 0) * var(--sf-testo)), calc(var(--i, 0) * var(--sf-testo)), 0ms; }
  html.mv .metodo__onda-linea { clip-path: inset(0 100% 0 0); }
  html.mv .metodo.entrato .metodo__onda-linea { clip-path: inset(-20px 0 -20px 0); transition: clip-path 1400ms var(--e-traccia); }
  html.mv .metodo__ponteggio .ponteggio__piano { opacity: 0; }
  html.mv .metodo__ponteggio .ponteggio__montanti { stroke-dashoffset: 1; }

  /* ---- IMPRESA ---- */
  html.mv .riferimento__evidenza { clip-path: inset(0 0 100% 0); transform: translate3d(0, 16px, 0); }
  html.mv .riferimento__evidenza.entrato { clip-path: inset(-12% -6% -18% -6%); transform: none; transition: clip-path 1000ms var(--e-traccia) 120ms, transform 1000ms var(--e-traccia) 120ms; }
  html.mv .riferimento__chiusa::after { transform: scaleX(0); }
  html.mv .riferimento__chiusa.entrato::after { transform: none; transition: transform 800ms var(--e-traccia) 800ms; }
  html.mv .riferimento__squadra-bordo { stroke-dashoffset: 1; transition: stroke-dashoffset 300ms var(--e-ritiro); }
  html.mv .riferimento--squadra .riferimento__squadra-bordo { stroke-dashoffset: 0; transition: stroke-dashoffset 800ms var(--e-traccia); }
  html.mv .riferimento__squadra-fondo { opacity: 0; transition: opacity 300ms var(--e-ritiro); } /* la squadra compare col bordo, mai vuota prima */
  html.mv .riferimento--squadra .riferimento__squadra-fondo { opacity: 1; transition: opacity 500ms var(--e-posa); }

  /* ---- ZONA: la mappa si disegna ---- */
  html.mv .mappa .mappa__italia { opacity: 0; }
  html.mv .mappa .mappa__regione { opacity: 0; transform: scale(.96); }
  html.mv .mappa .mappa__filo { stroke-dashoffset: 1; }
  html.mv .mappa .mappa__etichetta, html.mv .mappa .mappa__citta, html.mv .mappa .mappa__sede, html.mv .mappa .mappa__attacco { opacity: 0; }
  html.mv .mappa.entrato .mappa__italia { opacity: 1; transition: opacity 600ms var(--e-posa); }
  html.mv .mappa.entrato .mappa__regione { opacity: 1; transform: none; transition: opacity 700ms var(--e-posa) 450ms, transform 700ms var(--e-posa) 450ms, fill 200ms, stroke 200ms; }
  html.mv .mappa.entrato .mappa__regione--marche { transition-delay: 650ms; }
  html.mv .mappa.entrato .mappa__sede, html.mv .mappa.entrato .mappa__attacco { opacity: 1; transition: opacity 300ms 1100ms; }
  html.mv .mappa.entrato .mappa__filo { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--e-traccia) 1200ms; }
  html.mv .mappa.entrato .mappa__etichetta, html.mv .mappa.entrato .mappa__citta { opacity: 1; transition: opacity 300ms 1600ms; }
  html.mv .mappa.entrato .mappa__onda { animation: onda-sede 1200ms var(--e-posa) 1900ms 3 forwards; }

  /* ---- CHI SIAMO ---- */
  html.mv .chi__chiusa::after { transform: scaleX(0); }
  html.mv .chi__chiusa.entrato::after { transform: none; transition: transform 600ms var(--e-traccia) 800ms; }
  html.mv .chi__elenco.posa .chi__voce { opacity: 0; transform: translate3d(0, 12px, 0); }
  html.mv .chi__elenco.posa.entrato .chi__voce { opacity: 1; transform: none; transition: opacity 500ms var(--e-posa), transform 500ms var(--e-posa); }
  html.mv .chi__elenco.posa.entrato .chi__voce:nth-child(2) { transition-delay: 250ms; }
  html.mv .chi__elenco.posa.entrato .chi__voce:nth-child(3) { transition-delay: 500ms; }
  html.mv .chi__elenco.posa.entrato .chi__voce:nth-child(4) { transition-delay: 750ms; }
  html.mv .chi__cantiere.maschera.entrato { transition-delay: 350ms; }
  html.mv .chi__cantiere.maschera.entrato .media__img { transition-delay: 350ms; }
  html.mv .chi__elenco.posa { transform: none; opacity: 1; }
  /* i requisiti si controllano uno per uno: l'icona si traccia in 600 ms, poi la spunta in 400 ms (§10) */
  html.mv .chi__icona.tracciata { transition-duration: 600ms, 200ms, 600ms; }
  html.mv .chi__spunta.tracciata { transition-duration: 400ms, 200ms, 400ms; }
  /* ...e solo quando il cartellino è entrato: prima le icone restano nascoste anche se la loro traccia
     (IntersectionObserver al 30%) è già scattata; entrando partono in ordine con i loro --rit */
  html.mv .chi__elenco:not(.entrato) .icona { stroke-dashoffset: 1; opacity: 0; }

  /* ---- DOMANDE: fisarmonica ---- */
  html.mv .faq__voce.posa.entrato { transition-delay: calc(var(--i, 0) * 70ms); } /* voci sfalsate di 70 ms (§11) */
  @media (min-width: 768px) { html.mv .faq__voce.posa { --salita: 20px; } } /* y 20 → 0 (al telefono resta la salita di 16) */
  html.mv .faq__risposta { transition: grid-template-rows 250ms var(--e-ritiro); }
  html.mv .aperta .faq__risposta { transition: grid-template-rows 350ms var(--e-traccia); }
  html.mv .faq__risposta > div { transition: visibility 0s linear 250ms; }
  html.mv .aperta .faq__risposta > div { transition: visibility 0s; }
  html.mv .faq__risposta p { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 200ms var(--e-ritiro), transform 200ms var(--e-ritiro); }
  html.mv .aperta .faq__risposta p { opacity: 1; transform: none; transition: opacity 300ms var(--e-posa) 80ms, transform 300ms var(--e-posa) 80ms; }

  /* ---- FOOTER ---- */
  html.mv .piede__onda-linea { clip-path: inset(0 100% 0 0); }
  html.mv .piede.entrato .piede__onda-linea { clip-path: inset(-20px 0 -20px 0); transition: clip-path 1400ms var(--e-traccia); }
  html.mv .piede__marchio.posa .piede__logo { clip-path: inset(100% 0 0 0); }
  html.mv .piede__marchio.posa.entrato .piede__logo { clip-path: inset(0 0 0 0); transition: clip-path 1200ms var(--e-materia); }
  html.mv .piede__marchio.posa > p { opacity: 0; transform: translate3d(0, 10px, 0); }
  html.mv .piede__marchio.posa.entrato > p { opacity: 1; transform: none; transition: opacity 600ms var(--e-posa), transform 600ms var(--e-posa); }
  html.mv .piede__marchio.posa.entrato > p:nth-of-type(1) { transition-delay: 900ms; }
  html.mv .piede__marchio.posa.entrato > p:nth-of-type(2) { transition-delay: 960ms; }
  html.mv .piede__marchio.posa.entrato > p:nth-of-type(3) { transition-delay: 1020ms; }
  html.mv .piede__marchio.posa.entrato > p:nth-of-type(4) { transition-delay: 1080ms; }
  html.mv .piede__marchio.posa { transform: none; opacity: 1; }
  html.mv .piede__invito.posa.entrato .pulsante::after { animation: luce-pulsante 900ms var(--e-traccia) 700ms both; }
  html.mv .piede__griglia > .posa.entrato { transition-delay: calc(var(--i, 0) * 120ms); } /* colonne sfalsate di 120 ms (§12) */
  html.mv .piede__ponteggio .ponteggio__piano { opacity: 0; }
  html.mv .piede__ponteggio .ponteggio__montanti { stroke-dashoffset: 1; }
  /* senza JS (o se main.js non parte) la riga gira lo stesso: è solo CSS (§12 «Senza JS: la riga gira»).
     Con html.mv la regola è in AMBIENTI: in pausa solo fuori schermo (.piede__riga--scorre, main.js) */
  @media (prefers-reduced-motion: no-preference) {
    html:not(.mv) .piede__riga-traccia { animation: scorri 70s linear infinite; }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
    html:not(.mv) .piede__riga-traccia { animation-duration: 90s; }
  }

  /* ---- PAGINE INTERNE (privacy, 404): la posa dei testi sopra la piega parte col CSS al primo disegno,
     senza aspettare main.js (che arriva dopo GSAP: su rete lenta il messaggio restava invisibile ~1,5 s) ---- */
  @keyframes posa-subito { from { opacity: .01; transform: translate3d(0, var(--salita), 0); } to { opacity: 1; transform: none; } }
  html.mv .pagina__404 > .posa, html.mv .pagina__testo > .posa { animation: posa-subito var(--t-posa) var(--e-posa) both; }
  html.mv .pagina__404 > .posa:nth-child(2), html.mv .pagina__testo > .posa:nth-child(2) { animation-delay: 80ms; }
  html.mv .pagina__404 > .posa:nth-child(3) { animation-delay: 160ms; }
  html.mv .pagina__404 > .posa:nth-child(4) { animation-delay: 240ms; }
  html.mv .pagina__404 > .quota.posa { animation: none; }
  html.mv .pagina__404 > .quota.posa::before { animation: linea-x 600ms var(--e-traccia) 80ms both; }
  html.mv .pagina__404 > .quota.posa::after { animation: linea-y 200ms var(--e-traccia) 680ms both; }

  /* ---- MENU DA TELEFONO: le voci entrano, le icone si ridisegnano a ogni apertura ---- */
  @media (max-width: 1023.98px) {
    html.mv .menu__voci li, html.mv .menu__pulsanti { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 300ms var(--e-ritiro), transform 300ms var(--e-ritiro); }
    html.mv .menu__tondo .icona { stroke-dashoffset: 1; transition: stroke-dashoffset 300ms var(--e-ritiro); }
    html.mv .menu__voci li::after { transition: transform 300ms var(--e-ritiro); }
    html.mv .menu__gru { stroke-dashoffset: 1; transition: stroke-dashoffset 300ms var(--e-ritiro); }
    html.mv .testata.aperta .menu__voci li, html.mv .testata.aperta .menu__pulsanti { opacity: 1; transform: none; transition: opacity 450ms var(--e-posa), transform 450ms var(--e-posa); }
    html.mv .testata.aperta .menu__voci li::after { transform: scaleX(1); transition: transform 400ms var(--e-traccia); }
    html.mv .testata.aperta .menu__tondo .icona { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--e-traccia); }
    html.mv .testata.aperta .menu__gru { stroke-dashoffset: 0; transition: stroke-dashoffset 1200ms var(--e-traccia) 300ms; }
    html.mv .testata.aperta .menu__pulsanti { transition-delay: 450ms; }
    html.mv .testata.aperta .menu__voci li:nth-child(1), html.mv .testata.aperta .menu__voci li:nth-child(1)::after, html.mv .testata.aperta .menu__voci li:nth-child(1) .icona { transition-delay: 150ms; }
    html.mv .testata.aperta .menu__voci li:nth-child(2), html.mv .testata.aperta .menu__voci li:nth-child(2)::after, html.mv .testata.aperta .menu__voci li:nth-child(2) .icona { transition-delay: 200ms; }
    html.mv .testata.aperta .menu__voci li:nth-child(3), html.mv .testata.aperta .menu__voci li:nth-child(3)::after, html.mv .testata.aperta .menu__voci li:nth-child(3) .icona { transition-delay: 250ms; }
    html.mv .testata.aperta .menu__voci li:nth-child(4), html.mv .testata.aperta .menu__voci li:nth-child(4)::after, html.mv .testata.aperta .menu__voci li:nth-child(4) .icona { transition-delay: 300ms; }
    html.mv .testata.aperta .menu__voci li:nth-child(5), html.mv .testata.aperta .menu__voci li:nth-child(5)::after, html.mv .testata.aperta .menu__voci li:nth-child(5) .icona { transition-delay: 350ms; }
    html.mv .testata.aperta .menu__voci li:nth-child(6), html.mv .testata.aperta .menu__voci li:nth-child(6)::after, html.mv .testata.aperta .menu__voci li:nth-child(6) .icona { transition-delay: 400ms; }
  }
  /* senza movimento (ma col JS): il menu compare con la sola opacità; senza JS è la riga sotto il logo */
  @media (max-width: 1023.98px) {
    html.js:not(.mv) .menu { clip-path: none; opacity: 0; transition: opacity 150ms linear, visibility 0s linear 150ms; }
    html.js:not(.mv) .testata.aperta .menu { opacity: 1; transition: opacity 150ms linear, visibility 0s; }
  }

  /* ---- COOKIE ---- */
  /* backwards: finita l'entrata, translate e opacità tornano libere per «si fa da parte» (.cookie-bar--via);
     se compare dopo uno scorrimento main.js mette --ritardo-cookie a 0 */
  html.mv .cookie-bar { animation: posa-cookie 450ms var(--e-posa) var(--ritardo-cookie, 1200ms) backwards; transition: translate 450ms var(--e-posa), opacity 450ms var(--e-posa), visibility 0s; }
  html.mv .cookie-bar--via { transition: translate 300ms var(--e-ritiro), opacity 300ms var(--e-ritiro), visibility 0s linear 300ms; }
  html.mv .cookie-bar--via:not(.esce) { animation: none; } /* se deve farsi da parte mentre sta ancora entrando, l'entrata si ferma */
  html.mv .cookie-bar.esce { animation: esce-cookie 300ms var(--e-ritiro) both; }
  @keyframes posa-cookie { from { opacity: 0; translate: 0 120%; } to { opacity: 1; translate: 0 0; } }
  @keyframes esce-cookie { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 120%; } }

  /* ---- AMBIENTI: cicli lenti, solo con la sezione in vista e la scheda visibile ---- */
  html.mv .fondo__luce { animation: luce 22s var(--e-respiro) infinite alternate paused; }
  html.mv .zona .fondo__luce { animation: none; } /* nella zona la luce calda è ferma */
  html.mv .fondo__finestra { animation: lama 32s var(--e-respiro) infinite alternate paused; }
  html.mv .riferimento .fondo__finestra { animation-delay: -11s; }
  html.mv .chi .fondo__finestra { animation-delay: -22s; }
  html.mv .fondo__faro { animation: faro 14s var(--e-respiro) infinite alternate paused; }
  html.mv .piede .fondo__faro { animation-duration: 16s; }
  html.mv .metodo .fondo__grana { animation: respira 9s var(--e-respiro) infinite alternate paused, deriva 30s var(--e-respiro) infinite alternate paused; }
  html.mv .piede__riga-traccia { animation: scorri 70s linear infinite paused; }
  html.mv .zona__foto .media__respiro { animation: ken-burns 24s var(--e-respiro) infinite alternate paused; }
  html.mv .chi__foto .media__respiro { animation: striscione 8s var(--e-respiro) infinite alternate paused; }
  /* .in-vista è su UNA sola sezione alla volta (quella che occupa la linea a metà schermo, main.js):
     girano solo i suoi cicli, al massimo 2 (tabella 1.4), e will-change sta solo su ciò che si muove */
  html.mv .in-vista .fondo__luce, html.mv .in-vista .fondo__finestra, html.mv .in-vista .fondo__faro,
  html.mv .in-vista .fondo__grana, html.mv .in-vista .media__respiro { animation-play-state: running; }
  html.mv:not(.leggero) .in-vista:not(.zona) .fondo__luce, html.mv:not(.leggero) .in-vista .fondo__finestra,
  html.mv .in-vista .fondo__faro, html.mv .in-vista .media__respiro { will-change: transform; }
  html.mv:not(.leggero) .in-vista.metodo .fondo__grana { will-change: transform, opacity; }
  /* la riga scorrevole del footer non si ferma mai: la pausa solo fuori schermo (classe messa da main.js) */
  html.mv .piede__riga--scorre .piede__riga-traccia { animation-play-state: running; will-change: transform; }
  /* le onde della sede (3 volte) partono quando «Dove lavoriamo» è la sezione in vista */
  html.mv .mappa.entrato .mappa__onda { animation-play-state: paused; }
  html.mv .in-vista .mappa.entrato .mappa__onda { animation-play-state: running; }
  html.nascosta *, html.nascosta *::before, html.nascosta *::after { animation-play-state: paused !important; }
  @media (max-width: 767.98px) {
    html.mv .piede__riga-traccia { animation-duration: 90s; }
    html.mv .zona__foto .media__respiro { animation-duration: 30s; }
    html.mv .fondo__faro { animation-duration: 20s; }
  }
  /* telefoni deboli: meno ambienti */
  html.leggero .fondo__luce, html.leggero .metodo .fondo__grana { animation: none !important; }

  /* ---- tastiera: ciò che prende il focus è subito visibile (main.js aggiunge .entrato al focusin;
     questa è la rete di sicurezza se l'entrata non fosse ancora partita) ---- */
  html.mv .posa:focus-within { opacity: 1; transform: none; transition: none; }
  html.mv .confronto-card.posa:focus-within .confronto-card__corpo { clip-path: none; }
  html.mv .piede__marchio.posa:focus-within > p { opacity: 1; transform: none; transition: none; }

  /* ---- il faro dell'apertura gira solo con l'apertura a vista (main.js: .apertura--vista) ---- */
  html.mv .apertura--vista .fondo__faro { animation-play-state: running; will-change: transform; }
}

/* «riduci movimento»: per sicurezza, anche se html.mv mancasse per errore */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}
/* il menu da telefono resta una dissolvenza di 150 ms (§3): un'opacità non è un movimento */
@media (prefers-reduced-motion: reduce) and (max-width: 1023.98px) {
  html.js .menu { transition-duration: 150ms !important; }
}