/* Sito della Suite Comando, stile istituzionale (come i siti della PA italiana): blu PA, Titillium Web (servito da
   qui, nessun servizio esterno), bordi sottili invece di ombre, angoli quasi retti. Tema chiaro e scuro. */
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 400; font-display: swap; src: url('font/titillium-web-400.woff2') format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 600; font-display: swap; src: url('font/titillium-web-600.woff2') format('woff2'); }
@font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 700; font-display: swap; src: url('font/titillium-web-700.woff2') format('woff2'); }

:root {
  --blu: #0066cc;
  --blu-scuro: #004d99;
  --blu-notte: #17324d;
  --blu-chiaro: #e6f0fa;
  --accento: #0066cc;
  --testo: #17324d;
  --tenue: #5c6f82;
  --bordo: #d9dadb;
  --fondo: #ffffff;
  --fondo-2: #f5f7fa;
  --carta: #ffffff;
  --ok: #008055;
  --errore: #cc334d;
  --raggio: 4px;
  --largo: 1160px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --blu: #4da3ff;
    --blu-scuro: #8cc4ff;
    --blu-notte: #0b1622;
    --blu-chiaro: #14283d;
    --accento: #4da3ff;
    --testo: #e6edf5;
    --tenue: #a3b2c2;
    --bordo: #2c3e52;
    --fondo: #0f1b28;
    --fondo-2: #13212f;
    --carta: #162636;
    --ok: #4cc38a;
    --errore: #ff8a9b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font: 18px/1.55 'Titillium Web', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--testo); background: var(--fondo); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; height: auto; }
a { color: var(--blu); text-underline-offset: 3px; }
a:hover { color: var(--blu-scuro); }
:focus-visible { outline: 3px solid #17324d; outline-offset: 2px; box-shadow: 0 0 0 5px #ffb400; }
@media (prefers-color-scheme: dark) { :focus-visible { outline-color: #ffb400; box-shadow: none; } }
/* nascosto alla vista ma non a tastiera e lettori di schermo (es. la scelta del file nell'area clienti) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* il pulsante che contiene la scelta del file mostra il fuoco della casella nascosta */
label.pulsante:focus-within { outline: 3px solid #17324d; outline-offset: 2px; box-shadow: 0 0 0 5px #ffb400; }
@media (prefers-color-scheme: dark) { label.pulsante:focus-within { outline-color: #ffb400; box-shadow: none; } }
h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.15rem); }
h3 { font-size: 1.22rem; }
p { margin: 0 0 1em; }
.contenitore { max-width: var(--largo); margin: 0 auto; padding: 0 16px; }
.salta { position: absolute; left: -9999px; top: 8px; background: #ffb400; color: #17324d; padding: 10px 16px; z-index: 100; font-weight: 700; }
.salta:focus { left: 8px; }
.occhiello { display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accento); margin-bottom: 10px; }
.introduzione { font-size: 1.15rem; color: var(--tenue); max-width: 760px; }

/* testata: fascia dell'ente, barra blu con il marchio, barra del menu */
.fascia { background: #004d99; color: #fff; font-size: 0.85rem; }
@media (prefers-color-scheme: dark) { .fascia { background: #071019; } }
.fascia .contenitore { display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; padding-bottom: 6px; }
.fascia a { color: #fff; text-decoration: none; font-weight: 600; }
.fascia a:hover { text-decoration: underline; color: #fff; }
.testata { background: #0066cc; color: #fff; position: relative; z-index: 50; }
@media (prefers-color-scheme: dark) { .testata { background: #0b2a4a; } }
.testata .riga { display: flex; align-items: center; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.logo { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.logo:hover { color: #fff; }
.logo svg, .logo img { flex: none; width: 50px; height: 50px; }
.logo b { display: block; font-size: 1.6rem; line-height: 1.1; }
.logo small { display: block; font-size: 0.9rem; opacity: 0.9; }
.testata .riga .pulsante { margin-left: auto; }
.menu-apri { display: none; margin-left: auto; background: transparent; border: 2px solid #fff; color: #fff; padding: 8px 14px; font: inherit; font-weight: 700; border-radius: var(--raggio); cursor: pointer; }
.menu { border-top: 1px solid rgba(255, 255, 255, 0.25); }
.menu .contenitore { display: flex; gap: 24px; overflow-x: auto; }
@media (max-width: 1180px) { .menu .contenitore { gap: 16px; } .menu a { font-size: 0.95rem; } }
.menu a { color: #fff; text-decoration: none; font-weight: 600; padding: 12px 0; border-bottom: 3px solid transparent; white-space: nowrap; }
.menu a:hover, .menu a[aria-current='page'] { border-bottom-color: #fff; color: #fff; }
@media (max-width: 860px) {
  .logo svg, .logo img { width: 40px; height: 40px; }
  .logo b { font-size: 1.3rem; }
  .testata .riga .pulsante { display: none; }
  .menu-apri { display: block; }
  .menu { display: none; }
  .menu.aperto { display: block; }
  .menu .contenitore { flex-direction: column; gap: 0; }
  .menu a { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
}

/* pulsanti */
.pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: var(--raggio); font: inherit; font-weight: 700; text-decoration: none; border: 2px solid var(--blu); cursor: pointer; line-height: 1.3; }
.primario { background: var(--blu); color: #fff; }
.primario:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); color: #fff; }
@media (prefers-color-scheme: dark) { .primario, .primario:hover { color: #0b1622; } }
.secondario { background: transparent; color: var(--blu); }
.secondario:hover { background: var(--blu-chiaro); }
.piccolo { padding: 8px 16px; font-size: 0.95rem; }
.testata .pulsante { background: #fff; color: #0066cc; border-color: #fff; }
.testata .pulsante:hover { background: #e6f0fa; color: #004d99; }

/* apertura delle pagine */
.apertura { background: var(--fondo-2); border-bottom: 1px solid var(--bordo); --app: var(--blu); }
.apertura .contenitore { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.apertura h1 em { font-style: normal; color: var(--app); }
.apertura .occhiello { color: var(--app); }
.apertura .azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.apertura.verde { --app: #008055; }
.apertura.azzurra { --app: #00799e; }
@media (prefers-color-scheme: dark) { .apertura.verde { --app: #4cc38a; } .apertura.azzurra { --app: #4fc3e0; } }
.garanzie { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 0; list-style: none; color: var(--tenue); font-size: 0.98rem; }
.garanzie li { display: flex; align-items: center; gap: 8px; }
.garanzie li::before { content: ''; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.schermo { position: relative; background: var(--carta); border: 1px solid var(--bordo); border-radius: 6px; box-shadow: 0 8px 28px rgba(23, 50, 77, 0.12); overflow: hidden; }
.schermo::before { content: ''; display: block; height: 26px; background: radial-gradient(circle at 14px 13px, #c5cdd6 4.5px, transparent 5px), radial-gradient(circle at 30px 13px, #c5cdd6 4.5px, transparent 5px), radial-gradient(circle at 46px 13px, #c5cdd6 4.5px, transparent 5px), var(--fondo-2); border-bottom: 1px solid var(--bordo); }
.schermo img { width: 100%; }
.schermo .sopra { display: none; }
.pista { display: none; }
@media (max-width: 900px) { .apertura .contenitore { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; padding-bottom: 40px; } }

/* barra degli impegni sotto l'apertura (pagina principale) */
.impegni { border-bottom: 1px solid var(--bordo); background: var(--fondo); }
.impegni .contenitore { display: grid; grid-template-columns: repeat(4, 1fr); }
.impegno { display: flex; gap: 12px; padding: 22px 16px; border-right: 1px solid var(--bordo); }
.impegno:last-child { border-right: 0; }
.impegno svg { flex: none; width: 28px; height: 28px; color: var(--blu); }
.impegno strong { display: block; }
.impegno span { color: var(--tenue); font-size: 0.93rem; }
@media (max-width: 900px) { .impegni .contenitore { grid-template-columns: 1fr 1fr; } .impegno:nth-child(2) { border-right: 0; } .impegno { border-bottom: 1px solid var(--bordo); } }
@media (max-width: 520px) { .impegni .contenitore { grid-template-columns: 1fr; } .impegno { border-right: 0; } }

/* sezioni */
.sezione { padding: 64px 0; }
.sezione.tinta { background: var(--fondo-2); border-top: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.titolo-sezione { max-width: 820px; margin: 0 0 32px; }

/* passi */
.passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: passo; }
.passi.quattro { grid-template-columns: repeat(4, 1fr); }
.passo { border-left: 4px solid var(--blu); padding: 4px 0 4px 18px; }
.passo::before { counter-increment: passo; content: 'Passo ' counter(passo); display: block; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blu); margin-bottom: 4px; }
.passo h3 { margin-bottom: 4px; }
.passo p { color: var(--tenue); margin: 0; }
@media (max-width: 860px) { .passi, .passi.quattro { grid-template-columns: 1fr; } }

/* vetrina: testo e schermata */
.vetrina { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin-bottom: 64px; }
.vetrina:last-child { margin-bottom: 0; }
.vetrina.inversa .testo { order: 2; }
.vetrina img { border: 1px solid var(--bordo); border-radius: var(--raggio); }
.vetrina ul { padding: 0; list-style: none; margin: 16px 0 0; display: grid; gap: 10px; }
.vetrina li { padding-left: 30px; position: relative; color: var(--tenue); }
.vetrina li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.vetrina li strong { color: var(--testo); }
@media (max-width: 900px) { .vetrina { grid-template-columns: 1fr; gap: 24px; } .vetrina.inversa .testo { order: 0; } }

/* griglia di funzioni */
.funzioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.funzioni.tre { grid-template-columns: repeat(3, 1fr); }
.funzione { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 22px; }
.funzione .icona { width: 40px; height: 40px; display: grid; place-items: center; color: var(--blu); margin-bottom: 10px; }
.funzione h3 { font-size: 1.12rem; margin-bottom: 6px; }
.funzione p { color: var(--tenue); font-size: 0.98rem; margin: 0; }

/* per la PA */
.pa { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--bordo); }
.pa .voce { display: flex; gap: 16px; padding: 24px 20px 24px 0; border-bottom: 1px solid var(--bordo); }
.pa .voce:nth-child(odd) { border-right: 1px solid var(--bordo); }
.pa .voce:nth-child(even) { padding-left: 24px; }
.pa .voce .segno { flex: none; width: 40px; height: 40px; color: var(--blu); display: grid; place-items: center; }
.pa .voce h3 { margin-bottom: 4px; }
.pa .voce p { color: var(--tenue); margin: 0; }
@media (max-width: 820px) { .pa { grid-template-columns: 1fr; } .pa .voce:nth-child(odd) { border-right: 0; } .pa .voce:nth-child(even) { padding-left: 0; } }

/* licenze */
.livelli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.livelli.quattro { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.livelli.due { grid-template-columns: repeat(2, minmax(0, 440px)); }
@media (max-width: 1200px) { .livelli.quattro { grid-template-columns: repeat(2, 1fr); } }
.livello { background: var(--carta); border: 1px solid var(--bordo); border-top: 6px solid var(--blu); border-radius: var(--raggio); padding: 26px 24px; display: flex; flex-direction: column; position: relative; }
.livello.evidenza { border: 2px solid var(--blu); border-top-width: 6px; }
.livello.evidenza::before { content: 'Il più scelto'; position: absolute; top: -6px; right: 20px; transform: translateY(-100%); background: var(--blu); color: #fff; font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: var(--raggio) var(--raggio) 0 0; }
.livello.evidenza.suite::before { content: 'Tutte le app'; }
@media (prefers-color-scheme: dark) { .livello.evidenza::before { color: #0b1622; } }
.livello .nome { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blu); }
.livello h3 { font-size: 1.45rem; margin: 4px 0 2px; }
.livello .per { color: var(--tenue); margin-bottom: 16px; }
.livello ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.livello li { padding: 8px 0 8px 26px; border-top: 1px solid var(--bordo); position: relative; }
.livello li::before { content: '✓'; position: absolute; left: 2px; color: var(--ok); font-weight: 700; }
.livello li.piu { font-weight: 700; }
.nota-livelli { color: var(--tenue); margin-top: 24px; }
@media (max-width: 960px) { .livelli, .livelli.quattro, .livelli.due { grid-template-columns: 1fr; } }

/* sicurezza */
.scudo { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.scudo .elenco { display: grid; gap: 12px; }
.scudo .elenco div { padding: 16px 20px; border-left: 4px solid var(--blu); background: var(--carta); border-top: 1px solid var(--bordo); border-right: 1px solid var(--bordo); border-bottom: 1px solid var(--bordo); }
.scudo .elenco strong { display: block; }
.scudo .elenco span { color: var(--tenue); font-size: 0.97rem; }
@media (max-width: 900px) { .scudo { grid-template-columns: 1fr; } }

/* domande */
.domande { max-width: 900px; border-top: 1px solid var(--bordo); }
.domande details { border-bottom: 1px solid var(--bordo); }
.domande summary { cursor: pointer; font-weight: 700; font-size: 1.1rem; padding: 16px 44px 16px 0; list-style: none; position: relative; color: var(--blu); }
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after { content: '+'; position: absolute; right: 8px; top: 9px; font-size: 1.7rem; font-weight: 400; }
.domande details[open] summary::after { content: '–'; }
.domande details p { color: var(--tenue); padding-right: 44px; }

/* contatti */
.contatti { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
.modulo { background: var(--carta); border: 1px solid var(--bordo); border-top: 6px solid var(--blu); border-radius: var(--raggio); padding: 28px; }
.campo { display: block; margin-bottom: 16px; }
.campo span { display: block; font-weight: 600; margin-bottom: 4px; font-size: 0.95rem; }
.campo input, .campo textarea, .campo select { width: 100%; font: inherit; padding: 10px 12px; border-radius: var(--raggio); border: 1px solid #7b8794; background: var(--fondo); color: var(--testo); }
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 3px solid #17324d; outline-offset: 1px; box-shadow: 0 0 0 4px #ffb400; border-color: var(--blu); }
@media (prefers-color-scheme: dark) { .campo input:focus, .campo textarea:focus, .campo select:focus { outline-color: #ffb400; box-shadow: none; } }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.consenso { display: flex; gap: 10px; align-items: flex-start; font-size: 0.93rem; color: var(--tenue); margin-bottom: 20px; }
.consenso input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.esca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.esito { margin-top: 16px; padding: 12px 16px; border-left: 4px solid currentColor; font-weight: 600; }
.esito:empty { display: none; }
.esito.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.esito.errore { background: color-mix(in srgb, var(--errore) 12%, transparent); color: var(--errore); }
@media (max-width: 900px) { .contatti { grid-template-columns: 1fr; } .due { grid-template-columns: 1fr; } }

/* chiusura e piede */
.chiamata { background: #0066cc; color: #fff; padding: 48px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; border-radius: var(--raggio); }
@media (prefers-color-scheme: dark) { .chiamata { background: #0b2a4a; } }
.chiamata h2 { margin: 0; color: #fff; }
.chiamata p { color: #dce9f7; margin: 8px 0 0; }
.chiamata .pulsante { background: #fff; color: #0066cc; border-color: #fff; }
.chiamata .secondario { background: transparent; color: #fff; }
@media (max-width: 600px) { .chiamata { padding: 28px 20px; } }
.piede { background: var(--blu-notte); color: #c5d1dd; padding: 48px 0 28px; margin-top: 64px; font-size: 0.95rem; }
.piede a { color: #fff; }
.piede .colonne { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 28px; }
.piede h3 { color: #fff; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; }
.piede .logo svg, .piede .logo img { width: 40px; height: 40px; }
.piede .logo b { font-size: 1.3rem; }
.piede ul { list-style: none; padding: 0; margin: 0; }
.piede li { margin-bottom: 8px; }
.piede .legale { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-top: 20px; font-size: 0.85rem; }
@media (max-width: 760px) { .piede .colonne { grid-template-columns: 1fr; } }

/* pagine di testo */
.pagina-testo { max-width: 860px; margin: 0 auto; padding: 48px 16px 0; }
.pagina-testo h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
.pagina-testo h2 { font-size: 1.4rem; margin-top: 1.8em; }
.pagina-testo li { margin-bottom: 6px; }
.pagina-testo table { border-collapse: collapse; width: 100%; margin: 12px 0 20px; }
.pagina-testo .tabella-scorre { overflow-x: auto; }
.pagina-testo .tabella-scorre:focus-visible { outline: 3px solid #0066cc; outline-offset: 2px; }
@media (max-width: 700px) { .pagina-testo th, .pagina-testo td { min-width: 140px; } }
.pagina-testo { overflow-wrap: anywhere; }
.pagina-testo th, .pagina-testo td { text-align: left; border-bottom: 1px solid var(--bordo); padding: 10px 8px; vertical-align: top; }
.pagina-testo th { background: var(--fondo-2); }

/* area clienti */
.trascina { border: 2px dashed #8c9db0; border-radius: var(--raggio); padding: 40px 24px; text-align: center; background: var(--fondo-2); }
.trascina.sopra { border-color: var(--blu); background: var(--blu-chiaro); }
.scaricabili { display: grid; gap: 12px; margin-top: 22px; }
.scaricabile { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border: 1px solid var(--bordo); border-left: 4px solid var(--blu); background: var(--carta); flex-wrap: wrap; }
.scaricabile span { color: var(--tenue); font-size: 0.95rem; }

/* comparsa al passaggio (leggera) */
.compare { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.compare.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .compare { opacity: 1; transform: none; } }

/* schede delle app */
.app-suite { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.app-scheda { --colore: var(--blu); display: flex; flex-direction: column; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; color: var(--testo); text-decoration: none; }
.app-scheda:hover { border-color: var(--blu); color: var(--testo); }
.app-scheda img { width: 100%; height: 200px; object-fit: cover; object-position: left top; border-bottom: 1px solid var(--bordo); }
.app-scheda .nome, .app-scheda h3, .app-scheda p, .app-scheda .vai { margin-left: 22px; margin-right: 22px; }
.app-scheda .nome { margin-top: 18px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colore); display: flex; align-items: center; gap: 8px; }
.app-scheda img.icona { width: 28px; height: 28px; border: 0; object-fit: contain; flex: none; }
.app-scheda h3 { font-size: 1.4rem; margin-top: 2px; }
.app-scheda p { color: var(--tenue); flex: 1; font-size: 1rem; }
.app-scheda .vai { font-weight: 700; color: var(--blu); margin-bottom: 22px; }
@media (max-width: 960px) { .app-suite, .funzioni.tre { grid-template-columns: 1fr; } }

/* icona dell'app in apertura della sua pagina */
.occhiello .icona-pagina { width: 40px; height: 40px; vertical-align: middle; margin-right: 10px; }