[hidden]{display:none!important}
/* ⚠ LA PRIMA REGOLA, DI PROPOSITO (regola 7). L'attributo hidden vale
   display:none ma perde contro qualunque display esplicito: senza questa
   riga #menu:target{display:grid} vince su hidden quando l'URL ha ancora
   #menu, e il menu non si chiude. tools/audit_tecnico.py lo controlla. */

/* ═══════════════════════════════════════════════════════════════════════
   KleinCASA: base.css, comune a desktop e mobile.
   ───────────────────────────────────────────────────────────────────────
   Qui stanno i caratteri, i token (DESIGN-SPEC §3), il reset, la
   tipografia di base (scala MOBILE in :root: desktop.css ridefinisce i
   token sotto la sua media query) e gli elementi che non dipendono dal
   viewport: link, pulsanti, campi, accordion, cornici, fuoco, entrate,
   le viste a schermo intero, il selettore delle finiture (dal 14 set
   2026, AGGIORNAMENTO §4 e MARKUP.md).
   NIENTE layout: colonne, griglie, sticky e hover stanno in desktop.css
   (min-width: 1024px) e mobile.css (max-width: 1023.98px). Le viste sono
   fixed anche qui: sono finestre di dialogo, uguali sui due mondi.

   Un solo inchiostro (il navy del container), carta di lino, filetti da
   1 px, un serif grande e leggero. Il colore lo mettono le fotografie.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────── Caratteri ─── */

/* Il serif è ristretto ai pesi che il sito usa (300 e 400) e il corsivo è
   un'istanza statica 400: tools/font-istanzia.py li produce dagli
   originali in _materiale/font (124 + 88 KB → 72 + 34). Un peso fuori
   intervallo verrebbe reso col più vicino, senza errori: chi aggiunge un
   500 al serif rilancia lo script. */
@font-face{font-family:"KC Serif";src:url(../fonts/kc-serif.1c697fc2.woff2) format("woff2");font-weight:300 400;font-style:normal;font-display:swap}
@font-face{font-family:"KC Serif";src:url(../fonts/kc-serif-italic.10bcf02a.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"KC Sans";src:url(../fonts/kc-sans.dfae5d19.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
/* Riserve con metriche accordate (CLS 0 finché i woff2 arrivano). I
   valori di size-adjust e ascent/descent sono quelli provvisori della
   DESIGN-SPEC §3b: tools/font-metriche.py li ricalcola dai TTF. */
@font-face{font-family:"KC Serif Fallback";src:local("Georgia");size-adjust:88.6%;ascent-override:104.3%;descent-override:32.4%;line-gap-override:0%}
@font-face{font-family:"KC Sans Fallback";src:local("Avenir Next"),local("Helvetica Neue"),local("Arial");size-adjust:93.5%;ascent-override:114.4%;descent-override:40.1%;line-gap-override:0%}

/* ─────────────────────────────────────────────────────────── Token ─── */

:root{
  /* Colori (DESIGN-SPEC §3.1, contrasti misurati; tools/contrasti.py li rilegge qui). */
  --lino:#F3ECE4;
  --lino-scuro:#EAE1D6;
  --navy:#1C2733;
  --navy-attivo:#2A3744;
  --grafite:#2B2B2B;
  --taupe:#645850;
  --pietra:#C9BDB1;
  --pietra-ui:#8A7D72;
  --lino-navy:#D9CFC4;
  --rosso:#B8352A;
  --rosso-navy:#E8A79F;
  --bianco:#FFFFFF;
  --filetto-navy:rgba(243,236,228,.18);

  /* Ruoli di contesto: sul lino valgono questi; le fasce (lino scuro,
     navy) e i pannelli navy (menu, barra, linguetta, vista, piè) li
     ridefiniscono, e i componenti leggono SOLO i ruoli. */
  --fondo:var(--lino);
  --testo:var(--grafite);
  --titolo:var(--navy);
  --secondario:var(--taupe);
  --filetto:var(--pietra);
  --bordo-ui:var(--pietra-ui);
  --sep:var(--rosso);
  --errore:var(--rosso);
  --fuoco:var(--navy);
  --link:var(--navy);

  /* Caratteri */
  --serif:"KC Serif","KC Serif Fallback",Georgia,serif;
  --sans:"KC Sans","KC Sans Fallback","Helvetica Neue",Arial,sans-serif;

  /* Scala tipografica MOBILE (§3b). desktop.css la ridefinisce da 1024. */
  --t-h1:clamp(42px,11.5vw,60px);
  --t-h2:38px;
  --t-h3:24px;
  --t-faq:22px;
  --t-lead:18px;
  --t-sotto:22px;
  --t-corpo:16px;
  --t-campo:16px;
  --t-piccolo:14px;
  --t-etichetta:12px;
  --t-pulsante:13px;
  --t-didascalia:13px;
  --t-piu:26px;
  --t-conta:12px;
  --t-visore:13px;
  --i-corpo:1.6;
  --s-etichetta:.14em;
  --s-pulsante:.12em;

  /* Spaziature (§3.2): passo 8, scala 4 8 12 16 24 32 40 48 64 96 120 160. */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;
  --sp-7:40px;--sp-8:48px;--sp-9:64px;--sp-10:96px;   /* 120 e 160 stanno scritti in px dove servono (fasce, pagine) */
  --tavola-y:88px;            /* spazio fra le tavole (desktop 160) */
  --titolo-contenuto:24px;    /* h2 → contenuto (desktop 40) */
  --capoverso:24px;
  --figura-didascalia:12px;
  --margine:16px;             /* margini laterali (desktop clamp(64px,4vw,96px)) */
  --contenitore:1600px;
  --testata-h:60px;           /* altezza della testata (desktop 88) */
  --pollice-h:56px;
  --filetto-occhiello:64px;

  /* Regia del movimento (§8) */
  --curva:cubic-bezier(.2,.7,.2,1);
  --t-micro:200ms;
  --t-media:260ms;
  --t-entrata:480ms;
}

/* I contesti navy: le stesse regole, gli stessi componenti, i ruoli girati. */
.fascia--navy,.pie,.menu,.pollice,.linguetta,.vista{
  --fondo:var(--navy);
  --testo:var(--lino-navy);
  --titolo:var(--lino);
  --secondario:var(--lino-navy);
  --filetto:var(--filetto-navy);
  --bordo-ui:var(--pietra);
  --sep:var(--rosso-navy);
  --errore:var(--rosso-navy);
  --fuoco:var(--lino);
  --link:var(--bianco);
  background:var(--fondo);
  color:var(--testo);
}
/* Sul lino scuro (tavole 03 e 05) il pietra-ui scende a 3.09: i bordi dei
   controlli sono navy. */
.fascia--lino-scuro{--fondo:var(--lino-scuro);--bordo-ui:var(--navy);background:var(--fondo)}

/* ───────────────────────────────────────────────────── Azzeramento ─── */

*,*::before,*::after{box-sizing:border-box}
html{
  font-size:100%;
  font-synthesis:none;              /* niente grassetti né corsivi finti */
  -webkit-text-size-adjust:100%;
  /* ⚠ NIENTE scroll-padding-top qui (giro 3): con la testata sticky, Chrome
     considera «fuori vista» ogni link della testata che sta nella fascia
     del padding e, al fuoco (Tab), scorre la pagina per portarlo sotto
     la fascia: la pagina risaliva di 462 px a ogni Tab. Lo scarto della
     testata sta sui BERSAGLI (scroll-margin-top, più sotto). */
  background:var(--lino);
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;
  background:var(--lino);
  color:var(--grafite);
  font:400 var(--t-corpo)/var(--i-corpo) var(--sans);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,address{margin:0}
ul,ol{padding:0;list-style:none}
address{font-style:normal}
img,svg,picture{display:block;max-width:100%}
img{height:auto}
/* iOS arrotonda i campi da sé: raggio zero ovunque, esplicito (§3.2). */
button,input,select,textarea{font:inherit;color:inherit;border-radius:0;margin:0}
button{background:none;border:0;padding:0;cursor:pointer}
small{font-size:inherit}
main{position:relative}

/* ─────────────────────────────────────────────────────── Tipografia ─── */

h1,h2,h3{
  font-family:var(--serif);
  color:var(--titolo);
  /* Il tedesco non deve sfondare la colonna (regola 9). */
  overflow-wrap:anywhere;
  hyphens:auto;
}
h1{font-weight:300;font-size:var(--t-h1);line-height:1;letter-spacing:-.01em}
h2{font-weight:300;font-size:var(--t-h2);line-height:1.05;text-wrap:balance}
h3{font-weight:400;font-size:var(--t-h3);line-height:1.2;text-wrap:balance}
/* Sillabazione solo sulle parole lunghe e mai a due lettere: «Mon-tage» e
   «Be-hördengänge» in tedesco erano brutte da leggere (Safari: le due proprietà con prefisso). */
h3{hyphenate-limit-chars:10 6 4;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:4}   /* 6 prima: «Behörden-gänge», non «Behör-dengänge» */
p+p{margin-top:var(--capoverso)}
.tavola__b p,.pagina__corpo p{max-width:62ch}
/* Il nome del cookie nell'informativa resta in Jost: il monospace di sistema esce più grande del corpo. */
.pagina__corpo code{font-family:inherit;font-size:inherit;font-weight:500;letter-spacing:.02em}
.lead{font-weight:300;font-size:var(--t-lead);line-height:1.5}

/* Etichette e occhielli: Jost 500 12 maiuscolo 0.14em. Il «//» è rosso
   perché è il segno della griglia del cliente, non uno stato. */
.etichetta,.occhiello{
  font:500 var(--t-etichetta)/1 var(--sans);
  letter-spacing:var(--s-etichetta);
  text-transform:uppercase;
  color:var(--secondario);
}
.occhiello__sep{color:var(--sep)}
.occhiello{margin-bottom:var(--titolo-contenuto)}
/* Nella colonna A di ogni tavola l'occhiello porta il filetto da 64 px,
   che desktop.css riempie di navy con lo scorrimento (§6.6). */
.tavola__a .occhiello::after{
  content:"";
  display:block;
  width:var(--filetto-occhiello);
  height:1px;
  margin-top:var(--sp-4);
  background:var(--filetto);
}

.didascalia{
  font:400 var(--t-didascalia)/1.45 var(--sans);
  letter-spacing:.02em;
  color:var(--secondario);
  margin-top:var(--figura-didascalia);
}

/* La coppia «CHF 73'000.-»: dal 15 set 2026 è un titolo di riga come gli
   altri due (Cormorant 400, --t-h3, navy tutta: «stesso colore CHF e
   importo, stessa dimensione del restante», il cliente), non più il corpo
   grande a 40-48 px con la cifra in taupe. Cifre allineate (di default
   sono in stile antico). Le regole della cifra «1998» e delle sedi di Chi
   siamo sono uscite con il markup del 14 set (Correzione 1). */
.prezzo__valuta,.prezzo__cifra{
  font:400 var(--t-h3)/1.2 var(--serif);
  color:var(--titolo);
  font-variant-numeric:lining-nums tabular-nums;
}

.eroe__sotto{font:italic 400 var(--t-sotto)/1.3 var(--serif);color:var(--secondario)}
.eroe__meta{
  font:500 var(--t-etichetta)/1.4 var(--sans);
  letter-spacing:var(--s-etichetta);
  text-transform:uppercase;
  color:var(--secondario);
}
.eroe__meta li::before{color:var(--sep)}   /* il content «//» lo decide il viewport */

/* ───────────────────────────────────────────────────────────── Link ─── */

a{color:inherit;text-decoration:none}
/* Solo i link nel testo corrente portano il filetto: nav, pulsanti e
   marchio no. Hover (filetto navy 2 px) in desktop.css. */
p a,.recapiti a,.campo--consenso a,.lpd__testo a,.pagina__corpo a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--pietra);
  text-underline-offset:.22em;
}

/* Anello di fuoco: mai outline none (§12). Il colore segue il contesto. */
:focus-visible{outline:2px solid var(--fuoco);outline-offset:3px}
/* ⚠ Il velo «apri» (sopra la foto, inset:0) sta in un quadro con
   overflow:hidden: il suo anello, disegnato 3 px FUORI, veniva tagliato e
   il fuoco non si vedeva (giro 2, WCAG 2.4.7). L'anello lo porta il
   CONTENITORE, che non si taglia da solo. Dove :has manca, ripiego: anello
   lino DENTRO il velo (la foto è navy: il navy non si vedrebbe). */
.eroe__foto:has(>.apri:focus-visible),.cornice__quadro:has(>.apri:focus-visible){outline:2px solid var(--fuoco);outline-offset:3px}
@supports not selector(:has(*)){
  .apri:focus-visible{outline:2px solid var(--lino);outline-offset:-4px}
}

::selection{background:var(--navy);color:var(--lino)}

/* Skip link: primo elemento dopo il menu, visibile solo al fuoco. */
.salta{
  position:absolute;left:-9999px;top:0;z-index:100;
  display:inline-flex;align-items:center;min-height:44px;   /* bersaglio 44 anche qui */
  padding:var(--sp-3) var(--sp-4);
  background:var(--navy);color:var(--lino);
  font:500 var(--t-pulsante)/1 var(--sans);letter-spacing:var(--s-pulsante);text-transform:uppercase;
}
.salta:focus{left:0}

/* ────────────────────────────────────────────────── Utilità comuni ─── */

/* L'ancora #chiudi: fixed è sempre «in vista», così il salto toglie il
   :target al menu e alle viste senza riportare la pagina in cima (§4.2). */
.ancora-fissa{position:fixed;top:0;left:0;width:0;height:0}
/* La sentinella della testata compatta: 1 px a 120 px dall'inizio di main. */
.sentinella{position:absolute;top:120px;left:0;width:1px;height:1px;pointer-events:none}
/* Menu a schermo intero e viste :target: chiusi di default; li aprono
   mobile.css (#menu:target, .vista:target), desktop.css (le viste della
   Gallery e delle soluzioni) e app.js (hidden). */
.menu,.vista{display:none}
/* Con JS (app.js) il menu vive di hidden: al caricamento lo mette, il «+»
   lo toglie. Solo sotto js-pronto, così senza script comanda :target. La
   regola sta qui perché vale anche fra 1024 e 1279 (desktop.css apre solo
   #menu:target); la dissolvenza la fa mobile.css. A menu aperto la pagina
   sotto non scorre (classe messa da app.js). */
html.js-pronto .menu:not([hidden]){display:grid}
body.menu-aperto{overflow:hidden}
/* Le viste con app.js: stessa meccanica del menu (hidden al caricamento,
   tolto all'apertura). Sotto js-pronto, così senza script comanda
   :target. A vista aperta la pagina sotto non scorre: la classe la mette
   app.js sull'html (mobile.js la usa per le stesse cose). */
html.js-pronto .vista:not([hidden]){display:grid}
html.is-bloccato,html.is-bloccato body{overflow:hidden}
/* Il campo esca: fuori schermo, non hidden (deve esserci per i bot). */
.esca{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Testo solo per chi non vede (la riga viva delle finiture). */
.solo-lettori{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ───────────────────────────────────────────────────────── Marchio ─── */

/* Dal 14 settembre in pagina va il LOGO DEL CLIENTE come <img>
   (includes/marchio.php: logo.svg sul lino, logo-lino.svg sul navy). La
   misura è l'ALTEZZA: 44 in testata (36 compatta e sul telefono, in
   desktop.css / mobile.css), 36 nel menu, 64 nel piè; la larghezza esce
   dal rapporto del viewBox. Niente color: il colore è nel file. Il logo
   non si anima mai. Le regole del marchio tipografico qui sotto restano
   per il ripiego marchio_testo() (se l'SVG manca). */
.marchio__img{display:block;height:54px;width:auto}   /* in testata: 54 dal 17 set 2026 (era 44: il cliente lo voleva un po' più grande) */
.marchio--menu .marchio__img{height:36px}
.marchio--pie .marchio__img{height:64px}

/* «KleinCASA» come lo scrive il cliente: Klein leggero, CASA pesante,
   stessa linea di base, si toccano (§2). Mai animato, mai due colori. */
.marchio{
  display:inline-flex;align-items:baseline;gap:.06em;
  color:var(--titolo);text-decoration:none;font-synthesis:none;
  font-size:22px;white-space:nowrap;
}
.marchio__k{font:300 1.18em/1 var(--serif)}
.marchio__c{font:600 .79em/1 var(--sans);letter-spacing:.14em;margin-right:-.14em;text-transform:uppercase}
.marchio--pie{font-size:40px;color:var(--lino)}
.marchio--menu{color:var(--lino)}

/* ──────────────────────────────────────────────────────── Pulsanti ─── */

.pulsante{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 28px;
  border:1px solid transparent;border-radius:0;
  font:500 var(--t-pulsante)/1 var(--sans);letter-spacing:var(--s-pulsante);text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background-color 160ms var(--curva),color 160ms var(--curva),border-color 160ms var(--curva);
}
.pulsante--pieno{background:var(--navy);color:var(--lino);border-color:var(--navy)}
.pulsante--pieno:active{background:var(--navy-attivo);border-color:var(--navy-attivo)}
.pulsante--contorno{background:transparent;color:var(--titolo);border-color:var(--bordo-ui)}
.pulsante--contorno:active{background:var(--navy);color:var(--lino);border-color:var(--navy)}
.pulsante--lino{background:var(--lino);color:var(--navy);border-color:var(--lino)}
.pulsante--lino:active{background:var(--lino-scuro);border-color:var(--lino-scuro)}
.pulsante[disabled]{opacity:.6;cursor:default}

/* ───────────────────────────────────────────────────────── Cornici ─── */

/* Ogni immagine sta in una cornice: bordo 1 px, la foto tocca il filetto,
   rapporto dichiarato (niente salti), didascalia sotto (fuori dal bordo). */
.cornice{margin:0}
.cornice__quadro{position:relative;border:1px solid var(--filetto);overflow:hidden}
.cornice__img{display:block;width:100%;height:auto;object-fit:cover}
.cornice--16-10 .cornice__img{aspect-ratio:16/10}
.cornice--6-5 .cornice__img{aspect-ratio:6/5}
.cornice--4-5 .cornice__img{aspect-ratio:4/5}
.cornice--4-3 .cornice__img{aspect-ratio:4/3}
.cornice--16-9 .cornice__img{aspect-ratio:16/9}
.cornice--1-1 .cornice__img{aspect-ratio:1/1}
.cornice--3-2 .cornice__img{aspect-ratio:3/2}
/* Dal 14 settembre (AGGIORNAMENTO §4.2): le verticali del cliente (2:3) e
   il trittico della scala (2:1). Il rapporto lo sceglie figura() dall'indice. */
.cornice--2-3 .cornice__img{aspect-ratio:2/3}
.cornice--2-1 .cornice__img{aspect-ratio:2/1}
/* Il punto di fuoco delle tessere è già nel ritaglio (varianti -1-1 di tools/immagini.py): nessuna classe di object-position. */
/* Il velo che apre la vista a schermo intero: SOPRA la foto, non attorno.
   desktop.css lo toglie (display:none) tranne che nella Gallery,
   mobile.css lo lascia. Il cursore dice che cosa succede. */
.apri{position:absolute;inset:0;cursor:zoom-in}

/* Le quattro foto dell'anteprima (tavola 02) si sovrappongono nella stessa
   cella; il CSS desktop mostra quella della soluzione aperta. */
.anteprima .cornice__quadro{display:grid}
.anteprima__img{grid-area:1/1}

/* ─────────────────────────────────── Viste a schermo intero ─── */

/* Tre famiglie (MARKUP §9): #foto-eroe, le quindici delle soluzioni
   (.vista--soluzione: chiudi + foto), le dodici della Gallery
   (.vista--galleria: chiudi + foto + didascalia con «nn / 12» + prec/succ
   circolari). Senza JS le apre :target (mobile.css; desktop.css per Gallery
   e soluzioni) e #chiudi le chiude; con app.js vivono di hidden, Esc e le
   frecce fanno il resto. Sono figlie di <main>: fisse, sopra tutto (z 60,
   MARKUP §13), i ruoli girati (lino su navy, regola dei contesti sopra).
   Il display lo danno solo :target e hidden: qui c'è la scatola. */
.vista{position:fixed;inset:0;z-index:60;place-items:center;padding:var(--sp-4)}
/* La Gallery: foto sopra, didascalia sotto; la riga della foto è minmax(0,1fr)
   così la foto grande non la allunga oltre la finestra. */
.vista--galleria{grid-template-rows:minmax(0,1fr) auto;row-gap:var(--sp-3)}
/* Verticali E orizzontali: la foto sta dentro la sua cella, mai oltre,
   centrata, senza ritaglio. min-width/min-height 0: un'immagine da 1650
   non deve dettare la misura della cella. */
.vista__img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  min-width:0;min-height:0;
  object-fit:contain;
  justify-self:center;align-self:center;
}
.vista--galleria .vista__img{max-width:100%;max-height:100%}   /* vince sul tetto in svh di mobile.css: sotto c'è la didascalia */
/* Il «+» ruotato in alto a destra (44 × 44): i font ospitati non hanno la «✕». */
.vista__chiudi{
  position:absolute;top:8px;right:8px;z-index:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  font:300 28px/1 var(--sans);color:var(--lino);
}
.vista__chiudi span{display:block;rotate:45deg}
/* Didascalia della Gallery: Jost 13 lino-navy, il contatore in tono etichetta
   con cifre allineate; centrata sotto la foto, mai più larga di 62ch. */
.vista__didascalia{
  justify-self:center;max-width:62ch;
  font:400 var(--t-didascalia)/1.45 var(--sans);letter-spacing:.02em;
  color:var(--lino-navy);text-align:center;
}
.vista__conta{font-weight:500;letter-spacing:var(--s-etichetta);font-variant-numeric:tabular-nums;margin-right:var(--sp-1)}
/* Le frecce: due bersagli 44 × 44 ai lati, a metà altezza, glifi «‹ ›» in
   Jost 300 26 (i tre woff2 non hanno «← →»). Il nome sta nell'aria-label.
   translate, non transform: proprietà singola, come la linguetta. */
.vista__prec,.vista__succ{
  position:absolute;top:50%;z-index:1;translate:0 -50%;
  display:grid;place-items:center;
  width:44px;height:44px;
  font:300 26px/1 var(--sans);color:var(--lino);
}
.vista__prec{left:var(--sp-2)}
.vista__succ{right:var(--sp-2)}

/* ─────────────────────────────── Tavola 02: intro, sequenza, finiture ─── */

/* L'intro delle soluzioni (testo + foto 2:3): qui solo il ritmo verticale
   del testo; le due colonne (desktop) e la foto sotto (telefono) stanno
   nei fogli. L'h3 è quello di base (Cormorant 400 --t-h3, navy). */
.soluzioni__intro-testo h3{margin-bottom:var(--sp-4)}
/* Le figure nuove dentro un accordion stanno a 32 px dal capoverso, come
   la striscia e le tessere su desktop (§5.2 b). */
.fisarmonica__dentro>.sequenza,.fisarmonica__dentro>.finiture{margin-top:var(--sp-6)}

/* Il selettore delle finiture (sol-04, AGGIORNAMENTO §4.3): lo stesso
   edificio con quattro rivestimenti. SENZA JS le quattro figure sono tutte
   visibili (griglia 2 × 2 su desktop, impilate sul telefono: fogli) e i
   link #fin-0n portano alla figura: scroll-margin-top come le fisarmoniche.
   CON JS (html.js-pronto) nel quadro se ne vede una sola: sovrapposte in
   grid-area 1/1, la corrente a opacità 1 in 320 ms.
   ⚠ Le altre a opacità 0 E visibility:hidden: dentro ogni figura c'è il
   velo a.apri, che con la sola opacità resterebbe nel Tab. La visibilità
   cambia a dissolvenza finita (ritardo 320) e subito per chi entra. */
.finiture__fig{scroll-margin-top:calc(var(--testata-h) + 16px)}
html.js-pronto .finiture__quadro{display:grid}
html.js-pronto .finiture__fig{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transition:opacity 320ms var(--curva),visibility 0s linear 320ms;
}
html.js-pronto .finiture__fig.is-corrente{opacity:1;visibility:visible;transition-delay:0s}
/* Le scelte: miniature 1:1 (72 px; 56 sul telefono, mobile.css sulla
   .finiture__mini) con il nome sotto in etichetta. La corrente e il fuoco
   portano il filetto navy, come le miniature della Gallery. Il nome può
   essere più largo della miniatura («Prato verticale» va su due righe,
   non si spezza a metà parola). Bersaglio: 72 + 8 + 16 ≥ 44. */
.finiture__scelte{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-6)}
.finiture__scelta{
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);
  min-width:72px;max-width:112px;
  color:var(--secondario);
}
.finiture__mini{display:block;width:72px}
.finiture__miniimg{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--filetto);
  transition:border-color 160ms var(--curva);
}
.finiture__scelta[aria-current] .finiture__miniimg,
.finiture__scelta:focus-visible .finiture__miniimg{border-color:var(--navy)}
.finiture__nome{
  font:500 var(--t-etichetta)/1.3 var(--sans);letter-spacing:var(--s-etichetta);text-transform:uppercase;
  text-align:center;
}
.finiture__scelta[aria-current] .finiture__nome{color:var(--titolo)}

/* Gallery (AGGIORNAMENTO §4.4): dodici foto miste in un visore 3:2 fisso,
   la foto dentro in contain sul lino scuro (le verticali al centro con il
   lino ai lati); sul telefono la scheda prende l'altezza e la larghezza
   dal rapporto (mobile.css) e il contain non cambia nulla. Le miniature
   «-mini» sono 1:1. */
.galleria__fig .cornice__img{object-fit:contain;background:var(--lino-scuro)}
.galleria__miniimg{aspect-ratio:1/1;object-fit:cover}

/* ─────────────────────────────────────────────────────── Accordion ─── */

/* <details>/<summary> nativi: funzionano senza JS. Il «+» ruota e diventa
   rosso quando è aperto; il corpo è una griglia 1fr che il JS porta a 0fr
   (classe si-chiude) prima di togliere open, così la chiusura è animata. */
.fisarmonica{border-top:1px solid var(--filetto)}
.fisarmonica:last-of-type{border-bottom:1px solid var(--filetto)}
.fisarmonica__testa{
  display:grid;grid-template-columns:auto 1fr 44px;align-items:center;column-gap:var(--sp-4);
  min-height:64px;padding:var(--sp-3) 0;
  list-style:none;cursor:pointer;
}
.fisarmonica__testa::-webkit-details-marker{display:none}
.fisarmonica__testa::marker{content:""}
.fisarmonica__n{
  font:500 var(--t-etichetta)/1 var(--sans);letter-spacing:var(--s-etichetta);
  color:var(--secondario);font-variant-numeric:tabular-nums;
}
.fisarmonica__testa h3{font-weight:400;font-size:var(--t-h3);line-height:1.25}
.faq .fisarmonica__testa h3{font-size:var(--t-faq)}
.fisarmonica__piu{
  justify-self:end;
  font:300 var(--t-piu)/1 var(--sans);color:var(--titolo);
  transition:rotate var(--t-micro) var(--curva),color var(--t-micro) var(--curva);
}
.fisarmonica[open] .fisarmonica__piu{rotate:45deg;color:var(--sep)}
.fisarmonica[open] .fisarmonica__n{color:var(--sep)}
.fisarmonica__corpo{
  display:grid;grid-template-rows:1fr;
  transition:grid-template-rows var(--t-media) var(--curva);
}
.fisarmonica__dentro{overflow:hidden;min-height:0}
/* L'aria in fondo al corpo sta sull'ULTIMO figlio, non su ogni capoverso:
   con il padding su ogni <p> i capoversi distavano 48 invece dei 24 della
   spec §3.2 (giro 2). */
.fisarmonica__dentro>:last-child{padding-bottom:var(--sp-5)}
.fisarmonica.si-chiude .fisarmonica__corpo{grid-template-rows:0fr}
/* Mentre si chiude, open c'è ancora: «+» e numero tornano a riposo insieme
   al corpo, non dopo. */
.fisarmonica.si-chiude .fisarmonica__piu{rotate:0deg;color:var(--titolo)}
.fisarmonica.si-chiude .fisarmonica__n{color:var(--secondario)}
/* Le soluzioni si aprono in 320 ms, le FAQ in 260 (tabella §8). */
.soluzioni .fisarmonica__corpo{transition-duration:320ms}
/* Link profondo (#faq-03) e riallineamento all'apertura: la domanda si
   ferma a 16 px sotto la testata (l'altezza della testata più il respiro:
   html non ha scroll-padding-top, giro 3). Lo stesso scarto sui bersagli
   del fuoco (veli, scelte, miniature, summary): al Tab Chrome li
   allineava al bordo della finestra, sotto la testata (Correzione 1). */
.fisarmonica,.fisarmonica__testa,.apri,.finiture__scelta,.galleria__minilink{scroll-margin-top:calc(var(--testata-h) + 16px)}
/* L'apertura parte da 0fr dove @starting-style esiste; altrove è secca.
   ⚠ Solo per le aperture fatte a mano (classe js-apre, messa da app.js al
   clic prima che il browser apra): senza la classe, il <details open>
   scritto dal PHP nascerebbe chiuso e si aprirebbe da solo al primo
   disegno, 900 px di salto di layout e ogni ancora sotto sbagliata. */
@starting-style{.fisarmonica.js-apre[open] .fisarmonica__corpo{grid-template-rows:0fr}}

/* ──────────────────────────────────────────────────── Altri comuni ─── */

/* Le tavole: un filetto sopra ciascuna; le fasce colorate lo tengono. */
/* Lo scarto della testata sticky sta sui bersagli delle ancore (§4.1):
   tavole, figure della Gallery, #main dello skip link. Su html NON c'è
   scroll-padding-top (vedi sopra): i due si sommerebbero (176 px) e il
   padding faceva scorrere la pagina a ogni fuoco nella testata. */
.tavola{border-top:1px solid var(--filetto);scroll-margin-top:var(--testata-h)}
.galleria__fig,main{scroll-margin-top:var(--testata-h)}

/* Le persone (tavola 01): nome serif, ruolo etichetta, filetto sotto. */
.persone__voce{display:flex;flex-direction:column;gap:6px;min-height:64px;padding:var(--sp-4) 0;border-bottom:1px solid var(--filetto)}
.persone__nome{font:400 var(--t-h3)/1.2 var(--serif);color:var(--titolo)}
.persone__ruolo{font:500 var(--t-etichetta)/1.4 var(--sans);letter-spacing:var(--s-etichetta);text-transform:uppercase;color:var(--secondario)}
.persone__titolo{margin-bottom:var(--sp-4)}
.persone-blocco{border-top:1px solid var(--filetto);padding-top:var(--sp-5)}

/* Le righe di specifica (tavola 03): il «//» IN LINEA davanti al titolo
   (come ovunque nel sito: «// 01», «// Losone»), taupe a riposo (5.32 sul
   lino scuro: il pietra-ui dava 3.09, l'unico testo sotto soglia) e rosso
   al passaggio del mouse (desktop). Nella riga del prezzo il segno
   precede l'etichetta «A PARTIRE DA», così sta su una riga come
   l'occhiello dell'eroe (giro 2). */
.riga{border-top:1px solid var(--filetto);padding:var(--sp-6) 0}
.righe .riga:last-of-type{border-bottom:1px solid var(--filetto)}
.riga__titolo:not(.riga__titolo--prezzo)::before,.prezzo__etichetta::before{
  content:"//" / "";
  display:inline-block;margin:0 .5em 0 0;
  font:500 var(--t-etichetta)/1 var(--sans);letter-spacing:var(--s-etichetta);
  color:var(--secondario);
  transition:color var(--t-micro) var(--curva);
}
.riga__titolo:not(.riga__titolo--prezzo)::before{vertical-align:.35em}
.prezzo__etichetta{
  display:block;margin-bottom:var(--sp-2);
  font:500 var(--t-etichetta)/1 var(--sans);letter-spacing:var(--s-etichetta);text-transform:uppercase;
  color:var(--secondario);
}
/* «CHF» e «XXX.XXX» sulla stessa riga, sempre (§5.3): l'etichetta sopra va a capo da sé. */
.riga__titolo--prezzo{white-space:nowrap}
.prezzo__etichetta{white-space:normal}

/* «// Altre domande? Scrivici» (tavola 05) */
.faq__scrivi a{
  font:500 var(--t-etichetta)/1.4 var(--sans);letter-spacing:var(--s-etichetta);text-transform:uppercase;
  color:var(--titolo);
}
.faq__scrivi span{color:var(--sep)}

/* Contatori delle strisce e della Gallery (il PHP scrive «01 / nn»). */
.striscia__conta,.galleria__conta{
  font:500 var(--t-conta)/1 var(--sans);letter-spacing:var(--s-etichetta);
  color:var(--secondario);font-variant-numeric:tabular-nums;
}
.galleria__minin{
  display:block;margin-top:var(--sp-1);
  font:500 var(--t-etichetta)/1 var(--sans);letter-spacing:var(--s-etichetta);color:var(--secondario);
}

/* Recapiti (tavola 06): il blocco della ragione sociale su tre righe
   («Uniko Sagl», via, «CH-6616 Losone»), poi T. M. W., poi il blocco
   «Amministrazione» con le sue righe a 8 px dall'etichetta (non a 24).
   Il diagramma Losone // Genova non c'è più dal 14 set: regole tolte. */
.recapiti__blocco{display:flex;flex-direction:column;gap:var(--sp-1)}
.recapiti__blocco+.recapiti__blocco,.recapiti__righe,.recapiti__righe+.recapiti__blocco{margin-top:var(--sp-5)}
.recapiti__blocco .recapiti__righe{margin-top:var(--sp-2)}
.recapiti__valore{line-height:1.5}
.recapiti__etichetta{
  font:500 var(--t-etichetta)/1 var(--sans);letter-spacing:var(--s-etichetta);text-transform:uppercase;
  color:var(--secondario);
}
.recapiti__valore{color:var(--titolo)}
.recapiti__righe li{min-height:48px;display:flex;align-items:center;gap:var(--sp-2);color:var(--titolo)}

/* ────────────────────────────────────────────────────────── Modulo ─── */

/* Campi trasparenti con il solo filetto sotto, etichetta sopra, mai un
   segnaposto dentro (§9.1). I colori vengono dal contesto (navy). */
.campo{margin-top:var(--sp-5);scroll-margin-top:calc(var(--testata-h) + 24px)}   /* lo scorrimento agli errori (app.js): la testata più il respiro */
.campo>label{
  display:block;margin-bottom:var(--sp-2);
  font:500 var(--t-etichetta)/1 var(--sans);letter-spacing:var(--s-etichetta);text-transform:uppercase;
  color:var(--secondario);
}
.campo input:not([type=checkbox]),.campo select,.campo textarea{
  display:block;width:100%;min-height:52px;padding:12px 0;
  border:0;border-bottom:1px solid var(--bordo-ui);border-radius:0;
  background:transparent;color:var(--titolo);
  font:400 var(--t-campo)/1.4 var(--sans);   /* 16 px: sotto, iOS ingrandisce */
}
.campo textarea{min-height:140px;resize:vertical}
.campo select option{color:var(--grafite);background:var(--lino)}
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  border-bottom:2px solid var(--titolo);
  outline:2px solid var(--fuoco);outline-offset:3px;
}
/* L'autofill di Chrome dipinge il campo di giallo/bianco: si tiene il navy. */
.campo input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--fondo) inset;
  -webkit-text-fill-color:var(--titolo);
  caret-color:var(--titolo);
}
.campo--errore input,.campo--errore select,.campo--errore textarea{border-bottom:2px solid var(--errore)}
.campo__errore{margin-top:var(--sp-2);font-size:var(--t-didascalia);line-height:1.45;color:var(--errore);flex-basis:100%}
.modulo__riepilogo{
  margin-top:var(--sp-5);padding:var(--sp-3) 0;
  border-top:1px solid var(--errore);border-bottom:1px solid var(--errore);
  color:var(--errore);font-size:var(--t-piccolo);line-height:1.5;
}
.modulo__riepilogo li+li{margin-top:var(--sp-1)}
/* Il consenso: casella 24 × 24 in una riga alta 44, il link all'informativa
   FUORI dall'etichetta (dentro spunterebbe la casella al clic). */
.campo--consenso{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-2) var(--sp-3);min-height:44px}
.campo--consenso input[type=checkbox]{width:24px;height:24px;margin:2px 0 0;flex:none;accent-color:var(--titolo)}
/* Eredita da .campo>label il maiuscolo spaziato: qui è una frase, non un'etichetta. */
.campo--consenso label{flex:1 1 calc(100% - 36px);font-size:var(--t-piccolo);line-height:1.5;color:var(--testo);text-transform:none;letter-spacing:0}
.campo--consenso a{margin-left:36px;font-size:var(--t-piccolo)}
.modulo__nota{margin-top:var(--sp-4);font-size:var(--t-didascalia);line-height:1.45;color:var(--secondario)}
.modulo__invia{margin-top:var(--sp-6);min-height:56px;width:100%}

/* ─────────────────────────────────────────────────────── Banner LPD ─── */

/* Compare e sparisce, nessuna animazione, l'unico riquadro bordato del
   sito. Posizione e misure in desktop.css / mobile.css. */
.lpd{
  background:var(--lino-scuro);border:1px solid var(--navy);
  color:var(--grafite);font-size:var(--t-piccolo);line-height:1.5;
}
.lpd__form{margin-top:var(--sp-3)}
.lpd__ok{min-height:44px}

/* ────────────────────────────────────────────────────────── Entrate ─── */

/* Le entrate esistono SOLO sotto html.js-pronto (lo mette app.js come
   prima istruzione): se lo script non arriva, la pagina è intera. Il JS
   aggiunge .in-vista una volta sola (IO, ultima voce). Figure: solo
   opacità, mai translate sulle foto. */
.entra{transition:opacity var(--t-entrata) var(--curva),transform var(--t-entrata) var(--curva);transition-delay:var(--ritardo,0ms)}
html.js-pronto .entra:not(.in-vista){opacity:0;transform:translateY(12px)}
html.js-pronto .cornice.entra:not(.in-vista){transform:none}
/* Chi riceve il fuoco si vede subito (il Tab porta un blocco al bordo della
   finestra, dove l'osservatore non scatta); app.js poi mette in-vista. */
html.js-pronto .entra:not(.in-vista):focus-within{opacity:1;transform:none;transition:none}
.i1{--ritardo:0ms}.i2{--ritardo:80ms}.i3{--ritardo:160ms}.i4{--ritardo:240ms}.i5{--ritardo:320ms}

/* I testi dell'eroe entrano al caricamento, senza JS: fade-up 480 ms
   scaglionato di 80 ms, fill-mode BACKWARDS (mai both: incolla il
   transform e uccide gli hover). La foto non si anima: è l'LCP. */
@keyframes kc-entra{from{opacity:0;transform:translateY(12px)}}
.entra-subito{animation:kc-entra var(--t-entrata) var(--curva) backwards;animation-delay:var(--ritardo,0ms)}

/* La tacca dell'eroe: tre cicli da 1500 ms e poi ferma. 4.5 s in tutto:
   SOTTO i 5 s di WCAG 2.2.2, così non serve un comando di pausa (con
   1800 × 3 = 5.4 s la soglia era superata, giro 2). */
@keyframes kc-tacca{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(8px);opacity:1}}
.eroe__tacca{display:block;width:1px;height:40px;background:var(--navy);animation:kc-tacca 1500ms ease-in-out 800ms 3 backwards}

/* ─────────────────────────────────────────────── Movimento ridotto ─── */

/* Durate azzerate, nessuna entrata, tacca ferma, scorrimento secco. Gli
   stati (colori, open, aria-current) restano: sono informazione. Le
   linee temporali di scorrimento (filetto 64) le spegne desktop.css con
   una regola esplicita: questo globale non le tocca. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    animation-delay:0ms!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
  }
  html{scroll-behavior:auto}
  .eroe__tacca{animation:none}
  html.js-pronto .entra:not(.in-vista){opacity:1;transform:none}
}