/* Atlante dei dati. Impianto: foglio bianco, tipografia grande e senza grazie, colore vivo riservato ai dati
   e ai temi. Una testata fissa con ricerca, pagine per tema, esploratore con quattro viste, profili dei territori. */
:root {
  --carta: #ffffff; --carta-2: #f4f6f8; --carta-3: #e9edf0;
  --grafite: #1c2227; --grafite-2: #4e5861; --grafite-3: #7a858f;
  --griglia: #e3e8ec; --filo: #cfd7dd; --vuoto: #eceff2; --vuoto-trama: #c3cbd2;
  --focus: #1f5fd6; --seq-0: #e3eefb; --seq-1: #0b3b7a;
  --r1: #eb6834; --r2: #2a78d6; --r3: #eda100; --r4: #e87ba4; --r5: #008300; --r6: #e34948; --r7: #1baf7a;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300;
  --t-pop: #2a78d6; --t-sal: #d63d3d; --t-ist: #6250d6; --t-amb: #1f8f3a; --t-ene: #e4621f; --t-acq: #0b8fb0;
  --t-agr: #a8780a; --t-dig: #c2459a; --t-eur: #1f3f9e; --t-arc: #6f6457;
  --ombra: 0 10px 30px rgba(28, 36, 44, .12), 0 1px 3px rgba(28, 36, 44, .10);
  --ombra-lieve: 0 2px 10px rgba(28, 36, 44, .08);
  --f-display: "Archivo", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --f-testo: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --raggio: 14px; --raggio-s: 8px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-d: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --carta: #14181b; --carta-2: #1c2126; --carta-3: #262c32;
    --grafite: #eef1f3; --grafite-2: #b7bfc6; --grafite-3: #8a949d;
    --griglia: #2a3137; --filo: #3a434b; --vuoto: #22282d; --vuoto-trama: #434c55;
    --focus: #79a8ff; --seq-0: #1d3350; --seq-1: #bfe0ff;
    --r1: #d95926; --r2: #3987e5; --r3: #c98500; --r4: #d55181; --r5: #008300; --r6: #e66767; --r7: #199e70;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300;
    --t-pop: #4a90e8; --t-sal: #ef5c5c; --t-ist: #8c7cf0; --t-amb: #3fb060; --t-ene: #f07a3c; --t-acq: #2fb0d0;
    --t-agr: #d49a22; --t-dig: #e06ab8; --t-eur: #5b7ce0; --t-arc: #a39483;
    --ombra: 0 10px 30px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
    --ombra-lieve: 0 2px 10px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --carta: #14181b; --carta-2: #1c2126; --carta-3: #262c32;
  --grafite: #eef1f3; --grafite-2: #b7bfc6; --grafite-3: #8a949d;
  --griglia: #2a3137; --filo: #3a434b; --vuoto: #22282d; --vuoto-trama: #434c55;
  --focus: #79a8ff; --seq-0: #1d3350; --seq-1: #bfe0ff;
  --r1: #d95926; --r2: #3987e5; --r3: #c98500; --r4: #d55181; --r5: #008300; --r6: #e66767; --r7: #199e70;
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300;
  --t-pop: #4a90e8; --t-sal: #ef5c5c; --t-ist: #8c7cf0; --t-amb: #3fb060; --t-ene: #f07a3c; --t-acq: #2fb0d0;
  --t-agr: #d49a22; --t-dig: #e06ab8; --t-eur: #5b7ce0; --t-arc: #a39483;
  --ombra: 0 10px 30px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
  --ombra-lieve: 0 2px 10px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--carta); color: var(--grafite); font: 400 16px/1.5 var(--f-testo); font-variant-numeric: tabular-nums; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { margin: 0; }
svg { overflow: visible; }
.visivo-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 16px; top: -60px; background: var(--grafite); color: var(--carta); padding: 8px 14px; border-radius: 6px; z-index: 100; }
.salta:focus { top: 12px; }
.nd { color: var(--grafite-3); font-style: italic; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.caricamento { padding: 60px 0; text-align: center; color: var(--grafite-2); }

/* accento del tema: ogni elemento con data-tema prende il suo colore */
[data-tema="pop"] { --accento: var(--t-pop); } [data-tema="sal"] { --accento: var(--t-sal); } [data-tema="ist"] { --accento: var(--t-ist); }
[data-tema="amb"] { --accento: var(--t-amb); } [data-tema="ene"] { --accento: var(--t-ene); } [data-tema="acq"] { --accento: var(--t-acq); }
[data-tema="agr"] { --accento: var(--t-agr); } [data-tema="dig"] { --accento: var(--t-dig); } [data-tema="eur"] { --accento: var(--t-eur); }
[data-tema="arc"] { --accento: var(--t-arc); }
:root { --accento: var(--grafite); }

/* ---------- testata ---------- */
.testa { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: color-mix(in srgb, var(--carta) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--griglia); transition: box-shadow .2s; }
.testa.scorre { box-shadow: var(--ombra-lieve); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50; background: var(--carta); }
.testa__interno { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding-block: 10px; padding-left: var(--gutter); padding-right: var(--gutter-d); min-height: 64px; }
.marchio { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; font: 800 21px/1 var(--f-display); font-stretch: 86%; letter-spacing: -.01em; }
.marchio svg { width: 30px; height: 30px; }
.marchio b { font-weight: 500; color: var(--grafite-2); }
.cerca { position: relative; flex: 1 1 320px; max-width: 620px; min-width: 0; }
.cerca__icona { position: absolute; left: 13px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; fill: none; stroke: var(--grafite-3); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.cerca input { width: 100%; padding: 11px 44px 11px 40px; border: 1.5px solid var(--filo); border-radius: 999px; background: var(--carta-2); transition: border-color .15s, background .15s; }
.cerca input:focus { background: var(--carta); border-color: var(--grafite-2); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.cerca__tasto { position: absolute; right: 12px; top: 50%; translate: 0 -50%; font: 600 11px/1 var(--f-testo); color: var(--grafite-3); border: 1px solid var(--filo); border-radius: 5px; padding: 3px 6px; background: var(--carta); }
.cerca__risultati { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 8px); background: var(--carta); border: 1px solid var(--filo); border-radius: var(--raggio); box-shadow: var(--ombra); max-height: min(70vh, 560px); overflow-y: auto; padding: 6px; }
.cerca__risultati.combo__lista { top: calc(100% + 8px); max-height: min(70vh, 560px); min-width: 0; margin: 0; }
.combo__lista li[role="option"] .sotto { display: block; font-size: 12.5px; color: var(--grafite-3); }
.combo__lista li[role="option"] .icona { flex: none; width: 18px; height: 18px; color: var(--grafite-2); }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__gruppo { position: relative; }
.nav__voce { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 8px 12px; border-radius: 999px; cursor: pointer; text-decoration: none; font: 600 15px/1 var(--f-display); font-stretch: 95%; color: var(--grafite); white-space: nowrap; }
.nav__voce:hover, .nav__voce[aria-expanded="true"] { background: var(--carta-2); }
.nav__voce svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tendina { position: absolute; right: 0; top: calc(100% + 8px); min-width: 300px; background: var(--carta); border: 1px solid var(--filo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 8px; z-index: 60; display: grid; gap: 2px; }
.tendina a { display: grid; gap: 2px; padding: 9px 12px; border-radius: 8px; text-decoration: none; }
.tendina a:hover { background: var(--carta-2); }
.tendina span { font-size: 13px; color: var(--grafite-3); }
.megamenu { position: fixed; left: 50%; translate: -50% 0; top: 74px; width: min(1100px, calc(100vw - 32px)); background: var(--carta); border: 1px solid var(--filo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 18px; z-index: 60; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.megamenu__tema { display: grid; gap: 6px; padding: 12px; border-radius: 12px; text-decoration: none; border: 1px solid transparent; }
.megamenu__tema:hover { background: color-mix(in srgb, var(--accento) 8%, var(--carta)); border-color: color-mix(in srgb, var(--accento) 30%, transparent); }
.megamenu__tema .icona { width: 30px; height: 30px; color: var(--accento); }
.megamenu__tema strong { font: 700 15px/1.2 var(--f-display); }
.megamenu__tema span { font-size: 12.5px; color: var(--grafite-3); }
.hamburger { display: none; width: 42px; height: 42px; border: 1px solid var(--filo); border-radius: 10px; background: var(--carta); cursor: pointer; place-items: center; flex: none; }
.hamburger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-mobile { border-top: 1px solid var(--griglia); padding: 12px var(--gutter-d) 18px var(--gutter); display: grid; gap: 4px; max-height: calc(100vh - 110px); overflow-y: auto; }
.menu-mobile a { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 10px; text-decoration: none; font: 600 16px/1.2 var(--f-display); }
.menu-mobile a .icona { width: 24px; height: 24px; color: var(--accento); }
.menu-mobile a:hover { background: var(--carta-2); }
.menu-mobile__titolo { padding: 12px 8px 4px; font: 700 11px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--grafite-3); }
.icona { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- pagina e animazioni ---------- */
.pagina { max-width: 1320px; margin: 0 auto; padding-block: 22px 56px; padding-left: var(--gutter); padding-right: var(--gutter-d); min-height: 60vh; }
.pagina > .entra { animation: entra .38s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sfalsa > * { animation: entra .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.briciole { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; color: var(--grafite-3); margin-bottom: 12px; }
.briciole a { color: var(--grafite-2); text-decoration: none; }
.briciole a:hover { text-decoration: underline; }
.briciole svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.sezione { margin-top: 44px; }
.sezione__testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.sezione__testa h2 { font: 800 clamp(22px, 2.6vw, 30px)/1.1 var(--f-display); font-stretch: 86%; letter-spacing: -.01em; }
.sezione__testa p { color: var(--grafite-2); max-width: 70ch; }
.occhiello { font: 700 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accento); }
.nota { font-size: 13px; color: var(--grafite-3); max-width: 80ch; }

/* ---------- pulsanti, chip, campi ---------- */
.pulsante { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--filo); background: var(--carta); border-radius: 999px; padding: 8px 14px; cursor: pointer; line-height: 1.2; font-weight: 600; text-decoration: none; color: var(--grafite); white-space: nowrap; transition: background .15s, border-color .15s, transform .15s; }
.pulsante:hover { background: var(--carta-2); border-color: var(--grafite-3); }
.pulsante:active { transform: scale(.98); }
.pulsante--primario { background: var(--grafite); color: var(--carta); border-color: var(--grafite); }
.pulsante--primario:hover { background: var(--grafite-2); border-color: var(--grafite-2); }
.pulsante--accento { background: var(--accento); border-color: var(--accento); color: #fff; }
.pulsante--accento:hover { filter: brightness(1.08); background: var(--accento); border-color: var(--accento); }
.pulsante--testo { border-color: transparent; background: transparent; color: var(--grafite-2); padding: 6px 6px; }
.pulsante--testo:hover { background: var(--carta-2); color: var(--grafite); }
.pulsante--icona { width: 38px; height: 38px; padding: 0; justify-content: center; }
.pulsante--piccolo { padding: 5px 10px; font-size: 13.5px; }
.pulsante svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pulsante[aria-pressed="true"] { background: var(--grafite); color: var(--carta); border-color: var(--grafite); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--filo); background: var(--carta); font-size: 14px; text-decoration: none; cursor: pointer; }
.chip:hover { border-color: var(--grafite-3); background: var(--carta-2); }
.chip--accento { border-color: color-mix(in srgb, var(--accento) 50%, transparent); background: color-mix(in srgb, var(--accento) 8%, var(--carta)); color: var(--accento); font-weight: 600; }
.chip__togli { all: unset; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--carta-3); cursor: pointer; margin-right: -4px; }
.chip__togli svg { width: 11px; height: 11px; stroke: var(--grafite-2); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.chip__togli:hover { background: var(--filo); }
.chip--fuori { border-style: dashed; color: var(--grafite-3); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pallino { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.pallino--agg { background: none !important; border: 2px dashed var(--grafite); width: 10px; height: 10px; }
.campo { display: grid; gap: 4px; min-width: 0; }
.campo > label { font: 700 12.5px/1 var(--f-display); letter-spacing: .04em; color: var(--grafite-2); text-transform: uppercase; }
.seleziona { position: relative; }
.seleziona select { width: 100%; appearance: none; -webkit-appearance: none; padding: 10px 36px 10px 12px; border: 1.5px solid var(--filo); border-radius: 10px; background: var(--carta); cursor: pointer; font-weight: 600; text-overflow: ellipsis; }
.seleziona select:hover { border-color: var(--grafite-3); }
.seleziona::after { content: ""; position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--grafite-2); border-bottom: 2px solid var(--grafite-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.combo { position: relative; min-width: 0; }
.combo input { width: 100%; padding: 10px 36px 10px 12px; border: 1.5px solid var(--filo); border-radius: 10px; background: var(--carta); font-weight: 600; }
.combo input:hover { border-color: var(--grafite-3); }
.combo input:focus { outline: none; border-color: var(--grafite-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.combo__freccia { position: absolute; right: 13px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--grafite-2); border-bottom: 2px solid var(--grafite-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.combo__lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); min-width: min(420px, 90vw); background: var(--carta); border: 1px solid var(--filo); border-radius: 12px; box-shadow: var(--ombra); max-height: 360px; overflow-y: auto; padding: 6px; margin: 0; list-style: none; }
.combo__lista li[role="option"] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.combo__lista li[aria-selected="true"], .combo__lista li[role="option"]:hover { background: var(--carta-2); }
.combo__lista .gruppo { padding: 10px 10px 4px; font: 700 11px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--grafite-3); }
.combo__lista .tipo { margin-left: auto; font-size: 12px; color: var(--grafite-3); white-space: nowrap; }
.combo__lista .vuoto { padding: 10px; color: var(--grafite-3); }
.interruttore { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; user-select: none; }
.interruttore input { appearance: none; flex: none; width: 36px; height: 21px; border-radius: 99px; background: var(--carta-3); border: 1px solid var(--filo); position: relative; cursor: pointer; margin: 0; transition: background .2s; }
.interruttore input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--carta); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: translate .2s; }
.interruttore input:checked { background: var(--accento); border-color: var(--accento); }
.interruttore input:checked::after { translate: 15px 0; }
.interruttore input:disabled { opacity: .4; cursor: not-allowed; }
.segmenti { display: inline-flex; gap: 2px; padding: 3px; background: var(--carta-2); border: 1px solid var(--griglia); border-radius: 999px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.segmenti::-webkit-scrollbar { display: none; }
.segmenti button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--f-display); color: var(--grafite-2); white-space: nowrap; transition: background .15s, color .15s; }
.segmenti button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.segmenti button:hover { color: var(--grafite); }
.segmenti button[aria-selected="true"] { background: var(--grafite); color: var(--carta); box-shadow: var(--ombra-lieve); }

/* ---------- prima pagina ---------- */
.eroe { position: relative; padding: clamp(28px, 5vw, 64px) 0 clamp(20px, 3vw, 36px); display: grid; gap: 18px; justify-items: start; overflow: hidden; }
.eroe::before { content: ""; position: absolute; inset: -40px -10% auto; height: 420px; z-index: -1; pointer-events: none;
  background: radial-gradient(420px 260px at 12% 10%, color-mix(in srgb, var(--t-pop) 16%, transparent), transparent 70%),
    radial-gradient(360px 240px at 85% 0%, color-mix(in srgb, var(--t-ene) 14%, transparent), transparent 70%),
    radial-gradient(300px 220px at 55% 60%, color-mix(in srgb, var(--t-amb) 10%, transparent), transparent 70%); }
.eroe h1 { font: 900 clamp(36px, 6.2vw, 74px)/.98 var(--f-display); font-stretch: 78%; letter-spacing: -.02em; max-width: 16ch; }
.eroe h1 em { font-style: normal; color: var(--t-pop); }
.eroe p { font-size: clamp(16px, 1.6vw, 19px); color: var(--grafite-2); max-width: 60ch; }
.eroe__numeri { display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 14px; color: var(--grafite-2); }
.eroe__numeri b { font: 800 22px/1 var(--f-display); color: var(--grafite); margin-right: 5px; }
.scorciatoie { display: flex; flex-wrap: wrap; gap: 8px; }
.temi-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.tema-tessera { position: relative; display: grid; gap: 8px; padding: 16px 16px 12px; border: 1.5px solid var(--griglia); border-radius: var(--raggio); background: var(--carta); text-decoration: none; min-height: 168px; transition: transform .18s, border-color .18s, box-shadow .18s; }
.tema-tessera:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accento) 55%, transparent); box-shadow: var(--ombra); }
.tema-tessera .icona { width: 40px; height: 40px; padding: 8px; border-radius: 11px; color: var(--accento); background: color-mix(in srgb, var(--accento) 12%, var(--carta)); }
.tema-tessera h3 { font: 800 18px/1.15 var(--f-display); font-stretch: 90%; }
.tema-tessera .conta { font-size: 13px; color: var(--grafite-3); }
.tema-tessera .mini { margin-top: auto; height: 36px; color: var(--accento); }
.tema-tessera .mini svg { width: 100%; height: 100%; }
.storie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.storia { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; padding: 18px; border: 1.5px solid var(--griglia); border-radius: var(--raggio); background: var(--carta); text-decoration: none; transition: transform .18s, border-color .18s, box-shadow .18s; }
.storia:hover { transform: translateY(-3px); box-shadow: var(--ombra); border-color: color-mix(in srgb, var(--accento) 50%, transparent); }
.storia .numero { font: 900 clamp(34px, 3.6vw, 46px)/1 var(--f-display); font-stretch: 80%; letter-spacing: -.02em; color: var(--accento); }
.storia .numero small { font: 600 15px/1 var(--f-testo); letter-spacing: 0; color: var(--grafite-2); margin-left: 6px; }
.storia h3 { font: 700 17px/1.25 var(--f-display); font-stretch: 92%; }
.storia p { font-size: 13.5px; color: var(--grafite-2); }
.storia .mini { height: 52px; margin-top: 8px; }
.storia .mini svg { width: 100%; height: 100%; }
.schede-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.scheda-card { display: grid; gap: 8px; padding: 22px; border-radius: var(--raggio); text-decoration: none; background: color-mix(in srgb, var(--accento) 9%, var(--carta)); border: 1.5px solid color-mix(in srgb, var(--accento) 30%, transparent); transition: transform .18s, box-shadow .18s; }
.scheda-card:hover { transform: translateY(-3px); box-shadow: var(--ombra); }
.scheda-card h3 { font: 800 22px/1.15 var(--f-display); font-stretch: 86%; }
.scheda-card p { color: var(--grafite-2); font-size: 14.5px; }
.scheda-card .pulsante { justify-self: start; margin-top: 6px; }

/* ---------- pagina di tema ---------- */
.tema-testa { display: grid; gap: 10px; padding: clamp(20px, 3vw, 34px); border-radius: var(--raggio); background: linear-gradient(135deg, color-mix(in srgb, var(--accento) 14%, var(--carta)), color-mix(in srgb, var(--accento) 4%, var(--carta))); border: 1.5px solid color-mix(in srgb, var(--accento) 25%, transparent); }
.tema-testa__riga { display: flex; align-items: center; gap: 14px; }
.tema-testa .icona { width: 52px; height: 52px; padding: 11px; border-radius: 14px; color: #fff; background: var(--accento); }
.tema-testa h1 { font: 900 clamp(28px, 4vw, 44px)/1 var(--f-display); font-stretch: 82%; letter-spacing: -.015em; }
.tema-testa p { color: var(--grafite-2); max-width: 70ch; font-size: 16.5px; }
.tema-testa__numeri { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 6px; }
.tema-testa__numeri div { display: grid; }
.tema-testa__numeri b { font: 800 26px/1.1 var(--f-display); font-stretch: 84%; color: var(--accento); }
.tema-testa__numeri span { font-size: 12.5px; color: var(--grafite-3); }
.sottogruppi { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; position: sticky; top: 72px; z-index: 5; background: color-mix(in srgb, var(--carta) 92%, transparent); padding: 8px 0; backdrop-filter: blur(6px); }
.indicatori-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.ind-card { display: grid; grid-template-rows: auto auto 1fr; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--griglia); border-radius: var(--raggio); background: var(--carta); text-decoration: none; min-height: 150px; transition: transform .18s, border-color .18s, box-shadow .18s; }
.ind-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accento) 50%, transparent); box-shadow: var(--ombra-lieve); }
.ind-card h3 { font: 700 15.5px/1.25 var(--f-display); font-stretch: 92%; }
.ind-card .unita { font-size: 12.5px; color: var(--grafite-3); }
.ind-card__dato { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ind-card__valore { font: 800 24px/1 var(--f-display); font-stretch: 84%; color: var(--accento); }
.ind-card__valore small { display: block; font: 400 12px/1.3 var(--f-testo); color: var(--grafite-3); margin-top: 3px; }
.ind-card .mini { width: 110px; height: 40px; flex: none; }
.ind-card .mini svg { width: 100%; height: 100%; }
.ind-card .nd { font-size: 13px; }

/* ---------- esploratore ---------- */
.esplora { display: grid; gap: 16px; }
.comandi { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(260px, 2fr) auto; gap: 12px; align-items: end; padding: 14px 16px; border: 1.5px solid var(--griglia); border-radius: var(--raggio); background: var(--carta-2); }
.comandi--territori { grid-template-columns: 1fr; gap: 8px; background: var(--carta); }
.territori { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.territori .combo { flex: 1 1 240px; max-width: 360px; }
.territori .combo input { padding-block: 8px; border-radius: 999px; font-weight: 500; }
.esplora__titolo { display: grid; gap: 8px; }
.esplora__titolo h1 { font: 900 clamp(26px, 3.6vw, 40px)/1.05 var(--f-display); font-stretch: 82%; letter-spacing: -.015em; }
.esplora__titolo .unita { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accento) 12%, var(--carta)); color: var(--accento); font: 600 13px/1.3 var(--f-testo); letter-spacing: 0; }
.evidenza { font-size: 16px; color: var(--grafite-2); max-width: 90ch; min-height: 1.5em; }
.evidenza strong { color: var(--grafite); }
.avviso { padding: 10px 14px; border-radius: 10px; background: color-mix(in srgb, var(--t-agr) 12%, var(--carta)); border: 1px solid color-mix(in srgb, var(--t-agr) 35%, transparent); font-size: 14px; }
.confronto__avviso { margin: 0 0 12px; }
.confronto__avviso .chips { margin-top: 8px; }
.grafico-card { border: 1.5px solid var(--griglia); border-radius: var(--raggio); background: var(--carta); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
.grafico-card.pieno { position: fixed; inset: 0; z-index: 90; border-radius: 0; border: 0; padding-top: env(safe-area-inset-top, 0px); }
.grafico-card:fullscreen { padding: 0; }
.grafico-card__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--griglia); }
.grafico-card__strumenti { display: flex; gap: 4px; }
.scena { position: relative; height: clamp(380px, 56vh, 720px); min-height: 360px; }
.scena svg.mappa, .sch__mappa svg { overflow: hidden; }
.grafico-card.pieno .scena, .grafico-card:fullscreen .scena { height: auto; min-height: 0; }
.scena__anno { position: absolute; right: 12px; bottom: 6px; pointer-events: none; user-select: none; font: 900 clamp(80px, 13vw, 190px)/.8 var(--f-display); font-stretch: 70%; letter-spacing: -.03em; color: var(--grafite); opacity: .055; }
.scena__corpo { position: absolute; inset: 0; }
.scena__corpo > svg { display: block; width: 100%; height: 100%; }
.scena__carico { position: absolute; inset: 0; display: grid; place-items: center; color: var(--grafite-2); background: color-mix(in srgb, var(--carta) 75%, transparent); z-index: 3; }
.controlli { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--griglia); background: var(--carta-2); min-height: 52px; }
.controlli .campo { grid-template-columns: auto auto; align-items: center; gap: 8px; }
.controlli .campo > label { text-transform: none; letter-spacing: 0; font: 600 13.5px/1 var(--f-testo); color: var(--grafite-2); }
.controlli .seleziona select { padding: 6px 30px 6px 10px; font-size: 14px; }
.controlli .spazio { flex: 1 1 auto; }
.tempo { display: flex; align-items: center; gap: 10px; flex: 1 1 320px; min-width: 0; }
.tempo__anno { font: 900 30px/1 var(--f-display); font-stretch: 75%; min-width: 3ch; letter-spacing: -.02em; }
.tempo input[type="range"] { flex: 1 1 120px; min-width: 80px; }
.tempo .seleziona select { min-width: 0; }
#t-sel { width: 92px; }
#t-vel { width: 104px; }
.pulsante--play { width: 40px; height: 40px; border-radius: 50%; padding: 0; justify-content: center; background: var(--grafite); color: var(--carta); border-color: var(--grafite); }
.pulsante--play svg { fill: currentColor; stroke: none; }
.pulsante--play .ico-pausa, .pulsante--play[aria-pressed="true"] .ico-play { display: none; }
.pulsante--play[aria-pressed="true"] .ico-pausa { display: block; }
input[type="range"] { -webkit-appearance: none; appearance: none; height: 28px; background: transparent; margin: 0; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: var(--filo); border-radius: 99px; }
input[type="range"]::-moz-range-track { height: 4px; background: var(--filo); border-radius: 99px; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--carta); border: 3px solid var(--accento); }
input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--carta); border: 3px solid var(--accento); }
.navigatore { padding: 6px 14px 4px; border-top: 1px solid var(--griglia); background: var(--carta-2); }
.navigatore__riga { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--grafite-3); }
.navigatore svg { display: block; width: 100%; height: 52px; }
.navigatore .selection { fill: var(--accento); fill-opacity: .14; stroke: var(--accento); stroke-width: 1.5; }
.navigatore .handle { fill: var(--carta); stroke: var(--accento); stroke-width: 1.5; }
.navigatore .overlay { cursor: crosshair; }
.scheda-dato { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px 22px; padding: 14px 16px; border: 1.5px solid var(--griglia); border-radius: var(--raggio); font-size: 13.5px; margin: 0; }
.scheda-dato dt { color: var(--grafite-3); font: 700 11px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.scheda-dato dd { margin: 0; overflow-wrap: anywhere; }
.scheda-dato a { text-decoration-color: var(--filo); text-underline-offset: 2px; }
.campione-vuoto { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(135deg, var(--vuoto-trama) 0 1.5px, var(--vuoto) 1.5px 4px); border: 1px solid var(--filo); vertical-align: -1px; margin-right: 4px; }
.definizione { font-size: 14px; color: var(--grafite-2); }
.definizione summary { cursor: pointer; font-weight: 700; color: var(--grafite); padding: 6px 0; }
.definizione__corpo { max-width: 80ch; display: grid; gap: 8px; padding-bottom: 8px; }
.definizione h3 { font-size: 14px; color: var(--grafite); margin-top: 6px; }
.correlati { display: grid; gap: 10px; }
.correlati .indicatori-griglia { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* grafici */
.asse text, .etichetta-asse { fill: var(--grafite-2); font: 12px var(--f-testo); }
.etichetta-asse { font-weight: 700; fill: var(--grafite); }
.asse path { stroke: none; }
.asse line { stroke: var(--griglia); }
.asse--base line, .asse--base path { stroke: var(--filo); }
.paese { stroke: var(--carta); stroke-width: .5; cursor: pointer; transition: fill .45s ease; }
.paese:hover { stroke: var(--grafite); stroke-width: 1.2; }
.paese--sel { stroke: var(--grafite); stroke-width: 1.8; }
.paese--altro { fill: var(--carta-3); cursor: default; }
.etichetta-dato { font: 700 12.5px var(--f-testo); fill: var(--grafite); paint-order: stroke; stroke: var(--carta); stroke-width: 3.5px; stroke-linejoin: round; pointer-events: none; }
.etichetta-dato--tenue { font-weight: 400; fill: var(--grafite-2); }
.linea { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.linea--fondo { stroke: var(--grafite); stroke-opacity: .07; stroke-width: 1; }
.linea--fondo:hover { stroke-opacity: .5; }
.linea--rif { stroke: var(--grafite); stroke-dasharray: 5 4; stroke-width: 1.8; }
.cursore-anno { stroke: var(--grafite); stroke-opacity: .35; stroke-dasharray: 2 3; }
.mirino { stroke: var(--grafite-3); stroke-width: 1; }
.zoom-nota { position: absolute; left: 12px; top: 10px; font-size: 12px; color: var(--grafite-3); background: color-mix(in srgb, var(--carta) 80%, transparent); padding: 3px 8px; border-radius: 6px; pointer-events: none; }
.comandi-mappa { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.comandi-mappa .pulsante { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 9px; box-shadow: var(--ombra-lieve); }
.comandi-mappa--grafico { left: auto; right: 10px; bottom: 10px; flex-direction: row; }
.sch__mappa { position: relative; }
.sch__grafico { position: relative; }
.legenda-mappa { position: absolute; right: 12px; top: 10px; z-index: 2; max-width: calc(100% - 24px); background: color-mix(in srgb, var(--carta) 88%, transparent); border: 1px solid var(--griglia); border-radius: 10px; padding: 8px 10px; font-size: 12px; color: var(--grafite-2); display: grid; gap: 4px; min-width: 190px; }
.legenda-mappa__barra { height: 10px; border-radius: 3px; }
.legenda-mappa__estremi { display: flex; justify-content: space-between; }
.legenda-mappa__riga { display: flex; align-items: center; gap: 6px; }
.legenda-mappa__riga span:first-child { width: 14px; height: 10px; border-radius: 2px; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px var(--griglia); }
.barre { position: absolute; inset: 0; overflow-y: auto; padding: 10px 10px 16px 4px; }
.barre__lista { position: relative; margin: 0; padding: 0; list-style: none; }
.barra { position: absolute; left: 0; right: 0; height: 28px; display: grid; grid-template-columns: minmax(96px, 26%) minmax(0, 1fr); align-items: center; gap: 10px; transition: transform .55s cubic-bezier(.3, .7, .3, 1); }
.barra button { all: unset; display: contents; cursor: pointer; }
.barra__nome { font-size: 13.5px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__traccia { position: relative; height: 20px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.barra__riempimento { height: 100%; border-radius: 0 5px 5px 0; min-width: 2px; transition: width .55s cubic-bezier(.3, .7, .3, 1), background-color .3s; flex: none; }
.barra__valore { font-size: 13px; color: var(--grafite-2); white-space: nowrap; }
.barra--sel .barra__nome { font-weight: 700; }
.barra--sel .barra__riempimento { box-shadow: 0 0 0 2px var(--carta), 0 0 0 3.5px var(--grafite); }
.barra--spenta { opacity: .25; }
.barra:focus-within .barra__nome { text-decoration: underline; }
.barre__separatore { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--filo); }
.barre__separatore span { position: absolute; top: -10px; left: calc(26% + 10px); background: var(--carta); padding: 0 6px; font-size: 12px; color: var(--grafite-3); }
.tabella { position: absolute; inset: 0; overflow: auto; }
.tabella table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th, .tabella td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--griglia); white-space: nowrap; }
.tabella thead th { position: sticky; top: 0; background: var(--carta); z-index: 1; font-weight: 700; font-size: 12.5px; color: var(--grafite-2); box-shadow: inset 0 -1px 0 var(--filo); }
.tabella th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.tabella th button:focus-visible { outline: 2.5px solid var(--focus); }
.tabella th[aria-sort="ascending"] button::after { content: "▲"; font-size: 9px; }
.tabella th[aria-sort="descending"] button::after { content: "▼"; font-size: 9px; }
.tabella tbody tr:hover { background: var(--carta-2); }
.tabella tr.riga--sel td:first-child + td { font-weight: 700; }
.tabella .anno-dato { color: var(--grafite-3); font-size: 12.5px; }
.tabella .nota-flag { color: var(--grafite-3); font-size: 11px; text-decoration: none; border-bottom: 1px dotted var(--grafite-3); cursor: help; margin-left: 2px; }
.tabella .agg td:nth-child(2)::after { content: "aggregato"; margin-left: 8px; font-size: 11px; color: var(--grafite-3); border: 1px solid var(--filo); border-radius: 99px; padding: 0 6px; }
.tabella input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--grafite); vertical-align: -3px; }
.mini svg { display: block; overflow: visible; }
.mini .traccia { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mini .traccia--rif { stroke: var(--grafite-3); stroke-dasharray: 3 3; stroke-width: 1.4; }
.mini .area { opacity: .12; }
.mini .punto { stroke: var(--carta); stroke-width: 1.5; }

/* suggerimento al passaggio e avvisi */
.suggerimento { position: fixed; z-index: 95; pointer-events: none; max-width: 280px; background: var(--carta); color: var(--grafite); border: 1px solid var(--filo); border-radius: 10px; padding: 9px 11px; box-shadow: var(--ombra); font-size: 13px; line-height: 1.4; }
.suggerimento__nome { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.suggerimento__riga { display: flex; justify-content: space-between; gap: 14px; }
.suggerimento__riga span:first-child { color: var(--grafite-2); }
.suggerimento__valore { font: 800 19px/1.2 var(--f-display); font-stretch: 90%; margin-top: 2px; }
.suggerimento__nota { color: var(--grafite-3); font-size: 12px; margin-top: 4px; }
.suggerimento__vuoto { color: var(--grafite-2); font-style: italic; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0; z-index: 96; background: var(--grafite); color: var(--carta); padding: 10px 16px; border-radius: 999px; font-weight: 600; box-shadow: var(--ombra); animation: entra .25s both; }

/* ---------- profilo di un territorio ---------- */
.profilo-testa { display: grid; gap: 10px; padding: clamp(20px, 3vw, 32px); border-radius: var(--raggio); background: linear-gradient(135deg, color-mix(in srgb, var(--accento) 14%, var(--carta)), var(--carta)); border: 1.5px solid color-mix(in srgb, var(--accento) 25%, transparent); }
.profilo-testa h1 { font: 900 clamp(30px, 4.5vw, 48px)/1 var(--f-display); font-stretch: 80%; letter-spacing: -.015em; }
.profilo-testa p { color: var(--grafite-2); }
.profilo-testa .chips { margin-top: 4px; }
.tessere { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.tessera { display: grid; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--griglia); border-radius: var(--raggio); text-decoration: none; background: var(--carta); transition: transform .18s, box-shadow .18s, border-color .18s; }
.tessera:hover { transform: translateY(-2px); box-shadow: var(--ombra-lieve); border-color: color-mix(in srgb, var(--accento) 50%, transparent); }
.tessera h3 { font: 700 14px/1.25 var(--f-display); color: var(--grafite-2); }
.tessera__valore { font: 800 30px/1 var(--f-display); font-stretch: 82%; color: var(--accento); }
.tessera__valore small { font: 500 13px/1 var(--f-testo); color: var(--grafite-3); margin-left: 5px; }
.tessera__pos { font-size: 12.5px; color: var(--grafite-2); }
.tessera .mini { height: 42px; margin-top: 4px; }
.tessera .mini svg { width: 100%; height: 100%; }

/* ---------- confronta ---------- */
.confronto { overflow-x: auto; border: 1.5px solid var(--griglia); border-radius: var(--raggio); }
.confronto__vuoto { max-width: 600px; margin: 40px auto; padding: 0 16px; text-align: center; color: var(--grafite-2); display: grid; gap: 12px; justify-items: center; }
.confronto__tabella { border-collapse: collapse; font-size: 14px; min-width: 100%; }
.confronto__tabella th, .confronto__tabella td { padding: 10px 12px; border-bottom: 1px solid var(--griglia); text-align: left; vertical-align: top; }
.confronto__tabella thead th { position: sticky; top: 0; z-index: 2; background: var(--carta); box-shadow: inset 0 -1px 0 var(--filo); font-weight: 700; min-width: 140px; }
.confronto__tabella tbody th { position: sticky; left: 0; z-index: 1; background: var(--carta); font-weight: 400; min-width: 200px; max-width: 280px; box-shadow: inset -1px 0 0 var(--griglia); }
.confronto__tabella thead th:first-child { left: 0; z-index: 3; }
.confronto__tipo { display: block; font-weight: 400; font-size: 11.5px; color: var(--grafite-3); }
.confronto__ind { display: block; font-weight: 700; color: var(--grafite); }
.confronto__unita { display: block; font-size: 12px; color: var(--grafite-3); }
.confronto__valore { font: 800 16px/1.2 var(--f-display); font-stretch: 90%; }
.confronto__valore--max::after { content: " ▲"; font-size: 9px; color: var(--grafite-3); vertical-align: 2px; }
.confronto__anno { display: block; font-size: 11.5px; color: var(--grafite-3); }
.confronto__barra { display: block; height: 6px; margin-top: 5px; background: var(--carta-3); border-radius: 3px; overflow: hidden; }
.confronto__barra span { display: block; height: 100%; border-radius: 3px; transition: width .5s cubic-bezier(.3, .7, .3, 1); }
.confronto__tabella td.nd { color: var(--grafite-3); font-style: italic; }
.confronto__nota { padding: 10px 12px; }

/* ---------- archivi ---------- */
.archivi-griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.archivio-card { display: grid; gap: 6px; padding: 16px; border: 1.5px solid var(--griglia); border-radius: var(--raggio); text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.archivio-card:hover { transform: translateY(-2px); box-shadow: var(--ombra-lieve); border-color: color-mix(in srgb, var(--accento) 50%, transparent); }
.archivio-card h3 { font: 700 17px/1.2 var(--f-display); font-stretch: 92%; }
.archivio-card p { font-size: 13.5px; color: var(--grafite-2); }
.archivio-card .conta { font-size: 12.5px; color: var(--grafite-3); }
.serie-lista { list-style: none; margin: 10px 0 0; padding: 0; border: 1.5px solid var(--griglia); border-radius: var(--raggio); overflow: hidden; }
.serie-lista li { border-bottom: 1px solid var(--griglia); }
.serie-lista li:last-child { border-bottom: 0; }
.serie-lista button { all: unset; box-sizing: border-box; width: 100%; display: grid; gap: 2px; padding: 10px 14px; cursor: pointer; }
.serie-lista button:hover { background: var(--carta-2); }
.serie-lista button:focus-visible { outline: 2.5px solid var(--focus); outline-offset: -3px; }
.serie-lista .tipo { font-size: 12.5px; color: var(--grafite-3); }
.serie-lista .nota { padding: 10px 14px; }

/* ---------- prosa (fonti) ---------- */
.prosa { max-width: 80ch; display: grid; gap: 14px; font-size: 16px; }
.prosa h1 { font: 900 clamp(28px, 4vw, 44px)/1 var(--f-display); font-stretch: 82%; letter-spacing: -.015em; }
.prosa h2 { font: 800 22px/1.15 var(--f-display); font-stretch: 88%; margin-top: 14px; }
.prosa ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.prosa .tabella-prosa { overflow-x: auto; }
.prosa table { border-collapse: collapse; font-size: 14px; width: 100%; }
.prosa th, .prosa td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--griglia); vertical-align: top; }
.prosa th { color: var(--grafite-2); font-size: 12.5px; }

/* ---------- piè di pagina ---------- */
.pie { border-top: 1px solid var(--griglia); background: var(--carta-2); }
.pie__interno { max-width: 1320px; margin: 0 auto; padding-block: 22px calc(26px + env(safe-area-inset-bottom, 0px)); padding-left: var(--gutter); padding-right: var(--gutter-d); display: grid; gap: 8px; font-size: 13.5px; color: var(--grafite-2); }

/* ---------- telefono ---------- */
@media (max-width: 1020px) {
  .nav { display: none; }
  .hamburger { display: grid; margin-left: auto; }
  .megamenu { display: none; }
  .comandi { grid-template-columns: 1fr; }
  .comandi--territori { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .testa__interno { flex-wrap: wrap; gap: 10px; padding-block: 8px; }
  .cerca { order: 3; flex-basis: 100%; max-width: none; }
  .cerca__tasto { display: none; }
  .scena { height: clamp(320px, 58vh, 520px); min-height: 300px; }
  .scena__anno { font-size: 72px; }
  .controlli { gap: 8px 12px; padding: 8px 10px; }
  .tempo { flex-basis: 100%; }
  .tempo__anno { font-size: 26px; }
  .barra { grid-template-columns: minmax(84px, 34%) minmax(0, 1fr); }
  .barre__separatore span { left: calc(34% + 10px); }
  .segmenti button { padding: 8px 10px; font-size: 13px; }
  .segmenti button svg { display: none; }
  .legenda-mappa { min-width: 0; width: auto; max-width: min(190px, calc(100% - 64px)); font-size: 11px; padding: 6px 8px; right: 8px; top: auto; bottom: 8px; }
  .legenda-mappa__riga { white-space: normal; }
  .temi-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .tema-tessera { padding: 12px; }
  .sottogruppi { top: 108px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; }
  html { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .paese, .linea, .barra__riempimento { forced-color-adjust: none; }
}

/* ---------- scheda territoriale (scheda-fvg.html) ---------- */
/* Scheda territoriale: pagina di lettura, colonna centrale */
.sch__marchio { margin: 0; font: 760 clamp(18px, 2.2vw, 22px)/1.05 var(--f-display); font-stretch: 88%; }
.sch__marchio a { color: inherit; text-decoration: none; }
.sch__pagina {
  max-width: 1080px; margin: 0 auto; display: flex; flex-direction: column; gap: 44px;
  padding-block: 28px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.sch__occhiello { margin: 0 0 8px; font: 700 12px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--grafite-2); }
.sch__apertura h1 { margin: 0; font: 800 clamp(30px, 5vw, 54px)/1.02 var(--f-display); font-stretch: 82%; letter-spacing: -.015em; max-width: 18ch; }
.sch__lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--grafite-2); max-width: 62ch; margin: 16px 0 0; }
.sch__lede strong, .sch__testo strong { color: var(--grafite); }
.sch__sezione h2 { margin: 0 0 10px; font: 750 clamp(21px, 2.6vw, 28px)/1.15 var(--f-display); font-stretch: 90%; }
.sch__testo { max-width: 68ch; font-size: 16px; margin: 0 0 16px; }
.sch__nota { font-size: 13px; color: var(--grafite-3); max-width: 75ch; margin: 10px 0 0; }
.sch__tessere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .sch__tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .sch__tessere { grid-template-columns: minmax(0, 1fr); } }
.sch__tessera { border-top: 3px solid var(--grafite); padding: 12px 2px 4px; display: flex; flex-direction: column; gap: 2px; }
.sch__tessera h3 { margin: 0; font-size: 14px; color: var(--grafite-2); font-weight: 700; }
.sch__valore { margin: 2px 0 0; font: 800 40px/1 var(--f-display); font-stretch: 80%; color: var(--c1); }
.sch__unita { margin: 0 0 6px; font-size: 13px; color: var(--grafite-3); }
.sch__tessera dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 13.5px; }
.sch__tessera dt { color: var(--grafite-3); font-size: 12px; }
.sch__tessera dd { margin: 0; font-weight: 700; }
.sch__tessera .nd { color: var(--grafite-3); font-weight: 400; font-style: italic; }
.sch__pos { margin: 8px 0 0; font-size: 13px; padding-top: 6px; border-top: 1px solid var(--griglia); }
.sch__figura { margin: 0; }
.sch__figura figcaption { font-size: 13px; color: var(--grafite-3); margin-top: 6px; max-width: 80ch; }
.sch__grafico { height: clamp(280px, 42vw, 420px); }
.sch__grafico--basso { height: clamp(240px, 30vw, 320px); }
.sch__grafico svg, .sch__mappa svg { display: block; width: 100%; height: 100%; }
.sch__mappa { height: clamp(340px, 60vw, 620px); }
.sch__due { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.sch__legenda { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--grafite-2); margin-top: 6px; flex-wrap: wrap; }
.sch__barra { display: inline-block; width: min(260px, 50vw); height: 10px; border-radius: 3px; }
.sch__tabella { overflow-x: auto; }
.sch__tabella table { border-collapse: collapse; width: 100%; font-size: 14px; }
.sch__tabella th, .sch__tabella td { padding: 8px 10px; border-bottom: 1px solid var(--griglia); text-align: left; white-space: nowrap; }
.sch__tabella thead th { font-size: 12.5px; color: var(--grafite-2); box-shadow: inset 0 -1px 0 var(--filo); }
.sch__tabella tbody th { font-weight: 400; white-space: normal; min-width: 180px; }
.sch__tabella .num { text-align: right; font-variant-numeric: tabular-nums; }
.sch__tabella .nd { color: var(--grafite-3); font-style: italic; }
.sch__max { font-weight: 700; }
.sch__anno { display: block; font-size: 11px; color: var(--grafite-3); }
.sch__fonti ul { padding-left: 20px; max-width: 80ch; font-size: 14px; color: var(--grafite-2); }
.mediana-linea { stroke: var(--grafite); stroke-width: 1.4; stroke-dasharray: 4 3; }