/* ============================================================
   Pagina pubblica di una referenza (punto 13), GeoCala Comunicazione.
   Identità `identita-calastri` (roadmap §5), non il design system del
   portale: rosso schermo #CC0000, IBM Plex Sans in locale (licenza OFL in
   fonts/), etichette maiuscole spaziate con il quadratino rosso dei reels.
   Modello: 03_documenti/prototipi/referenza-esempio/. Scelte grafiche
   decise dal capo su mandato di Giacomo (piani dei punti 12-14, G1-G8).
   Regola del kit che resta: i valori stanno solo qui in :root, le regole
   usano var(--...). Mobile prima di tutto: le regole di base sono per il
   telefono, i @media allargano.
   ============================================================ */
@font-face{font-family:'Plex';src:url(fonts/IBMPlexSans-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/IBMPlexSans-Medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex';src:url(fonts/IBMPlexSans-SemiBold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'PlexMono';src:url(fonts/IBMPlexMono-Medium.woff2) format('woff2');font-weight:500;font-display:swap}

:root{
  --rosso:#CC0000; --rosso-hover:#aa0000; --rosso-chiaro:#ff4d4d;
  --rosso-ombra:rgba(204,0,0,.35); --rosso-ombra-tenue:rgba(204,0,0,.5); --rosso-velo:rgba(204,0,0,.06);
  --nero:#1a1a1a; --scuro:#2d2d2d; --muto:#666666; --bordo:#e0e0e0;
  --fondo:#f4f4f4; --bianco:#ffffff; --grigio-chiaro:#bdbdbd; --grigio-nota:#dddddd; --grigio-scheda:#555555;
  --velo:rgba(10,10,10,.94); --velo-modulo:rgba(10,10,10,.6); --velo-visore:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55));
  --ombra-scheda:0 16px 32px -14px rgba(20,22,28,.25);
  --tasto-fondo:rgba(26,26,26,.6); --tasto-bordo:rgba(255,255,255,.55); --etichetta-bordo:rgba(255,255,255,.4); --ombra-nota:0 10px 26px -8px rgba(0,0,0,.45);
  --velo-scheda:linear-gradient(180deg,rgba(0,0,0,0) 38%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.86) 100%);
  --font:'Plex',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'PlexMono',ui-monospace,monospace;
  --max:1180px; --pad:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.2,.7,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--nero);background:var(--bianco);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* etichetta: quadratino rosso + maiuscolo spaziato (firma dei reels) */
.etichetta{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--nero)}
.etichetta::before{content:"";width:9px;height:9px;background:var(--rosso);flex:none}
.etichetta.rossa{color:var(--rosso)}

/* testata (punto 29, sul modello approvato da Giacomo): il logo completo con l'indirizzo, largo
   min(640px, 70vw). Il sito dello Studio è nel piede. Sul telefono (08.11.2026, Giacomo: «il sito è
   adatto al mobile?») il logo intero diventava illeggibile e del menu restava solo «Contatto»: lì il
   segno del logo (lo stesso file, ritagliato) con il nome accanto, e sotto una riga con tutto il menu. */
header.testata{border-bottom:1px solid var(--bordo);background:var(--bianco)}
header.testata .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:116px}
.marchio{display:block;min-width:0}
/* Punto 56: il logo con la scritta «Area riservata» del sito privato sotto (solo lì c'è): in colonna, così il logo
   largo e il menu restano dove sono, anche sul telefono. */
.testata-marchio{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.testata-riservata{display:inline-flex;align-items:center;flex:none;border:1px solid var(--rosso);border-radius:999px;
  background:var(--rosso-velo);color:var(--rosso);padding:7px 14px;font:600 11px/1 var(--font);letter-spacing:.18em;
  text-transform:uppercase;white-space:nowrap}
/* Due tasti sulla stessa riga (per esempio «Scarica PDF» e quello del punto 58): un po' d'aria fra loro; con un
   tasto solo non cambia niente. */
.scarica-pdf + .scarica-pdf{margin-left:12px}
/* Punto 57: la pagina d'ingresso dell'area riservata (templates/pubblico/ingresso.html). */
.pagina-ingresso main{min-height:58vh}
.ingresso{background:var(--fondo);border-bottom:1px solid var(--bordo)}
.ingresso-entra{display:inline-flex;align-items:center;margin-top:32px;background:var(--rosso);color:var(--bianco);
  text-decoration:none;border-radius:999px;padding:16px 34px;font:600 13px/1 var(--font);letter-spacing:.18em;
  text-transform:uppercase;box-shadow:0 10px 30px var(--rosso-ombra);transition:background .2s,transform .2s var(--ease)}
.ingresso-entra:hover{background:var(--rosso-hover);transform:translateY(-1px)}
.ingresso-nota{margin-top:18px;font-size:14px;color:var(--muto)}
.marchio-segno{display:block}
.marchio img{display:block;width:72vw;max-width:100%;height:auto}
.marchio-nome{display:none}
nav.menu{display:flex;gap:16px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
nav.menu a{text-decoration:none;color:var(--muto);transition:color .2s}
nav.menu a:hover{color:var(--rosso)}
nav.menu a.cta-mini{color:var(--rosso)}
@media screen and (max-width:720px){
  header.testata .wrap{flex-wrap:wrap;min-height:0;padding-top:14px;row-gap:12px}
  .marchio{display:flex;align-items:center;gap:12px;text-decoration:none}
  /* il segno sta fra il 9,3% e il 21,5% della larghezza del logo, alto quanto il logo */
  .marchio-segno{width:54px;height:52px;overflow:hidden;flex:none}
  .marchio-segno img{width:434px;max-width:none;height:52px;margin-left:-40px}
  .marchio-nome{display:flex;flex-direction:column;font-size:11px;font-weight:500;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--muto)}
  .marchio-nome strong{font-size:16px;font-weight:600;letter-spacing:.01em;text-transform:none;color:var(--nero)}
  /* una riga sola sui telefoni comuni; su quelli strettissimi (320 px) va a capo invece di tagliare «Contatto» */
  nav.menu{width:100%;flex-wrap:wrap;justify-content:space-between;gap:8px 14px;padding:12px 0;border-top:1px solid var(--bordo);
           font-size:11px;letter-spacing:.12em}
  nav.menu a{white-space:nowrap}
}
@media (min-width:721px){
  header.testata .wrap{gap:24px}
  .marchio img{width:min(640px,70vw)}
  nav.menu{gap:28px}
  nav.menu a:not(.cta-mini){display:inline}
}

/* apertura */
.apertura{padding:clamp(48px,8vw,96px) 0 clamp(32px,5vw,56px)}
.apertura h1{font-size:clamp(34px,6.4vw,76px);line-height:1.04;font-weight:600;letter-spacing:-.02em;margin:22px 0 18px;overflow-wrap:anywhere}
.apertura h1 span{display:block;color:var(--rosso)}
.apertura .sotto{font-size:clamp(18px,2vw,22px);color:var(--muto);max-width:640px}
.dati-chiave{display:grid;grid-template-columns:1fr 1fr;row-gap:18px;margin-top:clamp(36px,5vw,56px);border-top:2px solid var(--nero)}
.dati-chiave div{padding:16px 18px 0 0}
.dati-chiave dt{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muto);margin-bottom:6px}
.dati-chiave dd{font-size:16px;font-weight:500}
.dati-chiave dd.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
@media (min-width:721px){.dati-chiave{grid-template-columns:repeat(4,1fr);row-gap:0}}

/* copertina (punto 29): le sezioni del modello sono larghe e basse, si mostrano intere su fondo
   bianco, non tagliate; la didascalia sta in alto */
.copertina{position:relative;display:flex;flex-direction:column;background:var(--bianco);border-bottom:1px solid var(--bordo)}
.copertina img{width:100%;max-height:78vh;object-fit:contain;background:var(--bianco);opacity:.96}
/* sul telefono la didascalia sta sopra la foto, in linea: sopra una sezione bassa la coprirebbe (rilievo
   del revisore); da 721 px in alto sulla foto come il modello */
.copertina figcaption{order:-1;padding:14px var(--pad) 10px;color:var(--nero)}
@media (min-width:721px){.copertina figcaption{position:absolute;left:var(--pad);right:var(--pad);top:18px;padding:0}}
.copertina figcaption .etichetta{color:var(--nero);background:var(--bianco);padding:4px 8px 4px 0}  /* leggibile anche sopra una foto alta */

/* sezioni numerate */
section.blocco{padding:clamp(56px,8vw,104px) 0;border-bottom:1px solid var(--bordo)}
.blocco .griglia{display:grid;grid-template-columns:1fr;gap:clamp(24px,5vw,72px)}
.blocco .numero{font-family:var(--mono);font-size:13px;color:var(--rosso);letter-spacing:.1em;display:block;margin-bottom:12px}
.blocco h2{font-size:clamp(26px,3vw,36px);line-height:1.15;font-weight:600;letter-spacing:-.01em}
.blocco h2 span{color:var(--rosso)}
.blocco p{max-width:68ch;margin-bottom:1em;color:var(--scuro)}
.blocco p.grande{font-size:clamp(19px,2vw,22px);color:var(--nero);line-height:1.5}
.blocco ul.elenco{list-style:none;max-width:68ch;margin-bottom:1em}
.blocco ul.elenco li{padding:10px 0;border-bottom:1px solid var(--bordo);color:var(--scuro)}
@media (min-width:821px){.blocco .griglia{grid-template-columns:minmax(180px,1fr) 2.2fr}}

/* modello 3D: l'iframe Sketchfab si carica solo al clic */
.modello3d{padding:clamp(56px,8vw,104px) 0;background:var(--nero);color:var(--bianco)}
.modello3d .etichetta{color:var(--bianco)}
.modello3d h2{font-size:clamp(28px,3.4vw,42px);font-weight:600;line-height:1.12;margin:16px 0 8px}
.modello3d h2 span{color:var(--rosso-chiaro)}
.modello3d .sotto{color:var(--grigio-chiaro);margin-bottom:28px}
.visore{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--nero);cursor:pointer}
.visore img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visore::after{content:"";position:absolute;inset:0;background:var(--velo-visore)}
.visore button{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--rosso);color:var(--bianco);border:0;border-radius:999px;padding:16px 30px;font:600 13px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;cursor:pointer;box-shadow:0 10px 30px var(--rosso-ombra);transition:background .2s,transform .2s var(--ease)}
.visore button:hover{background:var(--rosso-hover);transform:translate(-50%,-50%) scale(1.03)}
.visore .nota{position:absolute;z-index:2;left:20px;right:20px;bottom:16px;font-size:12px;color:var(--grigio-nota);letter-spacing:.06em}
.visore iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
/* più modelli 3D (punto 28): pulsanti a schede sopra il visore, quello scelto in rosso */
.schede3d{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.schede3d button{background:transparent;color:var(--grigio-nota);border:1px solid var(--grigio-scheda);border-radius:999px;padding:9px 18px;font:600 12px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}
.schede3d button:hover{border-color:var(--bianco);color:var(--bianco)}
.schede3d button[aria-selected="true"]{background:var(--rosso);border-color:var(--rosso);color:var(--bianco)}

/* numeri chiave */
.numeri{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bordo);border:1px solid var(--bordo);margin-top:24px}
.numeri div{background:var(--bianco);padding:28px 22px}
.numeri strong{display:block;font-family:var(--mono);font-size:clamp(26px,3.4vw,40px);font-weight:500;color:var(--nero);line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.numeri span{display:block;margin-top:8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muto)}
@media (min-width:821px){.numeri{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
/* 3 o 4 valori (punto 29, come il modello): una colonna sul telefono, poi 3 colonne, o 2 e da 821 px 4 */
.numeri.tre,.numeri.quattro{grid-template-columns:1fr}
@media (min-width:561px){.numeri.tre{grid-template-columns:repeat(3,1fr)}.numeri.quattro{grid-template-columns:1fr 1fr}}
@media (min-width:821px){.numeri.quattro{grid-template-columns:repeat(4,1fr)}}

/* scheda tecnica: dati principali, strumenti, consegna, committente, incarto */
.scheda{display:grid;grid-template-columns:1fr;gap:0 48px;margin-top:8px}
.scheda div{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--bordo);font-size:15px}
.scheda dt{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muto);padding-top:3px}
.scheda dd.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.formati{display:flex;flex-wrap:wrap;gap:6px}
.formati b{font-family:var(--mono);font-weight:500;font-size:13px;border:1px solid var(--nero);padding:1px 8px;border-radius:4px}
@media (min-width:821px){.scheda{grid-template-columns:1fr 1fr}.scheda div{grid-template-columns:150px 1fr}}

/* galleria */
.galleria{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.galleria a{display:block;overflow:hidden;border-radius:6px;background:var(--fondo);aspect-ratio:4/3}
.galleria a:first-child{grid-column:span 2;aspect-ratio:16/10}
.galleria img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.galleria a:hover img{transform:scale(1.04)}
@media (min-width:721px){
  .galleria{grid-template-columns:repeat(6,1fr)}
  .galleria a{grid-column:span 2}
  .galleria a:first-child{grid-column:span 4}
  /* la seconda accanto alla prima, alta quanto la riga (punto 29, come il modello) */
  .galleria a:nth-child(2){aspect-ratio:auto}
}
/* Dati di prova (punti 29, 32 e 43): l'elenco dei file, sempre visibile (formato, titolo, peso, «Scarica»), e il
   modulo di «Scarica» in una finestra (dialog) con nome, cognome, azienda, e-mail e informativa. */
.elenco-dati{list-style:none;display:grid;gap:10px;margin-top:24px}
.dato{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"formato testo scarica" "formato peso scarica";align-items:center;column-gap:14px;row-gap:2px;border:1px solid var(--bordo);border-radius:10px;padding:14px 16px;background:var(--bianco);transition:border-color .2s}
.dato:hover{border-color:var(--rosso)}
.dato-formato{grid-area:formato;font-family:var(--mono);font-weight:500;font-size:14px;background:var(--rosso);color:var(--bianco);padding:4px 10px;border-radius:4px;justify-self:start}
.dato-testo{grid-area:testo;font-size:15px;color:var(--nero)}
.dato-testo small{display:block;font-size:13px;color:var(--muto);margin-top:2px}
.dato-peso{grid-area:peso;font-family:var(--mono);font-size:13px;color:var(--muto);font-variant-numeric:tabular-nums}
.dato-scarica{grid-area:scarica;display:inline-flex;align-items:center;text-decoration:none;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rosso);border:1px solid var(--rosso);border-radius:999px;padding:10px 18px;transition:background .2s,color .2s}
.dato-scarica:hover,.dato-scarica:focus-visible{background:var(--rosso);color:var(--bianco)}
.dato-scarica:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}
@media (max-width:420px){.dato{grid-template-columns:auto 1fr;grid-template-areas:"formato testo" "peso peso" "scarica scarica"}.dato-scarica{justify-self:start;margin-top:8px}}
.modulo-dati{margin:auto;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;border:0;border-radius:12px;padding:clamp(22px,4vw,36px);background:var(--bianco);color:var(--nero);box-shadow:var(--ombra-scheda)}
.modulo-dati::backdrop{background:var(--velo-modulo)}
.modulo-dati h2{font-size:clamp(22px,3vw,28px);line-height:1.2;font-weight:600;margin:10px 0 6px}
.modulo-dati .file-richiesto{font-family:var(--mono);font-size:13px;color:var(--muto);margin-bottom:18px}
.modulo-dati .campi{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.modulo-dati .campi .largo{grid-column:1 / -1}
@media (max-width:480px){.modulo-dati .campi{grid-template-columns:1fr}}
.modulo-dati .campi label{display:grid;gap:6px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muto)}
.modulo-dati input:not([type=checkbox]){font:400 16px var(--font);letter-spacing:0;text-transform:none;color:var(--nero);padding:12px 14px;border:1px solid var(--grigio-chiaro);border-radius:8px;width:100%}
.modulo-dati input:focus-visible,.modulo-dati a:focus-visible,.modulo-dati button:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}
.modulo-dati .consenso{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:14px;color:var(--scuro)}
.modulo-dati .consenso input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--rosso)}
.modulo-dati .consenso a{color:var(--nero)}
.modulo-dati .nota-modulo{font-size:13px;color:var(--muto);margin-top:12px}
.modulo-dati .errore{color:var(--rosso);font-size:14px;margin-top:10px}
.modulo-dati .esito{font-size:14px;margin-top:12px;padding:12px 14px;border-left:3px solid var(--rosso);background:var(--fondo)}
.modulo-dati .esito a{color:var(--nero);font-weight:500}
.modulo-dati .errore[hidden],.modulo-dati .esito[hidden]{display:none}
.modulo-dati .azioni{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.modulo-dati .azioni .bottone{border:0;cursor:pointer;margin:0}
.modulo-dati .azioni .bottone.fantasma{border:1px solid var(--nero)}
.modulo-dati .azioni .bottone:disabled{opacity:.6;cursor:wait}
/* Pagina «Dati di prova» del sito (punto 37): i gruppi, la descrizione degli esempi, il rimando dalle referenze. */
.gruppo-dati{margin-top:40px}
.gruppo-dati h3{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muto)}
.gruppo-dati .elenco-dati{margin-top:14px}
/* Pagina «Protezione dei dati» (punto 43): la riga che dice che il testo è ancora una bozza. */
.nota-bozza{margin-top:14px;font-size:13px;color:var(--muto);border-left:3px solid var(--rosso);padding-left:12px}
.rimando-dati{margin-top:24px}
/* La card «Scarica dati di prova» di ogni referenza (Giacomo, 07.11.2026) e i tipi di dato della pagina quando i
   file non si scaricano ancora. */
.card-dati{display:grid;gap:12px;justify-items:start;padding:clamp(24px,4vw,40px);border:1px solid var(--bordo);border-left:4px solid var(--rosso);border-radius:12px;background:var(--fondo);color:var(--nero);text-decoration:none;transition:border-color .2s,transform .2s var(--ease)}
.card-dati:hover{border-color:var(--rosso);transform:translateY(-2px)}
.card-dati-titolo{font-size:clamp(24px,3vw,32px);line-height:1.15;font-weight:600;letter-spacing:-.01em}
.card-dati-testo{max-width:60ch;color:var(--scuro)}
.card-dati .bottone{margin-top:8px}
.card-dati:hover .bottone{background:var(--rosso-hover)}
.tipi-dati{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:24px 0}
.tipi-dati li{display:grid;gap:6px;padding:18px 20px;border:1px solid var(--bordo);border-radius:12px;background:var(--bianco)}
.tipi-dati b{font-weight:600;color:var(--nero)}
.tipi-dati span{font-family:var(--mono);font-size:13px;color:var(--muto)}
/* Punto 43, seguito: la fascia «Dati di prova» in fondo alle pagine (indice, FAQ, informativa), prima di «Parla con
   noi». Scura come il blocco dei modelli 3D, con una trama di punti che sfuma verso destra (una nuvola di punti, solo
   CSS); titolo come «Parla con noi», formati come pill mono, bottone rosso primario. Sul telefono tutto in colonna. */
.striscia-dati{position:relative;overflow:hidden;background:var(--nero);color:var(--bianco);padding:clamp(56px,8vw,96px) 0}
.striscia-dati::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.85;
  background-image:radial-gradient(var(--grigio-scheda) 1.2px,transparent 1.8px),radial-gradient(var(--grigio-scheda) 1px,transparent 1.6px);
  background-size:22px 22px,13px 13px;background-position:0 0,7px 5px;
  -webkit-mask-image:linear-gradient(100deg,transparent 30%,var(--nero) 85%);mask-image:linear-gradient(100deg,transparent 30%,var(--nero) 85%)}
.striscia-dati-griglia{position:relative;display:grid;gap:28px 56px;align-items:center}
@media (min-width:861px){.striscia-dati-griglia{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.striscia-dati .etichetta{color:var(--bianco)}
.striscia-dati h2{font-size:clamp(30px,4.4vw,52px);font-weight:600;line-height:1.08;margin:18px 0 14px}
.striscia-dati h2 span{display:block;color:var(--rosso-chiaro)}
.striscia-dati-testo p{color:var(--grigio-chiaro);max-width:520px}
.striscia-dati-azioni{display:grid;gap:24px;justify-items:start}
.striscia-dati-formati{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.striscia-dati-formati li{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.06em;color:var(--bianco);border:1px solid var(--grigio-scheda);border-radius:999px;padding:6px 14px;background:var(--nero)}
.striscia-dati .bottone{margin:0}
.striscia-dati .bottone:focus-visible{outline:2px solid var(--bianco);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.card-dati,.card-dati:hover,.striscia-dati .bottone,.striscia-dati .bottone:hover{transition:none;transform:none}}
.lightbox{position:fixed;inset:0;background:var(--velo);display:none;align-items:center;justify-content:center;z-index:50;padding:24px}
.lightbox.aperta{display:flex}
.lightbox img{max-height:90vh;width:auto;border-radius:6px}
.lightbox button{position:absolute;top:18px;right:22px;background:none;border:1px solid var(--muto);color:var(--bianco);font:600 12px var(--font);letter-spacing:.16em;text-transform:uppercase;padding:9px 14px;border-radius:999px;cursor:pointer}

/* video e link (punto 18): gli MP4 con il lettore del browser, YouTube e Vimeo nel visore
   del modello 3D (si caricano al clic), i link in elenco con il sito in piccolo */
.video-pagina{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:20px;margin-top:24px}
.video-pagina figure{margin:0}
.video-mp4 video{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;background:var(--nero)}
.video-pagina figcaption{margin-top:10px;font-size:14px;color:var(--muto)}
.link-esterni{list-style:none;margin-top:24px;max-width:760px;border-top:1px solid var(--bordo)}
.link-esterni a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--bordo);text-decoration:none;transition:color .2s}
.link-esterni a:hover{color:var(--rosso)}
.link-esterni .titolo{font-weight:500}
.link-esterni small{font-family:var(--mono);font-size:13px;color:var(--muto);overflow-wrap:anywhere}

/* altre referenze (export, punto 14): schede con la barra rossa al passaggio */
.correlati{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px}
.correlati a{display:block;text-decoration:none;border:1px solid var(--bordo);border-radius:10px;position:relative;overflow:hidden;padding:26px;transition:box-shadow .25s,transform .25s var(--ease)}
.correlati a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rosso);opacity:0;transition:opacity .25s;z-index:1}
.correlati a:hover{box-shadow:var(--ombra-scheda);transform:translateY(-2px)}
.correlati a:hover::before{opacity:1}
.correlati small{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muto)}
.correlati h3{font-size:21px;font-weight:600;margin-top:8px}
@media (min-width:721px){.correlati{grid-template-columns:1fr 1fr}}

/* indice dei progetti (punto 16, sul modello di cyark.org/projects): schede grandi a tutta
   immagine, sfumatura scura in basso e testo bianco sopra; ricerca e filtro per tipo in
   testa. Una colonna sul telefono, due da 641 px, tre da 1025 px. */
[hidden]{display:none !important}
.nascosto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.apertura-indice{padding-bottom:clamp(20px,3vw,32px)}
section.blocco-indice{padding-top:0}
.filtri{display:grid;gap:16px;margin-bottom:clamp(24px,3vw,36px)}
.cerca input{width:100%;font:400 16px/1.4 var(--font);color:var(--nero);background:var(--bianco);border:1px solid var(--bordo);border-radius:999px;padding:13px 22px;transition:border-color .2s}
.cerca input:hover{border-color:var(--muto)}
.cerca input:focus{outline:none;border-color:var(--nero)}
.cerca input:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}
/* Filtri per settore e categoria (punto 24): due gruppi, ciascuno con il suo nome piccolo. */
.gruppo-filtro{display:grid;gap:8px}
.nome-filtro{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muto)}
.tipi{display:flex;flex-wrap:wrap;gap:8px}
.tipi button{font:600 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--nero);background:var(--bianco);border:1px solid var(--nero);border-radius:999px;padding:10px 16px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tipi button:hover{border-color:var(--rosso);color:var(--rosso)}
.tipi button[aria-pressed="true"]{background:var(--rosso);border-color:var(--rosso);color:var(--bianco)}
.conta{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muto)}
.nessuno{padding:32px 0;color:var(--muto)}
.indice{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,24px)}
.scheda-progetto{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:10px;background:var(--scuro);color:var(--bianco);text-decoration:none;isolation:isolate}
.scheda-progetto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.scheda-progetto::after{content:"";position:absolute;inset:0;background:var(--velo-scheda);z-index:1}
.scheda-progetto::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--rosso);opacity:0;transition:opacity .25s;z-index:3}
.scheda-progetto:hover img{transform:scale(1.04)}
.scheda-progetto:hover::before,.scheda-progetto:focus-visible::before{opacity:1}
.scheda-progetto .testo{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;gap:6px;padding:clamp(20px,3vw,28px)}
.scheda-progetto small{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--grigio-nota)}
.scheda-progetto .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.scheda-progetto h3{font-size:clamp(24px,2.6vw,30px);line-height:1.12;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.scheda-progetto .riga2{font-size:15px;font-weight:500;line-height:1.4;color:var(--rosso-chiaro)}
.scheda-progetto .etichetta{color:var(--bianco);font-size:11px;margin-top:6px}
.non-pubblicata{position:absolute;top:16px;left:16px;z-index:2;background:var(--rosso);color:var(--bianco);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
/* punto 66: la cella che tiene la scheda e il tasto che copia il link (un tasto non sta dentro un link), la scritta
   «Solo privato» in alto a destra (sito privato) e la nota «Link copiato» */
.scheda-cella{position:relative}
.scheda-cella:has(.copia-indirizzo:not([hidden])) .scheda-progetto .testo{padding-right:72px}
.solo-privato{position:absolute;top:16px;right:16px;z-index:2;background:var(--nero);color:var(--bianco);border:1px solid var(--etichetta-bordo);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.copia-indirizzo{position:absolute;right:16px;bottom:16px;z-index:4;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:999px;border:1px solid var(--tasto-bordo);background:var(--tasto-fondo);color:var(--bianco);cursor:pointer;transition:background .2s,border-color .2s}
.copia-indirizzo[hidden]{display:none}
.copia-indirizzo:hover{background:var(--rosso);border-color:var(--rosso)}
.copia-indirizzo:focus-visible{outline:2px solid var(--bianco);outline-offset:2px;background:var(--rosso);border-color:var(--rosso)}
.copia-indirizzo .ico{display:block;width:20px;height:20px}
.nota-copia{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:60;max-width:calc(100vw - 32px);background:var(--nero);color:var(--bianco);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:13px 24px;border-radius:999px;box-shadow:var(--ombra-nota);text-align:center}
.nota-copia[hidden]{display:none}
@media (min-width:641px){.indice{grid-template-columns:1fr 1fr}.filtri{grid-template-columns:minmax(260px,1fr) auto;align-items:center}.filtri .cerca{grid-column:1;grid-row:1}.filtri .conta{grid-column:2;grid-row:1}.filtri .gruppo-filtro{grid-column:1 / -1;grid-template-columns:110px 1fr;align-items:center}}
@media (min-width:1025px){.indice{grid-template-columns:repeat(3,1fr)}}

/* contatto */
.contatto{background:var(--fondo);padding:clamp(64px,9vw,120px) 0;text-align:center}
.contatto h2{font-size:clamp(30px,4.4vw,52px);font-weight:600;line-height:1.08;margin:18px 0 14px}
.contatto h2 span{color:var(--rosso)}
.contatto p{color:var(--muto);max-width:560px;margin:0 auto 32px}
.bottone{display:inline-flex;align-items:center;gap:14px;background:var(--rosso);color:var(--bianco);text-decoration:none;border-radius:999px;padding:17px 32px;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;box-shadow:0 10px 26px -8px var(--rosso-ombra-tenue);transition:background .2s,transform .2s var(--ease)}
.bottone:hover{background:var(--rosso-hover);transform:translateY(-1px)}
.bottone.fantasma{background:transparent;color:var(--nero);box-shadow:none;border:1px solid var(--nero);margin:12px 0 0}
.bottone.fantasma:hover{border-color:var(--rosso);color:var(--rosso);background:transparent}
@media (min-width:561px){.bottone.fantasma{margin:0 0 0 10px}}

footer.piede{padding:36px 0;font-size:13px;color:var(--muto)}
footer.piede .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
footer.piede a{text-decoration:none}
footer.piede a:hover{color:var(--rosso)}

/* domande frequenti (punto 38): fisarmonica con <details>, il segno è un angolo disegnato (niente glifi) */
.blocco-faq{padding-top:clamp(16px,3vw,32px)}
.blocco-faq .domande{max-width:880px;border-top:2px solid var(--nero)}
.domanda{border-bottom:1px solid var(--bordo)}
.domanda summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 4px 22px 0}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary h2{font-size:clamp(18px,2vw,22px);line-height:1.35;font-weight:600;letter-spacing:0;color:var(--nero);transition:color .2s var(--ease)}
.domanda summary::after{content:"";flex:none;width:10px;height:10px;margin-right:4px;border-right:2px solid var(--rosso);border-bottom:2px solid var(--rosso);transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.domanda[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.domanda summary:hover h2{color:var(--rosso)}
.domanda summary:focus-visible{outline:2px solid var(--rosso);outline-offset:2px}
.domanda .risposta{padding:0 0 26px}
.domanda .risposta p{max-width:68ch;margin-bottom:1em;color:var(--scuro)}
.domanda .risposta p:last-child{margin-bottom:0}

/* pagina del tema (punto 53), ricalcata sulla pagina della PPP: indice in alto, foto nelle sezioni, fonte, sezione
   «in evidenza» su fondo scuro, passi numerati, domande con fonte, nota in fondo. Le domande usano la fisarmonica
   della pagina FAQ (qui con h3, perché la pagina ha già gli h2 delle sezioni). */
.indice-sezioni{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.indice-sezioni a{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--bordo);border-radius:999px;padding:8px 14px;color:var(--scuro);transition:border-color .2s,color .2s}
.indice-sezioni a:hover{border-color:var(--rosso);color:var(--rosso)}
section.blocco[id],section.evidenza[id],#faq{scroll-margin-top:12px}
.blocco .griglia .etichetta{display:flex;margin-bottom:12px}
.figura-sezione{margin:8px 0 22px;border:1px solid var(--bordo);border-radius:8px;overflow:hidden;background:var(--fondo)}
.figura-sezione figcaption{font-size:12px;letter-spacing:.06em;color:var(--muto);padding:10px 14px;background:var(--bianco);border-top:1px solid var(--bordo)}
.blocco p.fonte,.domanda .risposta p.fonte,.evidenza p.fonte{font-family:var(--mono);font-size:13px;color:var(--muto)}
.evidenza{background:var(--nero);color:var(--bianco);padding:clamp(56px,8vw,104px) 0}
.evidenza .etichetta{color:var(--bianco)}
.evidenza h2{font-size:clamp(28px,3.6vw,46px);font-weight:600;line-height:1.1;margin:16px 0 18px;max-width:22ch}
.evidenza h2 span{color:var(--rosso-chiaro)}
.evidenza p{color:var(--grigio-nota);max-width:68ch;margin-bottom:1em}
.evidenza ul.elenco{list-style:none;max-width:68ch;margin-bottom:1em}
.evidenza ul.elenco li{padding:10px 0;border-bottom:1px solid var(--grigio-scheda)}
.evidenza p.fonte{color:var(--grigio-chiaro);margin-top:22px}
.evidenza .figura-sezione{max-width:820px;border-color:var(--grigio-scheda)}
.passi{list-style:none;display:grid;grid-template-columns:1fr;gap:1px;background:var(--bordo);border:1px solid var(--bordo);margin:24px 0}
.passi li{background:var(--bianco);padding:22px 20px}
.passi b{display:block;font-family:var(--mono);font-weight:500;color:var(--rosso);font-size:13px;letter-spacing:.1em;margin-bottom:10px}
.passi strong{display:block;font-size:18px;font-weight:600;margin-bottom:6px}
.passi span{font-size:15px;color:var(--grigio-scheda)}
.evidenza .passi{background:var(--grigio-scheda);border-color:var(--grigio-scheda);margin-top:32px}
.evidenza .passi li{background:var(--nero)}
.evidenza .passi b{color:var(--rosso-chiaro)}
.evidenza .passi span{color:var(--grigio-chiaro)}
@media (min-width:821px){.passi{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
.blocco-faq .titolo-faq{margin:16px 0 28px}
.domanda summary h3{font-size:clamp(17px,1.8vw,20px);line-height:1.35;font-weight:600;color:var(--nero);transition:color .2s var(--ease)}
.domanda summary:hover h3{color:var(--rosso)}
.nota-tema{margin-top:32px}
.nota-tema p{font-size:14px;color:var(--muto)}

/* punto 73 */
/* Schermi grandi (Giacomo, 12.11.2026: a 2000 px il sito stava in una colonna stretta con grandi vuoti ai lati). Solo
   per lo schermo: tutto qui dentro è in @media screen, quindi il foglio A4 e il PDF non cambiano (e2e 8adattivo stampa
   la stessa pagina con e senza questo blocco e confronta i due PDF). Sotto 1280 px non cambia niente: telefono e
   tablet restano come prima. Il contenitore cresce a gradini (1320, 1520, 1680 px) e con lui il corpo del testo
   (17, 18, 20 px), così la riga di testo resta intorno ai 75 caratteri (68ch cresce con il corpo); immagini, numeri,
   galleria e schede si allargano, il testo lungo resta in colonna. Il blocco sta tutto fra i due commenti
   «punto 73»: l'e2e lo toglie per il confronto dei PDF. */
@media screen and (min-width:1280px){
  :root{--max:1320px}
  .correlati{grid-template-columns:repeat(3,1fr)}
  .elenco-dati{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-dati{grid-template-columns:minmax(0,1fr) auto;column-gap:48px;align-items:center}
  .card-dati > :not(.bottone){grid-column:1}
  .card-dati .bottone{grid-column:2;grid-row:1 / span 3;align-self:center;margin-top:0}
}
@media screen and (min-width:1600px){
  :root{--max:1520px}
  body{font-size:18px}
  .indice{grid-template-columns:repeat(4,1fr)}
  .numeri strong{font-size:clamp(40px,3vw,56px)}
  /* nota a lato: dove una sezione ha testo e anche un elenco o una scheda tecnica, il testo resta in colonna e
     l'elenco o la scheda stanno accanto, nello spazio che altrimenti resterebbe vuoto */
  .blocco .griglia > div:last-child:has(> p):has(> .elenco, > .scheda){display:grid;grid-template-columns:minmax(0,68ch) minmax(0,1fr);column-gap:clamp(40px,4vw,72px);align-items:start}
  .blocco .griglia > div:last-child:has(> p) > .elenco,.blocco .griglia > div:last-child:has(> p) > .scheda{grid-column:2;grid-row:1 / span 20;max-width:none;margin-bottom:0}
  .blocco .griglia > div:last-child:has(> p) > .scheda{grid-template-columns:1fr;margin-top:0}
  .blocco-faq .domande{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,4vw,72px);align-items:start}
  .evidenza .figura-sezione{max-width:1100px}
  .visore{max-height:82vh}
  .lightbox img{max-width:92vw}
}
@media screen and (min-width:1920px){
  .elenco-dati{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media screen and (min-width:2200px){
  :root{--max:1680px}
  body{font-size:20px}
  .blocco p.grande{font-size:26px}
  .scheda div{font-size:17px}
  .dati-chiave dd{font-size:18px}
}
/* fine punto 73 */

/* comparsa allo scorrimento: la mette referenza.js solo sugli elementi ancora sotto
   la piega, così senza JS (o prima del JS) si vede tutto */
.compare{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.compare.vista{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
  .compare{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   «Scarica PDF» e foglio di stampa A4 (punto 40). Il PDF lo fa il browser con window.print()
   (regola tecnica: niente ReportLab), da questa sola pagina: vale per l'anteprima, l'export e
   ogni sito che usa il template della referenza. Nel PDF: il logo in testa, i contatti dello
   Studio nel piede, niente menu, moduli, video né pulsanti; il modello 3D e i video diventano
   una foto e il link; foto, numeri e schede non si spezzano fra due pagine.
   ============================================================ */
.scarica-pdf{display:inline-flex;align-items:center;gap:10px;margin-top:28px;background:transparent;color:var(--nero);text-decoration:none;border:1px solid var(--nero);border-radius:999px;padding:11px 20px;font:600 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:border-color .2s,color .2s}
.scarica-pdf:hover{border-color:var(--rosso);color:var(--rosso)}
.nota-pdf{margin-top:10px;font-size:13px;color:var(--muto)}  /* solo nell'anteprima del portale (punto 41) */
.solo-stampa,.solo-stampa-riga{display:none}

@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  html{scroll-behavior:auto}
  body{font-size:10pt;line-height:1.5;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{transition:none !important;animation:none !important}
  .wrap{max-width:none;padding:0}
  /* via quello che si clicca, si compila o si guarda solo a schermo */
  nav.menu,.fascia-anteprima,.esito-anteprima,.banda-dev,.scarica-pdf,.nota-pdf,.lightbox,.contatto,.striscia-dati,.schede3d,
  .visore button,.visore .nota,.visore iframe,.modello3d .sotto,video,.modulo-dati,.elenco-dati,noscript,
  [data-sezione="dati-prova"],[data-sezione="rimando-dati"],[data-sezione="correlati"],[data-sezione="video"],
  .indice-sezioni{display:none !important}
  /* punto 53: stampata, la sezione in evidenza del tema resta leggibile su carta (il PDF del tema è il punto 54) */
  .evidenza{background:var(--fondo);color:var(--nero)}
  .evidenza .etichetta,.evidenza p{color:var(--scuro)}
  .evidenza .passi li{background:var(--bianco)}
  .visore::after{display:none}
  .solo-stampa{display:block}
  .solo-schermo{display:none !important}
  .solo-stampa-riga{display:inline}
  .compare{opacity:1;transform:none}
  h1,h2,h3,.etichetta,.numero{break-after:avoid}
  /* l'etichetta di una sezione diventa un blocco: solo così non resta sola in fondo alla pagina */
  section.blocco > .wrap > .etichetta,.modello3d .etichetta{display:flex}
  p,li{orphans:3;widows:3}
  img,figure,.visore,.numeri,.numeri div,.scheda div,.dati-chiave,.link-stampa li,.link-esterni li{break-inside:avoid}

  /* testa: il logo completo, largo come la pagina (Giacomo, 07.11.2026) */
  header.testata{border-bottom:2px solid var(--nero)}
  header.testata .wrap{min-height:0;padding-bottom:5mm}
  .marchio{display:block}
  .marchio img{display:block;width:100%;height:auto}

  .apertura{padding:9mm 0 5mm}
  .apertura h1{font-size:26pt;margin:4mm 0 3mm}
  .etichetta{font-size:7.5pt}
  .dati-chiave{grid-template-columns:repeat(4,1fr);row-gap:0;margin-top:6mm}
  .dati-chiave div{padding:3mm 4mm 0 0}
  .dati-chiave dt{font-size:7pt;margin-bottom:1mm}
  .dati-chiave dd{font-size:10pt}

  .copertina{border-bottom:0;break-inside:avoid}
  .copertina img{max-height:105mm;opacity:1}
  .copertina figcaption{position:static;order:-1;padding:0 0 2mm}

  section.blocco{padding:6mm 0;border-bottom:1px solid var(--bordo)}
  /* 01-05: a stampa niente griglia, ma un titolo flottante a sinistra. Una riga di griglia Chrome non la spezza
     e, con il titolo «legato» al testo, spingeva intere sezioni alla pagina dopo lasciando mezza pagina bianca. */
  .blocco .griglia{display:block}
  .blocco .griglia::after{content:"";display:block;clear:both}
  .blocco .griglia > div:first-child{float:left;width:40mm}
  .blocco .griglia > div:last-child{margin-left:48mm}
  .blocco .griglia h2,.blocco .griglia .numero{break-after:auto}
  .blocco .griglia p{break-inside:avoid}  /* paragrafi corti: meglio interi alla pagina dopo che una riga sola */
  .blocco .numero{font-size:8.5pt;margin-bottom:1.5mm}
  .blocco h2{font-size:15pt}
  .blocco p{max-width:none;margin-bottom:.7em}
  .blocco p.grande{font-size:11.5pt}
  .blocco ul.elenco{max-width:none}
  .blocco ul.elenco li{padding:1.5mm 0}

  /* il modello 3D: la foto del visore e, sotto, il link di ogni modello */
  .modello3d{padding:6mm 0;background:var(--bianco);color:var(--nero);border-bottom:1px solid var(--bordo)}
  .modello3d .etichetta{color:var(--nero)}
  .modello3d h2{font-size:15pt;margin:2mm 0 4mm}
  .modello3d h2 span{color:var(--rosso)}
  .visore{border-radius:4px;max-height:100mm;cursor:auto}
  .visore:not(:has(img.poster)){display:none}
  /* la foto del visore è la prima della galleria: se la galleria c'è, nel PDF restano solo i link dei modelli */
  body:has(.galleria) .modello3d .visore{display:none !important}
  .link-stampa{list-style:none;margin-top:3mm}
  .link-stampa li,p.link-stampa{padding:1.5mm 0;border-bottom:1px solid var(--bordo)}
  .link-stampa a{font-weight:500;text-decoration:none;color:var(--nero)}
  .link-stampa small{font-family:var(--mono);font-size:8pt;font-weight:400;color:var(--muto);margin-left:3mm;overflow-wrap:anywhere}

  .numeri{grid-template-columns:repeat(4,1fr);margin-top:3mm;gap:0;background:none}  /* il filo da 1 px della griglia a stampa si perde: un bordo vero */
  .numeri div + div{border-left:1px solid var(--bordo)}
  .numeri.tre{grid-template-columns:repeat(3,1fr)}
  .numeri.quattro{grid-template-columns:repeat(4,1fr)}
  .numeri div{padding:4mm}
  .numeri strong{font-size:17pt}
  .numeri span{font-size:7pt;margin-top:1.5mm}

  .scheda{grid-template-columns:1fr 1fr;gap:0 8mm}
  .scheda div{grid-template-columns:28mm 1fr;gap:3mm;padding:2mm 0;font-size:9pt}
  .scheda dt{font-size:7pt;padding-top:1px}

  /* galleria a due colonne, la prima foto larga; nessuna foto a metà fra due pagine */
  .galleria{grid-template-columns:1fr 1fr;gap:3mm;margin-top:3mm}
  .galleria a,.galleria a:nth-child(2){grid-column:span 1;aspect-ratio:4/3;border-radius:3px;break-inside:avoid}
  .galleria a:first-child{grid-column:span 2;aspect-ratio:16/10}
  .galleria img{transform:none}

  .video-pagina{grid-template-columns:1fr 1fr;gap:4mm;margin-top:3mm}
  /* il fotogramma di un video MP4 è spesso la copertina: nel PDF ripeterebbe una foto già stampata. Restano titolo e nota */
  .video-pagina img.solo-stampa{display:none}
  .video-pagina figcaption{font-size:9pt;margin-top:1.5mm}
  .video-esterno .visore{max-height:none}

  .link-esterni{margin-top:3mm;max-width:none}
  .link-esterni a{padding:2mm 0}
  .link-esterni small{display:none}
  .link-esterni a::after{content:attr(href);font-family:var(--mono);font-size:8pt;color:var(--muto);overflow-wrap:anywhere}

  /* piede: i contatti dello Studio, telefono compreso */
  footer.piede{margin-top:6mm;padding:4mm 0 0;border-top:2px solid var(--nero);font-size:9pt;color:var(--nero);break-inside:avoid}
  footer.piede .wrap{gap:2mm 8mm}
}