:root {
  --blu: #262063;
  --blu-scuro: #1a1647;
  --rosso: #e1202d;
  --rosa: #e8338f;
  --testo: #1d1b2e;
  --tenue: #5b5870;
  --fondo: #ffffff;
  --fondo-chiaro: #f4f3fa;
  --bordo: #e2e0ee;
  --raggio: 14px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--testo);
  background: var(--fondo);
  line-height: 1.55;
  font-size: 17px;
}
img { max-width: 100%; height: auto; }
a { color: var(--blu); }
.riga { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.salta { position: absolute; left: -999px; }
.salta:focus { left: 16px; top: 8px; z-index: 10; background: #fff; padding: 8px 12px; border-radius: 8px; }

/* Testata */
.testata { position: sticky; top: 0; z-index: 5; background: var(--blu); color: #fff; box-shadow: 0 2px 10px rgb(0 0 0 / .15); }
.testata .riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.marchio { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; letter-spacing: .3px; }
.marchio img { border-radius: 8px; }
.testata nav { display: flex; gap: 4px; flex-wrap: wrap; }
.testata nav a { color: #fff; text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: 15px; font-weight: 600; }
.testata nav a:hover { background: rgb(255 255 255 / .12); }
.testata nav a.evidenza { background: var(--rosso); }
.testata nav a.evidenza:hover { background: #c41824; }

/* Eroe */
.eroe { background: linear-gradient(160deg, var(--blu) 0%, var(--blu-scuro) 100%); color: #fff; padding: 56px 0 64px; }
.eroe-riga { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.sopratitolo { text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 700; color: #ffb3b8; margin: 0 0 8px; }
.eroe h1 { font-size: clamp(36px, 7vw, 60px); line-height: 1.05; margin: 0; }
.motto { font-size: 20px; font-weight: 700; color: var(--rosso); background: #fff; display: inline-block; padding: 4px 12px; border-radius: 6px; margin: 16px 0 12px; }
.intro { font-size: 19px; max-width: 34ch; opacity: .92; }
.stemma { justify-self: center; border-radius: 24px; box-shadow: 0 12px 40px rgb(0 0 0 / .35); width: min(320px, 100%); }
.azioni { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.bottone { display: inline-block; background: var(--rosso); color: #fff; text-decoration: none; font-weight: 700; padding: 12px 20px; border-radius: 10px; }
.bottone:hover { background: #c41824; }
.bottone.secondario { background: transparent; border: 2px solid #fff; }
.bottone.secondario:hover { background: rgb(255 255 255 / .12); }

/* Sezioni */
.sezione { padding: 56px 0; }
.sezione.chiara { background: var(--fondo-chiaro); }
.sezione h2 { font-size: clamp(26px, 4.5vw, 34px); margin: 0 0 4px; color: var(--blu); }
.sottotitolo { color: var(--tenue); margin: 0 0 28px; }

/* Tutela */
.tutela { background: var(--fondo-chiaro); border-top: 6px solid var(--rosso); }
.tutela-scheda { background: #fff; border: 1px solid var(--bordo); border-left: 6px solid var(--blu); border-radius: var(--raggio); padding: 24px; }
.tutela-scheda h3 { margin: 0 0 6px; color: var(--blu); font-size: 22px; }
.tutela-scheda .stato { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 3px 10px; border-radius: 999px; background: #fff1d6; color: #7a4b00; margin-bottom: 10px; }
.tutela-scheda .stato.attivo { background: #def5e5; color: #11602e; }
.tutela-scheda dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 16px 0; }
.tutela-scheda dt { font-weight: 700; color: var(--tenue); }
.tutela-scheda dd { margin: 0; }
.documenti { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.documenti a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--bordo); border-radius: 10px; text-decoration: none; font-weight: 600; }
.documenti a::before { content: "PDF"; font-size: 11px; font-weight: 800; background: var(--rosso); color: #fff; padding: 2px 6px; border-radius: 4px; }
.documenti a:hover { background: var(--fondo-chiaro); }
.segnala { margin-top: 20px; padding: 14px 16px; background: #fff5f5; border-radius: 10px; color: #6a1a1f; }

/* Categorie */
.categorie { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.categoria { border-radius: var(--raggio); padding: 20px; color: #fff; }
.categoria h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.25; }
.categoria p { margin: 0; opacity: .92; }
.c-rosa { background: var(--rosa); }
.c-blu { background: #2563c9; }
.c-giallo { background: #f2b705; color: #2b2100; }
.c-rosso { background: var(--rosso); }
.nota { margin-top: 24px; font-size: 18px; }

/* Notizie */
.notizie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.notizia { background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; display: flex; flex-direction: column; }
.notizia img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: var(--fondo-chiaro); }
.notizia .corpo { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.notizia time { font-size: 13px; color: var(--tenue); font-weight: 600; }
.notizia p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.notizia .fonte { margin-top: auto; font-weight: 700; font-size: 15px; }
.vuoto { color: var(--tenue); }
.social-link { margin-top: 24px; display: flex; gap: 16px; flex-wrap: wrap; }
.social-link a { font-weight: 700; }

/* Contatti */
.contatti dl { margin: 16px 0 0; }
.contatti dt { font-weight: 700; color: var(--tenue); margin-top: 14px; font-size: 15px; }
.contatti dd { margin: 2px 0 0; font-size: 18px; }

/* Piede */
.piede { background: var(--blu-scuro); color: #d9d7ee; padding: 28px 0; font-size: 15px; }
.piede p { margin: 4px 0; }
.piede a { color: #fff; }

/* Pagina privacy */
.pagina { padding: 40px 0 56px; }
.pagina h1 { color: var(--blu); }
.pagina h2 { color: var(--blu); font-size: 21px; margin-top: 28px; }

@media (max-width: 900px) {
  .categorie { grid-template-columns: repeat(2, 1fr); }
  .notizie { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .testata .riga { padding-top: 8px; padding-bottom: 8px; }
  .testata nav a { padding: 6px 8px; font-size: 14px; }
  .eroe { padding: 36px 0 44px; }
  .eroe-riga { grid-template-columns: 1fr; }
  .stemma { width: 180px; grid-row: 1; justify-self: start; }
  .categorie, .notizie { grid-template-columns: 1fr; }
  .tutela-scheda dl { grid-template-columns: 1fr; gap: 2px; }
  .tutela-scheda dd { margin-bottom: 8px; }
  .sezione { padding: 44px 0; }
}