/* Osservatorio Trasparenza Digitale — foglio di stile unico, nessuna risorsa esterna */
:root {
  --blu: #1438e6;          /* accento blu elettrico: contrasto 7,1:1 su bianco */
  --blu-scuro: #0d27b3;
  --blu-chiaro: #eef1ff;
  --inchiostro: #0b1020;
  --testo: #1f2433;
  --tenue: #535a6b;        /* 7:1 su bianco */
  --linea: #e3e6ee;
  --grigio: #f6f7fa;
  --bianco: #fff;
  --raggio: 14px;
  --larg: 1200px;
  --stretto: 820px;
  --testata-h: 76px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--testata-h) + 16px); }
body {
  margin: 0; font-family: var(--font); font-size: 1.1875rem; line-height: 1.6;
  color: var(--testo); background: var(--bianco); overflow-x: hidden;
  padding-top: var(--testata-h);
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--inchiostro); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 1.4rem + 3.6vw, 4rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 750; }
h3 { font-size: 1.3rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--blu); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--blu-scuro); }
:focus-visible { outline: 3px solid var(--blu); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.visivamente-nascosto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--blu); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.salta:focus { top: 10px; color: #fff; }

.contenitore { width: 100%; max-width: var(--larg); margin: 0 auto; padding: 0 24px; }
.contenitore.stretto, .stretta .contenitore { max-width: var(--stretto); }
.lead { font-size: clamp(1.2rem, 1.1rem + .45vw, 1.45rem); line-height: 1.55; color: var(--testo); }
.sopratitolo { font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blu); margin-bottom: .8em; }
.sopratitolo-chiaro { color: #c9d3ff; }
.centrato { text-align: center; }

/* ------------------------------------------------ testata fissa */
.testata {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--testata-h);
  background: rgba(255,255,255,.94); backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.testata-in { max-width: 1320px; margin: 0 auto; height: 100%; padding: 0 20px; display: flex; align-items: center; gap: 16px; }
.marchio { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--inchiostro); flex: 0 0 auto; }
.marchio-segno { width: 34px; height: 34px; border-radius: 50%; background: var(--blu); position: relative; flex: 0 0 auto; }
.marchio-segno::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; box-shadow: 4px 0 0 0 var(--inchiostro) inset; }
.marchio-nome { font-weight: 800; font-size: .95rem; line-height: 1.12; letter-spacing: -.01em; }
.menu { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.menu-voci { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.menu-voci > li > a, .menu-enti > button {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 8px;
  font: 600 .95rem/1.2 var(--font); color: var(--inchiostro); text-decoration: none; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
}
.menu-voci > li > a:hover, .menu-enti > button:hover { background: var(--blu-chiaro); color: var(--blu-scuro); }
.menu-voci a[aria-current="page"], .menu-enti > button.attivo { color: var(--blu); box-shadow: inset 0 -2px 0 var(--blu); border-radius: 8px 8px 0 0; }
.freccia { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.menu-enti { position: relative; }
.sottomenu {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 8px); left: 0; min-width: 270px;
  background: #fff; border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 18px 40px rgba(11,16,32,.12);
  display: none;
}
.sottomenu a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--inchiostro); text-decoration: none; font-weight: 600; font-size: .95rem; }
.sottomenu a:hover, .sottomenu a[aria-current="page"] { background: var(--blu-chiaro); color: var(--blu-scuro); }
.menu-enti.aperto .sottomenu { display: block; }
.menu-enti.aperto .freccia { transform: rotate(-135deg) translateY(-2px); }
html:not(.js) .menu-enti:hover .sottomenu, html:not(.js) .menu-enti:focus-within .sottomenu { display: block; }
.pulsante-menu { flex: 0 0 auto; padding: 11px 18px; font-size: .95rem; white-space: nowrap; }
.menu-apri { display: none; }

/* ------------------------------------------------ pulsanti */
.pulsante {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px;
  padding: 12px 24px; border-radius: 999px; background: var(--blu); color: #fff; border: 2px solid var(--blu);
  font: 700 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s;
}
.pulsante:hover { background: var(--blu-scuro); border-color: var(--blu-scuro); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(20,56,230,.25); }
.pulsante-contorno { background: transparent; color: var(--blu); }
.pulsante-contorno:hover { background: var(--blu-chiaro); color: var(--blu-scuro); }
.pulsante-bianco { background: #fff; color: var(--blu-scuro); border-color: #fff; }
.pulsante-bianco:hover { background: var(--blu-chiaro); color: var(--blu-scuro); border-color: var(--blu-chiaro); }
.pulsante-contorno-chiaro { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); }
.pulsante-contorno-chiaro:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.pulsante-grande { min-height: 56px; padding: 14px 32px; font-size: 1.08rem; }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.collegamento-freccia { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.collegamento-freccia::after { content: "→"; transition: transform .2s; }
.collegamento-freccia:hover::after { transform: translateX(4px); }
.collegamento-freccia:hover { text-decoration: underline; }

/* ------------------------------------------------ sezioni */
.sezione { padding: clamp(56px, 7vw, 104px) 0; }
.sezione + .sezione:not(.sezione-grigia):not(.sezione-accento):not(.offerte):not(.chiamata) { padding-top: 0; }
.sezione-grigia { background: var(--grigio); }
.sezione-grigia + .sezione:not(.sezione-grigia) { padding-top: clamp(56px, 7vw, 104px) !important; }
.titolo-sezione { margin-bottom: 1em; }
.apertura { padding: clamp(56px, 8vw, 120px) 0 clamp(40px, 5vw, 72px); background: linear-gradient(180deg, var(--blu-chiaro) 0%, #fff 100%); }
.apertura + .sezione { padding-top: clamp(24px, 3vw, 40px) !important; }
.apertura h1 { max-width: 18ch; }
.apertura .lead { max-width: 60ch; }
.apertura-servizio { min-height: 50vh; display: flex; align-items: center; }
.apertura-servizio h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); max-width: 24ch; }

/* home: eroe */
.eroe { padding: clamp(40px, 6vw, 96px) 0 clamp(56px, 7vw, 104px); }
.eroe-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.eroe h1 { max-width: 15ch; }
.eroe .lead { max-width: 52ch; }

/* scena animata (segnaposto del video: nessun testo dentro) */
.scena { position: relative; aspect-ratio: 4 / 3.4; border-radius: 24px; overflow: hidden;
  background: radial-gradient(120% 90% at 80% 10%, #dfe5ff 0%, var(--blu-chiaro) 45%, #f7f8ff 100%); border: 1px solid #dfe4fb; }
.scena-foglio { position: absolute; width: 46%; aspect-ratio: 1 / 1.35; background: #fff; border-radius: 10px;
  box-shadow: 0 20px 40px rgba(11,16,32,.10), 0 2px 6px rgba(11,16,32,.06); padding: 7% 7%; display: flex; flex-direction: column; gap: 7%; }
.scena-foglio i, .scena-foglio b { display: block; height: 5%; border-radius: 4px; background: #e4e7ef; }
.scena-foglio i:nth-child(2n) { width: 82%; } .scena-foglio i:nth-child(3n) { width: 64%; }
.scena-foglio b { height: 8%; background: #eef0f6; }
.scena-foglio .t { height: 8%; width: 55%; background: #cfd5e6; }
.scena-foglio .nero { background: #0b1020; width: 70%; }
.f1 { left: 6%; top: 14%; transform: rotate(-6deg); animation: galleggia 9s ease-in-out infinite; }
.f2 { left: 30%; top: 8%; z-index: 2; transform: rotate(2deg); animation: galleggia 9s ease-in-out -3s infinite; }
.f3 { left: 50%; top: 22%; transform: rotate(7deg); animation: galleggia 9s ease-in-out -6s infinite; }
.scena-foglio .s { animation: evidenzia 6s ease-in-out infinite; }
.f2 .s { animation-delay: 1.4s; } .f3 .s { animation-delay: 2.8s; }
.scena-foglio .c { animation: evidenzia-blu 6s ease-in-out infinite; animation-delay: 3.6s; }
.scena-raggio { position: absolute; left: 0; right: 0; height: 22%; top: -22%; z-index: 3;
  background: linear-gradient(180deg, rgba(20,56,230,0) 0%, rgba(20,56,230,.14) 70%, rgba(20,56,230,.55) 100%);
  border-bottom: 2px solid var(--blu); animation: scansione 6s cubic-bezier(.45,.05,.55,.95) infinite; }
.scena-lente { position: absolute; z-index: 4; width: 22%; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--blu);
  background: rgba(255,255,255,.25); box-shadow: 0 10px 30px rgba(20,56,230,.25); left: 58%; top: 52%; animation: lente 12s ease-in-out infinite; }
.scena-lente::after { content: ""; position: absolute; width: 40%; height: 9px; background: var(--blu); border-radius: 6px; right: -34%; bottom: -14%; transform: rotate(45deg); }
.scena-esito { position: absolute; z-index: 5; right: 7%; bottom: 8%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: var(--blu);
  display: grid; place-items: center; box-shadow: 0 10px 24px rgba(20,56,230,.35); animation: esito 6s ease-in-out infinite; }
.scena-esito span { width: 38%; height: 20%; border-left: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(-45deg) translate(6%, -10%); }
@keyframes scansione { 0% { top: -22%; } 55% { top: 100%; } 100% { top: 100%; } }
@keyframes evidenzia { 0%, 20% { background: #e4e7ef; } 35%, 70% { background: #ffd84d; } 85%, 100% { background: #e4e7ef; } }
@keyframes evidenzia-blu { 0%, 15% { background: #e4e7ef; } 30%, 70% { background: #9fb0ff; } 85%, 100% { background: #e4e7ef; } }
@keyframes galleggia { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes lente { 0%, 100% { left: 58%; top: 52%; } 33% { left: 16%; top: 30%; } 66% { left: 40%; top: 12%; } }
@keyframes esito { 0%, 55% { transform: scale(0); opacity: 0; } 65%, 90% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }

/* casi in evidenza */
.caso { position: relative; border: 1px solid var(--linea); border-radius: 20px; padding: clamp(28px, 4vw, 48px); max-width: 860px; background: #fff;
  box-shadow: 0 12px 40px rgba(11,16,32,.06); }
.caso-numeri { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.caso-numeri span { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 800; color: var(--blu); letter-spacing: -.03em; line-height: 1; }
.caso h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); }

/* passi */
.passi { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: passi; }
.passi li { background: #fff; border-radius: var(--raggio); padding: 32px 28px; border: 1px solid var(--linea); }
.passo-n { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blu); color: #fff; font-weight: 800; font-size: 1.3rem; margin-bottom: 18px; }
.passi p { margin: 0; }

/* tipi di problema */
.griglia-tipi { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--linea); }
.griglia-tipi li { padding: 26px 22px 26px 0; border-bottom: 1px solid var(--linea); font-weight: 650; font-size: 1.12rem; color: var(--inchiostro); display: flex; gap: 14px; align-items: baseline; }
.griglia-tipi li:not(:nth-child(3n+1)) { padding-left: 22px; border-left: 1px solid var(--linea); }
.tipo-n { color: var(--blu); font-weight: 800; font-size: .95rem; font-variant-numeric: tabular-nums; }

.sezione-accento { background: var(--blu); color: #fff; }
.sezione-accento h2, .sezione-accento .lead { color: #fff; }

.griglia-fiducia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.griglia-fiducia li { padding: 28px; border-radius: var(--raggio); background: var(--grigio); font-weight: 650; font-size: 1.12rem; color: var(--inchiostro); position: relative; padding-left: 64px; }
.griglia-fiducia li::before { content: ""; position: absolute; left: 24px; top: 30px; width: 24px; height: 24px; border-radius: 50%; background: var(--blu);
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 61%); }
.griglia-fiducia li::after { content: ""; position: absolute; left: 32px; top: 36px; width: 8px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.griglia-fiducia a { color: var(--inchiostro); }

/* offerte */
.offerte-riquadro { background: var(--inchiostro); color: #e9ecf5; border-radius: 24px; padding: clamp(32px, 5vw, 64px); position: relative; overflow: hidden; }
.offerte-riquadro::before { content: ""; position: absolute; width: 420px; height: 420px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(20,56,230,.75), rgba(20,56,230,0) 70%); }
.offerte-riquadro > * { position: relative; }
.offerte-riquadro h2 { color: #fff; max-width: 26ch; }
.offerte-riquadro p { max-width: 62ch; font-size: 1.15rem; }

/* domande a scomparsa */
.domande { border-top: 1px solid var(--linea); margin-bottom: 32px; }
.domanda { border-bottom: 1px solid var(--linea); }
.domanda summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary h3 { margin: 0; font-size: 1.18rem; }
.domanda summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; border-right: 2.5px solid var(--blu); border-bottom: 2.5px solid var(--blu); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.domanda[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.domanda p { padding-bottom: 20px; margin: 0; color: var(--testo); }
.elenco-domande .faq { padding: 28px 0; border-bottom: 1px solid var(--linea); }
.elenco-domande .faq:first-child { border-top: 1px solid var(--linea); }
.elenco-domande h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.elenco-domande p { margin: 0; }

/* elenchi */
.elenco-segni, .elenco-no { list-style: none; margin: 0 0 1.4em; padding: 0; }
.elenco-segni li, .elenco-no li { position: relative; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--linea); }
.elenco-segni li::before { content: ""; position: absolute; left: 4px; top: 25px; width: 14px; height: 14px; border-radius: 4px; background: var(--blu); }
.elenco-no li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--blu);
  background: linear-gradient(45deg, transparent 45%, var(--blu) 45%, var(--blu) 58%, transparent 58%); }
.elenco-grande li { font-size: 1.15rem; font-weight: 550; color: var(--inchiostro); }
.sequenza { list-style: none; counter-reset: seq; margin: 0; padding: 0; }
.sequenza li { counter-increment: seq; position: relative; padding: 22px 0 22px 72px; border-bottom: 1px solid var(--linea); font-size: 1.15rem; }
.sequenza li::before { content: counter(seq); position: absolute; left: 0; top: 18px; width: 46px; height: 46px; border-radius: 50%; background: var(--blu-chiaro); color: var(--blu); font-weight: 800; display: grid; place-items: center; }
.schede-numerate { list-style: none; margin: 0; padding: 0; }
.schede-numerate li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--linea); }
.scheda-n { font-size: 2.6rem; font-weight: 800; color: var(--blu); line-height: 1; }
.schede-numerate h2 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.schede-numerate p { margin: 0; }
.ricevi { margin-top: 1.4em; padding: 22px 24px; border-radius: var(--raggio); background: #fff; border-left: 4px solid var(--blu); }
.nome-metodo { font-size: 1.25rem; font-weight: 700; color: var(--inchiostro); padding: 18px 22px; background: var(--blu-chiaro); border-radius: var(--raggio); display: inline-block; }
.testo-lungo p { max-width: 68ch; }
.due-colonne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.due-colonne > div { background: #fff; border: 1px solid var(--linea); border-radius: var(--raggio); padding: 32px; }
.due-colonne p { margin: 0; font-size: 1.15rem; }
.griglia-vantaggi { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.griglia-vantaggi li { background: #fff; border-radius: var(--raggio); padding: 28px; border-top: 4px solid var(--blu); font-weight: 650; font-size: 1.15rem; color: var(--inchiostro); }

/* tabella fasi */
.tabella-scorre { margin-top: 32px; }
.tabella-fasi { width: 100%; border-collapse: collapse; font-size: 1.02rem; }
.tabella-fasi th, .tabella-fasi td { text-align: left; vertical-align: top; padding: 20px 18px; border-bottom: 1px solid var(--linea); }
.tabella-fasi thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--tenue); border-bottom: 2px solid var(--inchiostro); }
.tabella-fasi tbody th { color: var(--blu); font-weight: 800; white-space: nowrap; }
.tabella-fasi td:last-child { font-weight: 600; color: var(--inchiostro); }

/* storie, scheda caso, fonti */
.storia { padding: 36px 0; border-bottom: 1px solid var(--linea); }
.storia:first-child { padding-top: 0; }
.fonti { color: var(--tenue); font-size: 1rem; }
.scheda-caso { border: 1px solid var(--linea); border-radius: 20px; padding: clamp(24px, 4vw, 40px); background: #fff; box-shadow: 0 12px 40px rgba(11,16,32,.06); }
.etichetta { display: inline-block; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; background: var(--blu-chiaro); color: var(--blu-scuro); padding: 6px 12px; border-radius: 999px; }
.scheda-caso dl { margin: 12px 0 0; }
.scheda-caso dl > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.scheda-caso dl > div:last-child { border-bottom: 0; }
.scheda-caso dt { color: var(--tenue); font-weight: 600; }
.scheda-caso dd { margin: 0; color: var(--inchiostro); font-weight: 650; }

/* chiamata finale */
.chiamata { background: var(--blu-chiaro); padding: clamp(40px, 5vw, 64px) 0 !important; }
.chiamata-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.chiamata-in p { margin: 0; font-size: 1.2rem; font-weight: 650; color: var(--inchiostro); max-width: 56ch; }

/* numeri (inseriti solo se dati/stato.json contiene valori) */
.numeri { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
.numeri li { padding: 28px 24px; border-radius: var(--raggio); background: var(--grigio); }
.numero-valore { display: block; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 800; color: var(--blu); letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.numero-etichetta { display: block; margin-top: 8px; font-weight: 600; color: var(--inchiostro); }
.numeri-dettaglio { margin-top: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.numeri-dettaglio h3 { font-size: 1.1rem; }
.numeri-dettaglio table { width: 100%; border-collapse: collapse; }
.numeri-dettaglio td { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.numeri-dettaglio td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.numeri-agg { color: var(--tenue); font-size: .95rem; margin-top: 18px; }

/* moduli */
.modulo { display: grid; gap: 22px; }
.modulo h2 { margin-bottom: 0; }
.campo { display: grid; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.campo label, .campo legend { font-weight: 700; color: var(--inchiostro); padding: 0; }
.obbl, .facolt { font-weight: 500; color: var(--tenue); }
.modulo input[type="url"], .modulo input[type="email"], .modulo input[type="text"], .modulo textarea {
  width: 100%; font: inherit; font-size: 1.05rem; padding: 14px 16px; border: 2px solid #c9cedb; border-radius: 12px; background: #fff; color: var(--inchiostro);
}
.modulo textarea { resize: vertical; min-height: 160px; }
.modulo input:focus, .modulo textarea:focus { border-color: var(--blu); outline: 3px solid rgba(20,56,230,.25); outline-offset: 0; }
.scelte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.scelta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 2px solid var(--linea); border-radius: 12px; cursor: pointer; font-weight: 550 !important; font-size: 1rem; line-height: 1.4; }
.scelta:hover { border-color: #b8c3f5; }
.scelta input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blu); flex: 0 0 auto; }
.scelta:has(input:checked) { border-color: var(--blu); background: var(--blu-chiaro); }
.campo-casella { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; }
.campo-casella input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--blu); }
.campo-casella label { font-weight: 550; }
.campo-trappola { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.avviso { padding: 16px 18px; border-radius: 12px; background: #fff8e1; border-left: 4px solid #b98900; color: var(--inchiostro); font-size: 1rem; margin: 0; }
.modulo .pulsante { justify-self: start; }
.contatti-griglia { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contatti-info .lead a { word-break: break-word; }
.contatti-griglia .modulo { background: var(--grigio); padding: clamp(24px, 4vw, 40px); border-radius: 20px; }

/* piè di pagina */
.piede { background: var(--inchiostro); color: #c8cddb; padding: 72px 0 40px; font-size: 1rem; }
.piede a { color: #fff; text-decoration: none; }
.piede a:hover { text-decoration: underline; color: #fff; }
.piede-alto { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 32px; }
.piede-nome { color: #fff; font-weight: 800; font-size: 1.15rem; }
.piede h2 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1em; }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li { margin-bottom: 10px; }
.piede-marchio a { word-break: break-word; }
.piede-dati { margin: 48px 0 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18); color: #dfe3ee; font-size: .98rem; max-width: 80ch; }

/* comparsa allo scorrimento (solo con JS e senza riduzione del movimento) */
html.js .rivela { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
html.js .rivela.visibile { opacity: 1; transform: none; }

/* ------------------------------------------------ menu compatto */
@media (max-width: 1199px) {
  /* backdrop-filter renderebbe la testata il riferimento del pannello fisso: qui sfondo pieno */
  .testata { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
  .menu-apri { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; padding: 10px 14px; min-height: 44px;
    border: 2px solid var(--linea); border-radius: 999px; background: #fff; font: 700 .95rem var(--font); color: var(--inchiostro); cursor: pointer; }
  .menu-apri-linee, .menu-apri-linee::before, .menu-apri-linee::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; border-radius: 2px; transition: transform .2s, background .2s; }
  .menu-apri-linee::before, .menu-apri-linee::after { content: ""; position: absolute; left: 0; }
  .menu-apri-linee::before { top: -6px; } .menu-apri-linee::after { top: 6px; }
  .menu-apri[aria-expanded="true"] .menu-apri-linee { background: transparent; }
  .menu-apri[aria-expanded="true"] .menu-apri-linee::before { transform: translateY(6px) rotate(45deg); }
  .menu-apri[aria-expanded="true"] .menu-apri-linee::after { transform: translateY(-6px) rotate(-45deg); }
  .menu { position: fixed; top: var(--testata-h); left: 0; right: 0; bottom: 0; background: #fff; flex-direction: column; align-items: stretch;
    gap: 16px; padding: 16px 20px 32px; overflow-y: auto; margin: 0; display: none; border-top: 1px solid var(--linea); }
  .menu.aperto { display: flex; }
  .menu-voci { flex-direction: column; align-items: stretch; gap: 0; }
  .menu-voci > li > a, .menu-enti > button { width: 100%; padding: 14px 6px; font-size: 1.12rem; border-radius: 0; border-bottom: 1px solid var(--linea); justify-content: space-between; }
  .menu-voci a[aria-current="page"], .menu-enti > button.attivo { box-shadow: inset 4px 0 0 var(--blu); padding-left: 14px; }
  .sottomenu { position: static; box-shadow: none; border: 0; padding: 4px 0 8px 12px; min-width: 0; }
  .pulsante-menu { width: 100%; min-height: 54px; font-size: 1.05rem; }
  html:not(.js) .menu { position: static; display: flex; }
  html:not(.js) .testata { position: static; height: auto; }
  html:not(.js) body { padding-top: 0; }
  html:not(.js) .testata-in { flex-wrap: wrap; padding-top: 12px; }
  html:not(.js) .sottomenu { display: block; }
  html:not(.js) .menu-apri { display: none; }
  body.menu-aperto { overflow: hidden; }
}
@media (max-width: 960px) {
  .eroe-in { grid-template-columns: 1fr; }
  .eroe-video { max-width: 560px; }
  .passi, .griglia-fiducia, .griglia-vantaggi { grid-template-columns: 1fr; }
  .griglia-tipi { grid-template-columns: 1fr 1fr; }
  .griglia-tipi li:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .griglia-tipi li:nth-child(2n) { padding-left: 22px; border-left: 1px solid var(--linea); }
  .contatti-griglia, .due-colonne { grid-template-columns: 1fr; }
  .piede-alto { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --testata-h: 64px; }
  body { font-size: 1.0625rem; }
  .contenitore { padding: 0 18px; }
  .testata-in { padding: 0 14px; gap: 10px; }
  .marchio-segno { width: 28px; height: 28px; }
  .marchio-segno::after { inset: 8px; }
  .marchio-nome { font-size: .86rem; }
  .menu-apri-testo { display: none; }
  .griglia-tipi { grid-template-columns: 1fr; }
  .griglia-tipi li:nth-child(2n) { padding-left: 0; border-left: 0; }
  .scelte { grid-template-columns: 1fr; }
  .piede-alto { grid-template-columns: 1fr; }
  .azioni .pulsante { flex: 1 1 100%; }
  .schede-numerate li { grid-template-columns: 1fr; gap: 6px; }
  .scheda-n { font-size: 2rem; }
  .sequenza li { padding-left: 60px; font-size: 1.05rem; }
  /* tabella delle fasi in forma di schede */
  .tabella-fasi thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabella-fasi, .tabella-fasi tbody, .tabella-fasi tr, .tabella-fasi th, .tabella-fasi td { display: block; width: 100%; }
  .tabella-fasi tr { padding: 18px 0; border-bottom: 1px solid var(--linea); }
  .tabella-fasi th, .tabella-fasi td { padding: 4px 0; border: 0; }
  .tabella-fasi tbody th { font-size: 1.15rem; white-space: normal; }
  .scheda-caso dl > div { grid-template-columns: 1fr; gap: 2px; }
  .chiamata-in .pulsante { width: 100%; }
  .modulo .pulsante { justify-self: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js .rivela { opacity: 1; transform: none; }
  .scena-raggio { top: 38%; }
  .scena-esito { transform: none; opacity: 1; }
  .f1 .s, .f3 .c { background: #ffd84d; }
}
@media print {
  .testata, .piede, .eroe-video, .chiamata { display: none; }
  body { padding-top: 0; }
  html.js .rivela { opacity: 1; transform: none; }
}