/* ==========================================================================
   Multites S.r.l. — Sito 2026
   Foglio di stile unico, basato sul "Multites Design System".
   Token: colori, tipografia, spaziature — poi base, layout, componenti.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Caratteri — ospitati qui, non chiamati a Google
   Prima arrivavano con un @import: una regola che blocca il disegno della
   pagina finche' Google non risponde, e che aggiunge una chiamata a un terzo
   da gestire nel banner dei cookie. Ora i file stanno in assets/fonts/.

   Sono file VARIABILI: un solo file copre tutti i pesi, invece di uno per
   peso. Meno peso complessivo e una richiesta sola per carattere.

   font-display: swap — il testo si legge subito col carattere di sistema e
   viene sostituito appena il font e' pronto: mai una pagina bianca.

   unicode-range — il file "latin-ext" viene scaricato solo se nella pagina
   compare un carattere che lo richiede. Per l'italiano quasi mai.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/oswald-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../fonts/oswald-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/work-sans-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/work-sans-var-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/work-sans-var-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/work-sans-var-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
  /* Colori — inchiostro */
  --ink-900: #111111;
  --ink-700: #2b2b2b;
  --ink-500: #5c5c5c;
  --ink-300: #8f8f8f;
  --ink-100: #d6d6d6;

  /* Colori — carta */
  --paper-000: #ffffff;
  --paper-050: #fafafa;
  --paper-100: #f0f0f0;
  --paper-200: #e2e2e2;

  /* Colori — oro (dal logo) */
  --gold-700: #b8940f;
  --gold-600: #d4ad14;
  --gold-500: #f0c419;
  --gold-400: #f5d24a;
  --gold-100: #fbf0c2;

  /* Colori — blu (accento secondario) */
  --blue-700: #123a5c;
  --blue-600: #1a5f8f;
  --blue-500: #2678ad;
  --blue-100: #dce9f2;

  /* Colori della mappa di copertura — campionati dall'immagine, non scelti
     a occhio: la legenda deve coincidere con le fasce disegnate. */
  --mappa-principale: #005260;
  --mappa-servita: #81C6CC;
  --mappa-fuori: #DEDEE0;

  /* Ruoli semantici */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-on-dark: var(--paper-050);
  --text-on-gold: var(--ink-900);
  --surface-page: var(--paper-050);
  --surface-card: var(--paper-000);
  --surface-sunken: var(--paper-100);
  --surface-inverse: var(--ink-900);
  --border-subtle: var(--paper-200);
  --border-strong: var(--ink-900);
  --accent: var(--gold-500);
  --accent-hover: var(--gold-600);
  --accent-press: var(--gold-700);
  --accent-soft: var(--gold-100);
  --link: var(--ink-900);
  --link-hover: var(--gold-700);
  --accent-blue: var(--blue-600);
  --accent-blue-soft: var(--blue-100);

  /* Tipografia */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", -apple-system, "Segoe UI", sans-serif;
  --text-display-xl: clamp(2.6rem, 5vw, 4.2rem);
  --text-display-l: clamp(2rem, 3.6vw, 3rem);
  --text-display-m: clamp(1.5rem, 2.4vw, 2rem);
  --text-title: 1.375rem;
  --text-body-l: 1.125rem;
  --text-body: 1rem;
  --text-body-s: 0.875rem;
  --text-eyebrow: 0.8125rem;
  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.55;
  --ls-tight: -0.01em;
  --ls-wide: 0.14em;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Spaziature e forme */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-l: 8px;
  --radius-pill: 999px;
  --container-max: 1160px;
  --border-w: 1px;
  --border-w-thick: 2px;
  --shadow-card: 0 1px 2px rgba(17, 17, 17, .06), 0 4px 16px rgba(17, 17, 17, .06);
  --shadow-card-hover: 0 2px 4px rgba(17, 17, 17, .08), 0 12px 28px rgba(17, 17, 17, .10);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }

/* Scorrimento fluido solo da schermi grandi: su telefono rende ogni
   spostamento programmato lento e si somma alla fatica di composizione. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
  /* Distribuisce le righe in modo uniforme invece di riempire la prima e
     lasciare una parola sola sull'ultima. */
  text-wrap: balance;
}

/* Sulle frasi di apertura basta evitare l'orfana finale: 'balance' su testi
   piu' lunghi accorcerebbe tutte le righe, che e' il difetto opposto. */
.page-head__lead,
.hero__lead,
.section-heading__desc { text-wrap: pretty; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

/* I titoli hanno margin 0: lo stacco lo mette chi viene dopo.
   Senza questa riga titoletto e testo restano appiccicati. */
h2 + p, h3 + p, h4 + p,
h2 + ul, h3 + ul, h4 + ul { margin-top: var(--space-3); }

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); }

img { max-width: 100%; }

:focus-visible {
  outline: var(--border-w-thick) solid var(--gold-600);
  outline-offset: 2px;
}

/* Link "salta al contenuto" per accessibilità da tastiera */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-2);
  z-index: 100;
  background: var(--ink-900);
  color: var(--paper-050);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-s);
  text-decoration: none;
}
.skip-link:focus { left: var(--space-2); }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section { padding: var(--space-9) 0; }
.section--tight { padding: var(--space-8) 0; }
.section--sunken { background: var(--surface-sunken); }
.section--card { background: var(--surface-card); }

.section--dark {
  background: var(--blue-700);
  color: var(--text-on-dark);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--paper-050); }
.section--dark p { color: var(--ink-100); }
.section--dark a { color: var(--gold-500); }
/* I pulsanti pieni mantengono il proprio colore: su fondo scuro la regola
   dei link li rendeva gialli su giallo, illeggibili se non al passaggio
   del mouse. */
.section--dark .btn--primary,
.band .btn--primary { color: var(--text-on-gold); }
.section--dark .btn--outline,
.band .btn--outline { color: var(--paper-000); border-color: var(--paper-000); }
.section--dark .btn--outline:hover,
.band .btn--outline:hover { background: var(--paper-000); color: var(--ink-900); }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }

.split {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-7);
  align-items: center;
}

.stack > * + * { margin-top: var(--space-4); }
.text-center { text-align: center; }
.measure { max-width: 640px; }
.measure-center { max-width: 640px; margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   4. Navigazione
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--surface-card);
  border-bottom: var(--border-w) solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

.site-header__logo { display: inline-flex; line-height: 0; }
.site-header__logo img { height: 44px; width: auto; }

.site-nav { display: flex; align-items: center; gap: var(--space-6); }

.site-nav__link {
  font-size: var(--text-body-s);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: var(--border-w-thick) solid transparent;
}
.site-nav__link:hover { color: var(--gold-700); }
.site-nav__link[aria-current="page"] {
  border-bottom-color: var(--gold-500);
  font-weight: var(--fw-semibold);
}

/* Pulsante hamburger — visibile solo sotto i 900px */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-s);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink-900);
  transition: transform var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   5. Componenti
   -------------------------------------------------------------------------- */

/* Pulsanti */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  padding: 13px 28px;
  border: var(--border-w-thick) solid transparent;
  border-radius: var(--radius-s);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.btn--s { padding: 8px 16px; font-size: var(--text-body-s); }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-gold);
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-gold);
}
.btn--primary:active {
  background: var(--accent-press);
  border-color: var(--accent-press);
}

.btn--dark {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: var(--paper-050);
}
.btn--dark:hover {
  background: var(--ink-700);
  border-color: var(--ink-700);
  color: var(--paper-050);
}

.btn--outline {
  background: transparent;
  border-color: var(--ink-900);
  color: var(--ink-900);
}
.btn--outline:hover {
  background: var(--ink-900);
  color: var(--paper-050);
}

/* Variante da usare sulle fasce scure */
.btn--outline-light {
  background: transparent;
  border-color: var(--paper-050);
  color: var(--paper-050);
}
.btn--outline-light:hover {
  background: var(--paper-050);
  color: var(--ink-900);
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Badge / occhiello */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--gold-700);
  border: var(--border-w) solid var(--gold-400);
}
.badge--ink {
  background: var(--ink-900);
  color: var(--paper-050);
  border-color: var(--ink-900);
}
.badge--blue {
  background: var(--accent-blue-soft);
  color: var(--blue-700);
  border-color: var(--blue-500);
}

/* Titolo di sezione */
.section-heading { max-width: 720px; }
.section-heading--center {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.section-heading__eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: var(--space-3);
}
.section--dark .section-heading__eyebrow { color: var(--gold-500); }
.section-heading__title { font-size: var(--text-display-m); }
.section-heading__desc {
  font-size: var(--text-body-l);
  color: var(--text-secondary);
  margin: var(--space-4) 0 0;
}
.section--dark .section-heading__desc { color: var(--ink-100); }

/* Card */
.card {
  display: block;
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-m);
  padding: var(--space-6);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
a.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
  color: inherit;
}
.card__eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: var(--space-2);
}
.card__title {
  font-size: var(--text-title);
  margin-bottom: var(--space-3);
}
.card__text {
  color: var(--text-secondary);
  font-size: var(--text-body-s);
  margin: 0;
}
.card__more {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--text-body-s);
  font-weight: var(--fw-semibold);
  color: var(--gold-700);
}

/* Passi numerati del metodo */
.process-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.process-step__number {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--gold-500);
}
.process-step__title {
  font-size: var(--text-body-l);
  font-family: var(--font-display);
  text-transform: uppercase;
}
.process-step__text {
  color: var(--text-secondary);
  font-size: var(--text-body-s);
  margin: 0;
}
.section--dark .process-step__text { color: var(--ink-100); }

/* Elenco puntato con trattino oro */
.dash-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.dash-list li {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-body-s);
}
.dash-list li::before {
  content: "—";
  color: var(--gold-500);
  font-weight: var(--fw-bold);
  flex: none;
}

/* Citazione cliente */
.testimonial {
  margin: 0;
  padding: var(--space-6);
  background: var(--surface-sunken);
  border-radius: var(--radius-m);
  border-left: 3px solid var(--gold-500);
}
.testimonial blockquote {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body-l);
  font-style: italic;
}
.testimonial figcaption {
  font-size: var(--text-body-s);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

/* Dati sintetici */
.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-display-m);
  color: var(--gold-500);
  line-height: 1;
}
.stat__label {
  font-size: var(--text-body-s);
  color: var(--text-secondary);
  margin-top: var(--space-2);
}
.section--dark .stat__label { color: var(--ink-100); }

/* Segnaposto immagine — nessuna foto reale è stata fornita */
.image-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--paper-100);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-l);
  color: var(--ink-300);
  font-size: var(--text-body-s);
  text-align: center;
  padding: var(--space-5);
}
.section--dark .image-slot {
  background: var(--ink-700);
  border-color: var(--ink-700);
  color: var(--ink-300);
}

/* --------------------------------------------------------------------------
   6. Blocchi di pagina
   -------------------------------------------------------------------------- */

/* Hero scuro della home */
.hero {
  background: var(--paper-050);
  color: var(--text-primary);
  padding: var(--space-9) 0;
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.hero h1 {
  font-size: var(--text-display-xl);
  color: var(--ink-900);
  margin: var(--space-5) 0;
  /* Le due righe sono decise a mano dai <span class="riga">, non lasciate al
     browser: qui il testo e' corto e l'andata a capo deve cadere sempre nello
     stesso punto. Per questo niente 'balance'. */
  text-wrap: normal;
}
.hero h1 .riga { display: block; }
.hero__lead {
  font-size: var(--text-body-l);
  color: var(--text-secondary);
  /* Nessun limite proprio: prende la misura del contenitore, la stessa del
     titolo che gli sta sopra. Un limite piu' stretto lo farebbe andare a capo
     prima del titolo, lasciando spazio vuoto di fianco senza motivo. */
  max-width: none;
}
.hero .btn-group { margin-top: var(--space-6); }

/* Intestazione delle pagine interne */
.page-head {
  background: var(--surface-card);
  border-bottom: var(--border-w) solid var(--border-subtle);
  padding: var(--space-8) 0;
}
.page-head h1 {
  font-size: var(--text-display-l);
  margin: var(--space-4) 0 0;
}

/* Firma della divisione, sopra il titolo di pagina. Sta nella stessa posizione
   dell'occhiello (la provincia nelle pagine caso): il lettore la incontra prima
   del titolo, come su una carta intestata. Va solo dove il servizio e' quello
   della divisione, non su tutte le pagine. */
.firma-divisione {
  display: block;
  width: 100%;
  max-width: 290px;
  height: auto;
}
.firma-divisione + h1 { margin-top: var(--space-5); }
@media (max-width: 600px) { .firma-divisione { max-width: 230px; } }

/* Intestazione di pagina sul telefono: l'aria che su schermo grande dava
   respiro, qui mangiava tre quarti della prima schermata prima di arrivare al
   titolo. Si stringono i margini, non i contenuti. */
@media (max-width: 700px) {
  .page-head { padding: var(--space-6) 0 var(--space-7); }
  /* Il timbro sta gia' sotto al bordo dell'intestazione: il suo margine
     proprio si sommava a quello della sezione. */
  .page-head .hero__timbro { margin-top: 0; width: 108px; }
  .firma-divisione + h1 { margin-top: var(--space-4); }
}
.page-head__lead {
  font-size: var(--text-body-l);
  color: var(--text-secondary);
  /* Stessa larghezza dell'h1 che gli sta sopra: va a capo dove finisce lo
     spazio, non prima. Vedi la nota su .hero__lead. */
  max-width: none;
  margin: var(--space-4) 0 0;
}

/* Fascia blu di chiusura — una sola volta per pagina, prima del footer */
.closing-band {
  background: var(--blue-700);
  color: var(--paper-050);
  padding: var(--space-7) 0;
  text-align: center;
}
.closing-band h2 {
  font-size: var(--text-display-m);
  color: var(--paper-050);
  margin-bottom: var(--space-3);
}
.closing-band p {
  color: var(--blue-100);
  max-width: 560px;
  margin: 0 auto;
}

/* Scheda servizio (pagina Servizi) */
.service {
  scroll-margin-top: 120px;
  padding: var(--space-8) 0;
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.service:last-child { border-bottom: 0; }
.service__grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: var(--space-7);
  align-items: start;
}
.service__title { font-size: var(--text-display-m); }
.service__index {
  font-family: var(--font-display);
  font-size: var(--text-body-s);
  letter-spacing: var(--ls-wide);
  color: var(--gold-700);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. Modulo contatti
   -------------------------------------------------------------------------- */
.form { display: grid; gap: var(--space-5); }
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.field { display: block; }
.field__label {
  display: block;
  font-size: var(--text-body-s);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body);
  color: var(--text-primary);
  padding: 12px 14px;
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-s);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--gold-600); }

.field--check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-body-s);
  color: var(--text-secondary);
}
.field--check input { width: auto; flex: none; margin-top: 3px; }

.form__note {
  font-size: var(--text-body-s);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-inverse);
  color: var(--paper-100);
  padding: var(--space-6) 0 var(--space-4);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.site-footer h2 {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--gold-500);
  margin-bottom: var(--space-2);
}
.site-footer p,
.site-footer li {
  font-size: var(--text-body-s);
  color: var(--paper-100);
  opacity: .85;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 3px; }
.site-footer a { color: var(--paper-100); }
.site-footer a:hover { color: var(--gold-500); }

/* Collegamento social nel piede: icona piccola, accanto al testo */
.social {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  font-size: var(--text-body-s);
}
.social svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.site-footer__legal {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--border-w) solid var(--ink-700);
  font-size: var(--text-body-s);
  color: var(--ink-300);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4) var(--space-6) var(--space-6);
    background: var(--surface-card);
    border-bottom: var(--border-w) solid var(--border-subtle);
    box-shadow: var(--shadow-card);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__link {
    padding: var(--space-4) 0;
    border-bottom: var(--border-w) solid var(--border-subtle);
  }
  .site-nav__link[aria-current="page"] { border-bottom-color: var(--gold-500); }
  .site-nav .btn { margin-top: var(--space-4); }

  .split,
  .grid--2,
  .grid--3,
  .service__grid { grid-template-columns: 1fr; }

  .split { gap: var(--space-6); }
  .hero__lead { max-width: none; }
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}

/* Tablet: le griglie di schede reggono due colonne, il testo affiancato
   all'immagine no. Per questo .split resta a una colonna. */
@media (max-width: 900px) and (min-width: 601px) {
  .grid--2,
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .section { padding: var(--space-8) 0; }
  .container { padding: 0 var(--space-5); }
  .grid--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .site-header__logo img { height: 36px; }
  .btn { width: 100%; }
  .btn-group { flex-direction: column; align-items: stretch; }
}

/* Rispetta la preferenza di ridotta animazione */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; }
}

/* --------------------------------------------------------------------------
   10. Stampa
   -------------------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .closing-band, .btn { display: none; }
  body { background: #fff; }
  .section { padding: var(--space-5) 0; }
}

/* --------------------------------------------------------------------------
   10. Firma visiva — componenti ripresi dai carousel LinkedIn
   Evidenziatore giallo, riga sotto i titoli, cerchi numerati, blocco invertito.
   Sono gli elementi che rendono il sito riconoscibile come i post pubblicati.
   -------------------------------------------------------------------------- */

/* Evidenziatore giallo dietro una frase chiave.
   ⚠️ Il giallo NON si usa mai come colore di testo su bianco: contrasto
   insufficiente. Qui è fondo dietro testo scuro, come nei carousel. */
.mark {
  /* Banda disegnata, non fondo pieno: cosi' se ne governa altezza e
     posizione. Col fondo pieno la banda e' alta quanto il riquadro del
     carattere e su titoli a righe ravvicinate invade la riga sopra. */
  background-image: linear-gradient(var(--gold-500), var(--gold-500));
  background-repeat: no-repeat;
  /* DUE TARATURE, perche' i due caratteri hanno metriche diverse e una sola
     misura sbaglia da qualche parte. Valori presi con TextMetrics sul font
     realmente renderizzato, non a occhio.

     Work Sans (testo corrente): sopra la linea di base il riquadro in linea
     misura 0,938em e le maiuscole 0,750em; sotto, le discendenti 0,250em.
     Banda da 0,13em (un filo sopra le maiuscole) alta 1,11em.

     Se si cambia un carattere, si rimisura: in console, measureText() su
     fontBoundingBoxAscent / actualBoundingBoxAscent / fontBoundingBoxDescent. */
  background-size: 100% 1.11em;
  background-position: 0 0.13em;
  color: var(--ink-900);
  padding: 0 .18em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Oswald (titoli): riquadro 1,188em sopra la base, maiuscole 0,813em,
   discendenti 0,219em. Serve partire piu' in basso e stare un filo piu' alta. */
h1 .mark, h2 .mark, h3 .mark, h4 .mark {
  background-size: 100% 1.14em;
  background-position: 0 0.32em;
}
.section--dark .mark { color: var(--ink-900); }

/* Su fondo scuro il giallo può fare da testo: lì il contrasto regge. */
.accent-text { color: var(--gold-500); }

/* Riga gialla corta sotto i titoli di sezione */
.rule {
  display: block;
  width: 64px;
  height: 6px;
  background: var(--gold-500);
  margin: var(--space-4) 0 var(--space-5);
  border: 0;
}
.section-heading--center .rule,
.text-center .rule { margin-left: auto; margin-right: auto; }

/* Passaggi del metodo — cerchi gialli numerati */
.steps {
  display: grid;
  gap: var(--space-6);
  counter-reset: passo;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-5);
  align-items: start;
}
.step::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
}
.step h3 { margin: 0 0 var(--space-2); font-size: var(--text-title); }
.step p { margin: 0; color: var(--text-secondary); }
.section--dark .step p { color: var(--ink-100); }

/* Tabella comparativa — diagnosi contro tentativi.
   Confronto fra APPROCCI, mai fra aziende. */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  background: var(--border-subtle);
  border: var(--border-w) solid var(--border-subtle);
}
.compare__head {
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.compare__head--yes { background: var(--blue-700); color: var(--paper-050); }
.compare__head--no { background: var(--paper-200); color: var(--ink-700); }
.compare__cell {
  background: var(--paper-000);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-body);
}
.compare__cell--no { background: var(--paper-050); color: var(--text-secondary); }

/* Fascia di elementi di fiducia, subito sotto l'hero */
.trust-bar {
  background: var(--surface-sunken);
  border-bottom: var(--border-w) solid var(--border-subtle);
  padding: var(--space-6) 0;
}
.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.trust-bar__item { display: grid; gap: var(--space-1); }
.trust-bar__value {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.trust-bar__label {
  font-size: var(--text-body-s);
  color: var(--text-secondary);
}

/* Scheda caso, con pin giallo e provincia */
.case-card {
  display: grid;
  gap: var(--space-3);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  padding: var(--space-5);
}
.case-card__place {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-s);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.case-card__pin {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-500);
  flex: none;
}
.case-card__pin svg { width: 13px; height: 13px; fill: var(--ink-900); }
.case-card h3 { font-size: var(--text-title); margin: 0; }
.case-card p { margin: 0; color: var(--text-secondary); font-size: var(--text-body); }

/* Elenco "cosa serve per una valutazione" */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
/* Flusso in linea, non griglia: la voce puo' contenere link e grassetti
   senza che ogni pezzo diventi una cella a se'. */
.checklist li {
  position: relative;
  padding-left: 26px;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .38em;
  width: 14px;
  height: 14px;
  background: var(--gold-500);
  border: 2px solid var(--ink-900);
}

/* Legenda della mappa di copertura — tre fasce */
.coverage { display: grid; gap: var(--space-4); }
.coverage__row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.coverage__swatch { width: 28px; height: 28px; margin-top: .15em; }
.coverage__swatch--main { background: var(--mappa-principale); }
.coverage__swatch--served { background: var(--mappa-servita); }
.coverage__swatch--other { background: var(--mappa-fuori); }
.coverage__label { font-weight: var(--fw-semibold); }
.coverage__note { color: var(--text-secondary); font-size: var(--text-body-s); }

/* --------------------------------------------------------------------------
   11. Responsive della firma visiva
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .trust-bar__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 640px) {
  .compare { grid-template-columns: 1fr; }
  .compare__head--no { margin-top: var(--space-5); }
  .step { grid-template-columns: 48px 1fr; gap: var(--space-4); }
  .step::before { width: 48px; height: 48px; font-size: 1.15rem; }
  .trust-bar__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .rule { width: 48px; height: 5px; }
}

/* --------------------------------------------------------------------------
   12. Barra superiore — firma di posizionamento e contatto
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--blue-700);
  color: var(--blue-100);
  font-size: var(--text-body-s);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 38px;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}
.topbar__sign { letter-spacing: .02em; }
.topbar__sign strong { color: var(--paper-000); font-weight: var(--fw-semibold); }
.topbar a { color: var(--paper-100); }
.topbar a:hover { color: var(--gold-500); }

@media (max-width: 640px) {
  .topbar__inner { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

/* --------------------------------------------------------------------------
   13. Macro-aree — le porte d'ingresso della home
   Sono la prima cosa dopo l'hero: chi arriva deve capire in due secondi
   dove andare. Riquadri grandi, con spazio per la foto.
   -------------------------------------------------------------------------- */
.areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

/* Variante di sole schede di testo, senza fotografia. Le immagini delle aree
   stanno in home: ripeterle su /cosa-facciamo/ allungherebbe la pagina senza
   aggiungere niente, e lì la griglia serve a smistare, non a raccontare. */
.areas--testo .area__media { display: none; }
.areas--testo .area__body { padding: var(--space-6); }
.area {
  display: flex;
  flex-direction: column;
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.area:hover {
  border-color: var(--ink-900);
  transform: translateY(-2px);
}
.area__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--paper-100);
  overflow: hidden;
}
.area__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.area__media--empty {
  display: grid;
  place-items: center;
  color: var(--ink-300);
  font-size: var(--text-body-s);
  text-align: center;
  padding: var(--space-4);
}
/* Bollino giallo numerato, come nella griglia delle criticità dei carousel */
.area__num {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gold-500);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
/* Scheda settore non cliccabile: stessa forma delle aree della home, ma
   senza link. Va tolto il sollevamento al passaggio del mouse, altrimenti
   promette un approfondimento che non esiste. */
.area--statica:hover { border-color: var(--border-subtle); transform: none; }
.area--statica .area__body ul {
  margin: 0;
  padding-left: var(--space-5);
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-body-s);
}

.area__body { padding: var(--space-5); display: grid; gap: var(--space-2); flex: 1; }
.area__title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .01em;
  margin: 0;
}
.area__desc { margin: 0; color: var(--text-secondary); font-size: var(--text-body); }
.area__go {
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-s);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}
.area:hover .area__go { color: var(--blue-600); }
/* Il riquadro di raccolta, per i casi che non rientrano */
.area--open { background: var(--paper-100); border-style: dashed; }

/* --------------------------------------------------------------------------
   14. Fascia con foto di sfondo e velatura — invito all'azione
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  padding: var(--space-9) 0;
  background: var(--ink-700) center / cover no-repeat;
  color: var(--paper-050);
  text-align: center;
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 17, .55);
}
.band > * { position: relative; }
.band h2 { color: var(--paper-000); text-transform: uppercase; }
.band p { color: var(--paper-100); max-width: 620px; margin: 0 auto var(--space-6); }

/* --------------------------------------------------------------------------
   15. Titoli in maiuscolo — indicazione del moodboard aziendale
   "MAIUSCOLO per i concetti chiave e le intestazioni di sezione,
    minuscolo grassetto per i sottotitoli"
   -------------------------------------------------------------------------- */
.section-heading__title,
.hero h1 { text-transform: uppercase; }
.section-heading__desc { font-weight: var(--fw-semibold); text-transform: none; }

/* --------------------------------------------------------------------------
   16. Numeri — prova concreta, non aggettivi
   -------------------------------------------------------------------------- */
.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center;
}
/* Righe verticali sottili al posto dello spazio vuoto: staccano i dati
   senza allungare la fascia. */
.figures .figure + .figure {
  border-left: var(--border-w) solid var(--border-subtle);
}
.figures .figure { padding: 0 var(--space-4); }
.figure__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-display-m);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--blue-700);
  /* Cifre a larghezza fissa: mentre il numero sale non deve ballare. */
  font-variant-numeric: tabular-nums;
}
.figure__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-body-s);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

/* La fascia dei numeri fa da separatore fra due sezioni: deve staccare,
   non occupare spazio. Padding ridotto e filetti sopra e sotto. */
.section--figures {
  padding: var(--space-6) 0;
  border-top: var(--border-w) solid var(--border-subtle);
  border-bottom: var(--border-w) solid var(--border-subtle);
}

/* Nota sotto i numeri: dice che sono vivi, non incisi nella pietra. Deve
   leggersi solo a chi la cerca, quindi piccola e in grigio. */
.figures__nota {
  margin: var(--space-4) 0 0;
  text-align: center;
  font-size: var(--text-body-s);
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
  .figures { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
}
@media (max-width: 640px) {
  .areas { grid-template-columns: 1fr; }
  .figures { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   17. Hero compatto
   Le macro-aree sono la prima scelta del visitatore: l'hero non deve
   spingerle sotto la piega. Riferimento: sicura.com mette i servizi in cima.
   -------------------------------------------------------------------------- */
.hero { padding: var(--space-7) 0; }
.hero h1 { margin: var(--space-3) 0; line-height: 1.18; }
.hero .btn-group { margin-top: var(--space-5); }

/* La barra superiore resta su una riga sola finché c'è spazio */
.topbar__inner { min-height: 34px; }

/* --------------------------------------------------------------------------
   18. Mandata a capo — REGOLA GENERALE
   Nessuna parola viene mai spezzata a meta'. Se serve andare a capo, si va a
   capo su una parola intera.

   Prima qui c'era `hyphens: auto` sui titoli, messo per evitare che i titoli
   in maiuscolo sforassero su mobile: era la cura sbagliata, perche' autorizza
   il browser a sillabare (impermeabi-lizzazioni). Lo sforamento si risolve
   riducendo il corpo sugli schermi stretti, che e' la regola qui sotto.

   ⚠️ Non reintrodurre `hyphens: auto`, `word-break: break-all` ne'
   `overflow-wrap: break-word / anywhere` in nessun punto del foglio.
   -------------------------------------------------------------------------- */
html {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

/* Su schermi stretti i titoli scendono di un gradino: e' cosi' che si evita
   lo sforamento, non spezzando le parole. */
@media (max-width: 480px) {
  :root {
    --text-display-xl: clamp(1.9rem, 8vw, 2.6rem);
    --text-display-l: clamp(1.6rem, 6.6vw, 2rem);
    --text-display-m: clamp(1.3rem, 5.2vw, 1.5rem);
  }
}

/* --------------------------------------------------------------------------
   19. Hero con immagini orizzontali a tutta pagina
   Fotografie a piena larghezza che si alternano in dissolvenza, con una
   velatura sopra: le immagini si vedono, il testo resta leggibile.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: visible;          /* il timbro sborda dal bordo inferiore */
  /* z-index invece di isolation: crea comunque il contesto che tiene dentro
     le immagini di sfondo (z-index negativi), ma fa dipingere tutto l'hero
     SOPRA la sezione successiva. Con isolation la meta' inferiore del timbro
     finiva coperta dal blocco che segue. */
  z-index: 1;
  min-height: 460px;
  display: flex;
  align-items: center;
}
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}
.hero__slides { position: absolute; inset: 0; }
.hero__slides > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: dissolvi 28s infinite;
}
.hero__slides > *:nth-child(1) { animation-delay: 0s; }
.hero__slides > *:nth-child(2) { animation-delay: 7s; }
.hero__slides > *:nth-child(3) { animation-delay: 14s; }
.hero__slides > *:nth-child(4) { animation-delay: 21s; }

/* Immagine unica: niente dissolvenza, resta ferma e visibile. Senza questa
   riga l'animazione 'dissolvi' la farebbe comparire e sparire da sola. */
.hero__slides:has(> :only-child) > * { animation: none; opacity: 1; }

/* Fermo immagine di attesa del video: sta qui e non nell'attributo 'poster'
   perche' deve cambiare con la proporzione del riquadro. Si vede finche' il
   primo fotogramma non e' pronto, e resta se il telefono e' in risparmio
   energetico e blocca la riproduzione automatica. */
.hero__slides video {
  background: url(/assets/img/fascia/fascia-home-poster.webp) center / cover no-repeat;
}
@media (max-width: 660px) {
  .hero__slides video {
    background-image: url(/assets/img/fascia/fascia-home-mobile-poster.webp);
  }
}

/* Velatura: piu' fitta a sinistra, dove sta il testo */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    rgba(250, 250, 250, .94) 0%,
    rgba(250, 250, 250, .86) 40%,
    rgba(250, 250, 250, .55) 100%
  );
}

/* Segnaposto finche' non ci sono le foto vere */
.placeholder {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    45deg, var(--paper-100), var(--paper-100) 10px,
    var(--paper-200) 10px, var(--paper-200) 20px);
  color: var(--ink-300);
  font-size: var(--text-body-s);
  text-align: center;
  padding: var(--space-3);
}

/* --------------------------------------------------------------------------
   20. Rotazione delle immagini dentro i riquadri
   Da 3 a 5 immagini per riquadro, in dissolvenza. Solo CSS: nessuna libreria.
   -------------------------------------------------------------------------- */
.rotator { position: relative; width: 100%; height: 100%; }
.rotator > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: dissolvi 20s infinite;
}
/* --sfasa sposta l'intero ciclo di una scheda: e' negativo, quindi
   l'animazione parte gia' a meta' strada invece di aspettare. Serve a non far
   cambiare tutte le schede nello stesso istante, che sembra un difetto. */
.rotator > *:nth-child(1) { animation-delay: calc(0s  + var(--sfasa, 0s)); }
.rotator > *:nth-child(2) { animation-delay: calc(5s  + var(--sfasa, 0s)); }
.rotator > *:nth-child(3) { animation-delay: calc(10s + var(--sfasa, 0s)); }
.rotator > *:nth-child(4) { animation-delay: calc(15s + var(--sfasa, 0s)); }
.rotator > *:nth-child(5) { animation-delay: calc(20s + var(--sfasa, 0s)); }

/* Scarti scelti a mano: non multipli fra loro e non multipli del passo di 5s,
   cosi' le schede non si riallineano mai. */
.areas .area:nth-child(1) .rotator { --sfasa:  0s;   }
.areas .area:nth-child(2) .rotator { --sfasa: -3.4s; }
.areas .area:nth-child(3) .rotator { --sfasa: -7.1s; }
.areas .area:nth-child(4) .rotator { --sfasa: -1.3s; }
.areas .area:nth-child(5) .rotator { --sfasa: -9.2s; }

/* Il ciclo e' tarato su quattro immagini. Con tre o cinque va accorciato o
   allungato, altrimenti resta un vuoto oppure l'ultima non compare mai. */
.rotator:has(> :nth-child(3):last-child) > * { animation-name: dissolvi-3; animation-duration: 15s; }
.rotator:has(> :nth-child(5):last-child) > * { animation-name: dissolvi-5; animation-duration: 25s; }

/* Le immagini riempiono il riquadro: la regola generale su .section img le
   rimanderebbe alla loro altezza naturale. */
.rotator > img { height: 100%; object-fit: cover; }
/* Tarata su QUATTRO elementi: ognuno occupa un quarto del ciclo e la
   dissolvenza si sovrappone al successivo. Con la versione precedente,
   pensata per cinque, restavano 1,4 secondi di vuoto a ogni cambio e
   l'immagine spariva del tutto. */
@keyframes dissolvi {
  0%    { opacity: 0; }
  3%    { opacity: 1; }
  25%   { opacity: 1; }
  28%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* Le percentuali qui sopra valgono per quattro immagini su venti secondi: il
   25% cade esattamente sul quinto secondo, cioe' quando la successiva comincia
   ad aprirsi. Con due, tre o cinque immagini la durata cambia ma le
   percentuali no, e l'immagine si chiudeva molto prima che entrasse la
   seguente: il riquadro restava vuoto (due secondi su dieci con due immagini).
   Serve una sequenza per ogni durata, con il momento di chiusura sempre sul
   quinto secondo e la dissolvenza sempre di sei decimi. */
@keyframes dissolvi-2 {   /* 10s */
  0%     { opacity: 0; }
  6%     { opacity: 1; }
  50%    { opacity: 1; }
  56%    { opacity: 0; }
  100%   { opacity: 0; }
}
@keyframes dissolvi-3 {   /* 15s */
  0%     { opacity: 0; }
  4%     { opacity: 1; }
  33.33% { opacity: 1; }
  37.33% { opacity: 0; }
  100%   { opacity: 0; }
}
@keyframes dissolvi-5 {   /* 25s */
  0%     { opacity: 0; }
  2.4%   { opacity: 1; }
  20%    { opacity: 1; }
  22.4%  { opacity: 0; }
  100%   { opacity: 0; }
}
@keyframes dissolvi-6 {   /* 24s, passo accorciato a 4s */
  0%      { opacity: 0; }
  2.5%    { opacity: 1; }
  16.667% { opacity: 1; }
  19.167% { opacity: 0; }
  100%    { opacity: 0; }
}

/* --------------------------------------------------------------------------
   21. Strumenti — molte immagini, poco testo
   -------------------------------------------------------------------------- */
/* Il nastro contiene ogni strumento due volte: arrivato a meta' corsa
   l'immagine e' identica a quella di partenza, quindi il salto all'inizio non
   si vede e lo scorrimento sembra continuo. */
@keyframes scorri {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.tools { overflow: hidden; }
.tools__track {
  display: flex;
  gap: var(--space-4);
  width: max-content;
  animation: scorri 45s linear infinite;
}
/* Ogni voce del nastro e' un collegamento alla scheda dello strumento.
   Il nastro si ferma al passaggio del mouse (regola piu' sotto): senza quella
   pausa il bersaglio scapperebbe da sotto il puntatore. */
.tools__item {
  width: 220px;
  flex: none;
  display: grid;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
}
a.tools__item:hover .tools__figure { outline: 3px solid var(--gold-500); outline-offset: -3px; }
a.tools__item:hover .tools__name { color: var(--gold-700); }
.tools__che {
  font-size: var(--text-body-s);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  margin-top: calc(var(--space-2) * -1);
}
.tools__figure {
  aspect-ratio: 4 / 3;
  background: var(--paper-100);
  overflow: hidden;
}
.tools__figure img { width: 100%; height: 100%; object-fit: cover; }
.tools__name {
  font-family: var(--font-display);
  font-size: var(--text-body-s);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* In pausa solo quando il puntatore e' davvero sopra una scheda.
   Prima la pausa era legata a tutta la sezione, che e' larga quanto la pagina
   e alta qualche centinaio di pixel: leggendo il titolo o stando fermi da
   qualche parte li' dentro il nastro si bloccava e non ripartiva piu'. */
.tools__track:has(.tools__item:hover),
.tools__track:has(.tools__item:focus-visible) { animation-play-state: paused; }

/* Frecce di scorrimento.
   Al primo clic il nastro passa in modalita' manuale: l'animazione si spegne e
   la striscia diventa scorrevole. Chi non tocca le frecce continua a vedere la
   fascia che scorre da sola. */
/* Una freccia per lato, ai bordi della colonna di testo: quella che porta
   avanti sta a destra, quella che torna indietro a sinistra. */
.tools__comandi {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-5);
  /* A tutta pagina, come il nastro: le frecce stanno agli estremi della zona
     che scorre. Un margine piccolo dal bordo dello schermo, non quello del
     testo. */
  padding-inline: var(--space-5);
}
.tools__freccia {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.tools__freccia:hover { background: var(--gold-500); border-color: var(--gold-500); }
.tools__freccia svg { width: 20px; height: 20px; fill: none; stroke: var(--ink-900); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.tools.is-manuale .tools__track {
  animation: none;
  transform: none;
  width: auto;
  max-width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-inline: var(--space-6);
  padding-bottom: var(--space-3);
}
.tools.is-manuale .tools__track::-webkit-scrollbar { display: none; }
.tools.is-manuale .tools__item { scroll-snap-align: start; }
/* Fermo il nastro, la seconda meta' e' una ripetizione inutile: si scorrono
   i dodici strumenti una volta sola. */
.tools.is-manuale .tools__track > .tools__item:nth-child(n+13) { display: none; }


/* --------------------------------------------------------------------------
   22. Casi in forma compatta — tre righe, non tre schede
   -------------------------------------------------------------------------- */
.case-list { display: grid; gap: 0; border-top: var(--border-w) solid var(--border-subtle); }
.case-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: var(--space-5);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: var(--border-w) solid var(--border-subtle);
  text-decoration: none;
  color: inherit;
}
.case-row:hover { background: var(--paper-050); }
.case-row__place {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-s);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.case-row__title { font-weight: var(--fw-semibold); }
.case-row__desc { color: var(--text-secondary); font-size: var(--text-body-s); }
.case-row__go { color: var(--blue-600); font-size: var(--text-body-s); white-space: nowrap; }

@media (max-width: 640px) {
  .case-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .case-row__go { display: none; }
}

/* Chi ha chiesto meno animazioni non le vede */
@media (prefers-reduced-motion: reduce) {
  .hero__slides > * { animation: none; }
  /* Il nastro sta fermo, ma deve restare scorrevole: altrimenti degli
     strumenti se ne vedrebbero solo i primi tre. */
  .tools__track {
    animation: none;
    transform: none;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    padding-inline: var(--space-5);
  }
  .tools__track > .tools__item:nth-child(n+13) { display: none; }
  .rotator > *, .media-rotante > * { animation: none; opacity: 0; }
  .rotator > *:first-child, .media-rotante > *:first-child { opacity: 1; }
}

/* --------------------------------------------------------------------------
   23. Modulo di richiesta — scelta del ramo e campi condizionali
   -------------------------------------------------------------------------- */
.branch-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: 0 0 var(--space-7);
  padding: 0;
  border: 0;
}
.branch-choice legend {
  font-family: var(--font-display);
  font-size: var(--text-title);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  padding: 0;
}
.branch { position: relative; }
.branch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.branch label {
  display: block;
  height: 100%;
  padding: var(--space-5);
  background: var(--surface-card);
  border: 2px solid var(--border-subtle);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.branch label:hover { border-color: var(--ink-300); }
.branch input:checked + label {
  border-color: var(--ink-900);
  background: var(--accent-soft);
}
.branch input:focus-visible + label { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.branch__title {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.branch__desc { display: block; font-size: var(--text-body-s); color: var(--text-secondary); }

/* I gruppi di campi compaiono solo quando il ramo è scelto */
.branch-fields { display: none; }
.branch-fields.is-active { display: grid; gap: var(--space-5); }

/* Riquadro con le indicazioni sulle foto da allegare */
.photo-hint {
  background: var(--accent-soft);
  border-left: 4px solid var(--gold-500);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-body-s);
}
.photo-hint strong { display: block; margin-bottom: var(--space-2); }
.photo-hint ul { margin: 0; padding-left: var(--space-5); }
.photo-hint li + li { margin-top: var(--space-1); }

/* Richieste aggiuntive (rimedi, valore legale).
   Riquadro a se' stante: devono leggersi come scelte, non come altri campi
   da compilare. Compaiono secondo il ramo e il contesto scelti. */
.opzioni {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--ink-900);
}
.opzioni[hidden] { display: none; }
.opzioni__titolo {
  font-family: var(--font-display);
  font-size: var(--text-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin: 0;
}
.opzioni .field--check[hidden] { display: none; }
.opzioni .field--check > label { align-items: start; }

/* Trappola antispam: invisibile agli umani, non ai bot */
.honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form__hint { font-size: var(--text-body-s); color: var(--text-secondary); margin-top: var(--space-1); }
.form fieldset { border: 0; padding: 0; margin: 0; }
.form__legend {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: var(--space-3);
  border-bottom: var(--border-w) solid var(--border-subtle);
  margin-bottom: var(--space-5);
  width: 100%;
}

@media (max-width: 900px) { .branch-choice { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   24. Modulo — allineamento e respiro dei campi
   Ogni campo è un blocco a sé con etichetta, controllo e nota allineati
   sulla stessa colonna. Prima gli spazi erano irregolari.
   -------------------------------------------------------------------------- */
.form-wrap { max-width: 780px; margin-inline: auto; }

.form { display: grid; gap: var(--space-7); }
.form fieldset { display: grid; gap: var(--space-5); }

.field { display: grid; gap: var(--space-2); }
.field > label {
  font-weight: var(--fw-semibold);
  font-size: var(--text-body);
  line-height: var(--lh-snug);
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  /* I campi hanno una larghezza propria da specifica HTML: senza questo, su
     schermi molto stretti sporgono dal riquadro invece di rimpicciolirsi. */
  min-width: 0;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--paper-000);
  border: var(--border-w) solid var(--ink-300);
  border-radius: 3px;
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--blue-500);
  outline-offset: 1px;
  border-color: var(--blue-600);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input[type="file"] {
  width: 100%;
  padding: var(--space-3);
  background: var(--paper-050);
  border: var(--border-w) dashed var(--ink-300);
  border-radius: 3px;
}
.field .form__hint { margin: 0; }

/* Due campi affiancati, che tornano in colonna su schermi stretti */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

/* Asterisco dei campi obbligatori */
.req { color: var(--gold-700); }

/* Consenso privacy: casella e testo allineati in alto */
.field--check > label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-weight: var(--fw-regular);
}
.field--check input { margin-top: .3em; }

@media (max-width: 640px) {
  .form__row { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   25. Intestazione di pagina allineata al contenuto sottostante
   Sulle pagine con modulo l'introduzione deve avere la stessa larghezza e
   lo stesso margine sinistro dei campi: prima era piu' stretta e sembrava
   scollegata da ciò che seguiva.
   -------------------------------------------------------------------------- */
.page-head .form-wrap .page-head__lead { max-width: none; }

/* --------------------------------------------------------------------------
   Recapiti — un riquadro solo, tre voci dentro
   Stanno dentro l'intestazione di pagina, non in una sezione a parte: titolo
   e recapiti devono leggersi come un blocco solo. I tre riquadri sono staccati
   e in grigio chiaro, senza bordo.
   -------------------------------------------------------------------------- */
.recapiti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
.recapiti__voce {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--surface-sunken);
}
.recapiti__titolo {
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--fw-semibold);
  margin: 0;
}
.recapiti__voce p { margin: 0; color: var(--text-secondary); }
.recapiti__dato {
  font-size: var(--text-body-l);
  font-weight: var(--fw-semibold);
}
.recapiti__dato a { color: var(--text-primary); }
.recapiti .btn { justify-self: start; margin-top: var(--space-2); }

@media (max-width: 820px) {
  .recapiti { grid-template-columns: 1fr; }
}

/* Dati legali dentro la colonna della mappa.
   Accanto alla cartina, che e' alta, la colonna di sinistra avanzava spazio:
   i dati stanno li' invece di occupare una sezione tutta loro. */
.dati-azienda {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--border-subtle);
}
.dati-azienda h3 {
  font-family: var(--font-display);
  font-size: var(--text-body);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin: 0 0 var(--space-3);
}
.dati-azienda p {
  margin: 0;
  font-size: var(--text-body-s);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Testo corrente dentro l'intestazione di pagina.
   Serve dove il sottotitolo da solo e' troppo corto e lascerebbe un vuoto
   prima della sezione successiva: il discorso si chiude qui, in un blocco
   solo, invece di aprire una sezione apposta per due paragrafi. */
.page-head__testo {
  max-width: 760px;
  margin-top: var(--space-6);
  display: grid;
  gap: var(--space-4);
}
.page-head__testo p { margin: 0; }

/* --------------------------------------------------------------------------
   26. Immagini di contenuto
   Non sfondano mai il contenitore e mantengono le proporzioni.
   -------------------------------------------------------------------------- */
/* Il vecchio `:not(.site-header__logo img)` qui era inutile — il logo sta
   dentro <header>, mai dentro .section — e faceva danno: la specificita' di
   :not() è quella del suo argomento, quindi la regola pesava (0,2,2) e
   scavalcava qualunque eccezione scritta dopo. Tolto. */
.split img,
.section img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Eccezione: i riquadri che hanno già un'aspect-ratio propria. Lì l'immagine
   deve riempire il box, e la regola qui sopra — che ha la stessa specificita'
   e viene dopo — la rimanderebbe alla sua altezza naturale, lasciando una
   striscia di fondo scoperta. Difetto latente finché i riquadri contenevano
   solo segnaposto. */
/* Dentro il riquadro puo' esserci un <picture>, quando la stessa fascia ha una
   versione stretta per il telefono. L'involucro prende posizione e dissolvenza
   dalle regole qui sopra; il ritaglio va detto all'immagine che sta dentro. */
.media-rotante > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-rotante > img,
.area__media img,
.tools__figure img { height: 100%; }

/* --------------------------------------------------------------------------
   27. Costo delle animazioni sui dispositivi tattili
   La home aveva 48 elementi in animazione continua: la striscia dell'hero,
   venti immagini in dissolvenza dentro i riquadri e sedici strumenti in
   scorrimento. Su telefono e tablet il browser ricompone di continuo mentre
   l'utente prova a scorrere, e lo scorrimento diventa a scatti fino a
   sembrare bloccato.

   Su schermi grandi le animazioni restano, spostate sulla scheda grafica.
   Sotto i 1000px si fermano: resta visibile la prima immagine di ogni
   gruppo, la pagina non perde nulla di informativo e torna fluida.
   -------------------------------------------------------------------------- */

/* Composizione sulla scheda grafica invece che sul processore */
.tools__track {
  will-change: transform;
  transform: translateZ(0);
}
.hero__slides > * { will-change: opacity; }
.rotator > * { will-change: opacity; }

/* Isola il ridisegno: quello che cambia dentro non fa ricalcolare il resto.
   NON sull'hero: contain:paint ritaglia i figli che sbordano, e mozzava
   a meta' il timbro. Sull'hero il ritaglio lo fa gia' .hero__media. */
.tools,
.area__media { contain: paint; }

@media (max-width: 1000px) {
  /* Niente movimento continuo su tablet e telefoni */
  .hero__slides > * {
    animation: none;
    will-change: auto;
    transform: none;
  }
  .hero__slides > * { opacity: 0; }
  .hero__slides > *:first-child { opacity: 1; }
  /* Le dissolvenze restano accese anche qui. Erano state spente quando la
     home aveva 48 elementi in animazione insieme: oggi la fascia in cima e' un
     video e il nastro strumenti e' una trasformazione sola, quindi restano
     una ventina di opacita', che il telefono regge. Niente 'will-change'
     pero': promuovere venti livelli sulla scheda grafica costa memoria e su
     telefono non serve. */
  .rotator > * { will-change: auto; }


  /* Il nastro degli strumenti resta in movimento anche qui: e' l'unica
     animazione continua rimasta sul telefono, ed e' una sola trasformazione
     sulla scheda grafica. Col dito si ferma toccando le frecce. */
  .tools__track { animation-duration: 55s; }
}

/* --------------------------------------------------------------------------
   28. Timbro "per uso legale" nell'hero
   Fondo trasparente: le immagini che scorrono restano visibili dietro.
   Sta sopra la velatura ma sotto il testo, cosi' non ruba leggibilita'.
   -------------------------------------------------------------------------- */
/* La posizione del timbro e' definita piu' avanti, nella sezione 29. Qui
   c'era una prima versione: ogni sua riga era ridichiarata la' tranne due,
   'bottom' e 'pointer-events: none', che restavano attive e rompevano il
   collegamento. Con 'top' e 'bottom' insieme il riquadro del link si
   schiacciava a zero, e pointer-events lo rendeva comunque non cliccabile. */
.hero .container { position: relative; z-index: 1; }

/* Sotto i 1000px l'hero si impila e il timbro finirebbe sopra i pulsanti */
@media (max-width: 1000px) {
  /* Il timbro nel codice sta prima del testo, perche' su schermi grandi e'
     posizionato in assoluto. Qui torna in flusso: senza ordine esplicito
     finirebbe sopra al titolo. */
  .hero .container { display: flex; flex-direction: column; }
  .hero .measure { order: 1; }
  .hero__timbro {
    order: 2;
    position: static;
    display: block;
    width: 130px;
    margin: var(--space-6) 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   29. Timbro: posizione a cavallo
   Sta sotto i pulsanti, all'altezza in cui finisce la colonna di testo e
   cominciano a intravedersi le fotografie: meta' sul fondo chiaro, meta'
   sulle immagini. E sborda dal bordo inferiore dell'hero, appoggiandosi
   sulla sezione successiva.
   -------------------------------------------------------------------------- */
.hero .container { position: relative; flex: 1 1 100%; width: 100%; }

:root { --timbro: clamp(150px, 14vw, 200px); }

/* Spazio in basso nell'hero perche' il timbro stia sotto i pulsanti e la
   sua meta' inferiore cada oltre il bordo, sulla sezione seguente. */
@media (min-width: 1001px) {
  .hero {
    padding-bottom: calc(var(--timbro) / 2 + var(--space-4));
    min-height: clamp(460px, 52vh, 620px);
  }
}

.hero__timbro {
  position: absolute;
  /* In colonna sotto il pulsante "Richiedi un'analisi" dell'intestazione:
     stesso margine destro, cosi' i due bordi destri coincidono. */
  right: var(--space-6);
  top: calc(100% + var(--space-4));
  width: var(--timbro);
  height: auto;
  z-index: 2;
  opacity: .95;
  /* E' un collegamento alla pagina del valore legale: deve essere cliccabile,
     quindi niente pointer-events:none come nella versione precedente. */
  display: block;
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.hero__timbro img { width: 100%; height: auto; display: block; }
.hero__timbro:hover { opacity: 1; transform: rotate(-2deg) scale(1.03); }
.hero__timbro:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero__timbro:hover { transform: none; } }

/* Sotto i 1000px l'hero si impila: il timbro torna in flusso */
@media (max-width: 1000px) {
  /* Il timbro nel codice sta prima del testo, perche' su schermi grandi e'
     posizionato in assoluto. Qui torna in flusso: senza ordine esplicito
     finirebbe sopra al titolo. */
  .hero .container { display: flex; flex-direction: column; }
  .hero .measure { order: 1; }
  .hero__timbro {
    order: 2;
    position: static;
    display: block;
    width: 130px;
    margin: var(--space-6) 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   30. Copertura geografica: mappa e legenda affiancate
   La mappa e' verticale e la legenda corta: impilarle spreca altezza e le
   allontana. Restano fianco a fianco fino al telefono, dove la mappa
   torna sopra a piena larghezza.
   -------------------------------------------------------------------------- */
.coverage-block {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-7);
  align-items: center;
}
.coverage-block img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
}

/* Tablet: restano affiancate, la mappa si stringe */
@media (max-width: 1000px) and (min-width: 601px) {
  .coverage-block { grid-template-columns: 1fr 1.2fr; gap: var(--space-5); }
  .coverage-block img { max-height: 340px; }
}

/* Telefono: la mappa sopra, in verticale e a piena larghezza */
@media (max-width: 600px) {
  .coverage-block { grid-template-columns: 1fr; gap: var(--space-6); }
  .coverage-block > :first-child { order: 2; }
  .coverage-block img { max-height: 380px; }
}

/* --------------------------------------------------------------------------
   31. Blocco "confronta i preventivi"
   Cinque domande da fare a chiunque, con la nostra risposta accanto.
   Non e' un paragone con altri: e' una lista di verifica.
   -------------------------------------------------------------------------- */
/* Deve leggersi come una tabella, non come un'altra pagina di testo: misura
   contenuta, righe strette, colonna della domanda piu' magra della risposta. */
.confronto {
  display: grid;
  gap: 0;
  margin-top: var(--space-6);
  max-width: 860px;
  border-top: var(--border-w) solid var(--border-strong, var(--border-subtle));
  border-bottom: var(--border-w) solid var(--border-strong, var(--border-subtle));
}
.confronto__voce {
  display: grid;
  grid-template-columns: 15.5rem 1fr;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  align-items: baseline;
}
.confronto__voce + .confronto__voce { border-top: var(--border-w) solid var(--border-subtle); }
.confronto__domanda {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.confronto__nostra {
  color: var(--text-secondary);
  font-size: var(--text-body-s);
  line-height: var(--lh-snug);
}
.confronto__nostra strong { color: var(--text-primary); }


/* Riquadro con più immagini che ruotano, dentro i blocchi testo/immagine */
.media-rotante {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-100);
}
.media-rotante > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: dissolvi 20s infinite;
}
/* Il passo e' il tempo che ogni immagine resta visibile. Sta in una variabile
   perche' con sei immagini va accorciato: a cinque secondi l'una il giro
   durerebbe mezzo minuto e le ultime due non le vedrebbe nessuno. */
.media-rotante { --passo: 5s; }
.media-rotante > *:nth-child(1) { animation-delay: calc(0 * var(--passo)); }
.media-rotante > *:nth-child(2) { animation-delay: calc(1 * var(--passo)); }
.media-rotante > *:nth-child(3) { animation-delay: calc(2 * var(--passo)); }
.media-rotante > *:nth-child(4) { animation-delay: calc(3 * var(--passo)); }
.media-rotante > *:nth-child(5) { animation-delay: calc(4 * var(--passo)); }
.media-rotante > *:nth-child(6) { animation-delay: calc(5 * var(--passo)); }

/* Il ciclo è tarato su quattro immagini. Con due o tre il riquadro resterebbe
   vuoto per la parte di ciclo che avanza: si accorcia la durata. */
.media-rotante:has(> :nth-child(2):last-child) > * { animation-name: dissolvi-2; animation-duration: 10s; }
.media-rotante:has(> :nth-child(3):last-child) > * { animation-name: dissolvi-3; animation-duration: 15s; }
.media-rotante:has(> :nth-child(5):last-child) > * { animation-name: dissolvi-5; animation-duration: 25s; }
.media-rotante:has(> :nth-child(6):last-child) { --passo: 4s; }
.media-rotante:has(> :nth-child(6):last-child) > * { animation-name: dissolvi-6; animation-duration: 24s; }

/* Una foto sola: stessa geometria e stessa larghezza di colonna del riquadro
   che ruota, ma ferma. Senza questa variante l'unica immagine erediterebbe la
   dissolvenza e resterebbe invisibile per gran parte del ciclo. */
.media-rotante.foto-fissa > * { animation: none; opacity: 1; }

/* Immagine mai ingrandita.
   I termogrammi sono nativamente piccoli — il sensore infrarosso di una
   termocamera è 640x480 o 1024x768, e quelle sono le dimensioni vere, non una
   compressione. Portarli oltre la loro misura non aggiunge dettaglio: lo
   sgrana. Con questa variante l'immagine si posa al centro del riquadro alla
   sua dimensione reale, su fondo scuro, e viene rimpicciolita solo quando il
   riquadro è più stretto di lei. */
.media-rotante--nativa,
.area__media--nativa { background: var(--ink-900); }
.media-rotante--nativa > *,
.area__media--nativa img { object-fit: scale-down; }

/* Fascia fotografica a tutta pagina, taglio orizzontale. Riusa la dissolvenza
   di .media-rotante e cambia solo le proporzioni: deve stare DOPO la regola
   base, altrimenti vince il 4/3 per ordine di scrittura.
   Niente max-height: con aspect-ratio limiterebbe la larghezza, non l'altezza. */
.media-rotante--fascia { width: 100%; aspect-ratio: 32 / 9; }
@media (max-width: 1000px) { .media-rotante--fascia { aspect-ratio: 21 / 9; } }
@media (max-width: 600px)  { .media-rotante--fascia { aspect-ratio: 3 / 2; } }

/* Scheda sintetica in testa alla pagina caso: chi arriva da una ricerca capisce
   in dieci secondi se il caso e' il suo, senza leggere niente. */
.scheda-caso {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-top: var(--border-w) solid var(--border-subtle);
  border-bottom: var(--border-w) solid var(--border-subtle);
}
.scheda-caso dt {
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gold-700);
  margin-bottom: var(--space-2);
}
.scheda-caso dd { margin: 0; font-size: var(--text-body-s); line-height: var(--lh-snug); }
@media (max-width: 900px) { .scheda-caso { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .scheda-caso { grid-template-columns: 1fr; gap: var(--space-4); } }

/* --------------------------------------------------------------------------
   Pagina caso — le criticita' individuate
   Una per riquadro: la fotografia porta l'evidenza, il numero su badge nero
   la richiama nel testo. Ripresa dai carousel (badge nero, numero giallo).
   -------------------------------------------------------------------------- */
.reperti {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7) var(--space-6);
  margin-top: var(--space-7);
}
.reperto { display: grid; gap: var(--space-4); align-content: start; }
.reperto__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-100);
  overflow: hidden;
}
.reperto__foto img { width: 100%; height: 100%; object-fit: cover; }
.reperto__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--ink-900);
  color: var(--gold-500);
  font-family: var(--font-display);
  font-size: var(--text-title);
  font-weight: var(--fw-semibold);
}
@media (max-width: 900px) { .reperti { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Pagine strumento — uscite verso le aree di intervento
   Chi arriva qui da una ricerca tecnica non ha visto la home: queste schede
   sono la sua via d'uscita, e portano solo alle aree dove lo strumento serve
   davvero, non a tutte.
   -------------------------------------------------------------------------- */
.rimandi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.rimando {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-5);
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-m);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.rimando:hover { border-color: var(--gold-500); box-shadow: var(--shadow-card-hover); color: inherit; }
.rimando__icona {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border-radius: var(--radius-s);
}
.rimando__icona svg { width: 24px; height: 24px; fill: none; stroke: var(--ink-900); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rimando__nome { font-family: var(--font-display); font-weight: var(--fw-semibold); display: block; }
.rimando__che { color: var(--text-secondary); font-size: var(--text-body-s); line-height: var(--lh-snug); }

/* Blocco "da noi": i fatti verificabili che rendono la pagina nostra e non
   una voce da enciclopedia uguale a quella di chiunque altro. */
.da-noi {
  border-left: 5px solid var(--gold-500);
  background: var(--paper-050);
  padding: var(--space-5) var(--space-6);
  /* Sta in cima alla scheda, subito prima della fotografia: senza il margine
     sotto, la striscia gialla toccava l'immagine. */
  margin: 0 0 var(--space-7);
}
.da-noi h2 { font-size: var(--text-title); }

/* Colonna di lettura delle pagine strumento: sono testi lunghi e tecnici,
   qui la misura di riga conta piu' dell'effetto. */
.misura-lettura { max-width: 760px; }
.misura-lettura h2 { font-size: var(--text-display-m); margin-top: var(--space-7); }
.misura-lettura h2:first-of-type { margin-top: 0; }
.misura-lettura > p + h2 { margin-top: var(--space-7); }

/* Foto accanto ai passaggi del metodo.
   Niente proporzioni fisse: la foto riempie lo spazio che avanza, cosi' la
   colonna di sinistra finisce esattamente dove finiscono i cinque passaggi. */
/* .split centra le due colonne: qui invece la sinistra deve essere alta quanto
   i cinque passaggi, altrimenti la foto non puo' riempire lo spazio che avanza. */
.split:has(.colonna-metodo) { align-items: stretch; }
.colonna-metodo { display: flex; flex-direction: column; }
.foto-metodo {
  margin: var(--space-6) 0 0;
  flex: 1 1 auto;
  min-height: 220px;
  overflow: hidden;
}
.foto-metodo .placeholder,
.foto-metodo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .colonna-metodo { display: block; }
  .foto-metodo { min-height: 0; }
  .foto-metodo .placeholder,
  .foto-metodo img { aspect-ratio: 16 / 10; height: auto; }
}

/* Una sola immagine per pagina strumento: serve a dare aria, non a dimostrare */
.figura-strumento { margin: 0 0 var(--space-7); }
.figura-strumento .placeholder,
.figura-strumento img,
.figura-strumento video { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display: block; }

/* Un video qui e' un'immagine che si muove: parte da solo, in ciclo, muto e
   senza comandi. Chi ha chiesto meno animazioni lo vede fermo. */
@media (prefers-reduced-motion: reduce) {
  .figura-strumento video { animation: none; }
}

/* Briciole di pane: chi arriva da una ricerca non ha visto la home */
.briciole { font-size: var(--text-body-s); color: var(--text-secondary); margin-bottom: var(--space-4); }
.briciole a { color: var(--text-secondary); }
.briciole a:hover { color: var(--link-hover); }

/* --------------------------------------------------------------------------
   Indice degli strumenti
   Elenco unico, non diviso in famiglie: gli stessi strumenti servono in piu'
   ambiti e dividerli significherebbe ripetere le stesse schede tre volte.
   L'appartenenza la portano le etichette, il filtro serve a restringere.
   -------------------------------------------------------------------------- */
.filtri { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.filtro {
  font-family: var(--font-display);
  font-size: var(--text-body-s);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-4);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.filtro:hover { border-color: var(--gold-500); }
.filtro[aria-pressed="true"] {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--text-on-gold);
}

/* min() nel minmax: sotto i 300px la colonna smette di pretendere 300px e si
   adatta alla larghezza disponibile, invece di sforare dallo schermo. */
.strumenti-lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.strumento-voce {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-m);
  background: var(--surface-card);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard);
}
.strumento-voce:hover { border-color: var(--gold-500); color: inherit; }
.strumento-voce h2 { font-size: var(--text-title); }
.strumento-voce p { color: var(--text-secondary); font-size: var(--text-body-s); line-height: var(--lh-snug); margin: 0; }
.strumento-voce[hidden] { display: none; }

/* L'attributo `hidden` non basta se l'elemento ha un `display` esplicito: la
   regola di componente vince e l'elemento resta visibile. Era il motivo per
   cui i filtri di /casi/ non nascondevano niente. Vale per tutto il sito. */
[hidden] { display: none !important; }

/* Blocco di richiamo piu' stretto: sulle pagine caso a tutta larghezza
   sovrastava i due pulsanti che gli stanno sotto. */
.container--stretto { max-width: 940px; }

/* Etichette d'ambito: dicono a colpo d'occhio dove si usa quello strumento */
.ambiti { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); }
.ambito {
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: 2px var(--space-3);
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--gold-700);
  white-space: nowrap;
}
.conteggio { margin-top: var(--space-4); color: var(--text-secondary); font-size: var(--text-body-s); }

/* Riga di servizio sotto una griglia: precisazione, non messaggio principale */
.nota-sezione {
  margin-top: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--text-body-s);
}

/* Invito all'azione in linea, fra una sezione e l'altra */
.cta-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  background: var(--accent-soft);
  border-left: 5px solid var(--gold-500);
  margin-top: var(--space-7);
}
.cta-riga p { margin: 0; font-weight: var(--fw-semibold); }

/* Da tablet in su domanda e bottone restano affiancati: se il bottone va a
   capo il riquadro raddoppia di altezza e la pagina si allunga per niente.
   Sotto i 700px l'incolonnamento serve davvero e resta. */
@media (min-width: 701px) {
  .cta-riga { flex-wrap: nowrap; }
  .cta-riga .btn { flex: none; }
}

@media (max-width: 1000px) {
  .confronto__voce { grid-template-columns: 1fr; gap: var(--space-2); }
  .media-rotante > * { will-change: auto; }
}

/* --------------------------------------------------------------------------
   Schede strumento — pannello laterale che segue la lettura
   Il testo di una scheda e' lungo: chi arriva da una ricerca tecnica non
   scorrerebbe mai fino in fondo, e le uscite verso le aree di intervento
   resterebbero invisibili. Il pannello sta a fianco e si ferma sotto
   l'intestazione mentre la pagina scorre.
   -------------------------------------------------------------------------- */
.scheda-strumento {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-7);
  align-items: start;
}
.scheda-strumento__testo { max-width: 760px; }

.scheda-strumento__lato {
  /* 69px di intestazione fissa + un po' d'aria */
  position: sticky;
  top: calc(69px + var(--space-5));
}
.pannello {
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-subtle);
  border-radius: var(--radius-m);
  padding: var(--space-5);
}
.pannello__titolo {
  font-size: var(--text-title);
  line-height: var(--lh-snug);
}
.pannello .rimandi {
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
/* Dentro il pannello le schede sono gia' in un riquadro: niente bordo doppio */
.pannello .rimando {
  padding: var(--space-3);
  border-color: transparent;
  background: var(--paper-050);
  border-radius: var(--radius-s);
  gap: var(--space-3);
}
.pannello .rimando__icona { width: 32px; height: 32px; }
.pannello .rimando__icona svg { width: 19px; height: 19px; }
.pannello .rimando__nome { font-size: var(--text-body-s); }
.pannello .rimando__che { display: none; }
.pannello__invito {
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--text-body-s);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}
.pannello .btn { width: 100%; justify-content: center; }

/* Sotto i 1000px non c'e' spazio per due colonne. Il pannello risale in cima:
   su telefono si vede subito, invece che dopo tutto il testo. */
@media (max-width: 1000px) {
  .scheda-strumento { display: flex; flex-direction: column; gap: var(--space-6); }
  .scheda-strumento__lato { position: static; order: -1; }
  .scheda-strumento__testo { max-width: none; }
  /* Qui il pannello e' un indice, non un contenuto: solo i nomi, il piu'
     compatto possibile, perche' sta prima del testo e non deve rubare
     la prima schermata. */
  .pannello { padding: var(--space-4); }
  .pannello__titolo { font-size: var(--text-body); }
  .pannello .rimandi { gap: var(--space-2); margin-top: var(--space-3); }
  .pannello .rimando { padding: var(--space-2) var(--space-3); align-items: center; }
  .pannello .rimando__icona { width: 26px; height: 26px; border-radius: 999px; }
  .pannello .rimando__icona svg { width: 15px; height: 15px; }
  .pannello__invito { margin: var(--space-4) 0 var(--space-3); }
}

/* Il timbro vive anche sulle intestazioni di pagina, non solo nell'hero:
   servono lo stesso riferimento di posizione e lo stesso permesso di sbordare. */
.page-head {
  position: relative;
  overflow: visible;
  z-index: 1;
}
.page-head .container { position: relative; }

/* Immagine verticale a fianco di un blocco di testo, per rompere una sequenza
   di sole parole. E' decorativa: sotto i 900px sparisce invece di allungare
   la pagina su telefono, dove lo scorrimento costa di piu'. */
.con-figura {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-7);
  align-items: start;
  max-width: 1000px;
}
.figura-lato { margin: 0; }
.figura-lato .placeholder,
.figura-lato img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .con-figura { display: block; max-width: none; }
  /* Prima qui la figura spariva: era un dettaglio decorativo e su schermo
     stretto rubava spazio. Ora porta una frase scritta dentro, e nasconderla
     sul telefono significa perderla per la maggioranza di chi arriva.
     Resta, larga al massimo 320px e centrata. */
  .figura-lato {
    display: block;
    width: min(320px, 100%);
    margin: var(--space-6) auto 0;
  }
}

/* Colonna immagine stretta e verticale: la foto accompagna il testo senza
   rubargli spazio. Su schermi stretti torna orizzontale, perche' una 3:4 a
   piena larghezza occuperebbe quasi tutta la schermata del telefono. */
.split--foto-verticale { grid-template-columns: 300px 1fr; }
.split--foto-verticale .media-rotante { aspect-ratio: 3 / 4; }
@media (max-width: 900px) {
  /* La colonna fissa da 300px deve sparire, altrimenti su telefono la foto
     tiene 300px e al testo ne restano 130. */
  .split--foto-verticale { grid-template-columns: 1fr; }
  /* Le immagini dentro sono verticali per natura — pagine di relazione, viste
     dall'alto. Schiacciarle in 4:3 ne mostrerebbe una fascia centrale. Tengono
     la loro proporzione, con la larghezza limitata perche' non occupino tutta
     la schermata. */
  .split--foto-verticale .media-rotante {
    width: min(320px, 100%);
    margin-inline: auto;
  }
}

/* Scorciatoie in cima a una pagina: dicono subito di cosa si parla e portano
   al blocco giusto. Chi cerca "distacco" non deve scorrere oltre la muffa per
   scoprire che ne parliamo. */
.ancore { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.ancora {
  font-family: var(--font-display);
  font-size: var(--text-body-s);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-4);
  border: var(--border-w) solid var(--ink-900);
  border-radius: 999px;
  color: var(--text-primary);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.ancora:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--text-on-gold); }

/* L'intestazione e' fissa: senza questo il titolo di sezione finirebbe sotto. */
section[id] { scroll-margin-top: calc(69px + var(--space-5)); }

/* .split da' la colonna piu' larga al primo elemento. Quando il blocco e'
   specchiato e la foto viene per prima, la foto diventava piu' grande di
   quella del blocco accanto: qui si riequilibra, cosi' due blocchi affiancati
   hanno immagini della stessa misura.
   Escluso .split--foto-verticale, che ha una colonna fissa sua. */
.split:not(.split--foto-verticale):has(> .media-rotante:first-child) {
  grid-template-columns: .9fr 1.1fr;
}

@media (max-width: 900px) {
  /* Deve annullare la regola qui sopra, che ha la stessa specificita':
     senza questa riga il blocco specchiato resta a due colonne sul telefono
     e la foto si riduce a un francobollo. */
  .split:not(.split--foto-verticale):has(> .media-rotante:first-child) {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Chiusura: niente movimento continuo su tablet e telefoni.
   Le regole tarate sul numero di immagini usano :has() e pesano piu' delle
   regole generiche dei blocchi qui sopra. Senza ripetere qui la stessa forma,
   sui telefoni le dissolvenze tornerebbero attive.
   -------------------------------------------------------------------------- */
/* Chi ha chiesto meno animazioni non le vede nemmeno qui. Vanno ripetuti gli
   stessi selettori delle regole tarate per numero di immagini: dentro :has()
   il peso lo da' l'argomento, e una forma piu' corta perderebbe il confronto. */
@media (prefers-reduced-motion: reduce) {
  .rotator:has(> :nth-child(3):last-child) > *,
  .rotator:has(> :nth-child(5):last-child) > *,
  .media-rotante:has(> :nth-child(2):last-child) > *,
  .media-rotante:has(> :nth-child(3):last-child) > *,
  .media-rotante:has(> :nth-child(5):last-child) > *,
  .media-rotante:has(> :nth-child(6):last-child) > * { animation-name: none; }
}