/* Petra AI — «pannello di controllo».
   Il sito prende la grammatica del sinottico di reparto: fondo acciaio,
   pannelli bianchi squadrati con la loro barra di titolo, valori in cifre a
   passo fisso, stati con un colore che vuol dire sempre la stessa cosa, e il
   ciano nicim usato come campo che occupa regioni intere — mai come filo
   decorativo. Nessuna scheda arrotondata, nessun occhiello sopra i titoli. */

@import url("../fonts/fonts.css");

:root {
  --acciaio: #e7eaee;         /* il fondo: lamiera, non carta */
  --acciaio-2: #dfe3e8;
  --acciaio-3: #eef1f4;
  --pannello: #ffffff;
  --bordo: #c3ccd5;
  --inchiostro: #101418;
  --inchiostro-2: #4a5663;    /* 7,5:1 su bianco */
  --inchiostro-3: #5f6b78;    /* 5,5:1 su bianco */
  --scuro: #161b21;           /* strisce e superfici di stato */
  --scuro-riga: #2b333c;
  --campo: #0090cf;           /* il ciano nicim: campiture e barre */
  --campo-pieno: #00719f;     /* lo stesso campo dove sopra ci va del testo */
  --campo-scuro: #00618c;     /* lo stesso segnale dove va letto su chiaro */
  --campo-tenue: #eaf5fb;
  --ambra: #d98416;
  --ambra-testo: #8a5200;
  --rosso: #b02c22;
  --verde: #1b6e42;
  --foglio: 1300px;
  --margine: 28px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  background: var(--acciaio);
}

body {
  margin: 0;
  background: var(--acciaio);
  color: var(--inchiostro);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--campo-scuro);
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--campo-scuro); text-underline-offset: .17em; text-decoration-thickness: 1px; }
a:hover { color: var(--inchiostro); }

::selection { background: var(--campo); color: #fff; }
:focus-visible { outline: 2px solid var(--campo-scuro); outline-offset: 2px; }

/* Anche le superfici che non si disegnano appartengono al quadro. */
* { scrollbar-color: #9daab6 var(--acciaio); scrollbar-width: thin; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--acciaio); }
::-webkit-scrollbar-thumb { background: #9daab6; border: 3px solid var(--acciaio); }
::-webkit-scrollbar-thumb:hover { background: var(--inchiostro-3); }

h1, h2, h3, h4 { font-family: "Archivo", sans-serif; margin: 0; letter-spacing: -.028em; text-wrap: balance; }

/* Ogni cifra che è una misura sta su passo fisso: si legge in colonna. */
.misura, .valore, .n, .esito, .scala, .durata { font-variant-numeric: tabular-nums; }

.foglio { width: min(100% - var(--margine) * 2, var(--foglio)); margin-inline: auto; }

/* ----------------------------------------------------------- testatina --- */
.testatina { position: sticky; top: 0; z-index: 40; background: var(--pannello); border-bottom: 2px solid var(--inchiostro); }
.testatina .foglio { display: flex; align-items: center; gap: 18px; min-height: 76px; }
.marchio { display: flex; align-items: center; }
.marchio img { height: 44px; width: auto; transition: height .22s ease; }
.marchio-sep { width: 2px; height: 32px; background: var(--acciaio-2); flex: none; }
.marchio-nicim { height: 20px; width: auto; transition: height .22s ease; }

.navigazione { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.navigazione a {
  font-family: "Archivo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--inchiostro-2);
  padding: 9px 13px;
}
.navigazione a:hover { background: var(--acciaio); color: var(--inchiostro); }
.navigazione a.attiva { background: var(--inchiostro); color: #fff; }
.navigazione a.bottone { margin-left: 10px; color: #fff; }
.navigazione a.bottone:hover { color: #fff; }

.testatina.compatta .marchio img { height: 34px; }
.testatina.compatta .marchio-nicim { height: 16px; }
.testatina.compatta .foglio { min-height: 58px; }

.avanzamento { position: fixed; top: 0; left: 0; height: 3px; width: 100%; background: var(--campo); transform: scaleX(0); transform-origin: 0 50%; z-index: 50; pointer-events: none; }

.apri-menu {
  display: none; margin-left: auto;
  background: var(--acciaio); border: 1px solid var(--bordo); color: var(--inchiostro);
  font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: .045em; text-transform: uppercase; padding: 9px 12px; cursor: pointer;
}

/* -------------------------------------------------------------- striscia --- */
/* La riga di stato: il quadro dice come stanno le cose prima della pagina.
   È qui il momento autoriale — all'apertura la striscia si accende da sinistra. */
.striscia { background: var(--scuro); color: #fff; }
/* Lo stato di partenza sta dentro la media query: se il movimento non è
   gradito — o l'animazione non parte — la striscia resta semplicemente lì. */
@media (prefers-reduced-motion: no-preference) {
  .striscia { clip-path: inset(0 100% 0 0); animation: accendi-quadro .75s cubic-bezier(.22, .61, .36, 1) .1s forwards; }
}
@keyframes accendi-quadro { to { clip-path: inset(0 0 0 0); } }
.striscia .foglio { display: flex; flex-wrap: wrap; }
.striscia .cella { flex: 1 1 210px; padding: 13px 24px 14px 0; margin-right: 24px; border-right: 1px solid var(--scuro-riga); }
.striscia .cella:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.striscia .riga { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
.striscia .misura { font-family: "Roboto Mono", monospace; font-size: 23px; font-weight: 500; line-height: 1.1; }
.striscia .misura span { font-family: "Archivo", sans-serif; font-weight: 600; font-size: .6em; }
.striscia .misura.ambra { color: #f0ad4a; }
.striscia .misura.rosso { color: #f08b80; }
.striscia .misura.verde { color: #62cf95; }
.striscia .misura.ciano { color: #5cc6f5; }
.striscia .et { font-family: "Archivo", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; color: #c3ced8; }
.striscia .fonte { display: block; margin-top: 3px; font-family: "Archivo", sans-serif; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: #8d9aa6; }

/* -------------------------------------------------------------- bottoni --- */
.bottone {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Archivo", sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none;
  padding: 12px 20px;
  border: 2px solid var(--inchiostro);
  background: var(--inchiostro); color: #fff;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.bottone:hover { background: var(--campo-pieno); border-color: var(--campo-pieno); color: #fff; }
.bottone.leggero { background: transparent; color: var(--inchiostro); }
.bottone.leggero:hover { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.bottone.chiara { background: #fff; color: var(--inchiostro); border-color: #fff; }
.bottone.chiara:hover { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }

/* ------------------------------------------------------------- apertura --- */
.apertura { padding: 44px 0 40px; }
.apertura .foglio { display: grid; grid-template-columns: 1.02fr .98fr; gap: 40px; align-items: start; }
.apertura h1 { font-size: clamp(38px, 4.8vw, 70px); font-weight: 700; line-height: .99; }
.apertura h1 mark { background: var(--campo); color: #fff; padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.apertura .sommario { margin: 22px 0 0; font-size: 17.5px; color: var(--inchiostro-2); max-width: 33em; }
.apertura .azione { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.apertura .sotto { margin: 14px 0 0; font-size: 14.5px; color: var(--inchiostro-3); }
.apertura .marchio-apertura { width: min(178px, 46%); margin-bottom: 22px; }

/* -------------------------------------------------------------- sezioni --- */
.sezione { padding: 42px 0 46px; }
.sezione.stretta { padding: 30px 0 34px; }
.sezione.campo { background: var(--campo-pieno); color: #fff; padding: 52px 0 56px; }
.sezione.campo h2, .sezione.campo h3 { color: #fff; }
.sezione.campo .intestazione-sezione p { color: #e6f4fb; }

.intestazione-sezione { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; align-items: end; margin-bottom: 24px; }
.intestazione-sezione h2 { font-size: clamp(26px, 3.1vw, 41px); font-weight: 700; line-height: 1.02; }
.intestazione-sezione p { margin: 0; color: var(--inchiostro-2); font-size: 16px; max-width: 46em; }
.intestazione-sezione.sola { grid-template-columns: 1fr; }
.intestazione-sezione.sola h2 { max-width: 20ch; }

/* ------------------------------------------------------------ quadranti --- */
/* Un dato è una misura con la sua scala e la sua provenienza. */
.distinta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.distinta.tre { grid-template-columns: repeat(3, 1fr); }
.distinta > div { background: var(--pannello); border: 1px solid var(--bordo); padding: 16px 18px 18px; }
.distinta .valore {
  font-family: "Roboto Mono", monospace; font-weight: 500;
  font-size: clamp(27px, 2.7vw, 38px); line-height: 1.05; letter-spacing: -.02em;
}
.distinta .valore span { font-size: .48em; letter-spacing: 0; }
.distinta .valore.segnale { color: var(--campo-scuro); }
/* Il monospazio è per le misure: una parola torna al carattere dei titoli. */
.distinta .valore.parola { font-family: "Archivo", sans-serif; font-weight: 700; letter-spacing: -.03em; }
.distinta p { margin: 11px 0 0; font-size: 15px; color: var(--inchiostro-2); }
.distinta .fonte { margin-top: 10px; font-family: "Archivo", sans-serif; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--inchiostro-3); }
.sezione.campo .distinta > div { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); }
.sezione.campo .distinta .valore { color: #fff; }
.sezione.campo .distinta p { color: #e6f4fb; }
.sezione.campo .distinta .fonte { color: #dcf0fa; }

/* ------------------------------------------------------------ specifica --- */
/* L'elenco numerato: ogni voce è un pannello con il suo numero di posizione. */
.specifica { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.specifica.due { grid-template-columns: repeat(2, 1fr); }
.specifica li {
  display: grid; grid-template-columns: 42px 1fr; gap: 0 12px;
  background: var(--pannello); border: 1px solid var(--bordo); padding: 14px 17px;
}
.specifica li:hover { border-color: var(--inchiostro-3); }
.specifica .n { font-family: "Roboto Mono", monospace; font-size: 13px; color: var(--campo-scuro); padding-top: 4px; }
.specifica b { font-family: "Archivo", sans-serif; font-size: 16.5px; font-weight: 600; letter-spacing: -.014em; }
.specifica span { display: block; margin-top: 4px; color: var(--inchiostro-2); font-size: 15px; }
.sezione.campo .specifica li { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); }
.sezione.campo .specifica .n { color: #bfe6f8; }
.sezione.campo .specifica span { color: #e6f4fb; }

/* --------------------------------------------------------------- voci --- */
/* Le criticità come un registro di allarmi: si aprono, non si accumulano. */
.registro { display: grid; gap: 8px; }
.voce { background: var(--pannello); border: 1px solid var(--bordo); }
.voce[open] { border-color: var(--inchiostro); }
.voce summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 42px 1fr auto 22px; gap: 0 12px; align-items: center;
  padding: 13px 17px;
}
.voce summary::-webkit-details-marker { display: none; }
.voce summary:hover { background: var(--campo-tenue); }
.voce .n { font-family: "Roboto Mono", monospace; font-size: 13px; color: var(--campo-scuro); }
.voce .titolo { font-family: "Archivo", sans-serif; font-size: 17.5px; font-weight: 600; letter-spacing: -.014em; }
.voce .esito { font-family: "Roboto Mono", monospace; font-size: 13.5px; color: var(--inchiostro-2); white-space: nowrap; }
.voce .segno { font-family: "Archivo", sans-serif; font-size: 17px; color: var(--inchiostro-3); text-align: right; }
.voce .segno::after { content: "+"; }
.voce[open] .segno::after { content: "\2013"; }
.voce[open] .segno { color: var(--inchiostro); }
.voce .corpo { display: grid; grid-template-columns: 42px 1fr 1fr; gap: 0 12px; padding: 0 17px 20px; }
.voce .corpo > div:first-child { grid-column: 2; }
.voce .corpo > div { border-top: 1px solid var(--acciaio-2); padding-top: 14px; }
.voce .corpo h4 { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro-3); margin-bottom: 8px; }
.voce .corpo p { margin: 0; font-size: 15px; color: var(--inchiostro-2); max-width: 46em; }
.voce .corpo ul { margin: 0; padding-left: 17px; font-size: 15px; color: var(--inchiostro-2); }
.voce .corpo li { margin-bottom: 6px; }

/* -------------------------------------------------------------- tabella --- */
.tabella { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--pannello); border: 1px solid var(--bordo); }
.tabella th {
  text-align: left; font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: #fff;
  padding: 10px 16px; background: var(--inchiostro);
}
.tabella td { padding: 11px 16px; border-top: 1px solid var(--acciaio-2); vertical-align: top; }
.tabella tbody tr:nth-child(even) { background: #f6f8fa; }
.tabella tbody tr:hover { background: var(--campo-tenue); }
.tabella td:first-child { width: 56px; font-family: "Roboto Mono", monospace; font-size: 13px; color: var(--campo-scuro); }
.tabella td:nth-child(2) { width: 32%; font-weight: 600; }
.tabella td:last-child { color: var(--inchiostro-2); }

/* --------------------------------------------------------------- tavole --- */
/* Le schermate stanno dentro un pannello con la sua barra: sono finestre. */
.tavola { margin: 0; background: var(--pannello); border: 1px solid var(--bordo); display: flex; flex-direction: column; }
.tavola .telaio { cursor: zoom-in; border-bottom: 1px solid var(--bordo); }
.tavola .telaio img { width: 100%; }
.tavola .telaio:hover { background: var(--campo-tenue); }
.tavola video { width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; background: #000; border-bottom: 1px solid var(--bordo); }
.tavola figcaption { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 11px 16px; font-size: 14px; color: var(--inchiostro-2); }
.tavola figcaption b { font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--inchiostro); padding-top: 2px; }
.tavole { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tavole .tavola.doppia { grid-column: 1 / -1; }
.tavole .tavola.doppia .coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bordo); border-bottom: 1px solid var(--bordo); }
.tavole .tavola.doppia .coppia .telaio { border-bottom: 0; }

/* ------------------------------------------------------------- allarme --- */
/* Il pannello che fa il mestiere invece di raccontarlo: misura, soglia,
   risposta citata dalla Base Conoscenza, comandi. */
.scheda-allarme { background: var(--pannello); border: 2px solid var(--inchiostro); }
.scheda-allarme .capo {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 17px; border-bottom: 1px solid var(--bordo);
  font-family: "Archivo", sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
}
.scheda-allarme .capo .macchina { margin-left: auto; color: var(--inchiostro-2); letter-spacing: .02em; }
.chip { display: inline-block; font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 3px 9px; color: #fff; }
.chip.alta { background: var(--rosso); }
.chip.media { background: var(--ambra); color: #1c1200; }
.chip.ok { background: var(--verde); }
.scheda-allarme .corpo { padding: 18px 17px 4px; }
.scheda-allarme .misura { display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; font-family: "Roboto Mono", monospace; }
.scheda-allarme .misura .v { font-size: 42px; font-weight: 500; line-height: 1; }
.scheda-allarme .misura .soglia { font-size: 13.5px; color: var(--inchiostro-2); }
.scheda-allarme .barra { position: relative; height: 10px; background: var(--acciaio); margin: 16px 0 6px; }
/* Seconda battuta dello stesso momento: la misura sale fino al suo valore. */
.scheda-allarme .barra i { position: absolute; top: 0; bottom: 0; left: 0; width: 81.25%; background: var(--rosso); }
@media (prefers-reduced-motion: no-preference) {
  .scheda-allarme .barra i { width: 0; animation: sale-misura 1.05s cubic-bezier(.22, .61, .36, 1) .55s forwards; }
}
@keyframes sale-misura { to { width: 81.25%; } }
.scheda-allarme .barra u { position: absolute; top: -4px; bottom: -4px; left: 56%; width: 2px; background: var(--inchiostro); }
.scheda-allarme .scala { position: relative; display: flex; justify-content: space-between; font-family: "Roboto Mono", monospace; font-size: 11.5px; color: var(--inchiostro-3); }
.scheda-allarme .scala .soglia-et { position: absolute; left: 56.25%; transform: translateX(-50%); white-space: nowrap; }
.scheda-allarme .risposta { margin-top: 17px; padding: 14px 16px; background: var(--campo-tenue); border-top: 2px solid var(--campo); font-size: 14.5px; color: var(--inchiostro-2); }
.scheda-allarme .risposta b { display: block; margin-bottom: 5px; font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--campo-scuro); }
.scheda-allarme .comandi { display: flex; flex-wrap: wrap; gap: 8px; padding: 17px; }
.scheda-allarme .comandi span { font-family: "Archivo", sans-serif; font-size: 13px; font-weight: 600; padding: 9px 14px; border: 1px solid var(--bordo); color: var(--inchiostro-2); }
.scheda-allarme .comandi span.primario { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }

/* -------------------------------------------------------------- riepilogo --- */
/* Il pannello di riepilogo del turno: righe di stato, come in applicazione. */
.riepilogo { background: var(--pannello); border: 2px solid var(--inchiostro); }
.riepilogo .capo { display: flex; align-items: center; gap: 12px; padding: 11px 17px; border-bottom: 1px solid var(--bordo); font-family: "Archivo", sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.riepilogo .capo .quando { margin-left: auto; font-family: "Roboto Mono", monospace; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--inchiostro-3); }
.riepilogo .riga { display: grid; grid-template-columns: 54px 1fr auto; gap: 14px; align-items: center; padding: 12px 17px; border-top: 1px solid var(--acciaio-2); }
.riepilogo .riga:first-of-type { border-top: 0; }
.riepilogo .riga:hover { background: var(--acciaio-3); }
.riepilogo .q { font-family: "Roboto Mono", monospace; font-size: 24px; font-weight: 500; line-height: 1; }
.riepilogo .q.rosso { color: var(--rosso); }
.riepilogo .q.ambra { color: var(--ambra-testo); }
.riepilogo .q.verde { color: var(--verde); }
.riepilogo .che { font-family: "Archivo", sans-serif; font-size: 15.5px; font-weight: 600; }
.riepilogo .che span { display: block; font-family: "Public Sans", sans-serif; font-weight: 400; font-size: 14px; color: var(--inchiostro-2); }

/* ------------------------------------------------------------- indice --- */
.con-indice { display: grid; grid-template-columns: 258px 1fr; gap: 16px; align-items: start; }
.indice { display: grid; gap: 4px; position: sticky; top: 96px; }
.indice button {
  display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: center;
  width: 100%; text-align: left;
  background: var(--pannello); border: 1px solid var(--bordo); padding: 11px 13px; cursor: pointer;
  font-family: "Archivo", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: var(--inchiostro-2);
}
.indice button .n { font-family: "Roboto Mono", monospace; font-size: 12.5px; color: var(--inchiostro-3); }
.indice button:hover { border-color: var(--inchiostro-3); color: var(--inchiostro); }
.indice button.attiva { background: var(--inchiostro); border-color: var(--inchiostro); color: #fff; }
.indice button.attiva .n { color: #5cc6f5; }

.scheda-assistente { display: none; background: var(--pannello); border: 1px solid var(--bordo); padding: 22px 24px 10px; }
.scheda-assistente.attiva { display: block; }
.scheda-assistente h3 { font-size: clamp(22px, 2.4vw, 31px); font-weight: 700; line-height: 1.04; }
.scheda-assistente .ruolo { margin: 7px 0 20px; color: var(--campo-scuro); font-weight: 600; font-size: 15.5px; }
.scheda-assistente .blocco { display: grid; grid-template-columns: 158px 1fr; gap: 0 18px; padding: 16px 0; border-top: 1px solid var(--acciaio-2); }
.scheda-assistente .blocco h4 { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro-3); padding-top: 3px; }
.scheda-assistente ul { margin: 0; padding-left: 17px; color: var(--inchiostro-2); font-size: 15px; }
.scheda-assistente li { margin-bottom: 6px; }
.scheda-assistente .icona { float: right; width: 108px; margin: -4px 0 10px 20px; }

/* --------------------------------------------------------------- strati --- */
.strati { display: grid; gap: 8px; }
.strato { display: grid; grid-template-columns: 216px 1fr; gap: 0 18px; background: var(--pannello); border: 1px solid var(--bordo); padding: 14px 17px; }
.strato h3 { font-size: 15.5px; font-weight: 700; }
.strato p { margin: 0; color: var(--inchiostro-2); font-size: 15px; }
.strato:hover { border-color: var(--inchiostro-3); }

.governo { margin-top: 16px; background: var(--pannello); border: 1px solid var(--bordo); padding: 16px 18px 18px; }
.governo h3 { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--inchiostro-3); }
.governo ul { margin: 13px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px 26px; font-size: 15px; }
.governo li { position: relative; padding-left: 20px; color: var(--inchiostro-2); }
.governo li::before { content: ""; position: absolute; left: 0; top: 11px; width: 11px; height: 2px; background: var(--campo); }

/* ------------------------------------------------------------- passaggi --- */
.passaggi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.passaggi > div { background: var(--pannello); border: 1px solid var(--bordo); padding: 0 0 18px; }
.passaggi .n { font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--inchiostro); padding: 8px 17px; }
.passaggi h3 { font-size: 20px; font-weight: 700; margin: 15px 17px 7px; }
.passaggi p { margin: 0 17px; color: var(--inchiostro-2); font-size: 15px; }

/* ---------------------------------------------------------------- nota --- */
.nota { display: grid; grid-template-columns: 148px 1fr; gap: 16px; margin-top: 16px; background: var(--acciaio-3); border: 1px solid var(--bordo); padding: 15px 18px; font-size: 16px; }
.nota b { font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--inchiostro-3); padding-top: 3px; }
.nota p { margin: 0; color: var(--inchiostro-2); max-width: 62ch; }
.sezione.campo .nota { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.34); }
.sezione.campo .nota b { color: #dcf0fa; }
.sezione.campo .nota p { color: #fff; }
.sezione.campo .nota a { color: #fff; }

/* ------------------------------------------------------- media e chiusura --- */
.media { display: grid; grid-template-columns: 1.52fr 1fr; gap: 16px; align-items: start; }
.ascolti { display: grid; gap: 8px; }
.ascolto { background: var(--pannello); border: 1px solid var(--bordo); padding: 15px 17px; }
.ascolto h3 { font-size: 16.5px; font-weight: 700; }
.ascolto p { margin: 5px 0 12px; color: var(--inchiostro-2); font-size: 14.5px; }
.ascolto audio { width: 100%; height: 38px; }
.ascolto .durata { margin: 10px 0 0; font-family: "Roboto Mono", monospace; font-size: 12px; color: var(--inchiostro-3); }

.chiusura { background: var(--campo-pieno); color: #fff; padding: 54px 0 22px; }
.chiusura .foglio { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; }
.chiusura h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.02; color: #fff; }
.chiusura p.testo { margin: 20px 0 0; color: #e6f4fb; font-size: 16.5px; }
.chiusura .recapiti dl { display: grid; grid-template-columns: 118px 1fr; gap: 10px 14px; margin: 0 0 24px; }
.chiusura .recapiti dt { font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #dcf0fa; padding-top: 3px; }
.chiusura .recapiti dd { margin: 0; }
.chiusura .recapiti a { color: #fff; text-decoration-color: rgba(255, 255, 255, .55); }
.chiusura .recapiti a:hover { color: #05293a; }
/* Il pulsante tiene i suoi colori: non è un collegamento del blocco recapiti. */
.chiusura .recapiti a.bottone { color: var(--inchiostro); text-decoration: none; }
.chiusura .recapiti a.bottone:hover { color: #fff; }

.pieghe { grid-column: 1 / -1; margin-top: 42px; border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 17px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; font-size: 13.5px; color: #dff0fa; }
.pieghe a { color: #fff; }

/* --------------------------------------------------------------- lente --- */
.lente { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 38px 70px; background: rgba(16, 20, 24, .94); }
.lente[hidden] { display: none; }
.lente figure { margin: 0; max-width: 1400px; }
.lente img { max-width: 100%; max-height: 78vh; border: 1px solid #3b444e; background: #fff; }
.lente figcaption { margin-top: 13px; color: #ccd5de; font-size: 14.5px; text-align: center; }
.lente figcaption b { display: block; font-family: "Archivo", sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #5cc6f5; margin-bottom: 5px; }
.lente button { position: absolute; background: transparent; border: 1px solid #6c737b; color: #fff; width: 44px; height: 44px; font-size: 19px; line-height: 1; cursor: pointer; }
.lente button:hover { background: var(--campo); border-color: var(--campo); }
.lente .chiudi { top: 24px; right: 24px; }
.lente .prec { left: 18px; top: 50%; margin-top: -22px; }
.lente .succ { right: 18px; top: 50%; margin-top: -22px; }

/* ---------------------------------------------------------- responsive --- */
@media (max-width: 1080px) {
  .apertura .foglio, .media, .chiusura .foglio { grid-template-columns: 1fr; }
  .con-indice { grid-template-columns: 1fr; }
  .indice { position: static; grid-template-columns: repeat(2, 1fr); }
  .distinta { grid-template-columns: repeat(2, 1fr); }
  .intestazione-sezione { grid-template-columns: 1fr; gap: 14px; }
  .intestazione-sezione.sola h2 { max-width: none; }
}

@media (max-width: 760px) {
  :root { --margine: 18px; }
  body { font-size: 16px; }
  html { scroll-padding-top: 74px; }
  .navigazione {
    position: fixed; inset: 60px 0 auto;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--pannello); border-bottom: 2px solid var(--inchiostro);
    padding: 6px var(--margine) 16px; display: none;
  }
  .navigazione.aperta { display: flex; }
  .navigazione a { padding: 12px 0; border-bottom: 1px solid var(--acciaio-2); }
  .navigazione a.bottone { margin: 14px 0 0; justify-content: center; }
  .apri-menu { display: block; }
  /* Su telefono la striscia diventa un quadro 2×2: le celle non si impilano
     in una colonna lunga quanto lo schermo. */
  .striscia .foglio { display: grid; grid-template-columns: 1fr 1fr; }
  .striscia .cella { flex: none; padding: 11px 12px 12px 0; margin-right: 0; border-top: 1px solid var(--scuro-riga); }
  .striscia .cella:nth-child(2n) { padding-left: 12px; border-right: 0; }
  .striscia .cella:nth-child(-n+2) { border-top: 0; }
  .striscia .misura { font-size: 20px; }
  .striscia .et { font-size: 11.5px; }
  .striscia .fonte { font-size: 9.5px; }
  .distinta, .distinta.tre, .specifica.due, .passaggi, .tavole,
  .tavole .tavola.doppia .coppia, .governo ul { grid-template-columns: 1fr; }
  .indice { grid-template-columns: 1fr; }
  .voce summary { grid-template-columns: 36px 1fr auto; }
  .voce summary .segno { display: none; }
  .voce .corpo { grid-template-columns: 1fr; }
  .voce .corpo > div:first-child, .voce .corpo > div { grid-column: 1; }
  .strato, .scheda-assistente .blocco, .nota, .tavola figcaption,
  .chiusura .recapiti dl, .riepilogo .riga { grid-template-columns: 1fr; gap: 8px; }
  .riepilogo .riga { gap: 4px; }
  .tabella td:nth-child(2) { width: auto; }
  .lente { padding: 18px 12px; }
  .lente .prec { left: 6px; }
  .lente .succ { right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}