/* IPBox — CSS unico del sito statico, nessun JavaScript.
   Direzione: "L'interfaccia di IPBox" (docs/direzione-creativa-2.md, carta B), invariata. Contratto DOM: docs/piano-interfaccia.md;
   la home è a fasce a tutta larghezza, docs/piano-vetrina.md.
   Il sito prende la struttura del prodotto (fascia d'identità, barra del menu a schede, pannelli con barra del titolo,
   menu laterale), non la pelle: nessuna ombra, raggio, gradiente o icona. Il rosso solo su scheda attiva, voce attiva,
   bottone e richiami; lo stato attivo è dichiarato anche da grassetto, filetto bianco di 3 px e aria-current. */

/* ---- Font: IPBox DIN (subset di D-DIN, SIL OFL 1.1; nome interno cambiato per la clausola RFN) ---- */
@font-face{font-family:"IPBox DIN";src:url("../fonts/ipbox-din-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IPBox DIN";src:url("../fonts/ipbox-din-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Riserva metrica su Arial locale: valori da src/fonts/METRICHE.md (peso 400), nessuno spostamento allo scambio. */
@font-face{font-family:"IPBox DIN riserva";src:local("Arial"),local("ArialMT");font-weight:400;size-adjust:93.71%;ascent-override:88.68%;descent-override:18.03%;line-gap-override:9.18%}
@font-face{font-family:"IPBox DIN riserva";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:700;size-adjust:93.71%;ascent-override:88.68%;descent-override:18.03%;line-gap-override:9.18%}

/* ---- Token ---- */
:root{
  --fondo:#ECEDEF;--pannello:#FFFFFF;--barra:#3A3B3E;--barra-titolo:#1C1C1E;--testo:#1C1C1E;--testo-barra:#FFFFFF;
  --testo-2:#50555C;--linea:#787D86;--rosso:#D7141A;--attivo:#D7141A;--attivo-testo:#FFFFFF;--passaggio:#F3F4F6;
  --etichetta:#FFFFFF;--etichetta-testo:#1C1C1E;--identita:#FFFFFF;--identita-testo:#1C1C1E;--focus:#1C1C1E;--focus-barra:#FFFFFF;
  --fascia-scura:#1C1C1E;--fascia-scura-testo:#FFFFFF;--fascia-scura-testo-2:#C9CDD2;
  --t-1:0.8235rem;--t-2:1rem;--t-3:1.2rem;--t-4:1.4412rem;--t-5:2.0706rem;--t-6:2.4853rem;--t-menu:0.8824rem;
  --misura:60ch;--margine:16px;--interno:16px;--spazio:24px;--durata:120ms;
  --font-din:"IPBox DIN","IPBox DIN riserva",system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-testo:system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--fondo:#121314;--pannello:#1D1E20;--barra:#2B2C2F;--barra-titolo:#2B2C2F;--testo:#ECECEC;--testo-2:#A6ABB2;
    --linea:#6B717A;--rosso:#FF6B6B;--attivo:#E0262C;--passaggio:#26282B;--focus:#ECECEC;--fascia-scura:#2B2C2F}
}
@media (min-width:48rem){:root{--margine:24px;--interno:24px}}
@media (min-width:64rem){:root{--margine:64px}}

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{font-size:106.25%;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--fondo);scrollbar-color:var(--linea) var(--fondo)}
body{margin:0;background:var(--fondo);color:var(--testo);font:400 var(--t-2)/1.6 var(--font-testo);overflow-wrap:break-word}
::selection{background:var(--testo);color:var(--pannello)}
img,video{display:block;max-width:100%;height:auto}
picture,svg{display:block}
h1,h2,h3{font-family:var(--font-din);font-weight:700;color:inherit;text-wrap:balance}
h1{margin:0;font-size:var(--t-4);line-height:1.15;letter-spacing:-.01em}
h2{margin:32px 0 12px;font-size:var(--t-3);line-height:1.25}
h3{margin:24px 0 8px;font-size:var(--t-2);line-height:1.35}
p{margin:0 0 16px}
ul,ol,dl,dd{margin:0}
strong{font-weight:700}
small{font-size:var(--t-1)}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover,a:focus-visible{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
main:focus{outline:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (min-width:48rem){h1{font-size:var(--t-5);line-height:1.1}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ---- Salta al contenuto ---- */
.skip{position:absolute;left:var(--margine);top:-6rem;z-index:3;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--pannello);color:var(--testo);border:1px solid var(--testo);font:700 var(--t-2)/1 var(--font-din)}
.skip:focus{top:8px}

/* ---- Contenitore: 80rem al massimo, margini 16 / 24 / 64 px ---- */
.wrap{max-width:calc(80rem + 2 * var(--margine));margin-inline:auto;padding-inline:var(--margine)}

/* ---- Fascia d'identità: bianca in entrambi i temi, come la testata del prodotto ----
   < 48rem (circa 96 px): logo a 36 px, sotto il fornitore. >= 48rem (72 px): logo a 52 px a sinistra, fornitore a destra. */
.identita{--focus:var(--identita-testo);background:var(--identita);color:var(--identita-testo);font-family:var(--font-din)}
.identita .wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:4px;align-content:center;min-height:96px;padding-block:6px 10px}
.logo{justify-self:start;display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.logo img{width:auto;height:36px}
.fornitore{margin:0;font-size:var(--t-1);line-height:1.3}
@media (min-width:48rem){
  .identita .wrap{display:flex;justify-content:space-between;align-items:center;min-height:72px;padding-block:4px}
  .logo img{height:52px}
  .fornitore{text-align:right;line-height:1.2}
}

/* ---- Barra del menu: antracite, schede DIN a 15 px, scheda attiva rossa con grassetto e filetto bianco ---- */
.barra-menu{--focus:var(--focus-barra);background:var(--barra);color:var(--testo-barra);font-family:var(--font-din)}
.barra-menu .wrap{display:flex;flex-wrap:wrap;justify-content:space-between}
.schede,.lingua{display:flex;flex-wrap:wrap;padding:0;list-style:none}
.schede a,.lingua a{display:flex;align-items:center;min-height:48px;padding:0 12px;border-bottom:3px solid transparent;font-size:var(--t-menu);line-height:1.2;text-decoration:none}
.schede a:hover,.lingua a:hover{text-decoration-line:underline}
.schede a:focus-visible,.lingua a:focus-visible{outline-offset:-3px}
.schede a[aria-current]{background:var(--attivo);color:var(--attivo-testo);border-bottom-color:var(--testo-barra);font-weight:700}
.lingua{margin-left:auto}
@media (min-width:24rem){.lingua{border-left:1px solid var(--linea)}}

/* ---- Piè di pagina: a sinistra il logo del fornitore (bianco nel tema scuro) linkato al sito, a destra le righe ---- */
.pie{margin-top:24px}
.pie .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 48px;padding-block:24px;border-top:1px solid var(--linea);font:400 var(--t-1)/1.5 var(--font-din);color:var(--testo-2)}
.pie p{margin:0}
.pie-fornitore{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pie-logo{display:block;width:160px}
.pie-logo img{width:100%;height:auto}
.pie-testi{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 24px}
.pie-ditta{flex:1 1 100%}
.pie-link{display:flex;flex-wrap:wrap;gap:0 20px;padding:0;list-style:none}
.pie-link a{display:inline-flex;align-items:center;min-height:44px;color:var(--testo)}
.pie-nota{margin-left:auto}
@media (min-width:48rem){.pie .wrap{grid-template-columns:auto minmax(0,1fr);align-items:start}}

/* ---- Componenti ---- */
main{padding-block:24px}
main>.wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--spazio);align-items:start}
main>.wrap>*{min-width:0}

/* Pannello: fondo bianco, bordo 1 px, barra del titolo nera alta 40 px, corpo con 24 px (16 px sotto 48rem). */
.pannello{margin:0;background:var(--pannello);border:1px solid var(--linea)}
.barra{display:flex;align-items:center;min-height:40px;margin:-1px -1px 0;padding:6px var(--interno);background:var(--barra-titolo);color:var(--testo-barra);font:700 var(--t-3)/1.2 var(--font-din);letter-spacing:0}
.pannello-corpo{padding:var(--interno)}
.pannello-corpo>:last-child{margin-bottom:0}
/* Nel tema scuro la barra del menu e la fascia scura dell'apertura hanno lo stesso colore: un filetto le separa. */
@media (prefers-color-scheme:dark){.barra{border-bottom:1px solid var(--linea)}.barra-menu{border-bottom:1px solid var(--linea)}}

.bottone{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;background:var(--attivo);color:var(--attivo-testo);font:700 var(--t-2)/1.15 var(--font-din);text-decoration:none;text-align:center}
.bottone:hover,.bottone:focus-visible{text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:.25em}
.bottone:active{background:var(--barra-titolo);color:var(--testo-barra)}
.etichetta{background:var(--etichetta);border:1px solid var(--linea);color:var(--etichetta-testo)}

/* Righe etichetta/valore (comandi delle funzionalità, collegamenti di privacy e cookie). */
.righe{font-family:var(--font-din);font-variant-numeric:tabular-nums}
.riga{display:grid;gap:2px;min-width:0;padding:8px 0;border-bottom:1px solid var(--linea)}
.riga:first-child{padding-top:0}
.riga dt{font-size:var(--t-1);line-height:1.3;color:var(--testo-2)}
.riga dd{min-width:0;font-size:var(--t-2);line-height:1.3;overflow-wrap:anywhere}
.riga dd a:not(.bottone){display:inline-flex;align-items:center;min-height:44px}
.riga .bottone{width:100%}

/* Prosa a misura */
.prose{max-width:var(--misura)}
/* Corpo di pannello che è anche prosa: la misura vale per il testo, il margine interno si aggiunge (border-box). */
.pannello-corpo.prose{max-width:calc(var(--misura) + 2 * var(--interno))}
.prose>:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:4px}
.prose p{text-wrap:pretty}
.note{font:400 var(--t-1)/1.5 var(--font-din);color:var(--testo-2)}

/* Dettaglio: schermata su etichetta bianca, richiami sovrapposti, elenco dei richiami, didascalia.
   L'immagine è un link alla schermata a piena risoluzione: il fuoco si disegna attorno all'etichetta. */
.dettaglio{display:grid;grid-template-columns:minmax(0,1fr);margin:0 0 32px}
.dettaglio .etichetta{position:relative;padding:0;--rosso:#D7141A}
.dettaglio img{width:100%}
.dettaglio-link{display:block;cursor:zoom-in}
.dettaglio-link:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.dettaglio .etichetta:has(.dettaglio-link:hover){border-color:var(--testo)}
.richiami-grafico{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.richiami-grafico line{stroke:var(--rosso);stroke-width:1.4px;vector-effect:non-scaling-stroke}
.richiami-grafico circle{fill:none;stroke:var(--rosso);stroke-width:2px;vector-effect:non-scaling-stroke}
.richiami-grafico text{fill:var(--etichetta-testo);stroke:var(--etichetta);stroke-width:.3em;stroke-linejoin:round;paint-order:stroke;font-family:var(--font-din);font-weight:700;text-anchor:middle;dominant-baseline:central;font-variant-numeric:tabular-nums}
.richiami{columns:1;column-gap:24px;margin:12px 0 0;padding:0;list-style:none;font:400 var(--t-1)/1.45 var(--font-din);font-variant-numeric:tabular-nums}
.richiami li{break-inside:avoid;padding-block:2px}
.dettaglio figcaption{margin-top:8px;padding-top:8px;border-top:1px solid var(--linea);font:400 var(--t-1)/1.45 var(--font-din);color:var(--testo-2)}
.prose .richiami{margin:12px 0 0;padding:0}
.prose .richiami li+li{margin-top:0}
.prose .dettaglio{margin:32px 0}
@media (min-width:48rem){.richiami{columns:2}}

/* Clienti: loghi in celle bianche (anche nel tema scuro), senza griglia; quasi tutti portano al sito del cliente.
   Celle di 136 px e loghi fino a 200 × 96 px: si leggono senza diventare manifesti (2 / 3 / 4 colonne, 5 da 80rem:
   i 25 loghi fanno cinque righe piene a 1280 px; fra 64 e 80rem resta una cella orfana, accettata). */
.clienti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none}
.clienti li{display:flex;align-items:center;min-width:0;min-height:136px;padding:16px 24px;border:0}
.clienti picture{width:100%}
.clienti img{width:auto;max-width:min(100%,200px);max-height:96px;margin-inline:auto;object-fit:contain;transition:opacity var(--durata) ease-out}
.clienti a{display:flex;align-items:center;align-self:stretch;width:100%;outline-offset:4px}
.clienti a:hover{outline:1.4px solid var(--linea);outline-offset:4px}
.clienti a:focus-visible{outline:3px solid var(--etichetta-testo);outline-offset:4px}
.clienti a:hover img,.clienti a:focus-visible img{opacity:.8}
@media (min-width:48rem){.clienti{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:64rem){.clienti{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:80rem){.clienti{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ---- Home: vetrina a fasce a tutta larghezza (docs/piano-vetrina.md) ----
   main senza wrap: ogni fascia porta il proprio. Apertura scura, poi grigio e bianco alternati, chiusura scura.
   Niente barre nere dei titoli: il titolo di sezione ha sopra un filetto rosso di 40 × 4 px. */
.home{padding-block:0}
.home+.pie{margin-top:0}
.fascia{padding-block:40px}
.fascia-bianca{background:var(--pannello)}
/* Sulle fasce scure l'anello del fuoco diventa bianco per ereditarietà del token. */
.fascia-scura{--focus:var(--focus-barra);background:var(--fascia-scura);color:var(--fascia-scura-testo)}
.fascia-scura a{color:inherit}
.fascia-scura .bottone:active{background:var(--fascia-scura-testo);color:var(--fascia-scura)}
@media (min-width:48rem){.fascia{padding-block:48px}}
.titolo-sezione{margin:0 0 24px;font-size:var(--t-4);line-height:1.15;scroll-margin-top:24px}
.titolo-sezione::before{content:"";display:block;width:40px;height:4px;margin-bottom:12px;background:var(--attivo)}

/* Apertura: una colonna fino a 64rem (schermata sotto il testo); poi testo 1–6 e schermata 7–12, 1–5 e 6–12 da 80rem.
   Senza schermata (pagina non pubblicata) il testo prende tutta la riga, alla misura della prosa. */
.apertura{padding-block:48px}
.apertura .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
.apertura h1{margin:0 0 16px;font-size:var(--t-4);line-height:1.1;letter-spacing:-.01em}
.sommario{max-width:60ch;margin:0;font-size:var(--t-2);text-wrap:pretty}
.apertura .sommario{font-size:var(--t-3);line-height:1.5}
.azioni{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin:24px 0 0}
.azioni .bottone{flex:1 1 100%;min-height:48px;padding:0 24px}
.ancora-clienti{display:inline-flex;align-items:center;min-height:44px;font:400 var(--t-2)/1.2 var(--font-din)}
.azioni-nota{margin:8px 0 0;font-size:var(--t-1);line-height:1.45;color:var(--fascia-scura-testo-2);text-wrap:pretty}
@media (min-width:36rem){.azioni .bottone{flex:0 0 auto}}
@media (min-width:48rem){.apertura h1{font-size:var(--t-5)}}

/* Schermata in cornice bianca: il pannello operatore si legge come su un monitor; al passaggio la cornice si fa rossa. */
.schermata-apertura{margin:0}
.schermata-apertura>a{display:block;padding:8px;background:var(--etichetta);border:1px solid var(--etichetta);transition:border-color var(--durata) ease-out}
.schermata-apertura>a:hover{border-color:var(--attivo)}
.schermata-apertura>a:focus-visible{outline-offset:4px}
.schermata-apertura img{width:100%}
.schermata-apertura figcaption{margin-top:8px;font:400 var(--t-1)/1.45 var(--font-din);color:var(--fascia-scura-testo-2)}
.schermata-apertura figcaption a{color:var(--fascia-scura-testo)}
@media (min-width:64rem){
  .apertura{padding-block:64px}
  .apertura h1{font-size:var(--t-6)}
  .apertura .wrap{grid-template-columns:repeat(12,minmax(0,1fr))}
  .apertura-testo{grid-column:1/7}
  .schermata-apertura{grid-column:7/-1}
  .apertura-testo:only-child{grid-column:1/-1;max-width:60ch}
}
@media (min-width:80rem){.apertura-testo{grid-column:1/6}.schermata-apertura{grid-column:6/-1}}

/* Otto qualità in DIN 700, quattro colonne separate da filetti verticali (due sotto 48rem). Non sono link. */
.qualita-voci{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px;padding:0;list-style:none;font:700 var(--t-2)/1.3 var(--font-din)}
.qualita-voci li{display:flex;align-items:center;min-height:44px;padding:4px 12px;border-left:1px solid var(--linea)}
.qualita-voci li:nth-child(2n+1){padding-left:0;border-left:0}
@media (min-width:48rem){
  .qualita-voci{grid-template-columns:repeat(4,minmax(0,1fr));font-size:var(--t-3)}
  .qualita-voci li:nth-child(2n+1){padding-left:12px;border-left:1px solid var(--linea)}
  .qualita-voci li:nth-child(4n+1){padding-left:0;border-left:0}
}

/* Descrizione: il primo paragrafo visibile, il resto in un details con il triangolo nativo; la foto decorativa sotto il
   testo (al più 547 px) e, da 64rem, a destra della prosa in proporzione 7:5. */
.descrizione .prose{max-width:var(--misura)}
.descrizione-corpo{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.descrizione-foto{margin:0;max-width:547px}
.descrizione-foto img{width:100%;border:1px solid var(--linea)}
@media (min-width:64rem){.descrizione-corpo{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}.descrizione-foto{max-width:none}}
.descrizione-resto summary{display:list-item;width:fit-content;min-height:44px;padding-block:10px;font:400 var(--t-2)/1.4 var(--font-din);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;cursor:pointer}
.descrizione-resto summary:hover{text-decoration-thickness:2px}
.descrizione-resto[open] summary{margin-bottom:8px}
.descrizione-resto>:last-child{margin-bottom:0}

/* Tre percorsi per profilo, poi il link alla prima funzionalità (bersaglio di 44 px). */
.percorsi{display:grid;grid-template-columns:minmax(0,1fr);gap:16px 24px;margin-bottom:16px}
.percorso h3{margin:0 0 4px;font-size:var(--t-2);line-height:1.3}
.percorso ul{padding:0;list-style:none}
.percorso li+li{margin-top:8px}
.percorso a{display:inline-flex;align-items:center;min-height:44px;font:400 var(--t-2)/1.2 var(--font-din)}
.percorso p{margin:-6px 0 0;font-size:var(--t-1);line-height:1.45;color:var(--testo-2);text-wrap:pretty}
.percorsi+p{margin:0}
.percorsi+p a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-din)}
@media (min-width:48rem){.percorsi{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Chiusura scura: solo la nota e il bottone, perché chi è arrivato in fondo trovi subito il passo successivo. */
.chiusura .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.chiusura-nota{margin:0;font:400 var(--t-3)/1.4 var(--font-din)}
.chiusura .azioni{align-self:stretch;margin:0}

/* ---- Funzionalità: articolo (con il link al menu, solo sotto 64rem), barra dei comandi, menu laterale ---- */
.articolo h1{margin-bottom:12px}
.articolo .sommario{margin-bottom:24px}
.al-menu{margin:0 0 12px;font:400 var(--t-1)/1.4 var(--font-din)}
.al-menu a{display:inline-flex;align-items:center;min-height:44px}
/* La prosa resta a 60 ch (circa 75 caratteri); le schermate attraversano il pannello, quelle piccole restano alla misura della prosa. */
.articolo .prose{max-width:none}
.articolo .prose>:not(.dettaglio),.articolo .prose>.dettaglio-stretta{max-width:var(--misura)}
.comandi{margin-top:32px;padding:12px 16px;background:var(--fondo);border:1px solid var(--linea)}
.posizione{margin:0 0 4px;font:700 var(--t-1)/1.4 var(--font-din);color:var(--testo-2);font-variant-numeric:tabular-nums}
.righe-comandi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.righe-comandi .riga:nth-child(n+3){grid-column:1/-1}
.righe-comandi .riga:last-child{border-bottom:0;padding-bottom:0}
.righe-comandi .riga:nth-child(-n+2){padding-top:0}
@media (min-width:48rem){
  .righe-comandi{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end}
  .righe-comandi .riga,.righe-comandi .riga:nth-child(n+3){grid-column:auto;padding:0;border-bottom:0}
  .righe-comandi .bottone{width:auto}
}
.menu-laterale .pannello-corpo{padding:0}
.voci{padding:0;list-style:none;font-family:var(--font-din)}
.voci li+li{border-top:1px solid var(--linea)}
.voci a{position:relative;display:flex;align-items:center;min-height:44px;padding:8px var(--interno);font-size:var(--t-menu);line-height:1.25;text-decoration:none;outline:2px solid transparent;outline-offset:-2px;transition:background-color var(--durata) ease-out,outline-color var(--durata) ease-out}
.voci a:hover,.voci a:focus-visible{background:var(--passaggio);outline-color:var(--testo);text-decoration-line:underline}
.voci a:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.voci a[aria-current]{background:var(--attivo);color:var(--attivo-testo);font-weight:700}
.voci a[aria-current]::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:3px;background:var(--attivo-testo)}
@media (min-width:64rem){
  .funzionalita>.wrap{grid-template-columns:280px minmax(0,1fr)}
  .menu-laterale{order:-1}
  .al-menu{display:none}
}

/* ---- Contatti: una fascia bianca come quelle della home. Titolo = ragione sociale (h1.titolo-sezione al rango dell'h1),
   testo introduttivo alla misura, campi senza filetti, valori a 20,4 px, i segnaposti e le parole lunghe un rango sotto ---- */
.recapiti .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.recapiti h1{margin:0;font-size:var(--t-5);line-height:1.1}
.recapiti-testo>p{margin:0;max-width:var(--misura)}
.recapiti-campi{margin:24px 0 0;padding:0;list-style:none;font-family:var(--font-din)}
.recapiti-campi li{padding:8px 0 10px;font-size:var(--t-3);line-height:1.3;overflow-wrap:break-word}
.recapiti-campi li strong{display:block;margin-bottom:2px;font-size:var(--t-1);font-weight:400;line-height:1.3;color:var(--testo-2)}
.recapiti-campi li a{display:inline-flex;align-items:center;min-height:44px}
.recapiti-campi li.valore-compatto{font-size:var(--t-2);line-height:1.35;overflow-wrap:anywhere}
@media (min-width:48rem){.recapiti h1{font-size:var(--t-6)}}

/* ---- Privacy e cookie: da 64rem il pannello è largo quanto la prosa a 60 ch, come una finestra di dialogo, invece di
   una barra a tutta larghezza su mezzo pannello vuoto. La 404 resta a tutta larghezza, con la stessa misura. ---- */
@media (min-width:64rem){
  .semplice>.wrap>.pannello{max-width:calc(var(--misura) + 2 * var(--interno) + 2px)}
}
/* Privacy e cookie: collegamenti in fondo al pannello */
.righe-wrap{max-width:var(--misura);margin-top:32px;padding-top:16px;border-top:1px solid var(--linea)}
.righe-minimo .riga:last-child{border-bottom:0;padding-bottom:0}
@media (min-width:36rem){
  .righe-minimo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:end}
  .righe-minimo .riga{padding:0;border-bottom:0}
}

/* ---- 404 ---- */
.non-trovata .pannello-corpo>p{max-width:var(--misura)}
.non-trovata .pannello-corpo a{display:inline-flex;align-items:center;min-height:44px}

/* ---- Download: elenco dei file audio per categoria (dist/download/index.php) ---- */
.download .barra .conteggio{margin-left:auto;font-weight:400;font-size:var(--t-1);white-space:nowrap}
.download .files{width:100%;border-collapse:collapse}
.download .files thead th{padding:0;border:0;height:0;line-height:0}
.download .files tbody th,.download .files tbody td{padding:16px 0 16px 24px;text-align:left;vertical-align:middle}
.download .files tbody th{padding-left:0}
.download .files tbody tr:first-child>*{padding-top:0}
.download .files tbody tr:last-child>*{padding-bottom:0}
.download .files tbody tr+tr>*{border-top:1px solid var(--linea)}
.download .file-name{font:700 var(--t-2)/1.35 var(--font-din);overflow-wrap:anywhere}
.download .file-meta{color:var(--testo-2);font-size:var(--t-1);line-height:1.4;font-variant-numeric:tabular-nums;white-space:nowrap}
.download .file-player{width:20rem}
.download .file-player audio{display:block;width:100%;height:44px}
.download .file-action{width:1%}
.download .file-action .bottone{gap:8px;white-space:nowrap}
.download .file-action .bottone svg{display:block;width:1.125rem;height:1.125rem;flex:none}
@media (max-width:48rem){
  .download .files,.download .files tbody{display:block}
  .download .files thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .download .files tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;padding:16px 0}
  .download .files tbody tr:first-child{padding-top:0}
  .download .files tbody tr:last-child{padding-bottom:0}
  .download .files tbody tr+tr{border-top:1px solid var(--linea)}
  .download .files tbody th,.download .files tbody td{display:block;padding:0;width:auto}
  .download .files tbody tr+tr>*{border-top:0}
  .download .file-name{grid-column:1;grid-row:1}
  .download .file-meta{grid-column:1;grid-row:2;margin-top:2px;white-space:normal}
  .download .file-action{grid-column:2;grid-row:1 / 3}
  .download .file-player{grid-column:1 / -1;grid-row:3;margin-top:12px}
  .download .file-player:empty{display:none}
}
@media (max-width:30rem){
  .download .files tbody tr{grid-template-columns:minmax(0,1fr)}
  .download .file-action{grid-column:1;grid-row:3;margin-top:12px}
  .download .file-player{grid-row:4}
  .download .file-action .bottone{display:flex;width:100%}
}
@media (forced-colors:active){
  .download .files tbody tr+tr,.download .files tbody tr+tr>*{border-color:CanvasText}
}

/* ---- Preferenze e modalità di sistema ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .pannello,.etichetta,.riga,.voci li+li,.comandi,.qualita-voci li,.descrizione-foto img{border-color:CanvasText}
  .barra{border-bottom:1px solid CanvasText}
  .bottone{border:1px solid ButtonText}
  .schede a[aria-current]{border:2px solid CanvasText}
  .voci a[aria-current]{outline:2px solid CanvasText;outline-offset:-2px}
  .voci a[aria-current]::before{background:CanvasText}
  .schede a:not([aria-current]),.lingua a{border-bottom-color:Canvas}
  .voci a:not([aria-current]){outline-color:Canvas}
  :focus-visible,.voci a:focus-visible,.clienti a:focus-visible,.dettaglio-link:focus-visible{outline-color:Highlight}
  .richiami-grafico line,.richiami-grafico circle{stroke:CanvasText}
  .richiami-grafico circle{fill:Canvas}
  .richiami-grafico text{fill:CanvasText;stroke:Canvas}
  .fascia-scura{border-block:1px solid CanvasText}
  .titolo-sezione::before{background:CanvasText}
  .schermata-apertura>a{border-color:CanvasText}
}
@media print{
  :root{--fondo:#fff;--pannello:#fff;--testo:#000;--testo-2:#333;--linea:#000;--barra-titolo:#fff;--testo-barra:#000;--passaggio:#fff;--fascia-scura:#fff;--fascia-scura-testo:#000;--fascia-scura-testo-2:#333}
  html,body,.pannello,.comandi{background:#fff;color:#000}
  .barra{border-bottom:1px solid #000}
  .fascia-scura{border-block:1px solid #000}
  .bottone{background:#fff;color:#000;border:1px solid #000}
  .skip,.barra-menu,.menu-laterale,.al-menu{display:none}
}