/* I caratteri (fonts.css) si collegano nella pagina, prima di questo file:
   con @import il browser li scopriva solo dopo aver scaricato app.css. */

/* =====================================================================
   Agorà 3.0 — sistema di design
   I colori nascono dal logo: il blu della scritta, l'arancio del
   campanile, il verde della cupola, l'oro del portale, il viola e
   l'azzurro della strada che porta all'ingresso.
   ===================================================================== */

:root {
  /* --- Palette --- */
  /* Blu elettrico, corallo, oro e ciano: la famiglia cromatica del
     template scelto, riportata anche sul logo. */
  --blue-600:  #003EA1;   /* primario: link, superfici piene */
  --blue-700:  #012D8E;
  --blue-800:  #012269;   /* superfici scure: footer, colonna admin */
  --blue-900:  #0B2A63;   /* titoli e testo forte */
  --blue-950:  #04173F;

  --coral:      #FC6C6B;  /* azione: bottoni, richiami */
  --coral-dark: #E24F4E;
  --coral-soft: #FFE7E6;

  --gold:       #E5B44D;
  --gold-soft:  #F7E3B4;

  --cyan:       #14CAF7;
  --sky:        #0281F1;

  --success:      #0FA37F;
  --success-dark: #0B7C60;

  /* --- Superfici --- */
  --bg:          #F6F8FD;
  --surface:     #FFFFFF;
  --surface-alt: #EAF0FB;
  --border:      #D5DEF0;
  --border-soft: #E7EDF8;

  /* --- Testo --- */
  --ink:        #14224A;
  --ink-soft:   #4A5878;
  --ink-muted:  #7C89A6;
  --ink-invert: #FFFFFF;

  /* --- Stati --- */
  --ok:        var(--success);
  --ok-bg:     #E2F6F1;
  --warn:      #A97A10;
  --warn-bg:   #FDF3DF;
  --danger:    #D93E3C;
  --danger-bg: #FFECEB;
  --info:      #003EA1;
  --info-bg:   #E4EDFC;

  /* --- Tipografia --- */
  /* Libre Bodoni per i titoli e Cabin per il testo, come nel template. */
  --font-sans:  'Cabin', ui-sans-serif, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-serif: 'Libre Bodoni', 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* --- Spazio e forma --- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(1, 34, 105, .07), 0 2px 6px rgba(1, 34, 105, .06);
  --shadow:    0 2px 6px rgba(1, 34, 105, .08), 0 12px 28px -12px rgba(1, 34, 105, .22);
  --shadow-lg: 0 8px 20px rgba(1, 34, 105, .12), 0 28px 60px -24px rgba(1, 34, 105, .32);

  --wrap:      1180px;
  --wrap-text: 720px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* =====================================================================
   Reset e basi
   ===================================================================== */

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

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1.075rem;
  line-height: 1.68;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5 {
  margin: 0 0 .6em;
  line-height: 1.15;
  color: var(--blue-900);
  text-wrap: balance;
}

/* I titoli grandi in Libre Bodoni, come nel template: il contrasto fra
   le aste sottili e quelle piene regge bene sul blu pieno dell'hero. */
h1, h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Dal terzo livello in giù si torna al sans: alle dimensioni piccole
   la Bodoni perde leggibilità. */
h3, h4, h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem); line-height: 1.08; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem); line-height: 1.12; }
h3 { font-size: clamp(1.2rem, 1.05rem + .7vw, 1.5rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue-600); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { color: var(--coral); }

ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; }
li + li { margin-top: .35em; }

strong, b { font-weight: 700; }
small { font-size: .8125rem; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

blockquote {
  margin: 1.8rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 4px solid var(--gold);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--ink-soft);
}

code, kbd {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .875em;
  background: var(--surface-alt);
  padding: .12em .4em;
  border-radius: 5px;
}

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--gold-soft); color: var(--blue-950); }

/* Salto al contenuto: obbligatorio per l'accessibilità da tastiera. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .9rem 1.4rem;
  background: var(--blue-900);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* =====================================================================
   Layout
   ===================================================================== */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
@media (max-width: 640px) {
  .wrap { width: min(100% - 1.75rem, var(--wrap)); }
}

.wrap-text { width: min(100% - 2.5rem, var(--wrap-text)); margin-inline: auto; }

.section { padding-block: clamp(3rem, 2rem + 5vw, 6rem); }
.section--tight { padding-block: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.section--alt { background: var(--surface-alt); }
.section--blue-900 { background: var(--blue-800); color: #E7EFFC; }
.section--blue-900 h2, .section--blue-900 h3 { color: #fff; }
.section--blue-900 a { color: var(--gold-soft); }

.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
/* Le griglie a 3 e a 4 non superano mai quel numero: con auto-fill, su uno
   schermo largo, ce ne stava una in più e le schede diventavano strette. */
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.stack > * + * { margin-top: 1.15rem; }
.stack-sm > * + * { margin-top: .6rem; }
.stack-lg > * + * { margin-top: 2rem; }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}

.split {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* =====================================================================
   Intestazione del sito
   ===================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blue-600);
  color: #fff;
}
/* Al primo scroll compare un filo più scuro: senza, l'intestazione
   si confonde con l'hero che ha lo stesso fondo. */
.site-header::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(255, 255, 255, .14);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: #fff;
  flex-shrink: 0;
}
.brand:hover { color: #fff; }
.brand__mark {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 11px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 1px 3px rgba(1, 23, 63, .22);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -.01em;
}
.brand__claim {
  font-size: .6875rem;
  font-weight: 600;
  color: #A9C2EC;
  letter-spacing: .02em;
}

.nav { display: flex; align-items: center; gap: .15rem; }

.nav__link {
  display: inline-block;
  padding: .5rem .75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9375rem;
  color: #D3E1F7;
  text-decoration: none;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.nav__link.is-active { color: #fff; background: rgba(255, 255, 255, .16); }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }

  /* L'intestazione resta agganciata anche sul telefono, ma piu' bassa:
     lo spazio verticale li' e' quello che conta. Scorrendo verso il basso
     si ritira (vedi app.js), risalendo torna: il menu e' a portata di
     pollice senza occupare lo schermo mentre si legge. */
  .site-header {
    position: sticky;
    transition: transform .28s var(--ease), box-shadow .25s var(--ease);
  }
  .site-header.is-hidden { transform: translateY(-100%); }
  .site-header__bar { min-height: 3.9rem; }

  /* Il menu e' sempre nel DOM: si apre con un movimento breve invece
     di apparire di colpo, e si chiude nello stesso modo. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .75rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    background: var(--blue-700);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 3.9rem);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-.6rem);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s linear .22s;
  }
  .nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s;
  }
  .nav__link {
    padding: .85rem .9rem;
    font-size: 1.05rem;
    border-radius: 10px;
  }
  .nav__link.is-active { box-shadow: inset 4px 0 0 var(--gold); }
  .nav .btn { margin-top: .6rem; justify-content: center; min-height: 48px; }

  /* Velo dietro il menu aperto: chiude al tocco e dice dove si e'. */
  .nav-veil {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(4, 23, 63, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), visibility 0s linear .22s;
  }
  body.nav-open .nav-veil { opacity: 1; visibility: visible; transition: opacity .22s var(--ease), visibility 0s; }
  body.nav-open { overflow: hidden; }
}

/* =====================================================================
   Bottoni
   ===================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .78rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .18s var(--ease),
              background .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(252, 108, 107, .55);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .8125rem;
}
.btn--primary:hover { background: var(--coral-dark); color: #fff; box-shadow: 0 8px 22px -6px rgba(252, 108, 107, .62); }

.btn--blue-900 { background: var(--blue-900); color: #fff; }
.btn--blue-900:hover { background: var(--blue-950); color: #fff; }

.btn--success { background: var(--success); color: #fff; }
.btn--success:hover { background: var(--success-dark); color: #fff; }

.btn--ghost { background: transparent; border-color: var(--border); color: var(--blue-900); }
.btn--ghost:hover { background: var(--surface); border-color: var(--blue-600); color: var(--blue-900); }

.btn--light { background: #fff; color: var(--blue-900); }
.btn--light:hover { background: var(--surface-alt); color: var(--blue-900); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { background: #B93230; color: #fff; }

.btn--sm { padding: .5rem .95rem; font-size: .8125rem; }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* =====================================================================
   Etichette e stati
   ===================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--surface-alt);
  color: var(--ink-soft);
  white-space: nowrap;
}
.tag--attivo   { background: var(--ok-bg);     color: var(--success-dark); }
.tag--novita   { background: var(--coral-soft);          color: var(--coral-dark); }
.tag--in_avvio { background: var(--info-bg);   color: var(--info); }
.tag--progetto { background: #E4F5FE;          color: var(--sky); }
.tag--warn     { background: var(--warn-bg);   color: var(--warn); }
.tag--danger   { background: var(--danger-bg); color: var(--danger); }
.tag--ok       { background: var(--ok-bg);     color: var(--success-dark); }
.tag--info     { background: var(--info-bg);   color: var(--info); }
.tag--neutral  { background: var(--surface-alt); color: var(--ink-muted); }

.tag--dot::before {
  content: '';
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: currentColor;
}

/* =====================================================================
   Card
   ===================================================================== */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--border);
}

.card__media {
  aspect-ratio: 16 / 10;
  background: var(--surface-alt);
  overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }

.card__body { padding: 1.4rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
/* Gli elementi in linea non devono stirarsi per tutta la colonna. */
.card__body > .tag,
.card__body > .cluster,
.card__body > .eyebrow,
.card__body > .amenities,
.card__body > .service-card__age { align-self: flex-start; }
.card__title { margin: 0; font-size: 1.2rem; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a:hover { color: var(--coral); }
.card__text { margin: 0; color: var(--ink-soft); font-size: .9375rem; }
.card__foot {
  margin-top: auto;
  padding-top: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--ink-muted);
}

/* Barra colorata che identifica il servizio, ripresa dal logo. */
.card--accent::before {
  z-index: 1;
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--accent, var(--blue-900));
}
.card--accent { padding-top: 5px; }

/* =====================================================================
   Hero
   ===================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--blue-600);
  color: #fff;
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
}
.hero h1, .hero h2, .hero h3 { color: #fff; }
.hero a:not(.btn) { color: var(--gold-soft); }

/* Forme piatte del template: cerchi, anelli, quadrati in diagonale e
   griglie di pallini. Sono decorative, quindi fuori dal flusso e
   invisibili alle tecnologie assistive. */
.hero__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__shapes > * { position: absolute; }

.shape-circle  { border-radius: 50%; }
.shape-ring    { border-radius: 50%; background: none; }
.shape-square  { border-radius: 2px; }
.shape-quarter { border-radius: 100% 0 0 0; }

.hero__blob {
  width: 26rem; height: 26rem;
  left: -13rem; bottom: -12rem;
  border-radius: 50%;
  background: var(--blue-700);
}
.hero__quarter {
  width: 11rem; height: 11rem;
  left: -3.5rem; bottom: -2rem;
  border-radius: 0 100% 0 0;
  background: var(--coral);
  opacity: .9;
}
.hero__ring {
  width: 8rem; height: 8rem;
  left: 40%; bottom: 3%;
  border-radius: 50%;
  border: 1.9rem solid var(--gold);
}
.hero__ring::after {
  content: '';
  position: absolute;
  inset: -1.9rem;
  border-radius: 50%;
  border: 1.6rem solid var(--coral);
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.hero__dots {
  top: 6%; left: 3%;
  display: grid;
  grid-template-columns: repeat(6, .55rem);
  gap: .85rem;
}
.hero__dots i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); display: block; }
.hero__dots i:nth-child(even) { opacity: .55; }

.hero__steps { right: 3%; bottom: 1.5rem; display: grid; gap: .35rem; }
.hero__steps i {
  width: 1.6rem; height: 1.6rem;
  background: var(--gold);
  display: block;
  border-radius: 2px;
}
.hero__steps i:nth-child(2) { margin-left: 1.95rem; }
.hero__steps i:nth-child(3) { margin-left: 3.9rem; }

.hero__band {
  top: 18%; right: 0;
  width: 9rem; height: 3.5rem;
  background: var(--cyan);
}

@media (max-width: 960px) {
  .hero__ring, .hero__steps, .hero__band { display: none; }
}
/* Su schermo stretto i pallini finiscono sotto l'etichetta e la rendono
   illeggibile: essendo decorativi, spariscono. */
@media (max-width: 700px) {
  .hero__dots { display: none; }
  .hero__quarter { width: 7rem; height: 7rem; opacity: .8; }
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .95rem .4rem .55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .25);
  font-size: .8125rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.4rem;
}
.hero__eyebrow .dot {
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(20, 202, 247, .25);
}

.hero__title { margin-bottom: .38em; }
/* Nel template la parola chiave del titolo è in corsivo Bodoni. */
.hero__title em { font-style: italic; color: var(--gold); }

.hero__lead {
  font-size: clamp(1.075rem, 1rem + .4vw, 1.28rem);
  color: #D6E2F8;
  max-width: 34em;
}

/* Riquadro immagine sfalsato, come nel template. */
.hero__art { position: relative; }
.hero__frame {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-alt);
  aspect-ratio: 4 / 3;
  box-shadow: 0 24px 60px -20px rgba(1, 23, 63, .6);
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; }
.hero__frame::before {
  content: '';
  position: absolute;
  top: -1.1rem; right: -1.1rem;
  width: 7rem; height: 3rem;
  background: var(--cyan);
  z-index: -1;
}
.hero__art::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -2.6rem;
  transform: translateX(-50%);
  width: 7rem; height: 1.4rem;
  background:
    linear-gradient(90deg,
      var(--sky) 0 1.4rem, transparent 1.4rem 2.8rem,
      var(--sky) 2.8rem 4.2rem, transparent 4.2rem 5.6rem,
      var(--sky) 5.6rem 7rem);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 1.4rem 1.4rem;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 4l12 12M16 4L4 16' stroke='%23000' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center / 1.4rem 1.4rem;
}
@media (max-width: 960px) { .hero__art::after { display: none; } }

/* Numeri chiave sotto l'hero */
.stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stat {
  position: relative;
  background: var(--surface);
  padding: 1.6rem 1.25rem;
  text-align: center;
}
.stat::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 2.5rem; height: 4px;
  background: var(--coral);
}
.stat:nth-child(2n)::after { background: var(--gold); }
.stat:nth-child(3n)::after { background: var(--cyan); }
.stat__value {
  display: block;
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--blue-900);
  letter-spacing: -.03em;
}
.stat__value span { font-size: .55em; color: var(--ink-muted); }
.stat__label {
  display: block;
  margin-top: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-muted);
  line-height: 1.35;
}

/* =====================================================================
   Titoli di sezione
   ===================================================================== */

.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: block;
  margin-bottom: .7rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral);
}
.section--blue-900 .eyebrow { color: var(--gold); }

.section-head p {
  font-size: 1.075rem;
  color: var(--ink-soft);
  margin-bottom: 0;
}
.section--blue-900 .section-head p { color: #BED0EE; }

/* =====================================================================
   Prosa (contenuti da editor)
   ===================================================================== */

.prose { font-size: 1.075rem; color: var(--ink-soft); }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { margin-top: 2.2em; font-size: 1.7rem; }
.prose h3 { margin-top: 1.8em; font-size: 1.3rem; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li::marker { color: var(--coral); font-weight: 700; }
.prose img { border-radius: var(--radius); margin-block: 1.8em; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose th, .prose td { padding: .7rem .8rem; border-bottom: 1px solid var(--border); text-align: left; }
.prose th { font-weight: 700; color: var(--blue-900); background: var(--surface-alt); }

.lead { font-size: 1.2rem; color: var(--ink-soft); }

/* =====================================================================
   Form
   ===================================================================== */

.form { display: grid; gap: 1.25rem; }
.form-row { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field__label { font-weight: 700; font-size: .9375rem; color: var(--blue-900); }
.field__label .req { color: var(--coral); }
.field__hint { font-size: .8125rem; color: var(--ink-muted); line-height: 1.45; }
.field__error {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--danger);
  display: flex;
  align-items: flex-start;
  gap: .35rem;
}

.input, .select, .textarea {
  width: 100%;
  padding: .72rem .9rem;
  font: inherit;
  font-size: .9875rem;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 3px rgba(0, 62, 161, .16);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: #FFFAFA;
}
.textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5878' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .9375rem;
  line-height: 1.5;
  cursor: pointer;
}
.check input {
  flex-shrink: 0;
  width: 1.15rem; height: 1.15rem;
  margin-top: .18rem;
  accent-color: var(--coral);
  cursor: pointer;
}

/* Scelta a pulsanti (importi, modalità di pagamento) */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
  gap: .6rem;
}
.choice { position: relative; }
.choice input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.choice__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .85rem .6rem;
  min-height: 3.4rem;
  text-align: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--ink-soft);
  transition: all .16s var(--ease);
}
.choice__box small { font-weight: 600; font-size: .7rem; color: var(--ink-muted); }
.choice input:hover + .choice__box { border-color: var(--blue-600); }
.choice input:checked + .choice__box {
  border-color: var(--coral);
  background: #FEF6F1;
  color: var(--coral-dark);
  box-shadow: 0 0 0 3px rgba(252, 108, 107, .18);
}
.choice input:focus-visible + .choice__box { outline: 3px solid var(--coral); outline-offset: 2px; }

.honeypot {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

fieldset { border: 0; padding: 0; margin: 0; }
legend {
  padding: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--blue-900);
  margin-bottom: .8rem;
}

/* =====================================================================
   Avvisi
   ===================================================================== */

.alert {
  display: flex;
  gap: .8rem;
  padding: 1rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: .9375rem;
  line-height: 1.55;
}
.alert__icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.4; }
.alert p:last-child { margin-bottom: 0; }
.alert--success { background: var(--ok-bg);     border-color: #B4E6D9; color: var(--success-dark); }
.alert--error   { background: var(--danger-bg); border-color: #FBC9C7; color: #A8302E; }
.alert--warning { background: var(--warn-bg);   border-color: #F0DCA9; color: #8A5C0A; }
.alert--info    { background: var(--info-bg);   border-color: #C2D6F5; color: var(--blue-800); }

.alert ul { margin: .4rem 0 0; padding-left: 1.2em; }

/* =====================================================================
   Barre di avanzamento
   ===================================================================== */

.meter {
  height: .55rem;
  background: var(--border-soft);
  border-radius: 999px;
  overflow: hidden;
}
.meter__fill {
  height: 100%;
  border-radius: 999px;
  background: var(--success);
  transition: width .6s var(--ease);
}
.meter--ottimo   .meter__fill { background: var(--success); }
.meter--buono    .meter__fill { background: var(--cyan); }
.meter--parziale .meter__fill { background: var(--gold); }
.meter--iniziale .meter__fill { background: var(--coral); }
.meter--neutro   .meter__fill { background: var(--ink-muted); }

/* =====================================================================
   Tabelle
   ===================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.table { width: 100%; border-collapse: collapse; font-size: .9125rem; }
.table th, .table td { padding: .8rem 1rem; text-align: left; vertical-align: middle; }
.table thead th {
  background: var(--surface-alt);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.table tbody tr + tr { border-top: 1px solid var(--border-soft); }
.table tbody tr:hover { background: #FAFCFF; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table a { font-weight: 600; }

/* =====================================================================
   Footer
   ===================================================================== */

.site-footer {
  background: var(--blue-800);
  color: #B2C6E9;
  padding-block: 3.5rem 2rem;
  font-size: .9125rem;
}
.site-footer h3 {
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.site-footer a { color: #D3E1F7; text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: .5rem; }

.footer-grid {
  display: grid;
  gap: 2.5rem;
  /* La prima colonna tiene marchio e newsletter: le serve una larghezza
     minima vera. Con minmax(0, …) le colonne auto-fit si prendevano tutto
     e la lasciavano a poche decine di pixel, una parola per riga. */
  grid-template-columns: minmax(15rem, 1.4fr) repeat(auto-fit, minmax(9rem, 1fr));
  padding-bottom: 2.5rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .8125rem;
  color: #8FA5D0;
}

/* =====================================================================
   Utilità
   ===================================================================== */

.muted { color: var(--ink-muted); }
.serif { font-family: var(--font-serif); }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }

.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  font-size: .8125rem;
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
  list-style: none;
  padding: 0;
}
.breadcrumb li + li::before { content: '›'; margin-right: .4rem; color: var(--border); }
.breadcrumb li { margin: 0; }
.breadcrumb a { color: var(--ink-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--coral); }

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-top: 2.5rem;
  list-style: none;
  padding: 0;
}
.pagination li { margin: 0; }
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 .7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 700;
  font-size: .875rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.pagination a:hover { border-color: var(--blue-600); color: var(--blue-900); }
.pagination .is-current { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }
.pagination .is-disabled { opacity: .4; pointer-events: none; }

.empty {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--ink-muted);
  background: var(--surface);
}
.empty h3 { color: var(--ink-soft); font-size: 1.1rem; }

@media print {
  .site-header, .site-footer, .btn, .nav-toggle, .no-print { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .card, .table-wrap { break-inside: avoid; border-color: #ccc; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #666; }
}

/* =====================================================================
   COMPONENTI DI PAGINA
   ===================================================================== */

/* ---- Testata di pagina interna -------------------------------------- */
.page-head {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 1.8rem + 3vw, 4.25rem) clamp(2rem, 1.4rem + 2vw, 3.25rem);
  background: var(--blue-600);
  color: #fff;
}
.page-head h1, .page-head h2 { color: #fff; }
.page-head__inner { position: relative; z-index: 1; max-width: 48rem; }
.page-head h1 { margin-bottom: .3em; }
.page-head p { font-size: 1.1rem; color: #D0DFF6; margin-bottom: 0; }
.page-head a:not(.btn) { color: var(--gold-soft); }
.page-head .breadcrumb, .page-head .breadcrumb a { color: #9EB6E0; }
.page-head .breadcrumb a:hover { color: var(--gold); }
.page-head .eyebrow { color: var(--gold); }

/* Decorazioni piatte, ridotte rispetto all'hero. */
.page-head__shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.page-head__shapes i { position: absolute; display: block; }
.page-head__shapes i:nth-child(1) {
  width: 15rem; height: 15rem; border-radius: 50%;
  right: -4rem; top: -6rem; background: var(--blue-700);
}
.page-head__shapes i:nth-child(2) {
  width: 5rem; height: 5rem; border-radius: 100% 0 0 0;
  right: 12%; bottom: -1rem; background: var(--coral); opacity: .9;
}
.page-head__shapes i:nth-child(3) {
  width: 2.6rem; height: 2.6rem; right: 26%; top: 22%; background: var(--gold);
}
@media (max-width: 760px) { .page-head__shapes i:nth-child(2), .page-head__shapes i:nth-child(3) { display: none; } }

.page-head--accent { border-top: 5px solid var(--accent, var(--blue-900)); }

/* ---- Griglia dei servizi -------------------------------------------- */
.service-card { position: relative; }
.service-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.service-card__age {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--accent, var(--blue-900));
}
.service-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  font-size: .8125rem;
  color: var(--ink-muted);
}
.service-card__meta span { display: inline-flex; align-items: center; gap: .3rem; }

/* Sequenza dei servizi come linea di vita 0 → 99 anni */
.lifeline {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding-left: 2.5rem;
}
.lifeline::before {
  content: '';
  position: absolute;
  left: .85rem;
  top: .6rem;
  bottom: .6rem;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    var(--gold) 0%, var(--coral) 22%, var(--cyan) 45%,
    var(--sky) 62%, var(--success) 80%, var(--sky) 100%);
}
.lifeline__item { position: relative; }
.lifeline__item::before {
  content: '';
  position: absolute;
  left: -2.06rem;
  top: 1.5rem;
  width: .9rem; height: .9rem;
  border-radius: 50%;
  background: var(--accent, var(--blue-900));
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 2px var(--accent, var(--blue-900));
}

/* ---- Calendario settimanale delle attività -------------------------- */
.week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (max-width: 900px) { .week { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .week { grid-template-columns: 1fr; } }

.week__day { background: var(--surface); padding: 1rem .85rem; min-height: 8rem; }
.week__name {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border-soft);
}
.week__event {
  display: block;
  padding: .5rem .6rem;
  margin-bottom: .4rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent, var(--blue-900));
  background: var(--surface-alt);
  font-size: .8125rem;
  line-height: 1.35;
  text-decoration: none;
  color: var(--ink);
  transition: background .15s var(--ease);
}
.week__event:hover { background: #DCE7F8; color: var(--blue-900); }
.week__event time { display: block; font-weight: 700; font-size: .75rem; color: var(--ink-muted); }
.week__empty { font-size: .8125rem; color: var(--ink-muted); font-style: italic; }

/* ---- Filtri --------------------------------------------------------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: flex-end;
  padding: 1.1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.filters .field { flex: 1 1 11rem; gap: .3rem; }
.filters .field__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); }
.filters .input, .filters .select { padding: .55rem .8rem; font-size: .9rem; }

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .95rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: .8375rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  transition: all .15s var(--ease);
}
.chip:hover { border-color: var(--blue-600); color: var(--blue-900); }
.chip.is-active { background: var(--blue-900); border-color: var(--blue-900); color: #fff; }

/* ---- Spazi ---------------------------------------------------------- */
.space-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  font-size: .8375rem;
  color: var(--ink-soft);
  padding: .8rem 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.space-card__specs b { color: var(--blue-900); font-weight: 700; }

.amenities { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.amenities li {
  margin: 0;
  padding: .25rem .65rem;
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Griglia degli slot orari */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: .45rem;
}
.slot {
  padding: .5rem .4rem;
  text-align: center;
  border-radius: var(--radius-sm);
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid transparent;
}
.slot--free { background: var(--ok-bg); color: var(--success-dark); border-color: #B4E6D9; }
.slot--busy { background: var(--surface-alt); color: var(--ink-muted); text-decoration: line-through; }

/* ---- Riepilogo prenotazione ----------------------------------------- */
.summary {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.summary dl { margin: 0; display: grid; gap: .85rem; }
.summary dt {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.summary dd { margin: .15rem 0 0; font-weight: 600; color: var(--ink); }

.status-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
}
.status-banner__icon {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .6);
  font-size: 1.4rem;
}
.status-banner h2 { margin: 0 0 .15em; font-size: 1.25rem; }
.status-banner p { margin: 0; font-size: .9375rem; }
.status-banner--in_attesa { background: var(--warn-bg);   color: #8A5C0A; }
.status-banner--approvata { background: var(--ok-bg);     color: var(--success-dark); }
.status-banner--rifiutata { background: var(--danger-bg); color: #A8302E; }
.status-banner--annullata { background: var(--surface-alt); color: var(--ink-soft); }
.status-banner--conclusa  { background: var(--info-bg);   color: var(--blue-800); }
.status-banner h2 { color: inherit; }

/* ---- Impatto -------------------------------------------------------- */
.indicator {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.indicator__code {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink-muted);
  font-family: ui-monospace, monospace;
}
.indicator__name { font-weight: 700; font-size: .9875rem; color: var(--blue-900); line-height: 1.35; }
.indicator__figure {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  font-variant-numeric: tabular-nums;
}
.indicator__value { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--blue-900); letter-spacing: -.03em; }
.indicator__unit { font-size: .875rem; font-weight: 700; color: var(--ink-muted); }
.indicator__target {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.indicator__method {
  font-size: .75rem;
  color: var(--ink-muted);
  padding-top: .6rem;
  border-top: 1px solid var(--border-soft);
  line-height: 1.45;
}

/* Cronoprogramma */
.timeline { display: grid; gap: 1rem; }
.timeline__item {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
@media (max-width: 640px) { .timeline__item { grid-template-columns: 1fr; gap: .6rem; } }
.timeline__period {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.timeline__phase { font-size: .7rem; color: var(--ink-muted); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.timeline__title { font-weight: 700; color: var(--blue-900); margin-bottom: .3rem; }
.timeline__desc { font-size: .9125rem; color: var(--ink-soft); margin-bottom: .8rem; }

/* Grafico a barre dei dati economici, in CSS puro */
.bars {
  display: grid;
  gap: .8rem;
}
.bar-row {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) 6.5rem;
  gap: .8rem;
  align-items: center;
  font-size: .875rem;
}
@media (max-width: 620px) {
  .bar-row { grid-template-columns: 1fr auto; }
  .bar-row .bar-track { grid-column: 1 / -1; }
}
.bar-label { color: var(--ink-soft); font-weight: 600; }
.bar-track { height: 1.6rem; background: var(--surface-alt); border-radius: var(--radius-sm); overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-sm); background: var(--blue-600); transition: width .7s var(--ease); }
.bar-fill--ricavi { background: var(--success); }
.bar-fill--costi  { background: var(--coral); }
.bar-value { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--blue-900); }

/* Testimonianze */
.quote {
  position: relative;
  padding: 2rem 1.75rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}
.quote::before {
  content: '“';
  position: absolute;
  top: -.35rem;
  left: 1.25rem;
  font-family: var(--font-serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: .55;
}
.quote__text {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 1.1rem;
  position: relative;
}
.quote__author { font-size: .875rem; font-weight: 700; color: var(--blue-900); }
.quote__role { font-size: .8125rem; color: var(--ink-muted); }

/* ---- Donazioni ------------------------------------------------------ */
.donate-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: start;
}
@media (max-width: 980px) { .donate-grid { grid-template-columns: 1fr; } }

.donate-panel {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

.aside-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.aside-card + .aside-card { margin-top: 1.25rem; }
.aside-card h3, .aside-card h2 { font-size: 1.05rem; margin-bottom: .7rem; letter-spacing: 0; line-height: 1.3; }
.aside-card p { font-size: .9125rem; color: var(--ink-soft); }

.iban {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .03em;
  background: var(--surface-alt);
  padding: .7rem .9rem;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  word-break: break-all;
  color: var(--blue-900);
}

.copy-btn {
  border: 0;
  background: none;
  padding: .3rem .55rem;
  font: inherit;
  font-size: .75rem;
  font-weight: 700;
  color: var(--blue-600);
  cursor: pointer;
  border-radius: 5px;
}
.copy-btn:hover { background: var(--surface-alt); }

.campaign {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.campaign__figures {
  display: flex;
  justify-content: space-between;
  font-size: .8125rem;
  font-weight: 700;
  margin-bottom: .5rem;
}
.campaign__raised { color: var(--success-dark); }
.campaign__goal { color: var(--ink-muted); }

/* Stima del beneficio fiscale */
.tax-note {
  padding: .9rem 1.1rem;
  background: var(--info-bg);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  color: var(--blue-800);
  line-height: 1.5;
}
.tax-note b { font-weight: 700; }

/* ---- Richiami finali ------------------------------------------------ */
.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(2rem, 1.5rem + 3vw, 3.5rem);
  background:
    radial-gradient(80% 130% at 100% 0%, rgba(229, 180, 77, .28) 0%, transparent 60%),
    radial-gradient(70% 120% at 0% 100%, rgba(20, 202, 247, .24) 0%, transparent 60%),
    var(--blue-800);
  color: #E7EFFC;
  text-align: center;
}
.cta h2 { color: #fff; }
.cta p { color: #BED0EE; max-width: 40rem; margin-inline: auto; }

/* ---- Rete partner --------------------------------------------------- */
.partner-group + .partner-group { margin-top: 2rem; }
.partner-group h3 {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: .8rem;
}
.partner-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.partner-list li {
  margin: 0;
  padding: .5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---- Documenti ------------------------------------------------------ */
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.doc-list li { margin: 0; }
.doc {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.doc:hover { border-color: var(--blue-600); transform: translateX(3px); color: inherit; }
.doc__icon {
  flex-shrink: 0;
  width: 2.5rem; height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: .7rem;
  font-weight: 700;
}
.doc__title { font-weight: 700; color: var(--blue-900); font-size: .9375rem; }
.doc__meta { font-size: .8125rem; color: var(--ink-muted); }

/* =====================================================================
   RITMO VISIVO
   Il linguaggio del template — cerchi, anelli, quarti di cerchio,
   quadrati in diagonale, griglie di pallini — riusabile in qualsiasi
   sezione. Tutto è decorativo: sta fuori dal flusso, non intercetta
   il puntatore e resta invisibile alle tecnologie assistive.
   ===================================================================== */

.section, .hero, .page-head { position: relative; }

.deco {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.deco > * { position: absolute; display: block; }

/* Il contenuto sta sopra le decorazioni. */
.section > .wrap,
.section > .wrap-text { position: relative; z-index: 1; }

/* --- Forme di base --- */
.d-circle  { border-radius: 50%; }
.d-ring    { border-radius: 50%; background: none; border-style: solid; }
.d-square  { border-radius: 2px; }
.d-quarter { border-radius: 100% 0 0 0; }
.d-pill    { border-radius: 999px; }

/* Semianello bicolore, la firma grafica del template. */
.d-arc {
  border-radius: 50%;
  border: 1.4rem solid var(--gold);
}
.d-arc::after {
  content: '';
  position: absolute;
  inset: -1.4rem;
  border-radius: 50%;
  border: 1.2rem solid var(--coral);
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

/* Griglia di pallini. */
.d-dots {
  display: grid;
  grid-auto-flow: row;
  gap: .8rem;
}
.d-dots i {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: currentColor;
  display: block;
}
.d-dots--6 { grid-template-columns: repeat(6, .5rem); }
.d-dots--4 { grid-template-columns: repeat(4, .5rem); }

/* Scaletta di quadrati in diagonale. */
.d-steps { display: grid; gap: .3rem; }
.d-steps i { width: 1.35rem; height: 1.35rem; border-radius: 2px; background: currentColor; display: block; }
.d-steps i:nth-child(2) { margin-left: 1.65rem; }
.d-steps i:nth-child(3) { margin-left: 3.3rem; }
.d-steps i:nth-child(4) { margin-left: 4.95rem; }

/* Croci, come nel template. */
.d-crosses {
  display: flex;
  gap: .7rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
}

/* --- Posizioni --- */
.at-tl { top: 8%;  left: 4%; }
.at-tr { top: 10%; right: 5%; }
.at-bl { bottom: 8%; left: 5%; }
.at-br { bottom: 10%; right: 6%; }
.at-cl { top: 45%; left: -3rem; }
.at-cr { top: 40%; right: -3rem; }

/* --- Colori delle decorazioni --- */
.c-gold   { color: var(--gold);   background: var(--gold); }
.c-coral  { color: var(--coral);  background: var(--coral); }
.c-cyan   { color: var(--cyan);   background: var(--cyan); }
.c-sky    { color: var(--sky);    background: var(--sky); }
.c-blue   { color: var(--blue-600); background: var(--blue-600); }
.c-white  { color: #fff; background: #fff; }
/* Le forme che devono restare vuote dentro non prendono il fondo. */
.d-ring, .d-arc, .d-dots, .d-steps, .d-crosses { background: none !important; }
.d-ring.c-gold  { border-color: var(--gold); }
.d-ring.c-coral { border-color: var(--coral); }
.d-ring.c-cyan  { border-color: var(--cyan); }
.d-ring.c-white { border-color: rgba(255, 255, 255, .35); }

/* Opacità di servizio: sulle sezioni chiare le forme non devono urlare. */
.deco--soft > * { opacity: .22; }
.deco--medium > * { opacity: .34; }

/* Sotto una certa larghezza le decorazioni rubano spazio: spariscono. */
@media (max-width: 760px) {
  .deco { display: none; }
}

/* =====================================================================
   Divisori fra le sezioni
   ===================================================================== */

/* Taglio diagonale verso la sezione successiva. */
.cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.5rem), 0 100%); }
.cut-top    { clip-path: polygon(0 3.5rem, 100% 0, 100% 100%, 0 100%); margin-top: -3.5rem; padding-top: 6rem; }

@media (max-width: 760px) {
  .cut-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.75rem), 0 100%); }
  .cut-top    { clip-path: polygon(0 1.75rem, 100% 0, 100% 100%, 0 100%); margin-top: -1.75rem; padding-top: 4rem; }
}

/* Sezione a fondo blu pieno, per spezzare la sequenza di fondi chiari. */
.section--band {
  background: var(--blue-600);
  color: #DCE7F8;
}
.section--band h2, .section--band h3, .section--band h4 { color: #fff; }
.section--band .eyebrow { color: var(--gold); }
.section--band .section-head p { color: #C2D4F0; }
.section--band a:not(.btn) { color: var(--gold-soft); }

/* Variante scura, per il contrasto più netto. */
.section--deep { background: var(--blue-800); color: #C6D6F0; }
.section--deep h2, .section--deep h3 { color: #fff; }
.section--deep .eyebrow { color: var(--cyan); }

/* =====================================================================
   Griglie con più movimento
   ===================================================================== */

/* Card sfalsate: la seconda e la quarta scendono, come nel template.
   transform sposta soltanto il disegno, non l'ingombro: da solo faceva
   scendere la scheda sopra quella della riga successiva. Il margine
   inferiore riserva lo spazio che la traslazione si prende, così la
   riga della griglia cresce e le schede non si accavallano piu'. */
@media (min-width: 900px) {
  .grid--stagger > *:nth-child(even) {
    transform: translateY(2.25rem);
    margin-bottom: 2.25rem;
  }
}

/* Riga alternata testo/immagine: si inverte a righe pari. */
.alt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.alt-row + .alt-row { margin-top: clamp(3rem, 5vw, 5rem); }
.alt-row:nth-child(even) > *:first-child { order: 2; }
@media (max-width: 860px) {
  .alt-row { grid-template-columns: 1fr; }
  .alt-row:nth-child(even) > *:first-child { order: 0; }
}

.alt-row__figure {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface-alt);
}
.alt-row__figure img { width: 100%; height: 100%; object-fit: cover; }
/* Rettangolo ciano sfalsato dietro l'immagine. */
.alt-row__figure::before {
  content: '';
  position: absolute;
  top: -1rem; right: -1rem;
  width: 6rem; height: 2.75rem;
  background: var(--cyan);
  z-index: -1;
}

/* =====================================================================
   Numeri e titoli con più presenza
   ===================================================================== */

/* Cifra grande sullo sfondo del riquadro: dà scala senza aggiungere testo. */
.step-card { position: relative; overflow: hidden; }
.step-card__num {
  position: absolute;
  top: .4rem; right: 1rem;
  font-family: var(--font-serif);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--coral);
  opacity: .13;
  pointer-events: none;
}
.step-card .card__body { position: relative; z-index: 1; }

/* Evidenziatore sotto una parola del titolo.
   È un gradiente di sfondo e non uno pseudo-elemento: così resta dietro
   al testo senza dipendere dal contesto di impilamento del titolo. */
.mark {
  white-space: nowrap;
  /* La banda copre il terzo inferiore delle lettere: più in basso
     sembrerebbe una sottolineatura staccata dal testo. */
  background-image: linear-gradient(
    to bottom,
    transparent 0 66%,
    rgba(229, 180, 77, .5) 66% 90%,
    transparent 90%
  );
  background-repeat: no-repeat;
  padding-inline: .08em;
}
/* Sui fondi blu l'oro al 50% sparisce: serve più densità. */
.section--band .mark,
.hero .mark,
.page-head .mark {
  background-image: linear-gradient(
    to bottom,
    transparent 0 68%,
    rgba(229, 180, 77, .55) 68% 90%,
    transparent 90%
  );
}

/* Occhiello con trattino, più marcato del solo testo. */
.eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
}
.eyebrow--rule::before {
  content: '';
  width: 2.25rem;
  height: 3px;
  background: currentColor;
  border-radius: 2px;
}

/* =====================================================================
   Card con più vita
   ===================================================================== */

.card--accent::before { transition: height .22s var(--ease); }
.card--link:hover.card--accent::before { height: 8px; }

.card--link { will-change: transform; }
.card--link:hover { transform: translateY(-5px); }

/* Freccia che scivola al passaggio del puntatore.
   La mette il CSS: nel markup resta solo il testo del collegamento. */
.card__foot a[data-arrow] {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.card__foot a[data-arrow]::after {
  content: '\2192';
  transition: transform .2s var(--ease);
}
.card__foot a[data-arrow]:hover::after { transform: translateX(4px); }


/* Citazioni su fondo scuro. */
.section--deep .quote {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14);
}
.section--deep .quote__text { color: #EAF1FC; }
.section--deep .quote__author { color: #fff; }
.section--deep .quote__role { color: #9FB6DC; }
.section--deep .quote::before { color: var(--gold); opacity: .5; }

/* Card dentro una sezione a fondo pieno: restano chiare, per contrasto. */
.section--band .card { background: var(--surface); }
.section--band .card__title, .section--band .card__title a { color: var(--blue-900); }
.section--band .card__text { color: var(--ink-soft); }

/* Il riquadro di richiamo finale ospita le decorazioni. */
.cta { position: relative; }
.cta > .wrap, .cta > *:not(.deco) { position: relative; z-index: 1; }


/* Elenco partner dentro una sezione a fondo pieno. */
.section--band .partner-list li,
.section--deep .partner-list li {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: #E4EDFC;
}
.section--band .partner-group h3,
.section--deep .partner-group h3 { color: var(--gold); }

/* Cronoprogramma su fondo pieno. */
.section--band .timeline__item {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
}
.section--band .timeline__title { color: #fff; }
.section--band .timeline__desc { color: #C2D4F0; }
.section--band .timeline__phase { color: #93AEDD; }
.section--band .timeline__period { color: var(--gold); }
.section--band .meter { background: rgba(255, 255, 255, .16); }
.section--band .indicator__target { color: #A9C2EC; }

/* Riquadri dei passaggi su fondo pieno. */
.section--band .step-card__num { color: var(--gold); opacity: .22; }

/* Numeri isolati dentro una sezione a fondo pieno: il blu scuro del
   sito chiaro qui sparirebbe contro il fondo. */
.section--band .stat__value,
.section--deep .stat__value { color: #fff; }
.section--band .stat__value span,
.section--deep .stat__value span { color: var(--gold); }
.section--band .stat__label,
.section--deep .stat__label { color: #A9C2EC; }

/* =====================================================================
   ADATTAMENTO AL TELEFONO
   Non basta che nulla sbordi: certe cose vanno ripensate, non ristrette.
   ===================================================================== */

/* ---- Campi di modulo -------------------------------------------------
   Sotto i 16 px iOS ingrandisce la pagina appena si tocca un campo, e
   l'utente si ritrova con il modulo fuori schermo. Sedici esatti. */
@media (max-width: 760px) {
  .input, .select, .textarea {
    font-size: 16px;
    padding: .8rem .9rem;
  }
  .filters .input, .filters .select,
  .toolbar .input, .toolbar .select { font-size: 16px; padding: .7rem .85rem; }
}

/* ---- Aree toccabili --------------------------------------------------
   Su un dispositivo a puntatore grossolano — un dito — i bersagli sotto
   i 44 px si sbagliano di continuo. */
@media (pointer: coarse) {
  .btn { min-height: 44px; padding-block: .7rem; }
  .btn--sm { min-height: 40px; padding-block: .55rem; }
  .nav__link { min-height: 44px; display: flex; align-items: center; }
  .check input { width: 1.35rem; height: 1.35rem; }
  .copy-btn { min-height: 40px; padding-inline: .8rem; }
  .pagination a, .pagination span { min-width: 44px; height: 44px; }
  .chip { min-height: 40px; }
}

/* ---- Tabelle impilate ------------------------------------------------
   Sotto i 760 px la tabella smette di essere una griglia: ogni riga
   diventa una scheda e ogni cella si presenta con la propria etichetta.
   Serve la classe is-stackable, che il JavaScript aggiunge solo dopo aver
   copiato le intestazioni: senza, si torna allo scorrimento orizzontale. */
@media (max-width: 760px) {
  .table.is-stackable,
  .admin-table.is-stackable {
    display: block;
    font-size: .9375rem;
  }
  .table.is-stackable thead,
  .admin-table.is-stackable thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .table.is-stackable tbody,
  .admin-table.is-stackable tbody { display: block; }

  .table.is-stackable tbody tr,
  .admin-table.is-stackable tbody tr {
    display: block;
    padding: .9rem 1rem;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
  }
  .table.is-stackable tbody tr + tr,
  .admin-table.is-stackable tbody tr + tr { margin-top: .6rem; border-top: 1px solid var(--border-soft); }

  /* Etichetta sopra il valore, non affiancata: molte celle contengono una
     riga principale più una secondaria, e in due colonne la secondaria
     finirebbe sotto l'etichetta invece che sotto il proprio valore. */
  .table.is-stackable tbody td,
  .admin-table.is-stackable tbody td {
    display: block;
    padding: .5rem 0;
    text-align: left !important;
    border: 0;
  }
  .table.is-stackable tbody td + td,
  .admin-table.is-stackable tbody td + td {
    border-top: 1px solid var(--border-soft);
  }
  .table.is-stackable tbody td::before,
  .admin-table.is-stackable tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .12rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  /* Le celle senza intestazione — la colonna dei pulsanti — occupano
     tutta la larghezza e non mostrano etichetta. */
  .table.is-stackable tbody td:not([data-label]),
  .admin-table.is-stackable tbody td:not([data-label]) {
    display: block;
    padding-top: .7rem;
    margin-top: .35rem;
    border-top: 1px solid var(--border-soft);
  }
  .admin-table.is-stackable tbody td.actions { display: flex; flex-wrap: wrap; gap: .4rem; }
  .admin-table.is-stackable tbody td.actions::before { display: none; }
  .admin-table.is-stackable tbody td.actions .btn { flex: 1 1 auto; }

  /* La riga totale delle tabelle economiche resta compatta. */
  .admin-table.is-stackable tbody tr[style*="surface-alt"] { background: var(--surface-alt); }

  /* Senza griglia il contenitore non deve più scorrere. */
  .table-wrap { overflow-x: visible; border: 0; background: none; }
}

/* Sotto i 520 px il marchio per esteso e il pulsante del menu non stanno
   sulla stessa riga: il sottotitolo sparisce, tanto è ripetuto nell'hero
   e nel piè di pagina, e il marchio può restringersi. */
@media (max-width: 520px) {
  .site-header__bar { gap: .75rem; min-height: 4.25rem; }
  .brand { min-width: 0; gap: .55rem; }
  .brand__text { min-width: 0; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 1.2rem; }
  .brand__claim { display: none; }
  .nav-toggle { flex-shrink: 0; padding: .5rem .75rem; }

  /* Nel piè di pagina il marchio ha spazio: il sottotitolo resta. */
  .site-footer .brand__claim { display: block; }
}

/* =====================================================================
   BLOCCHI DELL'EDITOR VISUALE
   Ogni blocco componibile ha qui il suo vestito. Sono classi normali
   del sito: la stessa pagina si potrebbe scrivere a mano.
   ===================================================================== */

:root {
  /* Nomi brevi usati dai campi "colore" dei blocchi. */
  --c-blu:     var(--blue-600);
  --c-azzurro: var(--sky);
  --c-ciano:   var(--cyan);
  --c-corallo: var(--coral);
  --c-oro:     var(--gold);
  --c-verde:   var(--success);

  --c-blu-soft:     #E4EDFC;
  --c-azzurro-soft: #DFF0FE;
  --c-ciano-soft:   #DCF7FE;
  --c-corallo-soft: var(--coral-soft);
  --c-oro-soft:     var(--gold-soft);
  --c-verde-soft:   var(--ok-bg);

  --c-blu-dark:     var(--blue-700);
  --c-azzurro-dark: var(--blue-600);
  --c-ciano-dark:   #0A7E9B;
  --c-corallo-dark: var(--coral-dark);
  --c-oro-dark:     var(--warn);
  --c-verde-dark:   var(--success-dark);

  /* Alias comodi, usati anche dai fogli dell'editor. */
  --muted:   var(--ink-muted);
  --blue-50: #EAF1FD;
}

/* ---- Telaio di sezione ------------------------------------------------ */
.section--wide  { padding-block: clamp(5rem, 9vw, 8.5rem); }
.section--flush { padding-block: 0; }

.section--gradient {
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-600) 45%, var(--sky) 100%);
  color: #fff;
}
.section--gradient h1, .section--gradient h2, .section--gradient h3 { color: #fff; }
.section--gradient p, .section--gradient li { color: rgba(255, 255, 255, .88); }

/* Sezione con foto di sfondo: il velo scuro è regolabile dall'editor,
   perché la leggibilità dipende dalla foto e non da una scelta fissa. */
.section--photo {
  position: relative;
  color: #fff;
  background: var(--blue-900) var(--bg-photo, none) center / cover no-repeat fixed;
}
@media (hover: none) { .section--photo { background-attachment: scroll; } }
.section--photo::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(4, 23, 63, calc(var(--bg-veil, 55%) * .85)),
    rgba(4, 23, 63, var(--bg-veil, 55%)));
}
.section--photo > * { position: relative; z-index: 1; }
.section--photo h1, .section--photo h2, .section--photo h3 { color: #fff; }
.section--photo p, .section--photo li { color: rgba(255, 255, 255, .9); }

.wrap--wide { max-width: 1440px; }
.wrap-full  { max-width: none; padding-inline: 0; }

/* Bordo a onda: più morbido della diagonale, per le pagine che
   raccontano invece di elencare. */
.cut-wave { position: relative; }
.cut-wave::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3.5rem;
  background: var(--bg);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56V22c180 28 340-18 600-6s420 34 600 6v34z' fill='%23000'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56V22c180 28 340-18 600-6s420 34 600 6v34z' fill='%23000'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

.hide-mobile { display: none; }
@media (min-width: 761px) { .hide-mobile { display: revert; } .hide-desk { display: none; } }

/* ---- Entrata in scena --------------------------------------------------
   Un movimento breve, una volta sola. Con "riduci le animazioni" attivo
   non parte affatto: l'attributo data-seen viene messo subito da app.js. */
@media (prefers-reduced-motion: no-preference) {
  /* La classe la mette boot.js. Senza JavaScript nulla viene nascosto:
     una pagina bianca sarebbe un prezzo assurdo per un'animazione. */
  .js-anim [data-anim] {
    opacity: 0;
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    will-change: opacity, transform;
  }
  .js-anim [data-anim="sali"]     { transform: translateY(26px); }
  .js-anim [data-anim="scala"]    { transform: scale(.965); }
  .js-anim [data-anim="sinistra"] { transform: translateX(-32px); }
  .js-anim [data-anim="destra"]   { transform: translateX(32px); }
  .js-anim [data-anim][data-seen] { opacity: 1; transform: none; }
}

/* ---- Testo ------------------------------------------------------------- */
.prose--due { columns: 2; column-gap: 2.5rem; }
@media (max-width: 760px) { .prose--due { columns: 1; } }
.prose--due > :first-child { margin-top: 0; }

.prose--grande  { font-size: 1.1rem; line-height: 1.75; }
.prose--piccolo { font-size: .9rem; }

.text-center { text-align: center; }

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

/* ---- Elenco con simboli ------------------------------------------------ */
.feature-grid { display: grid; gap: 1.75rem 2rem; }
.feature-grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.feature-grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.feature-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }

.feature { display: grid; gap: .7rem; }
.feature-grid--fianco .feature { grid-template-columns: auto 1fr; align-items: start; gap: .9rem; }

.feature__icon {
  width: 2.6rem; height: 2.6rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, white);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.feature__icon::before {
  content: '';
  width: 1.35rem; height: 1.35rem;
  background: var(--accent);
  mask: var(--ico) center / contain no-repeat;
  -webkit-mask: var(--ico) center / contain no-repeat;
}
.feature__title { font-size: 1rem; margin: 0 0 .2rem; color: var(--blue-900); }
.feature__text  { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.65; }

/* I simboli sono maschere SVG in linea: nessun font da scaricare e il
   colore segue quello scelto per la voce. */
.ico--check    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E"); }
.ico--cuore    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21S3 14.5 3 8.8A4.8 4.8 0 0 1 12 6a4.8 4.8 0 0 1 9 2.8C21 14.5 12 21 12 21z'/%3E%3C/svg%3E"); }
.ico--stella   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2 3 6.6 7 .8-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E"); }
.ico--freccia  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z'/%3E%3C/svg%3E"); }
.ico--persone  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='3.4'/%3E%3Ccircle cx='17' cy='9' r='2.8'/%3E%3Cpath d='M2 20c0-3.3 2.7-5.4 6-5.4s6 2.1 6 5.4zM15 14.8c2.7 0 5 1.8 5 5.2h-4.3c0-2-.5-3.7-1.4-5z'/%3E%3C/svg%3E"); }
.ico--casa     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 2 11h3v10h5v-6h4v6h5V11h3z'/%3E%3C/svg%3E"); }
.ico--orologio { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 10.6V6h-2v7.4l5 3 1-1.7z'/%3E%3C/svg%3E"); }
.ico--foglia   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3C10 3 4 8 4 15c0 2 .6 3.7 1.6 5L4 21.6 5.4 23 7 21.4A8.4 8.4 0 0 0 12 23c7 0 8-9 8-20z'/%3E%3C/svg%3E"); }
.ico--lampada  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1.5H9zm3-19a7 7 0 0 0-4 12.7V17h8v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.ico--mano     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2a1.5 1.5 0 0 0-1.5 1.5V11h-1V5a1.5 1.5 0 0 0-3 0v8.6l-2-2.2a1.6 1.6 0 0 0-2.3 2.2l4.4 5.3A6 6 0 0 0 12.2 22H15a5 5 0 0 0 5-5V7.5a1.5 1.5 0 0 0-3 0V11h-1V3.5A1.5 1.5 0 0 0 14.5 2z'/%3E%3C/svg%3E"); }

/* ---- Domande frequenti -------------------------------------------------- */
.faq { display: grid; gap: .6rem; }
.faq__item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.faq__item[open] { border-color: var(--border); box-shadow: var(--shadow-sm); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem;
  font-weight: 700; color: var(--blue-900);
  cursor: pointer; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+';
  font-size: 1.4rem; line-height: 1; color: var(--coral);
  transition: transform .2s var(--ease);
  flex-shrink: 0;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 1.25rem 1.25rem; }
.faq__a > :first-child { margin-top: 0; }

/* ---- Galleria ----------------------------------------------------------- */
.gallery { display: grid; gap: .75rem; }
.gallery--2 { grid-template-columns: repeat(2, 1fr); }
.gallery--3 { grid-template-columns: repeat(3, 1fr); }
.gallery--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .gallery { grid-template-columns: repeat(2, 1fr) !important; } }

.gallery__item { margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--surface-alt); }
.gallery__item img {
  width: 100%; height: 100%;
  aspect-ratio: 4/3; object-fit: cover;
  display: block;
  transition: transform .5s var(--ease);
}
.gallery__item:hover img { transform: scale(1.045); }

/* Il mosaico allarga una foto ogni sei: rompe la griglia quel tanto che
   basta perché l'occhio non scivoli via. */
.gallery--mosaico .gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: span 2; }
.gallery--mosaico .gallery__item:nth-child(6n + 1) img { aspect-ratio: 1; }
@media (max-width: 760px) {
  .gallery--mosaico .gallery__item:nth-child(6n + 1) { grid-column: span 2; grid-row: auto; }
}

/* ---- Figure ------------------------------------------------------------- */
.fig { margin: 0; }
.fig img { width: 100%; height: auto; display: block; object-fit: cover; }
.fig figcaption { margin-top: .7rem; font-size: .85rem; color: var(--ink-muted); }

.fig--arrotondata img { border-radius: var(--radius-lg); }
.fig--polaroid img {
  border-radius: 4px;
  border: 10px solid #fff;
  box-shadow: var(--shadow);
}
.fig--offset { position: relative; }
.fig--offset img { border-radius: var(--radius-lg); position: relative; z-index: 1; }
.fig--offset::before {
  content: '';
  position: absolute;
  inset: 1.5rem -1.5rem -1.5rem 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--gold);
  opacity: .35;
}
@media (max-width: 760px) { .fig--offset::before { inset: 1rem -.75rem -1rem 1rem; } }

.fig--w-media   { max-width: 66%; margin-inline: auto; }
.fig--w-stretta { max-width: 50%; margin-inline: auto; }
@media (max-width: 760px) { .fig--w-media, .fig--w-stretta { max-width: 100%; } }

/* ---- Immagine e testo --------------------------------------------------- */
.mediatext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.mediatext--destra .mediatext__fig { order: 2; }
@media (max-width: 860px) {
  .mediatext { grid-template-columns: 1fr; gap: 2.5rem; }
  .mediatext--destra .mediatext__fig { order: 0; }
}
.mediatext__fig { margin: 0; }
.mediatext__fig img { width: 100%; height: auto; display: block; }
.mediatext__body h2 { margin-top: .4rem; }

/* ---- Video e mappa ------------------------------------------------------ */
.videobox { margin: 0; }
.videobox__play {
  position: relative;
  display: grid;
  place-content: center;
  gap: .3rem;
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--blue-900) center / cover no-repeat;
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 1.5rem;
  overflow: hidden;
}
.videobox__play::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 23, 63, .35), rgba(4, 23, 63, .68));
}
.videobox__play > * { position: relative; }
.videobox__icon {
  justify-self: center;
  width: 4.2rem; height: 4.2rem;
  border-radius: 50%;
  background: var(--coral);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(4, 23, 63, .4);
  transition: transform .2s var(--ease);
}
.videobox__icon::after {
  content: '';
  border-left: 1.15rem solid #fff;
  border-block: .72rem solid transparent;
  margin-left: .28rem;
}
.videobox__play:hover .videobox__icon { transform: scale(1.08); }
.videobox__label { font-weight: 700; font-size: 1.05rem; }
.videobox__play small { color: rgba(255, 255, 255, .75); font-size: .78rem; }
.videobox__frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius-lg); }

.mapbox {
  display: grid; gap: .25rem;
  width: 100%;
  aspect-ratio: 4/3;
  place-content: center;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
  cursor: pointer;
  color: var(--blue-800);
  font: 600 .9rem/1.4 var(--font-sans);
  padding: 1rem;
  text-align: center;
}
.mapbox:hover { border-color: var(--sky); }
.mapbox small { font-weight: 400; color: var(--ink-muted); font-size: .75rem; }
.mapbox__frame { width: 100%; aspect-ratio: 4/3; border: 0; border-radius: var(--radius); }

/* ---- Nastro scorrevole -------------------------------------------------- */
.marquee {
  overflow: hidden;
  padding-block: .35rem;
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee--media .marquee__track  { animation-duration: 28s; }
.marquee--veloce .marquee__track { animation-duration: 16s; }
.marquee:hover .marquee__track   { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
}

.marquee__word {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  font-weight: 700;
  color: var(--blue-900);
  white-space: nowrap;
}
.marquee__sep { color: var(--gold); font-size: 1.1rem; }
.section--band .marquee__word, .section--deep .marquee__word,
.section--gradient .marquee__word, .section--photo .marquee__word { color: #fff; }

/* ---- Colonne ------------------------------------------------------------ */
.cols { display: grid; }
.cols--gap-stretta { gap: 1rem; }
.cols--gap-normale { gap: clamp(1.5rem, 3vw, 2.5rem); }
.cols--gap-ampia   { gap: clamp(2.5rem, 5vw, 4.5rem); }

.cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols--larga-stretta { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.cols--stretta-larga { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }

.cols--v-alto   { align-items: start; }
.cols--v-centro { align-items: center; }
.cols--v-basso  { align-items: end; }
.cols--v-stira  { align-items: stretch; }

.cols--stagger > .cols__col:nth-child(even) { margin-top: 2.5rem; }

@media (max-width: 860px) {
  .cols { grid-template-columns: 1fr !important; }
  .cols--stagger > .cols__col:nth-child(even) { margin-top: 0; }
}

.cols__col { min-width: 0; display: grid; align-content: start; gap: 1.25rem; }
.blk--space-nessuno { margin-block: 0; }
.blk--space-stretto { margin-block: .5rem; }
.blk--space-ampio   { margin-block: 2rem; }

/* ---- Passi numerati ------------------------------------------------------ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; counter-reset: step; }
.steps--orizzontale { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.steps__item { display: grid; gap: .6rem; }
.steps--verticale .steps__item {
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  position: relative;
  padding-bottom: 1.75rem;
}
/* La linea che unisce i passi non arriva sotto l'ultimo. */
.steps--verticale .steps__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 1.4rem; top: 3.2rem; bottom: 0;
  width: 2px;
  background: linear-gradient(var(--border), transparent);
}
.steps__num {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--coral);
  line-height: 1;
}
.steps--verticale .steps__num {
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--coral-soft);
  font-size: 1rem;
}
.steps__title { margin: 0 0 .25rem; font-size: 1.05rem; color: var(--blue-900); }
.steps__text  { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.65; }

/* ---- Numeri piatti -------------------------------------------------------- */
.stats--flat { background: transparent; border: 0; gap: 1.5rem; }
.stats--flat .stat { background: transparent; padding: 0; }
.stats--flat .stat::after { display: none; }

/* ---- Respiro e riga ------------------------------------------------------- */
.spacer { display: grid; place-items: center; }
.spacer__line { width: 100%; max-width: 6rem; border: 0; border-top: 2px solid var(--gold); margin: 0; }

/* ---- Elenchi dai dati del sito -------------------------------------------- */
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.svc-list li { border-left: 4px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--surface); }
.svc-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem;
  text-decoration: none;
  color: var(--blue-900);
}
.svc-list a:hover { background: var(--surface-alt); }
.svc-list span { color: var(--ink-muted); font-size: .85rem; }

.partner-row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem .75rem; justify-content: center;
}
.partner-row li {
  padding: .55rem 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue-800);
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.kpi__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.kpi__name { font-weight: 600; color: var(--blue-900); font-size: .95rem; }
.kpi__value { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--blue-700); white-space: nowrap; }
.kpi__value small { font-size: .8rem; font-weight: 400; color: var(--ink-muted); }
.kpi__note { margin: .5rem 0 0; font-size: .8rem; color: var(--ink-muted); }

.bar { height: .6rem; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue-600), var(--sky)); transition: width .8s var(--ease); }
.bar--lg { height: 1rem; }

.campaign {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.campaign__head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.campaign__head h3 { margin: 0; font-size: 1.25rem; }
.campaign__text { color: var(--ink-soft); margin-bottom: 1.25rem; }
.campaign__figures { margin: .75rem 0 1.25rem; font-size: .95rem; color: var(--ink-soft); }
.campaign__figures strong { font-family: var(--font-serif); font-size: 1.35rem; color: var(--blue-700); }

.contacts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; align-items: start; }

.form-block { max-width: 46rem; }
.form-block__link {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  text-align: center;
  background: var(--surface-alt);
}
.form-block__link p { margin: 0 0 1.25rem; color: var(--ink-soft); }

.newsletter { display: grid; gap: .6rem; max-width: 22rem; }
.newsletter--dark .input {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
}
.newsletter--dark .check { font-size: .78rem; color: #9FB4C9; }

/* ---- Copertina componibile ------------------------------------------------ */
.hero-blk { position: relative; }
.hero-blk--fianco {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) { .hero-blk--fianco { grid-template-columns: 1fr; } }

.hero-blk--centro { text-align: center; max-width: 48rem; margin-inline: auto; }
.hero-blk--centro .cluster { justify-content: center; }
.hero-blk--centro .hero__eyebrow { justify-content: center; }

.hero-blk--sfondo {
  min-height: 26rem;
  display: grid;
  align-content: center;
  padding: clamp(2rem, 6vw, 5rem);
  border-radius: var(--radius-xl);
  background: var(--blue-900) var(--hero-photo, none) center / cover no-repeat;
  position: relative;
  color: #fff;
}
.hero-blk--sfondo::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, rgba(4, 23, 63, .82), rgba(4, 23, 63, .38));
}
.hero-blk--sfondo > * { position: relative; }

.hero-blk--h-alta    { min-height: 34rem; align-content: center; }
.hero-blk--h-schermo { min-height: min(84dvh, 46rem); align-content: center; }

.hero__frame-empty {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--surface-alt), #fff);
  border: 1px dashed var(--border);
}

/* ---- Citazione grande ------------------------------------------------------ */
.quote--big { text-align: center; max-width: 42rem; margin-inline: auto; }
.quote--big .quote__text {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  line-height: 1.5;
  border: 0; padding: 0; margin: 0 0 1.25rem;
  color: var(--blue-900);
}
.section--band .quote--big .quote__text,
.section--deep .quote--big .quote__text,
.section--gradient .quote--big .quote__text { color: #fff; }
.quote__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.25rem; display: block; }

/* ---- Pulsanti aggiunti ------------------------------------------------------ */
.btn--plain {
  background: none;
  border-color: transparent;
  color: var(--blue-700);
  padding-inline: .35rem;
  text-decoration: underline;
  text-underline-offset: .28em;
}
.btn--plain:hover { color: var(--coral-dark); }

.btn--on-dark { border-color: rgba(255, 255, 255, .4); color: #fff; }
.btn--on-dark:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .7); }

/* =====================================================================
   RIFINITURE GENERALI
   Piccoli movimenti che danno vita alla pagina senza rallentarla.
   ===================================================================== */

/* Intestazione che si assottiglia scorrendo. */
.site-header { transition: padding .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease); }
body.is-scrolled .site-header { box-shadow: 0 4px 20px rgba(1, 34, 105, .16); }

/* Le schede si sollevano appena: abbastanza da sembrare toccabili. */
.card { transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease); }
@media (hover: hover) {
  .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}

/* La freccia dei collegamenti si sposta al passaggio. */
[data-arrow]::after {
  content: ' →';
  display: inline-block;
  transition: transform .22s var(--ease);
}
[data-arrow]:hover::after { transform: translateX(4px); }

/* Contorno di messa a fuoco visibile ovunque, anche sui fondi scuri. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scorrimento morbido verso le ancore, senza forzarlo a chi non lo vuole. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
:target { scroll-margin-top: 6rem; }

/* ---------------------------------------------------------------------
   Il colore dei testi segue il fondo scelto per la sezione.
   Fuori dal blocco copertina originale i titoli non erano bianchi
   perché la regola del sito copre h2 e h3, non h1: qui si completa,
   e si prevede il caso opposto — la stessa copertina su fondo chiaro.
   --------------------------------------------------------------------- */
.section--band h1, .section--deep h1 { color: #fff; }
.section--gradient h1, .section--photo h1 { color: #fff; }

.blk--copertina .hero__title { color: var(--blue-900); }
.blk--copertina .hero__lead  { color: var(--ink-soft); }
.blk--copertina .hero__eyebrow {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--blue-800);
}

.blk--copertina.section--band .hero__title,
.blk--copertina.section--deep .hero__title,
.blk--copertina.section--gradient .hero__title,
.blk--copertina.section--photo .hero__title,
.hero-blk--sfondo .hero__title { color: #fff; }

.blk--copertina.section--band .hero__lead,
.blk--copertina.section--deep .hero__lead,
.blk--copertina.section--gradient .hero__lead,
.blk--copertina.section--photo .hero__lead,
.hero-blk--sfondo .hero__lead { color: #D6E2F8; }

.blk--copertina.section--band .hero__eyebrow,
.blk--copertina.section--deep .hero__eyebrow,
.blk--copertina.section--gradient .hero__eyebrow,
.blk--copertina.section--photo .hero__eyebrow,
.hero-blk--sfondo .hero__eyebrow {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .25);
  color: #fff;
}

/* Anche il richiamo finale e le citazioni grandi cambiano registro. */
.section--band .steps__text, .section--deep .steps__text,
.section--gradient .steps__text, .section--photo .steps__text { color: rgba(255, 255, 255, .85); }
.section--band .feature__title, .section--deep .feature__title,
.section--gradient .feature__title, .section--photo .feature__title { color: #fff; }
.section--band .feature__text, .section--deep .feature__text,
.section--gradient .feature__text, .section--photo .feature__text { color: rgba(255, 255, 255, .82); }
.section--band .faq__item, .section--deep .faq__item {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}
.section--band .faq__q, .section--deep .faq__q { color: #fff; }

/* =====================================================================
   MOVIMENTO
   Un sistema solo, per tutto il sito: le cose entrano quando servono,
   con un gesto breve, e poi stanno ferme. Tutto ciò che si muove
   rispetta «riduci le animazioni», e niente di ciò che si muove e'
   necessario per leggere: senza JavaScript la pagina e' completa.
   ===================================================================== */

/* ---- Tocco ------------------------------------------------------------- */
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], input, select, textarea, summary { touch-action: manipulation; }

@media (prefers-reduced-motion: no-preference) {

  /* ---- Ingresso della pagina ------------------------------------------
     Copertina e testata entrano a scalare: occhiello, titolo, testo,
     pulsanti, immagine. Sono animazioni CSS pure — finiscono sempre
     con l'elemento visibile, quindi non dipendono da JavaScript. */
  @keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes rise-art {
    from { opacity: 0; transform: translateY(26px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .hero__eyebrow, .hero__title, .hero__lead, .hero__grid > div > .cluster,
  .page-head__inner > * ,
  .hero-blk__text > * {
    animation: rise .7s var(--ease) both;
  }
  .hero__eyebrow, .page-head__inner > :nth-child(1), .hero-blk__text > :nth-child(1) { animation-delay: .05s; }
  .hero__title,   .page-head__inner > :nth-child(2), .hero-blk__text > :nth-child(2) { animation-delay: .16s; }
  .hero__lead,    .page-head__inner > :nth-child(3), .hero-blk__text > :nth-child(3) { animation-delay: .28s; }
  .hero__grid > div > .cluster, .page-head__inner > :nth-child(4), .hero-blk__text > :nth-child(4) { animation-delay: .4s; }
  .hero__art, .hero-blk .hero__art { animation: rise-art .9s var(--ease) .25s both; }
  .hero__shapes, .page-head__shapes { animation: fade 1.2s var(--ease) .1s both; }

  /* ---- Forme che respirano ---------------------------------------------
     Le decorazioni ondeggiano di pochi pixel su cicli lunghi e sfalsati.
     Nessuna e' in fase con un'altra, cosi' il movimento non si nota come
     movimento: si nota che la pagina e' viva. */
  @keyframes drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%      { transform: translate3d(0, -10px, 0) rotate(1.5deg); }
  }
  @keyframes drift-x {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(8px, -6px, 0); }
  }
  .hero__blob    { animation: drift 11s ease-in-out infinite; }
  .hero__ring    { animation: drift-x 9s ease-in-out infinite 1s; }
  .hero__quarter { animation: drift 13s ease-in-out infinite 2s; }
  .deco .d-circle, .deco .d-ring { animation: drift 12s ease-in-out infinite; }
  .deco .d-arc, .deco .d-quarter { animation: drift-x 10s ease-in-out infinite 3s; }
  .deco > :nth-child(2) { animation-delay: 2.5s; }
  .deco > :nth-child(3) { animation-delay: 5s; }

  /* ---- Sezioni che entrano scorrendo ----------------------------------
     Vale per tutto il sito, non solo per le pagine composte a blocchi.
     La classe js-anim la mette boot.js: senza script non si nasconde
     niente. Le sezioni a blocchi hanno gia' il loro data-anim e restano
     fuori da questa regola. */
  .js-anim main > .section:not(.blk):not([data-seen]) {
    opacity: 0;
    transform: translateY(22px);
  }
  .js-anim main > .section:not(.blk) {
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }

  /* Dentro una sezione appena entrata, le schede arrivano una alla volta. */
  .js-anim main > .section:not([data-seen]) .grid > *,
  .js-anim [data-anim]:not([data-seen]) .grid > *,
  .js-anim main > .section:not([data-seen]) .stats > *,
  .js-anim [data-anim]:not([data-seen]) .stats > *,
  .js-anim main > .section:not([data-seen]) .feature-grid > *,
  .js-anim [data-anim]:not([data-seen]) .feature-grid > * {
    opacity: 0;
    transform: translateY(16px);
  }
  .js-anim .grid > *, .js-anim .stats > *, .js-anim .feature-grid > * {
    transition:
      opacity .55s var(--ease),
      transform .55s var(--ease),
      box-shadow .28s var(--ease),
      border-color .28s var(--ease);
  }
  .js-anim :is(.grid, .stats, .feature-grid) > :nth-child(2) { transition-delay: .07s; }
  .js-anim :is(.grid, .stats, .feature-grid) > :nth-child(3) { transition-delay: .14s; }
  .js-anim :is(.grid, .stats, .feature-grid) > :nth-child(4) { transition-delay: .21s; }
  .js-anim :is(.grid, .stats, .feature-grid) > :nth-child(5) { transition-delay: .28s; }
  .js-anim :is(.grid, .stats, .feature-grid) > :nth-child(6) { transition-delay: .35s; }
  .js-anim :is(.grid, .stats, .feature-grid) > :nth-child(n+7) { transition-delay: .4s; }
  /* Lo sfalsamento vale solo all'ingresso. Un secondo dopo, app.js segna
     la sezione come assestata e i ritardi spariscono: al passaggio del
     mouse le schede rispondono subito, non con un ritardo a scalare. */
  .js-anim .is-settled :is(.grid, .stats, .feature-grid) > * { transition-delay: 0s; }

  /* ---- Passaggio fra pagine -------------------------------------------
     Dissolvenza incrociata nativa fra una pagina e l'altra, dove il
     browser la sa fare. Dove non la sa fare, si naviga come sempre. */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: fade .18s var(--ease) reverse; }
  ::view-transition-new(root) { animation: fade .26s var(--ease); }

  /* ---- Micro-gesti ---------------------------------------------------- */
  .btn { transition: transform .16s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
  .btn:active { transform: translateY(0) scale(.97); }

  .nav__link { position: relative; }
  .nav__link::after {
    content: '';
    position: absolute;
    left: .75rem; right: .75rem; bottom: .3rem;
    height: 2px;
    border-radius: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease);
  }
  .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
  @media (max-width: 1080px) { .nav__link::after { display: none; } }

  .card__media img { transition: transform .6s var(--ease); }
  @media (hover: hover) { .card--link:hover .card__media img { transform: scale(1.04); } }

  .input, .select, .textarea { transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }

  .alert { animation: rise .45s var(--ease) both; }

  .faq__a { animation: fade .3s var(--ease); }

  .bar > span { transition: width 1.1s var(--ease) .2s; }
}

/* ---- Torna su -----------------------------------------------------------
   Compare dopo un po' di scorrimento, in basso a destra, sopra la barra
   di sistema dei telefoni. */
.to-top {
  position: fixed;
  right: calc(1rem + env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 90;
  width: 46px; height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--blue-700);
  color: #fff;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s;
}
.to-top:hover { background: var(--blue-600); }
.to-top::before {
  content: '';
  width: 10px; height: 10px;
  border-left: 2.5px solid #fff;
  border-top: 2.5px solid #fff;
  transform: translateY(2px) rotate(45deg);
}

/* ---- Rifiniture per il telefono ----------------------------------------- */
.site-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

/* Le immagini delle schede hanno un fondo mentre caricano: la scheda
   non "salta" quando arriva la foto. */
.card__media { background: var(--surface-alt); }
.card__media img { display: block; }

@media (max-width: 760px) {
  /* Il titolo di apertura sul telefono: leggibile senza sillabare. */
  .hero__title { font-size: clamp(2rem, 9.5vw, 2.7rem); line-height: 1.06; }
  .hero { padding-block: 2.5rem 3.5rem; }
  .hero__art { margin-top: 2rem; }
  .section { padding-block: 3rem; }
  .section--wide { padding-block: 4rem; }
  .cta { padding: 2rem 1.35rem; }
  .stats { border-radius: var(--radius); }
  .stat { padding: 1.15rem .75rem; }
  .stat__value { font-size: 1.75rem; }
  /* Sotto i 760 le decorazioni sono gia' nascoste: nessuna animazione
     gira per niente. */
  .hero__blob, .hero__ring, .hero__quarter, .deco * { animation: none !important; }
}

@media (max-width: 400px) {
  .hero__title { font-size: clamp(1.8rem, 10vw, 2.2rem); }
  .btn--lg { padding-inline: 1.1rem; font-size: .95rem; }
  .cluster .btn { flex: 1 1 auto; justify-content: center; }
}

/* Chi naviga con la tastiera vede il pulsante di ritorno anche da fermo. */
.to-top:focus-visible { opacity: 1; visibility: visible; transform: none; }

/* La parallasse usa la proprieta' translate, separata da transform: cosi'
   convive con le animazioni di deriva, che usano transform, senza che
   l'una cancelli l'altra. */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  .hero__shapes > * { translate: 0 var(--py, 0px); will-change: translate; }
}

/* ---- Schede interamente toccabili -----------------------------------------
   Il collegamento del titolo si estende a tutta la scheda con uno
   pseudo-elemento: sul telefono il bersaglio diventa la scheda intera,
   non due parole. Gli altri collegamenti dentro la scheda restano sopra
   (z-index) e continuano a funzionare per conto loro. */
.card--link { position: relative; }
.card--link .card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.card--link .card__title a:focus-visible::after { outline: 3px solid var(--cyan); outline-offset: 2px; }
.card--link .card__foot a,
.card--link .card__body .tag a,
.card--link .card__media a { position: relative; z-index: 2; }
/* La freccia a pie' di scheda e' ridondante con la scheda toccabile:
   resta come segnale visivo e come bersaglio per chi usa la tastiera. */
.card--link .card__foot a[data-arrow] { min-height: 40px; display: inline-flex; align-items: center; }

/* ---- Trasparenza ---------------------------------------------------------- */
.tr-door { text-decoration: none; color: inherit; display: flex; }
.tr-door .card__title { font-size: 1.25rem; }
.tr-door:hover { color: inherit; }

.tr-list { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .45rem; }
.tr-list li {
  padding: .55rem .8rem;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-weight: 600;
  font-size: .9rem;
  color: var(--blue-900);
}

.tr-filters { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; max-width: 34rem; }
.tr-filters a {
  padding: .4rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--blue-800);
  text-decoration: none;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.tr-filters a:hover { border-color: var(--blue-600); background: var(--blue-50); }
@media (max-width: 760px) { .tr-filters { justify-content: flex-start; max-width: none; } }

.tr-catalogue { display: grid; gap: 1.25rem; }
.tr-cat {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  scroll-margin-top: 6rem;
  box-shadow: var(--shadow-sm);
}
.tr-cat::before {
  content: '';
  position: absolute;
  left: 0; top: 1.5rem; bottom: 1.5rem;
  width: 5px;
  border-radius: 0 5px 5px 0;
  background: var(--accent);
}
.tr-cat__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: start;
  margin-bottom: 1rem;
}
.tr-cat__head h3 { margin: 0 0 .25rem; font-size: 1.2rem; }
.tr-cat__head p  { margin: 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.6; }
.tr-cat__badge {
  width: 2.6rem; height: 2.6rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 16%, white);
  position: relative;
}
.tr-cat__badge::after {
  content: '';
  position: absolute; inset: 30%;
  border-radius: 3px;
  background: var(--accent);
}
.tr-cat__when {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px dashed var(--border-soft);
  font-size: .85rem;
  color: var(--ink-muted);
  display: flex;
  gap: .5rem;
  align-items: baseline;
}
.tr-cat__when span { color: var(--gold); font-size: 1rem; }
@media (max-width: 560px) {
  .tr-cat { padding: 1.15rem; }
  .tr-cat__head { grid-template-columns: auto 1fr; }
  .tr-cat__head .tag { grid-column: 2; justify-self: start; }
}

.tr-ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
}
.tr-ask p { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 640px) { .tr-ask { flex-direction: column; align-items: stretch; text-align: center; } }

/* ---- Scene disegnate --------------------------------------------------------
   Stanno dove starebbe la fotografia e si comportano come lei: riempiono
   il riquadro, non deformano, e seguono il passaggio del mouse della
   scheda che le contiene. */
.art {
  display: block;
  width: 100%;
  height: 100%;
  --art-bg: color-mix(in srgb, var(--art-accent) 8%, #F2F6FD);
  transition: transform .6s var(--ease);
}
.card__media .art,
.media-frame .art { position: absolute; inset: 0; }
@media (hover: hover) { .card--link:hover .art { transform: scale(1.035); } }

/* Riquadro con proporzioni fisse per le scene fuori dalle schede. */
.media-frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
  aspect-ratio: 16 / 10;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame--wide { aspect-ratio: 21 / 9; }
.media-frame--square { aspect-ratio: 1; }

/* ---- Fascia illustrata delle schede ------------------------------------- */
.card__media { position: relative; }

/* La scena del servizio è più bassa della foto: è un accento, non il
   soggetto della scheda. */
.card__media--art { aspect-ratio: 16 / 6; }

/* L'età passa sopra la fascia: è il primo dato che si cerca scorrendo. */
.card__badge {
  position: absolute;
  left: .85rem;
  bottom: .85rem;
  z-index: 2;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--blue-900);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(1, 34, 105, .18);
}
/* Un filo del colore del servizio sotto la fascia, per legarla alla scheda. */
.card__media--art::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--accent, var(--blue-600));
  z-index: 1;
}

/* ---- Filiera dei servizi ------------------------------------------------
   Ogni tappa ha la sua scena a sinistra: scorrendo la pagina si riconosce
   il servizio prima di leggerne il nome. */
.lifeline__card {
  display: grid;
  grid-template-columns: 11.5rem minmax(0, 1fr);
  align-items: stretch;
}
.lifeline__art {
  position: relative;
  overflow: hidden;
  background: var(--surface-alt);
  border-right: 3px solid var(--accent, var(--blue-600));
}
.lifeline__art img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 760px) {
  /* Sul telefono la scena torna in alto, a tutta larghezza e più bassa:
     la colonna laterale avrebbe strozzato il testo. */
  .lifeline__card { grid-template-columns: 1fr; }
  .lifeline__art {
    aspect-ratio: 16 / 5;
    border-right: 0;
    border-bottom: 3px solid var(--accent, var(--blue-600));
  }
}

/* ---- Indicatori non ancora rilevati --------------------------------------
   Una barra a zero per cento dice «non abbiamo niente». Il traguardo
   dichiarato dice che cosa ci siamo impegnati a ottenere: è un'altra
   cosa, e si vede. */
.indicator__figure--target .indicator__value { color: var(--blue-700); }
.indicator__goal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin: .2rem 0 .75rem;
  font-size: .8125rem;
}
.indicator__goal-label {
  padding: .18rem .55rem;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--warn);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .68rem;
}
.indicator__from { color: var(--ink-muted); }
.indicator__pending {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding-top: .7rem;
  border-top: 1px dashed var(--border-soft);
  font-size: .78rem;
  color: var(--ink-muted);
}
.indicator__pending::before {
  content: '';
  width: .5rem; height: .5rem;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

/* ---- Accesso allo staff nel piè di pagina -------------------------------
   Discreto ma raggiungibile: chi ci lavora lo trova sempre nello stesso
   punto, chi visita il sito non lo scambia per una voce del menu. */
.footer-staff { margin-left: auto; }
.footer-staff__link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .8rem;
  min-height: 2.25rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #9FB4C9;
  text-decoration: none;
  font-size: .8125rem;
  font-weight: 600;
  transition: border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.footer-staff__link:hover {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
.footer-staff__key {
  width: .95rem; height: .95rem;
  flex-shrink: 0;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8V7a5 5 0 0 0-10 0v1H5v13h14V8zM9 7a3 3 0 0 1 6 0v1H9zm3 7a1.6 1.6 0 0 1 .8 3v2h-1.6v-2A1.6 1.6 0 0 1 12 14z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 8V7a5 5 0 0 0-10 0v1H5v13h14V8zM9 7a3 3 0 0 1 6 0v1H9zm3 7a1.6 1.6 0 0 1 .8 3v2h-1.6v-2A1.6 1.6 0 0 1 12 14z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 760px) {
  .footer-staff { margin-left: 0; width: 100%; }
  .footer-staff__link { width: 100%; justify-content: center; min-height: 2.75rem; }
}

/* =====================================================================
   RINNOVO 2026 — più moderno
   Stesso marchio, stessa palette, stessi caratteri. Cambia l'esecuzione:
   - le sezioni blu non sono più bande a tutta larghezza tagliate in
     diagonale, ma pannelli arrotondati rientrati dai bordi;
   - l'intestazione galleggia sopra la pagina, in vetro smerigliato;
   - le decorazioni a "adesivo" diventano bagliori di colore sfocati;
   - il ritmo lo danno l'impaginazione e la scala dei titoli, non le forme.
   Questo blocco sta in fondo apposta: si legge da solo e, togliendolo,
   il sito torna esattamente com'era.
   ===================================================================== */

:root {
  --radius-lg: 22px;
  --radius-xl: 34px;
  --panel-gap: clamp(.5rem, 1.4vw, 1.25rem);
  --panel-radius: clamp(22px, 3vw, 40px);

  /* Ombre più leggere e più larghe: il rilievo si sente, non si vede. */
  --shadow-sm: 0 1px 2px rgba(11, 42, 99, .05), 0 1px 1px rgba(11, 42, 99, .03);
  --shadow:    0 1px 2px rgba(11, 42, 99, .06), 0 10px 28px -10px rgba(11, 42, 99, .16);
  --shadow-lg: 0 2px 4px rgba(11, 42, 99, .06), 0 28px 56px -20px rgba(11, 42, 99, .28);

  --mesh-blue:
    radial-gradient(55% 75% at 88% 6%, rgba(20, 202, 247, .38) 0%, transparent 62%),
    radial-gradient(45% 65% at 2% 98%, rgba(252, 108, 107, .30) 0%, transparent 62%),
    radial-gradient(40% 55% at 55% 55%, rgba(2, 129, 241, .30) 0%, transparent 70%),
    linear-gradient(155deg, #0A3FB0 0%, #022C86 48%, #012269 100%);
}

::selection { background: var(--gold-soft); color: var(--blue-900); }

/* ---- Intestazione flottante --------------------------------------------- */
.site-header {
  position: sticky;
  top: var(--panel-gap);
  margin: var(--panel-gap) auto 0;
  width: min(100% - 2 * var(--panel-gap), 1260px);
  border-radius: 999px;
  /* Abbastanza opaca da restare blu anche sul fondo chiaro: il vetro
     si nota quando scorre sopra i contenuti, non deve sbiadire il marchio. */
  background: rgba(1, 34, 105, .9);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 32px -14px rgba(1, 23, 63, .55);
}
.site-header::after { display: none; }
.site-header .wrap.site-header__bar {
  max-width: none;
  min-height: 4rem;
  padding-inline: .55rem .55rem;
}
.site-header .brand__mark { width: 42px; height: 42px; border-radius: 999px; }
body.is-scrolled .site-header { background: rgba(1, 34, 105, .82); }

.nav__link { border-radius: 999px; padding: .5rem .95rem; }
.nav__link.is-active { background: rgba(255, 255, 255, .14); }
.nav .btn { padding-inline: 1.15rem; }

@media (max-width: 1080px) {
  .site-header { border-radius: 26px; }
  .site-header.is-hidden { transform: translateY(calc(-100% - 2 * var(--panel-gap))); }
  .site-header .wrap.site-header__bar { min-height: 3.6rem; }
  .nav {
    top: calc(100% + .5rem);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(1, 34, 105, .96);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .nav-toggle { border-radius: 999px; }
}

/* ---- Pannelli arrotondati al posto delle bande ------------------------- */
.hero,
.page-head,
.section--band,
.section--deep,
.section--gradient,
.section--photo {
  margin-inline: var(--panel-gap);
  border-radius: var(--panel-radius);
  isolation: isolate;
}
.hero,
.page-head { margin-top: var(--panel-gap); }
.section--band, .section--deep, .section--gradient, .section--photo { margin-block: var(--panel-gap); }

/* I tagli diagonali erano il segno della pagina "a bande": su un pannello
   arrotondato non hanno più senso. */
.cut-top, .cut-bottom { clip-path: none; }
.cut-top { margin-top: var(--panel-gap); padding-top: clamp(3rem, 2rem + 5vw, 6rem); }
.section--tight.cut-top { padding-top: clamp(2rem, 1.4rem + 3vw, 3.5rem); }
.section--band.cut-wave::after,
.section--deep.cut-wave::after,
.section--gradient.cut-wave::after,
.section--photo.cut-wave::after { display: none; }
.section--photo::before { border-radius: inherit; }

/* Fondi pieni con la sfumatura a maglia del marchio. */
.hero, .page-head, .section--band { background: var(--mesh-blue); }
.section--deep {
  background:
    radial-gradient(50% 70% at 90% 0%, rgba(20, 202, 247, .22) 0%, transparent 60%),
    radial-gradient(45% 65% at 0% 100%, rgba(229, 180, 77, .18) 0%, transparent 60%),
    var(--blue-800);
}

/* La sezione a fondo chiaro alterno prende una trama a puntini leggera:
   dà ritmo senza aggiungere nulla da guardare. */
.section--alt {
  background-color: var(--surface-alt);
  background-image: radial-gradient(rgba(11, 42, 99, .07) 1px, transparent 1.2px);
  background-size: 22px 22px;
}

/* ---- Decorazioni: da adesivi a bagliori ---------------------------------- */
.deco .d-dots, .deco .d-steps, .deco .d-crosses, .deco .d-arc { display: none; }
.deco > * { filter: blur(56px); }
.deco--soft > * { opacity: .32; }
.deco--medium > * { opacity: .42; }
.cta .deco > * { filter: blur(40px); }

/* Nell'apertura restano poche forme, sfumate: il soggetto è il titolo. */
.hero__dots, .hero__steps, .hero__band, .hero__ring, .hero__quarter,
.hero__art::after, .hero__frame::before { display: none; }
.hero__blob { filter: blur(60px); opacity: .35; }
.page-head__shapes i { filter: blur(48px); opacity: .5; }

/* ---- Tipografia ----------------------------------------------------------- */
h2 {
  font-size: clamp(2rem, 1.25rem + 2.6vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -.022em;
}
h1 { letter-spacing: -.025em; }
.hero__title {
  font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.03em;
}
.page-head h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); line-height: 1.02; }
.section-head p,
.page-head p,
.hero__lead {
  font-size: clamp(1.03rem, .96rem + .32vw, 1.2rem);
  line-height: 1.65;
}
.section-head p { color: var(--ink-soft); }
.section-head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }

/* ---- Occhielli: da riga rossa a etichetta ------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  padding: .38rem .85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--coral) 11%, white);
  color: var(--coral-dark);
  font-size: .7rem;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}
.section-head--center .eyebrow { margin-inline: auto; }
.eyebrow--rule::before {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
}
.hero .eyebrow, .page-head .eyebrow,
.section--band .eyebrow, .section--deep .eyebrow,
.section--gradient .eyebrow, .section--photo .eyebrow,
.cta .eyebrow, .login__aside .eyebrow {
  background: rgba(255, 255, 255, .12);
  color: var(--gold);
}

/* ---- Pulsanti ------------------------------------------------------------- */
.btn { padding: .8rem 1.35rem; letter-spacing: 0; }
.btn--primary {
  background: linear-gradient(180deg, #FF8584 0%, var(--coral) 100%);
  text-transform: none;
  letter-spacing: 0;
  font-size: .95rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 20px -8px rgba(226, 79, 78, .7);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #FF7473 0%, var(--coral-dark) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 12px 26px -8px rgba(226, 79, 78, .75);
}
.btn--lg { padding: .95rem 1.6rem; font-size: 1rem; }
.btn--sm { padding: .5rem 1rem; font-size: .85rem; }
.nav .btn--primary { text-transform: none; font-size: .9rem; }

/* ---- Schede ----------------------------------------------------------------- */
.card {
  border-color: rgba(11, 42, 99, .08);
  box-shadow: var(--shadow-sm);
}
.card--accent::before { height: 3px; }
.card--accent { padding-top: 3px; }
.card--link:hover.card--accent::before { height: 3px; }
@media (hover: hover) {
  .card--link:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--accent, var(--blue-600)) 30%, transparent);
  }
}
.card__body { padding: 1.4rem 1.5rem 1.5rem; }

/* ---- Numeri chiave ------------------------------------------------------- */
.stats {
  border-radius: 26px;
  border: 1px solid rgba(11, 42, 99, .08);
  box-shadow: var(--shadow-lg);
}
.stat__value {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 1.6rem + 1.8vw, 3.1rem);
  letter-spacing: -.035em;
}
.stat::after { height: 3px; width: 2.5rem; border-radius: 3px; }

/* ---- Apertura -------------------------------------------------------------- */
.hero__eyebrow {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hero__frame {
  border-radius: 28px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .14),
    0 30px 70px -24px rgba(1, 15, 45, .7);
}

/* ---- Richiamo finale ---------------------------------------------------- */
.cta {
  background: var(--mesh-blue);
  border-radius: var(--panel-radius);
}

/* ---- Piè di pagina: un pannello come gli altri ---------------------------- */
.site-footer {
  margin: var(--panel-gap);
  border-radius: var(--panel-radius);
  background:
    radial-gradient(45% 60% at 100% 0%, rgba(20, 202, 247, .16) 0%, transparent 60%),
    var(--blue-800);
}

/* ---- Griglia "bento" per i servizi in home ------------------------------------
   Schede di misure diverse: la prima occupa il doppio, l'ultima chiude la
   riga in larghezza. L'occhio trova un punto d'ingresso invece di una
   scacchiera. */
.bento {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bento > :nth-child(6n + 1),
.bento > :nth-child(6n + 6) { grid-column: span 2; }
.bento > :nth-child(6n + 1) .card__media--art,
.bento > :nth-child(6n + 6) .card__media--art { aspect-ratio: 16 / 5.4; }
.bento > :nth-child(6n + 1) .card__title { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); }

@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento > :nth-child(6n + 1),
  .bento > :nth-child(6n + 6) { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento > :nth-child(6n + 1),
  .bento > :nth-child(6n + 6) { grid-column: auto; }
}

/* ---- Telefono ---------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --panel-gap: .5rem; --panel-radius: 22px; }
  .hero__title { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .site-header .brand__mark { width: 36px; height: 36px; }
}

/* ---- Area riservata: non deve ereditare i pannelli del sito ---------------- */
.admin .site-header, .admin .site-footer { margin: 0; border-radius: 0; }

/* L'apertura dà più spazio al titolo: con il corpo più grande la prima
   riga ("C'è un posto in città") deve restare intera, come nel testo. */
@media (min-width: 961px) {
  .hero__grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(2rem, 4vw, 4rem); }
}

/* Stato del servizio sopra la fascia illustrata. */
.card__status {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 2;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 1px 3px rgba(1, 34, 105, .16);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.service-card .card__title { margin-bottom: .4rem; }

/* La griglia bento entra in scena come le altre: una scheda alla volta. */
@media (prefers-reduced-motion: no-preference) {
  .js-anim main > .section:not([data-seen]) .bento > * { opacity: 0; transform: translateY(16px); }
  .js-anim .bento > * {
    transition: opacity .55s var(--ease), transform .55s var(--ease),
                box-shadow .28s var(--ease), border-color .28s var(--ease);
  }
  .js-anim .bento > :nth-child(2) { transition-delay: .07s; }
  .js-anim .bento > :nth-child(3) { transition-delay: .14s; }
  .js-anim .bento > :nth-child(4) { transition-delay: .21s; }
  .js-anim .bento > :nth-child(5) { transition-delay: .28s; }
  .js-anim .bento > :nth-child(6) { transition-delay: .35s; }
  .js-anim .is-settled .bento > * { transition-delay: 0s; }
}
/* Nella tela dell'editor niente ingressi: si vede tutto subito. */
.is-canvas .bento > * { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   ISTITUZIONALE — rete degli enti, cronoprogramma, area stampa
   ========================================================================== */

/* ---- Rete: enti gestori e sostenitori ------------------------------------ */
.promoters__head { max-width: 44rem; margin-bottom: 2rem; }
.promoters__head h2 { margin-bottom: .6rem; }
.promoters__head p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }

.network__label {
  margin: 0 0 .9rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.network__grid + .network__label { margin-top: 2rem; }
.network__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.network__grid--support { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; }
.network__card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid rgba(11, 42, 99, .08);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.network__card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--accent, var(--blue-600));
}
.network__card--support { background: transparent; box-shadow: none; border-style: dashed; border-color: var(--border); }
.network__card--support::after { display: none; }
.network__mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--accent, var(--blue-600));
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .02em;
}
.network__mono--ghost { background: transparent; color: var(--blue-600); box-shadow: inset 0 0 0 1.5px currentColor; }
.network__logo { flex: none; width: 3rem; height: 3rem; object-fit: contain; }
.network__name { display: block; font-size: .975rem; line-height: 1.3; color: var(--blue-900); }
.network__name a { color: inherit; }
.network__role { display: block; margin-top: .3rem; font-size: .85rem; line-height: 1.45; color: var(--ink-soft); }

.network--dark .network__label { color: var(--gold); }
.network--dark .network__card { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); box-shadow: none; }
.network--dark .network__card--support { background: transparent; border-color: rgba(255, 255, 255, .25); }
.network--dark .network__name { color: #fff; }
.network--dark .network__role { color: #BED0EE; }
.network--dark .network__mono--ghost { color: var(--gold); }

@media (max-width: 1000px) { .network__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .network__grid, .network__grid--support { grid-template-columns: 1fr; }
}

/* ---- Cronoprogramma per fasi ---------------------------------------------- */
.phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: phase;
}
.phases__item {
  position: relative;
  padding: 1.4rem 1.35rem 1.5rem;
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid rgba(11, 42, 99, .09);
}
.phases__head { display: flex; gap: .85rem; align-items: center; }
.phases__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--blue-600);
  color: var(--blue-600);
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.1rem;
}
.phases__years { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--coral-dark); }
.phases__title { margin: .1rem 0 0; font-size: 1.15rem; line-height: 1.2; color: var(--blue-900); }
.phases__now {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.phases__item.is-current { border-color: color-mix(in srgb, var(--coral) 55%, transparent); box-shadow: 0 18px 40px -22px rgba(226, 79, 78, .55); }
.phases__item.is-current .phases__num { background: var(--coral); box-shadow: none; color: #fff; }
.phases__item.is-done .phases__num { background: var(--success); box-shadow: none; color: #fff; }
.phases__count { margin: 1rem 0 0; font-size: .875rem; color: var(--ink-soft); }
.phases__list { list-style: none; margin: 1.1rem 0 0; padding: 0; font-size: .9rem; }
.phases__list li { position: relative; padding: .4rem 0 .4rem 1.25rem; border-top: 1px solid var(--border-soft); line-height: 1.4; }
.phases__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .85rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ink-muted);
}
.phases__list li.is-going::before { background: var(--gold); box-shadow: none; }
.phases__list li.is-done::before { background: var(--success); box-shadow: none; }

.section--deep .phases__item { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.section--deep .phases__num { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); color: #fff; }
.section--deep .phases__title { color: #fff; }
.section--deep .phases__years { color: var(--gold); }
.section--deep .phases__count { color: #BED0EE; }
.section--deep .phases__item.is-current { background: rgba(255, 255, 255, .11); border-color: rgba(252, 108, 107, .6); box-shadow: none; }
.roadmap .section-head p { color: #BED0EE; }

@media (max-width: 1000px) { .phases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .phases { grid-template-columns: 1fr; } }

/* ---- Home: stampa e istituzioni ------------------------------------------ */
.insti {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
  border-radius: var(--panel-radius);
  background: var(--surface);
  border: 1px solid rgba(11, 42, 99, .08);
  box-shadow: var(--shadow);
}
.insti h2 { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.insti__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.insti__links a {
  display: block;
  height: 100%;
  padding: 1.1rem 2.6rem 1.1rem 1.2rem;
  border-radius: 16px;
  background: var(--surface-alt);
  color: var(--ink);
  text-decoration: none;
  position: relative;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.insti__links a::after {
  content: '→';
  position: absolute;
  right: 1.1rem;
  top: 1.05rem;
  color: var(--coral);
  font-weight: 700;
  transition: transform .2s var(--ease);
}
.insti__links strong { display: block; color: var(--blue-900); font-size: 1rem; }
.insti__links span { display: block; margin-top: .2rem; font-size: .85rem; color: var(--ink-soft); line-height: 1.45; }
@media (hover: hover) {
  .insti__links a:hover { background: color-mix(in srgb, var(--blue-600) 9%, white); transform: translateY(-2px); }
  .insti__links a:hover::after { transform: translateX(3px); }
}
@media (max-width: 860px) { .insti { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .insti__links { grid-template-columns: 1fr; } }

/* ---- Area stampa ------------------------------------------------------------ */
.press-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.press-contact {
  position: relative;
  padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  border-radius: var(--panel-radius);
  background: var(--mesh-blue);
  color: #DCE6F8;
  scroll-margin-top: 7rem;
  overflow: hidden;
}
.press-contact h2 { color: #fff; margin: 0 0 .75rem; }
.press-contact .eyebrow { background: rgba(255, 255, 255, .12); color: var(--gold); }
.press-contact__who { color: #fff; font-weight: 700; font-size: 1.1rem; }
.press-contact__lines { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.press-contact__lines li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .8rem 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.press-contact__label { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); padding-top: .2rem; }
.press-contact__lines a { color: #fff; font-weight: 600; font-size: 1.05rem; word-break: break-word; }

.press-files { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.press-file {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem .85rem .85rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(11, 42, 99, .09);
  color: var(--ink);
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.press-file__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 12px;
  background: var(--blue-50);
  color: var(--blue-600);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.press-file--doc .press-file__icon { background: var(--coral-soft); color: var(--coral-dark); }
.press-file__text { flex: 1; min-width: 0; }
.press-file__text strong { display: block; color: var(--blue-900); }
.press-file__text span { display: block; font-size: .85rem; color: var(--ink-soft); }
.press-file__go { font-weight: 700; color: var(--coral); font-size: 1.1rem; }
@media (hover: hover) {
  .press-file:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--blue-600) 25%, transparent); }
}
.press-sub {
  margin: 1.75rem 0 .75rem;
  font-family: var(--font-sans);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.press-palette { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.press-palette li { display: flex; align-items: center; gap: .65rem; font-size: .85rem; font-weight: 600; color: var(--blue-900); }
.press-palette__chip { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.press-palette code { display: block; font-size: .78rem; font-weight: 500; color: var(--ink-muted); background: none; padding: 0; }

.press-boiler { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.press-boiler__item {
  display: flex;
  flex-direction: column;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  border-radius: 22px;
  background: var(--surface);
  border: 1px solid rgba(11, 42, 99, .08);
  box-shadow: var(--shadow-sm);
}
.press-boiler__item--wide { grid-column: 1 / -1; }
.press-boiler__item header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .9rem; }
.press-boiler__item h3 { margin: 0; font-size: 1.15rem; }
.press-boiler__count { font-size: .78rem; font-weight: 700; color: var(--ink-muted); white-space: nowrap; }
.press-boiler__text { flex: 1; font-size: 1.02rem; line-height: 1.7; color: var(--ink); }
.press-boiler__text p { margin: 0 0 .9rem; }
.press-boiler__item--wide .press-boiler__text { columns: 2 22rem; column-gap: 2.5rem; }
.press-boiler__item--wide .press-boiler__text p { break-inside: avoid; }
.press-copy { align-self: flex-start; margin-top: .5rem; }
.press-copy.is-copied { background: var(--ok-bg); border-color: var(--success); color: var(--success-dark); }
@media (max-width: 760px) { .press-boiler { grid-template-columns: 1fr; } }

.press-facts {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: start;
}
.fact-list { margin: 0; }
.fact-list > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.fact-list > div:last-child { border-bottom: 1px solid var(--border); }
.fact-list dt { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); padding-top: .2rem; }
.fact-list dd { margin: 0; font-weight: 500; color: var(--ink); line-height: 1.55; }
.fact-list ul { list-style: none; margin: 0; padding: 0; }
.fact-list ul li + li { margin-top: .25rem; }
.fact-list__services { margin-top: .6rem !important; }
.fact-list__services li { display: flex; align-items: center; gap: .55rem; font-weight: 400; }
@media (max-width: 640px) { .fact-list > div { grid-template-columns: 1fr; gap: .3rem; } }

.press-targets {
  position: sticky;
  top: 6.5rem;
  padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
  border-radius: var(--panel-radius);
  background:
    radial-gradient(60% 50% at 100% 0%, rgba(20, 202, 247, .2) 0%, transparent 60%),
    var(--blue-800);
  color: #DCE6F8;
}
.press-targets .eyebrow { background: rgba(255, 255, 255, .12); color: var(--gold); }
.press-targets h3 { color: #fff; margin: 0 0 1rem; font-size: 1.35rem; }
.press-targets ul { list-style: none; margin: 0; padding: 0; }
.press-targets li { display: grid; grid-template-columns: 4.75rem 1fr; gap: 1rem; align-items: baseline; padding: .85rem 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.press-targets__num { font-family: var(--font-serif); font-size: 2.1rem; line-height: 1; color: var(--gold); text-align: right; letter-spacing: -.03em; }
.press-targets__label { font-size: .92rem; line-height: 1.4; }
.press-targets__label small { display: block; margin-top: .15rem; color: #8FA5BC; font-size: .78rem; }
@media (max-width: 900px) {
  .press-top, .press-facts { grid-template-columns: 1fr; }
  .press-targets { position: static; }
}
@media (max-width: 520px) { .press-palette { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.press-releases { list-style: none; margin: 0; padding: 0; }
.press-releases li { display: grid; grid-template-columns: 11rem 1fr; gap: 1.5rem; padding: 1.4rem 0; border-top: 1px solid var(--border); }
.press-releases time { font-size: .85rem; font-weight: 700; color: var(--coral-dark); padding-top: .2rem; }
.press-releases h3 { margin: 0 0 .35rem; font-size: 1.2rem; }
.press-releases h3 a { color: var(--blue-900); }
.press-releases p { margin: 0; color: var(--ink-soft); }
@media (max-width: 640px) { .press-releases li { grid-template-columns: 1fr; gap: .4rem; } }
.press-empty {
  padding: 2rem;
  border-radius: 22px;
  border: 1.5px dashed var(--border);
  background: rgba(255, 255, 255, .6);
  text-align: center;
}
.press-empty p { margin: 0 auto .35rem; max-width: 36rem; }

.press-guide .card__body { padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.press-words { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .9rem; }
.press-words th {
  text-align: left;
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 .75rem .5rem 0;
  color: var(--ink-muted);
}
.press-words td { padding: .6rem .75rem .6rem 0; border-top: 1px solid var(--border-soft); vertical-align: top; line-height: 1.45; }
.press-words td:first-child { color: var(--success-dark); font-weight: 600; width: 50%; }
.press-words td:last-child { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: rgba(217, 62, 60, .55); }
.press-rules { list-style: none; margin: 1rem 0 0; padding: 0; }
.press-rules li { position: relative; padding: .5rem 0 .5rem 1.75rem; border-top: 1px solid var(--border-soft); font-size: .93rem; line-height: 1.5; }
.press-rules li::before {
  content: '';
  position: absolute;
  left: .15rem;
  top: .8rem;
  width: .9rem;
  height: .5rem;
  border-left: 2px solid var(--success);
  border-bottom: 2px solid var(--success);
  transform: rotate(-45deg);
}

/* ---- Stampa su carta -------------------------------------------------------
   Chi stampa una pagina del sito (una delibera, un bando, una rassegna)
   deve ottenere il contenuto, non la navigazione. */
@media print {
  .site-header, .site-footer, .skip-link, .nav-toggle, .to-top, .deco, .hero-shapes,
  .page-head__shapes, .press-copy, .cta .cluster, form { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .page-head, .section--band, .section--deep, .section--gradient, .press-contact, .press-targets, .cta {
    background: #fff !important; color: #000 !important; margin: 0 !important; border-radius: 0 !important;
  }
  .hero *, .page-head *, .section--band *, .section--deep *, .press-contact *, .press-targets *, .cta * { color: #000 !important; }
  .section { padding: 1.25rem 0 !important; }
  .card, .network__card, .phases__item, .press-boiler__item { box-shadow: none !important; break-inside: avoid; }
  .js-anim [data-reveal], .js-anim .reveal { opacity: 1 !important; transform: none !important; }
  a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: .8em; color: #555; }
}
@media (max-width: 520px) {
  .press-contact__lines li { grid-template-columns: 1fr; gap: .15rem; }
}

/* Cinque enti gestori: una riga sola sugli schermi larghi, con il
   monogramma sopra il testo perché le colonne sono strette. */
.network__grid:not(.network__grid--support) { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.network__grid:not(.network__grid--support) .network__card { flex-direction: column; gap: .85rem; padding: 1.35rem 1.25rem 1.5rem; }
.network__mono--long { font-size: .72rem; letter-spacing: .04em; }
@media (max-width: 600px) {
  .network__grid:not(.network__grid--support) .network__card { flex-direction: row; }
}

/* Due per riga, sempre: per gli elenchi da quattro, che a tre per riga
   lascerebbero una scheda sola in fondo. */
.grid--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .grid--pairs { grid-template-columns: 1fr; } }

/* Loghi degli enti: su una targhetta bianca, così si leggono anche sui
   fondi blu, e tutti alla stessa altezza ottica. */
.network__logo {
  width: auto;
  height: 3.6rem;
  max-width: 100%;
  padding: .45rem .6rem;
  object-fit: contain;
  object-position: left center;
  background: #fff;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(11, 42, 99, .08);
  box-sizing: border-box;
}
.network__grid:not(.network__grid--support) .network__logo { align-self: flex-start; max-width: 11rem; }
.network__card--support .network__logo { height: 3.4rem; max-width: 9rem; }

/* ==========================================================================
   AGENDA DELLA SETTIMANA — un giorno per riga
   ========================================================================== */
.agenda-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.agenda-filter__btn {
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  padding: .5rem 1rem;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.agenda-filter__btn:hover { border-color: var(--blue-600); }
.agenda-filter__btn.is-active { background: var(--blue-600); border-color: var(--blue-600); color: #fff; }
.agenda-filter__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

.agenda { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.agenda__day {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.5rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}
.agenda__day.is-today {
  margin-inline: -1rem;
  padding-inline: 1rem;
  border-radius: 18px;
  background: color-mix(in srgb, var(--coral) 7%, white);
  border-bottom-color: transparent;
}
.agenda__label { display: flex; flex-direction: column; gap: .35rem; padding-top: .55rem; }
.agenda__name { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--blue-900); line-height: 1.1; }
.agenda__today {
  width: fit-content;
  padding: .15rem .55rem;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.agenda__none { margin: 0; padding-top: .7rem; color: var(--ink-muted); font-size: .9rem; }
.agenda__day.is-empty .agenda__name { color: var(--ink-muted); }
.agenda__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.agenda__card {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1.1rem;
  padding: .9rem 1.1rem;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid rgba(11, 42, 99, .08);
  border-left: 4px solid var(--accent, var(--blue-600));
  color: var(--ink);
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
@media (hover: hover) {
  .agenda__card:hover { transform: translateX(3px); box-shadow: var(--shadow); color: var(--ink); }
}
.agenda__card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.agenda__time { display: flex; flex-direction: column; font-size: .85rem; color: var(--ink-muted); line-height: 1.3; }
.agenda__time time { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 600; color: var(--blue-900); letter-spacing: -.02em; }
.agenda__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.agenda__title { font-size: 1.05rem; color: var(--blue-900); line-height: 1.3; }
.agenda__meta { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: .875rem; color: var(--ink-soft); }
.agenda__tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; }
.agenda__day--request .agenda__name { font-size: 1.1rem; }
.agenda__item[hidden], .agenda__day[hidden] { display: none; }

.agenda-dated__title { margin: 2.5rem 0 1rem; font-size: 1.35rem; }
.agenda-dated { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.agenda-dated a {
  display: flex; gap: 1rem; align-items: center; padding: .9rem 1rem; border-radius: 16px;
  background: var(--surface); border: 1px solid rgba(11, 42, 99, .08); color: var(--ink); text-decoration: none;
}
.agenda-dated a strong { display: block; color: var(--blue-900); }
.agenda-dated__date {
  flex: none; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 14px;
  background: var(--coral-soft); color: var(--coral-dark); font-size: .72rem; font-weight: 700; text-transform: uppercase; line-height: 1;
}
.agenda-dated__date b { font-family: var(--font-serif); font-size: 1.4rem; }

@media (max-width: 720px) {
  .agenda__day { grid-template-columns: 1fr; gap: .6rem; }
  .agenda__label { flex-direction: row; align-items: center; gap: .6rem; padding-top: 0; }
  .agenda__none { padding-top: 0; }
  .agenda__card { grid-template-columns: 1fr; gap: .4rem; }
  .agenda__time { flex-direction: row; align-items: baseline; gap: .2rem; }
  .agenda__time time { font-size: 1.2rem; }
  .agenda__day.is-today { margin-inline: -.75rem; padding-inline: .75rem; }
}

/* ==========================================================================
   ACCESSIBILITÀ — contrasti WCAG 2.1 AA
   Verificati con axe-core: ogni testo arriva almeno a 4,5:1 sul suo fondo
   (3:1 per i titoli grandi). I colori del marchio restano per forme e
   decorazioni; per le scritte si usano le varianti più profonde.
   ========================================================================== */
:root {
  --ink-muted:  #5A6683;   /* era #7C89A6: 3,5:1 sul bianco, ora 5,7:1 */
  --coral-dark: #B8322C;   /* corallo per le scritte: 5,9:1 sul bianco */
  --warn:       #7A5806;
  --cta:        #D63A39;   /* fondo dei pulsanti con testo bianco: 4,6:1 */
  --cta-dark:   #B8322C;
}

.btn--primary {
  background: linear-gradient(180deg, var(--cta) 0%, #CC3433 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 20px -8px rgba(184, 50, 44, .6);
}
.btn--primary:hover {
  background: linear-gradient(180deg, #C9302F 0%, var(--cta-dark) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 12px 26px -8px rgba(184, 50, 44, .65);
}

/* Scritte che usavano il corallo pieno */
.timeline__period, .partner-group h3, .steps__num, .phases__years,
.press-file--doc .press-file__icon { color: var(--coral-dark); }
.phases__now, .agenda__today, .phases__item.is-current .phases__num { background: var(--cta); }

/* Numeri chiave: la scheda è bianca anche dentro le fasce blu */
.section--band .stats .stat__value,
.section--deep .stats .stat__value { color: var(--blue-900); }
.section--band .stats .stat__value span,
.section--deep .stats .stat__value span { color: inherit; }
.section--band .stats .stat__label,
.section--deep .stats .stat__label { color: var(--ink-soft); }
.stat__note { display: block; font-style: normal; color: var(--ink-muted); }

/* Orario delle attività: il colore del servizio diventa un segno, non il testo */
.activity-card__when {
  font-weight: 700;
  color: var(--blue-900);
  padding-left: .65rem;
  border-left: 3px solid var(--accent, var(--blue-600));
}

/* Età del servizio sul colore del servizio: testo scuro */
.service-card__age { color: var(--blue-900); }