/* =====================================================================================================
   ODM SIC — foglio del sito (direzione A «Registro», D17). Si carica dopo base.css.
   Riferimento esterno: GOV.UK Design System (rigore, elenchi di documenti, procedure a passi), reso coi tre
   pallini del logo. Motivi del kit dichiarati al checkpoint: aloni radiali sui fondi, schede che si sollevano.
   Palette: blu #0847B1, rosso #FF3036, giallo #FDBD5B (misurati sul logo), inchiostro #0E2350.
   ===================================================================================================== */
:root {
  --blu: #0847B1; --blu-600: #0A54CF; --blu-800: #062F7A; --notte: #071634; --notte-2: #040C22;
  --blu-rgb: 8 71 177; --rosso: #FF3036; --rosso-rgb: 255 48 54; --rosso-testo: #C8102E; --giallo: #FDBD5B; --giallo-rgb: 253 189 91;
  --ink: #0E2350; --ink-rgb: 14 35 80; --testo: #253049; --attenuato: #4F5B75; --filetto: #D5DEEC; --filetto-2: #E6ECF5;
  /* iterazione 3 — SETTE inchiostri e QUATTRO ombre, a sistema. Sul chiaro: --ink (titoli, etichette), --testo (corpo),
     --attenuato (date, briciole, note), --blu (collegamenti), --rosso-testo (occhielli, ruoli). Sullo scuro: #fff
     (titoli, collegamenti) e --su-scuro (corpo). Ombre: scheda, foto, pulsante, e il filetto della testata. */
  --su-scuro: #D9E2F2;
  --ombra-scheda: 0 22px 40px -30px rgb(var(--ink-rgb) / .5);
  --ombra-foto: 0 40px 70px -40px rgb(var(--ink-rgb) / .55);
  --ombra-pulsante: 0 14px 28px -16px rgb(var(--ink-rgb) / .45);
  --carta: #FBFAF6; --carta-2: #F3F1EA; --bruma: #EEF3FB; --bruma-2: #E3EBF7;
  --titoli: "Newsreader", Georgia, serif; --corpo: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* iterazione 2 — UN solo ritmo verticale: il primo contenuto di ogni banda sta a --section-y dal suo bordo (bande
     compatte blu notte: --section-y-s, tre quarti). Nelle bande a schede è il CONTENUTO della scheda a cadere sul ritmo,
     non la scatola: la banda toglie dal suo margine l'imbottitura della scheda (allineamento ottico). */
  --section-y: clamp(64px, 6.5vw, 112px); --section-y-s: calc(var(--section-y) * .75);
  --x-pilastro-pad: 2rem; --x-tessera-pad: clamp(28px, 3.4vw, 52px);
  --r-sm: 6px; --r-md: 14px; --r-lg: 22px; --taglio: 26px;
  --x-container: 1240px; --x-gutter: clamp(16px, 4vw, 48px);
  /* base: fuoco, firma su piè scuro, flottanti, menu a tutto schermo */
  --x-focus: #0A54CF;
  --x-firma-fg: var(--su-scuro); --x-firma-link: #fff; --x-firma-link-hover: #FFFFFF; --x-firma-line: rgba(255, 255, 255, .14); --x-firma-disk: #FFFFFF;
  --x-float-bg: #0E2350; --x-float-fg: #FFFFFF; --x-float-ring: rgba(255, 255, 255, .28);
  --x-overlay-bg: #FFFFFF; --x-overlay-fg: #0E2350; --x-overlay-line: #E6ECF5;
  --x-skip-bg: #0E2350;
}

/* ---------------------------------------------------------------- reset di base
   r2 (owner 28/10, Contatti a 1637: «Qui vanno riallineati, è messo male il form»): il mockup approvato aveva
   border-box su tutto, il tema no. Senza, ogni campo con width:100% + padding + bordo usciva di 31 px dalla sua cella
   (e l'overlay del menu sbordava dal viewport): la causa era la mancanza di questo reset, non i singoli componenti. */
*, *::before, *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- base tipografica */
body { font-family: var(--corpo); color: var(--testo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
a { text-underline-offset: .2em; }
.x-wrap { width: min(100% - 2 * var(--x-gutter), var(--x-container)); margin-inline: auto; }
/* dentro i contenitori la distanza la decide il sito, non il blockGap del core */
.x-wrap > *, .x-band > *, .x-pghead > * { margin-block: 0; }
.wp-block-post-content > * { margin-block: 0; }
main .wp-block-heading { font-family: var(--titoli); font-weight: 500; color: var(--ink); line-height: 1.1; }
/* spaziatura del flusso: il core azzera i margini dei figli di .is-layout-flow con «:root :where(…) > *» (0,1,0) e il
   blockGap è 0 (theme.json); qui si rimettono, con una specificità più alta, per paragrafi, elenchi e titoli */
.wp-site-blocks main p, .wp-site-blocks main .wp-block-list { margin: 0 0 1em; }
.wp-site-blocks main .wp-block-heading { margin: 0 0 .5em; }
.wp-site-blocks main :where(p, .wp-block-list, .wp-block-heading):last-child { margin-bottom: 0; }
/* r2: i <p> del modulo (markup generato, non blocchi) non prendono lo spazio del flusso: con margin-bottom 1em sul
   primo campo e 0 sul secondo (:last-child) la cella di destra si allungava di 18 px, divisi fra etichetta e campo */
.wp-site-blocks .x-modulo p { margin: 0; }
.wp-site-blocks main .wp-block-list .wp-block-list { margin: .4em 0 .2em; }
main h2.wp-block-heading { font-size: clamp(2rem, 1.25rem + 2.1vw, 3.05rem); letter-spacing: -.01em; }
main h3.wp-block-heading { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.6rem); }
.x-lead { font-size: 1.22rem; line-height: 1.6; color: var(--testo); }
.x-eyebrow { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem !important; font-size: .82rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rosso-testo); }
.x-eyebrow::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--rosso); box-shadow: -16px 0 0 var(--blu); margin-left: 16px; }
.x-eyebrow--chiaro { color: var(--su-scuro); }
.x-eyebrow--chiaro::before { background: var(--giallo); box-shadow: -16px 0 0 #5B8CFF; }

/* ---------------------------------------------------------------- pulsanti e collegamenti */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.wp-block-button .wp-block-button__link { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .7rem 1.35rem; border-radius: var(--r-sm);
  background: var(--blu); color: #fff; font-weight: 600; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; border: 2px solid var(--blu);
  box-shadow: var(--ombra-pulsante); transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--ease); }
.wp-block-button .wp-block-button__link::after { content: ""; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--freccia) center / contain no-repeat; mask: var(--freccia) center / contain no-repeat; transition: transform .2s var(--ease); }
:root { --freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.wp-block-button .wp-block-button__link:hover { background: var(--blu-800); border-color: var(--blu-800); color: #fff; transform: translateY(-2px); }
.wp-block-button .wp-block-button__link:hover::after { transform: translateX(3px); }
.wp-block-button.is-style-x-vuoto .wp-block-button__link { background: transparent; color: var(--blu); box-shadow: none; }
.wp-block-button.is-style-x-vuoto .wp-block-button__link:hover { background: var(--blu); color: #fff; }
.wp-block-button.is-style-x-giallo .wp-block-button__link { background: var(--giallo); border-color: var(--giallo); color: var(--ink); box-shadow: var(--ombra-pulsante); }
.wp-block-button.is-style-x-giallo .wp-block-button__link:hover { background: #FFD088; border-color: #FFD088; color: var(--ink); }
.x-piu { margin: 0 !important; }
.x-piu a { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; text-decoration: none; color: var(--blu); }
.x-piu a::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid currentColor; transition: transform .25s var(--ease);
  background: currentColor; -webkit-mask: var(--freccia-tonda) center / 100% no-repeat; mask: var(--freccia-tonda) center / 100% no-repeat; }
:root { --freccia-tonda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='14' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M10 15h10M16 11l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.x-piu a:hover { text-decoration: underline; }
.x-piu a:hover::after { transform: translateX(4px); }
.x-piu--chiaro a { color: #fff; }

/* ---------------------------------------------------------------- testata
   La superficie sta sul wrapper sticky (header.wp-block-template-part): è lui che passa sopra al contenuto.
   Home (D29, iterazione 1): sopra il primo schermo scuro la testata è chiara di testo e trasparente; scorrendo,
   finché si è ancora sul blu, diventa un vetro blu notte; oltre il primo schermo torna quella di sempre (bianca).
   Senza JS (nessuna classe x-js) la testata della Home resta piena, blu notte: si legge su qualsiasi banda. */
.wp-site-blocks > header.wp-block-template-part { background: rgb(255 255 255 / .84); box-shadow: 0 1px 0 var(--filetto-2);
  /* iterazione 7: la testata è un vetro chiaro, il contenuto le passa dietro sfocato */
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  transition: background-color .35s var(--ease), box-shadow .35s, -webkit-backdrop-filter .35s, backdrop-filter .35s; }
.is-scrolled .wp-site-blocks > header.wp-block-template-part { box-shadow: 0 1px 0 var(--filetto-2), 0 16px 30px -24px rgb(var(--ink-rgb) / .35); }
.x-hd { background: transparent; }
.x-hd .x-brand a { display: block; position: relative; }
.x-hd .x-brand .x-brand__chiaro { position: absolute; inset: 0; opacity: 0; transition: opacity .35s; }
.x-hd .x-brand img:first-child { transition: opacity .35s; }
/* testata scura (solo Home, finché si è sul primo schermo) */
html:not(.x-hd-chiaro) .home .wp-site-blocks > header.wp-block-template-part { background: #0A2462; box-shadow: none; }
html.x-js:not(.x-hd-chiaro) .home .wp-site-blocks > header.wp-block-template-part { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.x-js.is-scrolled:not(.x-hd-chiaro) .home .wp-site-blocks > header.wp-block-template-part { background: rgb(7 26 72 / .74);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgb(255 255 255 / .08), 0 18px 40px -26px rgb(0 0 0 / .6); }
html:not(.x-hd-chiaro) .home .x-hd .x-brand img:first-child { opacity: 0; }
html:not(.x-hd-chiaro) .home .x-hd .x-brand .x-brand__chiaro { opacity: 1; }
html:not(.x-hd-chiaro) .home .x-hd .x-nav .wp-block-navigation-item__content { color: #fff; }
html:not(.x-hd-chiaro) .home .x-hd .x-nav .wp-block-navigation-item__content::after { background: var(--giallo); }
html:not(.x-hd-chiaro) .home .x-hd .x-hd__cta .wp-block-button__link { background: var(--giallo); border-color: var(--giallo); color: var(--ink); box-shadow: var(--ombra-pulsante); }
html:not(.x-hd-chiaro) .home .x-hd .x-hd__cta .wp-block-button__link:hover { background: #FFD088; border-color: #FFD088; }
html:not(.x-hd-chiaro) .home .x-hd .wp-block-navigation__responsive-container-open { color: #fff; border-color: rgb(255 255 255 / .4); }
.x-hd .x-nav .wp-block-navigation-item__content, .x-hd .wp-block-navigation__responsive-container-open { transition: color .35s, border-color .35s; }
/* il menu a tutto schermo resta chiaro anche dalla Home scura */
html .home .x-hd .x-nav .is-menu-open .wp-block-navigation-item__content { color: var(--ink); }
.x-hd__in { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); min-height: 92px; }
.x-hd .x-brand { margin: 0; flex: none; }
.x-hd .x-brand img { display: block; height: 58px; width: auto; }
.x-hd .x-nav { margin-left: auto; }
.x-hd .x-nav .wp-block-navigation__container { gap: clamp(1rem, 1.6vw, 1.9rem); }
.x-hd .x-nav .wp-block-navigation-item__content { position: relative; font-weight: 600; font-size: 1rem; color: var(--ink); padding: .4rem 0; text-decoration: none; white-space: nowrap; }
.x-hd .x-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--blu); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.x-hd .x-nav .wp-block-navigation-item__content:hover::after, .x-hd .x-nav .wp-block-navigation-item__content[aria-current="page"]::after { transform: scaleX(1); }
.x-hd__azioni { flex: none; }
.x-hd__cta .wp-block-button__link { min-height: 44px; padding: .55rem 1.1rem; font-size: .98rem; }
/* menu a tutto schermo: punto di rottura misurato (sotto 1180 px la riga non ci sta col pulsante) */
.x-hd .wp-block-navigation__responsive-container-open { width: 46px; height: 46px; border: 1.5px solid var(--filetto); border-radius: 10px; justify-content: center; align-items: center; color: var(--ink); }
.x-hd .wp-block-navigation__responsive-container-close { color: var(--ink); }
.x-nav .is-menu-open .wp-block-navigation-item__content { font-family: var(--titoli); font-size: 1.6rem !important; font-weight: 500; color: var(--ink); }
.x-nav .is-menu-open .wp-block-navigation-item__content::after { display: none; }
@media (max-width: 1239px) { .x-hd .x-nav .wp-block-navigation__container { gap: 1.1rem; } }
@media (max-width: 1179px) {
  .x-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
  .x-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
@media (min-width: 1180px) and (max-width: 1239px) {
  .x-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none !important; }
  .x-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: block !important; }
}
@media (max-width: 1179px) { .wp-site-blocks .x-hd .x-hd__azioni { margin-left: auto; } .wp-site-blocks .x-hd .x-nav { order: 3; margin-left: 0; } }
@media (max-width: 600px) {
  .x-hd__in { min-height: 72px; gap: .8rem; }
  .x-hd .x-brand img { height: 46px; }
  .wp-site-blocks .x-hd .x-hd__azioni { display: none; }
  .wp-site-blocks .x-hd .x-nav { margin-left: auto; }
}

/* ---------------------------------------------------------------- bande */
.x-band { position: relative; isolation: isolate; padding-block: var(--section-y); }
.x-band--bianca { background:
  radial-gradient(40% 55% at 100% 0%, rgb(var(--blu-rgb) / .06), transparent 70%),
  radial-gradient(36% 50% at 0% 100%, rgb(var(--giallo-rgb) / .10), transparent 70%),
  linear-gradient(180deg, #fff, #FBFAF7); }
.x-band--carta { background:
  radial-gradient(42% 60% at 100% 0%, rgb(var(--giallo-rgb) / .16), transparent 70%),
  radial-gradient(40% 55% at 0% 100%, rgb(var(--blu-rgb) / .08), transparent 70%),
  linear-gradient(180deg, var(--carta), var(--carta-2)); }
.x-band--bruma { background:
  radial-gradient(45% 60% at 0% 0%, rgb(var(--blu-rgb) / .10), transparent 70%),
  radial-gradient(38% 55% at 100% 100%, rgb(var(--giallo-rgb) / .14), transparent 70%),
  linear-gradient(180deg, var(--bruma), var(--bruma-2)); }
.x-band--deep { color: var(--su-scuro); background:
  radial-gradient(48% 70% at 88% 12%, rgb(var(--blu-rgb) / .55), transparent 70%),
  radial-gradient(36% 60% at 4% 100%, rgb(var(--rosso-rgb) / .16), transparent 70%),
  linear-gradient(160deg, #0B2A6E 0%, #08204F 55%, #061535 100%); }
.x-band--deep .wp-block-heading { color: #fff; }

/* ---------------------------------------------------------------- primo schermo della Home */
.x-hero { position: relative; overflow: clip; isolation: isolate; padding-block: clamp(40px, 5vw, 80px) clamp(48px, 6vw, 96px); background:
  radial-gradient(45% 70% at 92% 8%, rgb(var(--blu-rgb) / .12), transparent 70%),
  radial-gradient(40% 60% at 0% 100%, rgb(var(--giallo-rgb) / .20), transparent 70%),
  linear-gradient(180deg, #FBFAF6, #F2F5FA); }
/* il foglio a righe del registro, appena accennato e mai dietro al testo */
.x-hero::before { content: ""; position: absolute; inset: 0 0 0 52%; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgb(var(--blu-rgb) / .06) 33px 34px);
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%); mask: linear-gradient(90deg, transparent, #000 30%); }
.x-hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: clamp(24px, 4vw, 64px); }
.x-hero__txt::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; margin: 0 0 1.4rem 23px; background: var(--rosso); box-shadow: -23px 0 0 var(--blu), 23px 0 0 var(--giallo); }
.x-hero h1.wp-block-heading { font-size: clamp(1.95rem, 1.1rem + 2.6vw, 3.25rem); line-height: 1.08; letter-spacing: -.012em; margin: 0; }
/* iterazione 8 — il titolo della Home è il manifesto: a scala di poster (fino a 69 px), interlinea e crenatura strette,
   il nome dell'organismo regge il primo schermo insieme alle sfere. Le testate delle pagine crescono in proporzione. */
main .x-hero--scuro h1.wp-block-heading { font-size: clamp(2.15rem, .9rem + 3.8vw, 4.3rem); line-height: 1.02; letter-spacing: -.022em; }
.x-hero__btns { margin-top: 2rem !important; }
.x-hero__art .wp-block-image { margin: 0; }
/* r2 (verifica r1, foto.taglio): la grafica sta tutta nella sua cornice a ogni larghezza, niente più uscite oltre la colonna */
.x-hero__art img { width: 100%; height: auto; display: block; }
.x-grafica img, picture.x-anim img { display: block; }

/* ---------------------------------------------------------------- primo schermo scuro (D29, iterazione 1)
   La direzione B sul blu profondo: tre sfere nei colori del marchio, anelli, onde, globo a puntini, orbite e particelle
   (assets/img/g-orbite*.svg, in linea: functions.php). Il resto del sito resta A «Registro», chiaro.
   Con JS la testata trasparente sta SOPRA il primo schermo: il blu sale fino in cima (--x-sovra). */
:root { --x-hd-h0: 92px; --x-sovra: 0px; }
html.x-js .home { --x-sovra: 100px; }
/* il core azzera il margine del primo figlio del flusso con «body .is-layout-flow > :first-child» (0,2,1): qui più forte */
html .wp-site-blocks main .x-hero.x-hero--scuro { margin-top: calc(-1 * var(--x-sovra)); }
.x-hero--scuro { color: var(--su-scuro); display: grid; align-items: center;
  min-height: calc(min(100svh, 1000px) - var(--x-hd-h0) + var(--x-sovra));
  padding-block: calc(var(--x-sovra) + clamp(24px, 3vw, 48px)) clamp(48px, 5vw, 80px); background:
  radial-gradient(48% 70% at 78% 42%, rgb(var(--blu-rgb) / .55), transparent 70%),
  radial-gradient(34% 50% at 0% 100%, rgb(var(--rosso-rgb) / .14), transparent 70%),
  radial-gradient(30% 40% at 30% 0%, rgb(var(--giallo-rgb) / .10), transparent 70%),
  linear-gradient(165deg, #0A2462 0%, #071A48 50%, #050F2C 100%); }
.x-hero--scuro::before { display: none; }
.x-hero--scuro .x-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 2.8vw, 40px); }
main .x-hero--scuro h1.wp-block-heading { color: #fff; }
.x-hero--scuro .x-hero__txt::before { box-shadow: -23px 0 0 #3E7BFF, 23px 0 0 var(--giallo); }
.x-hero--scuro .wp-block-button.is-style-x-vuoto .wp-block-button__link { color: #fff; border-color: rgb(255 255 255 / .55); background: transparent; }
.x-hero--scuro .wp-block-button.is-style-x-vuoto .wp-block-button__link:hover { border-color: #fff; background: rgb(255 255 255 / .1); color: #fff; }
.x-hero__orbite { margin: 0; }
.x-orbite { position: relative; }
.x-orbite svg { display: block; width: 100%; height: auto; }
.x-orbite .xo-om { display: none; }
/* fuori dallo schermo o con la scheda nascosta (assets/js/site.js) l'animazione si ferma */
.x-orbite.is-pausa svg * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .x-orbite svg * { animation: none !important; } }

/* ---------------------------------------------------------------- foto in cornice: l'angolo tagliato è il foglio dell'atto */
.x-foto { margin: 0; position: relative; }
.x-foto img { display: block; width: 100%; height: auto; border-radius: var(--r-md); box-shadow: var(--ombra-foto); }
.x-foto--taglio img { clip-path: polygon(0 0, calc(100% - var(--taglio) * 2) 0, 100% calc(var(--taglio) * 2), 100% 100%, 0 100%); border-radius: var(--r-md) 0 var(--r-md) var(--r-md); }
.x-foto--taglio::after { content: ""; position: absolute; top: 0; right: 0; width: calc(var(--taglio) * 2); height: calc(var(--taglio) * 2); pointer-events: none;
  background: linear-gradient(225deg, transparent 50%, var(--bruma-2) 50%); border-radius: 0 0 0 10px; filter: drop-shadow(-6px 8px 10px rgb(var(--ink-rgb) / .18)); }

/* ---------------------------------------------------------------- Cos'è l'OdM */
.x-cose__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.x-cose__grid .x-foto img { aspect-ratio: 3 / 2; object-fit: cover; }
.x-stamp { position: relative; display: flex; align-items: center; min-height: 86px; margin: 1.6rem 0 0 !important; padding: 1rem 1.2rem 1rem 86px; border-radius: var(--r-md); background: var(--bruma); border: 1px solid var(--filetto-2); font-weight: 600; color: var(--ink); }
/* il sigillo dei tre pallini, disegnato dal CSS (nessun contenuto) */
.x-stamp::before { content: ""; position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle 4.5px at 17px 27px, #fff 98%, transparent), radial-gradient(circle 4.5px at 17px 27px, var(--blu) 3.8px, transparent 4px),
    radial-gradient(circle 4.5px at 27px 27px, var(--rosso) 98%, transparent), radial-gradient(circle 4.5px at 37px 27px, var(--giallo) 98%, transparent), var(--ink);
  box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6.5px rgb(255 255 255 / .45); }

/* ---------------------------------------------------------------- le tre funzioni */
.x-pilastri { padding-block: calc(var(--section-y) - var(--x-pilastro-pad)); }
.x-pilastri__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.x-pilastro { position: relative; overflow: hidden; isolation: isolate; padding: var(--x-pilastro-pad) 1.8rem var(--x-pilastro-pad); border-radius: var(--r-lg); background: #fff; color: var(--testo); box-shadow: var(--ombra-scheda); transition: transform .3s var(--ease); }
.x-pilastro::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--c, var(--blu)); }
.x-pilastro::after { content: ""; position: absolute; z-index: -1; right: -30%; bottom: -60%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(var(--crgb, var(--blu-rgb)) / .14), transparent 65%); transition: transform .6s var(--ease); }
.x-pilastro:hover { transform: translateY(-4px); } .x-pilastro:hover::after { transform: scale(1.3); }
.x-pilastro .x-pilastro__ico { margin: 0 0 1.1rem; } .x-pilastro .x-pilastro__ico img { width: 56px; height: 56px; display: block; }
.x-band--deep .x-pilastro h3.wp-block-heading { color: var(--ink); font-size: 1.55rem; margin-bottom: .45rem; }
.x-pilastro p { margin: 0; }
.x-pilastro--rosso { --c: var(--rosso); --crgb: var(--rosso-rgb); } .x-pilastro--giallo { --c: var(--giallo); --crgb: var(--giallo-rgb); }

/* ---------------------------------------------------------------- Cosa facciamo: il registro */
.x-cosa__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.x-registro { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 48px); border-top: 1px solid var(--filetto); }
.x-registro li { position: relative; margin: 0; padding: 1.05rem 0 1.05rem 2rem; border-bottom: 1px solid var(--filetto); font-weight: 600; color: var(--ink); line-height: 1.45; }
.x-registro li::before { content: ""; position: absolute; left: 2px; top: 1.45rem; width: 11px; height: 11px; border-radius: 50%; background: var(--blu); box-shadow: 0 0 0 5px rgb(var(--blu-rgb) / .12); }
.x-registro li:nth-child(3n+2)::before { background: var(--rosso); box-shadow: 0 0 0 5px rgb(var(--rosso-rgb) / .12); }
.x-registro li:nth-child(3n)::before { background: var(--giallo); box-shadow: 0 0 0 5px rgb(var(--giallo-rgb) / .2); }

/* ---------------------------------------------------------------- aderenti */
.x-aderenti { padding-block: var(--section-y-s); background:
  radial-gradient(40% 90% at 100% 0%, rgb(var(--blu-rgb) / .5), transparent 70%),
  radial-gradient(30% 80% at 0% 100%, rgb(var(--giallo-rgb) / .12), transparent 70%),
  linear-gradient(170deg, #0A2462, #061535); }
.x-band--deep h2.x-aderenti__t { text-align: center; margin-bottom: 1.6rem; font-family: var(--corpo); font-weight: 700; font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; color: var(--su-scuro); }
.x-loghi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.x-logo { display: grid; place-items: center; height: 128px; padding: 22px 28px; border-radius: var(--r-md); background: #fff; box-shadow: var(--ombra-scheda); transition: transform .3s var(--ease); }
.x-logo:hover { transform: translateY(-3px); }
.x-logo .wp-block-image { margin: 0; display: grid; place-items: center; width: 100%; height: 100%; }
.x-logo img { max-height: 64px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }

/* ---------------------------------------------------------------- elenchi di documenti */
.x-provv__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.x-provv__foto img { aspect-ratio: 4 / 4.4; object-fit: cover; }
.x-docs { display: grid; gap: 10px; margin: 1.4rem 0 1.6rem; }
.x-doc { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3rem 1rem; padding: 1rem 1.2rem 1rem 1.1rem;
  background: #fff; border: 1px solid var(--filetto-2); border-radius: var(--r-sm); box-shadow: var(--ombra-scheda); transition: border-color .25s, transform .25s var(--ease); }
.x-doc > * { margin: 0 !important; }
.x-doc::before { content: ""; width: 30px; height: 36px; background:
  linear-gradient(var(--blu), var(--blu)) 6px 13px / 16px 2px no-repeat, linear-gradient(var(--blu), var(--blu)) 6px 19px / 16px 2px no-repeat,
  linear-gradient(rgb(var(--blu-rgb) / .5), rgb(var(--blu-rgb) / .5)) 6px 25px / 12px 2px no-repeat, var(--bruma);
  border: 1.5px solid var(--blu); border-radius: 3px; clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%); }
.x-doc::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%); transition: transform .9s var(--ease);
  background: linear-gradient(110deg, transparent 35%, rgb(var(--blu-rgb) / .08) 50%, transparent 65%); }
.x-doc:hover { border-color: rgb(var(--blu-rgb) / .45); transform: translateX(4px); }
.x-doc:hover::after { transform: translateX(110%); }
.x-doc:focus-within { outline: 3px solid var(--x-focus); outline-offset: 2px; }
main .x-doc h3.x-doc__t { grid-column: 2; font-family: var(--corpo); font-size: 1.16rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.x-doc__t a { color: var(--ink); text-decoration: none; }
.x-doc__t a::before { content: ""; position: absolute; inset: 0; z-index: 1; }   /* tutta la scheda è cliccabile */
.x-doc__t a:focus-visible { outline: none; }
.x-doc__data { grid-column: 3; font-size: .92rem; font-weight: 600; color: var(--attenuato); white-space: nowrap; font-variant-numeric: tabular-nums; }
.x-elenco__t { margin-top: 2.2rem !important; }
.x-elenco .x-wrap > .x-elenco__t:first-child { margin-top: 0 !important; }
.x-elenco h2.x-elenco__t { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
/* iterazione 5 — l'INDICE dei documenti (Normativa, Provvedimenti): come in un registro, a sinistra la categoria con
   il suo filetto, a destra le sue voci alla misura di lettura (titolo e data a portata d'occhio, non a 1.100 px).
   Solo CSS: i figli della banda (titolo, elenco, titolo, elenco) si appaiano per riga nella griglia. */
@media (min-width: 901px) {
  .x-elenco .x-wrap { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 88px); row-gap: clamp(44px, 4.5vw, 72px); align-items: start; }
  .wp-site-blocks .x-elenco .x-wrap > h2.x-elenco__t { margin: 0 !important; padding-top: 1rem; border-top: 2px solid var(--ink); }
  .x-elenco .x-wrap > .x-docs { margin: 0; }
  .x-elenco .x-doc { padding-block: 1.15rem; }
}

/* ---------------------------------------------------------------- Normativa + Reclami (Home) */
.x-duo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.x-duo { padding-block: calc(var(--section-y) - var(--x-tessera-pad)); }
.x-tessera { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); padding: var(--x-tessera-pad); display: flex; flex-direction: column; }
.x-tessera > * { margin-block: 0 1rem; }
main .x-tessera h2.wp-block-heading { font-size: clamp(1.9rem, 1.2rem + 1.7vw, 2.7rem); }
.x-tessera--norme { color: var(--su-scuro); background:
  radial-gradient(60% 60% at 100% 0%, rgb(var(--blu-rgb) / .6), transparent 70%),
  radial-gradient(50% 50% at 0% 100%, rgb(var(--giallo-rgb) / .14), transparent 70%),
  linear-gradient(160deg, #0B2A6E, #071A45); }
main .x-tessera--norme h2.wp-block-heading { color: #fff; }
.x-tessera__art { width: min(72%, 330px); align-self: flex-end; margin: 0 0 8px !important; }
.x-tessera__art img { width: 100%; height: auto; }
.x-tessera--reclami { background: linear-gradient(180deg, var(--carta), var(--carta-2)); border: 1px solid var(--filetto-2); }
.x-tessera__foto { margin-top: auto !important; padding-top: 1.4rem; margin-bottom: 0 !important; }
.x-tessera__foto img { aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 45%; }

/* ---------------------------------------------------------------- testata delle pagine interne */
.x-pghead { position: relative; overflow: clip; isolation: isolate; padding-block: clamp(40px, 4.5vw, 72px) clamp(36px, 4vw, 64px); background:
  radial-gradient(40% 80% at 100% 0%, rgb(var(--blu-rgb) / .10), transparent 70%),
  radial-gradient(30% 70% at 0% 100%, rgb(var(--giallo-rgb) / .16), transparent 70%),
  linear-gradient(180deg, #FBFAF6, #F2F5FA); }
.x-pghead::before { content: ""; position: absolute; inset: 0 0 0 45%; z-index: -1; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 33px, rgb(var(--blu-rgb) / .07) 33px 34px); -webkit-mask: linear-gradient(90deg, transparent, #000 40%); mask: linear-gradient(90deg, transparent, #000 40%); }
.x-pghead__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.x-pghead__grid > :only-child { grid-column: 1 / -1; }
.x-pghead__txt::after { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; margin: 1.4rem 0 0 20px; background: var(--rosso); box-shadow: -20px 0 0 var(--blu), 20px 0 0 var(--giallo); }
.x-pghead h1.wp-block-heading { font-size: clamp(2.3rem, 1.2rem + 3vw, 4rem); line-height: 1.03; letter-spacing: -.018em; margin: .3rem 0 .5rem; }
.x-pghead__lead { font-size: 1.22rem; max-width: 46ch; margin: 0 !important; color: var(--testo); }
.x-crumbs { font-size: .92rem; color: var(--attenuato); margin: 0 !important; }
.x-crumbs a { color: var(--attenuato); }
.x-pghead__art { justify-self: end; width: min(100%, 420px); }
.x-pghead__art .wp-block-image { margin: 0; }
.x-pghead__art img { width: 100%; height: auto; display: block; }
.x-pghead__foto img { aspect-ratio: 1; object-fit: cover; }

/* ---------------------------------------------------------------- Chi siamo */
.x-organismo__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.x-organismo__txt p { max-width: 70ch; }
.x-organismo__lato { position: sticky; top: calc(var(--x-header-h) + 24px); }
.x-organismo__lato .x-foto img { aspect-ratio: 4 / 5; object-fit: cover; }
.x-membri__intro { max-width: 72ch; margin-bottom: 2rem !important; }
.x-membri__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.x-membro { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: center; padding: 1.3rem 1.4rem; border-radius: var(--r-md);
  background: #fff; border: 1px solid var(--filetto-2); box-shadow: var(--ombra-scheda); transition: transform .25s var(--ease), border-color .25s; }
.x-membro > * { margin: 0 !important; grid-column: 2; }
/* nessun ritratto finché il cliente non manda le foto: al loro posto il sigillo dei tre pallini, disegnato dal CSS */
.x-membro::before { content: ""; grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle 5px at 20px 32px, var(--blu) 98%, transparent), radial-gradient(circle 5px at 32px 32px, var(--rosso) 98%, transparent), radial-gradient(circle 5px at 44px 32px, var(--giallo) 98%, transparent), linear-gradient(160deg, #0B2A6E, #071634);
  box-shadow: inset 0 0 0 6px #0A2462, inset 0 0 0 7.5px rgb(255 255 255 / .4); }
.x-membro:hover { transform: translateY(-3px); border-color: rgb(var(--blu-rgb) / .45); }
.x-membro:focus-within { outline: 3px solid var(--x-focus); outline-offset: 2px; }
main .x-membro h3.x-membro__nome { font-size: 1.35rem; line-height: 1.2; }
.x-membro__nome a { color: var(--ink); text-decoration: none; }
.x-membro__nome a::before { content: ""; position: absolute; inset: 0; }
.x-membro__nome a:focus-visible { outline: none; }
.x-membro__ruolo { font-size: .95rem; font-weight: 600; color: var(--rosso-testo); }
.x-rendiconto__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.x-rendiconto__ico { margin: 0; } .x-rendiconto__ico img { width: 72px; height: 72px; display: block; }
.x-rendiconto__txt p { max-width: 72ch; }

/* ---------------------------------------------------------------- Reclami */
.x-reclamo__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.x-reclamo__grid .x-foto img { aspect-ratio: 3 / 2; object-fit: cover; }
/* iterazione 2: allineato in alto (ritmo), il testo del reclamo è la frase della pagina: si legge come un enunciato */
.x-reclamo__txt .x-lead { font-family: var(--titoli); font-size: clamp(1.3rem, 1rem + .85vw, 1.72rem); line-height: 1.38; color: var(--ink); margin-bottom: 1.6rem; }
.x-reclamo__txt .x-lead strong { font-weight: 600; }
.x-procedura__in > * { margin-block: 0; }
.x-procedura__art { margin: 1.4rem 0 2rem !important; max-width: 760px; }
.x-procedura__art img { width: 100%; height: auto; }
.x-passi { counter-reset: none; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.x-passi li { position: relative; margin: 0; padding: 1.2rem 1.1rem 1.3rem; border-radius: var(--r-md); background: #fff; border: 1px solid var(--filetto-2); box-shadow: var(--ombra-scheda); font-weight: 600; color: var(--ink); line-height: 1.45; }
.x-passi li::before { content: ""; display: block; width: 28px; height: 4px; border-radius: 2px; margin-bottom: .9rem; background: var(--blu); }
.x-passi li:last-child::before { background: var(--rosso); }

/* ---------------------------------------------------------------- Contatti */
.x-contatti__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.x-recapiti { position: sticky; top: calc(var(--x-header-h) + 24px); padding: 1.8rem; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--bruma), #fff); border: 1px solid var(--filetto-2); }
.wp-site-blocks .x-recapiti > * { margin: 0; }
main .x-recapiti h3.x-recapiti__et { margin: 1.1rem 0 .15rem; font-family: var(--corpo); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--attenuato); }
.x-recapiti__val { font-size: 1.12rem; font-weight: 600; color: var(--ink); }
.x-informativa { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--filetto); font-size: .9rem; color: var(--attenuato); }
.x-informativa__t { font-weight: 700; color: var(--ink); margin-bottom: .3rem !important; }
.x-modulo { margin: 1.4rem 0 0; }
.x-modulo__form { display: grid; gap: 1rem; }
.x-modulo__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
.x-modulo__field, .x-modulo__check { margin: 0; display: grid; gap: .35rem; }
.x-modulo__field label { font-weight: 600; color: var(--ink); font-size: .98rem; }
.x-modulo input[type=text], .x-modulo input[type=email], .x-modulo input[type=tel], .x-modulo textarea {
  width: 100%; font: inherit; padding: .75rem .9rem; border: 1.5px solid var(--filetto); border-radius: var(--r-sm); background: #F7F9FC; color: var(--testo); }
.x-modulo__check { grid-template-columns: auto 1fr; align-items: start; gap: .6rem; font-size: .95rem; }
.x-modulo__check input { margin: .2rem 0 0; width: 18px; height: 18px; }   /* r2: senza il margine sinistro del browser (4 px fuori filo) */
.x-modulo__actions .wp-element-button { min-height: 48px; padding: .7rem 1.35rem; border-radius: var(--r-sm); border: 2px dashed #8A93A6; background: #EEF1F6; color: var(--attenuato); font-weight: 600; font-size: 1.0625rem; cursor: not-allowed; }
/* r2: l'API condivisa apply/build-form-disabled.mjs scrive in linea «opacity:.55» sul pulsante spento, che con questi
   colori scendeva sotto 4,5:1. Si batte solo con !important (stile in linea, file generato e non modificabile a mano):
   lo «spento» lo dicono il tratteggio, il cursore e l'avviso, non la trasparenza. Da riportare all'API. */
.x-modulo__actions .wp-element-button[disabled] { opacity: 1 !important; }
.x-modulo__avviso { margin: .4rem 0 0; padding: .9rem 1rem; border-radius: var(--r-sm); background: #FFF6E2; border: 1px solid #F1D49A; color: var(--ink); font-size: .98rem; }
.x-modulo__avviso a { color: var(--blu); font-weight: 600; }

/* ---------------------------------------------------------------- nuove adesioni */
.x-adesioni { padding-block: var(--section-y-s); }
.x-adesioni__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: center; }
.wp-site-blocks .x-adesioni__txt > * { margin: 0; }
main .x-adesioni h2.wp-block-heading { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); margin: .2rem 0 .5rem; }
.x-adesioni__txt p:last-child { max-width: 60ch; color: var(--su-scuro); }

/* ---------------------------------------------------------------- testi legali, schede e Notizie */
/* testi lunghi: il fondo resta chiaro ma respira, con una modulazione lenta di carta e bruma che si vede solo nei
   margini (la colonna del testo ha il suo velo bianco), così nessuna banda resta piatta per migliaia di pixel */
.x-legale, .x-scheda__corpo { background:
  radial-gradient(40% 600px at 100% 0%, rgb(var(--blu-rgb) / .07), transparent 70%),
  linear-gradient(180deg, #fff 0, var(--bruma) 600px, #fff 1200px, var(--carta) 1800px, #fff 2400px) 0 0 / 100% 2400px repeat-y; }
.x-legale__testo, .x-scheda__testo { position: relative; }
.x-legale__testo::before, .x-scheda--documento .x-scheda__testo::before { content: ""; position: absolute; z-index: -1; inset: -28px -36px; border-radius: var(--r-lg); background: rgb(255 255 255 / .86); box-shadow: var(--ombra-scheda); pointer-events: none; }
.x-band--deep .x-membri__intro p { color: var(--su-scuro); }
.x-band--deep .x-membri__intro strong { color: #fff; }
.x-legale__testo { max-width: 76ch; }
.x-legale__testo > * { margin-block: 0 1em; }
main .x-legale__testo h2.wp-block-heading { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.85rem); margin: 2.2rem 0 .6rem; }
main .x-legale__testo h3.wp-block-heading { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.45rem); margin: 1.8rem 0 .5rem; }
main .x-legale__testo h4.wp-block-heading { font-family: var(--corpo); font-size: 1.06rem; font-weight: 700; margin: 1.4rem 0 .4rem; }
main .x-legale__testo h3.x-art { line-height: 1.25; }
.x-legale__testo ul, .x-legale__testo ol { padding-left: 1.4rem; }
.x-legale__testo li { margin-bottom: .45rem; }
.x-legale__testo li::marker { color: var(--blu); font-weight: 700; }
main h2.x-sommario { font-family: var(--corpo) !important; font-size: .85rem !important; font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--attenuato) !important; margin: 0 0 1.2rem !important; }
.x-scheda__ente { font-size: .9rem; font-weight: 700; letter-spacing: .04em; color: var(--attenuato); margin-bottom: .4rem !important; }
.x-scheda__testo p { max-width: 72ch; }
.x-scheda__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(32px, 5vw, 80px); align-items: start; }
.x-scheda__grid .x-legale__testo { max-width: 82ch; }
.x-scheda__lato { position: sticky; top: calc(var(--x-header-h) + 32px); }
.x-scheda__lato .wp-block-image { margin: 0; } .x-scheda__lato img { width: 100%; height: auto; }
/* biografie: senza ritratto la sezione prende tutta la larghezza, il testo scorre su due colonne (regola 7) */
@media (min-width: 1000px) { .x-scheda--membro .x-scheda__testo { columns: 2; column-gap: clamp(40px, 4vw, 64px); } .x-scheda--membro .x-scheda__testo p { max-width: none; } }
.x-pghead--membro .x-pghead__txt { position: relative; padding-left: 108px; }
.x-pghead--membro .x-pghead__txt::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 88px; height: 88px; border-radius: 50%;
  background: radial-gradient(circle 7px at 26px 44px, var(--blu) 98%, transparent), radial-gradient(circle 7px at 44px 44px, var(--rosso) 98%, transparent), radial-gradient(circle 7px at 62px 44px, var(--giallo) 98%, transparent), linear-gradient(160deg, #0B2A6E, #071634);
  box-shadow: inset 0 0 0 7px #0A2462, inset 0 0 0 9px rgb(255 255 255 / .4); }
.x-pghead--membro .x-pghead__txt::after { display: none; }
.x-scarica { margin: 0 0 1.4rem; }
.x-scarica__link { margin: 0 !important; }
.x-scarica__link a { display: inline-flex; align-items: center; gap: .8rem; padding: .9rem 1.2rem; border-radius: var(--r-md); background: var(--bruma); border: 1px solid var(--filetto); color: var(--ink); font-weight: 700; text-decoration: none; line-height: 1.35; }
.x-scarica__link a::before { content: ""; flex: none; width: 26px; height: 32px; background: linear-gradient(var(--blu), var(--blu)) 5px 12px / 14px 2px no-repeat, linear-gradient(var(--blu), var(--blu)) 5px 18px / 14px 2px no-repeat, #fff; border: 1.5px solid var(--blu); border-radius: 3px; clip-path: polygon(0 0, 68% 0, 100% 26%, 100% 100%, 0 100%); }
.x-scarica__link a:hover { border-color: var(--blu); text-decoration: underline; }
.x-altri .x-wrap > * { margin: 0; }
.x-altri__t { margin-bottom: 1.2rem !important; }
.x-altri .x-membri__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.x-mappa__elenco { font-size: 1.12rem; line-height: 1.6; }
@media (min-width: 1000px) { .x-mappa__elenco { columns: 2; column-gap: 64px; } .x-mappa__elenco > li { break-inside: avoid; } }
.x-mappa__elenco > li { margin-bottom: .5rem; font-weight: 600; }
.x-mappa__elenco ul { font-weight: 400; font-size: 1rem; margin-top: .3rem; }
.x-notizie__voci { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.x-notizie__voci > li { padding: 1.4rem; border-radius: var(--r-md); background: #fff; border: 1px solid var(--filetto-2); }
.x-vuoto { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 1.6rem; align-items: center; max-width: 760px; padding: 1.8rem; border-radius: var(--r-lg); background: linear-gradient(180deg, var(--bruma), #fff); border: 1px solid var(--filetto-2); }
.wp-site-blocks .x-vuoto > * { margin: 0; }
.x-vuoto__art img { width: 100%; height: auto; }
.x-vuoto__t { font-family: var(--titoli); font-size: 1.5rem; color: var(--ink); line-height: 1.25; }

/* ---------------------------------------------------------------- 404 */
.x-404 .x-pghead { min-height: 50vh; display: grid; align-items: center; }
.x-404 .x-pghead__txt > * { margin-block: 0 1rem; }

/* ---------------------------------------------------------------- piè */
.x-ft { color: var(--su-scuro); background: radial-gradient(40% 80% at 100% 0%, rgb(var(--blu-rgb) / .35), transparent 70%), linear-gradient(170deg, var(--notte), var(--notte-2)); }
.x-ft > * { margin-block: 0; }
.x-ft__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-block: 64px 48px; }
.x-ft__grid > * { margin: 0; }
.x-ft__logo { margin: 0; } .x-ft__logo img { width: 260px; height: auto; display: block; }
.x-ft h2.wp-block-heading { font-family: var(--corpo); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 1rem; }
.x-ft ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.x-ft li { margin: 0; }
.x-ft a { color: #fff; text-decoration: none; } .x-ft a:hover { text-decoration: underline; }
.x-firma__legal a { text-decoration: underline; }

/* ---------------------------------------------------------------- micro-interazioni con uno scopo (iterazione 6)
   Ogni collegamento dice «sono io, porto là» sotto il puntatore: nel testo il filetto (del colore del collegamento)
   prende l'accento del marchio e si ispessisce (rosso sul chiaro, giallo sullo scuro); nelle schede dei documenti e dei
   membri il titolo prende il blu e il filetto mentre la scheda si sposta. Il pulsante spento resta immobile.
   Batteria dopo la 6: un filetto a mezzo tono a riposo abbassava il contrasto misurato del testo del link (3,54 su
   Chi siamo a 390): a riposo il filetto resta pieno, il segnale lo dà l'accento. */
/* nessuna transizione sul COLORE del testo dei collegamenti: la misura del contrasto nasconde il testo mettendo il
   colore a «transparent» e fotografa 30 ms dopo; con una transizione il testo era ancora lì (3,54 e 1,01 su Chi siamo,
   3,7 su Contatti, batteria dopo la 6). Il cambio sotto il puntatore è immediato. */
main :where(p, li, span) > a:not(.wp-element-button) { text-decoration-thickness: 1px; }
main :where(p, li, span) > a:not(.wp-element-button):hover { text-decoration-color: var(--rosso); text-decoration-thickness: 2px; }
main .x-band--deep :where(p, li, span) > a:not(.wp-element-button):hover, main .x-tessera--norme :where(p, li, span) > a:not(.wp-element-button):hover { text-decoration-color: var(--giallo); }
.x-doc__t a, .x-membro__nome a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.x-doc:hover .x-doc__t a, .x-membro:hover .x-membro__nome a { color: var(--blu); text-decoration-color: color-mix(in srgb, var(--blu) 45%, transparent); }

/* ---------------------------------------------------------------- entrate in sequenza (iterazione 4)
   Le parti di una banda (base.js, CFG.revealSito) salgono di 22 px una dopo l'altra: chi viene dopo nel testo entra
   dopo. Solo «translate» (mai l'opacità: nulla resta nascosto), solo col movimento consentito, solo sotto la piega. */
.x-rv:nth-child(2) { --x-rv-i: 1; } .x-rv:nth-child(3) { --x-rv-i: 2; } .x-rv:nth-child(4) { --x-rv-i: 3; } .x-rv:nth-child(n+5) { --x-rv-i: 4; }
.x-rv { transition-duration: .8s; }

/* ---------------------------------------------------------------- finestra delle schede (D20, assets/js/site.js) */
.x-dlg { position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center; padding: clamp(12px, 4vh, 48px) var(--x-gutter); background: rgb(7 22 52 / .62); }
.x-dlg[hidden] { display: none; }
.x-dlg__box { position: relative; width: min(100%, 820px); max-height: 100%; overflow: auto; overscroll-behavior: contain; background: #fff; border-radius: var(--r-lg); box-shadow: 0 50px 100px -40px rgb(0 0 0 / .7); }
.x-dlg__x { position: sticky; top: 14px; float: right; margin: 14px 14px 0 0; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--filetto); background: #fff; color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.x-dlg__head { padding: 1.8rem 4.5rem 1.4rem 2rem; border-bottom: 1px solid var(--filetto-2); background: radial-gradient(60% 120% at 100% 0%, rgb(var(--blu-rgb) / .10), transparent 70%), linear-gradient(180deg, #FBFAF6, #fff); }
.x-dlg__head > * { margin: 0; }
.x-dlg__kicker { font-weight: 700; font-size: .9rem; color: var(--rosso-testo); margin-bottom: .2rem !important; }
.x-dlg__t { font-family: var(--titoli); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.12; color: var(--ink); }
.x-dlg__body { padding: 1.6rem 2rem 2rem; }
.x-dlg__body > :last-child { margin-bottom: 0; }
.x-dlg__body h2, .x-dlg__body h3 { font-family: var(--titoli); font-weight: 500; color: var(--ink); line-height: 1.15; }
.x-dlg__body .x-sommario { font-family: var(--corpo); font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; color: var(--attenuato); }
.x-dlg__pagina { margin-top: 1.4rem; font-size: .95rem; }
html.x-dlg-aperta { overflow: hidden; }
html.x-dlg-aperta .x-to-top { display: none; }

/* ---------------------------------------------------------------- «torna su» (D30, iterazione 1)
   Più presto (entro mezzo schermo: base.js, CFG) e più evidente: disco blu notte, freccia bianca e un anello che si
   riempie con la lettura nei tre colori del marchio (--x-letto da assets/js/site.js). Non copre mai link, pulsanti,
   campi né il testo del piè (site.js lo nasconde); a fine pagina ha il suo posto vuoto sotto la firma. */
:root { --x-top-size: 58px; --x-float-offset: 22px; }
.x-to-top { background: var(--ink); color: #fff; border: 0; box-shadow: 0 16px 34px -14px rgb(var(--ink-rgb) / .7), 0 0 0 2px rgb(255 255 255 / .85); }
.x-to-top svg { position: relative; z-index: 1; width: 24px; height: 24px; }
.x-to-top__anello { position: absolute; inset: 4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(#7FA6FF 0deg, #FF6B6F calc(var(--x-letto, 0) * 180deg), var(--giallo) calc(var(--x-letto, 0) * 360deg), rgb(255 255 255 / .22) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4.5px), #000 calc(100% - 4px)); }
.x-to-top:hover svg { translate: 0 -2px; }
.x-to-top svg { transition: translate .25s var(--ease); }
/* da 1180 px in su la freccia sta in basso a destra (a 1440 nel margine fuori dal contenuto) e a fine pagina ha il suo
   posto vuoto sotto la firma */
.x-firma { padding-bottom: calc(var(--x-top-size) + 2 * var(--x-float-offset)); }
/* sotto i 1180 px (menu a pulsante) la freccia entra nella TESTATA, nel suo posto accanto al pulsante del menu: sul
   telefono il testo corre fino al bordo e una freccia in basso coprirebbe di continuo i link del testo. Lì non copre
   niente, compare entro mezzo schermo e resta in vista (base.js: CFG.topAvoidMaxWidth 0, il controllo lo fa site.js) */
@media (max-width: 1179px) {
  :root { --x-top-size: 46px; }
  .x-to-top { top: calc(var(--wp-admin--admin-bar--height, 0px) + (var(--x-hd-h0) - var(--x-top-size)) / 2); bottom: auto;
    right: calc(max(var(--x-gutter), (100% - var(--x-container)) / 2) + 46px + 14px); box-shadow: 0 10px 24px -14px rgb(var(--ink-rgb) / .7), 0 0 0 2px rgb(255 255 255 / .85); }
  .x-to-top svg { width: 21px; height: 21px; }
  .wp-site-blocks .x-hd .x-hd__azioni { margin-right: calc(var(--x-top-size) + 14px); }
  .x-firma { padding-bottom: 0; }
}
@media (max-width: 600px) { .x-firma { padding-bottom: 0; } }
@media (prefers-reduced-motion: reduce) { .x-to-top svg { transition: none; } .x-to-top:hover svg { translate: none; } }

/* ---------------------------------------------------------------- telefono e tablet */
@media (max-width: 900px) {
  .x-hero__grid, .x-cose__grid, .x-cosa__grid, .x-provv__grid, .x-duo__grid, .x-pghead__grid, .x-organismo__grid, .x-reclamo__grid, .x-contatti__grid, .x-adesioni__grid { grid-template-columns: 1fr; }
  .x-pilastri__grid, .x-membri__grid, .x-altri .x-membri__grid { grid-template-columns: 1fr; }
  .x-registro { grid-template-columns: 1fr; }
  .x-loghi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .x-logo { height: 96px; padding: 16px 18px; }
  .x-hero__art { margin: 8px 0 0; }
  .x-hero::before { inset: 52% 0 0 0; }
  .x-hero--scuro .x-hero__grid { grid-template-columns: 1fr; }
  .x-hero--scuro .x-hero__art { width: min(100%, 560px); justify-self: center; }
  .x-provv__foto { order: -1; max-width: 420px; }
  .x-pghead__art { justify-self: start; width: min(100%, 340px); }
  .x-organismo__lato, .x-recapiti { position: static; }
  .x-scheda__grid { grid-template-columns: 1fr; }
  .x-scheda__lato { display: none; }
  .x-organismo__lato { max-width: 420px; }
  .x-passi { grid-template-columns: 1fr; }
  .x-ft__grid { grid-template-columns: 1fr 1fr; }
  .x-ft__brand { grid-column: 1 / -1; }
  .x-vuoto { grid-template-columns: 96px 1fr; }
}
@media (max-width: 600px) {
  :root { --taglio: 18px; }
  body { font-size: 1.0625rem; }
  .x-hero__btns .wp-block-button { flex: 1 1 100%; }
  .x-hero__btns .wp-block-button__link { width: 100%; justify-content: center; }
  /* telefono: la composizione è un'altra (il sistema in prospettiva) e viene PRIMA del titolo */
  :root { --x-hd-h0: 72px; }
  html.x-js .home { --x-sovra: 80px; }
  .x-hero--scuro { align-items: start; }
  .x-hero--scuro .x-hero__grid { gap: 8px; }
  .x-hero--scuro .x-hero__art { order: -1; width: 100%; margin: 0; }
  .x-orbite .xo-od { display: none; }
  .x-orbite .xo-om { display: block; }
  .x-doc { grid-template-columns: auto 1fr; }
  .x-doc::before { grid-row: 1 / span 2; }
  .x-doc__data { grid-column: 2; grid-row: auto; }
  .x-modulo__row { grid-template-columns: 1fr; }
  .x-ft__grid { grid-template-columns: 1fr; padding-block: 48px 32px; }
  .x-ft__logo img { width: 220px; }
  .x-tessera__art { width: 70%; }
  .x-pghead--membro .x-pghead__txt { padding-left: 0; padding-top: 104px; }
  .x-pghead--membro .x-pghead__txt::before { top: 0; translate: none; }
  .x-dlg__head { padding: 1.3rem 4rem 1.1rem 1.2rem; } .x-dlg__body { padding: 1.2rem; }
}
.x-nav .wp-block-navigation__responsive-container.is-menu-open { box-sizing: border-box; }
/* ---------------------------------------------------------------- UNA griglia sola (iterazione 9)
   Da 901 px in su ogni impaginato a due colonne sta sulla stessa griglia a 12 colonne: il testo nelle prime, immagini e
   colonne laterali dalla colonna 8 (una linea che attraversa la pagina: arte del primo schermo, foto di Provvedimenti,
   arte e foto di Chi siamo, foto di Reclami, recapiti, colonna laterale delle schede, pulsante delle adesioni), il
   registro con la categoria nelle colonne 1–3 e le voci dalla 5. Una colonna vuota fa da gronda dove serve aria. */
@media (min-width: 901px) {
  :root { --g12-gap: clamp(16px, 1.7vw, 24px); }
  .x-hero--scuro .x-hero__grid, .x-pghead__grid, .x-cose__grid, .x-cosa__grid, .x-provv__grid, .x-duo__grid, .x-organismo__grid,
  .x-reclamo__grid, .x-contatti__grid, .x-scheda__grid, .x-adesioni__grid, .x-elenco .x-wrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g12-gap); }
  .x-hero__txt { grid-column: 1 / 8; } .x-hero__art { grid-column: 8 / 13; }
  .x-pghead__txt { grid-column: 1 / 7; } .x-pghead__art { grid-column: 8 / 13; justify-self: start; }
  .x-cose__grid > :first-child { grid-column: 1 / 6; } .x-cose__txt { grid-column: 7 / 13; }
  .x-cosa__head { grid-column: 1 / 5; } .x-registro { grid-column: 6 / 13; }
  .x-provv__lista { grid-column: 1 / 7; } .x-provv__foto { grid-column: 8 / 13; }
  .x-duo__grid > :first-child { grid-column: 1 / 7; } .x-duo__grid > :last-child { grid-column: 7 / 13; }
  .x-organismo__txt { grid-column: 1 / 8; } .x-organismo__lato { grid-column: 8 / 13; max-width: none; }
  .x-reclamo__txt { grid-column: 1 / 7; } .x-reclamo__grid > figure { grid-column: 8 / 13; }
  .x-contatti__modulo { grid-column: 1 / 7; } .x-recapiti { grid-column: 8 / 13; }
  .x-scheda__grid > :first-child { grid-column: 1 / 7; } .x-scheda__lato { grid-column: 8 / 13; max-width: 320px; }
  .x-adesioni__txt { grid-column: 1 / 8; } .x-adesioni__grid > .wp-block-buttons { grid-column: 8 / 13; justify-self: start; }
  .x-elenco .x-wrap > h2.x-elenco__t { grid-column: 1 / 4; } .x-elenco .x-wrap > .x-docs { grid-column: 5 / 13; }
  /* la data nel registro è una colonna, allineata a sinistra come in un protocollo */
  .x-doc { grid-template-columns: auto minmax(0, 1fr) 9.5rem; } .x-doc__data { text-align: left; }
}
/* il disegno della tessera «Normativa» si allinea al suo titolo */
.x-tessera__art { align-self: flex-start; }
 /* base: 100dvh + padding sborda di ~116 px senza border-box (da riportare nella base) */