/**
 * SOLANO Traslochi — Tema del sito
 * Foglio di stile: identità visiva della landing estesa a tutto il sito
 * Servizio offerto da SEOWEB
 *
 * Un solo file, nessun build step, variabili CSS in :root.
 * Ordine: fondamenta → impaginazione → componenti → blocchi → piede →
 * adattamento agli schermi piccoli.
 */

/* =====================================================================
   FONDAMENTA
   ===================================================================== */
:root {
  --blu:        #1657A2;
  --blu-testata: #0159A4;
  --blu-scuro:  #0F4587;
  --blu-chiaro: #EAF1F9;
  --magenta:    #D31B57;
  --magenta-scuro: #B21247;
  --giallo:     #E3AF20;
  --testo:      #333333;
  --grigio:     #6B7280;
  --bordo:      #E3EAF2;
  --verde:      #1B8A4B;
  --bianco:     #FFFFFF;
  --sfondo:     #FFFFFF;

  --raggio:       16px;
  --raggio-card:  20px;
  --raggio-pill:  999px;

  --colonna:   1180px;
  --colonna-stretta: 760px;

  --ombra:       0 6px 24px rgba(15, 44, 78, .08);
  --ombra-forte: 0 14px 40px rgba(15, 44, 78, .16);

  --titoli: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --testo-font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

/* Un elemento con l'attributo hidden deve sparire anche quando una regola
   successiva gli dà un display: senza questo il banner dei cookie mostrerebbe
   subito le caselle che dovrebbero comparire solo dopo «Personalizza». */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--testo-font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--testo);
  background: var(--sfondo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--titoli);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 .5em;
  color: var(--blu-scuro);
}
h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }

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

a { color: var(--blu); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--magenta); }

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

/* La messa a fuoco si deve vedere: chi naviga da tastiera non deve indovinare. */
:focus-visible {
  outline: 3px solid var(--giallo);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Chi ha chiesto meno movimento, meno movimento avrà. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =====================================================================
   IMPAGINAZIONE
   ===================================================================== */
.contenitore {
  width: 100%;
  max-width: var(--colonna);
  margin: 0 auto;
  padding: 0 22px;
}
.contenitore.stretto { max-width: var(--colonna-stretta); }

.sezione { padding: clamp(46px, 7vw, 84px) 0; }
.sezione-chiara { background: var(--blu-chiaro); }
.sezione + .sezione-chiara,
.sezione-chiara + .sezione { }

.griglia-due {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.griglia-due.invertita > *:first-child { order: 2; }

.testo { font-size: 1.05rem; }
.testo.centrato { text-align: center; margin-left: auto; margin-right: auto; }
.testo.stretto { max-width: var(--colonna-stretta); }
.testo ul, .testo ol { padding-left: 1.3em; margin: 0 0 1em; }
.testo li { margin-bottom: .4em; }
.testo h2, .testo h3 { margin-top: 1.2em; }
.testo-grande { font-size: 1.15rem; }

.titolo-sezione { margin-bottom: 28px; }

/* L'introduzione di una sezione non deve restare incollata alla griglia che
   la segue. Vale solo per il testo introduttivo — quello che ha qualcosa
   sotto — e non per il blocco di testo semplice, che è l'ultimo figlio. */
.sezione .contenitore > .testo:not(:last-child),
.sezione .contenitore > .testo-grande:not(:last-child) {
  margin-bottom: clamp(24px, 3vw, 34px);
}
.titolo-sezione.centrato { text-align: center; }
.titolo-sezione h2 { margin-bottom: 0; }

.occhiello {
  display: inline-block;
  font-family: var(--titoli);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 8px;
}
.occhiello.chiaro { color: var(--giallo); }

.figura img { border-radius: var(--raggio-card); box-shadow: var(--ombra); }
.arrotondata { border-radius: var(--raggio-card); }

/* =====================================================================
   BOTTONI
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--raggio-pill);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: translateY(1px); }
.btn-magenta { background: var(--magenta); color: #fff; }
.btn-magenta:hover { background: var(--magenta-scuro); color: #fff; }
.btn-blu { background: var(--blu); color: #fff; }
.btn-blu:hover { background: var(--blu-scuro); color: #fff; }
.btn-giallo { background: var(--giallo); color: #4a3300; }
.btn-giallo:hover { filter: brightness(1.07); color: #4a3300; }
.btn-vuoto { background: transparent; color: var(--blu); border-color: currentColor; }
.btn-vuoto:hover { background: var(--blu); color: #fff; border-color: var(--blu); }
.btn.grande { padding: 16px 34px; font-size: 1.05rem; }
.btn.piccolo { padding: 10px 20px; font-size: .9rem; }

.bottoni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 50px; }
.bottoni:empty { display: none; }
.bottoni.centrati { justify-content: center; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  background: var(--blu-scuro) center/cover no-repeat;
  color: #fff;
  padding: clamp(80px, 9vw, 110px) 0;
  /* L'immagine arriva da una variabile scritta in linea sul blocco: una
     regola in linea non può contenere una media query, e senza variabile
     servirebbe un <style> per ogni hero. Vedi sol_sfondo_stile(). */
  background-image: var(--sfondo-foto, none);
}
.hero-bassa { padding: clamp(40px, 6vw, 70px) 0; }
.hero-alta  { padding: clamp(70px, 12vw, 150px) 0; }
.hero h1 { color: #fff; }
.hero .testo-grande { color: rgba(255, 255, 255, .92); }
/* Solo la colonna di testo dell'hero sta su fondo scuro: dentro il riquadro
   bianco del modulo i link devono restare blu, altrimenti sono bianchi su
   bianco e spariscono (è successo con la nota del reCAPTCHA). */
/* :not(.btn) è indispensabile: senza, questa regola vince sul colore del
   bottone e un «btn-giallo» dentro l'hero si ritrova il testo bianco su
   fondo giallo. */
.hero-testo a:not(.btn) { color: #fff; }
.hero-modulo a { color: var(--blu); }
.hero-modulo a:hover { color: var(--magenta); }

.hero-griglia { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
.hero-con-modulo .hero-griglia { grid-template-columns: 1.05fr .95fr; }
.hero-modulo {
  background: #fff;
  color: var(--testo);
  border-radius: var(--raggio-card);
  padding: 24px;
  box-shadow: var(--ombra-forte);
}

/* =====================================================================
   CARD
   ===================================================================== */
.griglia-card { display: grid; gap: 22px; --min-colonna: 240px; }

.card {
  display: block;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-card);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--ombra-forte); }
.card-foto { aspect-ratio: 4 / 3; background: var(--blu-chiaro); }
.card-foto img { width: 100%; height: 100%; object-fit: cover; }

/* --- come si vede l'immagine di una card dei servizi ---------------------
   La classe sta sulla griglia, non sulla singola card: è una scelta
   d'insieme, e riquadri di forma diversa nella stessa fila non sono una
   scelta, sono un errore che si nota. «cover» non ha una classe — è come si
   vedeva prima che la scelta esistesse, quindi nessuna pagina già scritta si
   rimpagina da sola.
   Tutte le regole passano da .griglia-card: quella griglia la usa anche
   l'elenco del blog, e una regola scritta sul solo .card-foto andrebbe a
   vestire anche le card degli articoli. */
.griglia-card.card-foto-neutra .card-foto { background: #fff; }
.griglia-card.card-foto-neutra .card-foto img { object-fit: contain; }
.griglia-card.card-foto-quadrata .card-foto { aspect-ratio: 1 / 1; }
.griglia-card.card-foto-panorama .card-foto { aspect-ratio: 16 / 9; }
/* «Com'è fatta»: il riquadro sparisce e l'altezza la decide la foto. Il
   rapporto non si scrive: l'altezza dell'immagine torna automatica e se la
   ricava il browser dagli attributi width/height del tag, che è proprio
   quello che tiene ferma la pagina mentre la foto arriva. */
.griglia-card.card-foto-naturale .card-foto { aspect-ratio: auto; }
.griglia-card.card-foto-naturale .card-foto img { height: auto; }

.card-testo { padding: 18px 20px 22px; }
.card-testo h3 { margin-bottom: .35em; }
.card-testo p, .card-testo .voce-testo { font-size: .95rem; color: var(--grigio); margin: 0; }
/* Il bottone in fondo alla card. Dentro una card cliccabile è uno <span> con
   la stessa grafica: due collegamenti annidati il browser non li tiene. */
.card-bottoni { margin-top: 16px; }
.card-link {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: .92rem;
  color: var(--magenta);
}

/* =====================================================================
   NUMERI
   Stessa resa della striscia «fiducia» della landing: cifre grandi in blu,
   il più in magenta sopra la riga, la stella in giallo, didascalia sotto.
   ===================================================================== */
/* Il colore di fondo arriva dalle classi .sfondo-* più in basso: sono le
   stesse del richiamo all'azione, così i due blocchi offrono gli stessi
   colori invece di tre ciascuno, diversi fra loro. */
.striscia-numeri { padding: 50px 0 50px; background: #fff; }
.numeri-griglia {
  display: grid;
  --min-colonna: 160px;
  gap: 20px;
  text-align: center;
}
.numero b {
  display: block;
  font-family: var(--titoli);
  font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 3.5rem);
  color: var(--blu);
  line-height: 1.05;
  letter-spacing: .02em;
}
.numero b em { font-style: normal; color: var(--giallo); margin-left: 5px; }
.numero b sup {
  font-size: 1.3em;
  color: var(--magenta);
  font-weight: 600;
  top: -.7em;
  line-height: 1px;
  vertical-align: baseline;
  margin-left: 2px;
}
.numero span {
  display: block;
  font-size: .92rem;
  font-weight: 700;
  color: var(--grigio);
  letter-spacing: .05em;
  margin-top: 10px;
}
/* Sui fondi pieni si ribalta tutto, altrimenti il blu su blu sparisce. */
.striscia-numeri.sfondo-blu .numero b,
.striscia-numeri.sfondo-blu_scuro .numero b,
.striscia-numeri.sfondo-magenta .numero b,
.striscia-numeri.sfondo-scuro .numero b { color: #fff; }
.striscia-numeri.sfondo-blu .numero b sup,
.striscia-numeri.sfondo-blu_scuro .numero b sup,
.striscia-numeri.sfondo-magenta .numero b sup,
.striscia-numeri.sfondo-scuro .numero b sup { color: var(--giallo); }
.striscia-numeri.sfondo-blu .numero span,
.striscia-numeri.sfondo-blu_scuro .numero span,
.striscia-numeri.sfondo-magenta .numero span,
.striscia-numeri.sfondo-scuro .numero span { color: rgba(255, 255, 255, .85); }

/* =====================================================================
   PASSI
   ===================================================================== */
.passi {
  list-style: none;
  padding: 0;
  margin: 34px 0 0;
  display: grid;
  --min-colonna: 260px;
  gap: 26px;
  counter-reset: passo;
}
.passi li { display: flex; gap: 16px; align-items: flex-start; }
.passo-numero {
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--magenta);
  color: #fff;
  font-family: var(--titoli);
  font-size: 1.2rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.passi h3 { margin-bottom: .3em; margin-top: .5em; }
.passi p, .passi .voce-testo { font-size: .96rem; color: var(--grigio); margin: 0; }

/* =====================================================================
   RECENSIONI
   ===================================================================== */
.box-valutazione {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 460px;
  margin: 0 auto 32px;
  padding: 16px 24px;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pill);
  box-shadow: var(--ombra);
  text-decoration: none;
  color: inherit;
}
.box-valutazione b { font-family: var(--titoli); font-size: 1.5rem; color: var(--blu); }
.box-valutazione span:last-child { color: var(--grigio); font-size: .92rem; }
.stelle { color: var(--giallo); letter-spacing: 2px; }

.griglia-recensioni {
  display: grid;
  --min-colonna: 280px;
  gap: 20px;
}
/* La scheda della recensione è quella della landing: foto-iniziale, nome,
   fonte, stelle e virgolette. Era la resa che convertiva meglio, e vale la
   pena averla uguale in tutto il sito. */
.recensione {
  margin: 0;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-card);
  padding: 24px;
  box-shadow: 0 4px 14px rgba(15, 69, 135, .06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.recensione .testa { display: flex; align-items: center; gap: 12px; }
.recensione .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--blu);
  color: #fff;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.recensione .avatar.c2 { background: var(--magenta); }
.recensione .avatar.c3 { background: var(--giallo); color: #4a3300; }
.recensione .nome { font-weight: 800; font-size: .95rem; }
.recensione .fonte { font-size: .74rem; color: var(--grigio); }
.recensione .stelle { font-size: 1.3rem; letter-spacing: 1.5px; }
.recensione p, .recensione .voce-testo { font-size: .92rem; color: #4B5563; margin: 0; }

/* =====================================================================
   CERTIFICAZIONI
   ===================================================================== */
.griglia-certificazioni {
  display: grid;
  --min-colonna: 300px;
  gap: 22px;
}
.certificazione {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-card);
  padding: 22px;
  text-align: center;
}
.certificazione img { width: 230px; max-width: 100%; margin: 10px auto 40px auto; }
.certificazione h3 { font-size: 1.05rem; margin-bottom: .3em; }
.certificazione p, .certificazione .voce-testo { font-size: .93rem; color: var(--grigio); margin: 0; }

/* =====================================================================
   ELENCO CON ICONE
   ===================================================================== */
.elenco-icone { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; --min-colonna: 260px; }
.elenco-icone li { display: flex; gap: 14px; align-items: flex-start; }
.elenco-icone .icona { font-size: 1.4rem; line-height: 1.2; flex: none; }
.elenco-icone b { display: block; font-size: 1.02rem; }
/* Attenzione: questa regola oggi non veste niente. Il testo di una voce sta
   dentro un <div>, non dentro uno <span> figlio di un altro <span>, quindi il
   selettore non trova nessuno — e infatti nell'elenco con icone quel testo si
   legge grande e scuro, non piccolo e grigio come nell'elenco con immagine.
   Resta com'è di proposito: allargarla a .voce-testo rimpicciolirebbe di
   colpo il testo di tutte le pagine già scritte, e un blocco che cambia
   aspetto senza che nessuno lo abbia toccato è la cosa che fa perdere fiducia
   in un editor. Da sistemare quando si decide come devono vedersi i due
   elenchi, non di straforo mentre si fa un'altra cosa. */
.elenco-icone span span { font-size: .95rem; color: var(--grigio); }
/* Lo spazio fra le voci: «normale» è il gap che l'elenco ha sempre avuto,
   quindi chi non sceglie non vede cambiare niente. */
.elenco-icone.spazio-stretta { gap: 9px; }
.elenco-icone.spazio-normale { gap: 18px; }
.elenco-icone.spazio-larga   { gap: 30px; }
.elenco-icone.spazio-molto   { gap: 46px; }

/* Elenco con immagine: stessa griglia e stesse spaziature dell'elenco con
   icone — le classi sono condivise apposta, così una scelta fatta su uno
   si ritrova identica sull'altro senza due elenchi di numeri da tenere
   allineati a mano. Qui si aggiunge solo quello che l'emoji non aveva:
   una misura, una forma e un lato. */
.elenco-immagini { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 18px; --min-colonna: 260px; }
.elenco-immagini.spazio-stretta { gap: 9px; }
.elenco-immagini.spazio-normale { gap: 18px; }
.elenco-immagini.spazio-larga   { gap: 30px; }
.elenco-immagini.spazio-molto   { gap: 46px; }

.elenco-immagini li > a,
.elenco-immagini li { display: flex; gap: 16px; align-items: flex-start; }
/* La voce cliccabile riempie la sua cella e non si porta dietro la
   sottolineatura: il richiamo è tutta la voce, non tre parole del titolo. */
.elenco-immagini li > a { color: inherit; text-decoration: none; width: 100%; }
.elenco-immagini li > a:hover b { color: var(--magenta); }
.elenco-immagini .foto { flex: none; display: block; overflow: hidden; }
.elenco-immagini .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.elenco-immagini b { display: block; font-size: 1.02rem; margin-bottom: 3px; }
.elenco-immagini span:not(.foto), .elenco-immagini .voce-testo { display: block; font-size: .95rem; color: var(--grigio); }
/* Il testo prende lo spazio che resta. Senza, il riquadro si stringe attorno
   alle parole, e un titolo «al centro» si centrerebbe dentro una colonna
   larga quanto lui — cioè non si vedrebbe centrato affatto. Allineato a
   sinistra, che è come si è sempre visto, non cambia niente. */
.elenco-immagini li > div,
.elenco-immagini li > a > div { flex: 1 1 auto; min-width: 0; }
.elenco-immagini.foto-sopra li > div,
.elenco-immagini.foto-sopra li > a > div { width: 100%; }

/* --- dove sta la foto --- */
.elenco-immagini.foto-destra li,
.elenco-immagini.foto-destra li > a { flex-direction: row-reverse; }
.elenco-immagini.foto-sopra li,
.elenco-immagini.foto-sopra li > a { flex-direction: column; }

/* --- quanto grande --- */
.elenco-immagini.foto-piccola .foto { width: 54px;  height: 54px; }
.elenco-immagini.foto-media   .foto { width: 96px;  height: 96px; }
.elenco-immagini.foto-grande  .foto { width: 150px; height: 150px; }
/* Sopra il testo la foto prende la riga: una miniatura di 54 px centrata
   sopra un paragrafo sembra un errore di impaginazione. */
.elenco-immagini.foto-sopra .foto { width: 100%; }
.elenco-immagini.foto-sopra.foto-piccola .foto { height: 120px; }
.elenco-immagini.foto-sopra.foto-media   .foto { height: 180px; }
.elenco-immagini.foto-sopra.foto-grande  .foto { height: 260px; }

/* --- forma --- */
.elenco-immagini.foto-quadrata .foto    { border-radius: 0; }
.elenco-immagini.foto-arrotondata .foto { border-radius: var(--raggio); }
.elenco-immagini.foto-tonda .foto       { border-radius: 50%; }
/* «Com'è»: nessun ritaglio, quindi nessuna altezza da rispettare — nemmeno
   quella che la misura impone quando la foto sta sopra. La riga in più non è
   un doppione: quella lì sopra ha quattro classi e vincerebbe su questa, e la
   foto verrebbe tagliata lo stesso proprio dove si era chiesto di non
   tagliarla. */
.elenco-immagini.foto-intera .foto      { border-radius: 0; height: auto; }
.elenco-immagini.foto-sopra.foto-intera .foto { height: auto; }
.elenco-immagini.foto-intera .foto img  { height: auto; object-fit: contain; }

/* --- l'altezza scritta a mano ---
   Vince su tutte e tre le misure fisse, e cambia il modo di ragionare: qui
   l'altezza la decide chi scrive e la larghezza la decide la foto. È il
   motivo per cui una misura uguale per tutte vale più di una misura per
   voce — verticali e orizzontali restano comunque allineate in riga.
   L'altezza arriva da una variabile e non da uno stile in linea, perché su
   un telefono deve tornare libera e una regola in linea non può contenere
   una media query. */
.elenco-immagini.foto-altezza .foto,
.elenco-immagini.foto-altezza.foto-sopra .foto { width: auto; height: auto; }
.elenco-immagini.foto-altezza .foto img {
  height: var(--foto-altezza); width: auto; max-width: 100%; object-fit: contain;
}

/* --- il titolo delle voci ---
   Il valore di partenza non ha una classe: a sinistra, misura normale,
   colore del blocco. È com'era prima che questi campi esistessero, quindi
   nessuna pagina già scritta si rimpagina da sola. */
.elenco-immagini.voce-titolo-centro b  { text-align: center; }
.elenco-immagini.voce-titolo-destra b  { text-align: right; }
/* Con la foto sopra, il titolo tira anche la foto dalla sua parte: una foto
   che resta a sinistra sotto un titolo centrato sembra rimasta indietro. */
.elenco-immagini.foto-sopra.voce-titolo-centro li,
.elenco-immagini.foto-sopra.voce-titolo-centro li > a { align-items: center; }
.elenco-immagini.foto-sopra.voce-titolo-destra li,
.elenco-immagini.foto-sopra.voce-titolo-destra li > a { align-items: flex-end; }

.elenco-immagini.voce-titolo-piccolo b { font-size: .92rem; }
.elenco-immagini.voce-titolo-grande  b { font-size: 1.2rem; }
.elenco-immagini.voce-titolo-molto   b { font-size: 1.45rem; line-height: 1.25; }

.elenco-immagini.voce-titolo-colore-scuro b   { color: var(--testo); }
.elenco-immagini.voce-titolo-colore-blu b     { color: var(--blu); }
.elenco-immagini.voce-titolo-colore-magenta b { color: var(--magenta); }
.elenco-immagini.voce-titolo-colore-giallo b  { color: var(--giallo); }
.elenco-immagini.voce-titolo-colore-grigio b  { color: var(--grigio); }
.elenco-immagini.voce-titolo-colore-bianco b  { color: #fff; }

/* Su un telefono la foto va sempre sopra: affiancata lascerebbe al testo
   una colonna di quattro parole. */
@media (max-width: 520px) {
  .elenco-immagini li,
  .elenco-immagini li > a { flex-direction: column; }
  .elenco-immagini .foto { width: 100%; }
  .elenco-immagini li > div,
  .elenco-immagini li > a > div { width: 100%; }
  /* In una colonna sola non c'è più niente da allineare, quindi l'altezza
     uguale per tutte non serve: tenuta com'è lascerebbe due bande vuote ai
     lati di ogni foto invece di riempire la riga. */
  .elenco-immagini.foto-altezza .foto,
  .elenco-immagini.foto-altezza.foto-sopra .foto { width: 100%; height: auto; }
  .elenco-immagini.foto-altezza .foto img { height: auto; width: 100%; }
  .elenco-immagini.voce-titolo-centro li,
  .elenco-immagini.voce-titolo-centro li > a { align-items: center; }
  .elenco-immagini.voce-titolo-destra li,
  .elenco-immagini.voce-titolo-destra li > a { align-items: flex-end; }
}

/* =====================================================================
   IL TESTO DI UNA VOCE
   Card, passi, recensioni, certificazioni, elenchi, slide: quel testo
   accetta HTML, quindi dentro ci possono finire un grassetto, un elenco,
   due paragrafi. Sta in un <div> e non più in un <p> proprio per questo —
   un <p> dentro un <p> il browser non lo tiene, chiude il primo, e da lì in
   poi il testo perde il suo vestito a metà voce.

   Il vestito (misura e colore) resta quello di prima: ogni famiglia lo
   dichiara accanto al suo <p> storico, così nessuna pagina già scritta
   cambia aspetto. Qui si sistema solo quello che può crescerci dentro.
   ===================================================================== */
.voce-testo > :first-child { margin-top: 0; }
.voce-testo > :last-child  { margin-bottom: 0; }
/* Il :not() non è un vezzo: la regola della famiglia (.card-testo p e le
   sue sorelle) ha una classe in più e vincerebbe con il suo margin:0, e due
   paragrafi si ritroverebbero attaccati. */
.voce-testo p:not(:last-child) { margin-bottom: .7em; }
.voce-testo ul, .voce-testo ol { margin: 0 0 .7em; padding-left: 1.25em; }
.voce-testo ul:last-child, .voce-testo ol:last-child { margin-bottom: 0; }
.voce-testo img { max-width: 100%; height: auto; }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq details {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  margin-bottom: 12px;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  padding: 16px 20px;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--blu-scuro);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--magenta); line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq details > .testo { padding: 0 20px 18px; font-size: .98rem; }

/* =====================================================================
   GALLERIA
   Formato, spazio, angoli, didascalie ed effetto sono classi decise
   nell'editor. Sono classi e non stili in linea per una ragione sola: sugli
   schermi stretti certe scelte vanno annullate, e una regola in linea non
   può contenere una media query.
   ===================================================================== */
.galleria { display: grid; gap: 16px; --min-colonna: 210px; }
.galleria figure { margin: 0; }
.galleria img { display: block; width: 100%; border-radius: var(--raggio); }
.galleria figcaption { font-size: .88rem; color: var(--grigio); margin-top: 6px; }

/* --- formato: tutte le foto ritagliate alla stessa forma ---
   Il rapporto lo mette il formato scelto, e «Come sono» non lo mette affatto:
   così l'immagine tiene il rapporto dei suoi width/height, che è quello che le
   riserva lo spazio prima di arrivare. Un aspect-ratio:auto scritto qui
   sembrerebbe la stessa cosa e non lo è: dal foglio di stile batte la regola
   con cui il browser ricava il rapporto dagli attributi, e l'immagine torna ad
   avere altezza zero finché non si carica — cioè proprio il salto che gli
   attributi servivano a evitare. */
.galleria.gal-formato-orizzontale img { aspect-ratio: 4/3;  object-fit: cover; }
.galleria.gal-formato-quadrato img    { aspect-ratio: 1/1;  object-fit: cover; }
.galleria.gal-formato-panorama img    { aspect-ratio: 16/9; object-fit: cover; }
.galleria.gal-formato-verticale img   { aspect-ratio: 3/4;  object-fit: cover; }
/* align-items evita che le foto basse si stirino per pareggiare la riga. */
.galleria.gal-formato-originale { align-items: start; }
.galleria.gal-formato-originale img { object-fit: contain; height: auto; }

/* --- spazio --- */
.galleria.gal-spazio-nessuno { gap: 0; }
.galleria.gal-spazio-stretto { gap: 8px; }
.galleria.gal-spazio-normale { gap: 16px; }
.galleria.gal-spazio-largo   { gap: 30px; }
/* Senza spazio le foto si toccano, e un angolo arrotondato in mezzo a un
   muro di foto diventa un buco bianco: lì gli angoli valgono solo fuori. */
.galleria.gal-spazio-nessuno figcaption { padding: 0 8px; }

/* --- angoli --- */
.galleria.gal-angoli-vivi img,
.galleria.gal-angoli-vivi .gal-scatto        { border-radius: 0; }
.galleria.gal-angoli-arrotondati img,
.galleria.gal-angoli-arrotondati .gal-scatto { border-radius: var(--raggio); }
.galleria.gal-angoli-tondi img,
.galleria.gal-angoli-tondi .gal-scatto       { border-radius: var(--raggio-card); }

/* --- didascalie --- */
.galleria.gal-didascalie-nascoste figcaption { display: none; }
.galleria.gal-didascalie-sopra figure { position: relative; }
.galleria.gal-didascalie-sopra figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 26px 14px 12px;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  background: linear-gradient(rgba(15, 44, 78, 0), rgba(15, 44, 78, .82));
  border-radius: 0 0 var(--raggio) var(--raggio);
  opacity: 0;
  transition: opacity .18s ease;
}
.galleria.gal-didascalie-sopra figure:hover figcaption,
.galleria.gal-didascalie-sopra figure:focus-within figcaption { opacity: 1; }
.galleria.gal-angoli-vivi.gal-didascalie-sopra figcaption  { border-radius: 0; }
.galleria.gal-angoli-tondi.gal-didascalie-sopra figcaption { border-radius: 0 0 var(--raggio-card) var(--raggio-card); }

/* --- effetto al passaggio del mouse --- */
.galleria[class*="gal-effetto-"] figure { overflow: hidden; border-radius: inherit; }
.galleria[class*="gal-effetto-"] img { transition: transform .35s ease, filter .25s ease; }
.galleria.gal-effetto-zoom figure:hover img,
.galleria.gal-effetto-zoom figure:focus-within img       { transform: scale(1.06); }
.galleria.gal-effetto-schiarisci figure:hover img,
.galleria.gal-effetto-schiarisci figure:focus-within img { filter: brightness(1.12); }
.galleria.gal-effetto-scurisci figure:hover img,
.galleria.gal-effetto-scurisci figure:focus-within img   { filter: brightness(.82); }

/* --- ingrandimento --- */
.gal-scatto { display: block; overflow: hidden; }
.gal-scatto:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }
/* La lente compare solo quando il JavaScript ha preso in carico il clic:
   finché non l'ha fatto, quel link apre l'immagine intera in una scheda, che
   è un'altra cosa e non va promessa con l'icona sbagliata. */
.galleria-pronta .gal-scatto { cursor: zoom-in; }

/* La finestra dell'ingrandimento. È fuori dalla galleria, appesa al <body>:
   dentro, un antenato con overflow:hidden o un transform la taglierebbe. */
.lente {
  position: fixed;
  inset: 0;
  z-index: 4000;
  background: rgba(9, 24, 43, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 46px 18px 70px;
}
.lente[hidden] { display: none; }
.lente img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--raggio);
  box-shadow: var(--ombra-forte);
}
.lente .lente-didascalia {
  position: absolute;
  left: 0; right: 0; bottom: 18px;
  text-align: center;
  color: #fff;
  font-size: .92rem;
  padding: 0 60px;
}
.lente button {
  position: absolute;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: var(--raggio-pill);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lente button:hover { background: rgba(255, 255, 255, .28); }
.lente button:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; }
.lente .lente-chiudi   { top: 14px; right: 14px; font-size: 1.3rem; }
.lente .lente-indietro { left: 14px;  top: 50%; transform: translateY(-50%); }
.lente .lente-avanti   { right: 14px; top: 50%; transform: translateY(-50%); }
@media (max-width: 620px) {
  .lente { padding: 60px 10px 84px; }
  .lente .lente-indietro { left: 10px; }
  .lente .lente-avanti   { right: 10px; }
  .lente .lente-didascalia { padding: 0 14px; }
}

/* =====================================================================
   SLIDE
   Senza JavaScript è una striscia che si scorre con il dito: tutte le slide
   sono nella pagina e si leggono tutte. Il JavaScript aggiunge frecce,
   puntini e cambio automatico e nasconde la barra di scorrimento, ma lo
   scorrimento col dito resta quello del browser: è .slide-pronta a dirlo.
   ===================================================================== */
.sezione-slide { padding-left: 0; padding-right: 0; }
.sezione-slide > .contenitore:empty { display: none; }

.slide { position: relative; }

.slide-pista {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.slide-una {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  background-color: var(--blu-scuro);
  background-image: var(--slide-foto, none);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
@media (max-width: 640px) {
  .slide-una { background-image: var(--slide-foto-mobile, var(--slide-foto, none)); }
}

/* Il velo è uno pseudo-elemento e non un gradiente cotto nella variabile,
   perché qui la sua forza si sceglie dal pannello: dentro la variabile non
   si potrebbe più togliere. */
.slide-una::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 44, 78, 0);
  pointer-events: none;
}
.slide-velo-leggero .slide-una::before { background: rgba(15, 44, 78, .35); }
.slide-velo-medio   .slide-una::before { background: rgba(15, 44, 78, .58); }
.slide-velo-forte   .slide-una::before { background: rgba(15, 44, 78, .78); }

.slide-una > .contenitore { position: relative; z-index: 1; width: 100%; }
.slide-testo { max-width: 620px; color: #fff; }
.slide-testo h3 {
  font-family: var(--titoli);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 12px;
}
.slide-testo p, .slide-testo .voce-testo { font-size: clamp(1rem, 1.5vw, 1.14rem); line-height: 1.6; margin: 0 0 20px; }
.slide-testo .occhiello { margin-bottom: 10px; }
.slide-testo .btn { margin-top: 2px; }

.slide-a-centro  .slide-testo { margin: 0 auto; text-align: center; }
.slide-a-destra  .slide-testo { margin-left: auto; }

/* Altezze: numeri, non contenuto. Una slide senza testo resta comunque una
   fascia della stessa altezza delle altre, altrimenti il carosello
   sobbalzerebbe a ogni cambio. */
.slide-altezza-bassa   .slide-una { min-height: 300px; }
.slide-altezza-media   .slide-una { min-height: 440px; }
.slide-altezza-alta    .slide-una { min-height: 600px; }
.slide-altezza-schermo .slide-una { min-height: calc(100vh - 90px); }
@media (max-width: 640px) {
  .slide-altezza-bassa   .slide-una { min-height: 260px; }
  .slide-altezza-media   .slide-una { min-height: 340px; }
  .slide-altezza-alta    .slide-una { min-height: 420px; }
  .slide-altezza-schermo .slide-una { min-height: 76vh; }
}

/* --- da qui in giù vale solo con il JavaScript acceso --- */
/* La barra di scorrimento sparisce, lo scorrimento no: il dito continua a
   spostare le slide come prima, e le frecce non fanno altro che chiedere
   la stessa cosa a scrollTo(). Togliere overflow avrebbe voluto dire
   riscrivere a mano lo scorrimento col dito — e riscriverlo peggio. */
.slide-pronta .slide-pista { scrollbar-width: none; }
.slide-pronta .slide-pista::-webkit-scrollbar { display: none; }

/* Dissolvenza: le slide si sovrappongono tutte nella stessa cella.
   Sta dentro .slide-pronta apposta — senza JavaScript resterebbe visibile
   solo l'ultima e tutte le altre sarebbero perse. */
.slide-pronta.slide-modo-dissolvenza .slide-pista { display: grid; overflow: hidden; scroll-snap-type: none; }
.slide-pronta.slide-modo-dissolvenza .slide-una {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.slide-pronta.slide-modo-dissolvenza .slide-una.attiva {
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease;
}

.slide-freccia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: var(--raggio-pill);
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(15, 44, 78, .5);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4px;
}
.slide-freccia:hover { background: rgba(15, 44, 78, .78); }
.slide-freccia:focus-visible { outline: 3px solid var(--giallo); outline-offset: 2px; }
.slide-freccia[disabled] { opacity: .35; cursor: default; }
.slide-freccia.indietro { left: 14px; }
.slide-freccia.avanti   { right: 14px; }
@media (max-width: 640px) {
  .slide-freccia { width: 38px; height: 38px; font-size: 1.6rem; }
  .slide-freccia.indietro { left: 8px; }
  .slide-freccia.avanti   { right: 8px; }
}

.slide-puntini {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 9px;
  justify-content: center;
}
.slide-puntini button {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: var(--raggio-pill);
  border: 1px solid rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .28);
  cursor: pointer;
}
.slide-puntini button[aria-selected="true"] { background: #fff; width: 26px; }
.slide-puntini button:focus-visible { outline: 3px solid var(--giallo); outline-offset: 3px; }

/* Chi ha chiesto meno animazioni al sistema le riceve ferme: il cambio
   automatico lo spegne il JavaScript, lo scorrimento morbido si spegne qui. */
@media (prefers-reduced-motion: reduce) {
  .slide-pista { scroll-behavior: auto; }
  .slide-pronta.slide-modo-dissolvenza .slide-una { transition: none; }
  .galleria[class*="gal-effetto-"] img { transition: none; }
}

/* =====================================================================
   TABELLA, ETICHETTE
   ===================================================================== */
.tabella-scorrevole { overflow-x: auto; }
.tabella { width: 100%; border-collapse: collapse; font-size: .97rem; }
.tabella th {
  background: var(--blu);
  color: #fff;
  text-align: left;
  padding: 12px 14px;
  font-family: var(--titoli);
  font-weight: 600;
}
.tabella td { padding: 11px 14px; border-bottom: 1px solid var(--bordo); }
.tabella tr:nth-child(even) td { background: #FAFCFE; }

.etichette { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.etichette li {
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-pill);
  padding: 6px 15px;
  font-size: .92rem;
}

/* =====================================================================
   RICHIAMO ALL'AZIONE
   ===================================================================== */
.cta { padding: clamp(40px, 6vw, 70px) 0; text-align: center; }
.cta h2 { margin-bottom: .4em; }
.cta .bottoni { justify-content: center; }

/* Su fondo scuro il bottone contornato deve essere bianco, altrimenti sparisce. */
.hero .btn-vuoto { color: #fff; border-color: rgba(255, 255, 255, .75); }
.hero .btn-vuoto:hover { background: #fff; color: var(--blu); border-color: #fff; }

/* =====================================================================
   SFONDI DEI BLOCCHI
   Un elenco solo, valido per la striscia dei numeri e per il richiamo
   all'azione: prima ognuno aveva i suoi tre colori, diversi fra loro, e
   chi cercava il magenta nella striscia non lo trovava.
   I nomi corrispondono alle chiavi di sol_blocchi_sfondi() in lib/blocchi.php.
   ===================================================================== */
.sfondo-bianco    { background: #fff; }
.sfondo-azzurro   { background: var(--blu-chiaro); }
.sfondo-grigio    { background: #F4F7FB; }
.sfondo-giallo    { background: #FDF4DC; }
.sfondo-blu       { background: var(--blu); color: #fff; }
.sfondo-blu_scuro { background: var(--blu-scuro); color: #fff; }
.sfondo-magenta   { background: var(--magenta); color: #fff; }
.sfondo-scuro     { background: #0F2C4E; color: #fff; }

/* Sui fondi pieni tutto ciò che sta dentro deve restare leggibile: i titoli
   nascono blu scuro, e blu su blu non si legge. */
.sfondo-blu h2, .sfondo-blu h3,
.sfondo-blu_scuro h2, .sfondo-blu_scuro h3,
.sfondo-magenta h2, .sfondo-magenta h3,
.sfondo-scuro h2, .sfondo-scuro h3 { color: #fff; }
.sfondo-blu .testo a:not(.btn),
.sfondo-blu_scuro .testo a:not(.btn),
.sfondo-magenta .testo a:not(.btn),
.sfondo-scuro .testo a:not(.btn) { color: #fff; text-decoration: underline; }

/* Un bottone dello stesso colore del fondo sparisce: si ribalta. */
.sfondo-magenta .btn-magenta { background: #fff; color: var(--magenta); }
.sfondo-magenta .btn-magenta:hover { background: #FDECF2; color: var(--magenta); }
.sfondo-blu .btn-blu,
.sfondo-blu_scuro .btn-blu,
.sfondo-scuro .btn-blu { background: #fff; color: var(--blu); }
.sfondo-blu .btn-blu:hover,
.sfondo-blu_scuro .btn-blu:hover,
.sfondo-scuro .btn-blu:hover { background: var(--blu-chiaro); color: var(--blu); }
.sfondo-blu .btn-vuoto,
.sfondo-blu_scuro .btn-vuoto,
.sfondo-magenta .btn-vuoto,
.sfondo-scuro .btn-vuoto { color: #fff; border-color: rgba(255, 255, 255, .75); }
.sfondo-blu .btn-vuoto:hover,
.sfondo-blu_scuro .btn-vuoto:hover,
.sfondo-scuro .btn-vuoto:hover { background: #fff; color: var(--blu); border-color: #fff; }
.sfondo-magenta .btn-vuoto:hover { background: #fff; color: var(--magenta); border-color: #fff; }

/* =====================================================================
   COLORE DEL TESTO DI UNA SEZIONE
   Si sceglie di fianco al colore di fondo, e serve solo quando serve
   un'eccezione: di norma è lo sfondo a decidere, e sui fondi pieni il
   testo diventa bianco da sé.

   Il colore scelto vive in una variabile e le regole che lo applicano
   sono scritte una volta sola: aggiungere un colore all'elenco è una
   riga, non cinque selettori da tenere allineati a mano.

   Queste regole stanno **dopo** quelle di .sfondo-* apposta: hanno lo
   stesso peso, quindi vince l'ultima letta — che è quella scelta a mano
   ed è quella che deve vincere. I bottoni restano fuori: il loro colore
   lo decide il loro stile, e ribaltarli è un lavoro che .sfondo-* fa già.
   ===================================================================== */
.testo-scuro   { --colore-scelto: var(--testo); }
.testo-bianco  { --colore-scelto: #fff; }
.testo-blu     { --colore-scelto: var(--blu); }
.testo-magenta { --colore-scelto: var(--magenta); }
.testo-grigio  { --colore-scelto: var(--grigio); }

.testo-scuro, .testo-bianco, .testo-blu, .testo-magenta, .testo-grigio { color: var(--colore-scelto); }

:is(.testo-scuro, .testo-bianco, .testo-blu, .testo-magenta, .testo-grigio)
  :is(h2, h3, h4, p, li, b, cite, figcaption, .occhiello, .numero b, .numero span,
      .testo a:not(.btn)) { color: var(--colore-scelto); }

/* =====================================================================
   CITAZIONE, VIDEO, MAPPA, SEPARATORE
   ===================================================================== */
.citazione {
  margin: 0;
  border-left: 5px solid var(--giallo);
  padding: 6px 0 6px 22px;
  font-family: var(--titoli);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--blu-scuro);
}
.citazione cite { display: block; margin-top: 12px; font-family: var(--testo-font); font-size: .95rem; color: var(--grigio); font-style: normal; }

.video { position: relative; border-radius: var(--raggio-card); overflow: hidden; background: #000; aspect-ratio: 16/9; }
.video img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-avvia {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px;
  border: 0; border-radius: 50%;
  background: var(--magenta); color: #fff;
  font-size: 1.6rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--ombra-forte);
}
.video-avvia:hover { background: var(--magenta-scuro); }

.mappa { border-radius: var(--raggio-card); overflow: hidden; border: 1px solid var(--bordo); }
.mappa iframe { width: 100%; height: 380px; border: 0; display: block; }
.mappa-aperta { line-height: 0; }
.mappa-avvia {
  width: 100%;
  background: var(--blu-chiaro);
  border: 0;
  padding: 40px 20px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: inherit;
}
.mappa-avvia span:first-child { font-size: 4rem; }
.mappa-avvia b { font-family: var(--titoli); font-size: 1.1rem; color: var(--blu); }
.mappa-indirizzo { color: var(--testo); }
.mappa-avvia small { color: var(--grigio); font-size: .84rem; }

.separatore { display: flex; align-items: center; justify-content: center; }
.separatore-piccolo { height: 26px; }
.separatore-medio   { height: 50px; }
.separatore-grande  { height: 84px; }
.separatore .linea { display: block; width: min(100%, var(--colonna)); height: 1px; background: var(--bordo); margin: 0 22px; }

.segnaposto-modulo {
  border: 2px dashed #C3D3E6;
  border-radius: var(--raggio);
  padding: 30px;
  text-align: center;
  color: var(--grigio);
  background: #F8FAFD;
}


/* Intestazione automatica delle pagine senza hero */
.sezione-intestazione { padding-bottom: 0; }
.sezione-intestazione h1 { margin-bottom: 0; }

/* Avviso mostrato solo a chi è collegato all'area riservata */
.avviso-anteprima {
  background: var(--giallo);
  color: #4a3300;
  font-weight: 700;
  font-size: .9rem;
  text-align: center;
  padding: 10px 18px;
}

/* =====================================================================
   TESTATA E MENU
   ===================================================================== */
.salta-al-contenuto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blu);
  color: #fff;
  padding: 10px 18px;
  z-index: 999;
  border-radius: 0 0 10px 0;
}
.salta-al-contenuto:focus { left: 0; color: #fff; }

/* La barra in alto è blu piena: tutto quello che ci sta dentro è chiaro, e
   la tendina resta invece un pannello bianco perché galleggia sul contenuto. */
.testata {
  background: var(--blu-testata);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  z-index: 90;
}
.testata-fissa { position: sticky; top: 0; }
.testata.ridotta { box-shadow: 0 4px 18px rgba(1, 89, 164, .28); }

.testata-interno {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 78px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: min-height .15s;
}
.testata.ridotta .testata-interno { min-height: 64px; }

.testata-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.testata-logo img { max-height: 52px; width: auto; }
.testata-marchio {
  font-family: var(--titoli);
  font-weight: 600;
  font-size: 1.15rem;
  color: #fff;
  line-height: 1.1;
  display: block;
}
.testata-marchio small {
  display: block;
  font-family: var(--testo-font);
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--giallo);
  margin-top: 3px;
}

.testata-menu { margin: 0 auto; }
.testata-menu .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.testata-menu .menu li { position: relative; }
.testata-menu .menu a,
.testata-menu .menu span {
  display: block;
  padding: 10px 12px;
  font-weight: 700;
  font-size: .93rem;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  text-align: left;
  line-height: 1.08rem;
}
.testata-menu .menu a:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.testata-menu .menu > li.attiva > a { color: var(--giallo); }

.apri-tendina {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.apri-tendina::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  margin: 0 auto;
  border-right: 2px solid rgba(255, 255, 255, .85);
  border-bottom: 2px solid rgba(255, 255, 255, .85);
  transform: rotate(45deg) translate(-2px, -2px);
}
.testata-menu .menu > li.con-tendina > a { padding-right: 22px; }

.menu-livello-2 {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: #fff;
  border: 1px solid var(--bordo);
  border-radius: 14px;
  box-shadow: var(--ombra-forte);
  padding: 8px !important;
  display: none !important;
  flex-direction: column;
  gap: 0 !important;
  z-index: 30;
}
.testata-menu .menu li:hover > .menu-livello-2,
.testata-menu .menu li:focus-within > .menu-livello-2 { display: flex !important; }
/* La tendina è anch'essa un <ul class="menu">, quindi eredita l'align-items
   center della barra e le voci restano strette e centrate: qui si torna a
   colonne piene, che è ciò che rende visibile l'allineamento a sinistra. */
.testata-menu .menu-livello-2 { align-items: stretch; }
/* Dentro la tendina si torna al testo scuro su bianco, allineato a sinistra.
   Il selettore ripete .testata-menu di proposito: senza, la regola generale
   delle voci (bianche su fondo blu) vince e la tendina resta bianca su bianco. */
.testata-menu .menu-livello-2 a,
.testata-menu .menu-livello-2 span { color: var(--blu-scuro); text-align: left; }
.testata-menu .menu-livello-2 a { font-size: .9rem; padding: 9px 12px; }
.testata-menu .menu-livello-2 a:hover { background: var(--blu-chiaro); color: var(--blu); }

.testata-azioni { display: flex; align-items: center; gap: 14px; flex: none; }

/* La campanella della richiesta lasciata a metà: in testata **solo il
   simbolo**, a destra del bottone del preventivo. Lassù lo spazio è quello
   che è, e una seconda scritta lunga accanto alla prima le fa concorrenza
   invece di aiutarla. Gialla perché è l'unico colore della tavolozza che
   sulla testata blu si vede senza gridare. Il richiamo con le parole sta in
   basso, accanto al bottone flottante (vedi .ripresa-flottante). */
.campanella-testata {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  background: rgba(227, 175, 32, .16);
  border: 1px solid rgba(227, 175, 32, .55);
  text-decoration: none;
}
.campanella-testata:hover { background: rgba(227, 175, 32, .34); }
/* Un movimento breve e una volta sola: una campanella che suona per sempre
   diventa un fastidio da togliere, non un promemoria da seguire. */
.campanella-segno { font-size: 1rem; animation: campanella .7s ease 2; transform-origin: top center; }
@keyframes campanella {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(12deg); }
  75% { transform: rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) { .campanella-segno { animation: none; } }
.testata-telefono {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: var(--telefono-misura, 1.05rem);
  color: #fff;
  white-space: nowrap;
}
.testata-telefono:hover { color: var(--giallo); }
.testata-telefono em {
  display: block;
  font-family: var(--testo-font);
  font-style: normal;
  font-weight: 700;
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #BFD4EC;
}
.testata-azioni .btn { padding: 11px 20px; font-size: .93rem; }

.testata-apri {
  display: none;
  margin-left: auto;
  width: 46px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  padding: 11px 10px;
  flex-direction: column;
  justify-content: space-between;
}
.testata-apri span { display: block; height: 2px; background: #fff; border-radius: 2px; }

/* Sotto i 500 px il logo esteso non ci sta: se ne è stato caricato uno
   dedicato, si scambiano. Senza logo alternativo non cambia nulla. */
.testata-logo .logo-piccolo { display: none; }
@media (max-width: 500px) {
  .testata-logo.con-alternativo .logo-grande { display: none; }
  .testata-logo.con-alternativo .logo-piccolo { display: block; max-height: 44px; width: auto; }
}

/* =====================================================================
   BRICIOLE
   ===================================================================== */
.briciole { background: #F6F9FC; border-bottom: 1px solid var(--bordo); font-size: .85rem; }
.briciole ol {
  list-style: none;
  margin: 0;
  padding: 11px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.briciole li + li::before { content: '›'; color: var(--grigio); margin-right: 6px; }
.briciole a { color: var(--grigio); text-decoration: none; }
.briciole a:hover { color: var(--magenta); }
.briciole span { color: var(--blu-scuro); font-weight: 700; }

/* =====================================================================
   MODULI
   ===================================================================== */
.sezione-modulo { background: var(--blu-chiaro); }

.modulo-scheda {
  background: #fff;
  border-radius: var(--raggio-card);
  box-shadow: var(--ombra-forte);
  padding: 26px;
}
.hero-modulo .modulo-scheda { box-shadow: none; padding: 0; }
.modulo-titolo { font-size: 1.45rem; margin-bottom: 6px; }
.modulo-sotto { color: var(--grigio); font-size: .95rem; margin-bottom: 18px; }

.progresso { position: relative; margin: 18px 0 22px; }
.progresso-barra { height: 6px; background: #E7EEF6; border-radius: 999px; overflow: hidden; }
.progresso-riempimento {
  height: 100%;
  width: 33.33%;
  background: linear-gradient(90deg, var(--blu), var(--magenta));
  border-radius: 999px;
  transition: width .3s ease;
}
.progresso-camion {
  position: absolute;
  top: -22px;
  left: 33.33%;
  transform: translateX(-50%);
  transition: left .3s ease;
  pointer-events: none;
}
.progresso-etichette {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #74849A;
}
.progresso-etichette .attiva { color: var(--magenta); }

.passo { display: none; }
.passo.attivo { display: block; animation: sol-entra .25s ease; }
@keyframes sol-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.passo-titolo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--titoli);
  font-weight: 600;
  color: var(--blu-scuro);
  margin: 16px 0 10px;
}
.passo-titolo:first-child { margin-top: 0; }

.modulo-scheda .campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.modulo-scheda .campo label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--grigio);
}
.modulo-scheda .campo input,
.modulo-scheda .campo select,
.modulo-scheda .campo textarea {
  width: 100%;
  padding: 12px 13px;
  border: 2px solid #DDE5EF;
  border-radius: 11px;
  background: #FAFBFD;
  font-family: inherit;
  font-size: .96rem;
  color: var(--testo);
}
.modulo-scheda .campo textarea { resize: vertical; min-height: 92px; }
.modulo-scheda .campo input:focus,
.modulo-scheda .campo select:focus,
.modulo-scheda .campo textarea:focus {
  outline: none;
  border-color: var(--blu);
  background: #fff;
}
.modulo-scheda .campo.errore input,
.modulo-scheda .campo.errore select,
.modulo-scheda .campo.errore textarea {
  border-color: var(--magenta);
  background: #FFF5F8;
}
.campo-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.modulo-privacy {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: .86rem;
  color: var(--grigio);
  margin: 12px 0;
}
.modulo-privacy input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--magenta); }

.modulo-nav { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.modulo-nav .btn-magenta { flex: 1; }
.btn-chiaro { background: #EEF3F9; color: var(--blu-scuro); }
.btn-chiaro:hover { background: #E1EAF4; color: var(--blu-scuro); }
.modulo-nav .indietro { flex: none; padding: 14px 18px; }

.modulo-messaggio { margin-top: 12px; font-size: .9rem; }
.modulo-messaggio:empty { display: none; }
.modulo-messaggio.ko {
  background: #FDF2F6;
  border: 1px solid #F0A8C1;
  color: #9F1239;
  border-radius: 11px;
  padding: 11px 14px;
}
.modulo-messaggio.ok {
  background: #E8F7EE;
  border: 1px solid #86D6A5;
  color: #166534;
  border-radius: 11px;
  padding: 11px 14px;
}

.modulo-nota {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: .8rem;
  color: var(--grigio);
}
.modulo-recaptcha-nota { margin-top: 8px; font-size: .74rem; color: #74849A; }
.modulo-grazie { text-align: center; padding: 20px 0; }
.modulo-grazie h2 { color: var(--verde); }
.segnaposto-modulo {
  border: 2px dashed var(--bordo);
  border-radius: var(--raggio);
  padding: 26px;
  text-align: center;
  color: var(--grigio);
}

/* =====================================================================
   PIEDE
   ===================================================================== */
.piede {
  background: var(--blu-scuro);
  color: rgba(255, 255, 255, .82);
  padding: clamp(40px, 6vw, 66px) 0 24px;
  font-size: .93rem;
}
.piede h4 { color: #fff; font-size: 1.05rem; margin-bottom: 12px; }
.piede a:not(.btn) { color: rgba(255, 255, 255, .9); text-decoration: none; }
.piede a:hover { color: var(--giallo); }
/* Le colonne del piede: quante parti ciascuna.
   La larghezza arriva da --piede-colonne, scritta sull'elemento da
   sol_piede(): una regola in linea non può contenere una media query, e senza
   variabile un piede «2fr 1fr 1fr 1fr» resterebbe a quattro colonne anche su
   un telefono. Il ripiego di var() è esattamente il comportamento di prima —
   auto-fit — quindi finché nessuno tocca le larghezze non cambia niente.

   ATTENZIONE: auto-fit collassava da solo quando lo spazio finiva, ed era il
   motivo per cui qui non c'era nessuna media query. Con le colonne fissate a
   mano quel collasso non avviene più, e senza le due righe qui sotto il piede
   arriverebbe sul telefono con quattro colonne strizzate. */
.piede-griglia {
  display: grid;
  grid-template-columns: var(--piede-colonne, repeat(auto-fit, minmax(215px, 1fr)));
  gap: 30px;
}
@media (max-width: 900px) { .piede-griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .piede-griglia { grid-template-columns: 1fr; gap: 26px; } }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.piede-logo { max-width: 200px; margin-bottom: 14px; }
.piede .widget + .widget { margin-top: 22px; }

/* Bottoni social del widget: affiancati, con dimensione, forma, stile e
   allineamento scelti nella scheda del widget.

   Il colore di ogni marchio sta in una variabile (--marchio) invece che in una
   regola per ogni combinazione: così i tre stili si scrivono una volta sola
   invece di diciotto, e aggiungere una rete domani è una riga. */
.social {
  /* .piede ul è una griglia: qui serve una riga, e la regola generale è più
     specifica. È lo stesso motivo per cui .piede-legale porta !important. */
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
  margin: 0;
  padding: 0;
  list-style: none;
}
.social li { margin: 0; }
.social a {
  --marchio: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s, transform .1s, filter .15s;
}
.social a svg { display: block; width: 52%; height: 52%; }
.social a:hover { transform: translateY(-2px); }

/* --- il colore di ogni marchio ------------------------------------------ */
.social .social-facebook  { --marchio: #1877F2; }
.social .social-instagram { --marchio: #E4405F; }
.social .social-linkedin  { --marchio: #0A66C2; }
/* Il nero di TikTok su fondo blu scuro sparirebbe: si usa il rosso del suo
   logo, che si riconosce lo stesso. */
.social .social-tiktok    { --marchio: #FE2C55; }
.social .social-youtube   { --marchio: #FF0000; }
.social .social-whatsapp  { --marchio: #25D366; }

/* --- dimensione --------------------------------------------------------- */
.social-piccoli a { width: 34px; height: 34px; }
.social-medi a    { width: 42px; height: 42px; }
.social-grandi a  { width: 54px; height: 54px; }

/* --- forma -------------------------------------------------------------- */
.social-tondi a    { border-radius: 50%; }
.social-quadrati a { border-radius: 12px; }

/* --- allineamento ------------------------------------------------------- */
.social-a-sinistra { justify-content: flex-start; }
.social-a-centro   { justify-content: center; }
.social-a-destra   { justify-content: flex-end; }

/* --- stile --------------------------------------------------------------
   I selettori ripetono .social di proposito: nel piede la regola generale
   `.piede a:hover` colora di giallo qualsiasi collegamento, e a parità di
   specificità vincerebbe l'ultima scritta. Con .social davanti non c'è
   partita e non si dipende dall'ordine del foglio. */
.social.social-stile-contorno a { background: transparent; border-color: currentColor; }
.social.social-stile-contorno a:hover { background: var(--marchio); border-color: var(--marchio); color: #fff; }

.social.social-stile-pieno a { background: var(--marchio); border-color: var(--marchio); color: #fff; }
.social.social-stile-pieno a:hover { filter: brightness(1.14); color: #fff; }

/* Il grigio traslucido si legge sia sul piede scuro sia su un fondo chiaro:
   un bianco al 14% sparirebbe sul bianco. */
.social.social-stile-neutro a { background: rgba(128, 128, 128, .18); border-color: transparent; }
.social.social-stile-neutro a:hover { background: var(--marchio); border-color: var(--marchio); color: #fff; }

@media (max-width: 640px) {
  .social-grandi a { width: 46px; height: 46px; }
  .social-medi a   { width: 38px; height: 38px; }
}

.piede-basso {
  border-top: 1px solid rgba(255, 255, 255, .16);
  margin-top: 34px;
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
}
.piede-legale { display: flex !important; flex-wrap: wrap; gap: 6px 18px; }

/* =====================================================================
   PIEDE DELLA LANDING, COME BLOCCO
   Era disegnato dentro il tema e non si toccava da nessuna parte; adesso è un
   blocco che si mette in fondo alla pagina. Le regole stanno qui e non in
   landing.css perché quel foglio lo carica solo una pagina con modello
   «landing»: nell'anteprima dell'editor non c'è, e il blocco si vedrebbe
   spoglio proprio nel momento in cui lo si sta componendo.
   ===================================================================== */
.piede-blocco { background: #0D3563; color: #B8CCE3; padding: 56px 0 28px; font-size: .92rem; }
.piede-blocco-griglia {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 36px;
}
.piede-blocco img.logo-piede { width: 300px; max-width: 100%; height: auto; margin-bottom: 14px; }
.piede-blocco h4 { font-family: var(--titoli); color: #fff; font-size: 1rem; margin-bottom: 14px; letter-spacing: .03em; }
.piede-blocco a { color: #B8CCE3; text-decoration: none; }
.piede-blocco a:hover { color: var(--giallo); }
.piede-blocco ul { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.piede-blocco p { margin: 0 0 10px; }
.piede-blocco-basso {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 18px;
  font-size: .82rem;
  color: #8FA9C6;
}
.piede-blocco-basso button { color: #8FA9C6; }
.piede-blocco-basso button:hover { color: var(--giallo); }
@media (max-width: 900px) { .piede-blocco-griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .piede-blocco-griglia { grid-template-columns: 1fr; gap: 26px; } }

/* Il testo in fondo a tutto: sotto la riga legale, al centro, più piccolo.
   È l'ultima riga della pagina e non deve competere con niente — chi ci
   arriva ci arriva scorrendo fino in fondo apposta. */
.piede-finale {
  margin-top: 20px;
  padding-top: 16px;
  text-align: center;
  font-size: .84rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}
.piede-finale p:last-child { margin-bottom: 0; }
.piede-finale a { color: rgba(255, 255, 255, .92); }
.piede-finale a:hover { color: #fff; }
.piede-finale img { display: inline-block; margin: 6px auto; }

/* =====================================================================
   LA FOTO DI UN WIDGET, CON LE SUE MISURE
   Nasce solo se una misura è stata scelta: senza, l'immagine resta quella
   di prima, vestita dal tema. Le misure arrivano da due variabili e non da
   width/height sul tag, così il max-width qui sotto può ancora salvarle su
   una colonna stretta — un attributo non lo si può contraddire con una
   regola, e un logo da 300 px in una colonna da 180 sfonderebbe il piede.
   ===================================================================== */
/* L'involucro prende la riga e allinea la foto con `text-align`; la foto
   torna `inline-block` apposta, perché un blocco un allineamento del testo
   non lo sente — e `vertical-align` toglie i due pixel di spazio che un
   elemento in linea si porta sotto, dove sta la coda delle lettere.
   A sinistra — il valore di partenza — si vede esattamente come prima:
   l'immagine comincia dal bordo della colonna. `img` è già max-width:100%
   dalle fondamenta, quindi qui si scrive solo quello che cambia. */
.widget-foto { display: block; }
.widget-foto img { display: inline-block; vertical-align: middle; }
.widget-foto.foto-a-centro { text-align: center; }
.widget-foto.foto-a-destra { text-align: right; }

/* La foto non si deforma mai. Il riquadro può non avere la sua stessa
   proporzione per due motivi: perché le misure scelte sono due, o perché una
   colonna stretta ha accorciato la larghezza mentre l'altezza resta quella
   chiesta. In tutti e due i casi la foto ci entra dentro e lascia il vuoto,
   invece di stirarsi: stirare un marchio non è mai quello che voleva chi
   quella misura l'ha scritta. E il vuoto si lascia dalla parte giusta: una
   foto allineata a destra che dentro il suo riquadro si appoggia a sinistra
   sembra allineata male, non contenuta. */
.widget-foto img { object-fit: contain; object-position: left center; }
.widget-foto.foto-a-centro img { object-position: center center; }
.widget-foto.foto-a-destra img { object-position: right center; }

/* Una misura sola: l'altra segue la proporzione della foto. */
.widget-foto.foto-larga img { width: var(--widget-foto-larghezza); height: auto; }
.widget-foto.foto-alta img  { height: var(--widget-foto-altezza); width: auto; }
.widget-foto.foto-larga.foto-alta img {
  width: var(--widget-foto-larghezza);
  height: var(--widget-foto-altezza);
}

/* Le due metà della riga in fondo, quando sono fatte di widget invece che del
   disegno predefinito. Qui i widget devono stare su una riga sola: un <h4> e
   un elenco in colonna, che nelle colonne sopra vanno benissimo, in fondo
   spezzerebbero la riga in due. */
.piede-basso-parte { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.piede-basso-parte .widget { margin: 0; }
.piede-basso-parte h4 { font-size: .84rem; margin: 0 8px 0 0; color: rgba(255, 255, 255, .9); }
.piede-basso-parte ul { display: flex !important; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.piede-basso-parte p { margin: 0; }
.piede-basso-parte .social { margin: 0; }
.come-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: rgba(255, 255, 255, .9);
  cursor: pointer;
  text-decoration: underline;
}
.come-link:hover { color: var(--giallo); }

/* =====================================================================
   BOTTONI FLOTTANTI
   ===================================================================== */
.flottante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  box-shadow: var(--ombra-forte);
  padding: 13px 22px;
}

/* La riga in basso a destra, quando i bottoni sono due.
   Nasce solo se c'è una richiesta lasciata a metà: il JavaScript ci sposta
   dentro il bottone del preventivo, che smette di appiccicarsi allo schermo
   per conto suo. Serve perché «accanto» a un bottone largo quanto il testo
   che ci si scrive dal pannello non è una distanza che si può scrivere in un
   foglio di stile: in una riga flex non è un problema di nessuno.
   Su uno schermo stretto non ci stanno affiancati e vanno a capo — e a capo
   ci va il richiamo, non il bottone principale, che resta l'ultimo in basso
   cioè il più vicino al pollice. */
.flottanti {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}
.flottanti .flottante { position: static; right: auto; bottom: auto; }

.ripresa-flottante {
  display: flex;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 2px solid var(--giallo);
  border-radius: var(--raggio-pill);
  box-shadow: var(--ombra-forte);
  padding: 9px 6px 9px 15px;
}
/* Bianco e giallo accanto al magenta, e non un secondo bottone pieno: sono
   due strade per la stessa cosa e il richiamo principale resta uno solo. */
.ripresa-vai {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--blu);
  text-decoration: none;
  font-family: var(--titoli);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  white-space: nowrap;
}
.ripresa-vai:hover { color: var(--magenta); }
.ripresa-chiudi {
  background: transparent;
  border: 0;
  color: var(--grigio);
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 7px;
  cursor: pointer;
  opacity: .6;
}
.ripresa-chiudi:hover { opacity: 1; color: var(--magenta); }
.flottante-whatsapp {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 80;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--ombra-forte);
}

/* =====================================================================
   RECAPTCHA
   ===================================================================== */
/* Il badge fluttuante di Google copre il bottone flottante e non serve: al suo
   posto, sotto ogni modulo, c'è la dicitura con i link a privacy e termini che
   Google richiede proprio in alternativa al badge.

   Si nasconde con visibility e non con display:none perché è il modo indicato
   da Google stesso: con display:none il riquadro non viene disegnato e in certi
   browser reCAPTCHA v3 smette di generare il token, cioè i moduli smettono di
   funzionare. Così invece sparisce alla vista e continua a lavorare. */
.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =====================================================================
   BANNER COOKIE
   ===================================================================== */
.cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 200;
  padding: 14px;
  background: rgba(15, 44, 78, .35);
}
.cookie-riquadro {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--raggio-card);
  box-shadow: var(--ombra-forte);
  padding: 22px 24px;
}
.cookie-riquadro h2 { font-size: 1.15rem; margin-bottom: 6px; }
.cookie-riquadro p { font-size: .9rem; color: var(--grigio); }
.cookie-scelte { display: grid; gap: 10px; margin: 16px 0 4px; }
.cookie-voce {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .86rem;
  background: #F7FAFD;
  border: 1px solid var(--bordo);
  border-radius: 12px;
  padding: 11px 13px;
}
.cookie-voce input { width: 19px; height: 19px; flex: none; margin-top: 2px; accent-color: var(--magenta); }
.cookie-voce b { display: block; color: var(--blu-scuro); }
.cookie-voce span { color: var(--grigio); }
.cookie-bottoni {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}
.cookie-bottoni .btn { padding: 12px 20px; font-size: .92rem; }

/* =====================================================================
   PAGINA DI RINGRAZIAMENTO
   Scheda bianca al centro su fondo blu: è la resa della landing, dove
   questa pagina funziona da anni. I blocchi dentro la scheda perdono la
   loro impaginazione a sezioni — qui è tutto un pezzo solo.
   ===================================================================== */
body.pagina-grazie {
  background: linear-gradient(160deg, var(--blu) 0%, var(--blu-scuro) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body.pagina-grazie main { flex: 1; display: flex; }

.testata-grazie { background: var(--blu-testata); box-shadow: 0 2px 14px rgba(0, 0, 0, .18); }
.testata-grazie-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}
.testata-grazie .testata-logo img { max-height: 56px; width: auto; }
.testata-grazie .testata-marchio { color: #fff; font-family: var(--titoli); font-size: 1.1rem; }
.testata-grazie .testata-telefono { color: #fff; font-size: 1.25rem; font-weight: 800; }
.testata-grazie .testata-telefono:hover { color: var(--giallo); }

.grazie-schermo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  width: 100%;
}
.grazie-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  padding: 50px 40px;
  max-width: 620px;
  width: 100%;
  text-align: center;
  animation: grazie-entra .5s ease;
}
@keyframes grazie-entra { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.grazie-icona {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #E8F7EE;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  animation: grazie-pop .5s ease .2s backwards;
}
@keyframes grazie-pop { from { transform: scale(0); } 60% { transform: scale(1.15); } to { transform: scale(1); } }

.grazie-card h1 { color: var(--blu); font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 14px; }
.grazie-card h2 { font-size: 1.15rem; margin-bottom: .4em; }

/* I blocchi dentro la scheda: niente sezioni, niente fondi colorati, niente
   colonne — la scheda è già la colonna. */
.grazie-card .sezione,
.grazie-card .cta { padding: 0; background: transparent; color: inherit; }
.grazie-card .sezione + .sezione,
.grazie-card .cta { margin-top: 22px; }
.grazie-card .contenitore { padding: 0; max-width: none; }
.grazie-card .testo,
.grazie-card p { color: var(--grigio); font-size: 1.05rem; }
.grazie-card .testo strong { color: var(--testo); }
.grazie-card .bottoni { justify-content: center; margin-top: 18px; }
.grazie-card .titolo-sezione { margin-bottom: 14px; }

/* Il blocco Passi diventa l'elenco numerato dell'originale. */
.grazie-card .passi { display: grid; gap: 12px; margin: 28px 0 0; text-align: left; padding: 0; }
.grazie-card .passi li { background: var(--blu-chiaro); border-radius: 12px; padding: 14px 16px; gap: 12px; }
.grazie-card .passi h3 { font-size: 1rem; margin-bottom: .15em; }
.grazie-card .passi p, .grazie-card .passi .voce-testo { font-size: .95rem; }
.grazie-card .passi .passo-numero {
  width: 28px;
  height: 28px;
  font-size: .9rem;
  background: var(--giallo);
  color: #4a3300;
}

.grazie-torna { display: inline-block; margin-top: 22px; color: var(--blu); font-weight: 700; font-size: .9rem; }

.piede-grazie {
  background: #0D3563;
  color: #8FA9C6;
  text-align: center;
  padding: 18px;
  font-size: .8rem;
}
.piede-grazie a { color: #B8CCE3; }

@media (max-width: 640px) {
  .grazie-card { padding: 36px 22px; }
  .testata-grazie .testata-telefono span { font-size: 1.05rem; }
}

/* =====================================================================
   BLOG
   Nessuna grafica nuova: le stesse card, le stesse pillole e gli stessi
   bottoni del resto del sito, con in più le poche cose che solo un
   articolo ha — la data, la firma, la copertina e i correlati.
   ===================================================================== */
.blog-intestazione { padding-bottom: 0; }
.blog-intestazione .testo-grande { margin-top: 12px; max-width: var(--colonna-stretta); }

.pillole-categorie { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.pillole-categorie a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--bordo);
  background: #fff;
  color: var(--blu);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .14s;
}
.pillole-categorie a:hover { border-color: var(--blu); background: var(--blu-chiaro); }
.pillole-categorie a.attiva { background: var(--blu); border-color: var(--blu); color: #fff; }
.pillole-categorie a span { font-size: .76rem; opacity: .7; }

.card-articolo { display: flex; flex-direction: column; }
.card-articolo .card-foto { display: block; position: relative; }
.card-articolo .card-foto .senza-foto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  opacity: .35;
}
.card-articolo .card-testo { display: flex; flex-direction: column; flex: 1; }
.card-articolo h3 { font-size: 1.1rem; margin-bottom: .4em; }
.card-articolo h3 a { color: var(--blu); text-decoration: none; }
.card-articolo h3 a:hover { color: var(--magenta); }
.card-articolo .card-link { margin-top: auto; padding-top: 12px; }
.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--grigio);
  margin: 0 0 8px;
}
.etichetta-categoria {
  background: var(--blu-chiaro);
  color: var(--blu);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 800;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  text-decoration: none;
}
.etichetta-categoria:hover { background: var(--blu); color: #fff; }

.paginazione {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 40px;
}
.paginazione a, .paginazione .corrente, .paginazione .salto {
  min-width: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  text-align: center;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
}
.paginazione a:not(.btn) { color: var(--blu); border: 1px solid var(--bordo); background: #fff; }
.paginazione a:not(.btn):hover { border-color: var(--blu); background: var(--blu-chiaro); }
.paginazione .corrente { background: var(--blu); color: #fff; }
.paginazione .salto { color: var(--grigio); border: 0; }

.articolo-testa .articolo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: .86rem;
  color: var(--grigio);
  margin-bottom: 14px;
}
.articolo-testa h1 { margin-bottom: .3em; }
.articolo-testa .testo-grande { color: var(--grigio); }
.articolo-firma { font-size: .9rem; color: var(--grigio); margin-top: 16px; }
.articolo-firma b { color: var(--blu); }

.articolo-copertina { margin: 32px 0 0; }
.articolo-copertina img {
  width: 100%;
  border-radius: var(--raggio-card);
  box-shadow: var(--ombra);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Il corpo dell'articolo usa i blocchi del sito, che portano già la loro
   spaziatura: qui si stringe solo la colonna, perché un testo lungo largo
   quanto la pagina non si legge. */
.articolo-corpo .sezione { padding: clamp(28px, 4vw, 46px) 0; }
.articolo-corpo .sezione:first-child { padding-top: clamp(24px, 3vw, 36px); }
.articolo-corpo .contenitore { max-width: var(--colonna-stretta); }
/* Solo il richiamo finale esce dalla colonna stretta: è una fascia, non
   testo da leggere. */
.articolo-corpo .cta .contenitore { max-width: var(--colonna); }

.articolo-piede {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 26px 0 8px;
  border-top: 1px solid var(--bordo);
  margin-top: 10px;
}

/* =====================================================================
   VISIBILITÀ PER TIPO DI SCHERMO
   Si sceglie blocco per blocco, nel riquadro in fondo alla scheda.

   Il taglio è a 760 px, lo stesso in cui le griglie del sito scendono a
   due colonne: un secondo confine, diverso da quello, vorrebbe dire un
   blocco che sparisce a una larghezza in cui tutto il resto è ancora
   impaginato da computer.

   Nascondere non è togliere: il blocco resta nel codice della pagina e
   Google lo legge. Serve a mostrare due versioni della stessa cosa, non
   a fare due siti — e due contenuti diversi per lo stesso indirizzo
   sono un problema di posizionamento, non una funzione.
   ===================================================================== */
@media (min-width: 761px) { .no-desktop  { display: none !important; } }
@media (max-width: 760px) { .no-telefono { display: none !important; } }

/* =====================================================================
   COLONNE
   Quante cose per riga: lo sceglie chi scrive la pagina, da 1 a 6.

   Un elenco solo, valido per tutte le griglie del sito — card, numeri,
   passi, recensioni, certificazioni, elenco con icone, galleria. Prima
   ogni famiglia aveva le sue tre regole, con numeri diversi e senza una
   ragione: sette famiglie per sei numeri sarebbero quarantadue regole da
   tenere allineate a mano, e la prima che resta indietro si vede solo
   guardando il sito su un telefono.

   «Automatiche» resta il valore di partenza dove c’era già: la griglia
   riempie la riga con quante colonne ci stanno, larghe almeno
   --min-colonna, che ogni famiglia dichiara da sé. È il motivo per cui
   una pagina già scritta non cambia da sola.
   ===================================================================== */
.colonne-auto { grid-template-columns: repeat(auto-fit, minmax(var(--min-colonna, 260px), 1fr)); }
.colonne-1 { grid-template-columns: 1fr; }
.colonne-2 { grid-template-columns: repeat(2, 1fr); }
.colonne-3 { grid-template-columns: repeat(3, 1fr); }
.colonne-4 { grid-template-columns: repeat(4, 1fr); }
.colonne-5 { grid-template-columns: repeat(5, 1fr); }
.colonne-6 { grid-template-columns: repeat(6, 1fr); }

/* Sei colonne su un telefono non sono sei colonne: sono sei colonne
   illeggibili. Scendendo di larghezza il numero si riduce da solo, e chi
   ha scelto 6 non deve tornare qui a rifare la scelta per ogni schermo. */
@media (max-width: 1100px) {
  .colonne-5, .colonne-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .colonne-4, .colonne-5, .colonne-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .colonne-3, .colonne-4, .colonne-5, .colonne-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .colonne-2, .colonne-3, .colonne-4, .colonne-5, .colonne-6 { grid-template-columns: 1fr; }
  /* Due eccezioni: una foto e un numero restano leggibili a metà riga, e
     una colonna sola di sole immagini fa scorrere la pagina all'infinito. */
  .galleria.colonne-2, .galleria.colonne-3, .galleria.colonne-4,
  .galleria.colonne-5, .galleria.colonne-6,
  .numeri-griglia.colonne-2, .numeri-griglia.colonne-3, .numeri-griglia.colonne-4,
  .numeri-griglia.colonne-5, .numeri-griglia.colonne-6 { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   SCHERMI PICCOLI
   ===================================================================== */
@media (max-width: 980px) {
  .testata-apri { display: flex; }
  .testata-menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--blu-testata);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    box-shadow: var(--ombra-forte);
    padding: 12px 22px 20px;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
  }
  .menu-aperto .testata-menu { display: block; }
  .testata { position: relative; }
  .testata-menu .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .testata-menu .menu a,
  .testata-menu .menu span { padding: 13px 6px; border-bottom: 1px solid rgba(255, 255, 255, .16); border-radius: 0; }
  .menu-livello-2 { background: transparent; }
  .testata-menu .menu-livello-2 a,
  .testata-menu .menu-livello-2 span { color: rgba(255, 255, 255, .88); }
  .testata-menu .menu-livello-2 a:hover { background: rgba(255, 255, 255, .12); color: #fff; }
  .menu-livello-2 {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0 0 0 16px !important;
    min-width: 0;
  }
  .testata-menu .menu li:hover > .menu-livello-2 { display: none !important; }
  .testata-menu .menu li.aperta > .menu-livello-2 { display: flex !important; }
  .apri-tendina { right: 4px; width: 40px; height: 44px; top: 22px; }
  .testata-azioni .btn { display: none; }
  .hero-con-modulo .hero-griglia { grid-template-columns: 1fr; }
  .griglia-due { grid-template-columns: 1fr; }
  .griglia-due.invertita > *:first-child { order: 0; }
}

@media (max-width: 640px) {
  .campo-riga { grid-template-columns: 1fr; }
  .testata-telefono em { display: none; }
  .testata-telefono span { font-size: .95rem; }
  .modulo-scheda { padding: 20px 16px; }
  .flottante { right: 12px; bottom: 12px; padding: 12px 18px; font-size: .92rem; }
  /* Quando i bottoni sono due, right e bottom valgono per la riga: dentro,
     il bottone non si appiccica più allo schermo da solo.
     Sul telefono non si affiancano mai: uno sopra l'altro, e **sotto resta il
     preventivo**, esattamente dove stava prima che il richiamo comparisse.
     Affiancati ci starebbero anche — su un telefono grande — ma spingerebbero
     il bottone principale verso il centro dello schermo, cioè lo
     sposterebbero da dove chi conosce il sito va a cercarlo. In colonna è
     `align-items` a tenerli a destra, non `justify-content`: cambiando la
     direzione i due assi si scambiano. */
  .flottanti {
    right: 12px;
    bottom: 12px;
    gap: 8px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
  }
  .ripresa-flottante { padding: 7px 4px 7px 12px; }
  .ripresa-vai { font-size: .88rem; }
  .flottante-whatsapp { left: 12px; bottom: 12px; }
  .cookie-bottoni { justify-content: stretch; }
  .cookie-bottoni .btn { flex: 1 1 140px; }
  .piede-basso { justify-content: flex-start; }
  body { font-size: 16px; }
  .contenitore { padding: 0 16px; }
  .certificazione img { width: 180px; margin-bottom: 24px; }
  .numeri-griglia { gap: 12px; }
  .numero span { font-size: .68rem; letter-spacing: .03em; }
  .bottoni .btn { width: 100%; }
}

/* Sotto i 350 px nella testata non ci sta più niente: il logo, il numero e il
   bottone si contendono la riga. L'icona del telefono è la prima cosa che può
   andarsene senza perdere informazione — il numero resta, ed è cliccabile
   comunque. Vale solo per la testata del sito: nella pagina di ringraziamento
   accanto al numero non c'è altro. */
@media (max-width: 349.98px) {
  .testata .testata-telefono svg { display: none; }
}

/* Sotto i 640 px vale l'immagine per telefono, se ne è stata caricata una.
   Il secondo argomento di var() è il ripiego: senza --sfondo-foto-mobile si torna
   a --sfondo, cioè alla foto desktop. È tutto qui il «se manca quella mobile
   prendi quella desktop»: non serve una riga di PHP. */
@media (max-width: 640px) {
  .hero,
  .pagina-landing .hero.con-immagine {
    background-image: var(--sfondo-foto-mobile, var(--sfondo-foto, none));
  }
}

/* CSS Simone */
@media (max-width: 640px) {
   .pagina-home section.sezione.hero.hero-media.hero-con-modulo.con-immagine .hero-testo { text-align:center; }
   .pagina-home section.sezione.hero.hero-media.hero-con-modulo.con-immagine .hero-testo .occhiello.chiaro { margin-top: 120px;}
   .pagina-home section.sezione.hero.hero-media.hero-con-modulo.con-immagine .hero-testo .bottoni .btn { width: auto; margin: 0 auto 80px;}
   .pagina-home section.sezione.hero.hero-media.hero-con-modulo.con-immagine { background-size: contain; background-position: 0 -40px; margin-bottom: -40px; }
   
   
}