/* ============================================================================
   SempliCert — HOME NEW · header + hero
   Markup VelociBuilder di https://www.semplicert.it/home-new
   Impostazione grafica derivata dalla bozza "Redesign Semplicert website"
   (design system Modernist), con adattamenti per il sito reale.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. FONT — Archivo (variabile, servito da Google Fonts)
   @font-face invece di @import: così il blocco funziona anche se incollato
   in fondo a un CSS esistente (@import verrebbe ignorato se non è in cima).
   --------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------------------
   2. TOKEN — prefisso --sc- per non collidere con le variabili di sito.css
   --------------------------------------------------------------------------- */
:root {
  --sc-font:          'Archivo', system-ui, -apple-system, sans-serif;

  --sc-bg:            #f4f6f9;
  --sc-surface:       #ffffff;
  --sc-text:          #14213d;
  --sc-divider:       #14213d;

  /* DUE RUOLI, DUE COLORI.
     Blu = informazione (superfici, dati, riquadro della rete, numeri).
     Rosso = azione (solo i pulsanti che portano a diventare partner).
     Tenere un colore solo per le azioni evita che la pagina si appiattisca
     su un'unica tinta, e fa saltare all'occhio i punti di conversione.

     Il blu nasce dalla tinta del marchio (#5890b0 = hsl 202 36% 52%): stessa
     tinta, saturazione alzata e luminosità abbassata quanto basta perché il
     testo bianco sopra regga (il brand puro si ferma a 3,48:1, sotto soglia).
     Così riquadro e targa del logo restano due gradini della stessa scala. */
  --sc-brand:         #5890b0;   /* il blu del logo, di riferimento */
  --sc-accent:        #307ba6;
  --sc-accent-400:    #6cacd0;
  --sc-accent-600:    #296a8f;
  --sc-accent-700:    #225777;

  /* IL COLORE DELLE AZIONI — il rosso di marca, che la bozza porta già come
     colore secondario. È caldo, quindi avanza rispetto al blu delle superfici:
     è questo, più del contrasto, a far leggere il pulsante come un'azione.
     Per cambiarlo basta riscrivere queste cinque righe; tutto il resto del
     foglio passa da qui.

     Alternativa già calcolata, se si volesse il viola dei palazzi
     dell'immagine dell'evento (tutti i valori sopra soglia):
       --sc-cta: #7b3fa0;  --sc-cta-600: #8c4ab5;  --sc-cta-700: #682f88;
       --sc-cta-bordo: #7b3fa0;  --sc-cta-ink: #ffffff;   */
  --sc-cta:           #cf2027;
  --sc-cta-600:       #b81b22;   /* hover  */
  --sc-cta-700:       #a5161d;   /* active */
  --sc-cta-bordo:     #cf2027;   /* sul fondo chiaro si stacca già 4,99:1 */
  --sc-cta-ink:       #ffffff;

  --sc-brand-red:     #cf2027;

  /* --- impaginazione, in un solo posto ---
     --sc-max è la larghezza del contenuto di header e hero. Le fasce colorate
     (barra dell'header, foto dell'hero) restano sempre a tutta larghezza: si
     ferma solo il contenuto.
       fino a 1440px  → il contenuto occupa tutta la larghezza utile
       da 1440 a 2280 → cresce col 92% dello schermo, margini uguali ai due lati
       oltre 2280px   → si ferma a 2100px
     È l'unico valore da toccare per stringere o allargare l'impaginazione. */
  --sc-max:           clamp(1440px, 92vw, 2100px);
  --sc-gutter:        clamp(20px, 5vw, 64px);
  --sc-hero-h:        clamp(420px, 52vw, 620px);
  --sc-nav-gap:       clamp(14px, 2.4vw, 36px);

  /* pila logo + riquadro azzurro nell'hero: larghezza e stacco fra i due */
  --sc-rete-w:        340px;
  --sc-logo-gap:      12px;

  /* misura delle icone: schede del catalogo e caselle "a chi si rivolge" */
  --sc-icona:         104px;
  --sc-icona-target:  64px;
}

/* ============================================================================
   3. HEADER  ( #head-new-princ )
   Colonne Bootstrap → una barra flex: logo a sinistra, voci + CTA a destra.
   ============================================================================ */

/* La fascia è a tutta larghezza; il padding sta sulla riga, che è l'elemento
   centrato — così il logo si allinea in verticale col testo dell'hero. */
#head-new-princ {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--sc-bg);
  border-bottom: 2px solid var(--sc-divider);
  padding: 0 !important;   /* !important: batte lo style inline di VelociBuilder */
  font-family: var(--sc-font);
}

#head-new-princ > .editor_riga {
  /* !important su display: le classi Bootstrap visible-xs/sm/md/lg-block
     presenti su righe e colonne impongono display:block !important */
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px var(--sc-nav-gap);
  max-width: var(--sc-max);
  margin-inline: auto;
  padding: 12px var(--sc-gutter);
}
#head-new-princ > .editor_riga::before,
#head-new-princ > .editor_riga::after { content: none; }   /* via il clearfix Bootstrap */

#head-new-princ > .editor_riga > .editor_colonna {
  float: none;
  width: auto;
  min-height: 0;
  padding: 0;
  position: static;   /* Bootstrap mette position:relative sulle col-*: il pannello
                         mobile del menu deve agganciarsi alla riga, non alla colonna */
}

/* --- logo (1ª colonna): spinge tutto il resto a destra --- */
#head-new-princ > .editor_riga > .editor_colonna:nth-child(1) { margin-right: auto; }
#head-new-princ .logo_header { line-height: 0; }
#head-new-princ .logo_header img {
  height: 34px !important;
  width: auto !important;
  max-width: none !important;
  display: block;
}

/* --- menu (2ª colonna) --- */
#head-new-princ .menu-princ-new .navbar,
#head-new-princ .menu-princ-new .navbar-default {
  position: static;   /* Bootstrap la mette relative: il pannello mobile si aggancerebbe a lei */
  background: none;
  border: 0;
  box-shadow: none;
  margin: 0;
  min-height: 0;
}
#head-new-princ .menu-princ-new .navbar-collapse {
  padding: 0;
  border: 0;
  box-shadow: none;
  margin: 0;
}
#head-new-princ .menu-princ-new .navbar-nav {
  display: flex !important;   /* batte lo style inline display:inline-block di VelociBuilder */
  align-items: center;
  gap: var(--sc-nav-gap);
  float: none;
  margin: 0;
}
#head-new-princ .menu-princ-new .navbar-nav > li { float: none; }
#head-new-princ .menu-princ-new .navbar-nav > li > a {
  padding: 0;
  background: none;
  font-family: var(--sc-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--sc-text);
  white-space: nowrap;
  transition: color .18s ease;
}
#head-new-princ .menu-princ-new .navbar-nav > li > a:hover,
#head-new-princ .menu-princ-new .navbar-nav > li > a:focus,
#head-new-princ .menu-princ-new .navbar-nav > .active > a {
  background: none;
  color: var(--sc-accent);
}

/* --- 3a. I PULSANTI ---------------------------------------------------------
   Queste regole NON sono legate all'header: valgono ovunque compaiano queste
   classi, perché descrivono un ruolo e non un posto. Servono così, dato che
   le stesse classi tornano nell'hero, nella fascia blu e nella sezione rete.

     .matt_header-1 e .matt_slider   → pieno, colore delle azioni
     .matt_header                    → contornato scuro, per fondi chiari
     .matt_slider_1                  → contornato bianco, per fondi scuri o colorati

   .matt_header-1 e .matt_slider fanno la stessa identica cosa: hanno due nomi
   solo perché sono nate in due punti diversi del layout. Se un giorno
   diventassero una classe sola qui si toglie una riga e basta.
   --------------------------------------------------------------------------- */
.matt_header > a,
.matt_header-1 > a,
.matt_slider > a,
.matt_slider_1 > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 9px 16px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.matt_header [id^="mattonella_text_container_"],
.matt_header-1 [id^="mattonella_text_container_"],
.matt_slider [id^="mattonella_text_container_"],
.matt_slider_1 [id^="mattonella_text_container_"] { margin: 0; }

.matt_header h4,
.matt_header-1 h4,
.matt_slider h4,
.matt_slider_1 h4 {
  margin: 0;
  font-family: var(--sc-font);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  color: inherit;
}

/* pieno, nel colore delle azioni */
.matt_header-1 > a,
.matt_slider > a {
  background: var(--sc-cta);
  border-color: var(--sc-cta-bordo);
  color: var(--sc-cta-ink);
}
.matt_header-1 > a:hover,
.matt_slider > a:hover {
  background: var(--sc-cta-600);
  border-color: var(--sc-cta);
  color: var(--sc-cta-ink);
}
.matt_header-1 > a:active,
.matt_slider > a:active {
  background: var(--sc-cta-700);
  border-color: var(--sc-cta-700);
}
.matt_header-1 h4,
.matt_slider h4 { color: var(--sc-cta-ink); }

/* contornato scuro — per i fondi chiari */
.matt_header > a {
  background: transparent;
  border-color: var(--sc-divider);
  color: var(--sc-text);
}
.matt_header > a:hover {
  background: color-mix(in srgb, var(--sc-text) 7%, transparent);
  color: var(--sc-text);
}
.matt_header > a:active { background: color-mix(in srgb, var(--sc-text) 14%, transparent); }
.matt_header h4 { color: var(--sc-text); }

/* contornato bianco — per i fondi scuri o colorati */
.matt_slider_1 > a {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
}
.matt_slider_1 > a:hover  { background: rgba(255,255,255,0.14); color: #ffffff; }
.matt_slider_1 > a:active { background: rgba(255,255,255,0.24); }
.matt_slider_1 h4 { color: #ffffff; }

.matt_slider > a:focus-visible,
.matt_slider_1 > a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* focus da tastiera */
#head-new-princ a:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}

/* ============================================================================
   4. HERO  ( #sfondo-home_new = sfondo · #layet-txt = contenuto )
   Le due righe sono sorelle: la prima diventa il livello di sfondo in
   position:absolute, la seconda il contenuto sopra.
   ============================================================================ */

/* contenitore dell'hero */
#hero-new {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 !important;
  border-bottom: 2px solid var(--sc-divider);
  font-family: var(--sc-font);
  color: #ffffff;
}

/* --- 4a. livello sfondo (a tutta larghezza) --- */
#sfondo-home_new {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
#sfondo-home_new > .editor_colonna {
  position: absolute;
  inset: 0;
  float: none;
  width: 100%;
  padding: 0 !important;
}
.home_new_img { position: absolute; inset: 0; }
.home_new_img img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  object-position: 62% 40%;
  filter: grayscale(1) contrast(1.05);
}
/* velatura scura: è quella che rende leggibile il testo bianco */
#sfondo-home_new::before { content: none; }   /* via il clearfix Bootstrap */
#sfondo-home_new::after {
  content: "";
  display: block;          /* Bootstrap mette display:table su .row::after: annullerebbe inset:0 */
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg,
              rgba(24,22,21,0.94)  0%,
              rgba(24,22,21,0.88) 34%,
              rgba(24,22,21,0.55) 62%,
              rgba(24,22,21,0.30) 100%);
}

/* --- 4b. livello contenuto (centrato e limitato a --sc-max) --- */
#layet-txt {
  position: relative;
  z-index: 2;
  max-width: var(--sc-max);
  margin-inline: auto;
  min-height: var(--sc-hero-h);
  padding: clamp(40px, 6vw, 104px) var(--sc-gutter) clamp(32px, 4vw, 64px);
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}
#layet-txt::before,
#layet-txt::after { content: none; }
#layet-txt > .editor_colonna {
  float: none;
  width: auto;
  padding: 0;
}
/* la colonna centrale vuota non deve occupare una cella della griglia */
#layet-txt > .editor_colonna:empty { display: none !important; }

/* Da desktop in su la colonna del testo prende lo spazio che avanza e il
   riquadro della rete resta della sua misura: il titolo sta su due righe. */
@media only screen and (min-width: 992px) {
  #layet-txt { grid-template-columns: minmax(0, 1fr) auto; }
}

/* colonna testo */
.col-txt-home-new {
  min-width: 0;
  font-size: 15px;   /* base per i ch dei paragrafi sotto */
}

/* riga interna: testo a tutta larghezza, poi i due pulsanti affiancati */
.col-txt-home-new > .editor_riga {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  row-gap: clamp(24px, 3vw, 32px);
  margin: 0;
}
.col-txt-home-new > .editor_riga::before,
.col-txt-home-new > .editor_riga::after { content: none; }
.col-txt-home-new > .editor_riga > .editor_colonna {
  float: none;
  width: auto;
  padding: 0;
}
.col-txt-home-new > .editor_riga > .editor_colonna:first-child { flex: 0 0 100%; }

/* --- 4c. testo dell'hero ---------------------------------------------------
   L'elemento testo di VelociBuilder produce <p> semplici, quindi lo stile è
   assegnato per posizione:
     p1        → occhiello (RETE DI SPORTELLI…)
     p2, p3    → titolo grande (la 3ª riga in azzurro)
     ultimo p  → paragrafo di testo
   Servono QUATTRO paragrafi. Gli a-capo dentro i paragrafi (<br>) sono
   rispettati: servono a decidere dove spezzare il titolo.
   --------------------------------------------------------------------------- */
.txt-hero-new {
  font-family: var(--sc-font);
  font-size: 15px;
  color: #ffffff;
}
.txt-hero-new p { margin: 0; }

/* occhiello */
.txt-hero-new p:first-child {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0 0 24px;
}

/* titolo — 2ª e 3ª riga (solo se non sono l'ultimo paragrafo) */
.txt-hero-new p:nth-child(2):not(:last-child),
.txt-hero-new p:nth-child(3):not(:last-child) {
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 0 -0.058em;   /* allineamento ottico del bordo sinistro */
}
/* la riga "Al tuo bancone." va in azzurro */
.txt-hero-new p:nth-child(3):not(:last-child) { color: var(--sc-accent-400); }

/* paragrafo di testo */
.txt-hero-new p:last-child {
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 400;
  line-height: 1.6;
  max-width: 46ch;
  margin: 28px 0 0;
  color: #ffffff;
}

/* --- 4e. blocco logo + riquadro "LA RETE OGGI · 200+" ----------------------
   Una colonna sola con due blocchi impilati:
     .col-rete-home-new
       ├ .editor_riga > .riga-logo-home-hero > .logo-home-hero > img
       └ .riga-txt-rete-hero > .editor_colonna > .txt-hero-rete  (3 paragrafi)
   Il logo ha già una targa bianca opaca: appoggiato sopra il riquadro azzurro
   fa da secondo blocco della pila, larghi uguali e a filo.
   --------------------------------------------------------------------------- */
.col-rete-home-new {
  justify-self: start;
  max-width: var(--sc-rete-w);
}

/* le due righe interne: via i margini negativi e il clearfix di Bootstrap */
.col-rete-home-new .editor_riga { margin: 0; }
/* lo stacco fra logo e riquadro azzurro */
.col-rete-home-new .riga-txt-rete-hero { margin-top: var(--sc-logo-gap); }
.col-rete-home-new .editor_riga::before,
.col-rete-home-new .editor_riga::after { content: none; }
.col-rete-home-new .editor_riga > .editor_colonna {
  float: none;
  width: 100%;
  padding: 0;
}

/* il logo — la targa bianca ce l'ha già dentro il file, quindi si legge sopra
   la foto senza aggiungere nulla. Occupa tutta la larghezza della colonna e
   sta staccato dal riquadro azzurro: senza stacco il contorno azzurro del
   marchio finirebbe contro l'azzurro del riquadro. */
.logo-home-hero { line-height: 0; }
.logo-home-hero img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

/* il riquadro azzurro */
.txt-hero-rete {
  padding: clamp(20px, 2.4vw, 32px);
  background: var(--sc-accent);
  color: #ffffff;
  font-family: var(--sc-font);
}
.txt-hero-rete [id^="testo_"] { color: #ffffff; }
.txt-hero-rete p { margin: 0; }

/* occhiello */
.txt-hero-rete p:first-child {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 16px;
}

/* il numero */
.txt-hero-rete p:nth-child(2) {
  font-size: clamp(56px, 6.4vw, 92px);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.04em;
  margin: 0 0 0 -0.05em;   /* allineamento ottico */
}

/* didascalia */
.txt-hero-rete p:nth-child(3) {
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 16px 0 0;
  max-width: 22ch;
}

/* ============================================================================
   5. RESPONSIVE
   ============================================================================ */

/* --- mobile: rimetti in piedi il menu (sito.css lo nasconde sotto i 768px) -- */
@media only screen and (max-width: 767px) {

  #head-new-princ > .editor_riga {
    position: relative;
    gap: 10px 16px;
    padding: 12px 18px;
  }

  /* Due righe: logo + hamburger sopra, i due pulsanti sotto a metà ciascuno.
     Lo stacco è forzato da uno pseudo-elemento largo il 100% inserito fra il
     secondo e il terzo elemento tramite `order`. */
  #head-new-princ > .editor_riga > .editor_colonna:nth-child(1) {
    flex: 1 1 auto;
    order: 1;
    margin-right: auto;
  }
  #head-new-princ > .editor_riga > .editor_colonna:nth-child(2) {
    flex: 0 0 auto;
    order: 2;
  }
  #head-new-princ > .editor_riga::after {
    content: "";
    display: block;
    flex: 0 0 100%;
    height: 0;
    order: 3;
    margin: 0;
  }
  #head-new-princ > .editor_riga > .editor_colonna:nth-child(3) { flex: 1 1 0; order: 4; min-width: 0; }
  #head-new-princ > .editor_riga > .editor_colonna:nth-child(4) { flex: 1 1 0; order: 5; min-width: 0; }

  #head-new-princ .logo_header img { height: 30px !important; }

  #head-new-princ .menu-princ-new .navbar.navbar-default { display: block !important; }
  #head-new-princ .menu-princ-new .navbar-header { float: none; margin: 0; }
  #head-new-princ .menu-princ-new .navbar-toggle {
    display: block;
    float: none;
    margin: 0;
    padding: 7px 9px;
    background: transparent;
    border: 1px solid var(--sc-divider);
    border-radius: 0;
  }
  #head-new-princ .menu-princ-new .navbar-toggle .icon-bar {
    width: 20px;
    height: 2px;
    border-radius: 0;
    background: var(--sc-text);
  }
  #head-new-princ .menu-princ-new .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }

  /* pannello a tendina agganciato al bordo inferiore dell'header */
  #head-new-princ .menu-princ-new .navbar-collapse {
    position: absolute;
    top: 100%;          /* la riga ha già 12px di padding sotto */
    left: 0;            /* il padding ora sta sulla riga: il pannello la copre esatta */
    right: 0;
    z-index: 60;
    padding: 12px 18px 16px;
    background: var(--sc-bg);
    border-bottom: 2px solid var(--sc-divider);
    box-shadow: 0 12px 32px rgba(20, 33, 61, 0.18);
    max-height: none;
    overflow: visible;
  }
  #head-new-princ .menu-princ-new .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  #head-new-princ .menu-princ-new .navbar-nav > li > a { padding: 2px 0; }

  /* i pulsanti riempiono la loro metà */
  #head-new-princ .matt_header > a,
  #head-new-princ .matt_header-1 > a { width: 100%; padding: 9px 10px; }
  #head-new-princ .matt_header h4,
  #head-new-princ .matt_header-1 h4 { font-size: 13px; }
}

/* --- hero su schermi stretti ----------------------------------------------- */
@media only screen and (max-width: 767px) {
  #layet-txt {
    align-items: start;
    padding-top: clamp(32px, 9vw, 64px);
  }
  /* il gradiente orizzontale non copre abbastanza in verticale su mobile */
  #sfondo-home_new::after {
    background: linear-gradient(180deg,
                rgba(24,22,21,0.92)  0%,
                rgba(24,22,21,0.88) 45%,
                rgba(24,22,21,0.80) 100%);
  }
  .col-rete-home-new { justify-self: stretch; max-width: 320px; }
}

/* ============================================================================
   6. SEZIONE NUMERI  ( #sez-numeri-home )
   Tre celle affiancate, separate da righe di 1px. I bordi sono disegnati con
   box-shadow invece che con border: così quelli di due celle adiacenti si
   sovrappongono e resta una riga sola, senza raddoppi.
   Struttura: #sez-numeri-home > .editor_riga > .col-numeri > .numeri-txt
   In ogni cella due paragrafi: 1) il numero  2) l'etichetta
   ============================================================================ */
#sez-numeri-home {
  background: var(--sc-bg);
  border-bottom: 2px solid var(--sc-divider);
  padding: 0 !important;   /* la fascia è a tutta larghezza, il contenuto no */
  font-family: var(--sc-font);
  color: var(--sc-text);
}

#sez-numeri-home > .editor_riga {
  display: grid !important;   /* batte il display:block !important di visible-*-block */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--sc-max);   /* stesso contenitore di header e hero */
  margin-inline: auto;
}
#sez-numeri-home > .editor_riga::before,
#sez-numeri-home > .editor_riga::after { content: none; }   /* via il clearfix Bootstrap */

.col-numeri {
  float: none;
  width: auto;
  min-width: 0;
  /* il padding orizzontale è la stessa gutter di header e hero: così il primo
     numero cade sulla verticale del titolo dell'hero */
  padding: clamp(24px, 3vw, 44px) var(--sc-gutter);
  box-shadow: 0 0 0 1px var(--sc-divider);
}

.numeri-txt [id^="testo_"] { font-family: var(--sc-font); }
.numeri-txt p { margin: 0; }

/* il numero */
.numeri-txt p:first-child {
  font-size: clamp(40px, 4.6vw, 64px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sc-accent);
}

/* l'etichetta */
.numeri-txt p:nth-child(2) {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sc-text) 70%, transparent);
  margin: 16px 0 0;
}

/* --- numeri su schermi stretti: una cella per riga ------------------------- */
@media only screen and (max-width: 767px) {
  #sez-numeri-home > .editor_riga { grid-template-columns: minmax(0, 1fr); }
  .col-numeri { padding-block: clamp(22px, 6vw, 32px); }
}

/* ============================================================================
   7. SEZIONE CATALOGO SERVIZI  ( #servizi-new )
   Due righe: l'intestazione (.txt-servizi-new, due paragrafi) e la lista
   schede di VelociBuilder (.lista-servizi-home-new).

   La lista genera markup Bootstrap 3 a colonne flottanti:
     .schede_bootstrap > .col-sm-3 > .thumbnail > .row(vuote) + .caption
   e infila un .clearfix ogni quattro schede. Qui diventa una griglia, quindi
   i .clearfix vanno nascosti: da elementi di griglia occuperebbero una cella.
   Anche i .row vuoti dentro le schede sono segnaposto per immagini che non
   ci sono: via.
   ============================================================================ */
#servizi-new {
  background: var(--sc-bg);
  border-bottom: 2px solid var(--sc-divider);
  padding: 0 !important;   /* la fascia è a tutta larghezza, il contenuto no */
  font-family: var(--sc-font);
  color: var(--sc-text);
}

#servizi-new > .editor_riga {
  max-width: var(--sc-max);   /* stesso contenitore delle altre sezioni */
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}
#servizi-new > .editor_riga::before,
#servizi-new > .editor_riga::after { content: none; }   /* via il clearfix Bootstrap */
#servizi-new > .editor_riga > .editor_colonna {
  float: none;
  width: 100%;
  padding: 0;
}

/* --- 7a. intestazione ------------------------------------------------------
   p1 → occhiello "Il catalogo"   p2 → titolo
   --------------------------------------------------------------------------- */
#servizi-new > .editor_riga:first-child { padding-top: clamp(40px, 5vw, 80px); }

.txt-servizi-new [id^="testo_"] { font-family: var(--sc-font); }
.txt-servizi-new p { margin: 0; }

/* Occhiello nel blu: il rosso resta alle sole azioni. */
.txt-servizi-new p:first-child {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-accent-700);
  margin: 0 0 20px;
}
.txt-servizi-new p:nth-child(2) {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(28px, 3.5vw, 48px);
  max-width: 26ch;
}

/* --- 7b. la griglia delle schede ------------------------------------------- */
/* Numero di colonne fissato invece che lasciato a auto-fit: le schede sono
   otto, e con auto-fit a 1440px ne entrano cinque, lasciando una seconda riga
   di 5+3 con due celle vuote. Quattro colonne danno due righe piene. */
.lista-servizi-home-new .schede_bootstrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 clamp(40px, 5vw, 72px);
}
@media only screen and (min-width: 600px) {
  .lista-servizi-home-new .schede_bootstrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (min-width: 900px) {
  .lista-servizi-home-new .schede_bootstrap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media only screen and (min-width: 1200px) {
  .lista-servizi-home-new .schede_bootstrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lista-servizi-home-new .schede_bootstrap::before,
.lista-servizi-home-new .schede_bootstrap::after { content: none; }
.lista-servizi-home-new .schede_bootstrap > .clearfix { display: none; }

.lista-servizi-home-new .col-sm-3 {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
}

/* --- 7c. la singola scheda -------------------------------------------------
   I bordi sono in box-shadow, non in border: quelli di due schede adiacenti
   si sovrappongono e resta una riga sola. Stesso espediente della sezione
   numeri.
   --------------------------------------------------------------------------- */
.lista-servizi-home-new .thumbnail {
  height: 100%;
  min-height: 240px;
  margin: 0;
  padding: 24px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--sc-divider);
  display: flex;
  flex-direction: column;
}
/* i segnaposto vuoti che la lista genera sopra e sotto la didascalia */
.lista-servizi-home-new .thumbnail > .row { display: none; }

/* L'icona della scheda. La lista le serve con uno style inline
   `width:100%; height:auto`: sono file da 600x600, quindi a tutta larghezza
   riempirebbero mezza scheda. Servono gli !important per batterlo. */
.lista-servizi-home-new .thumbnail > img {
  display: block;
  flex: none;
  width: var(--sc-icona) !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 0 16px;
}

.lista-servizi-home-new .caption {
  padding: 0;
  color: inherit;
  display: flex;
  flex-direction: column;
  flex: 1;   /* riempie la scheda: serve a spingere "Scopri di più" in fondo */
}
/* Il paragrafo di descrizione: alcune schede ce l'hanno fra il titolo e
   l'elenco (es. Checkroom), la maggior parte no e lascia un <p> vuoto. */
.lista-servizi-home-new .caption > p {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--sc-text) 82%, transparent);
}
.lista-servizi-home-new .caption > p:empty { display: none; }

/* Il titolo occupa sempre due righe anche quando ne riempie una: così la
   riga divisoria sotto cade alla stessa altezza in tutte le schede della
   riga. Il testo si appoggia in basso, quindi i titoli di una riga sola
   restano attaccati al loro elenco. */
.lista-servizi-home-new .caption h4 {
  margin: 0;
  min-height: 2.3em;            /* due righe a interlinea 1,15 */
  display: flex;
  align-items: flex-end;
  font-family: var(--sc-font);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--sc-text);
}

/* --- 7d. l'elenco dentro la scheda ----------------------------------------- */
.lista-servizi-home-new .caption ul {
  list-style: none;
  /* il margine sotto è lo stacco minimo da "Scopri di più": non può stare
     sul paragrafo, perché lì margin-top:auto lo azzererebbe */
  margin: 14px 0 18px;
  padding: 12px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--sc-text) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lista-servizi-home-new .caption li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--sc-text) 78%, transparent);
}
/* il quadratino dell'elenco */
.lista-servizi-home-new .caption li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  background: var(--sc-accent);
}

/* --- 7e. la riga "Scopri di più" e la scheda cliccabile --------------------
   È il <p> che sta dopo l'elenco. Va in fondo alla scheda, così tutte le
   schede della stessa riga hanno la scritta alla stessa altezza.
   Va nel rosso delle azioni, non nel blu: porta alla pagina del servizio, ed
   è quindi la stessa cosa che fa "Diventa Partner" nell'header. Il rosso qui
   non è decorazione, è la regola generale applicata a questa sezione — è
   anche l'unico rosso del catalogo, e basta a legarlo al resto della pagina.
   Il rosso pieno su fondo chiaro fa 4,99:1, sopra la soglia di 4,5 richiesta
   dai 13px. --------------------------------------------------------------- */
.lista-servizi-home-new .caption > ul ~ p {
  margin: auto 0 0;      /* in fondo alla scheda; lo stacco lo dà l'elenco sopra */
  align-self: flex-start; /* il riquadro è largo quanto la scritta, non quanto la scheda */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--sc-cta);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--sc-cta);
  transition: background .18s ease, color .18s ease;
}

/* la freccetta */
.lista-servizi-home-new .caption > ul ~ p::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}

/* SCHEDA CLICCABILE.
   Oggi nelle schede non c'è nessun <a>: niente cursore a manina né stati al
   passaggio del mouse, che sarebbero bugie. Le regole qui sotto si accendono
   da sole il giorno in cui la scheda avrà il suo link, e valgono in entrambi
   i modi in cui VelociBuilder può metterlo: dentro la scheda o avvolgendola. */
.lista-servizi-home-new .thumbnail { position: relative; }

/* un link dentro la scheda si allarga a coprirla tutta */
.lista-servizi-home-new .thumbnail a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lista-servizi-home-new .caption a {
  color: inherit;
  text-decoration: none;
}

.lista-servizi-home-new .thumbnail:has(a):hover,
.lista-servizi-home-new a:hover > .thumbnail {
  z-index: 1;   /* il contorno colorato deve passare sopra quello dei vicini */
  background: color-mix(in srgb, var(--sc-cta) 4%, transparent);
  box-shadow: 0 0 0 1px var(--sc-cta);
}
/* al passaggio del mouse il riquadro si riempie, come i pulsanti contornati
   dell'hero: è il segnale principale, la velatura della scheda lo accompagna */
.lista-servizi-home-new .thumbnail:has(a):hover .caption > ul ~ p,
.lista-servizi-home-new a:hover > .thumbnail .caption > ul ~ p {
  background: var(--sc-cta);
  color: #ffffff;
}
.lista-servizi-home-new .thumbnail:has(a):hover .caption > ul ~ p::after,
.lista-servizi-home-new a:hover > .thumbnail .caption > ul ~ p::after {
  transform: translateX(4px) rotate(45deg);
}

/* messa a fuoco da tastiera */
.lista-servizi-home-new .thumbnail:has(a:focus-visible),
.lista-servizi-home-new a:focus-visible > .thumbnail {
  z-index: 1;
  outline: 2px solid var(--sc-cta);
  outline-offset: 2px;
}

/* --- 7f. schede su schermi stretti ----------------------------------------- */
@media only screen and (max-width: 767px) {
  .lista-servizi-home-new .thumbnail {
    min-height: 0;
    padding: 20px;
  }
  .lista-servizi-home-new .thumbnail > img { margin-bottom: 12px; }
}

/* Sotto i 600px le schede stanno in colonna singola: non c'è più niente da
   allineare in orizzontale, quindi il titolo torna alla sua altezza naturale
   invece di riservare due righe. */
@media only screen and (max-width: 599px) {
  .lista-servizi-home-new .caption h4 {
    min-height: 0;
    display: block;
  }
}

/* ============================================================================
   8. FASCIA BLU  ( #fascia-blu )
   Il richiamo prima della chiusura: campo pieno di colore, titolo grande in
   bianco e un pulsante contornato.

   Il pulsante riusa .matt_slider_1, la stessa classe di "I nostri sportelli"
   nell'hero: le regole della sezione 4d valgono già qui, ed è giusto così —
   contornato bianco su fondo colorato è lo stesso ruolo nei due punti.
   ============================================================================ */
#fascia-blu {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--sc-accent);   /* solo il colore: l'immagine arriva
                                           dallo style inline dell'editor e non
                                           va azzerata da una scorciatoia */
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  color: #ffffff;
  padding: 0 !important;   /* la fascia è a tutta larghezza, il contenuto no */
  font-family: var(--sc-font);
}

/* LA FOTO, in bianco e nero come quella dell'hero.
   Sta in uno pseudo-elemento e non sull'elemento stesso perché il filtro
   deve desaturare la foto, non il testo che ci sta sopra. L'immagine la
   eredita con background-image:inherit dallo style che mette l'editor —
   così la si cambia dal backoffice senza toccare il foglio di stile. */
#fascia-blu::before {
  content: "";
  display: block;   /* Bootstrap mette display:table sugli pseudo di
                       .container-fluid, e una tabella si dimensiona sul
                       contenuto: con inset:0 nascerebbe larga 0 */
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: inherit;
  background-size: cover;
  background-position: center 45%;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.05);
}

/* IL VELO AZZURRO.
   Costruito su --sc-accent-700 e non sull'accento pieno: sopra le zone
   chiare della foto (la vetrina, il bancone bianco) l'accento pieno regge
   il testo bianco solo 4,38:1 anche al 96% di opacità, sotto la soglia di
   4,5 richiesta dal testo del pulsante. Il 700 arriva a 5,95:1.
   Più fitto a sinistra, dove stanno titolo e pulsante; più trasparente a
   destra, dove si lascia respirare la fotografia. */
#fascia-blu::after {
  content: "";
  display: block;   /* come sopra */
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
              rgba(34, 87, 119, 0.95)  0%,
              rgba(34, 87, 119, 0.90) 45%,
              rgba(48, 123, 166, 0.74) 75%,
              rgba(48, 123, 166, 0.58) 100%);
}

#fascia-blu > .editor_riga {
  display: flex !important;   /* batte il display:block !important di visible-*-block */
  flex-wrap: wrap;
  max-width: var(--sc-max);   /* stesso contenitore delle altre sezioni */
  margin-inline: auto;
  padding: clamp(56px, 8.5vw, 140px) var(--sc-gutter);   /* alto: la fascia
                          deve mostrare abbastanza scena da reggere il
                          confronto con l'hero, non una striscia sottile */
}
#fascia-blu > .editor_riga::before,
#fascia-blu > .editor_riga::after { content: none; }   /* via il clearfix Bootstrap */

#fascia-blu > .editor_riga > .editor_colonna {
  float: none;
  width: auto;
  padding: 0;
}
/* il testo prende tutta la riga, il pulsante va a capo sotto */
#fascia-blu > .editor_riga > .editor_colonna:first-child { flex: 0 0 100%; }
#fascia-blu > .editor_riga > .editor_colonna:nth-child(2) {
  flex: 0 0 auto;
  margin-top: 36px;
}

/* --- 8a. il titolo ---------------------------------------------------------
   Due paragrafi, stessa misura: sono le due righe di un titolo solo.
   --------------------------------------------------------------------------- */
.txt-fascia [id^="testo_"] {
  font-family: var(--sc-font);
  color: #ffffff;
}
.txt-fascia p {
  margin: 0 0 0 -0.058em;   /* allineamento ottico del bordo sinistro */
  font-size: clamp(32px, 4.4vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: #ffffff;
}

/* --- 8b. fascia su schermi stretti ----------------------------------------- */
@media only screen and (max-width: 767px) {
  #fascia-blu > .editor_riga > .editor_colonna:nth-child(2) { margin-top: 28px; }
  /* in verticale il testo occupa tutta la larghezza: il velo diventa
     uniforme, come nell'hero */
  #fascia-blu::after {
    background: linear-gradient(180deg,
                rgba(34, 87, 119, 0.94)  0%,
                rgba(34, 87, 119, 0.90) 60%,
                rgba(34, 87, 119, 0.86) 100%);
  }
}

/* ============================================================================
   9. A CHI SI RIVOLGE  ( #target )
   Due colonne: a sinistra il testo (.txt-target), a destra una griglia di
   caselle con il solo nome della categoria, generata dalla lista schede.
   ============================================================================ */
#target {
  background: var(--sc-bg);
  border-bottom: 2px solid var(--sc-divider);
  padding: 0 !important;
  font-family: var(--sc-font);
  color: var(--sc-text);
}
#target > .editor_riga {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  max-width: var(--sc-max);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 80px) var(--sc-gutter);
}
#target > .editor_riga::before,
#target > .editor_riga::after { content: none; }
#target > .editor_riga > .editor_colonna {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
}

/* --- 9a. il blocco di testo -------------------------------------------------
   .txt-target è usata sia qui sia nella sezione della rete: stesso ruolo,
   una regola sola.  p1 occhiello · p2 titolo · p3 testo
   --------------------------------------------------------------------------- */
.txt-target [id^="testo_"] { font-family: var(--sc-font); }
.txt-target p { margin: 0; }

.txt-target p:first-child {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-accent-700);
  margin: 0 0 20px;
}
.txt-target p:nth-child(2) {
  font-size: clamp(26px, 3.1vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
  max-width: 22ch;
}
.txt-target p:nth-child(3) {
  font-size: 15px;
  line-height: 1.65;
  max-width: 48ch;
  color: color-mix(in srgb, var(--sc-text) 78%, transparent);
}

/* --- 9b. la griglia delle categorie ----------------------------------------
   Stessa lista schede del catalogo, ma qui ogni casella ha solo l'icona e il
   nome. Valgono le stesse pulizie: via i .clearfix e i .row segnaposto, e
   l'immagine va rimpicciolita perché arriva a 400x400 con width:100% inline.
   --------------------------------------------------------------------------- */
.lista-target .schede_bootstrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  margin: 0;
}
.lista-target .schede_bootstrap::before,
.lista-target .schede_bootstrap::after { content: none; }
.lista-target .schede_bootstrap > .clearfix { display: none; }

.lista-target .col-sm-4 {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
}
.lista-target .thumbnail {
  height: 100%;
  margin: 0;
  padding: 18px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--sc-divider);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.lista-target .thumbnail > .row { display: none; }

/* l'icona: !important per battere lo style inline width:100% della lista */
.lista-target .thumbnail > img {
  display: block;
  flex: none;
  width: var(--sc-icona-target) !important;
  height: auto !important;
  max-width: none !important;
  margin: 0;
}

.lista-target .caption { padding: 0; color: inherit; margin-top: auto; }
.lista-target .caption h4 {
  margin: 0;
  font-family: var(--sc-font);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  color: var(--sc-text);
}
/* l'ultima casella ("e attività analoghe") è la chiusura aperta: in accento */
.lista-target .schede_bootstrap > div:last-child .caption h4 {
  color: var(--sc-accent-700);
}

/* ============================================================================
   10. LA RETE  ( #rete )
   Due colonne a filo: a sinistra il testo e il pulsante, a destra la grafica
   della rete dentro .mappa-new.
   La mappa Leaflet e l'elenco nascosto dei rivenditori non ci sono più: la
   pagina è passata da 318 a 46 KB. La ricerca vera vive sulla sua pagina.
   ============================================================================ */
#rete {
  background: var(--sc-bg);
  border-bottom: 2px solid var(--sc-divider);
  padding: 0 !important;
  font-family: var(--sc-font);
  color: var(--sc-text);
}
#rete > .editor_riga {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: stretch;
  max-width: var(--sc-max);
  margin-inline: auto;
}
#rete > .editor_riga::before,
#rete > .editor_riga::after { content: none; }
#rete > .editor_riga > .editor_colonna {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
}

/* colonna sinistra: testo centrato in verticale rispetto alla grafica.
   !important sul display: senza, le classi visible-*-block di Bootstrap
   rimettono display:block e la centratura non ha effetto — in silenzio. */
#rete > .editor_riga > .editor_colonna:first-child {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 4vw, 72px) var(--sc-gutter);
  box-shadow: 0 0 0 1px var(--sc-divider);
}
/* le righe annidate dentro le colonne: via margini negativi e clearfix */
#rete .editor_riga .editor_riga { margin: 0; }
#rete .editor_riga .editor_riga::before,
#rete .editor_riga .editor_riga::after { content: none; }
#rete .editor_riga .editor_riga > .editor_colonna {
  float: none;
  width: 100%;
  padding: 0;
}
/* il pulsante "Cerca uno sportello" */
#rete > .editor_riga > .editor_colonna:first-child > .editor_colonna {
  float: none;
  width: auto;
  align-self: flex-start;
  padding: 0;
  margin-top: 0;
}
/* stacco fra il testo e il pulsante */
#rete .txt-target { margin-bottom: 28px; }

/* colonna destra: contiene la grafica */
#rete > .editor_riga > .editor_colonna:nth-child(2) {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 0 0 1px var(--sc-divider);
}
/* la riga rimasta vuota sotto la grafica non deve occupare spazio */
#rete > .editor_riga > .editor_colonna:nth-child(2) > .editor_riga:last-child:not(:first-child) {
  display: none;
}

/* --- 10a. LA GRAFICA DELLA RETE  ( .mappa-new > .mappa-sc ) -----------------
   Riempie la colonna da bordo a bordo, come nel campione della bozza:
     · i paesi vicini tracciati con un filo leggero, per riempire il quadro
       e dare contesto — è quello che dà "presenza" alla riga
     · l'Italia a solo contorno, 2px, senza campitura
     · un quadrato per ogni zona coperta, in tre misure secondo il numero di
       sportelli (7,5 / 11 / 15 px). Quadrati e non cerchi: è il linguaggio
       del resto della pagina.

   Il markup porta solo le classi: colori e misure stanno qui, così si
   cambiano senza reincollare l'HTML nell'editor.
   --------------------------------------------------------------------------- */
.mappa-new { width: 100%; }

.mappa-sc {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
}
/* Il disegno riempie sempre il riquadro, a ogni larghezza.
   Il viewBox è 980x560, cioè proporzione 1,75: la stessa che ha la colonna
   alla larghezza massima del contenuto (1050 x 600). Tenendo l'altezza
   libera, la mappa combacia con la colonna invece di lasciare due fasce
   vuote ai lati — che è quello che succedeva prima, quando l'inquadratura
   era più stretta (1,39) e serviva un max-height a contenerne l'altezza.
   L'altezza massima ora arriva da sola a 600px e non serve più limitarla. */
.mappa-sc-disegno {
  display: block;
  width: 100%;
  height: auto;
}

/* i paesi intorno: solo contesto, non devono competere */
.mappa-sc-vicini {
  fill: none;
  stroke: color-mix(in srgb, var(--sc-text) 15%, transparent);
  stroke-width: 1;
  stroke-linejoin: round;
}
/* l'Italia: contorno pieno, niente campitura */
.mappa-sc-terra {
  fill: none;
  stroke: var(--sc-text);
  stroke-width: 2;
  stroke-linejoin: round;
}
/* gli sportelli */
.mappa-sc-punti rect {
  fill: var(--sc-accent);
  transition: fill .18s ease;
}
.mappa-sc:hover .mappa-sc-punti rect { fill: var(--sc-cta); }
.mappa-sc:focus-visible {
  outline: 2px solid var(--sc-cta);
  outline-offset: -2px;
}

/* --- 10a-bis. IL PULSANTE ROSSO CONTORNATO  ( .btn-rosso ) ------------------
   Da assegnare nell'editor alla mattonella "Cerca uno sportello" al posto di
   .matt_header. È la stessa forma dei "Scopri di più" delle schede: azione
   secondaria, rossa e contornata. Così la sezione ha un invito solo, nella
   colonna del testo, e la mappa resta il disegno.
   --------------------------------------------------------------------------- */
.btn-rosso > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--sc-cta);
  background: transparent;
  color: var(--sc-cta);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.btn-rosso h4 {
  margin: 0;
  font-family: var(--sc-font);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: inherit;
}
.btn-rosso > a::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .18s ease;
}
.btn-rosso > a:hover {
  background: var(--sc-cta);
  color: #ffffff;
}
.btn-rosso > a:hover::after { transform: translateX(4px) rotate(45deg); }
.btn-rosso > a:focus-visible { outline: 2px solid var(--sc-cta); outline-offset: 2px; }

/* --- 10b. su schermi stretti ------------------------------------------------ */
@media only screen and (max-width: 767px) {
  #rete > .editor_riga > .editor_colonna:first-child { padding-block: clamp(28px, 8vw, 44px); }
  /* in colonna singola la mappa sarebbe alta poco più di 200px: le do un po'
     di respiro lasciando che il disegno si allarghi oltre il riquadro */
  #rete > .editor_riga > .editor_colonna:nth-child(2) { padding-block: 18px; }
}

/* ============================================================================
   11. FOOTER  ( #footer-new )
   Tre colonne: logo e sede · contatti · social.
   .txt-footer-new è la stessa classe in tutte e tre, ma i blocchi non hanno
   la stessa forma: nella prima colonna i tre paragrafi sono l'indirizzo,
   nella seconda e nella terza il primo paragrafo è un'etichetta
   ("CONTATTI", "SOCIAL"). Per questo l'occhiello è agganciato per posizione
   della colonna e non alla classe.
   ============================================================================ */
#footer-new {
  background: var(--sc-bg);
  border-top: 2px solid var(--sc-divider);
  padding: 0 !important;
  font-family: var(--sc-font);
  color: var(--sc-text);
}
/* Numero di colonne fissato invece che lasciato a auto-fit: le colonne sono
   quattro, e con auto-fit intorno ai 1000px ne entrano tre — la quarta
   restava orfana su una seconda riga, da sola a sinistra. Con 4/2/1 le righe
   sono sempre piene, perché quattro si divide sia per due sia per uno.
   Le colonne sono allineate al centro fra loro: hanno altezze molto diverse
   (il logo con l'indirizzo è il doppio delle altre) e allineate in alto le
   etichette non si appoggiavano a niente. */
#footer-new > .editor_riga {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px clamp(24px, 4vw, 64px);
  align-items: center;
  max-width: var(--sc-max);
  margin-inline: auto;
  padding: clamp(32px, 4vw, 56px) var(--sc-gutter);
}
@media only screen and (min-width: 600px) {
  #footer-new > .editor_riga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (min-width: 1000px) {
  #footer-new > .editor_riga { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
#footer-new > .editor_riga::before,
#footer-new > .editor_riga::after { content: none; }
#footer-new > .editor_riga > .editor_colonna {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
}
/* le righe annidate dentro le colonne */
#footer-new .editor_riga .editor_riga { margin: 0; }
#footer-new .editor_riga .editor_riga::before,
#footer-new .editor_riga .editor_riga::after { content: none; }
#footer-new .editor_riga .editor_riga > .editor_colonna {
  float: none;
  width: 100%;
  padding: 0;
}

/* --- 11a. il logo ----------------------------------------------------------- */
.img-footer-new { line-height: 0; margin-bottom: 18px; }
.img-footer-new img {
  display: block;
  height: 30px !important;
  width: auto !important;
  max-width: none !important;
}

/* --- 11b. i testi ----------------------------------------------------------- */
.txt-footer-new [id^="testo_"] { font-family: var(--sc-font); }
.txt-footer-new p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--sc-text);
}
/* i link di contatto */
.txt-footer-new a {
  color: var(--sc-text);
  text-decoration: none;
  transition: color .18s ease;
}
.txt-footer-new a:hover { color: var(--sc-accent-700); }
.txt-footer-new a:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 2px;
}

/* l'occhiello: solo nella seconda e terza colonna, dove il primo paragrafo
   è un'etichetta e non una riga di indirizzo */
#footer-new > .editor_riga > .editor_colonna:nth-child(n+2) .txt-footer-new p:first-child {
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-accent-700);
  margin: 0 0 12px;
}

/* --- 11c. i due pulsanti ---------------------------------------------------
   Impilati e larghi uguali: stacchi di larghezza diversa, uno sotto l'altro,
   si vedono subito.
   --------------------------------------------------------------------------- */
#footer-new .matt_header > a,
#footer-new .matt_header-1 > a {
  width: 100%;
  max-width: 190px;
}
#footer-new .matt_header,
#footer-new .matt_header-1 { margin-top: 8px; }
#footer-new .matt_header-1 { margin-top: 0; }

/* --- 11d. i social ---------------------------------------------------------- */
/* la riga che li contiene torna in linea invece che a colonne Bootstrap */
#footer-new > .editor_riga > .editor_colonna:last-child .editor_riga:last-child {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
}
#footer-new > .editor_riga > .editor_colonna:last-child .editor_riga:last-child > .editor_colonna {
  width: auto;
  flex: 0 0 auto;
}
.social-footer { line-height: 0; }
.social-footer img {
  display: block;
  width: 26px !important;
  height: 26px !important;
  max-width: none !important;
  opacity: 0.82;   /* i file sono neri pieni: così non pesano più dell'inchiostro */
  transition: opacity .18s ease;
}
.social-footer img:hover { opacity: 1; }

/* --- 11e. l'ultima colonna si appoggia al margine destro --------------------
   Le quattro colonne sono già simmetriche (partono a 294px dal bordo sinistro
   e finiscono a 294px da quello destro), ma il contenuto dell'ultima — due
   icone larghe in tutto 64px in una colonna da 445 — restava a sinistra e
   lasciava un vuoto di quasi 400px prima del margine. Il footer sembrava
   spostato a sinistra rispetto alle sezioni sopra, che arrivano a filo.
   Allineandolo a destra il footer si aggancia a tutti e due i margini.

   I pulsanti restano a sinistra: portando a destra anche loro si apre un
   buco fra i contatti e le mattonelle, e si perde la lettura da sinistra.

   Solo da due colonne in su: in colonna singola non c'è un margine destro
   da agganciare e il testo a destra sembrerebbe un errore.
   --------------------------------------------------------------------------- */
@media only screen and (min-width: 600px) {
  #footer-new > .editor_riga > .editor_colonna:last-child { text-align: right; }
  #footer-new > .editor_riga > .editor_colonna:last-child .editor_riga:last-child {
    justify-content: flex-end;
  }
}

/* --- 11f. su schermi stretti ------------------------------------------------ */
@media only screen and (max-width: 767px) {
  #footer-new > .editor_riga { gap: 24px; }
}