/* ==========================================================================
   Landing page Riccardo Bianchini · stile "Energia Diretta"
   Mobile-first. Variabili in :root. Nessun CSS inline nell'HTML (CSP).
   ========================================================================== */

/* ---- Font locali (Google Fonts, licenza SIL OFL in /fonts) ---- */
@font-face {
  font-family: "Archivo Black";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/archivo-black-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/figtree-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
}

/* ---- Variabili ---- */
:root {
  --nero-verde: #0B1412;
  --card: #121F1B;
  --bordo: #223730;
  --testo: #F2F6F3;
  --testo-att: #9DB0A8;
  --verde: #4CBBA1;
  --verde-neon: #B9FFE9;
  --giallo: #F9D631;
  --giallo-neon: #FFF6B3;
  --rosso: #FF5A4E;
  --bianco: #FFFFFF;

  --font-titoli: "Archivo Black", "Arial Black", Impact, sans-serif;
  --font-corsivo: "Fraunces", "Times New Roman", serif;
  --font-testo: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --raggio: 24px;
  --raggio-s: 12px;
  --gutter: 20px;
  --max: 1120px;

  --alone-giallo: 0 0 12px rgba(249, 214, 49, 0.9), 0 0 40px rgba(249, 214, 49, 0.5);
  --alone-verde: 0 0 12px rgba(76, 187, 161, 0.9), 0 0 40px rgba(76, 187, 161, 0.5);
  --ombra-verde: 0 0 0 1.5px var(--verde), 0 0 24px rgba(76, 187, 161, 0.35);
}

/* ---- Reset leggero ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nero-verde);
  color: var(--testo);
  font-family: var(--font-testo);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--giallo);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }
p { margin: 0 0 1em; }
strong { font-weight: 800; }
.solo-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.salta {
  position: absolute; left: var(--gutter); top: -60px;
  background: var(--giallo); color: var(--nero-verde); padding: 10px 14px;
  border-radius: var(--raggio-s); font-weight: 800; z-index: 100;
}
.salta:focus { top: 10px; }

/* ---- Layout ---- */
.contenitore { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
section { padding: 56px 0; }
@media (min-width: 768px) { section { padding: 60px 0; } }

/* ---- Tipografia ---- */
h1, h2, h3 {
  font-family: var(--font-titoli);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.1rem, 9vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 6.5vw, 3rem); }
h3 { font-size: 1.1rem; }
.parola-neon {
  font-family: var(--font-corsivo);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.12em;
  color: var(--giallo-neon);
  text-shadow: var(--alone-giallo);
}
.parola-neon.verde { color: var(--verde-neon); text-shadow: var(--alone-verde); }
.sotto { font-size: 1.1rem; color: var(--testo-att); max-width: 40ch; }
.sotto strong { color: var(--testo); }
.grande { font-size: 1.2rem; }
.att { color: var(--testo-att); }
.piccolo { font-size: 0.85rem; color: var(--testo-att); }

/* ---- Barra in alto ---- */
.barra-alto {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 20, 18, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordo);
}
.barra-alto .contenitore {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px;
}
.marchio { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; color: var(--testo); }
.marchio strong { font-family: var(--font-titoli); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.01em; }
.marchio span { font-size: 0.75rem; color: var(--testo-att); }
.menu { display: none; gap: 22px; }
.menu a { color: var(--testo-att); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.menu a:hover { color: var(--testo); }
@media (min-width: 900px) { .menu { display: flex; } }
.bottone-mini {
  font-family: var(--font-titoli); font-size: 0.85rem; text-transform: uppercase;
  background: var(--giallo); color: var(--nero-verde); text-decoration: none;
  padding: 10px 14px; border-radius: 999px; white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center;
}

/* ---- Pulsante principale (CTA) ---- */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 60px; padding: 14px 22px;
  background: var(--bianco); color: var(--nero-verde);
  font-family: var(--font-titoli); font-size: 1.05rem; text-transform: uppercase;
  text-decoration: none; text-align: center; line-height: 1.1;
  border: 3px solid var(--giallo); border-radius: var(--raggio);
  box-shadow: 0 0 14px rgba(249, 214, 49, 0.55), 0 0 40px rgba(249, 214, 49, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover, .cta:focus-visible { transform: translateY(-2px); box-shadow: 0 0 20px rgba(249, 214, 49, 0.8), 0 0 60px rgba(249, 214, 49, 0.4); }
.cta .freccia { font-size: 1.3em; line-height: 0; }
@media (min-width: 600px) { .cta { width: auto; min-width: 320px; } }
.blocco-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 28px 0 0; text-align: center; }
.oppure { color: var(--testo-att); }
.oppure a { color: var(--testo); font-weight: 700; text-decoration-color: var(--verde); text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.icona-wa { width: 20px; height: 20px; fill: #25D366; flex: none; }

/* ---- Riga di credibilità ---- */
.credibilita {
  margin: 28px 0 0; width: fit-content; max-width: 100%;
  background: transparent; color: var(--testo);
  border: 1.5px solid var(--verde); box-shadow: 0 0 14px rgba(76, 187, 161, 0.45), inset 0 0 10px rgba(76, 187, 161, 0.12);
  border-radius: 999px;
  padding: 6px 18px 6px 6px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.35;
  display: flex; align-items: center; gap: 12px;
}
.credibilita .cred-foto { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; border: 1.5px solid var(--verde); }
.credibilita .cred-logo { height: 22px; width: auto; flex: none; }
.credibilita .cred-corpo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.credibilita .cred-testi { display: flex; flex-direction: column; gap: 2px; }
.credibilita .cred-testi > span { white-space: nowrap; }
.credibilita .sep { display: none; color: var(--verde); }
@media (max-width: 599px) { .credibilita { font-size: 0.68rem; letter-spacing: 0.04em; border-radius: 28px; padding: 8px 16px 8px 8px; } .credibilita .cred-logo { height: 18px; } }
@media (min-width: 600px) {
  .credibilita .cred-corpo { flex-direction: row; align-items: center; gap: 12px; }
  .credibilita .cred-testi { flex-direction: row; align-items: center; gap: 10px; }
  .credibilita .sep { display: inline; }
}

/* ---- Apertura ---- */
.apertura { padding-top: 36px; }
/* Apertura senza foto (28/10): le bollette seguono subito, meno spazio in mezzo */
.apertura { padding-bottom: 0; }
.apertura + #prove { padding-top: 44px; }
@media (min-width: 768px) { .apertura + #prove { padding-top: 56px; } }
.apertura .sotto { max-width: 36ch; }
@media (min-width: 900px) { .apertura .sotto { max-width: none; } }
.apertura-griglia { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .apertura-griglia { grid-template-columns: 1.1fr 1fr; gap: 48px; }
  .apertura { padding-top: 56px; }
}

/* ---- Video ---- */
.video-box { margin-top: 28px; }
.video-box h2 { font-size: 1.05rem; color: var(--testo-att); margin-bottom: 12px; font-family: var(--font-testo); font-weight: 700; text-transform: none; letter-spacing: 0; }
.cornice {
  position: relative; border-radius: var(--raggio); overflow: hidden;
  box-shadow: var(--ombra-verde); background: var(--card);
}
.segnaposto-video { position: relative; aspect-ratio: 4 / 5; }
@media (min-width: 600px) { .segnaposto-video { aspect-ratio: 16 / 10; } }
/* Versione senza video (28/10): su computer la foto è quasi quadrata, così si vedono cravatta e scritta NWG */
@media (min-width: 900px) { .segnaposto-video { aspect-ratio: 1 / 1; } .apertura .video-box { margin-top: 0; } }
.apertura .video-box { margin-top: 4px; }
.segnaposto-video img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.segnaposto-video .etichetta {
  position: absolute; inset: auto 16px 16px 16px;
  background: rgba(11, 20, 18, 0.85); border: 1px solid var(--bordo);
  border-radius: var(--raggio-s); padding: 12px 14px;
  font-weight: 700; display: flex; align-items: center; gap: 10px;
}
.etichetta .pallino { width: 10px; height: 10px; border-radius: 50%; background: var(--giallo); box-shadow: var(--alone-giallo); flex: none; }
.cornice video { width: 100%; aspect-ratio: 16 / 9; background: #000; }

/* ---- Card generiche ---- */
.card {
  background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 22px;
}
.griglia-2 { display: grid; gap: 16px; }
.griglia-3 { display: grid; gap: 16px; }
@media (min-width: 700px) { .griglia-2 { grid-template-columns: 1fr 1fr; } .griglia-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Recensioni ---- */
.punteggio { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 6px; }
.punteggio .att { flex-basis: 100%; }
.punteggi { margin-bottom: 16px; }
.punteggi .punteggio-link { margin-bottom: 0; }
.punteggio-link { display: block; text-decoration: none; color: var(--testo); background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 20px 22px; margin-bottom: 16px; }
.punteggio-link:hover { border-color: var(--verde); }
.punteggio-link .link-freccia { margin-top: 4px; color: var(--verde); }
.stelle { color: var(--giallo); letter-spacing: 2px; font-size: 1.3rem; text-shadow: 0 0 10px rgba(249, 214, 49, 0.5); }
.numero-grande { font-family: var(--font-titoli); font-size: 2rem; color: var(--giallo-neon); text-shadow: var(--alone-giallo); }
.recensione { display: flex; flex-direction: column; gap: 10px; }
.recensione blockquote { margin: 0; font-size: 1rem; }
.recensione .autore { color: var(--testo-att); font-size: 0.9rem; }
.recensione .stelle { font-size: 1rem; }
.segnaposto-testo { color: var(--giallo); font-weight: 700; }
.link-freccia { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; min-height: 44px; }

/* ---- Grafico 3% ---- */
.problema-griglia { display: grid; gap: 28px; align-items: center; }
@media (min-width: 800px) { .problema-griglia { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } }
.ciambella { width: min(100%, 320px); margin-inline: auto; }
.ciambella-blocco { display: grid; gap: 20px; }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.95rem; }
.legenda li { display: flex; align-items: center; gap: 10px; }
.legenda .quadrato { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.legenda .q1 { background: #2E5B52; } .legenda .q2 { background: #3C7A6C; } .legenda .q3 { background: #4CBBA1; }
.legenda .q4 { background: #7FD3BE; } .legenda .q5 { background: #9DB0A8; } .legenda .q6 { background: var(--giallo); box-shadow: var(--alone-giallo); }
.legenda .margine { font-weight: 800; color: var(--giallo-neon); }
.nota-voci { font-size: 0.95rem; color: var(--testo-att); margin: 4px 0 0; border-left: 3px solid var(--verde); padding-left: 12px; }

/* ---- Passi ---- */
.passi { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: passo; }
.passi li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.passi .num {
  font-family: var(--font-titoli); font-size: 2rem; color: var(--giallo-neon); text-shadow: var(--alone-giallo);
  line-height: 1;
}
.passi strong { display: block; font-size: 1.05rem; }
@media (min-width: 900px) {
  .passi { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .passi li { grid-template-columns: 1fr; gap: 10px; background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 22px; }
  .passi .num { font-size: 2.6rem; }
  #come-funziona .nota-verde { text-align: center; }
}
.nota-verde { color: var(--verde); font-style: italic; margin-top: 18px; }

/* ---- Frase NWG con parole barrate ---- */
/* Frase NWG tra galleria e numeri (28/10) */
.frase-nwg { font-family: var(--font-titoli); font-weight: 400; text-transform: none; font-size: clamp(1.35rem, 5.2vw, 2.05rem); line-height: 1.15; letter-spacing: -0.015em; margin: 32px 0 0; max-width: 30ch; text-wrap: balance; }
.figura-sede { max-width: 480px; margin-top: 28px; }
/* Titolo lungo in minuscolo (28/10, richiesta di Riccardo): si legge meglio */
h2.titolo-lungo { text-transform: none; letter-spacing: -0.015em; }
.senza-a-capo { white-space: nowrap; }
.cancellato { position: relative; display: inline-block; white-space: nowrap; font-family: var(--font-corsivo); font-style: italic; font-weight: 400; font-size: 1.12em; line-height: 1; }
.cancellato::after {
  content: ""; position: absolute; left: -0.06em; right: -0.06em; top: 52%;
  height: 3px; margin-top: -1.5px; border-radius: 3px; pointer-events: none;
  background: rgba(76, 187, 161, 0.8);
  box-shadow: 0 0 6px rgba(76, 187, 161, 0.9), 0 0 16px rgba(76, 187, 161, 0.5);
}

/* ---- Per chi è (cliente ideale) ---- */
.card-si {
  border: 1.5px solid rgba(76, 187, 161, 0.7);
  box-shadow: 0 0 18px rgba(76, 187, 161, 0.18);
  margin-top: 8px;
}
.lista-si, .lista-no { list-style: none; margin: 0; padding: 0; display: grid; }
.lista-si { gap: 16px; }
@media (min-width: 768px) { .lista-si { grid-template-columns: 1fr 1fr; gap: 18px 32px; } }
.lista-si li, .lista-no li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.lista-si li { font-size: 1.02rem; }
.spunta, .ics { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.spunta { width: 24px; height: 24px; stroke: var(--verde); stroke-width: 3; margin-top: 1px; }
.card-no { margin-top: 16px; padding: 18px 20px; }
.titolo-no {
  font-family: var(--font-testo); font-weight: 700; text-transform: none; letter-spacing: 0;
  font-size: 0.95rem; line-height: 1.3; color: var(--testo-att); margin: 0 0 12px;
}
.lista-no { gap: 10px; font-size: 0.92rem; color: var(--testo-att); }
.ics { width: 18px; height: 18px; stroke: var(--testo-att); stroke-width: 2; margin-top: 2px; }
.ti-ritrovi { font-weight: 800; font-size: 1.15rem; text-align: center; margin: 28px 0 0; }
#per-chi .blocco-cta { margin-top: 16px; }
/* "Ti ci ritrovi?" fa da ponte verso Tre passi: meno spazio tra le due sezioni */
#per-chi { padding-bottom: 12px; }
#per-chi + #come-funziona { padding-top: 28px; }
#per-chi h2 { text-wrap: balance; }

/* ---- Galleria bollette ---- */
.galleria { position: relative; margin-top: 24px; }
.galleria-scroll {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  list-style: none; margin: 0;
  padding: 8px 4px 16px; scrollbar-width: thin; scrollbar-color: var(--bordo) transparent;
  -webkit-overflow-scrolling: touch;
}
.galleria-scroll > li { flex: 0 0 78%; max-width: 320px; scroll-snap-align: center; }
@media (min-width: 600px) { .galleria-scroll > li { flex-basis: 300px; } }
.galleria-scroll::-webkit-scrollbar { height: 6px; }
.galleria-scroll::-webkit-scrollbar-thumb { background: var(--bordo); border-radius: 3px; }
.bolletta {
  display: block; width: 100%;
  background: var(--bianco); border-radius: var(--raggio); border: 0; padding: 0; cursor: zoom-in;
  box-shadow: var(--ombra-verde); position: relative; overflow: hidden; text-align: left;
}
.bolletta img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; object-position: top; background: var(--bianco); }
.bolletta .tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-titoli); font-size: 1.05rem;
  background: var(--nero-verde); color: var(--giallo-neon); text-shadow: var(--alone-giallo);
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--giallo);
}
.bolletta .didascalia { display: block; padding: 10px 14px 12px; color: var(--nero-verde); font-size: 0.85rem; font-weight: 600; }
.galleria-frecce { display: none; justify-content: flex-end; gap: 10px; margin-top: 6px; }
@media (min-width: 900px) { .galleria-frecce { display: flex; } }
.freccia-btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--verde);
  background: var(--card); color: var(--testo); font-size: 1.4rem; cursor: pointer;
}
.freccia-btn:hover { background: var(--bordo); }

/* ---- Lightbox ---- */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.lightbox::backdrop { background: rgba(11, 20, 18, 0.96); }
.lightbox-dentro { position: relative; width: 100%; height: 100%; display: grid; place-items: center; padding: 16px; overflow: auto; }
.lightbox img { max-height: calc(100vh - 110px); width: auto; max-width: 100%; border-radius: var(--raggio-s); box-shadow: var(--ombra-verde); background: #fff; }
.lightbox .chiudi {
  position: fixed; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--bianco); color: var(--nero-verde); border: 0; font-size: 1.4rem; cursor: pointer; z-index: 2;
}
.lightbox .nav { position: fixed; top: 50%; transform: translateY(-50%); }
.lightbox .prec { left: 10px; } .lightbox .succ { right: 10px; }
.lightbox figcaption { color: var(--testo-att); text-align: center; margin-top: 10px; font-size: 0.9rem; position: fixed; bottom: 14px; left: 0; right: 0; padding: 0 70px; }

/* ---- Figure con didascalia ---- */
.figura { margin: 20px 0 24px; }
.figura img { width: 100%; height: auto; border-radius: var(--raggio); box-shadow: var(--ombra-verde); }
.figura figcaption { margin-top: 10px; font-size: 0.9rem; color: var(--testo-att); }
#chi-sono .figura { max-width: 480px; }
#chi-sono .figura-ring { max-width: 280px; }
@media (min-width: 768px) { #chi-sono .figura-ring { max-width: 340px; } }

/* ---- Numeri tre ---- */
.numeri { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 700px) { .numeri { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 699px) {
  .numeri { gap: 10px; }
  .numeri .card { display: flex; align-items: center; gap: 16px; text-align: left; padding: 14px 18px; }
  .numeri .card .n { font-size: 1.9rem; margin: 0; width: 6.6rem; flex: none; text-align: left; }
  .numeri .card .l { font-size: 0.9rem; line-height: 1.35; text-align: left; }
  .numeri-2 { grid-template-columns: 1fr 1fr; }
  .numeri-2 .card { display: block; text-align: center; padding: 14px 12px; }
  .numeri-2 .card .n { margin-bottom: 6px; width: auto; text-align: center; }
  .numeri-2 .card .l { font-size: 0.8rem; text-align: center; }
}
.numeri .card { text-align: center; }
.numeri .n { font-family: var(--font-titoli); font-size: 2.8rem; color: var(--giallo-neon); text-shadow: var(--alone-giallo); line-height: 1; display: block; margin-bottom: 8px; }
.numeri .l { color: var(--testo-att); font-size: 0.95rem; }

/* ---- Chi sono ---- */
.foto-riccardo { border-radius: var(--raggio); box-shadow: var(--ombra-verde); overflow: hidden; }
.foto-riccardo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.tesserino-box { margin-top: 16px; display: grid; gap: 12px; }
.tesserino-box img.tesserino { border-radius: var(--raggio-s); box-shadow: var(--ombra-verde); background: #fff; }
.card-bianca-logo {
  background: var(--bianco); border-radius: var(--raggio-s); padding: 8px 12px;
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
}
.card-bianca-logo img { height: 28px; width: auto; }
.card-bianca-logo span { color: var(--nero-verde); font-size: 0.8rem; font-weight: 700; }
.ruolo { font-style: italic; color: var(--testo-att); font-size: 0.95rem; }

/* ---- Energia 100% rinnovabile ---- */
.numeri-2 { margin-top: 24px; }
@media (min-width: 700px) { .numeri-2 { grid-template-columns: 1fr 1fr; } }
.numeri .n.n-att { color: var(--testo-att); text-shadow: none; }
.lista-una { margin-top: 24px; }
@media (min-width: 768px) { .lista-si.lista-una { grid-template-columns: 1fr; gap: 16px; } }
.nota-sostenibile { margin: 20px 0 24px; color: var(--testo-att); }
.nota-sostenibile a { font-weight: 700; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.frase-verde { font-weight: 800; font-size: 1.15rem; color: var(--verde-neon); margin: 28px 0 0; }

/* ---- Chi sono a colonna unica, foto e tesserino in chiusura ---- */
.zz-testo > p:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .zz { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin: 40px 0; }
  .zz-foto-sx { grid-template-columns: 2fr 3fr; }
  .zz-testo { font-size: 1.05rem; }
  .zz:first-of-type .zz-testo { font-size: 1.2rem; line-height: 1.5; }
  .zz .figura { margin: 0; justify-self: center; }
  .zz-foto-sx .figura { order: -1; }
  #chi-sono .zz .figura { max-width: 480px; width: 100%; }
  #chi-sono .zz .figura-ring { max-width: 300px; justify-self: start; }
  .zz-verde .lista-una { margin-top: 0; }
  .zz-verde .figura-sede { max-width: 480px; width: 100%; margin: 0; }
}
.firma { max-width: 420px; margin: 44px auto 0; }
.firma .tesserino-box { margin-top: 0; }
.firma .card-bianca-logo { margin-inline: auto; }

/* ---- FAQ ---- */
.faq .contenitore > details, .faq .contenitore > h2 { max-width: 760px; }
.faq details { background: var(--card); border: 1px solid var(--bordo); border-radius: var(--raggio-s); margin-bottom: 10px; }
.faq summary {
  cursor: pointer; padding: 16px 18px; font-weight: 800; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--giallo); font-family: var(--font-titoli); font-size: 1.3rem; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq .risposta { padding: 0 18px 16px; color: var(--testo-att); }
.faq .risposta strong { color: var(--testo); }

/* ---- Chiusura ---- */
.chiusura { text-align: center; }
.chiusura h2 { font-size: clamp(1.9rem, 8vw, 3.4rem); }
.chiusura .parola-neon { white-space: nowrap; }
.chiusura .blocco-cta { margin-top: 18px; }

/* ---- Piè di pagina ---- */
footer { border-top: 1px solid var(--bordo); padding: 36px 0 110px; font-size: 0.9rem; color: var(--testo-att); }
@media (min-width: 900px) { footer { padding-bottom: 40px; } }
.footer-riga { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 14px; }
.footer-riga strong { color: var(--testo); }
.footer-link { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0; }
.footer-link a { color: var(--testo); min-height: 44px; display: inline-flex; align-items: center; }
footer a { color: var(--verde); }

/* ---- Barra fissa in basso (solo mobile) ---- */
.barra-basso {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgba(11, 20, 18, 0.92); border-top: 1px solid var(--bordo);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform 0.3s ease;
}
.barra-basso.visibile { transform: translateY(0); }
.barra-basso .cta { min-height: 52px; font-size: 0.95rem; }
@media (min-width: 900px) { .barra-basso { display: none; } }

/* ---- Animazioni all'ingresso ---- */
.entra { opacity: 0; transform: scale(0.95); transition: opacity 0.6s ease, transform 0.6s ease; }
.entra.visto { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra { opacity: 1; transform: none; transition: none; }
  .cta, .barra-basso { transition: none; }
}
.no-js .entra { opacity: 1; transform: none; }

/* ---- Pagina 404 e pagine legali ---- */
.pagina-testo { max-width: 72ch; }
.pagina-testo h1 { font-size: clamp(1.8rem, 7vw, 3rem); }
.pagina-testo h2 { font-size: 1.3rem; margin-top: 1.8em; }
.pagina-testo ul { padding-left: 1.2em; }
.pagina-testo li { margin-bottom: 0.4em; }
.pagina-testo .scorri { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1em; }
.pagina-testo table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.9rem; }
.pagina-testo th, .pagina-testo td { border: 1px solid var(--bordo); padding: 8px 10px; text-align: left; vertical-align: top; }
.centro { text-align: center; }
.centro-blocco { margin-inline: auto; }