/* =========================================================
   Tecno10 · prototipo "moderno", versione con il grigio
   Nata l'01/10/2026 dalla versione scura (prototipo-moderno/), che resta com'è.
   Stessa struttura e stessi movimenti. Cambiano i colori e lo stile:
   - i colori sono quelli del sito di oggi, misurati il 30/09: il grigio scuro delle
     fasce (#333), il grigio chiaro dello sfondo (#DCDCDC, bianco a sinistra e grigio
     a destra), il nero dei testi (#0A0908) e il rosso del logo (#E4032E);
   - lo stile è quello dei furgoni e dei biglietti da visita: il rosso sta solo sul
     chiaro, sul grigio scuro e sul rosso tutto è bianco;
   - fasce inclinate come il logo e piste bianche che finiscono con un anello.
   Il filo che si disegna scorrendo segue la stessa regola: rosso sul bianco,
   bianco sul grigio.
   Scritto da zero: nessuna regola e nessun file del tema di oggi.
   Caratteri liberi: Archivo (titoli e testi) e IBM Plex Mono (etichette tecniche).
   Sito in Astro, 05/10/2026: sugli schermi da computer la pagina è più piccola del 20%, come nella prova
   di Nicola con lo zoom all'80%. Sono scesi del 20% i valori massimi di titoli grandi, spazi e colonna
   del contenuto (1152 px), e i testi arrivano al massimo a 17 px: cambia solo dove lo schermo è largo, con
   un passaggio graduale. Restano come prima i titoli piccoli, le etichette, i pulsanti e il piede, e nella
   barra in alto altezza, logo e caratteri: la barra si è solo stretta con la colonna, per restare
   allineata al contenuto. Il prototipo con il grigio resta con le misure di prima.
   05/10/2026, sera (ramo larghezza-e-foto, guardando pegomac.com): la colonna torna a 1440 px con i
   caratteri di adesso, i testi lunghi restano stretti, alcune foto arrivano al bordo dello schermo e
   crescono entrando. Vedi "Foto fino al bordo", in fondo.
   ========================================================= */

:root {
  --rosso: #e4032e;
  --rosso-scuro: #b80226;
  --grigio: #333;          /* il grigio scuro delle fasce del sito di oggi: fondo delle sezioni scure, testi secondari sul chiaro */
  --grigio-2: #404040;     /* un tono più chiaro, per i rilievi sul grigio */
  --grigio-3: #262626;     /* riquadri in attesa di foto e video */
  --grigio-chiaro: #dcdcdc; /* il grigio chiaro dello sfondo del sito di oggi */
  --nebbia: #d9d9d9;       /* riquadri in attesa delle foto, come oggi */
  --carta: #fff;
  --inchiostro: #0a0908;   /* il nero dei testi del sito di oggi */
  --velato: #dcdcdc;
  --riga-scura: rgba(255, 255, 255, .22);
  --riga-chiara: rgba(10, 9, 8, .16);
  /* Lo sfondo chiaro del sito di oggi: bianco a sinistra, grigio chiaro a destra */
  --sfondo-chiaro: var(--carta) linear-gradient(to right, rgb(255 255 255 / 0), var(--grigio-chiaro));
  --pendenza: -20deg;  /* l'inclinazione del logo e delle fasce dei furgoni */

  /* Colori della sezione: grigia dove non è detto altro.
     --accento è il colore di ciò che si accende, --filo quello del filo, --fondo quello dello sfondo */
  --testo: #fff;
  --tenue: var(--velato);
  --riga: var(--riga-scura);
  --accento: #fff;
  --filo: #fff;
  --fondo: var(--grigio);
  --reticolo: rgba(255, 255, 255, .07);

  --margine: clamp(22px, 5.5vw, 88px);
  /* La colonna del contenuto. Il 05/10 era scesa da 1440 a 1152 px, perché su uno schermo 1080p la pagina
     sembrava enorme; la sera stessa, guardando pegomac.com, Nicola l'ha voluta di nuovo larga, con i caratteri
     più piccoli di adesso. La barra in alto la segue, con altezza, logo e caratteri di prima */
  --largo: 1440px;
  /* Distanza del contenuto dal bordo: serve agli elementi che arrivano fino al bordo dello schermo */
  --rientro: max(var(--margine), calc((100% - var(--largo)) / 2));
  /* La stessa distanza, misurata sulla pagina (100cqi): serve alle foto dentro la colonna che escono fino al bordo */
  --fuori: max(var(--margine), (100cqi - var(--largo)) / 2);

  /* Spazio occupato in basso dalla barra dei contatti, che c'è fino a 1179 px */
  --molo: 0px;

  /* La barra in alto, 09/10: Nicola l'ha voluta più alta, con il logo più grande e le voci del menu un po' più
     grandi. Sui computer cresce con lo schermo tra 1180 e 1440 px, e da lì resta così: --cresce va da 0 a 10 px,
     e logo, altezza, caratteri e pulsanti crescono insieme, nelle stesse proporzioni (vedi "Testata").
     A 1180 px la barra è com'era prima, perché lì le misure piene non ci starebbero su una riga.
     --fondo-testata è dove finisce la barra, contando dall'alto dello schermo: serve a quello che si ferma sotto */
  --cresce: 0px;
  --fondo-testata: 70px;

  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --molla: cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 1180px) {
  :root {
    --cresce: clamp(0px, (100vw - 1180px) / 26, 10px);
    --fondo-testata: calc(14px + 68px + 1.2 * var(--cresce));
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* I salti dentro la pagina si fermano sotto la barra in alto, anche dove la barra è cresciuta (09/10) */
  scroll-padding-top: max(110px, var(--fondo-testata) + 28px);
  background: var(--sfondo-chiaro);
}

/* I salti dentro la pagina ("Scorri", "Richiedi informazioni") scorrono morbidi */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Con una foto aperta a tutto schermo la pagina sotto non scorre */
html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--sfondo-chiaro);
  color: var(--inchiostro);
  font: 400 1.0625rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
strong { font-weight: 600; }

::selection { background: var(--rosso); color: #fff; }

:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }

.icone { position: absolute; width: 0; height: 0; overflow: hidden; }
.icona { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

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

.salta {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 10px;
  background: #fff;
  color: var(--inchiostro);
  font-weight: 600;
}
.salta:focus { top: 16px; }

.contenitore {
  position: relative;
  z-index: 2; /* sopra al filo rosso */
  width: min(100% - 2 * var(--margine), var(--largo));
  margin-inline: auto;
}

/* Sezioni chiare, con lo sfondo del sito di oggi: qui il rosso può stare */
.chiaro {
  --testo: var(--inchiostro);
  --tenue: var(--grigio);
  --riga: var(--riga-chiara);
  --accento: var(--rosso);
  --filo: var(--rosso);
  --fondo: #fff;
  --reticolo: rgba(10, 9, 8, .055);
  background: var(--sfondo-chiaro);
  color: var(--inchiostro);
}

/* ---------- Titoli e testi ---------- */
.titolone,
.titolo {
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.titolone { font-size: clamp(2.6rem, 14vw, 5.6rem); line-height: .86; }
/* Sotto i 900 px il titolo ha tutta la larghezza; sopra sta in una colonna.
   "Certificazione" è una parola sola e lunga: le misure sono fatte perché ci stia sempre */
.titolo { font-size: min(8.2vw, 4.1rem); line-height: .98; }
.titolo--grande { font-size: min(8.4vw, 3.4rem); line-height: .94; }
@media (min-width: 700px) {
  .titolone { font-size: clamp(5.4rem, 12.4vw, 8.8rem); }
}
@media (min-width: 900px) {
  .titolo { font-size: clamp(2rem, 4.5vw, 3.28rem); }
  .titolo--grande { font-size: clamp(3.2rem, 5.6vw, 4.32rem); }
}

.testo {
  max-width: 34em;
  color: var(--tenue);
  font-size: 1.06rem;
  line-height: 1.55;
  text-wrap: pretty;
}
.testo strong { color: var(--testo); }

/* Segno di sezione: come i segnafilo sui cavi, inclinato come il logo */
.segno {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--tenue);
  font: 500 .75rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.segno__numero {
  display: inline-grid;
  place-items: center;
  min-width: 38px;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  background: #fff;
  color: var(--inchiostro);
  margin-inline: 5px;
  letter-spacing: .06em;
  transform: skewX(var(--pendenza));
}
.chiaro .segno__numero { background: var(--grigio); color: #fff; }
.segno__nome { display: flex; align-items: center; gap: 12px; font: inherit; }
.segno__nome::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; }

/* ---------- Pulsanti e collegamenti ---------- */
.pulsante {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 7px 7px 7px 22px;
  border-radius: 14px;
  background: var(--rosso);
  color: #fff;
  font-weight: 600;
  font-stretch: 112%;
  font-size: .9375rem;
  line-height: 1.15;
  letter-spacing: .01em;
  transition: background .25s, color .25s, box-shadow .25s;
}
.pulsante:hover { background: var(--rosso-scuro); }
.pulsante__freccia {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, .18);
  transition: background .25s;
}
.pulsante__freccia .icona { width: 18px; height: 18px; transition: transform .5s var(--molla); }
.pulsante:hover .pulsante__freccia .icona { transform: translateX(4px); }

/* Sul grigio e sul rosso i pulsanti sono bianchi, con il riquadro della freccia rosso */
.pulsante--chiaro { background: #fff; color: var(--inchiostro); }
.pulsante--chiaro .pulsante__freccia { background: var(--rosso); color: #fff; }
.pulsante--chiaro:hover { background: var(--inchiostro); color: #fff; }

.pulsante--linea { background: transparent; color: var(--testo); box-shadow: inset 0 0 0 1.5px var(--riga); }
.pulsante--linea .pulsante__freccia { background: #fff; color: var(--rosso); }
.pulsante--linea:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--testo); }

.pulsante--grande { min-height: 68px; padding: 9px 9px 9px 28px; border-radius: 18px; font-size: clamp(1rem, 1.3vw, 1.2rem); }
.pulsante--grande .pulsante__freccia { width: 50px; height: 50px; border-radius: 12px; }

.collegamento {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font: 500 .78rem/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: color .25s, background-size .5s var(--molla);
}
.collegamento .icona { width: 16px; height: 16px; transition: transform .5s var(--molla); }
/* Passandoci sopra la riga sotto si ritira verso sinistra, come su pegomac.com (05/10, sera) */
.collegamento:hover { color: var(--accento); background-size: 0 1px; }
.collegamento:hover .icona { transform: translateX(4px); }

.tondo {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1.5px var(--riga);
  transition: background .25s, box-shadow .25s, opacity .25s;
}
.tondo:hover:not(:disabled) { background: var(--accento); box-shadow: inset 0 0 0 1.5px var(--accento); color: var(--fondo); }
.tondo:disabled { opacity: .35; cursor: default; }

/* ---------- Comparsa allo scorrimento ---------- */
/* Parte appena l'elemento entra nello schermo: niente attese */
.js [data-compare] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--molla) var(--ritardo, 0s), transform .9s var(--molla) var(--ritardo, 0s);
}
.js [data-compare].is-vista { opacity: 1; transform: none; }

/* "Tenda": la foto si scopre dal basso verso l'alto. Il ritaglio sta sulla foto e non sul riquadro
   osservato: un riquadro tutto ritagliato per il browser non entra mai nello schermo */
.js [data-compare="tenda"] { opacity: 1; transform: none; transition: box-shadow .6s var(--ritardo, 0s); }
.js [data-compare="tenda"]:not(.is-vista) { box-shadow: none; }
.js [data-compare="tenda"] img {
  clip-path: inset(100% 0 0 0);
  transform: scale(1.14);
  transition: clip-path 1.1s var(--molla) var(--ritardo, 0s), transform 1.5s var(--molla) var(--ritardo, 0s);
}
.js [data-compare="tenda"].is-vista img { clip-path: inset(0); transform: none; }

/* =========================================================
   Testata: una barra di vetro bianco che resta in alto, con il logo com'è
   ========================================================= */
.testata {
  --testo: var(--inchiostro);
  --tenue: var(--grigio);
  --riga: var(--riga-chiara);
  --accento: var(--rosso);
  position: fixed;
  inset: 14px 0 auto;
  z-index: 60;
  pointer-events: none;
}
.testata__barra {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 8px;
  /* 68 px fino a 1180 px di schermo, 80 px da 1440 px (09/10) */
  height: calc(68px + 1.2 * var(--cresce));
  width: min(100% - 24px, 100% - 2 * var(--margine) + 44px, var(--largo) + 44px);
  margin-inline: auto;
  padding: 0 11px 0 22px;
  border-radius: 18px;
  color: var(--inchiostro);
  pointer-events: auto;
}
/* Il vetro sta in un livello a parte, così il menu a tutto schermo non resta chiuso dentro la barra.
   Sta sopra al menu aperto: la barra resta bianca e il logo si legge anche sul grigio */
.testata__barra::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  /* Bianca fin dall'inizio (05/10): all'86% in cima alla pagina, sopra le fasce grigie sembrava sbiadita,
     e diventava bianca solo scorrendo. Ora è sempre come quando la pagina è già scesa */
  background: rgba(255, 255, 255, .95);
  box-shadow: inset 0 0 0 1px rgba(10, 9, 8, .1), 0 16px 44px -24px rgba(10, 9, 8, .5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}

/* Il logo passa da 30 a 40 px di altezza, cioè da 162 a 215 px di larghezza (09/10): metà dell'altezza della barra */
.testata__logo { flex: none; margin-right: calc(18px + .6 * var(--cresce)); }
.testata__logo img { width: auto; height: calc(30px + var(--cresce)); }

.testata__azioni { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.testata__telefono {
  display: none;
  margin-right: 10px;
  font: 500 calc(.8rem + .08 * var(--cresce))/1 var(--mono);
  letter-spacing: .04em;
  color: var(--grigio);
  transition: color .2s;
}
.testata__telefono:hover { color: var(--inchiostro); }
.testata__icona {
  display: grid;
  place-items: center;
  width: calc(46px + .6 * var(--cresce));
  height: calc(46px + .6 * var(--cresce));
  border-radius: 12px;
  transition: background .2s;
}
.testata__icona .icona { width: calc(20px + .2 * var(--cresce)); height: calc(20px + .2 * var(--cresce)); }
.testata__icona:hover,
.testata__icona[aria-expanded="true"] { background: rgba(10, 9, 8, .07); }
.testata__preventivo {
  min-height: calc(46px + .6 * var(--cresce));
  padding: 3px 3px 3px calc(18px + .2 * var(--cresce));
  border-radius: 12px;
  font-size: calc(.875rem + .12 * var(--cresce));
}
.testata__preventivo .pulsante__freccia { width: calc(40px + .6 * var(--cresce)); height: calc(40px + .6 * var(--cresce)); }

.testata__menu { position: relative; display: none; width: 46px; height: 46px; border-radius: 12px; background: rgba(10, 9, 8, .07); }
.testata__menu span {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--inchiostro);
  transition: transform .4s var(--molla), top .4s var(--molla);
}
.testata__menu span + span { top: 26px; }
.menu-aperto .testata__menu span { top: 22px; transform: rotate(45deg); }
.menu-aperto .testata__menu span + span { transform: rotate(-45deg); }

/* ----- Menu ----- */
.menu__lista { display: flex; align-items: center; gap: 2px; }
/* Ogni voce è un collegamento alla sua pagina. Quelle con un sottomenu hanno accanto la freccia, un pulsante a sé
   (09/10): il fondo grigio al passaggio del mouse sta sulla voce intera, nome e freccia insieme */
.menu__voce { display: flex; align-items: center; border-radius: 11px; transition: background .2s; }
/* Le voci passano da 15,2 a 16,8 px (09/10); lo spazio intorno alla scritta resta di 14 px */
.menu__pulsante {
  display: inline-flex;
  align-items: center;
  height: calc(42px + .6 * var(--cresce));
  padding: 0 14px;
  font-weight: 500;
  font-size: calc(.95rem + .16 * var(--cresce));
  white-space: nowrap;
}
.menu__voce[data-menu-voce] > .menu__pulsante { padding-right: 0; }
.menu__apri {
  display: grid;
  place-items: center;
  height: calc(42px + .6 * var(--cresce));
  padding: 0 14px 0 7px;
  border-radius: 11px;
}
.menu__apri .icona { width: 14px; height: 14px; opacity: .7; transition: transform .4s var(--molla); }
.menu__categoria { display: block; }
.menu__numero { font: 500 .7rem/1 var(--mono); letter-spacing: .08em; color: var(--rosso); }
.menu__contatti { display: none; }

.pannello-testata {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  border-radius: 18px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(10, 9, 8, .1), 0 30px 60px -28px rgba(10, 9, 8, .55);
}

@media (min-width: 1180px) {
  .menu__voce:hover,
  .menu__voce.is-aperta { background: rgba(10, 9, 8, .06); }
  .menu__voce.is-aperta > .menu__apri .icona { transform: rotate(180deg); }

  .menu__pannello {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    padding: 30px 30px 26px;
    border-radius: 18px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(10, 9, 8, .1), 0 30px 60px -28px rgba(10, 9, 8, .55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s, transform .35s var(--molla), visibility 0s .25s;
  }
  /* Ponte invisibile: il mouse passa dalla barra al pannello senza che si chiuda */
  .menu__pannello::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .menu__voce.is-aperta > .menu__pannello {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  @media (hover: hover) and (pointer: fine) {
    .menu__voce:hover > .menu__apri .icona { transform: rotate(180deg); }
    .menu__voce:hover > .menu__pannello { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  }

  .menu__dentro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 40px; }
  /* "Azienda" ha due colonne, Chi siamo e Lavora con noi (09/10): divise a metà, così il pannello non resta vuoto a destra */
  .menu__dentro--due { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu__categoria {
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--riga-chiara);
    font-weight: 800;
    font-stretch: 125%;
    font-size: 1.05rem;
    line-height: 1.15;
    text-transform: uppercase;
    transition: color .2s;
  }
  .menu__categoria .menu__numero { display: block; margin-bottom: 10px; }
  .menu__categoria:hover { color: var(--rosso); }
  .menu__sotto a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    color: var(--grigio);
    font-size: .98rem;
    transition: color .2s, transform .4s var(--molla);
  }
  /* In tutti i pannelli la voce sotto il mouse diventa rossa, come le categorie dei servizi: prima i servizi,
     i settori e le voci di "Azienda" si spostavano soltanto (l'ha notato Nicola il 05/10, sera) */
  .menu__sotto a:hover { color: var(--rosso); transform: translateX(6px); }
  .menu__sotto--colonne { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
  .menu__sotto--colonne a { padding: 11px 0; border-bottom: 1px solid var(--riga-chiara); font-weight: 600; font-stretch: 112%; color: var(--inchiostro); }
  .menu__tutti { grid-column: 1 / -1; justify-self: start; margin-top: 14px; }
}
/* Il telefono nella barra, solo l'icona sui portatili piccoli, da 1180 a 1399 px, come la lente della ricerca
   (14/10, scelta di Nicola). Sotto i 1180 px il telefono sta nel molo, la barra in basso; da 1400 px c'è il numero */
.testata__telefono .icona { display: none; }
@media (min-width: 1180px) and (max-width: 1399px) {
  .testata__telefono {
    display: grid;
    place-items: center;
    width: calc(46px + .6 * var(--cresce));
    height: calc(46px + .6 * var(--cresce));
    margin-right: 0;
    border-radius: 12px;
    color: var(--inchiostro);
    transition: background .2s;
  }
  .testata__telefono:hover { background: rgba(10, 9, 8, .07); }
  .testata__telefono .icona { display: block; width: calc(20px + .2 * var(--cresce)); height: calc(20px + .2 * var(--cresce)); }
  .testata__telefono span { display: none; }
}
/* Il numero di telefono nella barra, da 1400 px. Il 09/10, con sei voci nel menu, era passato a 1560 px; con
   "Lavora con noi" tornato dentro "Azienda" le voci sono cinque, e da 1400 px resta uno spazio di almeno 40 px */
@media (min-width: 1400px) {
  .testata__telefono { display: block; }
}

/* ----- Menu su telefono e tablet: a tutto schermo, con le sottovoci che si aprono sotto ----- */
@media (max-width: 1179px) {
  .testata { inset: 10px 0 auto; }
  /* Su telefono e tablet la barra resta com'era: a Nicola sembrava già giusta (09/10) */
  .testata__barra { height: 60px; padding: 0 7px 0 16px; border-radius: 16px; }
  .testata__logo img { height: 26px; }
  .testata__preventivo { display: none; }
  .testata__menu { display: block; }

  .menu {
    position: fixed;
    inset: 0;
    z-index: -2;
    display: flex;
    flex-direction: column;
    padding: 100px var(--margine) 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
    --accento: #fff;
    --riga: var(--riga-scura);
    background: var(--grigio);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility 0s .3s;
  }
  .menu-aperto { overflow: hidden; }
  .menu-aperto .menu { opacity: 1; visibility: visible; transition-delay: 0s; }

  .menu__lista { display: block; border-top: 1px solid var(--riga-scura); }
  /* Il nome a sinistra porta alla pagina, la freccia a destra apre il sottomenu, che sta sotto tutta la riga */
  .menu__voce { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; border-radius: 0; border-bottom: 1px solid var(--riga-scura); }
  .menu__pannello { grid-column: 1 / -1; }
  .menu__pulsante {
    display: flex;
    width: 100%;
    height: auto;
    padding: 20px 0;
    font-weight: 800;
    font-stretch: 125%;
    font-size: clamp(1.6rem, 7.6vw, 2.6rem);
    line-height: 1;
    letter-spacing: -.02em;
    text-align: left;
    text-transform: uppercase;
  }
  /* La freccia resta allineata al bordo destro, come prima; la zona da toccare è di 48 px */
  .menu__apri { width: 48px; height: 48px; margin-right: -13px; padding: 0; border-radius: 12px; }
  .menu__apri .icona { width: 22px; height: 22px; opacity: 1; }
  .menu__voce.is-aperta > .menu__apri .icona { transform: rotate(180deg); }

  .menu__pannello {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .5s var(--molla), visibility 0s .5s;
  }
  .menu__voce.is-aperta > .menu__pannello { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
  .menu__dentro { min-height: 0; overflow: hidden; }
  .menu__colonna { padding-bottom: 18px; }
  .menu__categoria { padding: 6px 0 8px; font-weight: 700; font-stretch: 112%; font-size: 1.1rem; }
  .menu__categoria .menu__numero { margin-right: 8px; color: rgba(255, 255, 255, .7); }
  .menu__sotto a { display: block; padding: 8px 0; color: rgba(255, 255, 255, .86); font-size: 1.02rem; }
  .menu__sotto--colonne { padding-bottom: 10px; }
  .menu__tutti { margin: 0 0 22px; }

  .menu__contatti {
    display: grid;
    gap: 10px;
    margin-top: auto;
    padding-top: 32px;
    font: 500 .85rem/1.4 var(--mono);
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .9);
  }
}

/* ----- Ricerca ----- */
.ricerca { padding: 14px; }
.ricerca[hidden] { display: none; }
.ricerca__riga { display: flex; gap: 10px; }
.ricerca input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: rgba(10, 9, 8, .06);
  color: var(--inchiostro);
  font: inherit;
}
.ricerca input::placeholder { color: rgba(10, 9, 8, .5); }
.ricerca input:focus { outline: 2px solid var(--rosso); outline-offset: 0; }
.ricerca .pulsante { padding-right: 22px; }

/* =========================================================
   Il filo: rosso sul bianco, bianco sul grigio e sul rosso.
   Lo script gli dà i colori sezione per sezione (--filo e --fondo).
   Le curve sono smussate a 45 gradi, come le piste dei circuiti sui furgoni.
   ========================================================= */
/* container-type: le foto che escono fino al bordo misurano la larghezza della pagina (100cqi), senza la barra di scorrimento */
.pagina { position: relative; container-type: inline-size; }
.filo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* Il filo è fatto a pezzi (vedi lo script): traccia, alone e filo vivo sono tre gruppi di pezzi,
   e il tratto lo decide il gruppo. L'opacità dell'alone vale per tutto il gruppo */
.filo path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.filo__traccia { stroke: rgba(150, 150, 149, .55); stroke-width: 2; stroke-dasharray: 1 8; }
.filo__alone { stroke: url(#filo-colori); stroke-width: 13; opacity: .14; }
.filo__vivo { stroke: url(#filo-colori); stroke-width: 3.5; }
.filo__vivo path { stroke-linecap: butt; stroke-linejoin: miter; }
/* I nodi sono anelli, come quelli in fondo alle piste: spenti sono tenui, accesi prendono il colore del filo */
.filo__nodo { stroke-width: 3.5; stroke-opacity: .32; transition: stroke-opacity .3s, r .4s var(--molla); }
.filo__nodo.is-acceso { stroke-opacity: 1; r: 8.5px; }
.filo__nodo--fine { fill: #fff; stroke: #fff; }
.filo__punta circle { fill: currentColor; }
.filo__punta .filo__eco { opacity: .35; transform-box: fill-box; transform-origin: center; animation: eco 1.6s ease-out infinite; }
@keyframes eco {
  from { transform: scale(.4); opacity: .5; }
  to { transform: scale(1.5); opacity: 0; }
}
/* Su telefono il filo corre nel margine stretto: più sottile */
@media (max-width: 767px) {
  .filo__alone { stroke-width: 7; opacity: .12; }
  .filo__vivo { stroke-width: 2.5; }
  .filo__nodo { stroke-width: 2.5; }
}

/* =========================================================
   Apertura: titolo grande e video che si allarga scorrendo
   ========================================================= */
.apertura {
  position: relative;
  padding-top: clamp(118px, 18vh, 190px);
}
/* Reticolo da foglio tecnico */
.apertura__reticolo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, var(--reticolo) 1px, transparent 1px) 50% 0 / 72px 72px,
    linear-gradient(to bottom, var(--reticolo) 1px, transparent 1px) 50% 0 / 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000 20%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 20%, transparent 78%);
}
.apertura__testo { container-type: inline-size; }
.apertura__titolo {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 10.3cqi;
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.riga { display: block; overflow: hidden; padding-top: .06em; margin-top: -.06em; white-space: nowrap; }
.riga > span { display: inline-block; }
.riga--rossa { color: var(--rosso); }
.a-capo { display: block; }
.js .riga > span { transform: translateY(108%); animation: sali 1.1s var(--molla) forwards; animation-delay: calc(.15s + var(--n, 0) * .1s); }
@keyframes sali { to { transform: none; } }

/* Cartiglio: i tre dati dell'azienda su una fascia grigia inclinata che esce dal bordo destro,
   con una riga rossa accanto: come il pannello grigio dei biglietti da visita. Solo su schermi larghi */
.cartiglio {
  position: absolute;
  right: 0;
  top: -14px;
  isolation: isolate;
  display: none;
  width: min(26cqi, 330px);
  padding: 7px 0 8px;
  color: #fff;
  font: 500 .74rem/1.3 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.cartiglio::before,
.cartiglio::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  transform: skewX(var(--pendenza));
  transform-origin: 0 100%;
}
.cartiglio::before { left: -66px; right: calc(-40px - max(var(--margine), (100vw - var(--largo)) / 2)); background: var(--grigio); }
.cartiglio::after { left: -96px; width: 12px; background: var(--rosso); }
.cartiglio li { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 5px 0; }
.cartiglio li + li { border-top: 1px solid var(--riga-scura); }
.cartiglio span { color: var(--velato); }
.js .cartiglio { opacity: 0; animation: entra .9s ease .9s forwards; }
/* Deve stare tutto accanto alla prima riga del titolo, che è corta */
@media (min-width: 1180px) {
  .cartiglio { display: block; }
}

.apertura__sotto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(22px, 3.4vw, 35px);
}
.apertura__motto {
  font-weight: 400;
  font-stretch: 100%;
  font-size: clamp(1.1rem, 1.9vw, 1.7rem);
  line-height: 1.25;
  color: var(--grigio);
}
.apertura__scorri {
  display: none;
  align-items: center;
  gap: 12px;
  font: 500 .75rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grigio);
}
.apertura__scorri .icona { width: 18px; height: 18px; color: var(--rosso); animation: giu 1.8s var(--molla) infinite; }
@keyframes giu {
  0% { transform: translateY(-5px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(6px); opacity: 0; }
}
.js .apertura__sotto { opacity: 0; animation: entra .9s ease .75s forwards; }
@keyframes entra { to { opacity: 1; } }

/* Lo "schermo": all'inizio è una finestra con gli angoli tondi, scorrendo arriva ai bordi (--p va da 0 a 1) */
.apertura__schermo {
  --p: 0;
  position: relative;
  z-index: 2;
  height: clamp(340px, 62vw + 140px, 88vh);
  margin-top: clamp(30px, 5vw, 51px);
  overflow: hidden;
  background: var(--grigio-3);
  clip-path: inset(0 calc(var(--rientro) * (1 - var(--p))) round calc(26px * (1 - var(--p))));
}
.apertura__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.1 - .1 * var(--p)));
}
.js .apertura__schermo { opacity: 0; animation: entra 1.1s ease .55s forwards; }
.apertura__pausa {
  position: absolute;
  right: calc(var(--rientro) + 16px);
  bottom: 16px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(13, 14, 16, .55);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background .2s;
}
.apertura__pausa:hover { background: var(--rosso); }
.apertura__pausa .icona--play { display: none; fill: currentColor; stroke: none; }
.apertura__pausa.is-fermo .icona--play { display: block; }
.apertura__pausa.is-fermo .icona--pausa { display: none; }

@media (min-width: 700px) {
  /* Il titolo segue la colonna, ma non va oltre la misura di adesso (05/10, sera): con la colonna tornata a
     1440 px sarebbe tornato a 140 px, e Nicola ha chiesto i caratteri di adesso. 7,02rem = 9,75% di 1152 px */
  .apertura__titolo { font-size: min(9.75cqi, 7.02rem); }
  .a-capo { display: inline; }
}
@media (min-width: 900px) {
  .apertura__scorri { display: inline-flex; }
}

/* =========================================================
   01 · Servizi: tre "cassetti" che si impilano scorrendo
   ========================================================= */
.servizi { position: relative; padding: clamp(84px, 12vw, 136px) 0 clamp(70px, 9vw, 104px); background: var(--grigio); color: #fff; }
.capo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
  margin-bottom: clamp(30px, 5vw, 56px);
}
.capo .segno { margin-bottom: clamp(16px, 2vw, 21px); }

.pila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.cassetto { position: relative; }
.cassetto__scatola {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  --riga: var(--riga-chiara);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 -24px 50px -30px rgba(0, 0, 0, .6);
  color: var(--inchiostro);
  transform: scale(calc(1 - .04 * var(--coperto, 0)));
  transform-origin: 50% 0;
}
/* Più un cassetto è coperto, più va in ombra */
.cassetto__scatola::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: calc(.34 * var(--coperto, 0));
  pointer-events: none;
}
.cassetto__capo {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  flex: none;
  height: 74px;
  padding: 0 14px 0 clamp(18px, 2.4vw, 24px);
  border-bottom: 1px solid var(--riga);
}
.cassetto__numero { font: 500 .8rem/1 var(--mono); letter-spacing: .08em; opacity: .75; }
.cassetto__titolo {
  margin-right: auto;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(.8rem, 4.2vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.cassetto__vai {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  background: var(--inchiostro);
  color: #fff;
  transition: background .25s, color .25s;
}
.cassetto__vai .icona { transition: transform .5s var(--molla); }
.cassetto__vai:hover { background: var(--rosso); color: #fff; }
.cassetto__vai:hover .icona { transform: translate(2px, -2px); }

.cassetto__corpo { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; }
.cassetto__testo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: clamp(22px, 3vw, 32px) clamp(18px, 3vw, 35px) clamp(18px, 2.4vw, 24px) clamp(18px, 2.4vw, 24px);
}
.cassetto__testo p { max-width: 31em; color: var(--grigio); font-size: clamp(1.02rem, 1.4vw, 1.06rem); line-height: 1.5; text-wrap: pretty; }
.cassetto__testo p strong { color: var(--inchiostro); }
.cassetto__elenco a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--riga);
  font-weight: 500;
  font-size: clamp(.98rem, 1.15vw, 1.1rem);
  line-height: 1.25;
}
.cassetto__elenco a span { transition: transform .5s var(--molla); }
.cassetto__elenco .icona { width: 18px; height: 18px; opacity: .55; transition: transform .5s var(--molla), opacity .25s; }
.cassetto__elenco a:hover span { transform: translateX(8px); }
.cassetto__elenco a:hover .icona { transform: translateX(-4px); opacity: 1; }
.cassetto__foto { position: relative; min-height: 230px; margin: 0 12px 12px; overflow: hidden; border-radius: 16px; background: var(--grigio-3); }
.cassetto__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* I tre cassetti hanno i colori del logo: bianco, rosso e nero */
.cassetto :focus-visible { outline-color: var(--rosso); }
.cassetto--rosso .cassetto__scatola { --riga: rgba(255, 255, 255, .36); background: var(--rosso); color: #fff; }
.cassetto--rosso .cassetto__testo p,
.cassetto--rosso .cassetto__testo p strong { color: #fff; }
.cassetto--rosso .cassetto__vai { background: rgba(255, 255, 255, .22); }
.cassetto--rosso .cassetto__vai:hover { background: #fff; color: var(--inchiostro); }
.cassetto--rosso :focus-visible { outline-color: #fff; }
.cassetto--nero .cassetto__scatola { --riga: var(--riga-scura); background: var(--inchiostro); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 -24px 50px -30px rgba(0, 0, 0, .6); color: #fff; }
.cassetto--nero .cassetto__testo p { color: rgba(255, 255, 255, .78); }
.cassetto--nero .cassetto__testo p strong { color: #fff; }
.cassetto--nero .cassetto__vai { background: rgba(255, 255, 255, .16); }
.cassetto--nero .cassetto__vai:hover { background: #fff; color: var(--inchiostro); }
.cassetto--nero :focus-visible { outline-color: #fff; }

@media (max-width: 899px) {
  .cassetto__corpo { grid-template-rows: auto auto; }
  .cassetto__foto { order: -1; min-height: 0; margin: 12px 12px 0; aspect-ratio: 16 / 10; }
}
@media (min-width: 900px) {
  .cassetto__titolo { font-size: clamp(1.25rem, 2.1vw, 1.75rem); }
  .cassetto__corpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cassetto__foto { margin: 12px 12px 12px 0; }
}
/* Schermi grandi e abbastanza alti: i cassetti restano in alto e il successivo ci sale sopra.
   Lo script mette "is-impilata" solo se il testo di ogni cassetto sta tutto nell'altezza fissa:
   altrimenti restano schede normali, una sotto l'altra (--n è il numero dei cassetti) */
@media (min-width: 1000px) and (min-height: 760px) {
  .pila.is-impilata .cassetto {
    /* 98 px dall'alto, o 16 px sotto la barra dove la barra è cresciuta (09/10): lo script fa gli stessi conti */
    --cima: max(98px, var(--fondo-testata) + 16px);
    position: sticky;
    top: calc(var(--cima) + var(--i) * 74px);
    height: min(512px, 100vh - var(--cima) - (var(--n) - 1) * 74px - 20px - var(--molo));
  }
}

/* =========================================================
   02 · Azienda   03 · Certificazione
   ========================================================= */
.azienda { padding: clamp(84px, 11vw, 136px) 0 clamp(70px, 9vw, 104px); }
.azienda__griglia { display: grid; gap: clamp(44px, 6vw, 58px) 24px; }
.azienda__foto { position: relative; padding-bottom: 12%; margin-right: 6%; }
.azienda__grande { overflow: hidden; border-radius: 24px; }
.azienda__grande img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.azienda__piccola {
  position: absolute;
  right: -6.5%;
  bottom: 0;
  width: 44%;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 0 0 8px var(--carta), 0 30px 60px -28px rgba(0, 0, 0, .5);
}
.azienda__piccola img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
[data-parallasse] { translate: 0 var(--sposta, 0); will-change: translate; }
.azienda__testo .segno,
.certificazione__testo .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.azienda__testo .testo,
.certificazione__testo .testo { margin: clamp(18px, 2.2vw, 24px) 0 clamp(26px, 3vw, 32px); }

.certificazione { padding: clamp(70px, 9vw, 104px) 0 clamp(90px, 12vw, 144px); }
.certificazione__griglia { display: grid; gap: clamp(44px, 6vw, 58px) 24px; align-items: center; }

@media (min-width: 900px) {
  .azienda__griglia,
  .certificazione__griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .azienda__foto { grid-column: 1 / span 7; margin-right: 0; }
  .azienda__testo { grid-column: 9 / span 4; }
  .certificazione__testo { grid-column: 1 / span 7; }
  .certificazione .targa { grid-column: 8 / span 5; }
}

/* ----- Targa: come le targhette avvitate sui quadri. È quella della versione scura, color metallo
   con le scritte scure: scelta dell'utente dell'01/10, al posto della targa scura con le scritte bianche ----- */
.targa {
  position: relative;
  padding: clamp(34px, 4.4vw, 48px) clamp(30px, 4.4vw, 48px);
  border-radius: 20px;
  background: linear-gradient(140deg, #dde0dd, #c3c8c4);
  color: #121416; /* l'inchiostro della versione scura */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 1px rgba(18, 20, 22, .12), 0 40px 70px -40px rgba(0, 0, 0, .55);
}
.targa::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1.5px solid rgba(18, 20, 22, .5);
  border-radius: 9px;
  pointer-events: none;
}
.targa__vite {
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: linear-gradient(140deg, #f4f5f4, #9ea3a0);
  box-shadow: inset 0 0 0 1px rgba(18, 20, 22, .4);
}
.targa__vite::after { content: ""; position: absolute; left: 2px; right: 2px; top: 5.75px; height: 1.5px; background: rgba(18, 20, 22, .6); transform: rotate(-35deg); }
.targa__vite:nth-of-type(1) { left: 22px; top: 22px; }
.targa__vite:nth-of-type(2) { right: 22px; top: 22px; }
.targa__vite:nth-of-type(3) { left: 22px; bottom: 22px; }
.targa__vite:nth-of-type(4) { right: 22px; bottom: 22px; }
.targa__vite:nth-of-type(2)::after { transform: rotate(20deg); }
.targa__vite:nth-of-type(3)::after { transform: rotate(75deg); }
.targa__vite:nth-of-type(4)::after { transform: rotate(-10deg); }
.targa__riga {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px;
  font: 500 .72rem/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.targa__marchio { width: min(58%, 300px); margin: clamp(22px, 3vw, 32px) auto; mix-blend-mode: multiply; }
.targa__campi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid rgba(18, 20, 22, .5); }
.targa__campi > div { padding: 12px 12px 0; }
.targa__campi > div + div { border-left: 1.5px solid rgba(18, 20, 22, .5); }
.targa__campi dt { font: 500 .62rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(18, 20, 22, .68); }
.targa__campi dd { margin-top: 4px; font-weight: 700; font-stretch: 112%; font-size: clamp(.9rem, 1.3vw, 1.15rem); line-height: 1.15; }

/* Telefoni stretti: le tre voci una sotto l'altra, voce a sinistra e valore a destra */
@media (max-width: 419px) {
  .targa { padding: 30px 26px; }
  .targa__riga { padding: 0 12px; }
  .targa__campi { grid-template-columns: minmax(0, 1fr); }
  .targa__campi > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; }
  .targa__campi > div + div { border-left: 0; border-top: 1px solid rgba(18, 20, 22, .25); }
  .targa__campi dd { margin-top: 0; text-align: right; }
}

.certificazione .targa { rotate: -1.6deg; transition: rotate .8s var(--molla); }
.certificazione .targa:hover { rotate: 0deg; }
.js .certificazione .targa[data-compare] { transform: translateY(40px) rotate(-5deg); }
.js .certificazione .targa[data-compare].is-vista { transform: none; }

/* =========================================================
   04 · Settori: nove pillole grandi
   ========================================================= */
.settori { position: relative; padding: clamp(84px, 11vw, 136px) 0 clamp(80px, 10vw, 120px); background: var(--grigio); color: #fff; }
.settori__capo { display: grid; gap: clamp(26px, 3.4vw, 38px); margin-bottom: clamp(36px, 5vw, 61px); }
.settori__titolo .segno { margin-bottom: clamp(16px, 2vw, 21px); }
.settori__testo { display: grid; gap: clamp(22px, 2.6vw, 27px) 40px; justify-items: start; }
/* Su schermi larghi il titolo sta a destra, dalla parte del filo */
@media (min-width: 900px) {
  .settori__titolo { text-align: right; }
  .settori__titolo .segno { justify-content: flex-end; }
  .settori__testo { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

.nuvola { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.1vw, 13px); }
.pillola {
  display: inline-flex;
  align-items: flex-start;
  gap: .3em;
  padding: .3em .62em .24em;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
  font-weight: 700;
  font-stretch: 125%;
  font-size: clamp(1rem, 5.5vw, 1.45rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-transform: uppercase;
  transition: background .3s, color .3s, box-shadow .3s, rotate .5s var(--molla), scale .5s var(--molla);
}
@media (min-width: 700px) {
  .pillola { font-size: clamp(1.45rem, 3.3vw, 2.56rem); }
}
.pillola sup { margin-top: .5em; font: 500 max(.2em, .62rem)/1 var(--mono); letter-spacing: .08em; color: rgba(255, 255, 255, .75); transition: color .3s; }
/* Sul grigio le pillole si accendono di bianco, con il numero rosso */
.pillola:hover { background: #fff; color: var(--inchiostro); box-shadow: inset 0 0 0 1.5px #fff; rotate: -2deg; scale: 1.03; }
.nuvola li:nth-child(even) .pillola:hover { rotate: 2deg; }
.pillola:hover sup { color: var(--rosso); }

/* =========================================================
   05 · Realizzazioni: un nastro che scorre di lato
   ========================================================= */
.lavori { padding: clamp(84px, 11vw, 136px) 0 clamp(90px, 11vw, 136px); }
.lavori .segno { margin-bottom: clamp(18px, 2.2vw, 24px); }
.lavori__capo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(30px, 4.4vw, 48px); }
/* Il titolo non si stringe sotto la sua parola più lunga: se non c'è posto, i comandi vanno a capo */
.lavori__capo > :first-child { flex: 1 1 0; min-width: min-content; }
.lavori__comandi { display: flex; align-items: center; gap: 10px; flex: none; }
/* Su telefono si scorre con il dito: le frecce servono a chi usa il mouse */
@media (max-width: 699px) {
  .lavori__comandi .tondo { display: none; }
  .lavori__comandi .collegamento { margin-right: 0; }
}
.lavori__comandi .collegamento { margin-right: 18px; }

.nastro {
  position: relative;
  z-index: 2;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--rientro);
  scrollbar-width: none;
  cursor: grab;
}
.nastro::-webkit-scrollbar { display: none; }
.nastro.is-trascinato { scroll-snap-type: none; cursor: grabbing; }
.nastro.is-trascinato a { pointer-events: none; }
.nastro__lista { display: flex; gap: clamp(12px, 1.6vw, 18px); width: max-content; padding-inline: var(--rientro); }
.nastro__lista > li { width: clamp(240px, 25vw, 304px); scroll-snap-align: start; }

.scheda { position: relative; display: block; -webkit-user-drag: none; user-select: none; }
.scheda__foto { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: var(--nebbia); }
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--molla); pointer-events: none; }
.scheda__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(228, 3, 46, .78), rgba(228, 3, 46, 0) 55%);
  opacity: 0;
  transition: opacity .4s;
}
.scheda:hover .scheda__foto img { transform: scale(1.07); }
.scheda:hover .scheda__foto::after { opacity: 1; }
.scheda__settore,
.scheda__numero {
  position: absolute;
  top: 12px;
  z-index: 1;
  padding: 7px 10px;
  border-radius: 6px;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.scheda__settore { left: 12px; background: var(--grigio-chiaro); color: var(--inchiostro); }
.scheda__numero { right: 12px; background: rgba(13, 14, 16, .6); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.scheda__vai {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  color: var(--inchiostro);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s, transform .5s var(--molla);
}
.scheda:hover .scheda__vai,
.scheda:focus-visible .scheda__vai { opacity: 1; transform: none; }
.scheda__titolo { margin-top: 14px; padding-right: 8px; font-weight: 600; font-stretch: 108%; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.25; text-wrap: balance; }

.nastro__barra { height: 2px; margin-top: clamp(26px, 3vw, 32px); background: var(--riga); }
.nastro__barra span { display: block; height: 100%; background: var(--rosso); transform: scaleX(.2); transform-origin: 0 50%; }

/* =========================================================
   Invito: è grigio finché non arriva il filo, poi si accende di rosso.
   A destra il fregio dei furgoni: fasce inclinate e piste bianche con gli anelli
   ========================================================= */
.invito { --fondo: var(--rosso); position: relative; overflow: hidden; padding: clamp(84px, 12vw, 152px) 0; background: var(--rosso); color: #fff; }
.js .invito { background: var(--grigio); }
/* Il rosso arriva con un disco che si allarga dal punto dove finisce il filo. Il disco si ingrandisce con una
   trasformazione, che la scheda grafica fa da sola: prima era un ritaglio (clip-path) che si allargava, e il
   browser ridipingeva tutta la fascia a ogni immagine (03/10/2026). Il raggio finale --presa-r lo calcola lo
   script, uguale a quello del ritaglio di prima: circle(150%), cioè 1,5 volte la diagonale della fascia diviso √2 */
.js .invito::before {
  content: "";
  position: absolute;
  left: calc(var(--presa-x, 8%) - var(--presa-r, 150vmax));
  top: calc(var(--presa-y, 30%) - var(--presa-r, 150vmax));
  width: calc(2 * var(--presa-r, 150vmax));
  height: calc(2 * var(--presa-r, 150vmax));
  border-radius: 50%;
  background: var(--rosso);
  transform: scale(0);
  transition: transform 1.2s var(--molla);
}
.js .invito.is-acceso::before { transform: none; }
.invito__dentro { display: grid; gap: clamp(30px, 4vw, 45px); justify-items: start; }

/* Fregio: le fasce inclinate e le piste con gli anelli dei furgoni. Le fasce sono un tono più scuro
   dello sfondo, così vanno bene sul grigio e sul rosso. Quando l'invito si accende, le piste si disegnano */
.fregio {
  position: absolute;
  top: 0;
  right: 0;
  width: min(30%, 460px);
  height: 100%;
  overflow: visible; /* le fasce continuano a sinistra, sotto il testo: solo le piste restano a destra */
  pointer-events: none;
}
.fregio__fascia { fill: rgba(10, 9, 8, .16); }
.fregio__pista { fill: none; stroke: #fff; stroke-width: 5; }
.fregio__anello { fill: none; stroke: #fff; stroke-width: 5; }
.fregio__punto { fill: #fff; }
.js .invito .fregio__pista { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--molla) var(--ritardo, .25s); }
.js .invito.is-acceso .fregio__pista { stroke-dashoffset: 0; }
.js .invito .fregio__anello,
.js .invito .fregio__punto { opacity: 0; scale: .3; transform-box: fill-box; transform-origin: center; transition: opacity .4s calc(var(--ritardo, .25s) + .7s), scale .6s var(--molla) calc(var(--ritardo, .25s) + .7s); }
.js .invito.is-acceso .fregio__anello,
.js .invito.is-acceso .fregio__punto { opacity: 1; scale: 1; }
/* Su schermi stretti il testo prende tutta la larghezza: restano solo le fasce */
@media (max-width: 899px) {
  .fregio { width: 46%; }
  .fregio__pista,
  .fregio__anello,
  .fregio__punto { display: none; }
}
.invito__testo {
  max-width: 15em;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(1.9rem, 5.3vw, 4.08rem);
  line-height: .95;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Su schermi larghi il testo lascia libero il lato destro, dove stanno le piste del fregio */
@media (min-width: 900px) {
  .invito__testo { max-width: 68%; }
}
.invito__testo em { font-style: normal; color: transparent; -webkit-text-stroke: .035em #fff; paint-order: stroke fill; }
.invito :focus-visible { outline-color: #fff; }

/* =========================================================
   Piede
   ========================================================= */
.piede { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 80px) 0 34px; background: var(--grigio); color: #fff; }
.piede__alto {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 40px;
  flex-wrap: wrap;
  padding-bottom: clamp(30px, 4vw, 38px);
  border-bottom: 1px solid var(--riga-scura);
}
/* Il logo sta su una fascia bianca inclinata che entra dal bordo sinistro: così resta com'è, nero e rosso */
.piede__logo { position: relative; isolation: isolate; padding: clamp(16px, 2vw, 24px) clamp(30px, 4vw, 54px) clamp(16px, 2vw, 24px) 0; }
.piede__logo::before,
.piede__logo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  background: #fff;
  transform: skewX(var(--pendenza));
  transform-origin: 100% 100%;
}
.piede__logo::before { left: -100vw; right: 0; }
.piede__logo::after { left: calc(100% + 14px); width: 10px; }
.piede__logo img { width: clamp(200px, 24vw, 330px); }
.piede__social { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.piede__colonne { display: grid; gap: 22px 32px; padding: clamp(30px, 4vw, 38px) 0; }
.piede__colonne p { color: #fff; font-size: 1.02rem; line-height: 1.5; }
.piede__voce { display: block; margin-bottom: 8px; color: var(--velato); font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.piede__colonne a { transition: color .2s; }
.piede__colonne a:hover { text-decoration: underline; text-underline-offset: 4px; }
.piede__fondo {
  display: flex;
  justify-content: space-between;
  gap: 14px 32px;
  flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid var(--riga-scura);
  color: var(--velato);
  font-size: .8rem;
  line-height: 1.6;
}
.piede__fondo p { max-width: 62em; }
.piede__fondo a { text-decoration: underline; text-underline-offset: 3px; }
.piede__fondo a:hover { color: #fff; }
@media (min-width: 800px) {
  .piede__colonne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ----- Molo: contatti sempre a portata di dito, su telefono e tablet ----- */
.molo { display: none; }
@media (max-width: 1179px) {
  :root { --molo: 72px; }
  .molo {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 0 0 1px rgba(10, 9, 8, .12), 0 16px 40px -16px rgba(10, 9, 8, .55);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    transition: opacity .3s, translate .5s var(--molla);
  }
  .molo a { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 12px; color: var(--inchiostro); }
  .molo a:active { background: rgba(10, 9, 8, .08); }
  .molo .molo__preventivo {
    display: flex;
    justify-content: center;
    width: auto;
    flex: 1;
    margin-left: 4px;
    background: var(--rosso);
    color: #fff;
    font-weight: 600;
    font-stretch: 112%;
    font-size: clamp(.76rem, 3.7vw, .9rem);
    white-space: nowrap;
  }
  .menu-aperto .molo { opacity: 0; translate: 0 20px; pointer-events: none; }
  .piede { padding-bottom: 104px; }
}

/* =========================================================
   Scheda di una realizzazione
   ========================================================= */
.copertina {
  --sporge: clamp(70px, 13vw, 168px);
  position: relative;
  padding-top: clamp(112px, 17vh, 180px);
  background: linear-gradient(to bottom, var(--grigio) calc(100% - var(--sporge)), transparent 0), var(--sfondo-chiaro);
  color: #fff;
}
/* Dove finisce il grigio e comincia il bianco: lì il filo cambia colore */
.copertina__cambio { --filo: var(--rosso); --fondo: #fff; position: absolute; left: 0; bottom: var(--sporge); width: 0; height: 0; }
.copertina .apertura__reticolo { bottom: var(--sporge); }
.briciole {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  color: var(--velato);
  font: 500 .7rem/1.4 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.briciole a { transition: color .2s; }
.briciole a:hover { color: #fff; }
.briciole [aria-current] { color: #fff; }
.copertina__riga { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 48px; margin: clamp(18px, 2.6vw, 27px) 0 clamp(30px, 4.6vw, 51px); }
.copertina__titolo {
  font-weight: 800;
  font-stretch: 125%;
  font-size: min(7.3vw, 2.9rem);
  line-height: .98;
  letter-spacing: -.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere; /* una parola più lunga della riga va a capo, invece di allargare la pagina */
}
@media (min-width: 700px) {
  .copertina__titolo { font-size: clamp(2.9rem, 4.15vw, 3.28rem); }
}
.copertina__lato { display: grid; gap: 22px; justify-items: start; }
/* Nella scheda realizzazione sotto i 1000 px lo script sposta "Settore" e "Caratteristiche" in fondo alla scheda tecnica,
   sul chiaro, prima di "torna alle realizzazioni" (19/10): colori del chiaro, e senza il pulsante, perché il modulo
   è subito sotto e la barra dei contatti ha già "Richiedi preventivo" */
.copertina__lato--in-fondo { margin-top: clamp(40px, 5vw, 56px); color: var(--inchiostro); }
.copertina__lato--in-fondo .dati dt { color: var(--grigio); }
.copertina__lato--in-fondo .pulsante { display: none; }
.dati dt { margin-bottom: 10px; color: var(--velato); font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
/* Tra un gruppo e l'altro un po' di spazio: con "Settore" e "Caratteristiche" le etichette si toccavano (05/10) */
.dati:not(.dati--riga) dd + dt { margin-top: 22px; }
.etichette { display: flex; flex-wrap: wrap; gap: 8px; }
.etichette a {
  display: block;
  padding: 9px 13px;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px var(--riga);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.25;
  transition: background .25s, box-shadow .25s, color .25s;
}
.etichette a:hover { background: #fff; box-shadow: none; color: var(--inchiostro); }
@media (min-width: 1000px) {
  .copertina__riga { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; }
  /* Nella scheda di una realizzazione il titolo resta in alto anche quando accanto ci sono tante etichette (05/10) */
  .copertina--realizzazione .copertina__riga { align-items: start; }
}

/* ----- Mosaico di foto: su telefono diventa una striscia da scorrere ----- */
.galleria { position: relative; }
.mosaico { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 18px; }
.mosaico::-webkit-scrollbar { display: none; }
.mosaico__foto { position: relative; flex: 0 0 100%; overflow: hidden; border-radius: 18px; background: var(--grigio-3); scroll-snap-align: center; cursor: zoom-in; }
.mosaico__foto img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--molla); }
.galleria__conta,
.galleria__tutte {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 1;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(13, 14, 16, .72);
  color: #fff;
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.galleria__conta { display: flex; pointer-events: none; }
.galleria__tutte { display: none; transition: background .2s; }
.galleria__tutte:hover { background: var(--rosso); }
.galleria__tutte .icona { width: 16px; height: 16px; }
@media (min-width: 700px) {
  .mosaico {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: clamp(340px, 43vw, 496px);
    overflow: hidden;
    border-radius: 24px;
  }
  .mosaico__foto { border-radius: 0; }
  .mosaico__foto:first-child { grid-row: 1 / span 2; }
  .mosaico__foto:nth-child(n + 6) { display: none; }
  /* Con meno di cinque foto (05/10): le ultime si allungano e riempiono il mosaico */
  .mosaico:has(> :nth-child(4):last-child) > :nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
  .mosaico:has(> :nth-child(3):last-child) > :not(:first-child) { grid-row: span 2; }
  .mosaico:has(> :nth-child(2):last-child) { grid-template-columns: 2fr 1fr; }
  .mosaico:has(> :nth-child(2):last-child) > :nth-child(2) { grid-row: 1 / span 2; }
  .mosaico:has(> :only-child) { grid-template-columns: 1fr; }
  .mosaico__foto img { aspect-ratio: auto; }
  .mosaico__foto:hover img { transform: scale(1.05); }
  .galleria__conta { display: none; }
  .galleria__tutte { display: inline-flex; right: 16px; bottom: 16px; }
}

/* ----- Racconto: i dati di targa e il testo del redattore ----- */
.racconto { padding: clamp(40px, 6vw, 72px) 0 clamp(80px, 10vw, 120px); }
.racconto .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }

/* La seconda parte di una realizzazione, in una sezione a sé, come oggi, dove il file lo chiede (prova del 05/10).
   Cambia lo sfondo, con gli stessi due colori: la sfumatura va al contrario, grigio a sinistra e bianco a destra,
   dalla parte del filo, che qui passa a destra. Sopra il testo, le foto della seconda parte nel mosaico della scheda */
.seguito {
  padding: clamp(60px, 7vw, 88px) 0 clamp(80px, 10vw, 120px);
  background: var(--carta) linear-gradient(to left, rgb(255 255 255 / 0), var(--grigio-chiaro));
}
.seguito .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.seguito .galleria + .contenuto { margin-top: clamp(36px, 5vw, 56px); }
/* Un video verticale non sta in mezzo al testo: a sinistra, con accanto i capitoli che lo seguono, come oggi (05/10).
   Il testo accanto al video ha i titoli sopra i paragrafi, come sul telefono */
.accanto { margin-top: clamp(26px, 3vw, 32px); border-top: 1px solid var(--riga-chiara); }
.segno + .accanto { margin-top: clamp(44px, 6vw, 72px); }
.galleria + .accanto { margin-top: clamp(36px, 5vw, 56px); }
.accanto > .contenuto__video { margin-top: clamp(26px, 3vw, 32px); }
.accanto > .contenuto--accanto { margin-top: 0; border-top: 0; }
.targa--dati { padding-top: clamp(30px, 3.6vw, 37px); padding-bottom: clamp(34px, 4vw, 42px); }
.targa--dati .targa__riga { margin-bottom: clamp(16px, 2vw, 21px); }
.targa--dati .targa__campi { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 12px; }
.targa--dati .targa__campi > div { display: block; padding: 14px 10px 14px 0; border: 0; border-bottom: 1px solid rgba(18, 20, 22, .2); }
.targa--dati .targa__campi dd { font-weight: 800; font-stretch: 125%; font-size: clamp(1rem, 5vw, 1.2rem); letter-spacing: -.02em; line-height: 1; margin-top: 8px; text-align: left; white-space: nowrap; }
.targa--dati .targa__campi small { display: block; white-space: normal; margin-top: 6px; font: 500 .66rem/1.2 var(--mono); letter-spacing: .06em; color: rgba(18, 20, 22, .7); }
@media (min-width: 700px) {
  .targa--dati .targa__campi { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 22px; }
  .targa--dati .targa__campi dd { font-size: clamp(1.2rem, 1.9vw, 1.9rem); }
}
@media (min-width: 1100px) {
  .targa--dati .targa__campi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .targa--dati .targa__campi > div { padding: 16px 14px 4px; border-bottom: 0; }
  .targa--dati .targa__campi > div + div { border-left: 1.5px solid rgba(18, 20, 22, .5); }
  .targa--dati .targa__campi > div:first-child { padding-left: 0; }
}

/* Il testo arriva dal campo di WordPress così com'è: titoli, paragrafi, elenchi e righe.
   Su schermi larghi ogni titolo sta a sinistra, con il suo numero, e il testo a destra. */
.contenuto { counter-reset: capitolo; margin-top: clamp(44px, 6vw, 72px); border-top: 1px solid var(--riga-chiara); }
.contenuto > :is(h2, h3, h4) {
  counter-increment: capitolo;
  padding-top: clamp(26px, 3vw, 32px);
  font-weight: 500;
  font-stretch: 112%;
  font-size: clamp(1.45rem, 2.5vw, 1.76rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.contenuto > :is(h2, h3, h4) strong { font-weight: 800; }
.contenuto > :is(h2, h3, h4)::before {
  content: counter(capitolo, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  color: var(--rosso);
  font: 500 .75rem/1 var(--mono);
  letter-spacing: .1em;
}
.contenuto > hr { height: 0; margin: clamp(26px, 3vw, 32px) 0 0; border: 0; border-top: 1px solid var(--riga-chiara); }
.contenuto > p { margin-top: 18px; color: var(--grigio); font-size: 1.06rem; line-height: 1.6; text-wrap: pretty; }
.contenuto > p strong { color: var(--inchiostro); }
.contenuto > h6 { margin-top: 18px; font-weight: 600; font-size: 1.06rem; line-height: 1.4; }
.contenuto > ul { margin-top: 14px; }
.contenuto > ul li { position: relative; padding: 13px 0 13px 30px; border-bottom: 1px solid var(--riga-chiara); font-size: clamp(1.02rem, 1.15vw, 1.12rem); line-height: 1.4; }
.contenuto > ul li:last-child { border-bottom: 0; }
.contenuto > ul li::before { content: ""; position: absolute; left: 0; top: calc(13px + .7em - 1px); width: 14px; height: 2px; background: var(--rosso); }
/* I collegamenti dentro il testo, sottolineati in rosso come negli altri testi del sito. Prima avevano il colore e il
   peso del testo intorno e non si capiva che erano collegamenti (06/10, controllo dell'accessibilità) */
.contenuto > p a,
.contenuto > ul li a { text-decoration: underline; text-decoration-color: var(--accento); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s; }
.contenuto > p a:hover,
.contenuto > ul li a:hover { color: var(--accento); }
/* Il video di una realizzazione, dove il testo lo mette (05/10). Il riquadro tiene il posto prima che il video arrivi */
.contenuto > .contenuto__video { margin-top: 18px; }
.contenuto__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--grigio-3); }
/* I video girati con il telefono, in verticale (05/10): alti al massimo quasi quanto lo schermo e larghi in
   proporzione. Prima stavano in un riquadro orizzontale, con due grandi bande nere ai lati */
.contenuto__video--verticale video { width: min(100%, calc(min(78vh, 720px) * 9 / 16)); aspect-ratio: 9 / 16; }
@media (max-width: 899px) {
  .contenuto__video--verticale video { margin-inline: auto; }
}
@media (min-width: 900px) {
  .contenuto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 77px); }
  .contenuto > * { grid-column: 2; }
  /* Il titolo occupa più righe: così un titolo alto non allontana tra loro i blocchi di testo accanto */
  .contenuto > :is(h2, h3, h4) { grid-column: 1; grid-row: span 4; }
  .contenuto > hr { grid-column: 1 / -1; }
  .contenuto > :is(h2, h3, h4) + * { margin-top: 0; padding-top: clamp(26px, 3vw, 32px); }
  .contenuto > :is(h2, h3, h4) + ul { padding-top: clamp(13px, 3vw - 13px, 19px); }
  /* Accanto a un video (la seconda parte di una realizzazione): una colonna sola, i titoli sopra il testo */
  .accanto { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 6vw, 77px); align-items: start; }
  .contenuto--accanto { display: block; }
  .contenuto--accanto > :is(h2, h3, h4) + * { margin-top: 18px; padding-top: 0; }
  .contenuto--accanto > :is(h2, h3, h4) + ul { margin-top: 14px; padding-top: 0; }
}

.azioni { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 56px); padding-top: clamp(26px, 3vw, 32px); border-top: 1px solid var(--riga-chiara); }
.azioni .collegamento .icona { transform: rotate(180deg); }
.azioni .collegamento:hover .icona { transform: rotate(180deg) translateX(4px); }

/* ----- Richiesta di informazioni ----- */
.richiesta { padding: clamp(84px, 11vw, 136px) 0; background: var(--grigio); color: #fff; }
.richiesta .segno { margin-bottom: clamp(18px, 2.2vw, 24px); }
.richiesta__griglia { display: grid; gap: clamp(34px, 5vw, 48px) clamp(40px, 7vw, 88px); }
.richiesta__oggetto { margin-top: clamp(18px, 2.2vw, 22px); padding-left: 16px; border-left: 3px solid #fff; color: var(--velato); font: 500 .74rem/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.richiesta__oggetto strong { display: block; color: #fff; font-weight: 500; }
@media (min-width: 1000px) {
  .richiesta__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* "Informazioni" è lunga: qui il titolo sta in una colonna stretta */
  .richiesta .titolo { font-size: clamp(2rem, 3.3vw, 2.48rem); }
}

.modulo { display: grid; gap: 18px; }
.modulo__campo { display: grid; gap: 9px; }
.modulo__nome { color: var(--velato); font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.modulo__nome b { color: #fff; font-weight: 500; }
.modulo input:not([type="checkbox"]),
.modulo textarea {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--riga-scura);
  border-radius: 12px;
  background: rgba(255, 255, 255, .09);
  color: #fff;
  font: inherit;
  transition: border-color .2s, background .2s;
}
.modulo textarea { min-height: 150px; resize: vertical; }
.modulo input:not([type="checkbox"]):hover,
.modulo textarea:hover { border-color: rgba(255, 255, 255, .6); }
.modulo input:not([type="checkbox"]):focus,
.modulo textarea:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, .17); }
.modulo__consenso { display: flex; align-items: center; gap: 12px; color: var(--velato); font-size: .95rem; cursor: pointer; }
.modulo__consenso input {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  margin: 0;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.modulo__consenso input::after { content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid var(--rosso); border-width: 0 0 2.5px 2.5px; rotate: -45deg; scale: 0; transition: scale .3s var(--molla); }
.modulo__consenso input:checked { background: #fff; border-color: #fff; }
.modulo__consenso input:checked::after { scale: 1; }
.modulo__consenso a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.modulo__fine { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 8px; }
.modulo__esito { color: #fff; font-size: .95rem; }
.modulo__esito:empty { display: none; }
.modulo__esito--errore { padding-left: 12px; border-left: 3px solid var(--rosso); }
.modulo [type="submit"]:disabled { opacity: .7; cursor: progress; }
/* Il campo per i programmi automatici (Esca.astro): le persone non lo vedono e non ci arrivano con il tasto Tab */
.modulo__esca { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 640px) {
  .modulo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modulo__intero { grid-column: 1 / -1; }
}

/* ----- Realizzazione successiva ----- */
.prossima {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 44vw, 480px);
  overflow: hidden;
  background: var(--grigio-3);
  color: #fff;
}
.prossima__foto { position: absolute; inset: 0; }
.prossima__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--molla); }
/* Il velo sulla foto è più scuro dove stanno le scritte (06/10, controllo dell'accessibilità): con .35 a metà, sopra
   una foto chiara "Realizzazione successiva" scendeva a 2:1. Con .7 al 65% resta sopra 5:1 anche su un punto bianco */
.prossima__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 14, 16, .92), rgba(13, 14, 16, .7) 65%, rgba(13, 14, 16, .5)); transition: opacity .5s; }
.prossima:hover .prossima__foto img { transform: scale(1.05); }
.prossima__testo { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; padding: clamp(30px, 5vw, 56px) 0; }
.prossima__testo .segno { margin-bottom: clamp(14px, 1.8vw, 18px); color: rgba(255, 255, 255, .8); }
.prossima__scritte { display: block; }
/* Su telefono, con il titolo lungo di una realizzazione, la freccia usciva dallo schermo (05/10): ora, se
   accanto alla parola più lunga del titolo non c'è posto, la freccia va sotto, a destra */
.prossima__testo { flex-wrap: wrap; }
.prossima__scritte { flex: 1 1 10em; }
.prossima__vai { margin-left: auto; }
.prossima__titolo { display: block; max-width: 14em; font-weight: 800; font-stretch: 125%; font-size: clamp(1.3rem, 4.6vw, 3.52rem); line-height: .98; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.prossima__vai { display: grid; place-items: center; width: clamp(56px, 7vw, 77px); height: clamp(56px, 7vw, 77px); flex: none; border-radius: clamp(16px, 2vw, 21px); background: var(--rosso); transition: background .3s, color .3s; }
.prossima__vai .icona { width: 40%; height: 40%; transition: transform .6s var(--molla); }
.prossima:hover .prossima__vai { background: #fff; color: var(--inchiostro); }
.prossima:hover .prossima__vai .icona { transform: translateX(6px); }

/* ----- Foto a tutto schermo ----- */
.lente {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(8, 9, 10, .97);
  color: #fff;
}
.lente::backdrop { background: rgba(8, 9, 10, .9); }
.lente__foto { position: absolute; inset: 70px 16px 84px; width: calc(100% - 32px); height: calc(100% - 154px); object-fit: contain; }
.lente__conta { position: absolute; left: 20px; top: 24px; font: 500 .78rem/1 var(--mono); letter-spacing: .1em; }
.lente__pulsante {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .1);
  transition: background .2s;
}
.lente__pulsante:hover { background: var(--rosso); }
.lente__chiudi { right: 14px; top: 10px; }
.lente__indietro { left: calc(50% - 58px); bottom: 16px; }
.lente__avanti { left: calc(50% + 6px); bottom: 16px; }
@media (min-width: 900px) {
  .lente__foto { inset: 70px 96px; width: calc(100% - 192px); height: calc(100% - 140px); }
  .lente__indietro { left: 22px; top: calc(50% - 26px); bottom: auto; }
  .lente__avanti { left: auto; right: 22px; top: calc(50% - 26px); bottom: auto; }
}

/* =========================================================
   Pagina "Chi siamo" (02/10/2026)
   Apertura con il titolo lungo, la foto della sede e i tre numeri; la storia, con il filo
   che corre al centro e accende una tappa alla volta; le foto; la certificazione, i settori
   e i partner. Certificazione e settori riusano i blocchi della home.
   ========================================================= */
/* container-type: la foto che esce a destra misura la larghezza della sezione (100cqi), senza la barra di scorrimento */
.presentazione { position: relative; container-type: inline-size; padding: clamp(112px, 17vh, 180px) 0 clamp(64px, 8vw, 96px); }
/* Nella pagina il titolo viene prima dell'etichetta "Azienda", come oggi: a schermo l'etichetta sta sopra */
.presentazione__capo { display: flex; flex-direction: column; }
.presentazione__capo .segno { order: -1; margin-bottom: clamp(20px, 2.6vw, 27px); }
.presentazione__capo .briciole { order: -2; margin-bottom: clamp(18px, 2.2vw, 22px); }
/* Le briciole sul chiaro, e il nome della pagina dentro le briciole: è un titolo, ma si legge come una briciola */
.chiaro .briciole { color: var(--grigio); }
.chiaro .briciole a:hover,
.chiaro .briciole [aria-current] { color: var(--inchiostro); }
.briciole h1 { font: inherit; letter-spacing: inherit; }
.presentazione__titolo {
  font-weight: 800;
  font-stretch: 125%;
  font-size: min(7vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Le parti in grassetto del titolo, scelte da chi scrive, sono rosse */
.presentazione__titolo strong { font-weight: inherit; color: var(--rosso); }
/* Su schermi larghi il titolo sta in tre righe, così testo e foto restano nel primo schermo */
@media (min-width: 700px) {
  .presentazione__titolo { font-size: clamp(2rem, 3.3vw, 2.8rem); }
}

.presentazione__griglia { display: grid; gap: clamp(30px, 5vw, 51px) 24px; margin-top: clamp(28px, 4.4vw, 51px); }
.paragrafi { display: grid; gap: 1.05em; align-content: start; }
.paragrafi .testo { margin: 0; }
.certificazione__paragrafi { margin-top: clamp(18px, 2.2vw, 24px); }
.paragrafi a { text-decoration: underline; text-decoration-color: var(--accento); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s; }
.paragrafi a:hover,
.paragrafi a:hover strong { color: var(--accento); }
.presentazione__foto { overflow: hidden; border-radius: 22px; }
.presentazione__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 900px) {
  /* Il testo parte in alto, alla stessa altezza della foto (05/10, prima era allineato in basso) */
  .presentazione__griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
  .presentazione__griglia .paragrafi { grid-column: 1 / span 5; }
  /* La foto esce dal bordo destro dello schermo, come le fasce dei furgoni */
  .presentazione__foto {
    grid-column: 7 / -1;
    margin-right: calc(-1 * max(var(--margine), (100cqi - var(--largo)) / 2));
    border-radius: 26px 0 0 26px;
  }
}
@media (min-width: 1000px) {
  /* Come la frase d'apertura dei servizi: il testo resta in vista mentre la foto scorre accanto.
     Il segno della sezione sta sopra, fuori dalla griglia: il filo prende la sua altezza e non si muove */
  .presentazione__griglia .paragrafi { position: sticky; top: max(120px, var(--fondo-testata) + 38px); }
}

/* ----- I tre numeri: grandi e rossi, come il "10" del logo. Contano da zero quando entrano nello schermo ----- */
.numeri { display: grid; margin-top: clamp(40px, 6vw, 70px); border-top: 1px solid var(--riga); }
.numeri > div { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--riga); }
.numeri dt { color: var(--tenue); font: 500 .72rem/1.35 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.numeri dd {
  min-width: 3.1em; /* il posto per quattro cifre: mentre conta, la voce accanto non si sposta */
  color: var(--rosso);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(2.5rem, 12vw, 3.4rem);
  line-height: .9;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) {
  .numeri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numeri > div { flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start; gap: clamp(10px, 1.2vw, 13px); padding: clamp(22px, 2.6vw, 29px) 0 0; border-bottom: 0; }
  .numeri > div + div { padding-left: clamp(18px, 2.6vw, 32px); border-left: 1px solid var(--riga); }
  .numeri dd { min-width: 0; font-size: clamp(3.6rem, 8.6vw, 6.4rem); line-height: .82; }
}

/* ----- Storia: una fascia grigia. Su schermi larghi il filo corre al centro, con le foto da un lato
   e il racconto dall'altro, a zig zag; su quelli stretti resta a sinistra e le tappe stanno in colonna ----- */
.storia { position: relative; background: var(--grigio); color: #fff; }
.storia__capo { padding: clamp(84px, 12vw, 136px) 0 clamp(26px, 3.4vw, 38px); }
.storia__capo .capo { margin-bottom: 0; }
/* Titolo grande in alto a sinistra e testo più in basso a destra, a scala */
.capo--scala > .testo { flex: 1 1 380px; }
@media (min-width: 1000px) {
  .capo--scala { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px) 24px; }
  .capo--scala > div { grid-column: 1 / -1; }
  /* Il testo comincia dove comincia la colonna destra della storia */
  .capo--scala > .testo { grid-column: 2; max-width: none; padding-left: calc(clamp(96px, 10vw, 120px) / 2 - 12px); }
}
.tappe { padding: clamp(96px, 11vw, 128px) 0 clamp(90px, 11vw, 136px); }
.tappe__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(64px, 9vw, 112px); }
.tappa { --vano: clamp(96px, 10vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* L'anno: finché il filo non arriva è solo un contorno, poi si riempie di bianco */
.tappa__anno {
  position: relative;
  display: flex;
  align-items: center;
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(2rem, 10.5vw, 3rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ha-filo .tappa__anno span { color: transparent; -webkit-text-stroke: .03em rgba(255, 255, 255, .8); paint-order: stroke fill; transition: color .5s, -webkit-text-stroke-color .5s; }
.ha-filo .tappa.is-raggiunta .tappa__anno span { color: #fff; -webkit-text-stroke-color: #fff; }

/* La foto: grigia finché il filo non arriva, poi prende colore */
.tappa__foto { position: relative; max-width: 620px; overflow: hidden; border-radius: 20px; background: var(--grigio-3); }
.tappa__foto img { width: 100%; }
.js .tappa__foto img { transition: clip-path 1.1s var(--molla) var(--ritardo, 0s), transform 1.5s var(--molla) var(--ritardo, 0s), filter .9s ease; }
.ha-filo .tappa__foto img { filter: grayscale(1) brightness(.84); }
.ha-filo .tappa.is-raggiunta .tappa__foto img { filter: none; }
.tappa__numero {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 1;
  padding: 7px 10px;
  border-radius: 6px;
  background: rgba(13, 14, 16, .6);
  color: #fff;
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .08em;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: opacity .5s .5s;
}
.js .tappa__foto:not(.is-vista) .tappa__numero { opacity: 0; }

.tappa__titolo { font-weight: 800; font-stretch: 125%; font-size: clamp(1.2rem, 2vw, 1.7rem); line-height: 1.08; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.tappa__testo p { margin-top: .9em; color: var(--tenue); font-size: clamp(1.03rem, 1.2vw, 1.06rem); line-height: 1.6; text-wrap: pretty; }
.tappa__testo p strong { color: #fff; }

@media (min-width: 1000px) {
  .tappa { grid-template-columns: minmax(0, 1fr) var(--vano) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: clamp(14px, 1.6vw, 18px) 0; align-items: start; }
  .tappa__foto { grid-column: 1; grid-row: 1 / span 2; max-width: none; }
  .tappa__anno { grid-column: 3; grid-row: 1; font-size: clamp(2.6rem, 4.6vw, 3.52rem); }
  .tappa__testo { grid-column: 3; grid-row: 2; }
  .tappa:nth-child(even) .tappa__foto { grid-column: 3; }
  .tappa:nth-child(even) .tappa__anno,
  .tappa:nth-child(even) .tappa__testo { grid-column: 1; }

  /* Dal filo parte una pista fino all'anno. A destra è corta; a sinistra attraversa la riga,
     perché il racconto resta allineato a sinistra e si legge meglio */
  .tappa__anno::before,
  .tappa__anno::after { height: 3.5px; background: #fff; transform: scaleX(0); transition: transform .6s var(--molla); }
  .tappa:nth-child(odd) .tappa__anno::before {
    content: "";
    position: absolute;
    top: calc(50% - 1.75px);
    right: calc(100% + 14px);
    width: calc(var(--vano) / 2 - 28px);
    transform-origin: 0 50%;
  }
  .tappa:nth-child(even) .tappa__anno::after {
    content: "";
    flex: 1;
    margin: 0 calc(14px - var(--vano) / 2) 0 16px;
    transform-origin: 100% 50%;
  }
  .tappa.is-raggiunta .tappa__anno::before,
  .tappa.is-raggiunta .tappa__anno::after { transform: scaleX(1); }
}

/* Gli anelli delle tappe sono più grandi di quelli delle sezioni, come quelli in fondo alle piste dei furgoni */
.filo__nodo--tappa { stroke-width: 4; }
@media (min-width: 768px) {
  .filo__nodo--tappa.is-acceso { r: 11.5px; }
}

/* ----- Le foto dell'azienda: tutte in vista, in un mosaico. Su telefono una striscia da scorrere, come nelle realizzazioni ----- */
.scatti { padding: clamp(96px, 11vw, 136px) 0 clamp(30px, 4vw, 48px); }
@media (min-width: 700px) {
  .mosaico--tutte { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: clamp(150px, 19vw, 200px); grid-auto-flow: dense; height: auto; }
  .mosaico--tutte .mosaico__foto:nth-child(n + 6) { display: block; }
  .mosaico--tutte .mosaico__foto:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaico--tutte .mosaico__foto:last-child { grid-column: span 2; }
}
@media (min-width: 1000px) {
  .mosaico--tutte { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 14.6vw, 192px); }
  /* Le due foto in verticale occupano due righe */
  .mosaico--tutte .mosaico__foto--alta { grid-row: span 2; }
}

/* ----- Partner: i marchi su caselle bianche. L'ultima riga resta al centro ----- */
.partner { padding: clamp(84px, 11vw, 136px) 0 clamp(90px, 11vw, 136px); }
.marchi { --colonne: 2; --spazio: clamp(8px, 1vw, 11px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spazio); }
.marchi li {
  flex: 0 0 calc((100% - (var(--colonne) - 1) * var(--spazio)) / var(--colonne));
  padding: clamp(8px, 1.2vw, 14px) clamp(14px, 1.8vw, 21px);
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--riga-chiara);
}
.marchi img { width: 100%; }
@media (min-width: 560px) { .marchi { --colonne: 3; } }
@media (min-width: 800px) { .marchi { --colonne: 4; } }
@media (min-width: 1100px) { .marchi { --colonne: 6; } }

/* =========================================================
   Scheda di un servizio (02/10/2026)
   Copertina e galleria sono quelle della realizzazione; settori e realizzazioni sono i blocchi
   della home. Di nuovo ci sono il testo del servizio, con la frase d'apertura che resta in vista,
   e l'approfondimento, con una foto e il suo testo.
   ========================================================= */
/* Nei nomi dei servizi e delle categorie ci sono parole lunghe ("Programmazione", "Personalizzate"): i titoli
   sono un po' più piccoli di quelli della realizzazione, così una parola non va mai a capo a metà, da 320 px in su */
.copertina--servizio .copertina__titolo,
.copertina--categoria .copertina__titolo { font-size: min(6.6vw, 2.9rem); }
@media (min-width: 700px) {
  .copertina--servizio .copertina__titolo,
  .copertina--categoria .copertina__titolo { font-size: clamp(2.5rem, 4.15vw, 3.28rem); }
}

.servizio { padding: clamp(40px, 6vw, 72px) 0 clamp(50px, 6vw, 72px); }
.servizio .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.servizio__griglia { display: grid; gap: clamp(26px, 3.4vw, 35px); }
.servizio__titolo {
  font-weight: 800;
  font-stretch: 125%;
  font-size: min(6.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* Le parti in grassetto, scelte da chi scrive, sono rosse: come il titolo di "Chi siamo" */
.servizio__titolo strong { font-weight: inherit; color: var(--rosso); }
/* Una frase d'apertura con una parola molto lunga ("dell'installazione"): fino ai 999 px un po' più piccola, così la
   parola non va a capo a metà sui telefoni (05/10, sera). La classe la mette la pagina, quando serve */
@media (max-width: 999px) {
  .servizio__titolo--parole-lunghe { font-size: min(5.8vw, 2.6rem); }
}
@media (min-width: 1000px) {
  .servizio__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 88px); align-items: start; }
  /* La frase d'apertura resta in vista mentre si legge il testo accanto.
     Il segno della sezione sta fuori: il filo prende la sua altezza e non deve muoversi */
  .servizio__capo { position: sticky; top: max(120px, var(--fondo-testata) + 38px); }
  .servizio__titolo { font-size: clamp(1.6rem, 2.3vw, 2.08rem); }
}

/* Il testo del redattore, così come arriva da WordPress: paragrafi, titoli di qualsiasi livello,
   elenchi e righe. Oggi i servizi usano titoli H2, H4, H5 e H6 per la stessa cosa: qui si vedono uguali,
   tranne l'H6, che è una frase che introduce un elenco */
.testo-libero { color: var(--tenue); font-size: 1.06rem; line-height: 1.6; }
.testo-libero > * + * { margin-top: 18px; }
.testo-libero p { text-wrap: pretty; }
.testo-libero p:empty { display: none; }
.testo-libero strong { color: var(--testo); }
.testo-libero a { color: var(--testo); text-decoration: underline; text-decoration-color: var(--accento); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.testo-libero :is(h2, h3, h4, h5) {
  color: var(--testo);
  font-weight: 500;
  font-stretch: 112%;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.testo-libero :is(h2, h3, h4, h5) strong { font-weight: 800; }
.testo-libero h6 { color: var(--testo); font-weight: 600; font-size: inherit; line-height: 1.4; }
.testo-libero hr { height: 0; margin: clamp(26px, 3vw, 32px) 0; border: 0; border-top: 1px solid var(--riga); }
.testo-libero hr + * { margin-top: 0; }
.testo-libero ul { margin-top: 10px; }
.testo-libero li {
  position: relative;
  padding: 13px 0 13px 30px;
  border-bottom: 1px solid var(--riga);
  color: var(--testo);
  font-size: clamp(1.02rem, 1.15vw, 1.12rem);
  line-height: 1.4;
}
.testo-libero li:last-child { border-bottom: 0; }
.testo-libero li::before { content: ""; position: absolute; left: 0; top: calc(13px + .7em - 1px); width: 14px; height: 2px; background: var(--accento); }

/* ----- Approfondimento: foto da un lato, titolo e testo dall'altro ----- */
.approfondimento { padding: clamp(60px, 7vw, 88px) 0 clamp(84px, 11vw, 136px); }
.approfondimento__griglia { display: grid; gap: clamp(36px, 5vw, 51px) 24px; }
/* Una cornice bianca: alcune foto dei servizi sono prodotti su fondo bianco */
.approfondimento__foto { overflow: hidden; border: 1px solid var(--riga-chiara); border-radius: 24px; background: #fff; }
.approfondimento__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.approfondimento__testo .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.approfondimento__titolo {
  font-weight: 800;
  font-stretch: 125%;
  font-size: min(6.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.approfondimento__titolo strong { font-weight: inherit; color: var(--accento); }
.approfondimento__testo .testo-libero { margin-top: clamp(18px, 2.2vw, 24px); }
/* Più foto nella parte "In dettaglio" (05/10, sera: oggi sono un carosello): un mosaico di caselle quadrate dentro
   la cornice bianca, due o tre per riga (--colonne). Sono quasi tutte prodotti su fondo bianco, come un catalogo */
.approfondimento__foto--mosaico { display: grid; grid-template-columns: repeat(var(--colonne, 2), minmax(0, 1fr)); gap: 1px; background: var(--riga-chiara); }
.approfondimento__foto--mosaico img { aspect-ratio: 1; background: #fff; }
/* I marchi (per esempio quello UL) stanno interi, con un po' d'aria intorno */
.approfondimento__foto .approfondimento__marchio { object-fit: contain; padding: 14%; }
/* Il testo ha mezza pagina: nei titoli di altri servizi ci sono parole lunghe ("dell'industria") */
@media (min-width: 900px) {
  .approfondimento__griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .approfondimento__foto { grid-column: 1 / span 6; }
  .approfondimento__testo { grid-column: 7 / span 6; padding-left: clamp(16px, 3vw, 45px); }
  .approfondimento__titolo { font-size: clamp(1.6rem, 3vw, 2.4rem); }
}

/* ----- Domande frequenti (05/10, sera): si aprono una alla volta, il + diventa rosso e si chiude in un −.
   Sui computer il titolo a sinistra resta in vista mentre si leggono le risposte, come la frase d'apertura ----- */
.domande { position: relative; padding: clamp(60px, 7vw, 88px) 0 clamp(84px, 11vw, 136px); }
.domande__griglia { display: grid; gap: clamp(26px, 3.4vw, 35px); }
.domande__capo .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.domande__elenco { border-top: 1px solid var(--riga); }
.domanda { border-bottom: 1px solid var(--riga); }
.domanda__testo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(16px, 2vw, 20px) 0;
  font-weight: 600;
  font-stretch: 108%;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  transition: color .2s;
}
.domanda__testo::-webkit-details-marker { display: none; }
.domanda__testo:hover { color: var(--accento); }
.domanda__segno { position: relative; width: 40px; height: 40px; flex: none; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--riga); color: var(--testo); transition: background .25s, box-shadow .25s, color .25s; }
.domanda__segno::before,
.domanda__segno::after { content: ""; position: absolute; left: calc(50% - 7px); top: calc(50% - 1px); width: 14px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--molla); }
.domanda__segno::after { transform: rotate(90deg); }
.domanda[open] .domanda__segno { background: var(--rosso); box-shadow: none; color: #fff; }
.domanda[open] .domanda__segno::after { transform: rotate(0deg); }
.domanda__risposta { max-width: 40em; padding: 0 0 clamp(20px, 2.4vw, 24px); color: var(--tenue); font-size: 1.06rem; line-height: 1.6; text-wrap: pretty; }
.domanda__risposta p + p { margin-top: .8em; }
.domanda__risposta strong { color: var(--testo); }
.domanda__risposta a { color: var(--testo); text-decoration: underline; text-decoration-color: var(--accento); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 1000px) {
  .domande__griglia { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 88px); align-items: start; }
  .domande__capo { position: sticky; top: max(120px, var(--fondo-testata) + 38px); }
}

/* ----- Realizzazioni collegate: una riga di testo sotto il titolo, e più settori sulla stessa foto ----- */
.lavori__testo { margin-top: clamp(16px, 2vw, 21px); }
.scheda__settori { position: absolute; top: 12px; left: 12px; right: 64px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; }
.scheda__settori .scheda__settore { position: static; }

/* =========================================================
   Contatti (02/10/2026)
   Recapiti grandi, da toccare con il dito, e la sede vista dall'alto al posto della mappa vuota.
   Il modulo è quello della realizzazione
   ========================================================= */
/* container-type: la foto che esce a destra misura la larghezza della sezione, come in "Chi siamo" */
.recapiti { position: relative; container-type: inline-size; padding: clamp(112px, 17vh, 180px) 0 clamp(84px, 11vw, 128px); }
.recapiti .briciole { margin-bottom: clamp(18px, 2.2vw, 22px); }
.recapiti__titolo { margin-bottom: clamp(36px, 5vw, 58px); }
/* "Contatti" ha una lettera in più di "Servizi" e "Settori": sotto i 700 px il titolo è un po' più piccolo */
@media (max-width: 699px) {
  .recapiti__titolo { font-size: 12vw; }
}
.recapiti__griglia { display: grid; gap: clamp(44px, 6vw, 58px) 24px; }
.recapiti .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.recapiti__lista { border-top: 1px solid var(--riga); }
.recapiti__lista li { padding: clamp(16px, 2vw, 19px) 0; border-bottom: 1px solid var(--riga); }
.recapiti__lista a {
  display: inline-block;
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.2rem, 2.3vw, 1.6rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  transition: color .2s;
}
.recapiti__lista a:hover { color: var(--rosso); }
.recapiti__voce { display: block; margin-bottom: 10px; color: var(--grigio); font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.recapiti__social { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: clamp(26px, 3vw, 32px); }

/* La sede vista dall'alto, con un riquadro nero e il collegamento a Google Maps.
   La mappa dentro il sito non c'è: scelta di Nicola del 02/10, è più bella la foto */
.mappa { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; background: var(--grigio-3); color: #fff; }
.mappa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }
.mappa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 14, 16, .7), rgba(13, 14, 16, 0) 55%); pointer-events: none; }
.mappa__scheda {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(13, 14, 16, .72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.mappa__luogo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-stretch: 112%; font-size: 1.05rem; line-height: 1.2; }
.mappa__luogo .icona { color: #fff; }
.mappa__scheda .pulsante { min-height: 48px; padding: 4px 4px 4px 18px; border-radius: 12px; }
.mappa__scheda .pulsante__freccia { width: 40px; height: 40px; }
.mappa :focus-visible { outline-color: #fff; }
@media (min-width: 600px) {
  .mappa { aspect-ratio: 4 / 3; }
}
@media (min-width: 900px) {
  .recapiti__griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .recapiti__testo { grid-column: 1 / span 5; }
  /* La foto esce dal bordo destro dello schermo, come in "Chi siamo" */
  .mappa {
    grid-column: 7 / -1;
    aspect-ratio: auto;
    min-height: 460px;
    margin-right: calc(-1 * max(var(--margine), (100cqi - var(--largo)) / 2));
    border-radius: 26px 0 0 26px;
  }
  .mappa__scheda { left: 20px; right: auto; bottom: 20px; max-width: min(440px, 100% - 40px); }
}

/* =========================================================
   Elenco dei servizi (02/10/2026)
   L'apertura è quella dei contatti, con una presentazione e una foto che esce dal bordo destro:
   servirà anche agli altri elenchi. Sotto ci sono i cassetti della home
   ========================================================= */
.intestazione { position: relative; container-type: inline-size; padding: clamp(112px, 17vh, 180px) 0 clamp(84px, 11vw, 128px); }
.intestazione .briciole { margin-bottom: clamp(18px, 2.2vw, 22px); }
.intestazione__titolo { margin-bottom: clamp(36px, 5vw, 58px); }
@media (max-width: 699px) {
  .intestazione__titolo { font-size: 12vw; }
}
.intestazione__griglia { display: grid; gap: clamp(44px, 6vw, 58px) 24px; }
.intestazione .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.intestazione__motto {
  font-weight: 800;
  font-stretch: 125%;
  font-size: min(6.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.intestazione__sotto { margin-top: clamp(12px, 1.4vw, 14px); color: var(--grigio); font-weight: 400; font-size: clamp(1.1rem, 1.7vw, 1.24rem); line-height: 1.25; }
.intestazione__testo .testo { margin-top: clamp(18px, 2.2vw, 24px); }
.intestazione__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; background: var(--grigio-3); }
.intestazione__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .intestazione__griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
  .intestazione__testo { grid-column: 1 / span 5; }
  .intestazione__motto { font-size: clamp(1.8rem, 2.6vw, 2.24rem); }
  /* La foto esce dal bordo destro dello schermo, come in "Chi siamo" e nei contatti */
  .intestazione__foto {
    grid-column: 7 / -1;
    aspect-ratio: auto;
    min-height: 420px;
    margin-right: calc(-1 * max(var(--margine), (100cqi - var(--largo)) / 2));
    border-radius: 26px 0 0 26px;
  }
}

/* =========================================================
   Categoria di servizi (02/10/2026)
   La fascia grigia porta anche la presentazione della categoria; la foto scende sul bianco,
   come il mosaico delle schede. Poi i servizi della categoria, a righe alterne bianche e grigie
   ========================================================= */
.copertina--categoria .copertina__titolo { margin: clamp(18px, 2.6vw, 27px) 0 clamp(30px, 4.6vw, 51px); }
.categoria { display: grid; gap: clamp(30px, 4vw, 38px) 24px; }
.categoria__testo .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.categoria__titolo {
  font-weight: 800;
  font-stretch: 125%;
  font-size: min(6.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.categoria__testo .testo { margin-top: clamp(16px, 2vw, 21px); }
.categoria__foto { overflow: hidden; border-radius: 22px; background: var(--grigio-3); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .55); }
.categoria__foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) {
  .categoria { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  /* Il testo resta tutto sul grigio: sotto lascia libera la striscia bianca dove scende la foto */
  .categoria__testo { grid-column: 1 / span 6; padding-bottom: calc(var(--sporge) + clamp(28px, 3.4vw, 42px)); }
  .categoria__foto { grid-column: 8 / -1; }
  .categoria__titolo { font-size: clamp(1.6rem, 2.6vw, 2.24rem); }
}

/* ----- Voce: un servizio della categoria, con foto, titoletto, nome, una frase e "Continua".
   Le righe chiare hanno la foto a sinistra, quelle grigie a destra: il filo passa dalla parte del testo ----- */
.voce { position: relative; padding: clamp(64px, 8vw, 96px) 0; }
.voce:not(.chiaro) { background: var(--grigio); color: #fff; }
.voce__griglia { display: grid; gap: clamp(30px, 4vw, 45px) 24px; }
.voce__foto { display: block; overflow: hidden; border-radius: 22px; background: var(--grigio-3); }
.voce__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.voce__testo .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.voce__titolo {
  font-weight: 800;
  font-stretch: 125%;
  font-size: min(6.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.voce__titolo a { transition: color .2s, opacity .2s; }
.chiaro .voce__titolo a:hover { color: var(--rosso); }
.voce:not(.chiaro) .voce__titolo a:hover { opacity: .75; }
.voce__testo .testo { margin: clamp(16px, 2vw, 21px) 0 clamp(24px, 3vw, 29px); }
@media (min-width: 900px) {
  .voce__griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
  .voce__foto { grid-column: 1 / span 6; grid-row: 1; }
  .voce__testo { grid-column: 7 / span 6; grid-row: 1; padding-left: clamp(16px, 3vw, 45px); }
  .voce__titolo { font-size: clamp(1.6rem, 3vw, 2.4rem); }
  .voce--rovescio .voce__foto { grid-column: 7 / span 6; }
  .voce--rovescio .voce__testo { grid-column: 1 / span 6; padding: 0 clamp(16px, 3vw, 45px) 0 0; }
}

/* =========================================================
   Elenco dei settori (02/10/2026)
   L'apertura dell'elenco servizi, con due foto sovrapposte come nella home; poi i nove settori in un
   elenco, con il numero al posto dell'icona di oggi
   ========================================================= */
.intestazione__frase { max-width: 26em; color: var(--testo); font-weight: 500; font-size: clamp(1.2rem, 1.9vw, 1.32rem); line-height: 1.4; text-wrap: pretty; }
.intestazione__frase + .testo { margin-top: clamp(16px, 2vw, 19px); }
/* Apertura compatta, senza foto (09/10, pagina Settori): la frase sta accanto al titolo, in basso a destra, quando c'è
   posto; altrimenti va sotto, come nelle altre aperture. Lo decide lo spazio, non una larghezza fissa */
.intestazione--compatta { padding-bottom: clamp(64px, 8vw, 104px); }
.intestazione__capo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(28px, 4vw, 40px) clamp(40px, 6vw, 96px); }
.intestazione__capo .intestazione__titolo { margin-bottom: 0; }
.intestazione__capo .intestazione__testo { flex: 0 1 30em; }

/* ----- Coppia di foto: una grande e una piccola che le sta sopra, in basso a destra ----- */
.coppia { position: relative; padding-bottom: 16%; }
.coppia__grande { margin-right: 18%; overflow: hidden; border-radius: 24px; background: var(--grigio-3); }
.coppia__grande img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.coppia__piccola {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 46%;
  overflow: hidden;
  border-radius: 20px;
  background: var(--grigio-3);
  box-shadow: 0 0 0 8px var(--carta), 0 30px 60px -28px rgba(0, 0, 0, .5);
}
.coppia__piccola img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
@media (min-width: 900px) {
  .intestazione__griglia .coppia { grid-column: 7 / -1; align-self: center; }
}

/* ----- Elenco dei settori: righe con foto, numero, nome, testo e "Continua". Tutta la riga porta alla pagina -----
   09/10 (scelta di Nicola, la proposta "C"): sui computer, dai 1000 px, l'elenco sta a destra e a sinistra c'è un
   riquadro fermo con la foto del settore che si sta leggendo ("scena"); la foto cambia scorrendo e il settore acceso
   è pieno, gli altri sbiaditi. Più stretto il riquadro non c'è e ogni settore ha la sua foto: sopra il nome sul
   telefono, a sinistra della riga sul tablet */
.indice-settori { position: relative; padding: clamp(84px, 11vw, 128px) 0; background: var(--grigio); color: #fff; }
.indice-settori .segno { margin-bottom: clamp(24px, 3vw, 32px); }
.scena__quadro { display: none; }
.elenco { border-top: 1px solid var(--riga); }
.elenco__voce {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "foto foto" "numero vai" "nome nome" "testo testo";
  gap: 12px 20px;
  padding: clamp(22px, 2.6vw, 27px) 0;
  border-bottom: 1px solid var(--riga);
}
.elenco__foto { grid-area: foto; overflow: hidden; margin-bottom: 8px; border-radius: 18px; background: var(--grigio-3); aspect-ratio: 3 / 2; }
.elenco__foto img { width: 100%; height: 100%; object-fit: cover; }
.elenco__numero { grid-area: numero; align-self: center; color: var(--tenue); font: 500 .75rem/1 var(--mono); letter-spacing: .1em; }
.elenco__nome {
  grid-area: nome;
  font-weight: 800;
  font-stretch: 125%;
  font-size: min(6.6vw, 2.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
/* Il velo che rende cliccabile tutta la riga. Si sposta solo la scritta, non il titolo: un titolo spostato con
   "transform" diventava il riferimento del velo, che si restringeva al solo nome, e il resto della riga, compreso
   "Continua", non portava più da nessuna parte (segnalato da Nicola il 09/10) */
.elenco__nome a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.elenco__scritta { display: inline-block; transition: transform .5s var(--molla); }
.elenco__testo { grid-area: testo; max-width: 46em; color: var(--tenue); font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.55; text-wrap: pretty; }
.elenco__testo p + p { margin-top: .5em; }
.elenco__testo strong { color: var(--testo); }
/* "Continua" ha lo stile dei collegamenti (.collegamento) e sta sopra al velo, così risponde anche da solo. Passando
   sulla riga fa quello che fa un collegamento sotto il mouse: la riga sotto si ritira e la freccia avanza */
.elenco__vai {
  position: relative;
  z-index: 2;
  grid-area: vai;
  justify-self: end;
  align-self: start;
}
.elenco__voce:hover .elenco__scritta { transform: translateX(10px); }
.elenco__voce:hover .elenco__vai { color: var(--accento); background-size: 0 1px; }
.elenco__voce:hover .elenco__vai .icona { transform: translateX(4px); }
/* Tablet: la foto a sinistra della riga */
@media (min-width: 700px) and (max-width: 999px) {
  .elenco__voce {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto;
    grid-template-areas: "foto numero vai" "foto nome nome" "foto testo testo";
    grid-template-rows: auto auto 1fr;
    gap: 12px clamp(20px, 3vw, 32px);
    align-items: start;
  }
  .elenco__foto { aspect-ratio: 4 / 3; margin-bottom: 0; }
  .elenco__numero { align-self: start; padding-top: .3em; }
  .elenco__nome { font-size: clamp(1.4rem, 3.4vw, 2rem); }
}
/* Computer: il riquadro fermo a sinistra, l'elenco a destra */
@media (min-width: 1000px) {
  .scena { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 5vw, 80px); align-items: start; }
  .scena__quadro {
    --cima-scena: max(120px, var(--fondo-testata) + 38px);
    display: block;
    position: sticky;
    top: var(--cima-scena);
    padding-top: clamp(22px, 2.6vw, 27px);
  }
  /* Alto quanto lo lascia lo schermo, sotto la barra, con 48 px di aria */
  .scena__cornice {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: calc(100vh - var(--cima-scena) - 48px);
    border-radius: 24px;
    background: var(--grigio-3);
    box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .6);
  }
  /* Le foto sono una sopra l'altra: quella del settore acceso compare piano e si assesta; le altre non si disegnano */
  .scena__foto {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.06);
    transition: opacity .7s, transform 1.4s var(--molla), visibility 0s .7s;
  }
  .scena__foto.is-attiva { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .scena__foto img { width: 100%; height: 100%; object-fit: cover; }
  .scena__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 9, 8, .72), rgba(10, 9, 8, 0) 45%); }
  .scena__didascalia { position: absolute; left: clamp(20px, 2.2vw, 30px); right: clamp(20px, 2.2vw, 30px); bottom: clamp(18px, 2vw, 28px); z-index: 1; display: grid; gap: 12px; color: #fff; }
  .scena__numero { font: 500 .72rem/1 var(--mono); letter-spacing: .1em; }
  .scena__nome { font-weight: 800; font-stretch: 125%; font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }

  .elenco__foto { display: none; }
  .elenco__voce {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "numero nome vai" ". testo testo";
    gap: 16px clamp(16px, 2vw, 28px);
    padding: clamp(28px, 3.4vw, 44px) 0;
    align-items: start;
  }
  .elenco__numero { align-self: start; padding-top: .8em; }
  .elenco__nome { font-size: clamp(1.4rem, 2.2vw, 2rem); }
  .elenco__vai { padding-top: .6em; }
  /* Il settore acceso è pieno, gli altri sbiaditi. Lo sceglie lo script, con lo scorrimento, il mouse o la tastiera:
     pieno è sempre e solo il settore della foto (09/10: prima la riga sotto il mouse si illuminava da sola, con la foto
     di un altro settore). Le righe di separazione restano piene. Senza script ("is-viva" non c'è) niente è sbiadito */
  .elenco__voce > * { transition: opacity .45s; }
  .elenco__voce > .elenco__vai { transition: color .25s, background-size .5s var(--molla), opacity .45s; }
  .scena.is-viva .elenco__voce:not(.is-attiva) > * { opacity: .36; }
}

/* =========================================================
   Scheda di un settore (02/10/2026)
   La fascia grigia senza foto; poi il settore come la scheda servizio, le realizzazioni in una griglia
   e le tre categorie una accanto all'altra
   ========================================================= */
/* Fascia tutta grigia: non c'è una foto che scende sul bianco */
.copertina--piena { --sporge: 0px; padding-bottom: clamp(20px, 3vw, 32px); }

/* Una frase lunga d'apertura: in minuscolo, si legge meglio */
.servizio__titolo--frase { font-weight: 500; font-stretch: 112%; font-size: clamp(1.3rem, 4.8vw, 1.7rem); line-height: 1.22; letter-spacing: -.01em; text-transform: none; }
.servizio__titolo--frase strong { font-weight: 700; }
@media (min-width: 1000px) {
  .servizio__titolo--frase { font-size: clamp(1.4rem, 2vw, 1.64rem); }
}

/* Titolo di sezione con parole lunghe ("movimentazione"): più piccolo di titolo--grande */
.titolo--lungo { font-size: min(6.6vw, 2.6rem); line-height: 1; }
@media (min-width: 900px) {
  .titolo--lungo { font-size: clamp(2rem, 3.6vw, 2.88rem); }
}

/* Realizzazioni su fondo grigio, in una griglia: le schede sono poche */
.lavori--grigio { background: var(--grigio); color: #fff; }
/* Su telefono il collegamento sotto il titolo può andare a capo: "Scopri tutte le nostre realizzazioni"
   è più lungo dello schermo. Nella home il testo è corto e non cambia niente */
@media (max-width: 699px) {
  .lavori__comandi { flex: 1 1 100%; min-width: 0; }
}
.schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: clamp(26px, 3vw, 32px) clamp(12px, 1.6vw, 18px); }

/* ----- Le tre categorie una accanto all'altra: i cassetti della home, senza foto e senza impilarsi ----- */
.categorie { position: relative; padding: clamp(84px, 11vw, 128px) 0; }
.categorie .segno { margin-bottom: clamp(24px, 3vw, 32px); }
.pila--fila .cassetto__scatola { transform: none; box-shadow: inset 0 0 0 1px var(--riga-chiara), 0 30px 60px -36px rgba(10, 9, 8, .45); }
.pila--fila .cassetto--rosso .cassetto__scatola,
.pila--fila .cassetto--nero .cassetto__scatola { box-shadow: 0 30px 60px -36px rgba(10, 9, 8, .45); }
.pila--fila .cassetto__scatola::after { display: none; }
.pila--fila .cassetto__capo { height: auto; min-height: 74px; padding-block: 14px; }
.pila--fila .cassetto__corpo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1180px) {
  .pila--fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pila--fila .cassetto { min-width: 0; }
  /* Nelle colonne strette il titolo ha tutto il posto: la freccia non serve, il titolo è già un link */
  .pila--fila .cassetto__vai { display: none; }
  .pila--fila .cassetto__titolo { font-size: clamp(1.1rem, 1.5vw, 1.5rem); }
  .pila--fila .cassetto__testo p { font-size: clamp(1rem, 1.1vw, 1.12rem); }
}

/* =========================================================
   Elenco delle realizzazioni (02/10/2026)
   La fascia grigia con il titolo e i filtri per settore; sotto, tutte le realizzazioni in una griglia,
   con i servizi di ognuna come link
   ========================================================= */
/* Senza script i filtri non servono: si vedono tutte le realizzazioni */
.filtri { display: none; gap: 8px; padding-bottom: clamp(36px, 5vw, 51px); }
.js .filtri { display: flex; flex-wrap: wrap; }
.filtro {
  flex: none;
  padding: 11px 14px;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--riga);
  color: #fff;
  font: 500 .74rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .25s, color .25s, box-shadow .25s;
}
.filtro:hover { box-shadow: inset 0 0 0 1px #fff; }
.filtro[aria-pressed="true"] { background: #fff; box-shadow: none; color: var(--inchiostro); }
/* Su telefono i filtri sono una striscia da scorrere con il dito, da bordo a bordo */
@media (max-width: 699px) {
  .js .filtri { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--margine)); padding-inline: var(--margine); scrollbar-width: none; }
  .js .filtri::-webkit-scrollbar { display: none; }
}
/* Le schede cominciano subito sotto la fascia: il titolo della pagina è già lì sopra */
.lavori--elenco { padding-top: clamp(44px, 5vw, 61px); }
.schede--elenco { margin-top: clamp(24px, 3vw, 32px); }
/* Su telefono due schede per riga: sono sedici, una per riga farebbe una pagina lunghissima */
@media (max-width: 699px) {
  .schede--elenco { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
  /* Nelle schede strette il numero non c'è, e i settori hanno tutta la larghezza */
  .schede--elenco .scheda__vai,
  .schede--elenco .scheda__numero { display: none; }
  .schede--elenco .scheda__settori { top: 8px; left: 8px; right: 8px; gap: 4px; }
  .schede--elenco .scheda__settore { padding: 5px 7px; font-size: .58rem; letter-spacing: .04em; }
}
.scheda__servizi { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.scheda__servizi a { color: var(--tenue); font: 500 .66rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: color .2s; }
.scheda__servizi a:hover { color: var(--accento); }

/* =========================================================
   Lavora con noi e posizione lavorativa (02/10/2026)
   Le posizioni aperte sono schede bianche, tutte da cliccare; l'annuncio ha l'apertura e tre colonne;
   il modulo di candidatura ha il curriculum in allegato
   ========================================================= */
.posti { position: relative; padding: clamp(84px, 11vw, 128px) 0; }
.posti:not(.chiaro) { background: var(--grigio); color: #fff; }
.posti .segno { margin-bottom: clamp(24px, 3vw, 32px); }
.posti__elenco { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 19px); }
.posto {
  --accento: var(--rosso);
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(14px, 1.6vw, 16px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: 24px;
  background: #fff;
  color: var(--inchiostro);
  box-shadow: inset 0 0 0 1px var(--riga-chiara), 0 30px 60px -36px rgba(10, 9, 8, .45);
}
.posto__numero { color: var(--rosso); font: 500 .75rem/1 var(--mono); letter-spacing: .1em; }
.posto__titolo { font-weight: 800; font-stretch: 125%; font-size: min(5.6vw, 2rem); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
/* Tutta la scheda porta alla posizione */
.posto__titolo a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.posto__titolo a:focus-visible { outline: none; }
.posto:has(.posto__titolo a:focus-visible) { outline: 2px solid var(--rosso); outline-offset: 3px; }
.posto__testo { max-width: 36em; color: var(--grigio); font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.55; text-wrap: pretty; }
.posto .pulsante { justify-self: start; margin-top: 6px; }
.posto:hover .pulsante { background: var(--rosso-scuro); }
.posto:hover .pulsante .pulsante__freccia .icona { transform: translateX(4px); }
@media (min-width: 900px) {
  .posti__elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posto__titolo { font-size: clamp(1.5rem, 2.4vw, 1.76rem); }
}

/* Sede e data di pubblicazione della posizione, sulla fascia grigia */
.dati--riga { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.dati--riga dd { font-weight: 600; font-size: 1.02rem; }

/* ----- L'annuncio ----- */
.annuncio { position: relative; padding: clamp(40px, 6vw, 72px) 0 clamp(70px, 9vw, 104px); }
.annuncio .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.annuncio__apertura { max-width: 40em; font-weight: 500; font-stretch: 112%; font-size: clamp(1.25rem, 2.2vw, 1.52rem); line-height: 1.3; letter-spacing: -.01em; text-wrap: pretty; }
.annuncio__colonne { display: grid; gap: clamp(28px, 3vw, 32px); margin-top: clamp(36px, 5vw, 51px); }
.annuncio__colonna { padding-top: clamp(16px, 2vw, 18px); border-top: 2px solid var(--inchiostro); }
/* "Responsabilità:", "Requisiti:", "Cosa Offriamo:": oggi sono paragrafi in grassetto, qui etichette */
.annuncio__colonna > p:first-child strong { color: var(--rosso); font: 500 .8rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.annuncio__invito {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: clamp(40px, 5vw, 56px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: 24px;
  background: var(--grigio);
  color: #fff;
}
.annuncio__invito h6 { font-weight: 700; font-stretch: 112%; font-size: clamp(1.15rem, 1.8vw, 1.6rem); line-height: 1.25; }
.annuncio__invito :focus-visible { outline-color: #fff; }
@media (min-width: 1000px) {
  .annuncio__colonne { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ----- Il curriculum in allegato ----- */
.modulo input[type="file"] { padding: 10px 12px; cursor: pointer; }
.modulo input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 14px;
  border: 0;
  border-radius: 9px;
  background: #fff;
  color: var(--inchiostro);
  font: 600 .85rem/1 var(--font);
  cursor: pointer;
}
.modulo__nota { color: var(--velato); font: 500 .66rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* =========================================================
   Pagine di solo testo (02/10/2026): privacy, cookie e ogni testo lungo.
   Una colonna di lettura; titoli, elenchi e tabelle sono quelli di "testo-libero"
   ========================================================= */
.documento { position: relative; padding: clamp(40px, 6vw, 72px) 0 clamp(84px, 11vw, 128px); }
.documento .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.documento__testo { max-width: 46em; }
/* Elenchi numerati e tabelle: nei testi legali ci sono */
.testo-libero ol { margin-top: 10px; padding-left: 1.4em; list-style: decimal; }
.testo-libero ol li { padding: 6px 0 6px 4px; border-bottom: 0; }
.testo-libero ol li::before { content: none; }
.testo-libero table { width: 100%; border-collapse: collapse; font-size: .92em; }
.testo-libero th,
.testo-libero td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--riga); text-align: left; vertical-align: top; }
.testo-libero th { color: var(--testo); font: 500 .72rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }/* Un avviso dentro il testo: riquadro bianco con il bordo rosso */
.avviso { padding: clamp(18px, 2.4vw, 22px); border-left: 4px solid var(--rosso); border-radius: 6px 18px 18px 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--riga-chiara); }
.avviso p + p { margin-top: 10px; }
.testo-libero .avviso__titolo { color: var(--rosso); font: 500 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* =========================================================
   Pagina non trovata (02/10/2026): oggi non c'è, disegnata da zero
   ========================================================= */
.non-trovata { position: relative; container-type: inline-size; min-height: 80vh; padding: clamp(120px, 18vh, 190px) 0 clamp(84px, 11vw, 128px); }
.non-trovata__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 45px) 24px; align-items: center; }
.non-trovata .segno { margin-bottom: clamp(20px, 2.6vw, 27px); }
.non-trovata__titolo { font-weight: 800; font-stretch: 125%; font-size: min(8vw, 3.6rem, max(2.88rem, 83.8px - 2.62vw)); line-height: .98; letter-spacing: -.02em; text-transform: uppercase; text-wrap: balance; }
.non-trovata__titolo strong { font-weight: inherit; color: var(--rosso); }
.non-trovata__testo .testo { margin-top: clamp(18px, 2.2vw, 22px); }
.non-trovata__numero {
  color: transparent;
  font-weight: 800;
  font-stretch: 125%;
  /* "404" è largo circa due volte l'altezza del carattere: la misura segue la colonna (cqi è la larghezza della sezione) */
  font-size: min(38cqi, 22rem);
  line-height: .8;
  letter-spacing: -.04em;
  -webkit-text-stroke: max(2px, .012em) var(--rosso);
  user-select: none;
}
.cerca-pagina { display: flex; gap: 10px; max-width: 34em; margin-top: clamp(22px, 2.6vw, 26px); }
.cerca-pagina input {
  flex: 1;
  min-width: 0;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--riga);
  border-radius: 12px;
  background: #fff;
  color: var(--inchiostro);
  font: inherit;
}
.cerca-pagina input:focus { outline: 2px solid var(--rosso); outline-offset: 0; border-color: transparent; }
.cerca-pagina .pulsante { padding-right: 22px; }
.scorciatoie { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: clamp(24px, 3vw, 29px); }
@media (min-width: 900px) {
  .non-trovata__griglia { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  /* Il massimo è sceso da 15 a 12rem il 05/10, con la colonna: a 15rem il "404" usciva dal suo spazio */
  .non-trovata__numero { font-size: min(16cqi, 12rem); text-align: right; }
}

/* =========================================================
   Risultati della ricerca (02/10/2026): oggi non c'è una pagina, disegnata da zero
   ========================================================= */
.copertina .cerca-pagina { margin-top: 0; padding-bottom: clamp(30px, 4vw, 42px); }
.copertina .cerca-pagina input { border-color: transparent; }
.risultati { position: relative; padding: clamp(44px, 5vw, 61px) 0 clamp(84px, 11vw, 128px); }
.risultati .segno { margin-bottom: clamp(18px, 2.2vw, 22px); }
.risultati__elenco { max-width: 56em; border-top: 1px solid var(--riga); }
.risultato { position: relative; display: grid; gap: 8px; padding: clamp(20px, 2.4vw, 24px) 0; border-bottom: 1px solid var(--riga); }
.risultato__tipo { color: var(--rosso); font: 500 .7rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.risultato__titolo { font-weight: 700; font-stretch: 112%; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.15; text-wrap: balance; }
.risultato__titolo a::after { content: ""; position: absolute; inset: 0; }
.risultato__titolo a { transition: color .2s; }
.risultato:hover .risultato__titolo a { color: var(--rosso); }
.risultato__testo { max-width: 46em; color: var(--grigio); font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.55; }
.risultato__testo mark { background: none; color: var(--inchiostro); font-weight: 600; box-shadow: inset 0 -.35em rgba(228, 3, 46, .16); }
.risultato__indirizzo { color: var(--grigio); font: 500 .68rem/1.3 var(--mono); letter-spacing: .04em; overflow-wrap: anywhere; }
/* La ricerca vera (06/10): il messaggio quando manca la parola o non ci sono risultati, e niente riga sopra un elenco vuoto */
.risultati__messaggio { max-width: 46em; margin-bottom: clamp(18px, 2.2vw, 22px); color: var(--grigio); font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.55; }
.risultati__messaggio a { color: var(--inchiostro); text-decoration: underline; text-underline-offset: .2em; transition: color .2s; }
.risultati__messaggio a:hover { color: var(--rosso); }
.risultati__elenco:empty { display: none; }

/* =========================================================
   Foto fino al bordo dello schermo, e foto che crescono (05/10/2026, sera)
   Prova sul ramo larghezza-e-foto, nata guardando pegomac.com con Nicola: "testi stretti e foto larghe".
   Con la colonna di nuovo a 1440 px, alcune foto escono dalla colonna e arrivano al bordo dello schermo,
   dalla parte opposta al filo, come le fasce dei furgoni: il bordo che tocca lo schermo è dritto, l'altro
   tondo. Entrando nello schermo crescono dall'80% al 100%, attaccate al loro bordo. Solo dai 900 px:
   su telefono e tablet le foto sono già larghe quasi quanto lo schermo, e non cambia niente
   ========================================================= */
@media (min-width: 900px) {
  /* I testi lunghi restano stretti come prima, anche nella colonna larga: circa 75 lettere per riga */
  .contenuto > :is(p, ul, h6),
  .servizio__griglia > .testo-libero { max-width: 38em; }
  .tappa__testo p { max-width: 34em; }

  /* Scheda realizzazione e scheda servizio: le foto escono a destra, il filo corre a sinistra.
     Sono molto più larghe (a 1920 px da 1152 a 1680 px): anche più alte, ma al massimo il 70% dello schermo */
  .copertina .galleria { margin-right: calc(-1 * var(--fuori)); }
  .copertina .mosaico { height: clamp(340px, 43vw, min(640px, 70vh)); border-radius: 24px 0 0 24px; }
  /* Home, "Azienda": la foto grande esce a sinistra, il filo passa a destra */
  .azienda__grande { margin-left: calc(-1 * var(--fuori)); border-radius: 0 24px 24px 0; }
  .azienda__grande img { aspect-ratio: 16 / 10; }
  /* Categoria, accanto al titolo: la foto esce a destra, il filo corre a sinistra (chiesto da Nicola, 05/10 sera).
     Esiste solo a 640 px: allargata è un po' meno nitida */
  .categoria__foto { margin-right: calc(-1 * var(--fuori)); border-radius: 22px 0 0 22px; }
  /* Categoria: ogni foto esce dal suo lato, il filo passa dalla parte del testo */
  .voce__foto { margin-left: calc(-1 * var(--fuori)); border-radius: 0 22px 22px 0; }
  .voce--rovescio .voce__foto { margin: 0 calc(-1 * var(--fuori)) 0 0; border-radius: 22px 0 0 22px; }
  .voce__foto img { aspect-ratio: 16 / 10; }
  /* "Chi siamo", le dodici foto: escono a sinistra, il filo passa a destra */
  .scatti .galleria { margin-left: calc(-1 * var(--fuori)); }
  .scatti .mosaico { border-radius: 0 24px 24px 0; }

  /* La crescita: lo script scrive --cresce, da 0,8 quando la foto entra dal fondo dello schermo a 1 quando il suo
     bordo alto arriva a un quarto dall'alto. È una scala, che la scheda grafica fa da sola: niente da ridipingere */
  .js [data-cresce] { scale: var(--cresce, 1); will-change: scale; }
  .js [data-cresce="destra"] { transform-origin: 100% 50%; }
  .js [data-cresce="sinistra"] { transform-origin: 0 50%; }
}
@media (min-width: 1000px) {
  /* Con il mosaico più largo le caselle restano quasi quadrate */
  .scatti .mosaico--tutte { grid-auto-rows: clamp(150px, 14.6vw, 240px); }
}

/* =========================================================
   Il banner dei cookie (07/10/2026)
   CookieConsent 3.1.0 (public/assets/cookieconsent/, licenza MIT) con i caratteri e i colori del sito:
   riquadro bianco con gli angoli e l'ombra della barra dei contatti, titolo come i titoli delle pagine,
   "Accetta" e "Rifiuta" uguali (grigio scuro, rossi sotto il mouse), "Scegli" con il bordo, come i
   pulsanti a linea. I colori sono le variabili di CookieConsent. Il suo foglio di stile la pagina lo
   mette prima di questo (consenso.js), quindi a parità di regola vince questo
   ========================================================= */
#cc-main {
  --cc-font-family: var(--font);
  --cc-modal-border-radius: 18px;
  --cc-btn-border-radius: 12px;
  --cc-bg: #fff;
  --cc-primary-color: var(--inchiostro);
  --cc-secondary-color: var(--grigio);
  --cc-link-color: var(--rosso);
  --cc-btn-primary-bg: var(--grigio);
  --cc-btn-primary-color: #fff;
  --cc-btn-primary-border-color: var(--grigio);
  --cc-btn-primary-hover-bg: var(--rosso);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-primary-hover-border-color: var(--rosso);
  --cc-btn-secondary-bg: #fff;
  --cc-btn-secondary-color: var(--inchiostro);
  --cc-btn-secondary-border-color: rgba(10, 9, 8, .3);
  --cc-btn-secondary-hover-bg: #fff;
  --cc-btn-secondary-hover-color: var(--inchiostro);
  --cc-btn-secondary-hover-border-color: var(--inchiostro);
  --cc-separator-border-color: var(--riga-chiara);
  --cc-toggle-on-bg: var(--rosso);
  --cc-toggle-off-bg: #767676;
  --cc-toggle-readonly-bg: #c4c4c4;
  --cc-cookie-category-block-bg: #f3f3f3;
  --cc-cookie-category-block-border: #f3f3f3;
  --cc-cookie-category-block-hover-bg: #ebebeb;
  --cc-cookie-category-block-hover-border: #ebebeb;
  --cc-cookie-category-expanded-block-hover-bg: #ebebeb;
  --cc-overlay-bg: rgba(10, 9, 8, .6);
  --cc-footer-bg: #f3f3f3;
  --cc-footer-color: var(--grigio);
  --cc-footer-border-color: var(--riga-chiara);
}
#cc-main .cm,
#cc-main .pm { box-shadow: inset 0 0 0 1px rgba(10, 9, 8, .12), 0 16px 40px -16px rgba(10, 9, 8, .55); }
#cc-main .cm__title,
#cc-main .pm__title { font-weight: 800; font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; }
#cc-main .cm__desc { line-height: 1.5; }
#cc-main .cm__btn,
#cc-main .pm__btn { font-weight: 600; font-stretch: 112%; }
/* La X: leggera, come l'icona della ricerca nella testata, non un quadrato scuro nell'angolo */
#cc-main .cm__btn--close { top: 10px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; }
#cc-main .cm__btn--close:hover { background: rgba(10, 9, 8, .08); }
#cc-main .cm__btn--close svg,
#cc-main .cm__btn--close:hover svg { stroke: var(--inchiostro); }
/* Gli interruttori delle preferenze: alti 26 px invece di 23, perché le regole WCAG 2.2 vogliono almeno 24 px da
   toccare (lo segnalava axe). Il pallino cresce con loro e scorre di 30 px invece di 27 */
#cc-main .section__toggle,
#cc-main .section__toggle-wrapper,
#cc-main .toggle__icon,
#cc-main .toggle__label { height: 26px; width: 56px; }
#cc-main .toggle__icon-circle { height: 26px; width: 26px; }
#cc-main .section__toggle:checked ~ .toggle__icon .toggle__icon-circle { transform: translateX(30px); }
/* I collegamenti sottolineati, come nei testi delle pagine; sotto il mouse la riga si ritira, come nei collegamenti del sito */
#cc-main a { background-size: 100% 1px; }
#cc-main a:hover { background-size: 0 1px; }
/* Sui telefoni CookieConsent mette i tre pulsanti uno sotto l'altro: qui "Accetta" e "Rifiuta" stanno affiancati,
   sempre uguali, e "Scegli" sotto. Il riquadro resta più basso. Servono gli !important, come nelle sue regole */
@media screen and (max-width: 640px) {
  #cc-main .cm__btns > .cm__btn-group:first-child { flex-direction: row !important; gap: .375rem; }
  #cc-main .cm__btns > .cm__btn-group:first-child .cm__btn { flex: 1 1 0 !important; }
  #cc-main .cm__btns > .cm__btn-group:first-child .cm__btn + .cm__btn { margin: 0 !important; }
}

/* "Preferenze cookie" nel piede: è un pulsante, perché apre il riquadro delle scelte, ma sembra un collegamento
   come quelli accanto */
.piede__cookie { text-decoration: underline; text-underline-offset: 3px; }
.piede__cookie:hover { color: #fff; }

/* =========================================================
   Chi ha chiesto meno movimento vede tutto fermo e subito
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-compare],
  .js [data-compare] img { opacity: 1; transform: none; clip-path: none; }
  .filo__punta { display: none; }
  .scena__foto { transform: none; }
  .cassetto__scatola { transform: none; }
  .cassetto__scatola::after { display: none; }
  .js .invito .fregio__pista { stroke-dashoffset: 0; }
  .js .invito .fregio__anello,
  .js .invito .fregio__punto { opacity: 1; scale: 1; }
  [data-parallasse] { translate: none; }
  .js [data-cresce] { scale: none; }
}