/* ==========================================================================
   Futuro Nazionale Veneto — foglio di stile unico (home + sondaggi)
   Palette dal sito nazionale futuronazionale.it: blu #093d6a, giallo #ffed00
   ========================================================================== */

:root {
  color-scheme: light;

  --blu: #093d6a;
  --blu-scuro: #051632;
  --blu-notte: #030e1f;
  --blu-acceso: #0f5a99;
  --blu-tenue: #e8f0f8;
  --giallo: #ffed00;
  --giallo-hover: #fff566;
  --verde-it: #008c45;
  --rosso-it: #cd212a;

  --testo: #0f1b2d;
  --testo-tenue: #4a5b70;
  --sfondo: #ffffff;
  --sfondo-alt: #f3f5f8;
  --bordo: #d5dde7;
  --bordo-forte: #9fb0c4;
  --errore: #b3261e;

  --font-titoli: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-testo: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  --raggio: 16px;
  --raggio-m: 12px;
  --ombra: 0 1px 2px rgb(5 22 50 / 0.06), 0 12px 32px rgb(5 22 50 / 0.1);
  --ombra-s: 0 1px 2px rgb(5 22 50 / 0.06), 0 4px 14px rgb(5 22 50 / 0.07);
  --largh: 1160px;
  --gutter: clamp(16px, 4vw, 32px);
  --sezione: clamp(64px, 9vw, 112px);
  --curva: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t: 180ms var(--curva);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  min-width: 320px;
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

img, svg { display: block; max-width: 100%; }

a { color: var(--blu); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--blu-scuro); }

h1, h2, h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-titoli);
  line-height: 1.12;
  color: var(--blu-scuro);
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

:where(ul[class]) { list-style: none; margin: 0; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--blu-acceso); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
.testata :focus-visible,
.hero :focus-visible,
.sezione--scura :focus-visible,
.piede :focus-visible { outline-color: var(--giallo); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Utilità ---------- */

.contenitore { width: min(100% - 2 * var(--gutter), var(--largh)); margin-inline: auto; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.salta {
  position: absolute;
  top: -80px; left: 12px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--giallo);
  color: var(--blu-scuro);
  font-weight: 700;
  text-decoration: none;
}
.salta:focus { top: 12px; }

.tricolore {
  height: 5px;
  background: linear-gradient(90deg, var(--verde-it) 0 33.34%, #fff 33.34% 66.67%, var(--rosso-it) 66.67% 100%);
}

/* Segnaposto da sostituire prima della pubblicazione */
.da-compilare {
  padding: 0 3px;
  border-radius: 4px;
  background: rgb(255 237 0 / 0.38);
  box-shadow: inset 0 -2px 0 rgb(5 22 50 / 0.35);
}
.sezione--scura .da-compilare,
.piede .da-compilare {
  background: rgb(255 237 0 / 0.16);
  box-shadow: inset 0 -2px 0 rgb(255 237 0 / 0.6);
}

/* ---------- Bottoni ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.75em 1.4em;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-titoli);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform var(--t);
}
.btn:active { transform: translateY(1px); }
.btn svg { flex: none; width: 1.15em; height: 1.15em; }

.btn--giallo { background: var(--giallo); color: var(--blu-scuro); }
.btn--giallo:hover { background: var(--giallo-hover); color: var(--blu-scuro); box-shadow: 0 8px 24px rgb(255 237 0 / 0.22); }

.btn--blu { background: var(--blu); color: #fff; }
.btn--blu:hover { background: var(--blu-scuro); color: #fff; }

.btn--contorno { border-color: rgb(255 255 255 / 0.7); background: transparent; color: #fff; }
.btn--contorno:hover { border-color: #fff; background: rgb(255 255 255 / 0.1); color: #fff; }

.btn--contorno-blu { border-color: var(--blu); background: transparent; color: var(--blu); }
.btn--contorno-blu:hover { background: var(--blu-tenue); color: var(--blu-scuro); }

.btn--fantasma { padding-inline: 0.9em; background: transparent; color: var(--blu); }
.btn--fantasma:hover { background: var(--blu-tenue); color: var(--blu-scuro); }

.btn--grande { min-height: 56px; padding-inline: 1.75em; font-size: 1.0625rem; }
.btn--pieno { width: 100%; }

.btn[disabled] { opacity: 0.7; cursor: not-allowed; }
.btn.is-caricamento { pointer-events: none; }
.btn.is-caricamento::before {
  content: "";
  width: 1.05em; height: 1.05em;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gira 0.7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Piccoli elementi ---------- */

.occhiello {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--font-titoli);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--giallo);
}
.occhiello::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: currentColor; }
.occhiello--blu { color: var(--blu); }
.occhiello--scuro { color: var(--blu-scuro); }

.etichetta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--blu-tenue);
  color: var(--blu);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.etichetta svg { width: 14px; height: 14px; }
.etichetta--live::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1e9e50;
  box-shadow: 0 0 0 3px rgb(30 158 80 / 0.22);
}
.etichetta--ok { background: #e3f4e8; color: #11632f; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--sfondo-alt);
  color: var(--blu-scuro);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.2;
}
.chip svg { width: 16px; height: 16px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 100;
  max-width: calc(100% - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--blu-scuro);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  box-shadow: var(--ombra);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 200ms var(--curva), transform 200ms var(--curva);
  pointer-events: none;
}
.toast.is-visibile { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Testata ---------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blu-scuro);
  color: #fff;
}
.testata--compatta { position: relative; }

.testata__barra { display: flex; align-items: center; gap: 8px; min-height: 68px; }

/* Logo ufficiale (assets/img/logo-futuro-nazionale.svg) + nome della sezione regionale */
.marchio {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  color: #fff;
  text-decoration: none;
}
.marchio:hover { color: #fff; }
.marchio__logo { flex: none; width: 48px; height: 48px; }
.marchio__testo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--font-titoli);
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
.marchio__nome { font-size: 0.95rem; letter-spacing: 0.05em; }
.marchio__regione { font-size: 0.72rem; letter-spacing: 0.42em; color: var(--giallo); }
.marchio--grande .marchio__logo { width: 72px; height: 72px; }
.marchio--grande .marchio__nome { font-size: 1.05rem; }
.testata--compatta .marchio__logo { width: 44px; height: 44px; }

.nav { margin-left: auto; }
.nav__lista { display: flex; gap: 2px; }
.nav__link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: rgb(255 255 255 / 0.88);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t), color var(--t);
}
.nav__link:hover { background: rgb(255 255 255 / 0.08); color: #fff; }

.testata__cta { min-height: 44px; margin-left: 12px; padding: 0.6em 1.15em; font-size: 0.9375rem; }

.nav-toggle { display: none; }
.solo-mobile { display: none; }

.testata__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-left: auto;
  padding: 0 6px;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}
.testata__link:hover { color: var(--giallo); }
.testata__link svg { width: 18px; height: 18px; }

@media (max-width: 919px) {
  .solo-desktop { display: none; }
  .solo-mobile { display: inline; }
  .marchio { gap: 10px; }
  .marchio__logo { width: 42px; height: 42px; }
  .marchio__nome { font-size: 0.75rem; }
  .marchio__regione { font-size: 0.66rem; }
  .testata__cta { margin-left: auto; padding-inline: 0.95em; font-size: 0.875rem; }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    margin-right: -6px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #fff;
  }
  .nav-toggle:hover { background: rgb(255 255 255 / 0.08); }
  .nav-toggle svg { width: 26px; height: 26px; }
  .no-js .nav-toggle { display: none; }

  .js .nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin: 0;
    background: var(--blu-scuro);
    border-top: 1px solid rgb(255 255 255 / 0.1);
    box-shadow: 0 16px 32px rgb(0 0 0 / 0.3);
  }
  .js .nav.is-aperta { display: block; }
  .js .nav__lista { flex-direction: column; gap: 0; width: min(100% - 2 * var(--gutter), var(--largh)); margin: 0 auto; padding: 6px 0 14px; }
  .js .nav__link { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid rgb(255 255 255 / 0.08); font-size: 1.0625rem; }

  .no-js .testata__barra { flex-wrap: wrap; }
  .no-js .nav { order: 3; width: 100%; margin: 0; }
  .no-js .nav__lista { flex-wrap: wrap; }
}

@media (max-width: 359px) {
  .testata__cta { display: none; }
  .nav-toggle { margin-left: auto; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(45% 55% at 0% 100%, rgb(255 237 0 / 0.07), transparent 70%),
    radial-gradient(110% 80% at 88% 0%, var(--blu-acceso) 0%, var(--blu) 42%, var(--blu-scuro) 100%);
}

.hero__griglia {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-block: clamp(44px, 8vw, 112px) clamp(48px, 7vw, 96px);
}
@media (min-width: 960px) {
  .hero__griglia { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 72px; }
}

.hero h1 {
  margin-bottom: 22px;
  color: #fff;
  font-size: clamp(2.35rem, 1.3rem + 4.6vw, 4.6rem);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.hero h1 em { font-style: normal; color: var(--giallo); }

.hero__testo { max-width: 34em; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); color: rgb(255 255 255 / 0.86); }

.hero__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 559px) { .hero__azioni .btn { flex: 1 1 100%; } }

.hero__garanzie {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
  color: rgb(255 255 255 / 0.82);
  font-size: 0.9375rem;
  font-weight: 500;
}
.hero__garanzie li { display: inline-flex; align-items: center; gap: 8px; }
.hero__garanzie svg { width: 18px; height: 18px; color: var(--giallo); }

.anteprima__scheda {
  padding: 26px 26px 26px;
  border-top: 6px solid var(--giallo);
  border-radius: 20px;
  background: #fff;
  color: var(--testo);
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.35);
}
.anteprima__titolo { margin: 16px 0 12px; font-size: 1.5rem; font-weight: 800; }
.anteprima__domanda {
  margin: 0 0 16px;
  padding: 16px 18px;
  border-radius: var(--raggio-m);
  background: var(--sfondo-alt);
  color: var(--blu-scuro);
  font-weight: 600;
  line-height: 1.4;
}
.anteprima__domanda span {
  display: block;
  margin-bottom: 4px;
  color: var(--testo-tenue);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.anteprima__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 0 0 20px;
  color: var(--testo-tenue);
  font-size: 0.875rem;
  font-weight: 500;
}
.anteprima__meta span, .card-sondaggio__meta span { display: inline-flex; align-items: center; gap: 6px; }
.anteprima__meta svg, .card-sondaggio__meta svg { width: 16px; height: 16px; }

.province { border-top: 1px solid rgb(255 255 255 / 0.1); background: rgb(3 14 31 / 0.35); }
.province__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 26px;
  padding-block: 16px;
  color: rgb(255 255 255 / 0.72);
  font-family: var(--font-titoli);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Sezioni ---------- */

.sezione { padding-block: var(--sezione); }
.sezione--alt { background: var(--sfondo-alt); }
.sezione--gialla { background: var(--giallo); }
.sezione--scura { background: var(--blu-scuro); color: rgb(255 255 255 / 0.86); }
.sezione--scura h2, .sezione--scura h3 { color: #fff; }

.sezione h2 {
  font-size: clamp(1.8rem, 1.15rem + 2.6vw, 2.9rem);
  font-weight: 900;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.sezione__testata { max-width: 44rem; margin-bottom: clamp(32px, 5vw, 52px); }
.sezione__testata--riga {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 40px;
  max-width: none;
}
.sezione__testata--riga > div { max-width: 44rem; }

.sottotitolo { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); color: var(--testo-tenue); }
.sezione--gialla .sottotitolo { color: #1f2d44; }
.sezione--scura .sottotitolo { color: rgb(255 255 255 / 0.78); }

.due-colonne { display: grid; gap: 40px; }
@media (min-width: 900px) {
  .due-colonne { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 72px; align-items: center; }
}
.testo-lungo p { font-size: 1.125rem; }

.coordinatore { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bordo); }
.coordinatore__foto {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--blu-tenue);
  color: var(--blu);
}
.coordinatore__foto svg { width: 28px; height: 28px; }
.coordinatore p { margin: 0; line-height: 1.4; }
.coordinatore strong { display: block; font-family: var(--font-titoli); color: var(--blu-scuro); }
.coordinatore span.ruolo { color: var(--testo-tenue); font-size: 0.9375rem; }

/* ---------- Card ---------- */

.griglia-card { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }

.card { padding: 28px 26px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff; }
.card h3 { margin-bottom: 8px; font-size: 1.125rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.card p { color: var(--testo-tenue); }
.card__icona {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--blu);
  color: var(--giallo);
}
.card__icona svg { width: 26px; height: 26px; }

.card--scura {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-color: rgb(255 255 255 / 0.12);
  background: rgb(255 255 255 / 0.05);
}
.card--scura p { flex: 1; margin-bottom: 22px; color: rgb(255 255 255 / 0.78); }
.card--scura .card__icona { background: var(--giallo); color: var(--blu-scuro); }

.card--evidenza { padding: clamp(26px, 4vw, 40px); border: 0; border-radius: 20px; background: var(--blu-scuro); color: rgb(255 255 255 / 0.85); }
.card--evidenza h3 { color: #fff; font-size: 1.25rem; }
.card--evidenza p { color: rgb(255 255 255 / 0.8); }

.elenco-punti { display: grid; gap: 20px; margin-top: 22px; }
.elenco-punti li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; line-height: 1.5; }
.elenco-punti strong { display: block; margin-bottom: 2px; color: #fff; font-family: var(--font-titoli); font-size: 1.0625rem; }
.punto {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--giallo);
  color: var(--blu-scuro);
}
.punto svg { width: 18px; height: 18px; stroke-width: 2.6; }

/* ---------- Card sondaggio (home e pagina sondaggi) ---------- */

.lista-sondaggi { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.lista-sondaggi--colonna { grid-template-columns: 1fr; }

.card-sondaggio {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border-radius: var(--raggio);
  background: #fff;
  box-shadow: var(--ombra-s);
  transition: transform var(--t), box-shadow var(--t);
}
@media (hover: hover) {
  .card-sondaggio:hover { transform: translateY(-3px); box-shadow: var(--ombra); }
}
.card-sondaggio h3 { margin: 4px 0 0; font-size: 1.3rem; font-weight: 800; }
.card-sondaggio p { margin: 0; color: var(--testo-tenue); }
.card-sondaggio__desc { flex: 1; }
.card-sondaggio__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.875rem; font-weight: 500; }
.card-sondaggio .btn { margin-top: 6px; }
/* L'intera card è cliccabile */
.card-sondaggio .btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio); }

.vuoto { padding: 24px; border-radius: var(--raggio); background: rgb(255 255 255 / 0.65); font-weight: 600; }

/* ---------- Piede ---------- */

.piede { background: var(--blu-notte); color: rgb(255 255 255 / 0.75); font-size: 0.9375rem; }
.piede__griglia { display: grid; gap: 36px; padding-block: 56px 36px; }
@media (min-width: 820px) { .piede__griglia { grid-template-columns: 1.3fr 1fr 1fr; } }
.piede__titolo {
  margin-bottom: 14px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.piede a { color: #fff; text-decoration: none; }
.piede a:hover { color: var(--giallo); text-decoration: underline; }
.piede .marchio { margin-bottom: 14px; }
.piede .marchio:hover { text-decoration: none; }
.piede__lista { display: grid; gap: 10px; }

.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  transition: background-color var(--t), color var(--t);
}
.social a:hover { background: var(--giallo); color: var(--blu-scuro); text-decoration: none; }
.social svg { width: 20px; height: 20px; }

.piede__fondo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 20px 28px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  color: rgb(255 255 255 / 0.6);
  font-size: 0.8125rem;
}
.piede__fondo p { margin: 0; }

/* ==========================================================================
   Pagina sondaggi
   ========================================================================== */

.pagina-sondaggi { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--sfondo-alt); }

.avviso-bozza {
  margin: 0;
  padding: 9px var(--gutter);
  background: var(--giallo);
  color: var(--blu-scuro);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.app { flex: 1; padding-block: clamp(20px, 5vw, 56px) 40px; }
.app__contenitore { display: grid; gap: 20px; width: min(100% - 2 * var(--gutter), 680px); margin-inline: auto; }

.pannello {
  --pad: clamp(22px, 5vw, 44px);
  padding: var(--pad);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--ombra);
}
.no-js .caricamento { display: none; }
.caricamento { color: var(--testo-tenue); text-align: center; }

.titolo-pagina { margin: 14px 0 10px; font-size: clamp(1.75rem, 1.3rem + 2vw, 2.4rem); font-weight: 900; line-height: 1.08; }
.pannello > .occhiello + .titolo-pagina { margin-top: 0; }

.nota-privacy {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  margin-top: 24px;
  padding: 16px;
  border-radius: var(--raggio-m);
  background: var(--blu-tenue);
  color: var(--blu-scuro);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.nota-privacy svg { width: 24px; height: 24px; color: var(--blu); }

/* ---------- Domanda ---------- */

.passo { animation: entra 240ms var(--curva) both; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.passo__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 30px;
  margin-bottom: 10px;
  color: var(--testo-tenue);
  font-size: 0.875rem;
  font-weight: 600;
}
.passo__testa .chip { padding: 5px 10px; font-size: 0.8125rem; }

.progresso { height: 6px; margin-bottom: 26px; overflow: hidden; border-radius: 999px; background: var(--blu-tenue); }
.progresso__barra {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blu), var(--blu-acceso));
  transition: width 400ms var(--curva);
}

.passo fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.passo legend { display: block; width: 100%; padding: 0; }

.passo__titolo {
  margin: 0;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.75rem);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.005em;
}
.passo__aiuto { margin: 8px 0 0; color: var(--testo-tenue); font-size: 0.9375rem; }

.opzioni { display: grid; gap: 10px; margin-top: 22px; }
.opzioni--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.opzione {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 12px 16px;
  border: 2px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: #fff;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--t), background-color var(--t), opacity var(--t);
}
@media (hover: hover) { .opzione:hover { border-color: var(--bordo-forte); } }

.opzione input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.opzione__segno {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px; height: 24px;
  border: 2px solid var(--bordo-forte);
  border-radius: 50%;
  background: #fff;
  color: #fff;
  transition: background-color var(--t), border-color var(--t);
}
.opzione--multipla .opzione__segno { border-radius: 7px; }
.opzione__segno svg { width: 14px; height: 14px; stroke-width: 3.2; opacity: 0; transform: scale(0.5); transition: opacity var(--t), transform var(--t); }
.opzione__testo { font-weight: 500; line-height: 1.35; }

.opzione.is-selezionata { border-color: var(--blu); background: var(--blu-tenue); }
.opzione.is-selezionata .opzione__segno { border-color: var(--blu); background: var(--blu); }
.opzione.is-selezionata .opzione__segno svg { opacity: 1; transform: none; }
.opzione.is-selezionata .opzione__testo { color: var(--blu-scuro); font-weight: 600; }
.opzione.is-disabilitata { opacity: 0.45; cursor: not-allowed; }

.opzione input:focus-visible + .opzione__segno { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--blu-acceso); }
.opzione:has(input:focus-visible) { outline: 3px solid var(--blu-acceso); outline-offset: 2px; }

/* Scala di voto */
.scala { margin-top: 22px; }
.scala__valori { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px; }
.scala__valori[data-molti] { grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); }
.opzione--scala {
  justify-content: center;
  min-height: 60px;
  padding: 8px 0;
  color: var(--blu-scuro);
  font-family: var(--font-titoli);
  font-size: 1.3rem;
  font-weight: 800;
}
.opzione--scala .opzione__segno { display: none; }
.opzione--scala .opzione__testo { font-weight: 800; }
.opzione--scala.is-selezionata { background: var(--blu); }
.opzione--scala.is-selezionata .opzione__testo { color: #fff; font-weight: 800; }
.scala__etichette { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; color: var(--testo-tenue); font-size: 0.875rem; font-weight: 500; }
@media (max-width: 380px) { .scala__valori { gap: 6px; } }

/* Campi di testo */
.altro { margin-top: 12px; }
.campo-etichetta { display: block; margin-bottom: 6px; color: var(--blu-scuro); font-size: 0.9375rem; font-weight: 600; }
.input, .campo-testo {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: #fff;
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color var(--t), box-shadow var(--t);
}
.input { min-height: 52px; }
.campo-testo { display: block; min-height: 150px; margin-top: 22px; resize: vertical; }
.input:focus, .campo-testo:focus { outline: none; border-color: var(--blu); box-shadow: 0 0 0 4px rgb(9 61 106 / 0.16); }
.input::placeholder, .campo-testo::placeholder { color: #647387; }
.contatore { margin: 6px 0 0; color: var(--testo-tenue); font-size: 0.8125rem; text-align: right; }

.passo__errore {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fdecea;
  color: var(--errore);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* Trappola anti-bot: invisibile alle persone */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.passo__azioni { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.passo__azioni [type="submit"] { flex: 1; }
@media (min-width: 641px) {
  .passo__azioni { justify-content: space-between; }
  .passo__azioni [type="submit"] { flex: 0 1 auto; min-width: 220px; }
}
/* Sul telefono i bottoni restano sempre a portata di pollice */
@media (max-width: 640px) {
  .passo__azioni {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 24px calc(-1 * var(--pad)) calc(-1 * var(--pad));
    padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bordo);
    border-radius: 0 0 20px 20px;
    background: rgb(255 255 255 / 0.96);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}

/* ---------- Esito ---------- */

.esito { text-align: center; }
.esito__icona {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: var(--blu);
  color: var(--giallo);
  animation: comparsa 420ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both;
}
.esito__icona svg { width: 38px; height: 38px; stroke-width: 3; }
.esito__icona--tenue { background: var(--blu-tenue); color: var(--blu); }
@keyframes comparsa { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
.esito .sottotitolo { max-width: 32em; margin-inline: auto; }
.nota-prova {
  max-width: 32em;
  margin: 16px auto 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgb(255 237 0 / 0.45);
  color: var(--blu-scuro);
  font-size: 0.9375rem;
  font-weight: 600;
}

.condividi { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bordo); text-align: left; }
.condividi__titolo { margin-bottom: 14px; font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.condividi > .btn { margin-bottom: 10px; }
.condividi__griglia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .condividi__griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px;
  border: 2px solid var(--bordo);
  border-radius: var(--raggio-m);
  background: #fff;
  color: var(--blu-scuro);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  touch-action: manipulation;
  transition: border-color var(--t), background-color var(--t);
}
.btn-social:hover { border-color: var(--blu); background: var(--blu-tenue); color: var(--blu-scuro); }
.btn-social svg { width: 20px; height: 20px; }

.copia { display: flex; gap: 8px; margin-top: 10px; }
.copia .input { flex: 1; min-width: 0; min-height: 48px; color: var(--testo-tenue); }
.copia .btn { min-height: 48px; border-radius: var(--raggio-m); }

.nota-bozza { margin-top: 18px; }

.titolo-sezione { margin: 8px 0 14px; font-size: 1.125rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

.torna { margin: 4px 0 0; text-align: center; }
.torna a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.torna svg { width: 18px; height: 18px; }

.anteprima-dati {
  padding: 16px 18px;
  border: 2px dashed var(--bordo-forte);
  border-radius: var(--raggio-m);
  background: #fff;
  font-size: 0.875rem;
}
.anteprima-dati summary { min-height: 28px; color: var(--blu); font-weight: 700; cursor: pointer; }
.anteprima-dati pre {
  max-height: 320px;
  margin: 12px 0 10px;
  padding: 14px;
  overflow: auto;
  border-radius: 10px;
  background: #0b1a2e;
  color: #d8e6f6;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.piede-mini { padding: 20px var(--gutter) 28px; color: var(--testo-tenue); font-size: 0.875rem; text-align: center; }
.piede-mini p { margin: 0; }
.piede-mini a { color: var(--testo-tenue); }

/* ==========================================================================
   Raccolte firme, gazebo ed eventi, referenti
   ========================================================================== */

.btn--piccolo { min-height: 44px; padding: 0.55em 1em; font-size: 0.9375rem; }
.btn--piccolo svg { width: 1.05em; height: 1.05em; }

.vuoto--bordo { border: 2px dashed var(--bordo); background: transparent; font-weight: 500; }
/* Se la sezione gazebo è nascosta, i referenti prendono lo sfondo grigio per staccarsi dalla sezione precedente */
#gazebo[hidden] + #referenti { background: var(--sfondo-alt); }

/* ---------- Avanzamento firme ---------- */
.avanzamento { width: 100%; margin: 4px 0; }
.avanzamento__traccia { height: 10px; overflow: hidden; border-radius: 999px; background: var(--blu-tenue); }
.avanzamento__barra { height: 100%; border-radius: 999px; background: var(--blu-acceso); transition: width 600ms var(--curva); }
.avanzamento__testo { margin: 8px 0 0; color: var(--testo-tenue); font-size: 0.9375rem; }
.avanzamento__testo strong { color: var(--blu-scuro); font-family: var(--font-titoli); font-size: 1.25rem; font-weight: 800; }
.esito .avanzamento { max-width: 420px; margin: 18px auto 0; text-align: center; }

.card-petizione {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 24px;
  border: 1px solid var(--bordo);
  border-top: 5px solid var(--giallo);
  border-radius: var(--raggio);
  background: #fff;
  box-shadow: var(--ombra-s);
  transition: transform var(--t), box-shadow var(--t);
}
@media (hover: hover) { .card-petizione:hover { transform: translateY(-3px); box-shadow: var(--ombra); } }
.card-petizione h3 { margin: 4px 0 0; font-size: 1.3rem; font-weight: 800; }
.card-petizione__desc { flex: 1; margin: 0; color: var(--testo-tenue); }
.card-petizione .btn::after { content: ""; position: absolute; inset: 0; border-radius: var(--raggio); }

.petizione__destinatario { margin: -2px 0 16px; color: var(--testo-tenue); font-size: 0.9375rem; }
.petizione__destinatario strong { color: var(--blu-scuro); }
.petizione__salta { margin-top: 18px; }
@media (min-width: 900px) { .petizione__salta { display: none; } }
.testo-petizione p { font-size: 1.0625rem; line-height: 1.7; }

/* ---------- Modulo di firma ---------- */
.modulo { display: grid; gap: 18px; }
.riga-campi { display: grid; gap: 18px; }
@media (min-width: 560px) { .riga-campi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.campo { min-width: 0; }
.campo-aiuto { margin: -2px 0 8px; color: var(--testo-tenue); font-size: 0.875rem; line-height: 1.4; }
.campo-errore { margin: 6px 0 0; color: var(--errore); font-size: 0.875rem; font-weight: 600; }
.facoltativo { color: var(--testo-tenue); font-weight: 500; }
.input[aria-invalid="true"] { border-color: var(--errore); }
select.input {
  appearance: none;
  padding-right: 44px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23093d6a%22 stroke-width=%222.4%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E") no-repeat right 14px center / 18px;
  cursor: pointer;
}

.consensi { display: grid; gap: 12px; padding: 16px; border-radius: var(--raggio-m); background: var(--sfondo-alt); }
.consenso { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 0.9375rem; line-height: 1.5; cursor: pointer; }
.consenso input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--blu); cursor: pointer; }
.consensi .campo-errore { margin: -4px 0 0 36px; }

.nota-legale { margin: 0; color: var(--testo-tenue); font-size: 0.8125rem; line-height: 1.5; }
.nota-ufficiale {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--raggio-m);
  background: var(--blu-tenue);
  color: var(--blu-scuro);
  font-size: 0.9375rem;
}
.nota-ufficiale svg { width: 22px; height: 22px; color: var(--blu); }

/* ---------- Gazebo ed eventi ---------- */
.app__contenitore--largo { width: min(100% - 2 * var(--gutter), 760px); }
.lista-eventi { display: grid; gap: 14px; }
@media (min-width: 1000px) { .lista-eventi--home { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gruppo-eventi .titolo-sezione { margin: 10px 4px 12px; }

.evento {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
  box-shadow: var(--ombra-s);
}
.evento__data {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: start;
  padding: 8px 0 9px;
  border-radius: 12px;
  background: var(--blu);
  color: #fff;
  font-family: var(--font-titoli);
  line-height: 1;
  text-transform: uppercase;
}
.evento__mese { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; color: var(--giallo); }
.evento__giorno { margin: 4px 0 3px; font-size: 1.75rem; font-weight: 900; }
.evento__settimana { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; opacity: 0.85; }
.evento__corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.evento__corpo p { margin: 0; }
.evento__quando { color: var(--testo-tenue); font-size: 0.9375rem; }
.evento__quando strong { color: var(--blu-scuro); }
.evento__ora { white-space: nowrap; }
.evento__oggi {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--giallo);
  color: var(--blu-scuro);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.evento__titolo { margin: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.25; }
.evento__dove { display: flex; gap: 6px; color: var(--testo); font-weight: 500; line-height: 1.4; }
.evento__dove svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--blu); }
.evento__note { color: var(--testo-tenue); font-size: 0.9375rem; line-height: 1.5; white-space: pre-line; }
.evento__corpo .evento__etichette { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.etichetta--firma { background: rgb(255 237 0 / 0.5); color: var(--blu-scuro); }
.evento__azioni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
@media (max-width: 420px) {
  .evento { grid-template-columns: 1fr; }
  .evento__data { flex-direction: row; gap: 8px; align-items: baseline; justify-self: start; padding: 8px 12px; }
  .evento__giorno { margin: 0; font-size: 1.25rem; }
}

.vuoto-eventi { text-align: center; }
.vuoto-eventi > svg { width: 40px; height: 40px; margin: 0 auto 10px; color: var(--blu); }
.vuoto-eventi h2 { font-size: 1.25rem; font-weight: 800; }
.vuoto-eventi p { color: var(--testo-tenue); }
.invito-gazebo p { color: var(--testo-tenue); }

/* ---------- Filtri per provincia ---------- */
.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
#lista-referenti > .filtri { margin: 0 0 22px; }
.filtro {
  min-height: 44px;
  padding: 8px 16px;
  border: 2px solid var(--bordo);
  border-radius: 999px;
  background: #fff;
  color: var(--blu-scuro);
  font-size: 0.9375rem;
  font-weight: 600;
  touch-action: manipulation;
  transition: border-color var(--t), background-color var(--t), color var(--t);
}
.filtro:hover { border-color: var(--bordo-forte); }
.filtro[aria-pressed="true"] { border-color: var(--blu); background: var(--blu); color: #fff; }

/* ---------- Referenti ---------- */
.griglia-referenti { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.referente {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: #fff;
}
.referente__testa { display: flex; align-items: center; gap: 14px; }
.referente__iniziali {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--blu-tenue);
  color: var(--blu);
  font-family: var(--font-titoli);
  font-size: 1.05rem;
  font-weight: 800;
}
.referente__nome { margin: 0; font-size: 1.125rem; font-weight: 800; }
.referente__ruolo { margin: 2px 0 0; color: var(--testo-tenue); font-size: 0.9375rem; line-height: 1.35; }
.referente__contatti { display: grid; gap: 4px; }
.referente__contatti a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.referente__contatti a:hover { text-decoration: underline; }
.referente__contatti svg { flex: none; width: 18px; height: 18px; }
.referente__whatsapp { align-self: flex-start; }

/* ---------- Testi legali ---------- */
.testo-legale h2 { margin: 30px 0 10px; font-size: 1.125rem; font-weight: 800; }
.testo-legale p, .testo-legale li { line-height: 1.65; }
.testo-legale ul { margin: 0 0 1em; padding-left: 1.2em; }
.testo-legale li + li { margin-top: 6px; }