/* Bandi e Imprese: sito pubblico. Blu chiaro su fondo bianco; il carattere e' quello dell'app (BandiHub),
   cosi' i frammenti dell'interfaccia e la pagina sembrano una cosa sola. */
@font-face { font-family: "Geist"; src: url("/static/font/geist.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #ffffff; --surface: #ffffff; --surface-2: #eaf3fc; --field: #1a6fbf; --field-ink: #ffffff; --field-muted: #d4e6f8;
  --ink: #0c2340; --muted: #4a5f78; --accent: #1673c9; --accent-soft: #dcebfa; --warn: #b45309; --warn-soft: #fdf0e1;
  --su-accent: #ffffff; --line: #d3e2f1;
  --m: 32px;                                   /* margini esterni della pagina */
  --gap-sez: clamp(120px, 14vw, 200px);         /* spazio fra le sezioni */
  --t-xl: clamp(40px, 4.2vw, 64px);             /* titoli */
  --t-l: clamp(26px, 2.4vw, 34px);              /* dichiarazioni, risposte */
  --t-m: 18px; --t-s: 16px; --t-xs: 14px;
  --r: 6px;
  --esce: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1624; --surface: #0a1624; --surface-2: #13263d; --field: #164f86; --field-ink: #ffffff; --field-muted: #b9d3ee;
    --ink: #e6eef7; --muted: #a2b5ca; --accent: #6cb6ff; --accent-soft: #17345a; --warn: #f0a35e; --warn-soft: #36261a;
    --su-accent: #0a1624; --line: #24405f;
  }
}
@media (max-width: 760px) { :root { --m: 16px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-s)/1.55 "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "tnum" 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--su-accent); }
.nascosto { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: var(--m); top: -60px; background: var(--ink); color: var(--bg); padding: 10px 14px; z-index: 20; }
.salta:focus { top: 10px; }

/* ---------------------------------------------------------------- barra */
.barra { display: flex; align-items: center; gap: 28px; padding: 18px var(--m); position: relative; z-index: 3; }
.marchio { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; font-weight: 650; font-size: 17px; letter-spacing: -.01em; text-decoration: none; margin-right: auto; }
.marchio img { width: 28px; height: 28px; border-radius: 7px; }
.marchio span { color: #3a4048; }
.marchio b { font-weight: inherit; position: relative; }
/* ".it" sottolineato col tricolore, come nel logo */
.marchio b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.18em; height: .14em; border-radius: 1px;
  background: linear-gradient(90deg, #159a4f 0 33.3%, #d9d9d9 33.3% 66.6%, #ce2b37 66.6%); } /* taste-skill-ignore: bandiera del marchio a tre bande nette */
.barra-link { display: flex; gap: 26px; font-size: 15px; }
.barra-link a { text-decoration: none; padding: 6px 0; }
.barra-link a:hover { text-decoration: underline; }
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; background: var(--accent);
  color: var(--su-accent); font-weight: 600; font-size: var(--t-s); border-radius: var(--r); text-decoration: none;
  transition: transform .18s var(--esce), background-color .18s; }
.bottone:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.bottone:active { transform: scale(.97); }
.bottone.piccolo { min-height: 40px; padding: 0 16px; font-size: 15px; }
@media (max-width: 860px) { .barra-link a:not(:last-child) { display: none; } .barra { gap: 16px; } }
.corto { display: none; }
@media (max-width: 480px) { .lungo { display: none; } .corto { display: inline; } }

/* ---------------------------------------------------------------- primo schermo: titolo e quattro numeri */
.eroe { padding: 40px var(--m) 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(32px, 5vw, 80px); align-items: center; min-height: min(calc(100svh - 76px), 760px); }
.eroe-titolo { font-size: clamp(38px, 4.6vw, 72px); font-weight: 600; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.eroe-sotto { font-size: var(--t-m); line-height: 1.5; margin-top: 24px; max-width: 34em; }
.solo-sicilia { margin-top: 18px; display: inline-flex; gap: 8px; align-items: baseline; background: var(--surface-2); padding: 10px 14px;
  border-radius: var(--r); font-size: var(--t-s); }
.eroe-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.link-freccia { font-weight: 600; color: var(--accent); text-decoration: none; }
.link-freccia::after { content: " →"; }
.link-freccia:hover { text-decoration: underline; }
.kpi { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kpi div { background: var(--surface-2); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; min-height: 190px; }
.kpi dt { font-size: var(--t-s); font-weight: 600; order: 2; margin-top: auto; padding-top: 16px; }
.kpi p { order: 3; }
.kpi dd { order: 1; margin: 0; font-size: clamp(40px, 4.4vw, 68px); font-weight: 600; letter-spacing: -.04em;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--accent); }
.kpi p { font-size: var(--t-xs); color: var(--muted); margin-top: 4px; }
.kpi .kpi-b dd { color: var(--warn); }
@media (max-width: 960px) {
  .eroe { grid-template-columns: 1fr; min-height: 0; row-gap: 32px; padding-top: 24px; }
}
@media (max-width: 480px) {
  .kpi div { padding: 16px; min-height: 150px; }
  .kpi dd { font-size: 34px; }
}

/* colore del settore: chiaro o scuro secondo il tema (i valori arrivano dalla pagina) */
.legenda i, .settori-nome i, .settori-n em, .grafico .seg, .grafico-tip i { --c: var(--c-chiaro); }
@media (prefers-color-scheme: dark) {
  .legenda i, .settori-nome i, .settori-n em, .grafico .seg, .grafico-tip i { --c: var(--c-scuro, var(--c-chiaro)); }
}

/* intestazione delle sezioni del cruscotto: titolo a sinistra, spiegazione a destra */
.sez-titolo.medio { font-size: clamp(30px, 3vw, 44px); }
.sez-testa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; align-items: end; margin-bottom: 32px; }
.sez-testa p { font-size: var(--t-s); max-width: 36em; }
.sez-testa .bottone { justify-self: start; }
@media (max-width: 760px) { .sez-testa { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- andamento degli aiuti (barre impilate) */
.andamento { padding: clamp(80px, 9vw, 140px) var(--m) 0; }
.legenda { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--t-xs); }
.legenda li { display: inline-flex; align-items: center; gap: 8px; }
.legenda i, .settori-nome i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); flex: none; }
.grafico { position: relative; width: 100%; height: clamp(260px, 32vw, 420px); }
.grafico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.grafico .seg { fill: var(--c); transition: opacity .15s; }
.grafico .asse { stroke: var(--line); stroke-width: 1; }
.grafico text { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.grafico .colonna:hover .seg, .grafico .colonna:focus .seg { opacity: 1; }
.grafico.attivo .colonna:not(:hover):not(:focus) .seg { opacity: .45; }
.grafico .colonna { outline: none; cursor: default; }
.grafico-tip { position: fixed; z-index: 10; pointer-events: none; background: var(--surface); color: var(--ink); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; line-height: 1.45; min-width: 200px; box-shadow: 0 6px 24px rgba(12, 35, 64, .18); } /* taste-skill-ignore: il riquadro del grafico galleggia sopra la pagina */
.grafico-tip b { display: block; margin-bottom: 4px; }
.grafico-tip div { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.grafico-tip i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
.grafico-tip span { flex: 1; }
.tabella-dati { margin-top: 16px; font-size: var(--t-xs); }
.tabella-dati summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.tabella-scorre { overflow-x: auto; margin-top: 12px; }
.tabella-dati table { border-collapse: collapse; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella-dati th, .tabella-dati td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--line); }
.tabella-dati th:first-child { text-align: left; }

/* ---------------------------------------------------------------- bandi aperti per settore */
.settori { padding: clamp(80px, 9vw, 140px) var(--m) 0; }
.settori-elenco { display: grid; }
.settori-riga { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) 110px 190px; gap: 16px; align-items: center;
  padding: 12px; border-radius: var(--r); }
.settori-riga:nth-child(even):not(.tutti) { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.settori-riga.intesta { font-size: var(--t-xs); color: var(--muted); padding-top: 0; }
.settori-riga.tutti { background: var(--surface-2); margin-top: 8px; }
.settori-nome { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.settori-n { display: flex; align-items: center; gap: 12px; }
.settori-n b { min-width: 3ch; text-align: right; font-size: 22px; font-variant-numeric: tabular-nums; }
.settori-n em { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--c); width: calc(var(--q) * 100%); max-width: 100%; }
.settori-riga.tutti .settori-n em { display: none; }
.settori-chiusura { font-variant-numeric: tabular-nums; color: var(--warn); font-weight: 600; }
.timer { font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 760px) {
  .settori-riga { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .settori-riga.intesta { display: none; }
  .settori-n { grid-column: 1 / -1; grid-row: 2; }
  .settori-chiusura::before { content: "in chiusura: "; font-weight: 400; color: var(--muted); }
  .settori-timer { grid-column: 1 / -1; font-size: var(--t-xs); color: var(--muted); }
  .settori-timer::before { content: "prossima scadenza fra "; }
}

/* ---------------------------------------------------------------- in chiusura */
.chiusura { padding: clamp(80px, 9vw, 140px) var(--m) 0; }
.chiusura-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chiusura-elenco li { background: var(--surface-2); border-radius: var(--r); padding: 18px 20px; display: grid; grid-template-columns: 96px 1fr;
  gap: 4px 16px; align-items: baseline; }
.chiusura-quando { grid-row: 1 / 3; font-weight: 700; color: var(--warn); font-variant-numeric: tabular-nums; }
.chiusura-quando.oggi { color: #c2341d; }
.chiusura-titolo { font-weight: 600; line-height: 1.35; }
.chiusura-ente { font-size: var(--t-xs); color: var(--muted); }
@media (max-width: 760px) { .chiusura-elenco { grid-template-columns: 1fr; } .chiusura-elenco li { grid-template-columns: 1fr; } .chiusura-quando { grid-row: auto; } }

/* ---------------------------------------------------------------- province */
.province { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.province li { background: var(--surface-2); border-radius: var(--r); padding: 14px 16px; display: flex; flex-direction: column; }
.province b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--accent); line-height: 1.1; }
.province span { font-size: var(--t-xs); }

/* ---------------------------------------------------------------- notizie */
.notizie { padding: clamp(80px, 9vw, 140px) var(--m) 0; }
.notizie-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.notizie-elenco li { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: var(--surface-2); border-radius: var(--r); }
.notizia-tipo { font-size: var(--t-xs); font-weight: 600; color: var(--accent); }
.notizie-elenco a { font-weight: 600; line-height: 1.35; text-decoration: none; }
.notizie-elenco a:hover { text-decoration: underline; }
.notizia-fonte { font-size: var(--t-xs); color: var(--muted); margin-top: auto; }
@media (max-width: 960px) { .notizie-elenco { grid-template-columns: 1fr; } }

.nota-regione { grid-column: 1 / -1; background: #ffffff; color: #0c2340; border-radius: var(--r); padding: 12px 14px; margin: 0 0 24px; }

/* ---------------------------------------------------------------- titoli di sezione */
.sez-titolo { font-size: var(--t-xl); font-weight: 560; letter-spacing: -.035em; line-height: 1.02; }
.sez-titolo.piccolo { font-size: clamp(24px, 2vw, 28px); letter-spacing: -.02em; }

/* ---------------------------------------------------------------- servizi: celle con frammenti */
.servizi { padding: var(--gap-sez) var(--m) 0; }
.servizi .sez-titolo { margin-bottom: 56px; }
.celle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cella { background: var(--surface-2); border-radius: var(--r); min-height: 440px; display: flex; flex-direction: column;
  justify-content: space-between; overflow: hidden; }
.cella-testo { padding: 26px; }
.cella h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; }
.cella-testo p { font-size: var(--t-s); line-height: 1.5; max-width: 34em; }
.celle-nota { margin-top: 16px; font-size: var(--t-xs); color: var(--muted); }
.frammento { background: var(--surface); margin: 0 0 0 26px; padding: 18px; border-radius: 8px 0 0 0; }
.cella.inversa .frammento { border-radius: 0 0 0 8px; margin: 0 0 0 26px; }
.cella:nth-child(2) .frammento, .cella:nth-child(5) .frammento { margin: 0 26px 0 0; border-radius: 0 8px 0 0; }
.cella:nth-child(2) .frammento { border-radius: 0 0 8px 0; }
.cella:nth-child(4) .frammento { margin: 0 26px 0 0; border-radius: 0 0 8px 0; }
.cella:nth-child(5) .frammento { border-radius: 0 8px 0 0; }

.fr-titolo { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.fr-riga { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 6px; }
.fr-riga + .fr-riga { margin-top: 2px; }
.fr-riga b { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  font-variant-numeric: tabular-nums; background: var(--accent-soft); color: var(--accent); }
.fr-riga span { display: flex; flex-direction: column; font-weight: 550; }
.fr-riga small { font-weight: 400; color: var(--muted); font-size: 13px; }
.fr-riga.sel { background: var(--surface-2); }
.fr-check { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.fr-check i { width: 18px; height: 18px; border-radius: 50%; flex: none; position: relative; }
.fr-check.ok i { background: var(--accent); }
.fr-check.ok i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--su-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fr-check.forse i { background: var(--warn-soft); box-shadow: inset 0 0 0 2px var(--warn); } /* taste-skill-ignore: anello dei controlli dentro i frammenti data-ui, o velo sotto la didascalia */
.fr-misura { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; margin: 6px 0 12px; }
.fr-misura i { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.fr-cifre { color: var(--muted); }
.fr-cifre + .fr-cifre { margin-top: 4px; }
.fr-cifre b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fr-grande { font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.fr-grande span { font-size: 15px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.fr-file { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 6px; }
.fr-file.sel { background: var(--surface-2); }
.fr-file .est { flex: none; font-size: 11px; font-weight: 650; padding: 3px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--ink); }
.fr-file em { margin-left: auto; font-style: normal; font-size: 13px; color: var(--warn); white-space: nowrap; }
.fr-file em.pronto { color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.fr-voce { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.fr-voce i { width: 18px; height: 18px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1.5px var(--muted); position: relative; } /* taste-skill-ignore: anello dei controlli dentro i frammenti data-ui, o velo sotto la didascalia */
.fr-voce.fatta i { background: var(--accent); box-shadow: none; } /* taste-skill-ignore: anello dei controlli dentro i frammenti data-ui, o velo sotto la didascalia */
.fr-voce.fatta i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 4px; height: 8px; border: solid var(--su-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fr-voce.fatta { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.fr-voce small { margin-left: auto; color: var(--muted); font-size: 13px; text-decoration: none; }

@media (max-width: 960px) {
  .celle { grid-template-columns: 1fr; gap: 6px; }
  .cella { min-height: 0; }
  .cella.inversa { flex-direction: column-reverse; }
  .cella .frammento { margin: 0 0 0 26px !important; border-radius: 8px 0 0 0 !important; }
  .cella:nth-child(even) .frammento { margin: 0 26px 0 0 !important; border-radius: 0 8px 0 0 !important; }
}

/* ---------------------------------------------------------------- territorio: le foto */
.territorio { padding: var(--gap-sez) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; }
.terr-testo { grid-column: 1 / 6; grid-row: 1 / 3; align-self: start; padding-right: 32px; }
.terr-testo .sez-titolo { margin-bottom: 28px; }
.dichiarazione { font-size: var(--t-l); line-height: 1.25; letter-spacing: -.015em; max-width: 24em; }
.territorio figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--r); }
.territorio img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--esce); }
.territorio figure:hover img { transform: scale(1.03); }
.territorio figcaption { position: absolute; left: 0; bottom: 0; right: 0; padding: 40px 16px 14px; color: #fff; font-size: var(--t-xs);
  background: linear-gradient(transparent, rgba(0, 0, 0, .55)); } /* taste-skill-ignore: anello dei controlli dentro i frammenti data-ui, o velo sotto la didascalia */
.terr-a { grid-column: 6 / 13; grid-row: 1 / 3; aspect-ratio: 16 / 11; }
.terr-b { grid-column: 1 / 5; grid-row: 3; aspect-ratio: 4 / 3; }
.terr-c { grid-column: 5 / 10; grid-row: 3; aspect-ratio: 4 / 3; }
.terr-d { grid-column: 10 / 13; grid-row: 3; aspect-ratio: 3 / 4; }
.terr-d img { object-position: 60% 50%; }
@media (max-width: 960px) {
  .territorio { grid-template-columns: 1fr 1fr; gap: 6px; }
  .terr-testo { grid-column: 1 / -1; grid-row: auto; padding: 0 0 24px; }
  .terr-a { grid-column: 1 / -1; grid-row: auto; }
  .terr-b, .terr-c, .terr-d { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  .terr-d { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------------------------- come lavoriamo: palco fermo, stati che cambiano */
.come { padding: var(--gap-sez) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; }
.come > .sez-titolo { grid-column: 1 / 6; grid-row: 1; margin-bottom: 24px; }
.come-passi { grid-column: 1 / 6; grid-row: 2; }
.passo { min-height: 62vh; display: flex; flex-direction: column; justify-content: center; }
.passo:first-of-type { min-height: 56vh; justify-content: flex-start; }
.passo-frase { font-size: var(--t-l); font-weight: 560; letter-spacing: -.02em; line-height: 1.15; margin-bottom: 14px; color: var(--muted);
  transition: color .3s; }
.passo.attivo .passo-frase { color: var(--ink); }
.passo p:not(.passo-frase) { max-width: 30em; font-size: var(--t-s); }
.come-palco { grid-column: 7 / 13; grid-row: 1 / 3; }
.palco { position: sticky; top: 14vh; background: var(--field); color: var(--field-ink); border-radius: var(--r); padding: 36px;
  min-height: 460px; display: grid; }
.palco .fr-titolo { color: var(--field-muted); font-size: 14px; }
.stato { grid-area: 1 / 1; opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .5s var(--esce); visibility: hidden;
  background: var(--surface); color: var(--ink); border-radius: 10px; padding: 22px; align-self: center; }
.stato .fr-titolo { color: var(--muted); }
.palco[data-mostra="1"] .s1, .palco[data-mostra="2"] .s2, .palco[data-mostra="3"] .s3 { opacity: 1; transform: none; visibility: visible; }
.profilo { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.profilo div { background: var(--surface-2); border-radius: 6px; padding: 10px 12px; }
.profilo dt { font-size: 12px; color: var(--muted); }
.profilo dd { margin: 0; font-weight: 550; }
.tappe { list-style: none; margin: 4px 0 0; padding: 0; }
.tappe li { position: relative; padding: 10px 0 10px 32px; color: var(--muted); }
.tappe li::before { content: ""; position: absolute; left: 0; top: 11px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--muted); } /* taste-skill-ignore: anello dei controlli dentro i frammenti data-ui, o velo sotto la didascalia */
.tappe li.fatta { color: var(--ink); }
.tappe li.fatta::before { background: var(--accent); box-shadow: none; } /* taste-skill-ignore: anello dei controlli dentro i frammenti data-ui, o velo sotto la didascalia */
.tappe li.ora { color: var(--ink); font-weight: 600; }
.tappe li.ora::before { box-shadow: inset 0 0 0 5px var(--accent); } /* taste-skill-ignore: anello dei controlli dentro i frammenti data-ui, o velo sotto la didascalia */
@media (max-width: 960px) {
  .come { grid-template-columns: 1fr; }
  .come > .sez-titolo, .come-passi, .come-palco { grid-column: 1; grid-row: auto; }
  .come > .sez-titolo { order: 0; margin-bottom: 16px; }
  .come-palco { display: none; }   /* sul telefono i tre passi in fila, senza palco fermo */
  .come-passi { order: 2; display: grid; gap: 28px; }
  .passo, .passo:first-of-type { min-height: 0; padding: 0; }
  .passo .passo-frase { color: var(--ink); }
  .stato { padding: 16px; }
  .profilo div { padding: 7px 10px; }
  .passo-frase { font-size: 22px; }
}

/* ---------------------------------------------------------------- domande */
.domande { padding: var(--gap-sez) var(--m) 0; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; align-items: start; }
.dom-elenco { grid-column: 1 / 6; }
.dom-titolo { font-size: var(--t-m); font-weight: 500; color: var(--muted); margin-bottom: 18px; }
.dom + .dom { margin-top: 6px; }
.dom-q { all: unset; box-sizing: border-box; display: flex; gap: 14px; align-items: baseline; width: 100%; padding: 8px 0; cursor: pointer;
  font-size: var(--t-m); color: var(--muted); transition: color .15s; }
.dom-q::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transform: translateY(-2px); transition: background-color .15s, transform .2s var(--esce); }
.dom-q:hover, .dom-q[aria-expanded="true"] { color: var(--ink); }
.dom-q[aria-expanded="true"]::before { background: var(--accent); transform: translateY(-2px) scale(1.3); }
.dom-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.dom-a { display: none; }
.dom-pannello { grid-column: 7 / 13; position: sticky; top: 120px; background: var(--surface-2); border-radius: var(--r); padding: 40px; min-height: 320px; }
.dom-pannello p { font-size: 26px; line-height: 1.3; letter-spacing: -.015em; max-width: 30ch; transition: opacity .15s; }
.dom-pannello p.via { opacity: 0; }
@media (max-width: 960px) {
  .domande { grid-template-columns: 1fr; }
  .dom-elenco { grid-column: 1; }
  .dom-pannello { display: none; }
  .dom-a { padding: 4px 0 12px 22px; font-size: 18px; line-height: 1.4; }
  .dom-q[aria-expanded="true"] + .dom-a { display: block; }
}
/* senza script: tutte le risposte visibili sotto le domande */
html:not(.js) .dom-a { display: block; padding: 0 0 12px 22px; }
html:not(.js) .dom-pannello { display: none; }

/* ---------------------------------------------------------------- iscrizione: campo di colore pieno */
.contatti { margin-top: var(--gap-sez); padding: clamp(56px, 7vw, 104px) var(--m); background: var(--field); color: var(--field-ink);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 32px; align-items: start; }
.contatti-testo { grid-column: 1 / 6; }
.contatti-titolo { font-size: var(--t-xl); font-weight: 560; letter-spacing: -.035em; line-height: 1.02; margin-bottom: 20px; }
.contatti-intro { font-size: var(--t-m); line-height: 1.5; max-width: 26em; }
.recapiti { margin: 32px 0 0; display: grid; gap: 8px; font-size: var(--t-s); }
.recapiti div { display: grid; grid-template-columns: 100px 1fr; }
.recapiti dt { color: var(--field-muted); }
.recapiti dd { margin: 0; }
.contatti-foto { margin: 40px 0 0; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.contatti-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 42% 50%; }
.iscrizione { grid-column: 7 / 13; }
.iscrizione fieldset { border: 0; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.iscrizione legend { font-size: var(--t-m); font-weight: 600; margin-bottom: 12px; padding: 0; }
.iscrizione label { display: flex; flex-direction: column; gap: 6px; font-size: var(--t-xs); color: var(--field-muted); }
.iscrizione label.largo { grid-column: 1 / -1; }
.iscrizione input:not([type="radio"]):not([type="checkbox"]), .iscrizione select { height: 52px; border: 0; border-radius: var(--r);
  background: #ffffff; color: #0c2340; font: inherit; font-size: var(--t-s); padding: 0 14px; width: 100%; }
.iscrizione input::placeholder { color: #6b7f96; }
.iscrizione input:focus, .iscrizione select:focus { outline: 3px solid #ffffff; outline-offset: 2px; }
.iscrizione .scelta { display: flex; flex-wrap: wrap; gap: 10px; }
.iscrizione .scelta legend { width: 100%; }
.iscrizione label.radio { flex-direction: row; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: var(--field-ink); font-size: var(--t-s); cursor: pointer; transition: background-color .15s; }
.iscrizione label.radio:hover { background: rgba(255, 255, 255, .24); }
.iscrizione label.radio:has(input:checked) { background: #ffffff; color: #0c2340; }
.iscrizione input[type="radio"], .iscrizione input[type="checkbox"] { width: 18px; height: 18px; accent-color: #0c2340; margin: 0; flex: none; }
.iscrizione label.consenso { flex-direction: row; align-items: flex-start; gap: 12px; font-size: var(--t-s); color: var(--field-ink); margin-bottom: 24px; }
.iscrizione label.consenso input { margin-top: 3px; }
.iscrizione a { color: inherit; text-decoration: underline; }
.bottone.chiaro { background: #ffffff; color: #0c2340; min-width: 200px; border: 0; cursor: pointer; font: inherit; font-weight: 650; }
.bottone.chiaro:hover { background: var(--accent-soft); }
.contatti-nota.esito { grid-column: 1 / -1; background: #ffffff; color: #0c2340; border-radius: var(--r); padding: 14px 16px; margin-bottom: 24px; }
@media (max-width: 960px) {
  .contatti { grid-template-columns: 1fr; }
  .contatti-testo, .iscrizione { grid-column: 1; }
  .contatti-foto { display: none; }
  .iscrizione { margin-top: 36px; }
}
@media (max-width: 560px) {
  .iscrizione fieldset { grid-template-columns: 1fr; }
  .bottone.chiaro { width: 100%; }
}
.salta:focus, .contatti :focus-visible { outline-color: #ffffff; }

/* ---------------------------------------------------------------- piede */
.piede { margin-top: 48px; padding: 0 var(--m) 30px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px 24px;
  align-items: baseline; font-size: 15px; }
.piede-cosa { color: var(--muted); }
.piede-link { display: flex; gap: 24px; flex-wrap: wrap; }
.piede-link a, .piede-anno a { text-decoration: none; }
.piede-link a:hover, .piede-anno a:hover { text-decoration: underline; }
.piede-anno { text-align: right; color: var(--muted); }
.piede-anno a { color: var(--ink); }
.crediti { grid-column: 1 / -1; margin-top: 18px; font-size: var(--t-xs); color: var(--muted); max-width: 120ch; }
.crediti a { color: var(--ink); }
@media (max-width: 760px) {
  .piede { grid-template-columns: 1fr; gap: 8px; }
  .piede-anno { text-align: left; }
  .piede-link { gap: 8px 20px; }
}

/* ---------------------------------------------------------------- informativa */
.testo-legale { padding: 64px var(--m) 0; max-width: calc(760px + var(--m) * 2); }
.testo-legale h1 { font-size: var(--t-xl); font-weight: 560; letter-spacing: -.035em; line-height: 1.02; margin-bottom: 24px; }
.testo-legale .dichiarazione { margin-bottom: 40px; }
.testo-legale h2 { font-size: 20px; font-weight: 600; margin: 36px 0 8px; }
.testo-legale p { font-size: 17px; line-height: 1.6; }
.testo-legale a { color: var(--accent); }
.muto { color: var(--muted); margin-top: 32px; font-size: var(--t-xs) !important; }

/* ---------------------------------------------------------------- entrate (solo con script; senza, tutto e' visibile) */
.js .entra { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--esce), transform .8s var(--esce); transition-delay: var(--ritardo, 0ms); }
.js .entra.dentro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .entra { transform: none; transition: opacity .3s; }
  .stato, .territorio img { transition: none; }
}
.terr-nota { margin-top: 20px; font-size: var(--t-m); }
@media (max-width: 760px) { .dichiarazione { font-size: 22px; } }

/* ---------------------------------------------------------------- versione asciutta: servizi e province senza immagini */
.settori-riga { grid-template-columns: minmax(0, 2fr) 90px 110px 190px; }
.province-sez { padding: clamp(80px, 9vw, 140px) var(--m) 0; }
.province { margin-top: 0; grid-template-columns: repeat(9, minmax(0, 1fr)); }
@media (max-width: 960px) { .province { grid-template-columns: repeat(3, 1fr); } }
.servizi-elenco { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.servizi-elenco li { background: var(--surface-2); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.servizi-elenco b { font-size: var(--t-m); }
@media (max-width: 960px) { .servizi-elenco { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .servizi-elenco { grid-template-columns: 1fr; } }
.servizi .sez-titolo { margin-bottom: 0; }
.notizie .sez-titolo { margin-bottom: 32px; }
.contatti-testo { align-self: start; }
@media (max-width: 760px) { .settori-riga { grid-template-columns: 1fr auto; } }
.andamento .sez-testa { margin-bottom: 20px; }
.grafico .barre { transform: scaleY(0); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .grafico .barre { transform: none; } }
html:not(.js) .grafico .barre { transform: none; }
.grafico .taglio { fill: var(--bg); }
.grafico text.fuori-scala { fill: var(--ink); font-weight: 600; }
@media (prefers-color-scheme: dark) { .marchio span { color: #c5ccd4; } }


/* ================================================================ rifinitura (redesign) */
:root { --largo: 1280px; --t-xl: clamp(36px, 4vw, 60px); }
/* barra: resta in alto scorrendo, si stacca dal contenuto con un fondo pieno quando la pagina scorre */
.barra { position: sticky; top: 0; z-index: 20; background: var(--bg); padding-block: 14px;
  padding-inline: max(var(--m), calc((100% - var(--largo)) / 2)); transition: box-shadow .2s; }
.barra.staccata { box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px rgba(12, 35, 64, .25); } /* taste-skill-ignore: la barra fissa galleggia sopra la pagina */
.marchio { font-size: 21px; gap: 12px; letter-spacing: -.02em; }
.marchio img { width: 40px; height: 40px; border-radius: 10px; }
.barra-link a { position: relative; color: var(--muted); transition: color .15s; }
.barra-link a:hover { color: var(--ink); text-decoration: none; }
.barra-link a.qui { color: var(--ink); }
.barra-link a.qui::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--accent); }
html { scroll-padding-top: 88px; }

/* larghezza massima: sugli schermi grandi il contenuto resta in colonna, i campi di colore arrivano ai bordi */
.eroe, .andamento, .settori, .chiusura, .province-sez, .servizi, .notizie, .domande, .piede {
  padding-inline: max(var(--m), calc((100% - var(--largo)) / 2)); }
.contatti { padding-inline: max(var(--m), calc((100% - var(--largo)) / 2)); }

/* primo schermo: fascia azzurra leggera che separa il cruscotto dal resto */
.eroe { min-height: 0; padding-block: clamp(48px, 7vw, 104px); background: linear-gradient(var(--surface-2), var(--bg)); } /* taste-skill-ignore: sfumatura di un solo tono, dal campo al fondo */
.eroe-titolo { font-size: clamp(40px, 5vw, 76px); letter-spacing: -.04em; }
.eroe-sotto { font-size: 19px; color: var(--muted); max-width: 30em; }
.solo-sicilia { display: block; width: fit-content; max-width: 100%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); } /* taste-skill-ignore: bordo del riquadro informativo */
.solo-sicilia b { color: var(--accent); }
.kpi div { background: var(--surface); min-height: 168px; box-shadow: 0 1px 2px rgba(12, 35, 64, .06), 0 12px 32px -20px rgba(12, 35, 64, .22); transition: transform .25s var(--esce), box-shadow .25s; } /* taste-skill-ignore: le cifre stanno su schede sollevate dalla fascia */
.kpi div:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(12, 35, 64, .06), 0 18px 36px -18px rgba(12, 35, 64, .3); } /* taste-skill-ignore */
.kpi dt { color: var(--muted); font-weight: 500; }

/* intestazioni di sezione: titolo e frase insieme, a sinistra */
.sez-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.sez-testa > div, .sez-testa h2 { flex: 0 1 auto; }
.sez-testa p { flex-basis: 100%; color: var(--muted); order: 3; }
.sez-titolo.medio { font-size: clamp(28px, 2.6vw, 40px); letter-spacing: -.03em; }

/* settori: il colore del settore, riga che si accende al passaggio */
.settori-nome i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.settori-riga:not(.intesta) { transition: background-color .15s; }
.settori-riga:not(.intesta):hover { background: var(--accent-soft); }
.settori-n b { font-size: 20px; }
.timer { color: var(--ink); }

/* in chiusura e notizie: schede bianche sul tono chiaro, sollevate al passaggio */
.chiusura-elenco li, .notizie-elenco li, .servizi-elenco li, .province li { transition: transform .2s var(--esce), background-color .2s; }
.chiusura-elenco li:hover, .notizie-elenco li:hover { transform: translateY(-2px); background: var(--accent-soft); }
.province li b { font-size: 34px; }

/* servizi: quattro passi con il verbo grande */
.servizi-elenco li { padding: 28px 24px; min-height: 150px; justify-content: space-between; }
.servizi-elenco b { font-size: 22px; letter-spacing: -.02em; color: var(--accent); }
.servizi-elenco span { color: var(--ink); }

/* modulo: etichette leggibili sul blu */
.iscrizione label { color: rgba(255, 255, 255, .92); font-weight: 500; }
.contatti-titolo { font-size: clamp(32px, 3.4vw, 52px); }

/* tipi di testo: meno misure diverse */
.cella h3, .chiusura-titolo, .notizie-elenco a { font-size: 16px; }
.chiusura-ente, .notizia-fonte, .notizia-tipo, .legenda, .tabella-dati, .settori-riga.intesta { font-size: 14px; }

@media (max-width: 760px) {
  .marchio { font-size: 18px; } .marchio img { width: 34px; height: 34px; }
  .eroe { padding-block: 32px 48px; }
}
@media (prefers-reduced-motion: reduce) { .kpi div, .chiusura-elenco li, .notizie-elenco li { transition: none; } }
@media (prefers-reduced-motion: reduce) { .js .entra { opacity: 1; transform: none; transition: none; } }
.notizia-tipo { color: color-mix(in srgb, var(--accent) 80%, var(--ink)); }
.eroe-sotto { color: var(--ink); }
.sez-testa p { flex: 1 0 100%; max-width: none; margin-top: -4px; }

/* ================================================================ prenotazione della call */
.eroe-nota { margin-top: 12px; font-size: var(--t-xs); color: var(--muted); }
.servizi-elenco.passi { counter-reset: passo; }
.servizi-elenco.passi li { counter-increment: passo; }
.servizi-elenco.passi li::before { content: counter(passo); font-size: 40px; font-weight: 600; letter-spacing: -.04em; color: var(--accent);
  line-height: 1; margin-bottom: 8px; font-variant-numeric: tabular-nums; } /* taste-skill-ignore: i passi sono una sequenza vera */
.finanzia { padding: clamp(80px, 9vw, 140px) max(var(--m), calc((100% - var(--largo)) / 2)) 0; }
.finanzia-elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.finanzia-elenco li { background: var(--surface-2); border-radius: var(--r); padding: 18px 20px; display: flex; align-items: baseline; gap: 12px;
  transition: background-color .2s; }
.finanzia-elenco li:hover { background: var(--accent-soft); }
.finanzia-elenco b { font-size: 28px; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; min-width: 2.2ch; }
@media (max-width: 960px) { .finanzia-elenco { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .finanzia-elenco { grid-template-columns: 1fr; } }
.prenota-fascia { margin: clamp(80px, 9vw, 140px) max(var(--m), calc((100% - var(--largo)) / 2)) 0; padding: clamp(32px, 4vw, 56px);
  background: var(--field); color: var(--field-ink); border-radius: 12px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; }
.prenota-fascia h2 { color: inherit; }
.prenota-fascia p { max-width: 36em; margin-top: 8px; color: var(--field-muted); }
.prenota-fascia a:not(.bottone) { color: inherit; }

.prenota-dialogo { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 0; border-radius: 14px; padding: 28px;
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px -24px rgba(12, 35, 64, .45); overflow-y: auto; } /* taste-skill-ignore: la finestra galleggia */
.prenota-dialogo::backdrop { background: rgba(12, 35, 64, .45); }
.prenota-dialogo[open] { animation: pd-entra .25s var(--esce); }
@keyframes pd-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.pd-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pd-testa h2 { font-size: 24px; letter-spacing: -.02em; }
.pd-chiudi { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface-2); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); }
.pd-sotto { color: var(--muted); margin: 8px 0 20px; }
.pd-mese { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 12px; }
.pd-mese button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent; font-size: 22px; cursor: pointer; color: var(--accent); }
.pd-mese button:disabled { color: var(--line); cursor: default; }
.pd-griglia { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.pd-griglia .gs { font-size: 12px; color: var(--muted); padding: 4px 0; }
.pd-griglia button { aspect-ratio: 1; max-width: 52px; justify-self: center; width: 100%; border-radius: 50%; border: 0; font: inherit; font-weight: 600;
  background: transparent; color: var(--line); cursor: default; }
.pd-griglia button.libero { background: var(--accent-soft); color: var(--accent); cursor: pointer; transition: transform .12s; }
.pd-griglia button.libero:hover { transform: scale(1.06); }
.pd-griglia button.scelto { background: var(--accent); color: var(--su-accent); }
.pd-fuso { text-align: center; font-size: 13px; color: var(--muted); margin: 10px 0; }
.pd-orari { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; min-height: 44px; }
.pd-orari button { min-height: 44px; border-radius: 8px; border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent); font: inherit;
  font-weight: 600; cursor: pointer; transition: background-color .15s, color .15s; }
.pd-orari button:hover { background: var(--accent); color: var(--su-accent); }
.pd-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 500; }
.pd-form label span { color: var(--muted); font-weight: 400; }
.pd-form input:not([type=radio]):not([type=checkbox]), .pd-form textarea { font: inherit; font-size: 16px; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.pd-form input:focus, .pd-form textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.pd-largo, .pd-modo, .pd-consenso, .pd-errore, .pd-scelta, .pd-form .bottone { grid-column: 1 / -1; }
.pd-scelta { background: var(--surface-2); padding: 10px 14px; border-radius: 8px; }
.pd-cambia { border: 0; background: none; color: var(--accent); text-decoration: underline; cursor: pointer; font: inherit; }
.pd-modo { border: 0; padding: 0; margin: 0; display: flex; gap: 20px; }
.pd-modo legend { font-size: 14px; font-weight: 500; margin-bottom: 6px; padding: 0; }
.pd-modo label, .pd-consenso { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400 !important; }
.pd-errore { color: #c2341d; font-size: 14px; }
.pd-fatto { text-align: center; padding: 12px 0; }
.pd-ok { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--su-accent); display: grid; place-items: center;
  font-size: 28px; margin: 0 auto 12px; }
.pd-fatto h3 { font-size: 22px; margin-bottom: 8px; }
.pd-link { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 16px 0; font-weight: 600; }
.pd-link a { color: var(--accent); }
.pd-nota { font-size: 14px; color: var(--muted); }
@media (max-width: 520px) { .prenota-dialogo { padding: 20px; } .pd-form { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .prenota-dialogo[open] { animation: none; } }
.pd-passo[hidden] { display: none !important; }