/* KleinCASA: mobile.css, caricato con media="(max-width: 1023.98px)".
   Tutto il layout mobile e tablet (DESIGN-SPEC §4.2, §5 (c), §7;
   AGGIORNAMENTO-2026-09-14 §4): menu a schermo intero, barra del pollice,
   strisce con snap a schede di altezza fissa, selettore delle finiture,
   viste :target a schermo intero con prec/succ. Sopra i 1024 px questo
   foglio non viene nemmeno applicato: il media sta sul <link>. Legge solo
   i ruoli e i token di base.css. */

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

:root{
  /* Le etichette a 12 px della specifica scendono sotto la soglia di casa
     (regola 9: mai sotto 13): sul telefono salgono a 13, la forma resta. */
  --t-etichetta:13px;
  --t-conta:13px;
  /* L'altezza delle schede della sequenza (56vh, mai oltre 480) e nel
     visore della Gallery (62vh, mai oltre 620: sul tablet a 635
     un'orizzontale 1.75:1 passava i 1100 px CSS): una sola misura per
     striscia, la larghezza la dà il rapporto della cornice. svh dove c'è:
     con la barra del browser aperta il vh «grande» di iOS sfora la
     finestra. Pavimento 290 / 300 per il telefono in orizzontale (844 ×
     390): a 56vh le schede erano francobolli da 146 (Correzione 1). */
  --scheda-h:max(min(56vh,480px),290px);
  --visore-h:max(min(62vh,620px),300px);
}
@supports (height:1svh){
  :root{--scheda-h:max(min(56svh,480px),290px);--visore-h:max(min(62svh,620px),300px)}
}
@media (max-width:369.98px){
  :root{--t-h2:34px}          /* 360: h2 a 34 (§3b) */
}

/* ────────────────────────────────────────────────────── Struttura ─── */

html{scroll-padding-bottom:calc(var(--pollice-h) + 16px)}   /* le ancore non finiscono sotto la barra */
/* Col banner LPD in pagina lo spazio riservato in basso comprende anche
   lui (fino a 135 px in tedesco sopra la barra da 56): il Tab fermava le
   domande e il pulsante d'invio SOTTO il banner (giro 3, WCAG 2.4.11).
   :has dove c'è; app.js mette la classe per i browser senza :has. */
:is(html:has(.lpd:not([hidden])),html.lpd-in-vista){scroll-padding-bottom:calc(var(--pollice-h) + 150px)}
/* A menu o vista aperti la pagina sotto non scorre: html.is-bloccato,
   in base.css (la classe la mettono app.js e mobile.js). */
.contenitore{padding-inline:var(--margine)}
.salta{display:inline-flex;align-items:center;min-height:44px}   /* anche lo skip link è un bersaglio */

/* La linguetta è un oggetto da grande schermo: qui non esiste. */
.linguetta{display:none}

/* ─────────────────────────────────────────────────────────── Logo ─── */

/* Il logo del cliente (AGGIORNAMENTO §6, MARKUP §2): 36 px in testata
   (base.css dà 44; nel menu 36 e nel piè 64 li dà già base.css). «CASA»
   sta fuori dal rettangolo nero: a 36 px il rettangolo è alto circa 28, e
   la riga della testata si allinea al centro dell'immagine intera, non
   al rettangolo. */
.testata .marchio__img{height:44px;width:auto}   /* 44 dal 17 set 2026 (era 36): la testata è alta 60, restano 8 per lato */

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

/* Barra da 60 px, sticky, logo a sinistra e il «+» a destra; le voci
   e le lingue vivono nel menu a schermo intero. */
.testata{
  position:sticky;top:0;z-index:40;
  background:var(--lino);
  border-bottom:1px solid var(--pietra);
}
.testata__interno{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--testata-h);
}
.nav,.lingue{display:none}
.testata .marchio{display:inline-flex;align-items:center;padding-block:4px;line-height:0}   /* 44 di logo + 8 = 52: bersaglio oltre i 44 */
.testata__menu{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-8px;   /* il glifo si allinea al margine, il bersaglio resta 44 */
  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}

/* ──────────────────────────────────────── Menu a schermo intero ─── */

/* Senza JS lo apre :target; con JS app.js toglie hidden (e [hidden]
   {display:none!important}, prima riga di base.css, vince su tutto). Se
   app.js non arriva e il menu lo fa girare il ripiego di mobile.js, la
   classe menu-ripiego sull'html fa la stessa cosa di js-pronto. */
#menu:target,html.js-pronto .menu:not([hidden]),html.menu-ripiego .menu:not([hidden]){display:grid}
.menu{
  position:fixed;inset:0;z-index:50;
  grid-template-rows:auto 1fr auto;
  padding:0 var(--margine) var(--sp-5);
  overflow-y:auto;overscroll-behavior:contain;
  animation:kc-menu var(--t-micro) var(--curva) backwards;   /* solo opacità, nessun movimento */
}
@keyframes kc-menu{from{opacity:0}}
.menu__testa{display:flex;align-items:center;justify-content:space-between;height:var(--testata-h)}
.menu .marchio{display:inline-flex;align-items:center;padding-block:4px;line-height:0}   /* come in testata: bersaglio 44 */
.menu__chiudi{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-8px;
  font:300 28px/1 var(--sans);color:var(--lino);
}
.menu__chiudi span{display:block;rotate:45deg}   /* il «+» ruotato: i font ospitati non hanno la «✕» */
.menu__voci{display:flex;flex-direction:column;justify-content:center;padding-block:var(--sp-4)}
.menu__voce{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding-block:var(--sp-2)}
.occhiello--menu{display:block;margin-bottom:var(--sp-1)}
.menu__link{
  display:flex;align-items:center;min-height:44px;   /* 36 × 1.2 = 43: il bersaglio si porta a 44 (regola 9) */
  font:300 36px/1.2 var(--serif);color:var(--lino);
  overflow-wrap:anywhere;
}
.menu__link[aria-current]{color:var(--lino)}
.menu__coda{display:grid;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--filetto)}
.menu__lingue{display:flex;gap:var(--sp-2)}
.menu__lingue li{flex:1 1 0}
.menu__lingua{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding-bottom:2px;
  border-bottom:1px solid transparent;
  font:500 var(--t-pulsante)/1 var(--sans);letter-spacing:.04em;
  color:var(--lino-navy);
}
.menu__lingua[aria-current]{color:var(--lino);border-bottom-color:var(--lino)}
.menu__telefono{display:flex;align-items:center;min-height:44px;color:var(--lino);font-size:var(--t-corpo)}
.menu__cta{width:100%;min-height:52px}
@media (max-width:369.98px){.menu__link{font-size:32px}}
/* Sui telefoni bassi (360 × 640, 375 × 667) il pannello sfondava e
   «Informationen anfordern» restava tagliato sotto il bordo (giro 2: 683
   contro 640). Voci alte quanto il bersaglio (44 + l'occhiello) e meno
   aria: il pannello sta tutto nella finestra. */
@media (max-height:700px){
  .menu{padding-bottom:var(--sp-4)}
  .menu__voci{padding-block:var(--sp-2)}
  .menu__voce{min-height:44px;padding-block:0}
  .menu__coda{gap:var(--sp-2);padding-top:var(--sp-3)}
}

/* ─────────────────────────────────────────────── Barra del pollice ─── */

/* Fissa in basso, due bersagli a metà larghezza. Si ritira scendendo
   (translateY 100 %) e, ritirata, è anche visibility:hidden: fuori dal
   Tab e dallo screen reader. Senza app.js resta sempre visibile. Sta a
   z 35: sotto il menu (50) e sotto le viste (60), che la coprono. */
.pollice{
  position:fixed;left:0;right:0;bottom:0;z-index:35;
  display:flex;
  min-height:calc(var(--pollice-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  border-top:1px solid var(--filetto);
  transform:translateY(100%);visibility:hidden;
  transition:transform 240ms var(--curva),visibility 0s linear 240ms;
}
.pollice.is-visibile:not(.is-nascosta),html:not(.js-pronto) .pollice{
  transform:none;visibility:visible;
  transition:transform 240ms var(--curva),visibility 0s;
}
.pollice__voce{
  flex:1 1 50%;
  display:flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:var(--pollice-h);padding:0 var(--sp-2);
  font:500 var(--t-pulsante)/1 var(--sans);letter-spacing:var(--s-pulsante);text-transform:uppercase;
  color:var(--lino);
  transition:background-color 120ms var(--curva);
}
.pollice__voce+.pollice__voce{border-left:1px solid var(--filetto)}
.pollice__voce:active{background:var(--navy-attivo)}
.pollice__voce .icona{flex:none}
.pollice__sep{color:var(--sep)}

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

/* A tutta larghezza, sopra la barra del pollice, e SOLO quando c'è la
   barra: con app.js compare con lei (passato l'eroe: la prima schermata
   resta foto + titolo, prima il banner alto 178 px copriva l'h1) e
   scende a filo del bordo quando la barra si ritira (Contatti), così
   sotto non resta il buco di 56 px. Compatto: testo 13, pulsante in
   linea col testo. Senza app.js la barra è sempre visibile e il banner
   sta sempre a 56. */
.lpd{
  position:fixed;left:0;right:0;z-index:30;
  bottom:calc(var(--pollice-h) + env(safe-area-inset-bottom));
  padding:var(--sp-2) var(--sp-4);border-left:0;border-right:0;   /* 8 sopra e sotto: il tedesco fa cinque righe più il pulsante */
  font-size:13px;line-height:1.4;
  transition:transform 240ms var(--curva),bottom 240ms var(--curva),visibility 0s;
}
/* Il pulsante galleggia a destra DOPO il testo: se sull'ultima riga c'è
   posto ci sale, altrimenti scende sotto, allineato a destra. Così il
   banner è alto quanto il testo e non una riga di più. */
.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}
html.js-pronto .pollice:not(.is-visibile)~.lpd{transform:translateY(100%);visibility:hidden;transition:transform 240ms var(--curva),bottom 240ms var(--curva),visibility 0s linear 240ms}
html.js-pronto .pollice:not(.is-visibile)~.lpd,
html.js-pronto .pollice.is-nascosta~.lpd,
body:not(:has(.pollice)) .lpd{bottom:env(safe-area-inset-bottom)}

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

/* La foto prima del titolo: nella prima schermata il cliente vede il suo
   container (la foto è verticale 2:3, ritagliata 4:5: 358 × 448 a 390).
   Poi occhiello, h1, sottotitolo, i due pulsanti impilati, la riga meta,
   filetto e tacca. */
.eroe{padding:var(--sp-4) var(--margine) var(--sp-8)}
/* La foto viene prima del testo anche nel DOM (giro 2): l'ordine del Tab
   è quello che si vede, il velo «apri» arriva prima dei pulsanti. */
.eroe__riquadro{display:flex;flex-direction:column}
.eroe__foto{position:relative;margin:0;border:1px solid var(--pietra);overflow:hidden}
.eroe__img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 45%}
.eroe__testo{padding-top:var(--sp-6)}
.eroe__testo .occhiello{margin-bottom:var(--sp-4)}
.eroe__sotto{margin-top:var(--sp-4)}
.eroe__azioni{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}
.eroe__azioni .pulsante{width:100%}
/* La riga meta a coppie: il «//» solo davanti alla seconda voce di ogni
   coppia (nth-child(even)). Flex con a capo e non griglia a due colonne:
   con «VIVOCONTAINER SEIT 1998» le due colonne a 390 non ci stanno e la
   griglia spezzava la voce su due righe; qui ogni coppia sta sulla sua. */
.eroe__meta{
  display:flex;flex-wrap:wrap;
  column-gap:var(--sp-3);row-gap:var(--sp-2);
  margin-top:var(--sp-6);
}
.eroe__meta li{line-height:1.4}
.eroe__meta li:nth-child(even)::before{content:"//" / "";margin-right:var(--sp-2)}   /* testo alternativo vuoto: muto per lo screen reader (giro 3) */
/* Da 600 (tablet) le quattro voci stanno su una riga: il «//» davanti a
   tutte dalla seconda, se no fra la seconda e la terza restava un vuoto
   muto (giro 2). */
@media (min-width:600px){.eroe__meta li+li::before{content:"//" / "";margin-right:var(--sp-2)}}
/* A 360 in inglese «LOSONE, SWITZERLAND // GENOA, ITALY» non sta in 328 px:
   ogni voce sulla sua riga, col «//» davanti a tutte dalla seconda. */
@media (max-width:374.98px){
  html[lang=en] .eroe__meta li{flex-basis:100%}
  html[lang=en] .eroe__meta li+li::before{content:"//" / "";margin-right:var(--sp-2)}
}
.eroe__filetto{position:relative;height:1px;margin-top:20px;background:var(--pietra)}
.eroe__tacca{position:absolute;left:50%;top:0}

/* ─────────────────────────────────────────────────────── Le tavole ─── */

/* Una colonna: A sopra B, niente sticky, 88 px fra le tavole. */
.tavola{padding:var(--tavola-y) var(--margine)}
.tavola__a{margin-bottom:var(--titolo-contenuto)}
.tavola__a h2+*{margin-top:var(--titolo-contenuto)}
.tavola__b>*+*{margin-top:var(--sp-6)}
.tavola__b>.fisarmonica+.fisarmonica{margin-top:0}
.fascia{padding-block:72px}
.tavola__b .cornice__img{width:100%}

/* 01 Chi siamo (AGGIORNAMENTO §4.6): solo testo, lead e quattro capoversi
   uno sotto l'altro, poi le persone. Niente sedi in colonna A, niente
   cifra «1998», niente figure: la tavola non ha regole proprie. */

/* 02 Le soluzioni: niente riquadro anteprima; summary 40px 1fr 44px. */
.anteprima{display:none}
.soluzioni .fisarmonica__testa{grid-template-columns:40px 1fr 44px}
.fisarmonica__dentro{padding-left:0}
.fisarmonica__dentro>p{max-width:62ch}
/* La striscia sta a 32 px dall'ultimo capoverso come sequenza e finiture
   (base.css); rientra di 6 per l'anello di fuoco: si compensa. */
.fisarmonica__dentro>.striscia{margin-top:calc(var(--sp-6) - 6px)}

/* L'intro (AGGIORNAMENTO §4.3): titolo e tre capoversi, poi la foto
   dell'officina in cornice 2:3 SOTTO il testo, a tutta larghezza della
   colonna (358 × 537 a 390). Sul tablet non cresce oltre i 358 (2:3 a 736
   sarebbe alta 1104) e sta al centro, come una tavola sotto al testo. */
.soluzioni__intro-foto{max-width:358px;margin:var(--sp-5) auto 0}

/* Le strisce con snap (§5.2 c, §5.4 c, AGGIORNAMENTO §4.3). Due misure:
   la SEQUENZA (sol-01) ha schede alte --scheda-h e larghe dal rapporto
   (2:3 → 315 a 844); le strisce di sol-02 e sol-03 hanno schede LARGHE
   82vw (orizzontali, tetto 640) o 62vw (verticali, tetto 320) e alte dal
   rapporto, basi allineate (MARKUP §6.5): 320 × 180 le 16:9, 320 × 213 le
   3:2, 242 × 363 la 2:3 a 390. Alte 56vh una 16:9 misurava 839 px su 390 e
   lo snap non aveva senso (Correzione 1); l'altezza fissa la prescrive
   l'AGGIORNAMENTO solo per la Gallery (§4.4). Il contatore lo aggiorna
   mobile.js dalla posizione di snap. touch-action lascia entrambi gli
   assi; position:relative per gli offsetLeft (mobile.js). */
.striscia{
  position:relative;
  display:flex;align-items:flex-start;gap:var(--sp-3);
  overflow-x:auto;overflow-y:hidden;
  /* 6 px di aria dentro il ritaglio (e altrettanti fuori, così le schede
     stanno dove stavano): l'anello di fuoco del velo, 3 + 2 px attorno al
     quadro, non viene tagliato dall'overflow (giro 2). */
  padding:6px;margin:-6px;
  scroll-snap-type:x mandatory;scroll-padding-inline:6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;
  overscroll-behavior-x:contain;
}
.striscia::-webkit-scrollbar{display:none}
.striscia__scheda{flex:none;width:auto;scroll-snap-align:start;scroll-snap-stop:always}
/* La sequenza: il quadro alto --scheda-h; l'immagine è alta quanto il
   quadro e larga secondo il rapporto della sua classe (aspect-ratio di
   base.css, 2/3): è lei a dare la larghezza alla scheda. max-width:none:
   il 100 % del reset girerebbe in tondo dentro una scheda che si misura
   sull'immagine. */
.sequenza__tre .cornice__quadro{height:var(--scheda-h)}
.sequenza__tre .cornice__img{width:auto;height:100%;max-width:none;object-fit:cover}
/* Le strisce di sol-02 e sol-03: larghezza in vw, altezza dal rapporto
   (l'img è larga 100 % e alta secondo aspect-ratio), mai oltre la colonna. */
.striscia:not(.sequenza__tre){align-items:flex-end}
.striscia:not(.sequenza__tre) .striscia__scheda{width:min(82vw,640px);max-width:calc(100vw - 2 * var(--margine))}
.striscia:not(.sequenza__tre) .cornice--2-3,.striscia:not(.sequenza__tre) .cornice--4-5,.striscia:not(.sequenza__tre) .cornice--1-1{width:min(62vw,320px)}
/* La didascalia non deve allargare la scheda con il proprio testo
   disteso: contribuisce zero alla misura e poi si stende sulla scheda. */
.striscia .didascalia{width:0;min-width:100%}
.striscia__conta{margin-top:var(--sp-3)}

/* La sequenza (sol-01): il trittico della scala a tutta larghezza
   (cornice 2:1, 358 × 179 a 390), le tre verticali sotto in striscia. */
.sequenza__intera{max-width:100%}
.sequenza__tre{margin-top:calc(var(--sp-6) - 6px)}

/* Le sei tessere 1:1 in griglia 2 × 3 (173 px a 390, 158 a 360):
   disposizione conservata per compatibilità. */
.tessere{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-2)}
/* Il corpo delle soluzioni si allarga di 6 px per lato (e rientra di
   altrettanto) perché il suo overflow:hidden non tagli l'anello di fuoco
   della striscia; i capoversi restano dove stanno. */
.soluzioni .fisarmonica__dentro{padding-inline:6px;margin-inline:-6px}

/* Il selettore delle finiture (sol-04, AGGIORNAMENTO §4.3): il quadro 2:3
   a tutta larghezza della colonna (358 × 537 a 390). Senza JS le quattro
   figure stanno una sotto l'altra a 32 px; con JS (base.css) nella stessa
   cella, una sola in vista. */
.finiture__quadro{display:grid;gap:var(--sp-6);width:100%}
html.js-pronto .finiture__quadro{gap:0}
/* Le scelte: miniature 1:1 da 56 px con il nome sotto (Jost 13 maiuscolo:
   la specifica dice 11, ma sotto i 13 non si scende, regola 9), in UNA
   riga che scorre se non ci sta (nomi lunghi del cliente): niente a capo
   fra le scelte. Ogni scelta è larga quanto il suo nome; se la riga è
   stretta le scelte si restringono fino alla parola più lunga («Prato
   verticale» va su due righe, mai spezzato a metà parola) e solo poi la
   riga scorre. Il rientro di 6 px lascia spazio all'anello di fuoco
   dentro il ritaglio. Spaziatura delle lettere a .08em e 8 px fra le
   scelte: con .14em e 16 le quattro sforavano di pochi px a 360 e la
   riga scorreva per nulla. */
.finiture__scelte{
  display:flex;flex-wrap:nowrap;align-items:flex-start;gap:var(--sp-2);
  margin:calc(var(--sp-6) - 6px) -6px 0;padding:6px;
  overflow-x:auto;overflow-y:hidden;
  scroll-padding-inline:6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;
}
.finiture__scelte::-webkit-scrollbar{display:none}
.finiture__scelte li{flex:0 1 auto}   /* min-width auto: si restringe fino alla parola più lunga, non oltre */
.finiture__scelta{min-width:56px;min-height:44px}
.finiture__mini{width:56px}
.finiture__nome{font-size:13px;letter-spacing:.08em}

/* 03 Investimento & Finanza: righe impilate, titolo sopra e testo sotto.
   «CHF» e la cifra: la cifra non si spezza mai («73'000.-» resta intera),
   ma sotto i 360 può scendere a capo dopo «CHF». */
.riga__titolo--prezzo{white-space:normal}
.prezzo__cifra{white-space:nowrap}
.riga__testo{margin-top:var(--sp-3)}
.righe__azione{margin-top:var(--sp-7)}
.righe__azione .pulsante{width:100%}

/* 04 Gallery: la testa si scioglie (display:contents) così il contatore
   scende sotto la striscia; miniature solo su desktop. Il visore è una
   striscia con snap di schede alte 62vh e larghe secondo il rapporto della
   FOTO (verticali strette, orizzontali larghe: aspect-ratio auto annulla
   il 3/2 di base.css, che qui taglierebbe le verticali). Un'orizzontale
   3:2 a 844 di finestra è larga 785, più della finestra: si scorre dentro
   la striscia, è voluto («una dietro l'altra», AGGIORNAMENTO §4.4). */
.galleria{display:flex;flex-direction:column}
.galleria__testa{display:contents}
.galleria h2{margin-bottom:var(--titolo-contenuto)}
.galleria__nota{margin:calc(-1 * var(--sp-3)) 0 var(--titolo-contenuto)}   /* fra h2 e striscia: 12 sopra, 24 sotto */
.galleria__visore{
  order:1;
  position:relative;
  display:flex;align-items:flex-start;gap:var(--sp-3);
  overflow-x:auto;overflow-y:hidden;
  padding:6px;margin:-6px;   /* l'anello di fuoco del velo «apri» non si taglia */
  scroll-snap-type:x mandatory;scroll-padding-inline:6px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y pinch-zoom;
  overscroll-behavior-x:contain;
}
.galleria__visore::-webkit-scrollbar{display:none}
.galleria__fig{flex:none;width:auto;scroll-snap-align:start;scroll-snap-stop:always}
/* ⚠ aspect-ratio:revert-layer e non auto: «auto» cancella anche il
   rapporto che il browser ricava da width/height (un suggerimento di
   presentazione), e una foto lazy non ancora scaricata avrebbe larghezza
   zero; revert-layer torna a quel suggerimento (auto 1000/1500) e la
   scheda è larga giusta prima che la foto arrivi. Dove revert-layer
   manca, la scheda ha comunque la larghezza minima di una 2:3 (min-width
   sul quadro, la foto al centro) finché la foto non arriva. */
.galleria__fig .cornice__quadro{
  display:flex;justify-content:center;
  height:var(--visore-h);min-width:calc(var(--visore-h) * 2 / 3);
}
.galleria__fig .cornice__img{width:auto;height:100%;max-width:none;aspect-ratio:revert-layer}
.galleria__fig .didascalia{width:0;min-width:100%}
.galleria__conta{order:2;margin-top:var(--sp-3)}
.galleria__mini{display:none}

/* 05 Domande e risposte: numero sopra la domanda, «+» a destra. */
.faq .fisarmonica__testa{grid-template-columns:1fr 44px;grid-template-rows:auto auto;row-gap:var(--sp-2)}
.faq .fisarmonica__n{grid-column:1;grid-row:1}
.faq .fisarmonica__testa h3{grid-column:1;grid-row:2}
.faq .fisarmonica__piu{grid-column:2;grid-row:1/3}
.faq__scrivi a{display:inline-flex;align-items:center;gap:.4em;min-height:44px}   /* il flex scarta lo spazio dopo il «//» */

/* 06 Contatti: la fascia navy chiude con 96 px (la barra qui si nasconde,
   senza JS il padding la compensa); i recapiti (tre righe, T. M. W., il
   blocco Amministrazione) sopra il modulo a tutta larghezza. */
.contatti{padding-block:72px 96px}
.recapiti__righe a{display:inline-flex;align-items:center;min-height:44px}
.modulo{max-width:none}
/* La casella del consenso: il bersaglio è 44 × 44, il quadrato che si
   vede resta 24 (disegnato con due sfondi: filetto e fondo). Spuntata: un
   quadrato pieno da 14 dentro. Niente appearance nativa: iOS la
   arrotonda e non lascia allargare il bersaglio. */
.campo--consenso input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:44px;height:44px;margin:-8px 0 0 -10px;padding:0;
  border:0;cursor:pointer;
  background:
    linear-gradient(var(--fondo),var(--fondo)) center/22px 22px no-repeat,
    linear-gradient(var(--bordo-ui),var(--bordo-ui)) center/24px 24px no-repeat;
}
.campo--consenso input[type=checkbox]:checked{
  background:
    linear-gradient(var(--titolo),var(--titolo)) center/14px 14px no-repeat,
    linear-gradient(var(--fondo),var(--fondo)) center/22px 22px no-repeat,
    linear-gradient(var(--titolo),var(--titolo)) center/24px 24px no-repeat;
}
.campo--consenso label{flex-basis:calc(100% - 46px)}
.campo--consenso a{margin-left:46px;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.modulo__nota{line-height:1.6}
/* I link in linea nelle note (modulo, banner): bersaglio da 44 senza
   allargare la riga (padding verticale compensato dal margine negativo). */
.modulo__nota a,.lpd__testo a{display:inline-block;min-width:44px;padding-block:12px;margin-block:-12px}
.lpd__testo a{padding-block:13px;margin-block:-13px}   /* a 13/1.4 la riga è 18: con 12 per lato il bersaglio faceva 42 */

/* ──────────────────────────────────────────────────────────── Piè ─── */

.pie{padding:var(--sp-8) 0 var(--sp-10);border-top:1px solid var(--filetto)}
.pie__interno{display:grid;gap:var(--sp-6)}
.pie__marchio{display:flex;flex-direction:column;gap:var(--sp-2)}
.pie__marchio .marchio{margin-bottom:var(--sp-2)}
.pie__riga{font-size:var(--t-piccolo);line-height:1.5;color:var(--lino-navy)}
.pie__sezioni a,.pie__lingua,.pie__privacy{
  display:inline-flex;align-items:center;min-height:44px;min-width:48px;
  color:var(--lino);font-size:var(--t-piccolo);
}
.pie__voce[aria-current]::before{content:"//" / "";margin-right:6px;color:var(--sep)}   /* muto: il nome del link resta «Contatti» */
.pie__lingue{display:flex;flex-wrap:wrap;column-gap:var(--sp-5)}
.pie__coda p{font-size:var(--t-piccolo);line-height:1.5}
.pie__coda p+p{margin-top:var(--sp-2)}
.pie__copyright,.pie__dev{color:var(--lino-navy)}
.pie__filigrana{width:240px;max-width:100%;justify-self:end;color:var(--lino);opacity:.28}
.pie__filigrana svg{width:100%;height:auto}

/* ─────────────────────────────────── Viste :target a schermo intero ─── */

/* La foto dell'eroe, le quindici delle soluzioni e le dodici della
   Gallery (AGGIORNAMENTO §4.5). Pure CSS: si apre con #foto-…, si chiude
   con #chiudi (ancora fissa, non scorre); mobile.js aggiunge fuoco, Esc,
   frecce, swipe e overflow:hidden. Sta a z 60: sopra la barra del
   pollice (35) e il banner (30), che restano sotto.
   Griglia: la foto nella riga alta (al centro, mai oltre la finestra),
   sotto una riga di comando alta 44: «‹» a sinistra, contatore e
   didascalia al centro, «›» a destra. Le frecce stanno IN BASSO e non ai
   lati a metà altezza: a metà altezza coprirebbero i bordi della foto (le
   verticali riempiono tutta la larghezza) e sono lontane dal pollice; in
   basso sono raggiungibili con una mano, non toccano la foto e fanno una
   riga sola con la didascalia, come i comandi di un visore. Nelle viste
   senza didascalia né frecce (eroe, soluzioni) la riga sotto è vuota e
   alta zero. La scatola (fixed, z 60, il «+», i caratteri) sta in
   base.css; la griglia sta sulla .vista stessa (non solo su :target),
   così vale anche quando app.js la apre togliendo hidden. */
.vista{
  grid-template-columns:44px minmax(0,1fr) 44px;
  grid-template-rows:minmax(0,1fr) auto;
  column-gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-4) max(var(--sp-3),env(safe-area-inset-bottom));
}
.vista:target{display:grid}
.vista__img{grid-column:1/-1;grid-row:1}
.vista__didascalia{
  grid-column:2;grid-row:2;
  display:flex;flex-direction:column;justify-content:center;align-self:center;
  min-height:44px;max-width:none;
  font-size:15px;line-height:1.4;
  overflow-wrap:anywhere;
}
.vista__conta{display:block;margin:0 0 var(--sp-1);font-size:13px}
/* Le frecce «‹» «›», bersaglio 44 × 44, in linea con la didascalia: qui
   non sono assolute ai lati (base.css) ma celle della riga di comando. */
.vista__prec,.vista__succ{position:static;translate:none;grid-row:2;align-self:center}
.vista__prec{grid-column:1}
.vista__succ{grid-column:3}

/* ──────────────────────────────────────────── Pagine secondarie ─── */

.pagina__corpo{padding:var(--sp-9) var(--margine) var(--sp-10)}
.pagina__corpo h1{font-size:36px;line-height:1.05}
.pagina__corpo h2{font-size:24px;margin:var(--sp-8) 0 var(--sp-4)}
.pagina__corpo .pulsante{margin-top:var(--sp-7)}

/* ─────────────────────────────────────────── Tablet in ritratto ─── */

/* Da 600 a 1023: la foto dell'eroe si ferma a 480 (4:5 → 480 × 600) così
   l'h1 resta sopra la piega; i pulsanti si affiancano. Il quadro delle
   finiture si ferma anch'esso a 480 (2:3 → 480 × 720: a tutta larghezza
   sarebbe 736 × 1104, più della finestra). Le strisce restano come sono:
   le schede sono alte 480 al massimo e la Gallery 62vh (635 a 1024). */
@media (min-width:600px){
  .eroe__foto{max-width:480px}
  .eroe__azioni{flex-direction:row}
  .eroe__azioni .pulsante{width:auto;flex:1 1 0}
  .righe__azione .pulsante{width:auto;min-width:280px}
  .finiture__quadro{max-width:480px}
  .modulo{max-width:560px}   /* come su desktop: a 1023 i campi erano larghi 991 (Correzione 1) */
  .pie__interno{grid-template-columns:1fr 1fr}
  .pie__filigrana{grid-column:2;justify-self:end}
  /* Il banner LPD resta compatto e a tutta larghezza anche sul tablet
     (spec §9.2): il riquadro da 360 a destra copriva l'h2 di tavola 03
     e le domande mentre si scorreva (giro 2). */
}

/* ─────────────────────────── Tablet e telefono in orizzontale ─── */

/* Da 700 in orizzontale (tablet in paesaggio sotto i 1024, telefono
   girato): la foto dell'eroe a 480 × 600 spingeva l'h1 sotto la piega
   (y 738 a 1023 × 768; Correzione 1). Qui la foto a sinistra (42 %, alta
   quanto il testo, in cover) e il testo a destra, come sul grande schermo;
   le scelte delle finiture accanto al quadro (solo con JS). */
@media (min-width:700px) and (orientation:landscape){
  .eroe__riquadro{flex-direction:row;align-items:stretch;gap:var(--sp-6)}
  .eroe__foto{flex:0 0 42%;max-width:480px;min-height:360px}
  .eroe__img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .eroe__testo{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;padding-top:0}
  html.js-pronto .finiture{display:grid;grid-template-columns:minmax(0,480px) minmax(160px,auto);gap:var(--sp-6);align-items:start}
  html.js-pronto .finiture__scelte{flex-direction:column;overflow:visible;margin:0;padding:6px}
  html.js-pronto .finiture__scelta{flex-direction:row;align-items:center;gap:var(--sp-3);max-width:none;min-height:56px}
  html.js-pronto .finiture__nome{text-align:left}
}