/* ═══════════════════════════════════════════════════════════════════════
   KleinCASA: desktop.css, caricato con media="(min-width: 1024px)".
   ───────────────────────────────────────────────────────────────────────
   TUTTO il layout da grande schermo (DESIGN-SPEC §3b, §4.1, §5, §6, §8;
   AGGIORNAMENTO-2026-09-14 §4): la scala tipografica desktop nei token,
   la testata sticky con lo stato compatto e il logo del cliente, la
   griglia a 12 colonne con la colonna A ferma e la B che scorre, l'eroe a
   due pannelli, l'intro e le quattro disposizioni delle soluzioni
   (sequenza, striscia a rapporto variabile, selettore delle finiture), la
   planche della Gallery con le viste a schermo intero, la linguetta, il
   piè, le pagine secondarie. Gli hover stanno tutti in fondo, dentro
   @media (hover: hover) and (pointer: fine): un iPad in paesaggio carica
   questo foglio e senza la guardia gli hover resterebbero incollati dopo
   il tocco.

   Sotto i 1024 px questo foglio NON viene applicato (media query sul
   <link>): niente qui deve contare su mobile.css e viceversa.
   ═══════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────── Token da 1024 (§3b) ─── */

:root{
  --t-h1:clamp(60px,6vw,112px);      /* 1024: 61 · 1280: 77 · 1440: 86 · 1920: 112 */
  --t-h2:clamp(44px,3.6vw,64px);     /* 1024: 44 · 1440: 52 · 1920: 64 */
  --t-h3:28px;
  --t-faq:26px;
  --t-lead:20px;
  --t-sotto:26px;
  --t-corpo:17px;
  --t-campo:17px;
  --t-piccolo:14px;
  --t-etichetta:12px;
  --t-pulsante:13px;
  --t-didascalia:13px;
  --t-piu:28px;
  --t-conta:32px;                    /* contatore della Gallery, Cormorant 300 */
  --t-visore:22px;                   /* didascalia del visore, corsivo */

  --tavola-y:160px;                  /* 1024-1279: 120 · da 1920: 200 */
  --titolo-contenuto:40px;
  --margine:clamp(64px,4vw,96px);    /* 64 fissi fino a 1600: a destra ci vive la linguetta */
  --testata-h:88px;
  --colonna-a-top:120px;             /* aggancio delle colonne sticky */
  --gutter:32px;
}
/* Scala desktop (§3b): h1 a interlinea 0.98, h2 con spaziatura -0.005em. */
h1{line-height:.98}
h2{letter-spacing:-.005em}
@media (max-width:1279.98px){:root{--t-corpo:16px;--tavola-y:120px}}
@media (min-width:1920px){:root{--tavola-y:200px}}

/* ─────────────────────────────────────────────── Contenitore e griglia ─── */

/* Fluido, 1600 di area interna al massimo, margini di 64 (96 oltre i 1600).
   Il max-width comprende i margini: a 1920 restano 160 px di lino per lato. */
.contenitore{
  width:100%;
  max-width:calc(var(--contenitore) + 2 * var(--margine));
  margin-inline:auto;
  padding-inline:var(--margine);
}

/* Ogni tavola è una griglia a 12 colonne, gutter 32: colonna A = 1-4
   (sticky), colonna 5 vuota, colonna B = 6-12. Sotto i 1280 la colonna
   vuota sparisce (B = 5-12). Il filetto di apertura è un ::before che
   occupa tutta la riga, così resta «a tutta larghezza interna» e non
   attraversa i margini. */
.tavola{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--gutter);
  max-width:calc(var(--contenitore) + 2 * var(--margine));
  margin-inline:auto;
  padding:0 var(--margine) var(--tavola-y);
  border-top:0;
}
.tavola::before{
  content:"";
  grid-column:1/-1;
  height:1px;
  margin-bottom:var(--tavola-y);
  background:var(--filetto);
}
.tavola__a{
  grid-column:1/5;
  position:sticky;
  top:var(--colonna-a-top);
  align-self:start;
  min-width:0;
}
.tavola__b{grid-column:6/-1;min-width:0}
@media (max-width:1279.98px){.tavola__b{grid-column:5/-1}}

/* Le fasce (03, 05, 06) vanno a tutta larghezza: il fondo copre lo
   schermo, la griglia resta dentro i 1600 grazie al padding calcolato. */
.fascia{
  max-width:none;
  padding:120px max(var(--margine),calc((100% - var(--contenitore)) / 2)) 120px;
  border-top:1px solid var(--filetto);
  border-bottom:1px solid var(--filetto);
}
.fascia::before{display:none}
/* Due fasce di seguito (05 → 06): un filetto solo fra le due. */
.fascia+.fascia{border-top:0}
.fascia--navy{padding-bottom:96px;border-bottom:0}

/* Blocchi della colonna B: 24 fra capoversi, 48 attorno a figure e blocchi. */
.tavola__b>*+*{margin-top:var(--capoverso)}
.tavola__b>.cornice,
.tavola__b>.cornice+*,
.tavola__b>.persone-blocco{margin-top:var(--sp-8)}
.tavola__b>.lead+.fisarmonica{margin-top:var(--sp-7)}
/* L'intro delle soluzioni (testo + foto) è un blocco: 48 prima del primo accordion. */
.tavola__b>.soluzioni__intro+.fisarmonica{margin-top:var(--sp-8)}
/* La nota di provenienza (una per tavola): vicina alla figura, allineata al corpo degli accordion. */
.tavola__b>.cornice+.nota-vivo{margin-top:var(--sp-3)}
.soluzioni .nota-vivo{padding-left:64px}

/* ────────────────────────────────────────────────────────── Testata ─── */

/* Sticky, mai nascosta (§4.1). Altezza 88, con JS 64 oltre la sentinella:
   height e l'altezza del logo sono le uniche due proprietà di layout in
   transizione di tutto il sito. */
.testata{
  position:sticky;top:0;z-index:40;
  height:var(--testata-h);
  background:var(--lino);
  border-bottom:1px solid var(--pietra);
  transition:height var(--t-micro) var(--curva);
}
.testata.is-compatta{height:64px}
.testata__interno{display:flex;align-items:center;gap:var(--sp-6);height:100%}
/* Il logo del cliente (AGGIORNAMENTO §4.7, MARKUP §2): 54 px di altezza in
   testata, 42 compatta (dal 17 set 2026, su richiesta del cliente: erano 44
   e 36); la larghezza la dà il rapporto del viewBox. Le regole in
   font-size restano per il ripiego tipografico marchio_testo(). */
/* Il link resta alto 44 (bersaglio) col logo a 36: il logo al centro del
   link, non in cima (compatto stava 4.5 px troppo in alto, Correzione 1). */
.testata .marchio{display:inline-flex;align-items:center;font-size:28px;min-height:44px;transition:font-size var(--t-micro) var(--curva)}   /* bersaglio 44 */
.testata.is-compatta .marchio{font-size:22px}
.testata .marchio__img{height:54px;width:auto;transition:height var(--t-micro) var(--curva)}
.testata.is-compatta .marchio__img{height:42px}

/* Le voci in forma breve, Jost 500 12 maiuscolo, bersaglio 44 (16 + 12 + 16).
   Il «//» è rosso sempre: è il segno della griglia del cliente, non uno stato. */
.nav{margin-left:auto}
.nav__voci{display:flex;align-items:center}
.nav__voce{
  display:block;padding:16px 8px;   /* 8 di qua e 6 sul «//» = i 14 di aria; «FAQ» arriva a 44 */
  font:500 var(--t-etichetta)/1 var(--sans);letter-spacing:var(--s-etichetta);text-transform:uppercase;
  color:var(--navy);white-space:nowrap;
  transition:color var(--t-micro) var(--curva);
}
.nav__sep{
  padding:0 6px;
  font:500 var(--t-etichetta)/1 var(--sans);letter-spacing:var(--s-etichetta);
  color:var(--rosso);
}
/* Scrollspy (desktop.js mette .nav--spia sul nav e aria-current="location"
   sulla voce): l'attiva resta navy, le altre scendono a taupe. Senza JS
   la classe non c'è e tutte le voci restano navy. */
.nav--spia .nav__voce{color:var(--taupe)}
.nav--spia .nav__voce[aria-current]{color:var(--navy)}

/* IT // DE // EN: la corrente in navy con il filetto sotto, le altre taupe. */
.lingue__voci{display:flex;align-items:center}
.lingue__voce{
  display:block;padding:16px 16px;   /* «IT» a 12 px è 13 px largo: con 16 per lato fa 45 */
  font:500 var(--t-etichetta)/1 var(--sans);letter-spacing:var(--s-etichetta);text-transform:uppercase;
  color:var(--taupe);
  transition:color var(--t-micro) var(--curva);
}
.lingue__voci>li:last-child .lingue__voce{margin-right:-16px}   /* testo a filo del margine, bersaglio intero */
.lingue__voce[aria-current]{
  color:var(--navy);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--navy);
}
.lingue__sep{
  padding:0;
  font:500 var(--t-etichetta)/1 var(--sans);letter-spacing:var(--s-etichetta);
  color:var(--rosso);
}

/* Il «+» del menu: esiste solo fra 1024 e 1279 (il tedesco in forma breve
   misura 635 px e a 1024 non ci sta, §4.1). Icona senza parola: il nome è
   nell'aria-label. */
.testata__menu{
  display:grid;place-items:center;
  width:44px;height:44px;
  font:300 28px/1 var(--sans);color:var(--navy);
}
.testata__menu span{display:block;transition:rotate var(--t-micro) var(--curva)}
.testata__menu[aria-expanded="true"] span{rotate:45deg}
@media (min-width:1280px){
  .testata__menu{display:none}
}
@media (max-width:1279.98px){
  .nav{display:none}
  .lingue{margin-left:auto}   /* senza il nav, sono le lingue a spingere il «+» a destra */
  /* Con una lingua sola le lingue non ci sono e nessuno spingeva il «+»
     (incollato al logo, Correzione 1): il margine sta sul «+», e cede alle
     lingue quando tornano. */
  .testata__menu{margin-left:auto}
  .lingue~.testata__menu{margin-left:0}
}

/* ───────────────────────────── Menu a schermo intero, fascia 1024-1279 ─── */

/* mobile.css non è caricato qui: il pannello del «+» si disegna in questo
   foglio con le stesse regole di §4.2 (navy, voci Cormorant 36, lingue per
   esteso, telefono, pulsante lino). :target senza JS, hidden con JS. */
@media (max-width:1279.98px){
  #menu:target{display:grid}
  .menu{
    position:fixed;inset:0;z-index:50;
    grid-template-rows:auto 1fr auto;
    padding:0 var(--margine) var(--sp-5);
    overflow:auto;
  }
  .menu__testa{display:flex;align-items:center;justify-content:space-between;height:var(--testata-h)}
  .menu .marchio__img{height:36px;width:auto}   /* la variante lino del logo, come sul telefono */
  .menu__chiudi{
    display:grid;place-items:center;
    width:44px;height:44px;
    font:300 28px/1 var(--sans);color:var(--lino);
  }
  .menu__chiudi span{display:block;rotate:45deg}
  .menu__voci{align-self:center;padding:var(--sp-5) 0}
  .menu__voce{min-height:64px;padding:var(--sp-2) 0}
  .occhiello--menu{display:block;margin-bottom:var(--sp-1)}
  .menu__link{display:flex;align-items:center;min-height:44px;font:300 36px/1.2 var(--serif);color:var(--lino)}   /* 36 × 1.2 = 43: il bersaglio si porta a 44 */
  .menu__coda{
    display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-6);
    padding-top:var(--sp-5);
    border-top:1px solid var(--filetto);
  }
  .menu__lingue{display:flex;gap:var(--sp-5)}
  .menu__lingua{
    display:inline-flex;align-items:center;min-height:44px;
    font:500 var(--t-pulsante)/1 var(--sans);letter-spacing:var(--s-pulsante);text-transform:uppercase;
    color:var(--lino);
  }
  .menu__lingua[aria-current]{border-bottom:1px solid var(--lino)}
  .menu__telefono{display:inline-flex;align-items:center;min-height:44px;color:var(--lino)}
  .menu__cta{flex-basis:100%;min-height:52px}
}

/* ───────────────────────────────────────────────────────── Linguetta ─── */

/* «// Richiedi informazioni» fissa a destra, a metà altezza, dorso di
   libro (writing-mode verticale + rotate 180: proprietà singole, mai
   transform). Sta nel margine di 64 px: 52 in hover + 12 di lino, quindi
   non copre mai la colonna B. Il JS la mostra passato l'eroe e la
   nasconde sui Contatti; senza app.js è sempre visibile. z-index 45. */
.linguetta{
  position:fixed;right:0;top:50%;z-index:45;
  display:flex;align-items:center;justify-content:center;gap:.7em;
  width:44px;max-height:60vh;padding:20px 0;
  writing-mode:vertical-rl;
  rotate:180deg;
  translate:8px -50%;
  opacity:0;visibility:hidden;   /* invisibile = fuori dal Tab e dal lettore di schermo, come la barra del pollice */
  color:var(--bianco);
  font:500 var(--t-pulsante)/1 var(--sans);letter-spacing:var(--s-pulsante);text-transform:uppercase;
  white-space:nowrap;overflow:hidden;
  transition:opacity var(--t-micro) var(--curva),translate var(--t-micro) var(--curva),width var(--t-micro) var(--curva),visibility 0s linear var(--t-micro);
}
.linguetta__sep{color:var(--rosso-navy)}
/* Il fuoco: l'anello di base.css sta 3 px FUORI, cioè lino sul lino della
   pagina (1.10:1), invisibile. Qui va DENTRO la linguetta, lino sul navy (12.9:1). */
.linguetta:focus-visible{outline-color:var(--lino);outline-offset:-5px}
.linguetta.is-visibile:not(.is-nascosta),
html:not(.js-pronto) .linguetta:not(.is-nascosta){
  opacity:1;visibility:visible;translate:0 -50%;
  transition:opacity var(--t-micro) var(--curva),translate var(--t-micro) var(--curva),width var(--t-micro) var(--curva),visibility 0s;
}

/* ──────────────────────────────────────────────────────────── Eroe ─── */

/* Un solo riquadro incorniciato a due pannelli (§5.0 b): lino con il
   titolo a sinistra, la foto del cliente a destra, un filetto e una tacca
   sotto. Altezza in svh (non vh): a 1366 × 768 il riquadro è 568 e la
   tacca resta sopra la piega. */
.eroe{
  max-width:calc(var(--contenitore) + 2 * var(--margine));
  margin-inline:auto;
  padding:var(--sp-5) var(--margine) var(--sp-10);   /* sotto: tacca 40 + 56 di lino */
}
.eroe__riquadro{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(360px,42%,600px);   /* foto: 376 · 484 · 551 · 600 */
  /* min-height, non height: con la spaziatura del testo di WCAG 1.4.12
     (interlinea 1.5, tracking .12em) il tedesco a 1366 × 768 sfondava il
     riquadro e la riga meta finiva sopra la tavola 01 (giro 2). In
     condizioni normali il contenuto sta sotto il minimo e nulla cambia. */
  min-height:clamp(560px,calc(100svh - 200px),860px);   /* a 768 di altezza: 568, la tacca finisce a 746 anche animata */
  border:1px solid var(--pietra);
}
/* ⚠ La riga della griglia la dettano il testo e il min-height, MAI la foto:
   con l'img in flusso (height:100% che in una riga «auto» vale auto) il
   PNG 767 × 1240 imponeva la sua altezza (890 a 1440, 840 a 1366) e
   filetto e tacca finivano sotto la piega a ogni larghezza (giro 3). La
   foto è assoluta nel pannello e si ritaglia con object-fit. */
/* Nel DOM la foto viene prima del testo (ordine del Tab sul telefono):
   qui la griglia la mette a destra. */
.eroe__testo{
  grid-column:1;grid-row:1;
  display:flex;flex-direction:column;
  min-width:0;min-height:0;
  padding:var(--sp-8);
}
.eroe__foto{grid-column:2;grid-row:1}
@media (max-width:1279.98px){
  .eroe__testo{padding:var(--sp-6)}
  /* «Die Lösungen» + «Informationen anfordern» = 469 px in 454 utili a
     1024 con 28 di padding: con 20 stanno su una riga (437). */
  .eroe__azioni .pulsante{padding:0 20px}
}
/* Occhiello in alto, riga meta in fondo, il gruppo del titolo centrato
   nel vuoto fra i due (margini automatici uguali sopra e sotto). Senza la
   riga meta (uscita il 15 set 2026) l'automatico di sotto lo danno i
   pulsanti, che sono l'ultimo figlio: il gruppo resta centrato. */
.eroe__testo h1{margin-top:auto}
.eroe__testo>.eroe__azioni:last-child{margin-bottom:auto}
.eroe__sotto{margin-top:var(--sp-5)}
.eroe__azioni{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-7)}
.eroe__meta{
  display:flex;flex-wrap:wrap;row-gap:var(--sp-2);
  margin-top:auto;padding-top:var(--sp-7);
}
.eroe__meta li{white-space:nowrap}
.eroe__meta li+li::before{content:"//" / "";margin:0 .6em}   /* muto per lo screen reader (giro 3); 7 px per lato: con 11 la riga inglese a 1440 lasciava «// FROM 15 M²» orfana */
.eroe__foto{
  position:relative;
  min-height:0;overflow:hidden;
  border-left:1px solid var(--pietra);
}
.eroe__img{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 45%;   /* balcone e vetrina con la scala */
}
/* Il velo dell'EROE non esiste su desktop: né per il mouse né per il Tab,
   e se l'hash #foto-eroe arriva da fuori non si apre nulla (l'id vince su
   qualunque :target o :not([hidden]) di base.css). Gli altri veli (Gallery
   e soluzioni) restano e aprono la loro vista: sezione «Viste» più sotto. */
.eroe__apri{display:none}
#foto-eroe{display:none}
/* Il filetto a tutta larghezza interna e, al centro, la tacca 1 × 40 navy
   (la citazione di Nokken che il cliente ha visto). Sotto, nessuna parola. */
.eroe__filetto{position:relative;height:1px;margin-top:20px;background:var(--pietra)}
.eroe__tacca{position:absolute;left:50%;top:0}

/* ─────────────────────────────────────────────── Colonna A comune ─── */

/* Il filetto da 64 px sotto l'occhiello si riempie con lo scorrimento
   della colonna B (§6.6): la colonna A è sticky, quindi la linea
   temporale è la B, esposta alla tavola con timeline-scope. Fill-mode
   forwards, non both: prima dell'ingresso vale lo stile base, che è già
   0 %, e dopo l'uscita resta pieno. Nel navy si riempie di lino. */
@supports (timeline-scope:--x){
  .tavola{timeline-scope:--tavola}
  .tavola__b{view-timeline:--tavola block}
  .tavola__a .occhiello::after{
    background:linear-gradient(var(--titolo),var(--titolo)) left/0% 1px no-repeat,var(--filetto);
    animation:kc-riempi linear forwards;
    animation-timeline:--tavola;
    animation-range:entry 0% exit 100%;
  }
  @keyframes kc-riempi{to{background-size:100% 1px,auto}}
}
/* Il filetto anche dove non c'è la colonna A (testa della Gallery, pagine
   secondarie): fermo, pietra. */
.galleria__testa .occhiello::after,
.pagina__corpo .occhiello::after{
  content:"";display:block;
  width:var(--filetto-occhiello);height:1px;
  margin-top:var(--sp-4);
  background:var(--filetto);
}

/* ────────────────────────────────────────────── Tavola 01: Chi siamo ─── */

/* Dal 14 settembre la colonna A porta solo occhiello e h2 (niente sedi:
   «è segnalato già nel testo», dice il cliente) e la colonna B solo i
   cinque capoversi e le persone: niente cifra «1998», niente figure. La
   colonna A sticky regge da sé: occhiello, filetto e h2 fanno 150 px. */

/* Le persone: due colonne 50/50, filetto sotto ogni riga. */
.persone{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gutter)}
.persone__voce{transition:border-color 160ms var(--curva)}

/* ─────────────────────────────────────────── Tavola 02: Le soluzioni ─── */

/* Il riquadro anteprima (colonna A, a 40 px dall'h2): cornice 4:5 con le
   tre foto sovrapposte; si vede quella della soluzione aperta. La
   larghezza è legata all'altezza della finestra così la colonna sticky
   aggancia sempre (sotto i 624 utili a 1366 × 768). Mai oltre 416: il
   ritaglio della scala è 430 e non si ingrandisce. */
/* 320 e non i 296 della spec §5.2 (b): con 296 a 768 di altezza il
   riquadro fa 378 × 472 e la colonna A misura 635, sopra i 624 utili
   (viewport − 144, §13.2); con 320 fa 358 × 448 e la colonna 611.
   Scostamento dichiarato nella spec (giro 2). */
.anteprima{margin-top:var(--sp-7);width:min(100%,416px,calc((100svh - 320px) * .8))}   /* 416: le -4-5 escono a 300/606/832 (808 la legno-40-sera, il suo nativo): la 832 copre i 416 CSS a dpr 2, non si ingrandiscono; a 900 di altezza vince il tetto (416 × 520) */
.anteprima__img{opacity:0;transition:opacity var(--t-media) var(--curva)}
.anteprima__img--1{opacity:1}
/* Quattro soluzioni, quattro ritagli -4-5 già centrati da tools/immagini.py:
   nessun object-position. :has dove c'è, .mostra-n da desktop.js altrove. */
.soluzioni:has(#sol-02[open]) .anteprima__img--2,
.soluzioni:has(#sol-03[open]) .anteprima__img--3,
.soluzioni:has(#sol-04[open]) .anteprima__img--4,
.soluzioni.mostra-2 .anteprima__img--2,
.soluzioni.mostra-3 .anteprima__img--3,
.soluzioni.mostra-4 .anteprima__img--4{opacity:1}

/* L'intro (AGGIORNAMENTO §4.3): due colonne dentro la colonna B, testo a
   sinistra (1fr) e la foto dell'officina 2:3 a destra a 300 (300 × 450);
   fra 1024 e 1279 la colonna B è 587/659 e la foto scende a 240, così al
   testo restano 315 px. L'h3 è quello degli accordion (Cormorant 400 28). */
.soluzioni__intro{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--gutter);align-items:start}
@media (max-width:1279.98px){.soluzioni__intro{grid-template-columns:minmax(0,1fr) 240px}}
.soluzioni__intro-foto{max-width:300px}

/* Accordion (soluzioni e FAQ): summary 64 · 1fr · 44, alto ≥ 88 (FAQ 72);
   il corpo rientra di 64 e resta allineato all'h3. */
.fisarmonica__testa{grid-template-columns:64px minmax(0,1fr) 44px;column-gap:0;min-height:88px}
.faq .fisarmonica__testa{min-height:72px}
.fisarmonica__dentro{padding:0 0 var(--sp-2) 64px}
.faq .fisarmonica__dentro{padding-top:var(--sp-2)}
/* Il corpo ha overflow:hidden: l'anello dei veli (5 px fuori dal quadro)
   era tagliato a DESTRA. 6 px di aria dentro il ritaglio e altrettanti
   fuori, come mobile.css; le figure restano dove stavano (Correzione 1). */
.soluzioni .fisarmonica__dentro{padding-right:6px;margin-right:-6px}
/* Le figure del corpo (sequenza, striscia, finiture, tessere) a 32 px dal
   capoverso (§5.2 b): senza margine la foto toccava l'ultima riga (giro 3). */
.fisarmonica__dentro>.striscia,.fisarmonica__dentro>.sequenza,.fisarmonica__dentro>.finiture,.fisarmonica__dentro>.tessere{margin-top:var(--sp-6)}

/* Disposizione «striscia» (sol-02, sol-03): cornici a rapporto VARIABILE,
   deciso dal PHP dall'indice (MARKUP §6.5). Griglia a due colonne uguali
   che segue il corpo come .sequenza__intera (328 a 1440, 356 a 1536, 396
   a 1680, 412 da 1920: il corpo è 688 / 744 / 824 / 856; le sizes del PHP
   dicono le stesse misure): i 16:9 due per riga (328 × 184 a 1440:
   impilati a 640 i quattro render di sol-02 facevano 1965 px, Correzione
   1), le altre orizzontali una per riga a 640, le verticali (2:3, 4:5) e
   le quadrate a due per riga, con tetto 450 in cover. Nessun max-width:
   il tetto a 688 (fino al 14 set) la fermava a 1440 mentre la colonna
   cresceva, con 168 px di lino vuoto a destra a 1920 (RD-02). Il
   contatore è cosa del telefono. */
.striscia{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter);
  align-items:start;
  margin-bottom:var(--sp-5);
}
.striscia .cornice--3-2,.striscia .cornice--16-10,.striscia .cornice--4-3{grid-column:1/-1;max-width:640px}
.striscia .cornice--2-3,.striscia .cornice--4-5{max-width:300px}
.striscia .cornice--2-3 .cornice__img,.striscia .cornice--4-5 .cornice__img{max-height:450px;object-fit:cover}
/* Striscia MISTA (sol-03: due 3:2 e una 2:3): la verticale da sola in
   prima colonna lasciava 388 px di lino (Correzione 1). Le orizzontali
   impilate a sinistra, la verticale a destra su due righe: a 1440 due 3:2
   a 328 (470 in tutto) accanto a una 2:3 a 328 × 492 (a 1920: 412, 582 e
   412 × 618); dense la porta alle righe 1-2 anche se nel DOM viene dopo.
   Senza :has, la griglia di prima. */
.striscia:not(.sequenza__tre):has(>.cornice--2-3,>.cornice--4-5){grid-auto-flow:row dense}
.striscia:not(.sequenza__tre):has(>.cornice--2-3,>.cornice--4-5)>.cornice--3-2,
.striscia:not(.sequenza__tre):has(>.cornice--2-3,>.cornice--4-5)>.cornice--16-9,
.striscia:not(.sequenza__tre):has(>.cornice--2-3,>.cornice--4-5)>.cornice--16-10,
.striscia:not(.sequenza__tre):has(>.cornice--2-3,>.cornice--4-5)>.cornice--4-3{grid-column:1;max-width:none}
.striscia:not(.sequenza__tre):has(>.cornice--2-3,>.cornice--4-5)>.cornice--2-3,
.striscia:not(.sequenza__tre):has(>.cornice--2-3,>.cornice--4-5)>.cornice--4-5{grid-column:2;grid-row:span 2;max-width:none}
.striscia:not(.sequenza__tre):has(>.cornice--2-3,>.cornice--4-5)>.cornice--2-3 .cornice__img,
.striscia:not(.sequenza__tre):has(>.cornice--2-3,>.cornice--4-5)>.cornice--4-5 .cornice__img{max-height:none}
.striscia__conta{display:none}

/* Disposizione «sequenza» (sol-01): la prima figura (il trittico 2:1) a
   tutta larghezza del corpo (688; 856 da 1920), poi le tre verticali 2:3
   in tre colonne con gutter 32: 208 × 312 (264 × 396 da 1920; 153 × 229 a
   1024). .sequenza__tre porta anche .striscia (per il telefono): qui si
   sovrascrivono griglia e margini; l'aria in fondo la dà il padding
   dell'ultimo figlio del corpo (base.css). */
.sequenza__intera{max-width:100%}
.sequenza .striscia{
  grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter);
  margin:var(--gutter) 0 0;
}
.sequenza .striscia .cornice--2-3{max-width:none}

/* Disposizione «finiture» (sol-04): il selettore (AGGIORNAMENTO §4.3).
   SENZA app.js (html senza js-pronto) le quattro figure stanno tutte in
   vista in griglia 2 × 2 (328 × 492 a 1440) e le scelte sotto, in fila:
   i link #fin-0n portano alla figura (:target, con lo scarto della
   testata). CON app.js il quadro 2:3 sta a sinistra a 427 (427 × 640: è
   il «max-height 640» della spec) con le quattro figure sovrapposte e una
   sola visibile (.is-corrente; visibility e non solo opacità: dentro ogni
   figura c'è il velo .apri: la sovrapposizione, l'opacità e la visibilità
   sono in base.css), e le scelte in colonna a destra: miniatura 1:1 a 72
   con il nome ACCANTO (base.css le ha impilate e larghe al massimo 112,
   per la fila del telefono e del ripiego). La seconda colonna è
   minmax(160px,auto): a 1024 (corpo 523) la sua larghezza è quella del
   nome più lungo e il quadro scende a 277. */
.finiture__quadro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.finiture__fig .cornice__img{max-height:640px;object-fit:cover}
.finiture__nome{transition:color 160ms var(--curva)}
html.js-pronto .finiture{display:grid;grid-template-columns:minmax(0,427px) minmax(160px,auto);gap:var(--gutter);align-items:start}
html.js-pronto .finiture__quadro{grid-template-columns:minmax(0,1fr);gap:0}
html.js-pronto .finiture__scelte{flex-direction:column;flex-wrap:nowrap;gap:var(--sp-3);margin-top:0}
html.js-pronto .finiture__scelta{flex-direction:row;align-items:center;gap:var(--sp-3);max-width:none;min-height:72px}
html.js-pronto .finiture__nome{text-align:left}

/* Le sei tessere 1:1 in griglia 3 × 2, gutter 24: 213 a 1440, 269 a 1920
   (disposizione conservata per compatibilità: nessuna soluzione la usa). */
.tessere{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}

/* ──────────────────────────────── Tavola 03: Investimento & Finanza ─── */

/* Tre righe di specifica: titolo a sinistra (2fr), testo a destra (3fr).
   Sotto i 1280 metà e metà: a 222 px il titolo si sillabava
   («accessi-bili») e «CHF XXX.XXX» andava a capo (giro 2). */
.riga{display:grid;grid-template-columns:2fr 3fr;gap:var(--gutter);padding:var(--sp-7) 0}
@media (max-width:1279.98px){.riga{grid-template-columns:1fr 1fr}}
.riga__testo p{max-width:62ch}
.righe__azione{margin-top:var(--sp-7)}
.righe__azione .pulsante{min-height:44px}

/* ────────────────────────────────────────────── Tavola 04: Gallery ─── */

/* La planche rompe le due colonne: testa a tutta larghezza con il
   contatore a destra, poi visore (colonne 1-8, max 800) e scheda delle
   miniature (9-12). */
.galleria__testa{
  grid-column:1/-1;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  margin-bottom:var(--sp-7);
}
.galleria__testa .occhiello{grid-column:1/-1}
.galleria__nota{grid-column:1}
.galleria__conta{font:300 var(--t-conta)/1 var(--serif);letter-spacing:0;color:var(--titolo);font-variant-numeric:lining-nums tabular-nums}   /* «06 / 12», non «o6 / ı2»: cifre allineate come .cifra */
.galleria__visore{grid-column:1/9;display:grid;max-width:800px;align-self:start}
/* Da 1920 le colonne 1-8 sono larghe 1069: a 800 restavano 288 px di lino
   vuoto prima delle miniature. A 1000 le sorgenti (1100) restano sotto il
   nativo; sizes dell'img lo sa (sezioni.php). */
@media (min-width:1920px){.galleria__visore{max-width:1000px}}
/* Le undici figure non correnti sono anche visibility:hidden, non solo a
   opacità 0: dentro ogni figura c'è il velo .apri, che con la sola
   opacità resterebbe nel Tab (dodici bersagli invisibili). La visibility
   cambia dopo la dissolvenza in uscita (ritardo 200 ms) e subito in
   entrata, così la dissolvenza incrociata resta. */
.galleria__fig{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transition:opacity var(--t-micro) var(--curva),visibility 0s linear var(--t-micro);
}
.galleria__fig:first-child{opacity:1;visibility:visible;transition:opacity var(--t-micro) var(--curva),visibility 0s}
.galleria__fig:target{opacity:1;visibility:visible;z-index:2;transition:opacity var(--t-micro) var(--curva),visibility 0s}
/* Senza JS con #g-07 la 01 (coperta) restava visibile al Tab: una sola
   figura focalizzabile (Correzione 1). */
.galleria__visore:has(.galleria__fig:target) .galleria__fig:first-child:not(:target){opacity:0;visibility:hidden}
/* Con desktop.js (classe js-attiva sul visore) comanda solo .is-corrente:
   così un :target rimasto nell'URL non resta sotto l'anteprima. */
.galleria__visore.js-attiva .galleria__fig{opacity:0;visibility:hidden;z-index:auto;transition:opacity var(--t-micro) var(--curva),visibility 0s linear var(--t-micro)}
.galleria__visore.js-attiva .galleria__fig.is-corrente{opacity:1;visibility:visible;z-index:2;transition:opacity var(--t-micro) var(--curva),visibility 0s}
/* Dodici foto miste (AGGIORNAMENTO §4.4): il visore resta 3:2 e la foto ci
   sta dentro in contain sul lino scuro: le verticali al centro con lino
   ai lati, le orizzontali riempiono. Sopra la foto il velo verso la vista
   a schermo intero, che qui si VEDE (cursore zoom-in). */
.galleria__fig .cornice__img{object-fit:contain;background:var(--lino-scuro)}
.didascalia--visore{font:italic 400 var(--t-visore)/1.3 var(--serif);letter-spacing:0}
/* Le miniature -mini sono 1:1 (300/150): con dodici quadrati a 150 su due
   colonne la scheda era alta 1100 (6 × 170 + 80) contro i 574 del visore
   (533 + didascalia): tre colonne. Colonne 9-12 = 427 a 1440 → quadrati
   di 132 su quattro righe (4 × 152 + 48 = 656); 512 a 1920 → 150 (tetto:
   150 CSS × 2 di dpr = il nativo 300); 363 a 1280 → 110; 277 a 1024 → 82. */
.galleria__mini{
  grid-column:9/-1;
  display:grid;grid-template-columns:repeat(3,minmax(0,150px));gap:var(--sp-4);
  align-content:start;
}
.galleria__minilink{display:block}
.galleria__miniimg{
  display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--pietra);
  transition:border-color 160ms var(--curva);
}
.galleria__minilink[aria-current] .galleria__miniimg,
.galleria__minilink:focus-visible .galleria__miniimg{border-color:var(--navy)}

/* ──────────────────────────── Le viste a schermo intero (§4.5) ─── */

/* Gallery (#foto-g-nn, con didascalia e prec/succ) e soluzioni
   (#foto-s-<nome>, solo la foto) si aprono anche su desktop: :target
   senza JS, hidden con app.js (il display:grid sotto html.js-pronto, la
   scatola fissa a z 60, la foto in contain e i glifi stanno in base.css).
   Qui le misure da grande schermo: la foto mai oltre 1100 px CSS (regola
   di casa: a 1920 × 1080 una 3:2 a tutta altezza farebbe 1404), i due
   link prec/succ a 56 con il glifo a 40 e a 44 px dal bordo, il «+» di
   chiusura a 24 dall'angolo. Il padding lascia ai lati lo spazio delle
   frecce (44 + 56 + 20) e sopra quello del «+». */
.vista--soluzione:target{display:grid}
.vista--galleria,.vista--soluzione{padding:var(--sp-9) 120px var(--sp-7)}
/* Gallery: foto e didascalia in COLONNA FLESSIBILE, centrate insieme. Con
   la griglia di base.css (righe minmax(0,1fr) auto) la riga della foto
   prendeva tutta l'altezza e con un'orizzontale, che è larga 1100 e alta
   629, la didascalia restava in fondo alla finestra: 80 px di vuoto a
   1440, 170 a 1920 (RD-11). Qui la foto è un elemento flessibile che si
   restringe (min-height 0 in base.css) e la didascalia no (flex none):
   una verticale resta alta quanto prima (765 a 1440: 900 meno 104 di
   padding, 12 di gap e 19 di didascalia), un'orizzontale ha la didascalia
   a 12 px sotto. Righe auto/auto con align-content center tornano in
   Chrome (misurato), ma per la spec (percentuali cicliche di css-sizing)
   un max-height in % dentro una riga auto vale none mentre si misura la
   riga: negli altri motori la verticale può uscire dalla finestra, e qui
   non si è potuto provare. La colonna flessibile è la via sicura. */
.vista--galleria{flex-direction:column;justify-content:center}
.vista--galleria:target,html.js-pronto .vista--galleria:not([hidden]){display:flex}
.vista--galleria .vista__didascalia{flex:none}
.vista--galleria .vista__img,.vista--soluzione .vista__img{max-width:min(100%,1100px)}
.vista__chiudi{top:var(--sp-5);right:var(--sp-5);transition:color var(--t-micro) var(--curva)}
.vista__prec,.vista__succ{
  translate:0 -50%;   /* la stessa proprietà singola di base.css: un transform si sarebbe SOMMATO al suo translate */
  width:56px;height:56px;
  font-size:40px;
  transition:color var(--t-micro) var(--curva);
}
.vista__prec{left:44px}
.vista__succ{right:44px}

/* ───────────────────────────────────── Tavola 05: Domande e risposte ─── */

.faq__scrivi{margin-top:var(--sp-7)}
.faq__scrivi a{display:inline-block;padding:14px 0}   /* bersaglio 44 */

/* ─────────────────────────────────────────────── Tavola 06: Contatti ─── */

/* Un blocco a tre righe (ragione sociale, via, CAP città), le righe
   T./M./W., poi il blocco «Amministrazione» (AGGIORNAMENTO §4.6): le
   distanze fra i blocchi le dà base.css; qui solo i massimi e i bersagli. */
.recapiti{margin-top:var(--sp-8)}
.recapiti__blocco{max-width:36ch}
.recapiti a{transition:text-decoration-color 160ms var(--curva)}
.recapiti__righe a{display:inline-flex;align-items:center;min-height:44px}   /* bersaglio 44 nella riga da 48 */
.modulo{max-width:560px}
.modulo__invia{width:280px}
.campo--consenso a{display:inline-block;padding:12px 0;margin-top:-8px}   /* bersaglio 44 */
.modulo__nota a{display:inline-block;padding:12px 0;margin:-12px 0;line-height:20px}   /* idem, senza spostare la riga */

/* ────────────────────────────────────────────────────── Piè di pagina ─── */

/* Continua sul navy senza stacco: lo separa un filetto lino al 18 %.
   Marchio 1-4, sezioni 6-8, lingue e legali 10-12; la filigrana del
   container in basso a sinistra, sotto il marchio e l'indirizzo, dove
   il lino è vuoto: dietro alle colonne 10-12 (spec §5.7) le nervature
   passavano sopra «Deutsch», «English» e la riga del copyright. */
.pie{border-top:1px solid var(--filetto)}
.pie__interno{
  position:relative;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);
  padding-block:var(--sp-9) var(--sp-7);
}
.pie__marchio,.pie__sezioni,.pie__coda{position:relative;z-index:1}
.pie__marchio{grid-column:1/5}
.pie__marchio .marchio__img{height:64px;width:auto}   /* il logo in variante lino, 64 nel piè (§4.7) */
.pie__sezioni{grid-column:6/9}
.pie__coda{grid-column:10/-1}
@media (max-width:1279.98px){.pie__sezioni{grid-column:5/9}.pie__coda{grid-column:9/-1}}
.pie__riga{margin-top:var(--sp-4);font-size:var(--t-didascalia);line-height:1.5;color:var(--lino-navy)}
.pie__riga+.pie__riga{margin-top:var(--sp-1)}
/* Link del piè: riga alta 44 (bersaglio), testo 13. */
.pie__voce,.pie__lingua,.pie__privacy{display:inline-block;min-width:44px;padding:12px 0;font-size:var(--t-didascalia);line-height:20px;color:var(--lino)}
.pie__voce[aria-current]::before,.pie__lingua[aria-current]::before{content:"// " / "";color:var(--sep)}   /* muto per il lettore di schermo: il nome del link resta «Contatti» */
.pie__coda p{margin-top:var(--sp-2);font-size:var(--t-didascalia);line-height:1.6;color:var(--lino-navy)}
.pie__coda p:has(.pie__privacy){margin-top:var(--sp-3)}
.pie__privacy{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--pietra);text-underline-offset:.22em}
.pie__filigrana{
  position:absolute;left:var(--margine);bottom:var(--sp-4);z-index:0;
  width:360px;height:158px;   /* 480 × 210 non stava sotto il marchio senza toccare l'indirizzo */
  color:var(--lino);opacity:.28;
  pointer-events:none;
}
@media (max-width:1279.98px){.pie__filigrana{width:270px;height:118px}}   /* a 1024 le colonne 1-4 sono 277 px: i 360 arrivavano sotto le sezioni */
.pie__filigrana svg{width:100%;height:100%}
/* Il tratto da 1 px non deve scalare col viewBox: vector-effect non si
   eredita dal <g>, quindi lo si dà a ogni forma da qui. */
.pie__filigrana svg *{vector-effect:non-scaling-stroke}

/* La barra del pollice è cosa del telefono (mobile.css / mobile.js). */
.pollice{display:none}

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

/* Compatto, in fondo, a tutta larghezza (la variante del tablet, §9.2):
   alto circa 60-80 px, col pulsante in coda al testo, a ogni larghezza
   da 1024 in su. Fino al 14 settembre da 1280 in su era un riquadro da
   360 in basso a destra, messo «sull'angolo della foto, sul pavimento
   dell'officina» della foto vecchia: con la foto del cliente copriva
   poltrona, tavolino e pedana per 359 × 117 px a 1280-1536 e l'angolo
   della porta a 1920 (RD-05); fra 1024 e 1279 copriva la foto (larga 376)
   e, in Gallery, le miniature 09-12 sotto il tocco (giro 3). */
.lpd{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  padding:var(--sp-2) var(--sp-4);
  border-left:0;border-right:0;border-bottom:0;
  font-size:13px;line-height:1.4;
  transition:transform 240ms var(--curva),visibility 0s;
}
.lpd::after{content:"";display:block;clear:both}
.lpd__testo{display:inline}
.lpd__form{float:right;margin:0 0 0 var(--sp-3)}
.lpd__ok{min-height:44px;padding:0 20px}
/* A tutta larghezza in basso coprirebbe la tacca dell'eroe (706-746 a
   1024 × 768, 771-811 a 1440 × 900): come sul telefono, compare quando
   l'eroe esce dalla finestra, cioè insieme alla linguetta (is-visibile,
   desktop.js), che nel DOM lo precede. Senza app.js la classe non c'è e
   il banner c'è dal primo istante; nelle pagine secondarie la linguetta
   non c'è e il banner c'è sempre. */
html.js-pronto .linguetta:not(.is-visibile)~.lpd{transform:translateY(100%);visibility:hidden;transition:transform 240ms var(--curva),visibility 0s linear 240ms}
.lpd__testo a{display:inline-block;padding-block:13px;margin-block:-13px;line-height:inherit}   /* bersaglio 44 senza spostare il testo: a 13/1.4 la riga è 18, con 12 per lato faceva 42 */
/* Finché il banner è in pagina, in basso si riserva lo spazio che occupa
   (WCAG 2.4.11): il Tab ferma il fuoco sopra il banner, non sotto (le
   miniature 06-12 e i link del piè ci finivano dietro, giro 3). Il
   banner è fixed: con lo scroll-padding la pagina non scorre quando il
   fuoco arriva al suo pulsante. :has dove c'è; app.js mette la classe
   sull'html per i browser senza :has (senza JS e senza :has: nessuno). */
:is(html:has(.lpd:not([hidden])),html.lpd-in-vista){scroll-padding-bottom:110px}   /* 60-80 di banner + aria */
/* E il piè lascia lo spazio per scorrere oltre: lingue, informativa e
   copyright si leggono e si cliccano anche con il banner aperto. */
:is(html:has(.lpd:not([hidden])),html.lpd-in-vista) .pie__interno{padding-bottom:calc(var(--sp-7) + 100px)}

/* ──────────────────────────────────────── Pagine secondarie (§5.8) ─── */

/* Il contenuto è allineato alla colonna B, come una pagina di catalogo
   con il margine largo: la colonna A resta vuota. */
.pagina__corpo{
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);
  max-width:calc(var(--contenitore) + 2 * var(--margine));
  margin-inline:auto;
  padding:120px var(--margine) 160px;
}
.pagina__corpo>*{grid-column:6/-1;max-width:62ch}
@media (max-width:1279.98px){.pagina__corpo>*{grid-column:5/-1}}
.pagina__corpo h1{margin-top:var(--titolo-contenuto);font-size:48px;line-height:1.05}
.pagina__corpo h1+*{margin-top:var(--sp-7)}
.pagina__corpo h2{margin:var(--sp-8) 0 var(--sp-4);font:400 28px/1.2 var(--serif)}
.pagina__corpo p+p{margin-top:var(--capoverso)}
.esito .pulsante{margin-top:var(--sp-4)}

/* ──────────────────────────────────────────────────────────── Hover ─── */

/* Tutti gli hover del sito stanno qui, dietro la guardia: solo mouse. */
@media (hover:hover) and (pointer:fine){
  .pulsante--pieno:hover{background:var(--lino);color:var(--navy);border-color:var(--navy)}
  .pulsante--contorno:hover{background:var(--navy);color:var(--lino);border-color:var(--navy)}
  .pulsante--lino:hover{background:var(--bianco);border-color:var(--bianco)}
  p a:hover,.campo--consenso a:hover,.lpd__testo a:hover,.pagina__corpo a:hover,.pie__privacy:hover{
    text-decoration-color:var(--link);text-decoration-thickness:2px;
  }
  .recapiti a:hover{text-decoration-color:var(--lino);text-decoration-thickness:2px}
  .nav__voce:hover,.lingue__voce:hover{color:var(--navy)}
  .pie__voce:hover,.pie__lingua:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--lino)}
  .persone__voce:hover{border-color:var(--navy)}
  .riga:hover .riga__titolo::before,.riga:hover .prezzo__etichetta::before{color:var(--sep)}
  .linguetta:hover{width:52px}
  .galleria__minilink:hover .galleria__miniimg{border-color:var(--navy)}
  /* Le scelte delle finiture come le miniature: filetto navy sulla miniatura, nome in navy. */
  .finiture__scelta:hover .finiture__miniimg{border-color:var(--navy)}
  .finiture__scelta:hover .finiture__nome{color:var(--titolo)}
  .testata__menu:hover,.menu__chiudi:hover,.vista__chiudi:hover,.vista__prec:hover,.vista__succ:hover{color:var(--sep)}
}

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

/* Il globale di base.css azzera le durate ma non tocca le linee temporali
   di scorrimento: il filetto da 64 si mostra già pieno. La testata cambia
   di colpo, il visore e l'anteprima senza dissolvenza. */
@media (prefers-reduced-motion:reduce){
  .tavola__a .occhiello::after{
    animation:none;
    background:linear-gradient(var(--titolo),var(--titolo)) left/100% 1px no-repeat,var(--filetto);
  }
  .testata,.testata .marchio,.testata .marchio__img,.linguetta,.anteprima__img,.galleria__miniimg,.finiture__miniimg,.finiture__nome,
  .galleria__fig,.galleria__visore.js-attiva .galleria__fig,.galleria__visore.js-attiva .galleria__fig.is-corrente,   /* stessa specificità delle regole con js-attiva */
  html.js-pronto .finiture__fig,html.js-pronto .finiture__fig.is-corrente{transition:none}
}