/* ══════════════════════════════════════════════════════════════════
   CP Studio Lab — landing
   Il linguaggio del disegno tecnico (quote, tavola, distinta, ciclo di lavoro, cartiglio)
   con il carattere e i colori del kit F: Inter, verde e crema. Griglia 8px.
   Ogni valore passa dai token in :root: il riassunto è in DESIGN_SYSTEM.md.
   ══════════════════════════════════════════════════════════════════ */
/* Inter (il carattere del logo) e Geist Mono (le annotazioni tecniche): variabili 100–900,
   subset latin, servite da /fonts con le licenze OFL (nessuna richiesta a Google) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}
/* Riserva con le metriche di Inter (Arial o Roboto corretti): se Inter arriva dopo il primo disegno,
   le righe del titolo non cambiano e la pagina non salta */
@font-face {
  font-family: 'Inter riserva';
  src: local('Arial'), local('ArialMT'), local('Roboto');
  size-adjust: 107.12%;
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0%;
}
/* Le cifre delle annotazioni vengono da Inter: lo zero di Geist Mono è barrato e accanto al simbolo
   di diametro «Ø» si confonderebbe (0 e Ø). Stesso file di Inter: nessun download in più. */
@font-face {
  font-family: 'Cifre';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/geist-mono-latin.woff2') format('woff2');
}

:root {
  /* Colori del kit F (sito/colori.css) */
  --accento: #1F4D3F;          /* verde del marchio */
  --accento-scuro: #173B30;    /* verde al passaggio del mouse */
  --crema: #F4F1EA;            /* testo e logo su fondo verde */
  --testo: #16161A;            /* inchiostro */
  --tenue: #6E6C68;            /* grigio: testi secondari, 5:1 sul fondo */
  --fondo: #FAFAF8;
  /* Neutri dell'interfaccia */
  --superficie: #FFFFFF;
  --superficie-2: #F3F2EE;
  --bordo: #E6E4DF;
  --bordo-forte: #D6D3CC;
  --velo: #EDF1EE;             /* verde appena accennato: pezzo della tavola, «Fatto», primo risultato */
  --velo-forte: #CAD7CF;       /* barre del resoconto */
  /* Sul verde: testi secondari (5,3:1), linee e trame */
  --crema-tenue: #B9C4BC;
  --linea-verde: rgba(244, 241, 234, .2);
  --trama: rgba(244, 241, 234, .34);
  /* Carta millimetrata: righe ogni 8px e ogni 40px, appena visibili; il mirino un po' di più */
  --griglia: rgba(31, 77, 63, .06);
  --griglia-fine: rgba(31, 77, 63, .025);
  --mirino: rgba(31, 77, 63, .28);
  --griglia-verde: rgba(244, 241, 234, .06);   /* carta millimetrata sul foglio verde del menu */
  /* Segnaposto ancora da compilare */
  --segnaposto: #FFE45C;
  --segnaposto-bordo: #8A5A12;
  /* Un'ombra sola, per gli esempi dei servizi */
  --ombra: 0 1px 2px rgba(22, 22, 26, .04), 0 32px 64px -40px rgba(31, 77, 63, .4);
  /* Sottolineatura dei link: grigia su chiaro, crema tenue sul verde (vedi .punto e .contatto) */
  --sottolineatura: var(--tenue);

  /* Caratteri: Inter per parlare (lo stesso del logo), Geist Mono per annotare (etichette, numeri, quote).
     Accenti con il peso leggero, mai con il corsivo */
  --sans: 'Inter', 'Inter riserva', system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Cifre', 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --peso-leggero: 300;
  --peso-normale: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  /* Scala tipografica: una sola */
  --t-micro: 12px;
  --t-piccolo: 14px;
  --t-corpo: 16px;
  --t-lead: 18px;
  --t-h3: 24px;
  --t-citazione: clamp(18px, 1.5vw, 22px);   /* le parole dei clienti nelle recensioni */
  --t-voce: clamp(28px, 3.4vw, 48px);
  --t-h2: clamp(36px, 5.2vw, 72px);
  --t-cifra: clamp(64px, 8vw, 128px);
  --t-display: min(15.5vw, 88px);
  --t-menu: clamp(40px, min(7vw, 9svh), 104px);   /* voci del menu a schermo intero */
  --t-tavola: 21px;            /* testi della tavola, in unità del disegno: crescono quando la tavola rimpicciolisce,
                                  così a schermo restano tra 12 e 15px */
  /* Interlinee e spaziature tra lettere */
  --lh-display: .9;
  --lh-cifra: .85;
  --lh-titolo: 1.02;
  --lh-voce: 1.2;
  --lh-citazione: 1.4;
  --lh-corpo: 1.55;
  --ls-display: -.05em;
  --ls-titolo: -.035em;
  --ls-voce: -.02em;
  --ls-micro: .08em;
  --ls-logo: -.035em;          /* dal logo.html del kit */

  /* Spazi: multipli di 8 */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;  --s5: 40px;
  --s6: 48px;  --s7: 56px;  --s8: 64px;  --s10: 80px; --s12: 96px; --s16: 128px;
  /* Misure */
  --testata: 64px;
  --larghezza: 1200px;
  --gutter: 16px;
  --sezione: 96px;
  --misura: 36em;              /* righe di testo leggibili */
  --misura-stretta: 26em;
  --misura-documento: 720px;
  --logo: 18px;                /* corpo del logo: spazio libero ≥ altezza della pillola */
  /* Raggi e linee */
  --r: 10px;                   /* stesso rapporto delle tessere del logo */
  --r-s: 6px;
  --r-xs: 4px;
  --r-pillola: 999px;
  --scarto: 4px;               /* piccoli scarti: sottolineature, freccia che avanza, punte della quota */
  --r-foglio: 40px;            /* angoli dei fogli verdi che salgono sulla pagina */
  --linea: 1px;
  --linea-forte: 2px;
  --linea-tessera: 6px;        /* spessore della tessera vuota, in proporzione al logo */
  --fuoco-distanza: 3px;

  /* Movimento: ogni sezione entra a modo suo, sempre solo con transform e opacity */
  --curva: cubic-bezier(.2, .7, .2, 1);
  --curva-precisa: cubic-bezier(.65, 0, .35, 1);
  --breve: .2s;
  --media: .6s;
  --lunga: 1s;
  --sfalsa: .1s;               /* passo dei ritardi in sequenza */

  /* La quota sopra «Precisi»: distanza dalla parola e altezza delle maiuscole (Inter, interlinea .9) */
  --quota-distanza: 24px;
  --quota-cap: .09em;
  /* Segni usati come mask: le punte delle quote, la tessera ripetuta, la lente della ricerca */
  --freccia-sx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0 4 8 1.5v5z'/%3E%3C/svg%3E");
  --freccia-dx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M8 4 0 1.5v5z'/%3E%3C/svg%3E");
  --motivo-tessera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Crect x='12' y='12' width='32' height='32' rx='5.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --lente: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 2a5 5 0 1 0 2.9 9.1l3.5 3.5 1.2-1.2-3.5-3.5A5 5 0 0 0 7 2Zm0 1.7a3.3 3.3 0 1 1 0 6.6 3.3 3.3 0 0 1 0-6.6Z'/%3E%3C/svg%3E");
  /* La quota: due punte, la linea, le due linee di riferimento */
  --quota-segni:
    var(--freccia-sx) left var(--linea) top 0 / var(--s1) var(--s1) no-repeat,
    var(--freccia-dx) right var(--linea) top 0 / var(--s1) var(--s1) no-repeat,
    linear-gradient(#000 0 0) left 0 top var(--scarto) / 100% var(--linea) no-repeat,
    linear-gradient(#000 0 0) left top / var(--linea) 100% no-repeat,
    linear-gradient(#000 0 0) right top / var(--linea) 100% no-repeat;
}

@media (min-width: 480px) {
  :root { --t-tavola: 15px; }
}
@media (min-width: 600px) {
  :root { --t-tavola: 12px; }
}
@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --sezione: 144px;
    --t-lead: 20px;
    --logo: 20px;
    --t-display: clamp(48px, 10.4vw, 152px);
  }
}
@media (min-width: 1024px) {
  /* il titolo d'apertura si misura anche sull'altezza: sui portatili bottone e tavola restano nello schermo */
  :root { --t-h3: 28px; --t-tavola: 13px; --t-display: clamp(48px, min(10.4vw, 17svh), 152px); }
}
@media (min-width: 1024px) and (max-height: 820px) {
  :root { --t-tavola: 15px; }
}
@media (min-width: 1280px) {
  :root { --gutter: 48px; --t-tavola: 12px; }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--s10); }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: var(--peso-normale) var(--t-corpo)/var(--lh-corpo) var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3 { margin: 0; font-weight: var(--peso-forte); }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: var(--linea-forte) solid var(--accento);
  outline-offset: var(--fuoco-distanza);
  border-radius: var(--r-xs);
}
main:focus { outline: none; }
::selection { background: var(--accento); color: var(--crema); }
.servizio-pos, .settore-num, .fase-num, .mock-url, .mock-nota, .tavola, .mirino-valore { font-variant-numeric: tabular-nums; }

/* Segnaposto ancora da compilare: ben visibili di proposito.
   Quando compilate un dato, togliete il <mark class="da-compilare"> che lo avvolge. */
mark.da-compilare {
  background: var(--segnaposto);
  color: var(--testo);
  outline: var(--linea-forte) dashed var(--segnaposto-bordo);
  outline-offset: var(--linea);
  border-radius: var(--r-xs);
  padding: 0 var(--s1);
  text-transform: none;
  letter-spacing: normal;
}

.contenitore {
  width: 100%;
  max-width: calc(var(--larghezza) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.salta {
  position: absolute;
  left: var(--s2); top: calc(-1 * var(--s8));
  z-index: 20;
  padding: var(--s1) var(--s2);
  background: var(--accento);
  color: var(--crema);
  border-radius: var(--r-s);
  text-decoration: none;
  font-weight: var(--peso-medio);
}
.salta:focus { top: var(--s2); }

/* ── Componenti di testo ── */
/* Micro-scritta: le note a margine del disegno, maiuscole e cifre tabellari */
.micro {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: var(--peso-medio);
  line-height: var(--lh-voce);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--tenue);
}
.titolo-sezione {
  max-width: 16em;
  overflow-wrap: break-word;
  font-size: var(--t-h2);
  line-height: var(--lh-titolo);
  letter-spacing: var(--ls-titolo);
  text-wrap: balance;
}
.micro + .titolo-sezione { margin-top: var(--s3); }
.leggero { font-weight: var(--peso-leggero); }
.sezione-sotto { margin-top: var(--s3); max-width: var(--misura-stretta); font-size: var(--t-lead); color: var(--tenue); }

.sezione { padding: var(--sezione) 0; }
.sezione-testa { margin-bottom: var(--s8); }

@media (min-width: 1024px) {
  .sezione-testa { margin-bottom: var(--s12); }
}

/* ── Pulsanti e link ── */
/* Il verde più scuro al passaggio del mouse è un velo che compare (solo opacity) */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--s6);
  padding: var(--s1) var(--s3);
  border-radius: var(--r);
  background: var(--accento);
  color: var(--crema);
  font: var(--peso-medio) var(--t-corpo)/var(--lh-voce) var(--sans);
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--accento-scuro);
  opacity: 0;
  transition: opacity var(--breve) var(--curva);
}
.btn:hover::before { opacity: 1; }
.freccia { width: var(--s2); height: var(--s2); flex-shrink: 0; transition: transform var(--breve) var(--curva); }
.btn:hover .freccia, .link-freccia:hover .freccia { transform: translateX(var(--scarto)); }
.btn-piccolo { min-height: var(--s5); padding: var(--s1) var(--s2); font-size: var(--t-piccolo); }
.btn-chiaro { background: var(--crema); color: var(--accento); }
.btn-chiaro::before { background: var(--superficie); }

/* Link nel testo: una sola forma, la sottolineatura si scurisce al passaggio del mouse */
.link {
  text-decoration: underline;
  text-decoration-thickness: var(--linea);
  text-decoration-color: var(--sottolineatura);
  text-underline-offset: var(--scarto);
}
.link:hover { text-decoration-color: currentColor; }
.link-blocco { display: inline-block; padding: var(--s1) 0; font-weight: var(--peso-medio); }

/* Link con freccia: la riga sotto si disegna al passaggio del mouse */
.link-freccia {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--s6);
  font-weight: var(--peso-medio);
  text-decoration: none;
}
.link-freccia::after {
  content: '';
  position: absolute;
  left: 0; right: var(--s3); bottom: var(--s1);
  height: var(--linea);
  background: currentColor;
  transform: scaleX(.35);
  transform-origin: left;
  transition: transform var(--media) var(--curva);
}
.link-freccia:hover::after { transform: scaleX(1); }

/* Elenco tecnico: ogni voce preceduta da un trattino verde, come le note di un disegno */
.elenco-tratto { display: grid; gap: var(--s1); }
.elenco-tratto li { position: relative; padding-left: var(--s3); }
.elenco-tratto li::before {
  content: '';
  position: absolute;
  left: 0; top: calc(var(--lh-corpo) * .5em);
  width: var(--s2); height: var(--linea);
  background: var(--accento);
}

/* ── Testata ── */
.testata {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--fondo);
  border-bottom: var(--linea) solid var(--bordo);
}
.testata-riga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: var(--testata);
}
/* Logo del kit F: tessere + «CP Studio» + «Lab» nella pillola. Proporzioni (em) dal logo.html del kit.
   Regole del kit: spazio libero intorno pari all'altezza della pillola, almeno 120px di larghezza. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font: var(--peso-forte) var(--logo)/1 var(--sans);
  letter-spacing: var(--ls-logo);
  color: var(--testo);
  text-decoration: none;
  white-space: nowrap;
}
.logo svg { width: 1.3em; height: 1.3em; flex: none; color: var(--accento); }
.logo-lab {
  font-size: .6em;
  letter-spacing: -.01em;
  color: var(--crema);
  background: var(--accento);
  border-radius: var(--r-pillola);
  padding: .222em .5em .25em;
}
.testata .logo { min-height: var(--s3); }
.nav { display: none; gap: var(--s3); }
.nav a {
  position: relative;
  font-size: var(--t-piccolo);
  color: var(--tenue);
  text-decoration: none;
  padding: var(--s1) 0;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--linea);
  background: var(--accento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--media) var(--curva);
}
.nav a:hover, .nav a.corrente { color: var(--testo); }
.nav a.corrente::after { transform: scaleX(1); }

@media (min-width: 768px) {
  .nav { display: flex; }
}
@media (min-width: 1024px) {
  .nav { gap: var(--s4); }
}

/* ── Menu a schermo intero ──
   Con JavaScript (classe .menu-pronto) il bottone «Menu» prende il posto della nav. Il menu è un foglio verde
   che sale dal fondo, come «Il punto», e chiudendo continua a salire. Le voci entrano come le righe del titolo;
   al passaggio del mouse le lettere scorrono e ricompaiono da sotto. Solo transform e opacity. */
.testata-azioni { display: flex; align-items: center; gap: var(--s1); }
.tel-icona { width: var(--s2); height: var(--s2); flex: none; color: var(--accento); }
/* «Contatti diretti»: il telefono dentro il bottone, che porta alla pagina Contatti */
.testata-contatto { gap: var(--s1); white-space: nowrap; }
.testata-contatto .tel-icona { color: currentColor; }
.menu-pronto .nav { display: none; }
.menu-apri, .menu-chiudi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1);
  min-width: var(--s5);
  min-height: var(--s5);
  padding: var(--s1) var(--s2);
  border: var(--linea) solid var(--bordo-forte);
  border-radius: var(--r);
  background: none;
  color: var(--testo);
  font: var(--peso-medio) var(--t-piccolo)/var(--lh-voce) var(--sans);
  cursor: pointer;
}
.menu-apri[hidden] { display: none; }
.menu-apri:hover { border-color: var(--testo); }
/* l'icona: due tratti; nel bottone «Chiudi» si incrociano */
.menu-icona { position: relative; display: block; flex: none; width: var(--s2); height: var(--s1); }
.menu-icona span { position: absolute; left: 0; right: 0; height: var(--linea-forte); border-radius: var(--linea); background: currentColor; }
.menu-icona span:first-child { top: 0; }
.menu-icona span:last-child { bottom: 0; }
.menu-icona-x span:first-child { top: calc(50% - var(--linea)); transform: rotate(45deg); }
.menu-icona-x span:last-child { bottom: calc(50% - var(--linea)); transform: rotate(-45deg); }
/* testo per i lettori di schermo, invisibile a schermo */
.nascosto {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html.menu-aperto { overflow: hidden; }

.menu {
  --sottolineatura: var(--crema-tenue);
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}
.menu.aperto { pointer-events: auto; }
.menu :focus-visible { outline-color: var(--crema); }
/* il foglio è più alto dello schermo del raggio dei suoi angoli: da aperto gli angoli restano fuori, sopra */
.menu-foglio {
  position: absolute;
  left: 0; right: 0;
  top: calc(-1 * var(--r-foglio));
  height: calc(100% + var(--r-foglio));
  display: flex;
  flex-direction: column;
  padding-top: var(--r-foglio);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--r-foglio) var(--r-foglio) 0 0;
  background:
    linear-gradient(var(--griglia-verde) var(--linea), transparent var(--linea)) 0 0 / var(--s5) var(--s5),
    linear-gradient(90deg, var(--griglia-verde) var(--linea), transparent var(--linea)) 0 0 / var(--s5) var(--s5),
    var(--accento);
  color: var(--crema);
  transform: translateY(100%);
}
.menu.aperto .menu-foglio { transform: none; }
.menu.chiude .menu-foglio { transform: translateY(-100%); }
.menu-testa { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: var(--testata); }
.menu .logo { min-height: var(--s3); color: var(--crema); }
.menu .logo svg { color: var(--crema); }
.menu .logo-lab { background: var(--crema); color: var(--accento); }
.menu-chiudi { border-color: var(--linea-verde); color: var(--crema); }
.menu-chiudi:hover { border-color: var(--crema); }
.menu-corpo { flex: 1; display: grid; gap: var(--s6); align-content: center; padding-block: var(--s6); }
.menu-voci { border-top: var(--linea) solid var(--linea-verde); }
.menu-voci a {
  display: grid;
  grid-template-columns: var(--s6) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s1) 0;
  border-bottom: var(--linea) solid var(--linea-verde);
  color: var(--crema);
  text-decoration: none;
}
.menu-num {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font: var(--peso-medio) var(--t-micro)/1 var(--mono);
  letter-spacing: var(--ls-micro);
  font-variant-numeric: tabular-nums;
  color: var(--crema-tenue);
}
/* la sezione in cui vi trovate: una tessera piena accanto al numero */
.menu-voci a[aria-current] .menu-num { color: var(--crema); }
.menu-voci a[aria-current] .menu-num::after { content: ''; width: var(--s1); height: var(--s1); border-radius: calc(var(--r-xs) / 2); background: currentColor; }
.menu-etichetta {
  display: block;
  overflow: hidden;
  font-size: var(--t-menu);
  font-weight: var(--peso-forte);
  line-height: 1.1;
  letter-spacing: var(--ls-titolo);
}
@supports (overflow: clip) {
  .menu-etichetta { overflow: visible clip; }
}
.menu-lettere { display: inline-block; white-space: nowrap; }
.menu-lettere > span { display: inline-block; text-shadow: 0 1.2em currentColor; }
.menu-lato { display: grid; gap: var(--s4); align-content: start; }
.menu-lato .btn { justify-content: space-between; min-height: var(--s7); font-weight: var(--peso-forte); }
.menu-piede { padding-bottom: var(--s4); color: var(--crema-tenue); }

/* Su telefono la testata resta su una riga: «Contatti» (il «diretti» resta per i lettori di schermo),
   bottoni compatti; sotto i 360px l'icona del telefono nel bottone lascia il posto */
@media (max-width: 559px) {
  .contatto-esteso { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 479px) {
  .menu-apri { padding: var(--s1); }
  .testata-contatto { padding: var(--s1) var(--s2); }
}
@media (max-width: 379px) {
  .testata-riga { gap: var(--s1); }
  .testata-contatto { padding: var(--s1); }
}
@media (max-width: 359px) {
  .testata-contatto .tel-icona { display: none; }
}
@media (max-width: 479px) {
  .menu-apri .menu-apri-testo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 1024px) {
  .menu-corpo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: end; }
  .menu-nav { grid-column: 1 / 9; }
  .menu-lato { grid-column: 9 / -1; }
}

/* ══ 1. Apertura ══════════════════════════════════════════════════
   Carta millimetrata, titolo a tutta pagina con una quota sopra «Precisi»,
   e una tavola: un albero tornito che si compone pezzo per pezzo. */
/* Il contenitore dell'apertura e de «Il punto»: l'apertura resta ferma solo fin qui */
.apertura-e-punto { position: relative; }
.apertura { position: relative; z-index: 0; }
.apertura-scena {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--testata));
  padding: var(--s4) 0 var(--s8);
  background:
    linear-gradient(var(--griglia) var(--linea), transparent var(--linea)) 0 0 / var(--s5) var(--s5),
    linear-gradient(90deg, var(--griglia) var(--linea), transparent var(--linea)) 0 0 / var(--s5) var(--s5),
    linear-gradient(var(--griglia-fine) var(--linea), transparent var(--linea)) 0 0 / var(--s1) var(--s1),
    linear-gradient(90deg, var(--griglia-fine) var(--linea), transparent var(--linea)) 0 0 / var(--s1) var(--s1),
    var(--fondo);
}
.apertura-scena > .contenitore { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }
.apertura-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--s3);
  padding-bottom: var(--s2);
  border-bottom: var(--linea) solid var(--bordo);
}
/* le micro-scritte coprono la griglia sotto le lettere */
.apertura-meta .micro { background: var(--fondo); }
.apertura-titolo {
  margin-top: var(--s8);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
/* Ogni riga sale da sotto una linea: la riga taglia ciò che sporge in verticale.
   In orizzontale no, così testi con spaziatura aumentata restano interi. */
.riga { display: block; overflow: hidden; }
@supports (overflow: clip) {
  .riga { overflow: visible clip; }
}
.riga > span { display: inline-block; }
/* «in officina.» va a capo tutto insieme, ma può spezzarsi se non c'è altro modo */
.unita { display: inline-block; }
.riga-quota { padding-top: var(--s5); margin-top: calc(-1 * var(--s5)); }
.riga-leggera { font-weight: var(--peso-leggero); color: var(--accento); }

/* La quota: linea con le punte a 24px dalle maiuscole, linee di riferimento fino alla parola */
.quota { position: relative; display: inline-block; }
.quota::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--quota-cap) - var(--quota-distanza) - var(--scarto));
  height: var(--quota-distanza);
  background: var(--accento);
  -webkit-mask: var(--quota-segni);
  mask: var(--quota-segni);
}
/* Il valore sta sulla linea: in percentuale dell'altezza della parola (interlinea .9 → maiuscole al 10%).
   Decorativo: il testo alternativo vuoto lo tiene fuori dalla lettura del titolo. */
.quota::after {
  content: attr(data-quota);
  content: attr(data-quota) / '';
  position: absolute;
  left: 50%; top: calc(10% - var(--quota-distanza));
  transform: translate(-50%, -50%);
  padding: 0 var(--s1);
  background: var(--fondo);
  font: var(--peso-medio) var(--t-micro)/1 var(--mono);
  letter-spacing: var(--ls-micro);
  color: var(--accento);
  white-space: nowrap;
}

.apertura-piede {
  display: grid;
  gap: var(--s6);
  margin-top: auto;
  padding-top: var(--s6);
}
.apertura-testo { display: grid; gap: var(--s3); justify-items: start; align-content: start; }
.apertura-sotto { max-width: var(--misura-stretta); font-size: var(--t-lead); }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }

/* La tavola. Tratti in unità del disegno (--tratto), scelti per fascia di larghezza perché a schermo restino
   intorno a 1px (quote e asse) e 2px (il pezzo): senza vector-effect le animazioni restano sul compositore */
.tavola {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 236;     /* su telefono il cartiglio resta fuori (slice) */
  overflow: hidden;
  color: var(--accento);
  fill: none;
  stroke: currentColor;
  --tratto: 1.6px;
  stroke-width: var(--tratto);
}
.tavola text {
  fill: currentColor;
  stroke: none;
  font: var(--peso-medio) var(--t-tavola) var(--mono);
  letter-spacing: .04em;
}
.tavola marker path { fill: currentColor; stroke: none; }
.tavola-asse { stroke-dasharray: 16 4 2 4; opacity: .6; }
.tavola-profilo { fill: var(--velo); stroke-width: calc(2 * var(--tratto)); stroke-linejoin: round; }

@media (min-width: 480px) {
  .tavola { --tratto: 1.1px; }
}
@media (min-width: 600px) {
  .tavola { aspect-ratio: 560 / 296; --tratto: .75px; }
}
@media (min-width: 1024px) {
  .apertura-scena { padding-top: clamp(var(--s2), 4svh, var(--s6)); padding-bottom: clamp(var(--s2), 4svh, var(--s8)); }
  .apertura-titolo { margin-top: clamp(var(--s3), 5svh, var(--s8)); }
  .riga-rientro { padding-left: calc((100% - 11 * var(--s3)) / 6 + 2 * var(--s3)); }
  .apertura-piede {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s3);
    padding-top: clamp(var(--s2), 4svh, var(--s8));
  }
  .apertura-testo { grid-column: 1 / 6; padding-top: var(--s2); }
  .tavola { grid-column: 6 / -1; justify-self: end; width: min(100%, 68svh); --tratto: 1px; }
}

/* Il mirino del CAD: due linee e le coordinate, agganciati alla griglia di 8px (main.js).
   Solo con mouse, con JavaScript e senza «riduci movimento»: la regola è in Movimento. */
.mirino { display: none; }

/* Apertura ferma (pagina principale e pagine di settore): alta quanto il suo contenuto, non resta ferma sotto
   la testata e non si allontana sotto il foglio verde. Specificità più alta delle regole in Movimento. */
.apertura-statica .apertura-scena { min-height: 0; padding-bottom: var(--s10); }
.js .apertura.apertura-statica { position: relative; top: auto; }
.js .apertura-statica .apertura-scena { transform: none; will-change: auto; }
/* le righe tagliano in verticale per l'animazione: un po' d'aria sotto, per le lettere con la gamba (g, p) */
.apertura-statica .riga { padding-bottom: .14em; margin-bottom: -.14em; }
/* Pagina principale: titolo su due righe, così la striscia dei settori arriva presto */
.apertura-studio .apertura-titolo { font-size: min(10.5vw, 76px); }
.apertura-studio .apertura-piede { padding-top: var(--s5); }

/* ══ 1b. Striscia dei settori: subito sotto l'apertura, una porta per ogni settore ══ */
.striscia-settori { background: var(--superficie); border-block: var(--linea) solid var(--bordo); }
.striscia-griglia { display: grid; gap: var(--s2) var(--s3); align-items: center; padding-block: var(--s3); }
.striscia-voci { display: grid; gap: var(--s1); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.striscia-voci a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  min-height: var(--s8);
  padding: var(--s2);
  border: var(--linea) solid var(--bordo-forte);
  border-radius: var(--r);
  color: var(--testo);
  font-weight: var(--peso-medio);
  text-decoration: none;
  transition: border-color var(--breve) var(--curva), color var(--breve) var(--curva);
}
.striscia-voci a:hover { border-color: var(--accento); color: var(--accento); }
.striscia-voci a:hover .freccia { transform: translateX(var(--scarto)); }
.striscia-voci small { display: block; margin-top: var(--scarto); font-size: var(--t-piccolo); font-weight: var(--peso-normale); color: var(--tenue); }
@media (min-width: 768px) {
  .striscia-griglia { grid-template-columns: auto minmax(0, 1fr); }
}

/* La riga della manifattura in «Settori» porta anche alla pagina del settore */
.settore-pagina { margin-top: var(--s2); }

/* ══ 2. Il punto ══════════════════════════════════════════════════
   Un foglio verde che sale sull'apertura: è il passaggio crema → verde. */
.punto {
  --sottolineatura: var(--crema-tenue);
  position: relative;
  z-index: 1;
  background: var(--accento);
  color: var(--crema);
  border-radius: var(--r-foglio) var(--r-foglio) 0 0;
  padding: var(--s12) 0 var(--s16);
}
.punto .micro { color: var(--crema-tenue); }
.punto-griglia { display: grid; gap: var(--s6); justify-items: start; }
.sintomi { justify-self: stretch; border-top: var(--linea) solid var(--linea-verde); }
.sintomi li {
  padding: var(--s3) 0;
  border-bottom: var(--linea) solid var(--linea-verde);
  font-size: var(--t-voce);
  font-weight: var(--peso-leggero);
  line-height: var(--lh-voce);
  letter-spacing: var(--ls-voce);
  text-wrap: balance;
}
.punto-chiave {
  max-width: 14em;
  font-size: var(--t-h2);
  font-weight: var(--peso-forte);
  line-height: var(--lh-titolo);
  letter-spacing: var(--ls-titolo);
  text-wrap: balance;
}
.frase { transition: opacity var(--media) var(--curva); }
.punto :focus-visible { outline-color: var(--crema); }

@media (min-width: 1024px) {
  .punto { padding: var(--s16) 0 calc(var(--s16) + var(--s4)); }
  .punto-griglia {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s3);
    row-gap: var(--s8);
  }
  .punto-griglia > * { grid-column: 3 / -1; }
  .punto-griglia > .micro { grid-column: 1 / 3; grid-row: 1; padding-top: var(--s3); }
}

/* ══ 3. Servizi: la distinta, con un esempio per ogni voce ══════
   Posizione, servizio, esempio. Ogni riga si traccia da sinistra quando entra. */
.servizi { border-bottom: var(--linea) solid var(--bordo-forte); }
.servizio {
  position: relative;
  display: grid;
  grid-template-columns: var(--s6) minmax(0, 1fr);
  gap: var(--s5) var(--s2);
  padding: var(--s5) 0 var(--s6);
}
.servizio::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: var(--linea);
  background: var(--bordo-forte);
  transform-origin: left;
  transition: transform var(--lunga) var(--curva-precisa);
}
.servizio-pos {
  font: var(--peso-leggero) var(--t-h3)/var(--lh-voce) var(--mono);
  color: var(--accento);
}
.servizio-testo { display: grid; gap: var(--s2); align-content: start; }
.servizio h3 { font-size: var(--t-voce); line-height: var(--lh-voce); letter-spacing: var(--ls-voce); }
.servizio-testo > p { max-width: var(--misura-stretta); color: var(--tenue); }
.servizio .elenco-tratto { margin-top: var(--s1); }
.servizio .mock { grid-column: 1 / -1; }

@media (min-width: 1024px) {
  .servizio {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s3);
    align-items: start;
    padding: var(--s8) 0;
  }
  .servizio-pos { grid-column: 1 / 2; }
  .servizio-testo { grid-column: 2 / 7; }
  .servizio .mock { grid-column: 7 / -1; }
  /* «Siti tecnici» apre la distinta: l'esempio prende tutta la larghezza */
  .servizio:first-child .servizio-testo { grid-column: 2 / 8; }
  .servizio:first-child .mock { grid-column: 2 / -1; font-size: var(--t-corpo); }
}

/* Gli esempi: piccole schermate fatte in HTML. «Esempio» sta sul bordo, come la legenda di un riquadro */
.mock {
  position: relative;
  padding: var(--s3) var(--s2);
  border: var(--linea) solid var(--bordo-forte);
  border-radius: var(--r);
  background: var(--superficie);
  box-shadow: var(--ombra);
  font-size: var(--t-piccolo);
  line-height: var(--lh-voce);
}
.mock-etichetta {
  position: absolute;
  top: 0; right: var(--s3);
  transform: translateY(-50%);
  padding: 0 var(--s1);
  background: var(--fondo);
}
/* Intestazioni dentro gli esempi: colonne del CRM, titoli del resoconto */
.mock-col {
  font: var(--peso-medio) var(--t-micro)/var(--lh-voce) var(--mono);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--tenue);
}

/* 01 · La pagina di un sito, in una finestra */
.mock-sito { padding: 0; }
.mock-barra {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s2);
  border-bottom: var(--linea) solid var(--bordo);
  border-radius: calc(var(--r) - var(--linea)) calc(var(--r) - var(--linea)) 0 0;
  background: var(--superficie-2);
}
/* i tre punti della finestra */
.mock-barra::before {
  content: '';
  flex: none;
  width: 6px; height: 6px;
  margin-right: 20px;
  border-radius: 50%;
  background: var(--bordo-forte);
  box-shadow: 10px 0 0 var(--bordo-forte), 20px 0 0 var(--bordo-forte);
}
.mock-barra span {
  flex: 1;
  min-width: 0;
  padding: 2px var(--s1);
  border-radius: var(--r-xs);
  background: var(--superficie);
  font: var(--peso-normale) var(--t-micro)/1.6 var(--mono);
  color: var(--tenue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-corpo { display: grid; gap: var(--s3); padding: var(--s3) var(--s2); }
.mock-pagina, .mock-richiesta { display: grid; gap: var(--s2); align-content: start; }
.mock-marchio { display: flex; align-items: center; gap: var(--s1); font-weight: var(--peso-forte); letter-spacing: var(--ls-voce); }
.mock-marchio::before { content: ''; width: 14px; height: 14px; border-radius: 3px; background: var(--testo); }
.mock-titolo { font-size: var(--t-h3); font-weight: var(--peso-forte); letter-spacing: var(--ls-voce); }
.mock-specifiche { border-top: var(--linea) solid var(--bordo); }
.mock-specifiche li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s1) 0;
  border-bottom: var(--linea) solid var(--bordo);
}
.mock-specifiche span {
  font: var(--peso-medio) var(--t-micro)/var(--lh-voce) var(--mono);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--tenue);
}
/* la richiesta d'offerta: due campi, il disegno allegato, l'invio */
.mock-richiesta { gap: var(--s1); padding: var(--s2); border: var(--linea) solid var(--bordo); border-radius: var(--r); background: var(--superficie-2); }
.mock-richiesta .mock-col { margin-bottom: var(--scarto); }
.mock-campo, .mock-file { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s1) var(--s2); border-radius: var(--r-s); }
.mock-campo { border: var(--linea) solid var(--bordo-forte); background: var(--superficie); color: var(--tenue); }
.mock-campo b { font-weight: var(--peso-medio); color: var(--testo); }
.mock-file { justify-content: flex-start; border: var(--linea) dashed var(--bordo-forte); font: var(--peso-normale) var(--t-micro)/var(--lh-voce) var(--mono); }
.mock-file::before { content: ''; flex: none; width: 10px; height: 13px; border: var(--linea) solid currentColor; border-radius: 2px; }
.mock-file small { margin-left: auto; font-size: inherit; color: var(--tenue); }
.mock-btn { padding: var(--s1) var(--s2); border-radius: var(--r-s); background: var(--testo); color: var(--superficie); font-weight: var(--peso-medio); text-align: center; }
.mock-inviata { display: flex; align-items: center; gap: var(--s1); padding-top: var(--scarto); color: var(--accento); font-weight: var(--peso-medio); }
.mock-inviata::before { content: ''; flex: none; width: var(--s2); height: var(--s2); border-radius: var(--r-xs); background: var(--accento); }

/* 02 · Una ricerca e il primo risultato */
.mock-ricerca { display: grid; gap: var(--s3); }
.mock-cerca {
  display: flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--s6);
  padding: 0 var(--s2);
  border: var(--linea) solid var(--bordo-forte);
  border-radius: var(--r-pillola);
  font-size: var(--t-corpo);
}
.mock-cerca::before {
  content: '';
  flex: none;
  width: var(--s2); height: var(--s2);
  background: var(--tenue);
  -webkit-mask: var(--lente) center / contain no-repeat;
  mask: var(--lente) center / contain no-repeat;
}
.mock-cerca span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* il cursore di chi scrive */
.mock-cerca::after { content: ''; flex: none; width: var(--linea-forte); height: 1.2em; margin-left: -6px; background: var(--accento); }
.mock-risultati { display: grid; gap: var(--s3); }
.mock-risultati li { display: grid; gap: var(--s1); }
.mock-primo {
  padding: var(--s2);
  margin: 0 calc(-1 * var(--s1));
  border-radius: var(--r-s);
  background: var(--velo);
}
.mock-url { font: var(--peso-normale) var(--t-micro)/var(--lh-voce) var(--mono); color: var(--tenue); }
.mock-link { font-size: var(--t-lead); font-weight: var(--peso-medio); color: var(--accento); text-decoration: underline; text-decoration-thickness: var(--linea); text-underline-offset: var(--scarto); }
.mock-desc { color: var(--tenue); }
.mock-riga { display: block; height: var(--s1); border-radius: var(--r-xs); background: var(--superficie-2); }
.mock-riga-corta { width: 60%; }

/* 03 · Il CRM: tre colonne, la richiesta confermata arriva in «Ordine» */
.mock-colonne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.mock-colonne > div {
  display: grid;
  align-content: start;
  gap: var(--s1);
  min-height: calc(var(--s16) + var(--s4));
  padding: var(--s1) var(--scarto) var(--scarto);
  border-radius: var(--r-s);
  background: var(--superficie-2);
}
.mock-colonne .mock-col { padding: 0 var(--scarto); }
.mock-carta {
  display: block;
  padding: var(--s1);
  border: var(--linea) solid var(--bordo);
  border-radius: var(--r-s);
  background: var(--superficie);
  font-size: var(--t-micro);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.mock-carta-fatta { border-color: var(--accento); background: var(--accento); color: var(--crema); font-weight: var(--peso-medio); }

/* 04 · Il flusso: tre passi uniti da una linea che si disegna */
.mock-flusso ol { position: relative; display: grid; gap: var(--s3); }
.mock-flusso ol::before, .mock-flusso ol::after {
  content: '';
  position: absolute;
  left: calc(var(--s2) - var(--linea)); top: var(--s2); bottom: var(--s2);
  width: var(--linea-forte);
  background: var(--bordo);
}
.mock-flusso ol::after { background: var(--accento); transform-origin: top; }
.mock-flusso li { position: relative; z-index: 1; display: grid; grid-template-columns: var(--s4) minmax(0, 1fr); gap: var(--s2); align-items: center; }
.mock-passo {
  display: grid;
  place-items: center;
  width: var(--s4); height: var(--s4);
  border: var(--linea-forte) solid var(--accento);
  border-radius: var(--r-s);
  background: var(--superficie);
  font: var(--peso-medio) var(--t-piccolo)/1 var(--mono);
  color: var(--accento);
}
.mock-flusso li:last-child .mock-passo { background: var(--accento); color: var(--crema); }
.mock-nota {
  display: block;
  margin-top: 2px;
  font: var(--peso-normale) var(--t-micro)/var(--lh-voce) var(--mono);
  color: var(--tenue);
}

/* 05 · Il resoconto del mese */
.mock-resoconto { display: grid; gap: var(--s2); }
.mock-resoconto ul { border-top: var(--linea) solid var(--bordo); }
.mock-resoconto li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) 0;
  border-bottom: var(--linea) solid var(--bordo);
}
.mock-resoconto li span {
  padding: 2px var(--s1);
  border-radius: var(--r-pillola);
  background: var(--velo);
  font: var(--peso-medio) var(--t-micro)/var(--lh-voce) var(--mono);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--accento);
}
.mock-resoconto .mock-col + ul, .mock-resoconto ul + .mock-col { margin-top: var(--s1); }
.mock-barre {
  display: flex;
  align-items: flex-end;
  gap: var(--s1);
  height: var(--s12);
  border-bottom: var(--linea) solid var(--bordo-forte);
}
.mock-barre span {
  flex: 1;
  height: 40%;
  border-radius: var(--r-xs) var(--r-xs) 0 0;
  background: var(--velo-forte);
  transform-origin: bottom;
}
.mock-barre span:nth-child(1) { height: 32%; }
.mock-barre span:nth-child(2) { height: 44%; }
.mock-barre span:nth-child(3) { height: 40%; }
.mock-barre span:nth-child(4) { height: 58%; }
.mock-barre span:nth-child(5) { height: 72%; }
.mock-barre span:nth-child(6) { height: 92%; background: var(--accento); }

@media (min-width: 768px) {
  .mock { padding: var(--s4); }
  .mock-sito { padding: 0; }
  .mock-corpo { padding: var(--s4); }
  .mock-sito .mock-corpo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s4); }
  .mock-colonne { gap: var(--s2); }
  .mock-colonne > div { padding: var(--s1); }
  .mock-carta { font-size: var(--t-piccolo); }
}

/* ══ 4. Settori ═══════════════════════════════════════════════════
   Prima quello che cerchiamo in ogni azienda (A-D, come le revisioni di una tavola), poi i settori in distinta.
   Il primo è la manifattura, con le sue lavorazioni in tessere verdi che portano alle loro pagine. */
.risultati-titolo { margin-bottom: var(--s3); }
.risultati { display: grid; gap: 0 var(--s3); border-top: var(--linea) solid var(--bordo-forte); }
.risultati li { display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); gap: var(--s1) var(--s2); align-items: baseline; padding: var(--s3) 0; border-bottom: var(--linea) solid var(--bordo-forte); }
.risultato-lettera { grid-row: span 2; font: var(--peso-leggero) var(--t-h3)/1 var(--mono); color: var(--accento); }
.risultati h3 { font-size: var(--t-h3); line-height: var(--lh-voce); letter-spacing: var(--ls-voce); }
.risultati p { color: var(--tenue); }
.settori-lista { margin-top: var(--s12); border-bottom: var(--linea) solid var(--bordo-forte); }
.settore-riga { display: grid; gap: var(--s4); padding: var(--s6) 0; border-top: var(--linea) solid var(--bordo-forte); }
.settore-intesta { display: grid; grid-template-columns: var(--s8) minmax(0, 1fr); gap: var(--s2); align-items: baseline; }
.settore-num { font: var(--peso-leggero) var(--t-voce)/var(--lh-voce) var(--mono); color: var(--accento); }
.settore-intesta h3 { font-size: var(--t-voce); line-height: var(--lh-voce); letter-spacing: var(--ls-titolo); }
.settore-intesta p { margin-top: var(--s1); max-width: var(--misura-stretta); color: var(--tenue); }
.settore-servizi { display: flex; flex-wrap: wrap; gap: var(--s1); }
.settore-servizi li { padding: var(--scarto) var(--s2); border: var(--linea) solid var(--bordo-forte); border-radius: var(--r-pillola); font-size: var(--t-piccolo); }
.settore-lavorazioni { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.settore-lav { display: grid; gap: var(--s1); color: var(--testo); text-decoration: none; }
.settore-lav-nome { display: inline-flex; align-items: center; gap: var(--s1); font-weight: var(--peso-medio); }
.settore-lav:hover .freccia { transform: translateX(var(--scarto)); }
.pannello-mini { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--accento); }
.pannello-mini .trama { opacity: .4; }
.mini-disegno { position: absolute; inset: var(--s1); width: calc(100% - 2 * var(--s1)); height: calc(100% - 2 * var(--s1)); --tratto: 2.2px; }
/* su telefono le tessere sono piccole: si vede il pezzo, le quote no */
.mini-disegno use + use { display: none; }
.settore-aperto { border-top-style: dashed; }
.settore-aperto .link-freccia { justify-self: start; }
.servizio-testo .link-freccia { justify-self: start; }

/* Le trame delle lavorazioni, sotto i disegni */
.trama { position: absolute; inset: 0; }
.trama-tornitura {
  background: repeating-radial-gradient(circle at 78% 70%, var(--trama) 0 1px, transparent 1.5px 9px);
}
.trama-lamiera {
  background:
    radial-gradient(circle, var(--trama) 0 3.5px, transparent 4px) 0 0 / var(--s3) var(--s3),
    radial-gradient(circle, var(--trama) 0 3.5px, transparent 4px) 12px 12px / var(--s3) var(--s3);
}
.trama-stampaggio {
  background: var(--trama);
  -webkit-mask: var(--motivo-tessera) 0 0 / var(--s7) var(--s7) repeat;
  mask: var(--motivo-tessera) 0 0 / var(--s7) var(--s7) repeat;
}
.trama-carpenteria {
  background: repeating-linear-gradient(45deg, var(--trama) 0 1px, transparent 1px 12px);
}

/* I disegni delle lavorazioni: crema su verde, stessi tratti della tavola (pezzo 2px, quote 1px).
   Sono <symbol> in index.html: le classi qui sotto valgono anche dentro <use>; colore e corpo arrivano da fuori. */
.definizioni { position: absolute; width: 0; height: 0; overflow: hidden; }
.disegno-lavorazione {
  display: block;
  overflow: visible;
  color: var(--crema);
  fill: none;
  stroke: currentColor;
  --tratto: 1.5px;                             /* unità del disegno: a 160px di altezza è 1px a schermo */
  stroke-width: var(--tratto);
  font: var(--peso-medio) 18px var(--mono);   /* unità del disegno: a 160px di altezza sono 12px a schermo */
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.d-sezione { fill: url(#tratteggio); stroke-width: calc(2 * var(--tratto)); stroke-linejoin: round; }
.d-sezione-inversa { fill: url(#tratteggio-inverso); }
.d-sottile { fill: currentColor; stroke-linejoin: round; }
.d-profilo { stroke-width: calc(2 * var(--tratto)); }
.d-asse { stroke-dasharray: 12 3 2 3; opacity: .7; }
.d-punto, .d-testo { fill: currentColor; stroke: none; }
.tratto { stroke: var(--crema); stroke-width: var(--linea); opacity: .55; }
.punta-chiara { fill: var(--crema); }

@media (min-width: 768px) {
  .risultati { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mini-disegno { inset: var(--s2); width: calc(100% - 2 * var(--s2)); height: calc(100% - 2 * var(--s2)); font-size: 12px; --tratto: 1px; }
  .mini-disegno use + use { display: inline; }
}
@media (min-width: 1024px) {
  .risultati { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .risultati li { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .risultato-lettera { grid-row: auto; font-size: var(--t-voce); }
  .settore-riga { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: start; }
  .settore-intesta { grid-column: 1 / 8; }
  .settore-servizi { grid-column: 8 / -1; justify-content: flex-end; padding-top: var(--s1); }
  .settore-lavorazioni { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mini-disegno { font-size: 15px; --tratto: 1.25px; }
  .settore-aperto .link-freccia { grid-column: 8 / -1; justify-self: end; }
}

/* ══ 5. Metodo: il ciclo di lavoro ═══════════════════════════════
   Fasi 10-20-30-40: la linea si disegna con lo scorrimento e accende le fasi.
   Su telefono la linea scende; su schermo largo le fasi stanno in fila e la linea corre.
   Senza movimento (e in stampa) la linea è intera e le fasi tutte piene. */
.metodo {
  background: var(--superficie);
  border-top: var(--linea) solid var(--bordo);
  border-bottom: var(--linea) solid var(--bordo);
}
.ciclo { position: relative; display: grid; gap: var(--s6); padding-left: var(--s8); }
.ciclo::before, .ciclo::after {
  content: '';
  position: absolute;
  left: calc(var(--s2) - var(--linea)); top: var(--s2); bottom: var(--s2);
  width: var(--linea-forte);
}
.ciclo::before { background: var(--bordo); }
.ciclo::after { background: var(--accento); transform-origin: top; }
.fase { position: relative; display: grid; gap: var(--s1); align-content: start; }
/* Il segno della fase: una tessera che si riempie quando la linea la raggiunge */
.fase-segno {
  position: absolute;
  left: calc(-1 * var(--s8)); top: var(--s1);
  z-index: 1;
  width: var(--s4); height: var(--s4);
  border: var(--linea-forte) solid var(--accento);
  border-radius: var(--r-s);
  background: var(--superficie);
}
.fase-segno::after {
  content: '';
  position: absolute;
  inset: var(--s1);
  margin: calc(-1 * var(--linea-forte));
  border-radius: var(--r-xs);
  background: var(--accento);
  transition: transform var(--media) var(--curva), opacity var(--media) var(--curva);
}
.fase-num {
  font-family: var(--mono);
  font-size: var(--t-cifra);
  font-weight: var(--peso-leggero);
  line-height: var(--lh-cifra);
  letter-spacing: var(--ls-titolo);
  color: var(--accento);
  font-variant-numeric: tabular-nums;
}
.fase h3 { margin-top: var(--s2); font-size: var(--t-h3); line-height: var(--lh-voce); letter-spacing: var(--ls-voce); }
.fase p { max-width: var(--misura-stretta); color: var(--tenue); }

@media (min-width: 1024px) {
  .ciclo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); padding: var(--s8) 0 0; }
  .ciclo::before, .ciclo::after {
    left: 0; right: 0; top: calc(var(--s2) - var(--linea)); bottom: auto;
    width: auto; height: var(--linea-forte);
  }
  .ciclo::after { transform-origin: left; }
  .fase-segno { left: 0; top: calc(-1 * var(--s8)); }
}

/* ══ 5b. Dati di targa ════════════════════════════════════════════
   Come la targa di una macchina: poche cifre, tutte verificabili. Mai percentuali o risultati inventati.
   Su schermo largo la tessera dei servizi è alta due righe, verde, con il disegno di una flangia. */
.targa { display: grid; gap: var(--s2); }
.dato {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s4) var(--s3);
  border: var(--linea) solid var(--bordo-forte);
  border-radius: var(--r);
  background: var(--superficie);
}
.dato-valore {
  font: var(--peso-leggero) var(--t-cifra)/var(--lh-cifra) var(--mono);
  letter-spacing: var(--ls-titolo);
  font-variant-numeric: tabular-nums;
  color: var(--accento);
}
.dato-unita { margin-top: var(--s1); }
.dato p { max-width: 22em; color: var(--tenue); }
.dato-grande { overflow: hidden; border-color: var(--accento); background: var(--accento); color: var(--crema); }
.dato-grande .dato-valore { color: var(--crema); }
.dato-grande :is(.micro, p) { color: var(--crema-tenue); }
.dato-disegno { width: min(100%, 280px); height: auto; margin: var(--s4) 0 0 auto; font-size: 10px; --tratto: .8px; }
@media (min-width: 640px) {
  .targa { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dato-grande { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .targa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dato-grande { grid-column: 3; grid-row: 1 / 3; }
  .dato-disegno { width: 100%; margin-top: auto; }
  .targa-buyer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Pagine di settore: dati di mercato, sempre con la fonte sotto; le lavorazioni in quattro colonne */
.fonte-dati { margin-top: var(--s3); }
@media (min-width: 1024px) {
  .manifattura-lavorazioni { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ══ 6. Lo studio ═════════════════════════════════════════════════
   Il marchio che si spiega: la tessera vuota entra nel suo incastro. */
.chi-griglia { display: grid; gap: var(--s8); }
.chi-testo > p:not(.micro) { margin-top: var(--s3); max-width: var(--misura-stretta); font-size: var(--t-lead); color: var(--tenue); }
.chi-simbolo { display: grid; justify-items: center; }
.simbolo-componibile {
  width: min(100%, calc(2 * var(--s16) + var(--s3)));   /* 280px: il marchio misura 160px */
  height: auto;
  color: var(--accento);
  overflow: visible;
  font: var(--peso-medio) 8px var(--mono);                /* unità del disegno: 12px a schermo */
  --tratto: .67px;                                        /* 1px a schermo */
  letter-spacing: var(--ls-micro);
}
/* I richiami: linea sottile, punto sul pezzo, etichetta come nella tavola */
.richiamo path { fill: none; stroke: currentColor; stroke-width: var(--tratto); }
.richiamo circle { fill: var(--fondo); stroke: currentColor; stroke-width: var(--tratto); }
.richiamo text { fill: currentColor; }
/* La qualità, come una distinta: tre voci numerate */
.qualita { margin-top: var(--s5); border-bottom: var(--linea) solid var(--bordo-forte); }
.qualita li { display: grid; grid-template-columns: var(--s6) minmax(0, 1fr); gap: var(--s1) var(--s2); align-items: baseline; padding: var(--s3) 0; border-top: var(--linea) solid var(--bordo-forte); }
.qualita-num { grid-row: span 2; font: var(--peso-medio) var(--t-micro)/1 var(--mono); letter-spacing: var(--ls-micro); color: var(--accento); }
.qualita h3 { font-size: var(--t-h3); line-height: var(--lh-voce); letter-spacing: var(--ls-voce); }
.qualita p { max-width: var(--misura-stretta); color: var(--tenue); }
.chi-firma { margin-top: var(--s4); }
.chi-azioni { margin-top: var(--s4); }

@media (min-width: 1024px) {
  .chi-griglia {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s3);
    align-items: center;
  }
  .chi-testo { grid-column: 1 / 7; }
  .chi-simbolo { grid-column: 8 / -1; }
  .simbolo-componibile { width: min(100%, calc(3 * var(--s16) + var(--s7))); font-size: 5.2px; --tratto: .43px; }   /* 440px */
}

/* ══ 6b. Recensioni ══════════════════════════════════════════════
   Solo clienti veri, con il loro permesso. In alto i loghi su una striscia del foglio: due righe che corrono
   da un bordo all'altro dello schermo e un crocino dove le righe si incontrano. Sotto, una scheda per cliente:
   le sue parole, poi un piccolo cartiglio con firma e azienda (come quello del piè di pagina). */
.recensioni { overflow: hidden; overflow: clip; }       /* le righe escono dal contenitore, non dalla pagina */
.clienti-cornice { position: relative; }
.clienti-cornice::before, .clienti-cornice::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: 50%;
  width: 100vw;
  height: var(--linea);
  margin-left: -50vw;
  background: var(--bordo-forte);
}
.clienti-cornice::before { top: 0; }
.clienti-cornice::after { bottom: 0; }
.clienti {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--linea);                                     /* le righe tra le celle sono lo spazio tra le celle */
  border-inline: var(--linea) solid var(--bordo-forte);
  background: var(--bordo-forte);
}
.cliente {
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--s16);
  padding: var(--s4) var(--s3);
  background: var(--superficie);
  text-align: center;
}
.cliente:nth-child(even) { background: var(--superficie-2); }
.cliente:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* un logo da solo nell'ultima riga la occupa tutta */
.cliente img { width: auto; max-width: 100%; height: auto; max-height: var(--s5); filter: grayscale(1); mix-blend-mode: multiply; }
/* I crocini: 25px con il tratto da 1px al centro, che cade proprio sulla riga (sporge di 12px, più la riga
   a sinistra della cella). Ogni cella ha i suoi due a sinistra, la striscia i due a destra */
.clienti { --crocino: calc(var(--s3) + var(--linea)); --sporge: calc(var(--s3) / -2); }
.cliente::before, .cliente::after, .clienti::before, .clienti::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: var(--crocino);
  height: var(--crocino);
  background:
    linear-gradient(var(--accento) 0 0) center / var(--linea) 100% no-repeat,
    linear-gradient(var(--accento) 0 0) center / 100% var(--linea) no-repeat;
  pointer-events: none;
}
.cliente::before { left: calc(var(--sporge) - var(--linea)); top: var(--sporge); }
.cliente::after { left: calc(var(--sporge) - var(--linea)); bottom: var(--sporge); }
.clienti::before { right: calc(var(--sporge) - var(--linea)); top: var(--sporge); }
.clienti::after { right: calc(var(--sporge) - var(--linea)); bottom: var(--sporge); }

/* Loghi d'esempio (aziende inventate): un segno e il nome, in grigio come i loghi veri */
.logo-esempio { display: inline-flex; align-items: center; gap: var(--s1); font-size: var(--t-lead); font-weight: var(--peso-forte); letter-spacing: var(--ls-voce); color: var(--tenue); }
.logo-esempio > span { flex: none; width: 18px; height: 18px; border: var(--scarto) solid currentColor; }
.segno-quadro { border-radius: 3px; }
.segno-tondo { border-radius: 50%; }

.recensioni-elenco { display: grid; gap: var(--s5) var(--s3); margin-top: var(--s8); }
.recensione {
  position: relative;
  display: flex;
  flex-direction: column;
  border: var(--linea) solid var(--bordo-forte);
  border-radius: var(--r);
  background: var(--superficie);
}
.recensione-testo { flex: 1; padding: var(--s3) var(--s3) var(--s4); }
.recensione-virgolette { display: block; font: var(--peso-leggero) var(--t-voce)/1 var(--sans); color: var(--accento); }
.recensione-testo p { max-width: var(--misura); margin-top: var(--s1); font-size: var(--t-citazione); line-height: var(--lh-citazione); letter-spacing: -.01em; }
.recensione-testo strong { font-weight: var(--peso-forte); color: var(--accento); }
/* Chi parla: le iniziali in una tessera verde (come quelle del marchio), nome e ruolo */
.recensione-persona { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3) var(--s3); }
.recensione-sigla {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--s6);
  height: var(--s6);
  border-radius: var(--r);
  background: var(--accento);
  color: var(--crema);
  font: var(--peso-medio) var(--t-piccolo)/1 var(--mono);
  letter-spacing: var(--ls-micro);
}
.recensione-nome { display: block; font-weight: var(--peso-forte); }
.recensione-ruolo { display: block; font-size: var(--t-piccolo); color: var(--tenue); }
.recensione-firma { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--linea) solid var(--accento); }
.recensione-firma div { padding: var(--s2) var(--s3); }
.recensione-firma div + div { border-left: var(--linea) solid var(--bordo-forte); }
.recensione-firma dt { margin-bottom: var(--s1); }
.recensione-firma dd { font-size: var(--t-piccolo); font-weight: var(--peso-medio); overflow-wrap: anywhere; }

@media (min-width: 768px) {
  .recensioni-elenco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Schede affiancate: testo, persona e cartiglio restano allineati anche se una scheda va a capo più dell'altra */
@supports (grid-template-rows: subgrid) {
  .recensione { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
  .recensione figcaption { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
@media (min-width: 1024px) {
  .cliente { min-height: calc(var(--s16) + var(--s4)); }
  .recensione-testo { padding: var(--s4) var(--s5) var(--s5); }
  .recensione-persona { padding: 0 var(--s5) var(--s4); }
  .recensione-firma div { padding: var(--s2) var(--s5); }
}

/* ══ 7. Domande: tutte aperte, a tutta larghezza ════════════════ */
.domande-titolo { margin-bottom: var(--s3); }
.domande { display: grid; column-gap: var(--s3); border-top: var(--linea) solid var(--bordo-forte); counter-reset: nota; }
.domanda {
  display: grid;
  gap: var(--s1);
  align-content: start;
  padding: var(--s4) 0;
  border-bottom: var(--linea) solid var(--bordo-forte);
}
.domanda::before {
  counter-increment: nota;
  content: 'N.' counter(nota);
  content: 'N.' counter(nota) / '';
  font: var(--peso-medio) var(--t-micro)/var(--lh-voce) var(--mono);
  letter-spacing: var(--ls-micro);
  color: var(--accento);
}
.domanda h3 { font-size: var(--t-h3); line-height: var(--lh-voce); letter-spacing: var(--ls-voce); text-wrap: balance; }
.domanda p { max-width: var(--misura-stretta); color: var(--tenue); }

@media (min-width: 768px) {
  .domande { grid-template-columns: 1fr 1fr; }
}

/* ══ 7b. Calibro passa / non passa ══════════════════════════════
   Otto domande sì/no, il comparatore segna quante passano, il consiglio dice il primo lavoro.
   Tutto nella pagina: non si invia niente. */
.calibro { background: var(--superficie); border-top: var(--linea) solid var(--bordo); }
.calibro-griglia { display: grid; gap: var(--s6); }
.calibro-domande { counter-reset: domanda; border-top: var(--linea) solid var(--bordo-forte); }
.calibro-domande li { border-bottom: var(--linea) solid var(--bordo-forte); }
.calibro-domanda {
  display: grid;
  gap: var(--s2);
  min-width: 0;
  margin: 0;
  padding: var(--s3) 0;
  border: 0;
}
.calibro-domanda legend { float: left; width: 100%; padding: 0; font-size: var(--t-lead); line-height: var(--lh-voce); }
.calibro-num { margin-right: var(--s2); font: var(--peso-medio) var(--t-micro)/1 var(--mono); letter-spacing: var(--ls-micro); color: var(--accento); }
.calibro-scelte { display: flex; gap: var(--s1); clear: both; }
.calibro-scelte label {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--s5);
  padding: var(--s1) var(--s2);
  border: var(--linea) solid var(--bordo-forte);
  border-radius: var(--r);
  cursor: pointer;
}
.calibro-scelte label:hover { border-color: var(--testo); }
/* il pallino: un cerchio che si riempie quando è scelto */
.calibro-scelte input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: var(--s2); height: var(--s2);
  margin: 0;
  border: var(--linea-forte) solid currentColor;
  border-radius: 50%;
  color: inherit;
  cursor: pointer;
}
.calibro-scelte input::before {
  content: '';
  width: var(--s1); height: var(--s1);
  border-radius: 50%;
  background: currentColor;
  transform: scale(0);
  transition: transform var(--breve) var(--curva);
}
.calibro-scelte input:checked::before { transform: scale(1); }
.calibro-scelte label:has(:checked) { border-color: var(--accento); background: var(--accento); color: var(--crema); }
@supports selector(:has(*)) {
  .calibro-scelte input:focus-visible { outline: none; }
  .calibro-scelte label:has(:focus-visible) { outline: var(--linea-forte) solid var(--accento); outline-offset: var(--fuoco-distanza); }
}
@media (forced-colors: active) {
  .calibro-scelte input { -webkit-appearance: auto; appearance: auto; }
}
.calibro-esito { display: grid; gap: var(--s3); justify-items: start; align-content: start; }
.comparatore {
  width: min(100%, 320px);
  height: auto;
  overflow: visible;
  color: var(--accento);
  fill: none;
  stroke: currentColor;
  font: var(--peso-medio) 11px var(--mono);
}
.comparatore text { fill: var(--tenue); stroke: none; }
.comparatore-arco { stroke: var(--bordo-forte); stroke-width: 6; }
.comparatore-passa { stroke-width: 6; }
.comparatore-tacche { stroke-width: 1.5; }
.lancetta { stroke: var(--testo); stroke-width: 3; stroke-linecap: round; transform-origin: 100px 100px; transform: rotate(var(--angolo, 0deg)); }
.comparatore-perno { fill: var(--testo); stroke: none; }
.calibro-punteggio { font-size: var(--t-h3); font-weight: var(--peso-forte); line-height: var(--lh-voce); letter-spacing: var(--ls-voce); }
.calibro-consiglio { max-width: var(--misura-stretta); color: var(--tenue); }
.calibro-consiglio:empty { display: none; }

@media (min-width: 1024px) {
  .calibro-griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); align-items: start; }
  .calibro-domande { grid-column: 1 / 8; }
  .calibro-esito { grid-column: 9 / -1; }
}

/* ══ 8. Contatto ══════════════════════════════════════════════════
   Il secondo foglio verde. Su telefono: titolo, modulo, poi i recapiti. */
.contatto {
  --sottolineatura: var(--crema-tenue);
  background: var(--accento);
  color: var(--crema);
  border-radius: var(--r-foglio) var(--r-foglio) 0 0;
  padding: var(--s12) 0;
}
.contatto .micro { color: var(--crema-tenue); }
.contatto :focus-visible { outline-color: var(--crema); }
.contatto-griglia { display: grid; gap: var(--s8); }
.contatto-testa > p:not(.micro) { margin-top: var(--s3); font-size: var(--t-lead); color: var(--crema-tenue); }

/* Modulo di richiesta: due campi e le scelte, nessun JavaScript (i messaggi d'errore con il voi li aggiunge main.js) */
.modulo { display: grid; gap: var(--s3); align-content: start; }
.campo { display: grid; gap: var(--s1); }
.campo label, .scelte legend { font-size: var(--t-piccolo); font-weight: var(--peso-medio); }
.campo input {
  width: 100%;
  min-height: var(--s7);
  padding: var(--s2);
  border: var(--linea) solid var(--crema-tenue);
  border-radius: var(--r);
  background: transparent;
  color: var(--crema);
  font: var(--peso-normale) var(--t-corpo)/var(--lh-voce) var(--sans);
}
.campo input:focus { border-color: var(--crema); }
/* il completamento automatico del browser non deve riempire il campo di bianco */
.campo input:-webkit-autofill { -webkit-text-fill-color: var(--crema); caret-color: var(--crema); box-shadow: inset 0 0 0 var(--s16) var(--accento); }
.campo-nota { margin-left: var(--s1); font-weight: var(--peso-normale); color: var(--crema-tenue); }
/* Le scelte: tessere da spuntare, piene di crema quando sono scelte */
.scelte { min-width: 0; margin: 0; padding: 0; border: 0; }
.scelte legend { padding: 0; margin-bottom: var(--s1); }
.scelte-opzioni { display: flex; flex-wrap: wrap; gap: var(--s1); }
.scelte label {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  min-height: var(--s6);
  padding: var(--s1) var(--s2);
  border: var(--linea) solid var(--linea-verde);
  border-radius: var(--r);
  font-size: var(--t-piccolo);
  cursor: pointer;
}
/* la casella è una piccola tessera, come il segno delle fasi: si riempie quando è scelta */
.scelte input {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  place-content: center;
  flex: none;
  width: var(--s2); height: var(--s2);
  margin: 0;
  border: var(--linea-forte) solid currentColor;
  border-radius: var(--r-xs);
  color: inherit;
  cursor: pointer;
}
.scelte input::before {
  content: '';
  width: var(--s1); height: var(--s1);
  border-radius: calc(var(--r-xs) / 2);
  background: currentColor;
  transform: scale(0);
  transition: transform var(--breve) var(--curva);
}
.scelte input:checked::before { transform: scale(1); }
.scelte label:hover { border-color: var(--crema-tenue); }
.scelte label:has(:checked) { border-color: var(--crema); background: var(--crema); color: var(--accento); }
@supports selector(:has(*)) {
  .scelte input:focus-visible { outline: none; }
  .scelte label:has(:focus-visible) { outline: var(--linea-forte) solid var(--crema); outline-offset: var(--fuoco-distanza); }
}
@media (forced-colors: active) {
  .scelte input { -webkit-appearance: auto; appearance: auto; }
}
.modulo .btn { justify-content: space-between; width: 100%; min-height: var(--s7); font-weight: var(--peso-forte); }
.modulo-nota { font-size: var(--t-piccolo); color: var(--crema-tenue); }

.recapiti { border-top: var(--linea) solid var(--linea-verde); }
.recapiti div {
  display: grid;
  grid-template-columns: var(--s16) minmax(0, 1fr);
  gap: var(--s2);
  align-items: center;
  border-bottom: var(--linea) solid var(--linea-verde);
}
.recapiti dt { color: var(--crema-tenue); }
.recapiti dd { overflow-wrap: anywhere; }
/* Da 560px i nomi dei soci accanto ai numeri stanno su una riga; su telefono vanno a capo, nome sopra cognome */
@media (min-width: 560px) {
  .recapiti div { grid-template-columns: calc(var(--s16) + var(--s6)) minmax(0, 1fr); }
}

@media (min-width: 1024px) {
  .contatto { padding: var(--s16) 0; }
  .contatto-griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); }
  .contatto-testa { grid-column: 1 / 7; grid-row: 1; }
  .contatto-griglia > .recapiti { grid-column: 1 / 7; grid-row: 2; align-self: start; }
  .modulo { grid-column: 8 / -1; grid-row: 1 / 3; }
}

/* ══ Pagina Contatti ═══════════════════════════════════════════════
   Il contatto diretto subito in alto, sul foglio verde che scende dalla testata; poi il marchio e lo studio. */
.contatti-diretto { border-radius: 0 0 var(--r-foglio) var(--r-foglio); }
.contatti-azioni, .contatti-fine { margin-top: var(--s5); }
/* Il contatto diretto si vede subito: niente ingresso animato, anche con .moto */
.moto .contatti-diretto .contatto-testa:not(.visibile) { opacity: 1; transform: none; }
@media (min-width: 1024px) {
  .contatti-diretto .contatto-griglia > .recapiti { grid-column: 8 / -1; grid-row: 1; align-self: end; }
}

/* ══ Pagina Lo studio ══════════════════════════════════════════════
   Perché «studio»: il cartiglio dello studio accanto al titolo, i principi come una distinta,
   il marchio disegnato in tavola con le quote, i soci, gli strumenti e gli impegni in cifre. */
/* La scheda dello studio: come una scheda tecnica, testata verde e voci in righe */
.scheda-studio {
  align-self: end;
  overflow: hidden;
  border: var(--linea) solid var(--bordo-forte);
  border-radius: var(--r);
  background: var(--superficie);
}
.scheda-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s1) var(--s2);
  padding: var(--s3);
  background: var(--accento);
  color: var(--crema);
}
.scheda-testa .micro { color: var(--crema-tenue); }
.scheda-nome { font-size: var(--t-h3); font-weight: var(--peso-forte); letter-spacing: var(--ls-voce); }
.scheda-voci div {
  display: grid;
  grid-template-columns: calc(var(--s10) + var(--s2)) minmax(0, 1fr);
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s2) var(--s3);
  border-top: var(--linea) solid var(--bordo);
}
.scheda-voci div:first-child { border-top: 0; }
.scheda-voci dd { font-size: var(--t-piccolo); font-weight: var(--peso-medio); overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .studio-piede .apertura-testo { grid-column: 1 / 7; }
  .scheda-studio { grid-column: 8 / -1; }
}

/* I principi: quattro voci numerate, due per riga da tablet */
.principi { display: grid; gap: 0 var(--s4); border-top: var(--linea) solid var(--bordo-forte); }
.principio { display: grid; grid-template-columns: var(--s8) minmax(0, 1fr); gap: var(--s1) var(--s2); align-content: start; padding: var(--s4) 0; border-bottom: var(--linea) solid var(--bordo-forte); }
.principio-num { grid-row: span 2; font: var(--peso-leggero) var(--t-voce)/1 var(--sans); letter-spacing: var(--ls-titolo); color: var(--accento); }
.principio h3 { font-size: var(--t-h3); line-height: var(--lh-voce); letter-spacing: var(--ls-voce); }
.principio p { max-width: var(--misura-stretta); color: var(--tenue); }
@media (min-width: 768px) {
  .principi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Il marchio in tavola: il simbolo del kit con quote, richiami e cartiglio (tratti in unità del disegno) */
.tavola-marchio {
  width: min(100%, 520px);
  height: auto;
  overflow: visible;
  color: var(--accento);
  font: var(--peso-medio) 7px var(--mono);
  letter-spacing: var(--ls-micro);
  --tratto: .6px;
}
.tm-piena { fill: currentColor; }
.tm-aperta { fill: none; stroke: currentColor; stroke-width: 6; }
.tm-riferimento, .tm-quota { fill: none; stroke: currentColor; stroke-width: var(--tratto); }
.tm-riferimento { stroke-dasharray: 3 2; opacity: .6; }
.tm-testo { fill: currentColor; }
.tavola-marchio marker path { fill: currentColor; }
.tm-cartiglio rect, .tm-cartiglio path { fill: none; stroke: currentColor; stroke-width: var(--tratto); }
.tm-cartiglio text { fill: currentColor; }

/* I soci: la tessera con le iniziali, come le tessere del marchio */
.soci { display: grid; gap: var(--s2); }
.socio { display: grid; grid-template-columns: var(--s10) minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s4); border: var(--linea) solid var(--bordo-forte); border-radius: var(--r); background: var(--superficie); }
.socio-iniziali { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r); background: var(--accento); color: var(--crema); font: var(--peso-forte) var(--t-h3)/1 var(--sans); letter-spacing: var(--ls-voce); }
.socio-testo { display: grid; gap: var(--s1); justify-items: start; }
.socio-testo h3 { font-size: var(--t-h3); line-height: var(--lh-voce); letter-spacing: var(--ls-voce); }
.socio-testo p:not(.micro) { color: var(--tenue); }
@media (min-width: 768px) {
  .soci { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Gli impegni: quattro cifre, due per riga e poi quattro in fila */
@media (min-width: 1024px) {
  .targa-impegni { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* La chiusura dello studio: i contatti accanto al titolo; il titolo si vede sempre, senza ingresso animato */
.moto .studio-chiusura .contatto-testa:not(.visibile) { opacity: 1; transform: none; }
@media (min-width: 1024px) {
  .studio-chiusura .contatto-griglia > .recapiti { grid-column: 8 / -1; grid-row: 1; align-self: end; }
}

/* ══ 9. Piè di pagina: un cartiglio ═════════════════════════════ */
.piede { padding: var(--s8) 0 var(--s6); }
.piede-riga {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s3);
}
.piede-sotto { margin-top: var(--s2); font-size: var(--t-piccolo); color: var(--tenue); }
.cartiglio-piede {
  margin-top: var(--s6);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: var(--linea) solid var(--accento);
}
.cartiglio-piede div { padding: var(--s2) var(--s2) var(--s2) 0; border-bottom: var(--linea) solid var(--bordo-forte); }
.cartiglio-piede dt { margin-bottom: var(--s1); }
.cartiglio-piede dd { font-size: var(--t-piccolo); overflow-wrap: anywhere; }

@media (min-width: 768px) {
  /* tante colonne quante sono le voci del cartiglio */
  .cartiglio-piede { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

/* ── Pagine per lavorazione (/tornitura/, /lamiera/, /stampaggio/, /carpenteria/) ── */
.lav-apertura { padding: var(--s8) 0 var(--sezione); }
.lav-griglia { display: grid; gap: var(--s6); align-items: center; }
.lav-testo { display: grid; gap: var(--s3); justify-items: start; }
.lav-testo .titolo-sezione { margin-top: 0; }
.lav-testo .sezione-sotto { margin-top: 0; color: var(--testo); }
.lav-figura { margin: 0; display: grid; gap: var(--s1); }
.pannello-lav { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r); background: var(--accento); }
.pannello-lav .trama { opacity: .4; }
.lav-disegno { position: absolute; inset: var(--s3); width: calc(100% - 2 * var(--s3)); height: calc(100% - 2 * var(--s3)); font-size: 14px; --tratto: 1px; }
.lav-corpo { background: var(--superficie); border-top: var(--linea) solid var(--bordo); }
.lav-colonne { display: grid; gap: var(--s8); }
.lav-titolo { margin: var(--s2) 0 var(--s4); font-size: var(--t-h3); line-height: var(--lh-voce); letter-spacing: var(--ls-voce); }
.lav-elenco { gap: var(--s2); font-size: var(--t-lead); }
.lav-ricerche { display: grid; gap: var(--s1); }
.lav-ricerca { max-width: 28em; }
.lav-nota { margin-top: var(--s3); color: var(--tenue); }
.lav-chiusura { border-radius: var(--r-foglio) var(--r-foglio) 0 0; }
.lav-azioni { margin-top: var(--s5); }
.lav-azioni .link-freccia { color: var(--crema); }
.lav-altre-titolo { margin-top: var(--s10); }
.lav-altre { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-top: var(--s1); }
@media (min-width: 1024px) {
  .lav-griglia { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); }
  .lav-testo { grid-column: 1 / 7; }
  .lav-figura { grid-column: 7 / -1; }
  .lav-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s10); }
  .lav-disegno { font-size: 11px; }
}

/* ── Pagine di servizio: privacy e grazie ── */
.documento { max-width: calc(var(--misura-documento) + 2 * var(--gutter)); }
.documento-intro { margin-top: var(--s3); font-size: var(--t-lead); color: var(--tenue); }
.documento h2 { margin: var(--s5) 0 var(--s1); font-size: var(--t-h3); line-height: var(--lh-voce); letter-spacing: var(--ls-voce); }
.documento p + p { margin-top: var(--s2); }
.documento .elenco-tratto { margin-top: var(--s1); }
.documento strong { font-weight: var(--peso-medio); }
.documento-data { margin-top: var(--s5); font-size: var(--t-piccolo); color: var(--tenue); }
.documento .link-blocco { margin-top: var(--s3); }

/* ══ Movimento ════════════════════════════════════════════════════
   Solo a schermo e senza «riduci movimento». Gli ingressi dell'apertura sono solo CSS;
   gli stati nascosti degli altri ingressi chiedono anche la classe .moto, che main.js aggiunge
   per ultima: se il file non arriva o si ferma, nulla resta nascosto. In stampa tutto è al suo posto. */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Apertura: le righe salgono, la quota si traccia dal centro, poi arrivano testo e tavola */
  .riga > span { animation: sale var(--lunga) var(--curva) backwards; }
  .riga + .riga > span { animation-delay: var(--sfalsa); }
  .quota::before { animation: traccia var(--lunga) var(--curva-precisa) calc(5 * var(--sfalsa)) backwards; }
  .quota::after { animation: compare-quota var(--media) var(--curva) calc(12 * var(--sfalsa)) backwards; }
  .apertura-testo { animation: compare var(--lunga) var(--curva) calc(4 * var(--sfalsa)) backwards; }

  /* La tavola si compone come al tornio: l'asse, poi il pezzo cresce dall'asse, poi le quote una a una */
  .tavola-asse, .tavola-pezzo { transform-box: fill-box; }
  .tavola-asse { transform-origin: left; animation: traccia var(--lunga) var(--curva-precisa) calc(5 * var(--sfalsa)) backwards; }
  .tavola-pezzo { transform-origin: center; animation: tornisce var(--lunga) var(--curva-precisa) calc(8 * var(--sfalsa)) backwards; }
  .quota-tavola { animation: compare var(--media) var(--curva) backwards; }
  .quota-tavola:nth-child(1) { animation-delay: calc(14 * var(--sfalsa)); }
  .quota-tavola:nth-child(2) { animation-delay: calc(15 * var(--sfalsa)); }
  .quota-tavola:nth-child(3) { animation-delay: calc(16 * var(--sfalsa)); }
  .quota-tavola:nth-child(4) { animation-delay: calc(17 * var(--sfalsa)); }
  .quota-tavola:nth-child(5) { animation-delay: calc(18 * var(--sfalsa)); }
  .tavola-cartiglio { animation: compare var(--media) var(--curva) calc(20 * var(--sfalsa)) backwards; }
  /* su telefono la tavola è sotto la piega: si compone quando arriva in vista */
  .moto .tavola:not(.visibile) :is(.tavola-asse, .tavola-pezzo, .quota-tavola, .tavola-cartiglio) { animation-play-state: paused; }

  /* Il foglio verde copre l'apertura, che resta ferma e si allontana: solo scala, nessuna dissolvenza
     (le micro-scritte in grigio devono restare AA fino all'ultimo).
     Con il fuoco da tastiera dentro l'apertura smette di stare ferma e non viene coperta. :focus-visible e non
     :focus-within: il mouse dà il fuoco già alla pressione, e l'apertura saltando farebbe perdere il clic. */
  .js .apertura { position: sticky; top: var(--apertura-top, var(--testata)); }
  .js .apertura:has(:focus-visible) { position: relative; top: auto; }
  .js .apertura-scena {
    transform-origin: 50% 0;
    transform: scale(calc(1 - .05 * var(--copertura, 0)));
    will-change: transform;
  }

  /* Il punto: le frasi si accendono quando le leggete (spente restano AA: 4,7:1) */
  .moto .frase:not(.letta) { opacity: .66; }

  /* Servizi: la riga si traccia, poi la voce sale e l'esempio si compone */
  .moto .servizio:not(.visibile)::after { transform: scaleX(0); }
  .moto .servizio > * { transition: opacity var(--media) var(--curva), transform var(--media) var(--curva); }
  .moto .servizio:not(.visibile) > * { opacity: 0; transform: translateY(var(--s2)); }
  .moto .servizio > :nth-child(2) { transition-delay: var(--sfalsa); }
  .moto .servizio > :nth-child(3) { transition-delay: calc(2 * var(--sfalsa)); }
  /* Google: il cursore lampeggia quattro volte nella ricerca, poi resta fermo (WCAG 2.2.2) */
  .moto .visibile .mock-cerca::after { animation: lampeggia calc(var(--lunga) + var(--sfalsa)) steps(1) 4; }
  /* Sito: il disegno si allega, poi la richiesta parte */
  .moto :is(.mock-file, .mock-inviata) { transition: opacity var(--media) var(--curva), transform var(--media) var(--curva); }
  .moto .mock-file { transition-delay: calc(6 * var(--sfalsa)); }
  .moto .mock-inviata { transition-delay: calc(12 * var(--sfalsa)); }
  .moto .servizio:not(.visibile) .mock-file { opacity: 0; transform: translateX(calc(-1 * var(--s2))); }
  .moto .servizio:not(.visibile) .mock-inviata { opacity: 0; transform: translateY(var(--s1)); }
  /* CRM: la richiesta confermata arriva nella colonna «Ordine» */
  .moto .mock-carta-fatta { transition: transform var(--lunga) var(--curva) calc(7 * var(--sfalsa)), opacity var(--media) var(--curva) calc(7 * var(--sfalsa)); }
  .moto .servizio:not(.visibile) .mock-carta-fatta { opacity: 0; transform: translateX(-60%); }
  /* Automazioni: la linea scende e i passi arrivano in fila */
  .moto .mock-flusso ol::after { transition: transform calc(2 * var(--lunga)) var(--curva-precisa) calc(4 * var(--sfalsa)); }
  .moto .servizio:not(.visibile) .mock-flusso ol::after { transform: scaleY(0); }
  .moto .mock-flusso li { transition: opacity var(--media) var(--curva), transform var(--media) var(--curva); }
  .moto .servizio:not(.visibile) .mock-flusso li { opacity: 0; transform: translateX(calc(-1 * var(--s1))); }
  .moto .mock-flusso li:nth-child(1) { transition-delay: calc(4 * var(--sfalsa)); }
  .moto .mock-flusso li:nth-child(2) { transition-delay: calc(10 * var(--sfalsa)); }
  .moto .mock-flusso li:nth-child(3) { transition-delay: calc(16 * var(--sfalsa)); }
  /* Resoconto: le barre crescono una dopo l'altra */
  .moto .mock-barre span { transition: transform var(--lunga) var(--curva); }
  .moto .servizio:not(.visibile) .mock-barre span { transform: scaleY(0); }
  .moto .mock-barre span:nth-child(1) { transition-delay: calc(4 * var(--sfalsa)); }
  .moto .mock-barre span:nth-child(2) { transition-delay: calc(5 * var(--sfalsa)); }
  .moto .mock-barre span:nth-child(3) { transition-delay: calc(6 * var(--sfalsa)); }
  .moto .mock-barre span:nth-child(4) { transition-delay: calc(7 * var(--sfalsa)); }
  .moto .mock-barre span:nth-child(5) { transition-delay: calc(8 * var(--sfalsa)); }
  .moto .mock-barre span:nth-child(6) { transition-delay: calc(9 * var(--sfalsa)); }

  /* Metodo: la linea segue lo scorrimento, la tessera di ogni fase si riempie quando la linea la raggiunge */
  .moto .ciclo::after { transform: scaleY(var(--avanzamento, 0)); }
  .moto .fase:not(.raggiunta) .fase-segno::after { transform: scale(0); opacity: 0; }

  /* Chi siamo: le due tessere si incastrano mentre il marchio entra (--incastro da 0 a 1, main.js),
     poi compaiono i richiami. Incastrate prima che il marchio sia tutto in vista */
  .moto .simbolo-componibile .t-tagliata { transform: translate(calc((var(--incastro, 1) - 1) * var(--s3)), calc((var(--incastro, 1) - 1) * var(--s3))); }
  .moto .simbolo-componibile .t-vuota { transform: translate(calc((1 - var(--incastro, 1)) * var(--s3)), calc((1 - var(--incastro, 1)) * var(--s3))); }
  .moto .simbolo-componibile .richiamo { opacity: clamp(0, calc(var(--incastro, 1) * 4 - 3), 1); }

  /* Dati di targa: le tessere salgono una dopo l'altra; nella tessera grande la flangia si compone */
  .moto .dato { transition: opacity var(--media) var(--curva), transform var(--media) var(--curva); }
  .moto .dato:not(.visibile) { opacity: 0; transform: translateY(var(--s3)); }
  .moto .dato:nth-child(2) { transition-delay: var(--sfalsa); }
  .moto .dato:nth-child(3) { transition-delay: calc(2 * var(--sfalsa)); }
  .moto .dato:nth-child(5) { transition-delay: var(--sfalsa); }
  .moto .dato-disegno :is(.strato-pezzo, .strato-quote) { transform-box: fill-box; transition: opacity var(--media) var(--curva), transform var(--lunga) var(--curva-precisa); }
  .moto .dato-disegno .strato-pezzo { transform-origin: center; transition-delay: calc(4 * var(--sfalsa)); }
  .moto .dato-disegno .strato-quote { transition-delay: calc(9 * var(--sfalsa)); }
  .moto .dato:not(.visibile) .strato-pezzo { opacity: 0; transform: rotate(-30deg) scale(.9); }
  .moto .dato:not(.visibile) .strato-quote { opacity: 0; }

  /* Calibro: la lancetta ruota fino al punteggio */
  .lancetta { transition: transform var(--lunga) var(--curva-precisa); }

  /* Settori: i risultati e le righe dei settori salgono quando entrano */
  .moto :is(.risultati li, .settore-riga) { transition: opacity var(--media) var(--curva), transform var(--media) var(--curva); }
  .moto :is(.risultati li, .settore-riga):not(.visibile) { opacity: 0; transform: translateY(var(--s3)); }
  .moto .risultati li:nth-child(2) { transition-delay: var(--sfalsa); }
  .moto .risultati li:nth-child(3) { transition-delay: calc(2 * var(--sfalsa)); }
  .moto .risultati li:nth-child(4) { transition-delay: calc(3 * var(--sfalsa)); }

  /* Recensioni: i loghi salgono nelle loro celle (le celle restano: sotto c'è il colore delle righe), poi le schede */
  .moto .cliente > *, .moto .recensione { transition: opacity var(--media) var(--curva), transform var(--media) var(--curva); }
  .moto .cliente:not(.visibile) > * { opacity: 0; transform: translateY(var(--s2)); }
  .moto .recensione:not(.visibile) { opacity: 0; transform: translateY(var(--s3)); }
  .moto .cliente:nth-child(2) > *, .moto .recensione:nth-child(2) { transition-delay: var(--sfalsa); }

  /* Domande e contatto: salgono quando entrano */
  .moto :is(.domanda, .contatto-testa) { transition: opacity var(--media) var(--curva), transform var(--media) var(--curva); }
  .moto :is(.domanda, .contatto-testa):not(.visibile) { opacity: 0; transform: translateY(var(--s3)); }
  .moto .domanda:nth-child(2n) { transition-delay: var(--sfalsa); }
}
@media screen and (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .moto .ciclo::after { transform: scaleX(var(--avanzamento, 0)); }
}
/* Il menu: il foglio sale (e chiudendo esce in alto), poi le voci salgono una dopo l'altra.
   Al passaggio del mouse le lettere scorrono in su e la loro copia (text-shadow) prende il posto. */
@media screen and (prefers-reduced-motion: no-preference) {
  .menu-foglio { transition: transform var(--lunga) var(--curva-precisa); }
  .menu-lettere { transition: transform var(--lunga) var(--curva); }
  .menu:not(.aperto) .menu-lettere { transform: translateY(105%); }
  .menu.aperto li:nth-child(1) .menu-lettere { transition-delay: calc(4 * var(--sfalsa)); }
  .menu.aperto li:nth-child(2) .menu-lettere { transition-delay: calc(5 * var(--sfalsa)); }
  .menu.aperto li:nth-child(3) .menu-lettere { transition-delay: calc(6 * var(--sfalsa)); }
  .menu.aperto li:nth-child(4) .menu-lettere { transition-delay: calc(7 * var(--sfalsa)); }
  .menu.aperto li:nth-child(5) .menu-lettere { transition-delay: calc(8 * var(--sfalsa)); }
  :is(.menu-num, .menu-lato, .menu-piede) { transition: opacity var(--media) var(--curva); }
  .menu:not(.aperto) :is(.menu-num, .menu-lato, .menu-piede) { opacity: 0; }
  .menu.aperto .menu-num { transition-delay: calc(6 * var(--sfalsa)); }
  .menu.aperto :is(.menu-lato, .menu-piede) { transition-delay: calc(8 * var(--sfalsa)); }
  .menu-lettere > span { transition: transform calc(var(--media) - var(--sfalsa)) cubic-bezier(.625, .05, 0, 1) calc(var(--i, 0) * 15ms); }
  .menu-voci a:is(:hover, :focus-visible) .menu-lettere > span { transform: translateY(-1.2em); }
}
/* Il mirino: solo dove c'è un mouse */
@media screen and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .moto .mirino {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--media) var(--curva);
  }
  .moto .apertura-scena:hover .mirino { opacity: 1; }
  .mirino > span { position: absolute; left: 0; top: 0; will-change: transform; }
  .mirino-x { width: 100%; height: var(--linea); background: var(--mirino); transform: translateY(var(--my, 0)); }
  .mirino-y { width: var(--linea); height: 100%; background: var(--mirino); transform: translateX(var(--mx, 0)); }
  .mirino-valore {
    padding: 2px 6px;
    border-radius: var(--r-xs);
    background: var(--accento);
    color: var(--crema);
    font: var(--peso-medio) var(--t-micro)/1.4 var(--mono);
    letter-spacing: .04em;
    white-space: pre;
    transform: translate(calc(var(--mx, 0px) + var(--s1)), calc(var(--my, 0px) + var(--s1)));
  }
}
@keyframes sale { from { transform: translateY(105%); } }
@keyframes traccia { from { transform: scaleX(0); } }
@keyframes tornisce { from { transform: scaleY(0); } }
@keyframes compare { from { opacity: 0; transform: translateY(var(--s1)); } }
@keyframes compare-quota { from { opacity: 0; transform: translate(-50%, 0); } }
@keyframes lampeggia { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ══ Stampa: nero su bianco, niente fogli verdi, testata e modulo, niente pagine spezzate a metà voce ══ */
@media print {
  .salta, .mirino, .nav, .testata .btn, .menu-apri, .modulo, .calibro, .tavola-cartiglio, .pannello-mini { display: none; }
  /* il logo resta intero (pillola compresa) e la quota resta disegnata anche senza «grafica di sfondo» */
  .testata { position: static; background: none; border: 0; }
  .logo-lab, .quota, .fase-segno, .simbolo-componibile { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: none; }
  .apertura-scena { min-height: 0; padding: 0 0 var(--s4); background: none; }
  .sezione, .punto, .contatto { padding: var(--s6) 0; }
  .punto, .contatto { background: none; color: var(--testo); border-radius: 0; }
  :is(.punto, .contatto) :is(.micro, .contatto-testa > p, .recapiti dt) { color: var(--tenue); }
  :is(.sintomi, .sintomi li, .recapiti, .recapiti div) { border-color: var(--bordo-forte); }
  .metodo { background: none; }
  .quota::after { background: none; }
  .servizio, .settore-riga, .risultati li, .fase, .domanda, .mock, .dato, .cliente, .recensione { break-inside: avoid; }
  .dato-grande { background: none; color: var(--testo); border-color: var(--bordo-forte); }
  .dato-grande .dato-valore { color: var(--accento); }
  .dato-grande :is(.micro, p) { color: var(--tenue); }
  .dato-disegno { display: none; }
  .sezione-testa, h2, h3 { break-after: avoid; }
}