/* bandifondoperduto.com: stili comuni.
 * Token dal design system BFP (Automation-newsletter/bfp-design-system/colors_and_type.css).
 * Gli stili di una singola pagina stanno in static/css/pagine/<pagina>.css.
 */

@font-face { font-family: "Onest"; font-weight: 400; src: url("/static/fonts/Onest-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Onest"; font-weight: 500; src: url("/static/fonts/Onest-Medium.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Onest"; font-weight: 600; src: url("/static/fonts/Onest-SemiBold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Onest"; font-weight: 700; src: url("/static/fonts/Onest-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Onest"; font-weight: 800; src: url("/static/fonts/Onest-ExtraBold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Satoshi"; font-weight: 300 900; src: url("/static/fonts/Satoshi-Variable.woff2") format("woff2-variations"); font-display: swap; }

/* Font del sito di oggi su GHL, con gli stessi nomi di famiglia, per ricostruire le pagine fedelmente
 * (presi dagli snapshot del 2026-10-07; Lato e Albert Sans sono OFL). */
@font-face { font-family: "OnestBold"; src: url("/static/fonts/ghl/OnestBold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "OnestRegular"; src: url("/static/fonts/ghl/OnestRegular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SatoshiBold"; src: url("/static/fonts/ghl/SatoshiBold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "SatoshiRegular"; src: url("/static/fonts/ghl/SatoshiRegular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Albert Sans"; font-weight: 100 900; src: url("/static/fonts/ghl/AlbertSans.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Albert Sans"; font-style: italic; font-weight: 100 900; src: url("/static/fonts/ghl/AlbertSans-Italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 300; src: url("/static/fonts/ghl/Lato-300.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 400; src: url("/static/fonts/ghl/Lato-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Lato"; font-weight: 700; src: url("/static/fonts/ghl/Lato-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 400; src: url("/static/fonts/ghl/Montserrat-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 500; src: url("/static/fonts/ghl/Montserrat-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 600; src: url("/static/fonts/ghl/Montserrat-600.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Montserrat"; font-weight: 700; src: url("/static/fonts/ghl/Montserrat-700.woff2") format("woff2"); font-display: swap; }

:root {
  --verde: #114A43;
  --verde-scuro: #0c3833;
  --verde-chiaro: #eaf2f0;
  --lime: #D8E28C;
  --lime-chiaro: #f1f5cf;
  --lime-scuro: #c3cf66;
  --teal: #81E6D9;
  --maroon: #5C1A1A;
  --bianco: #FFFFFF;
  --nero: #0F1A14;
  --grigio: #4A5A52;
  --grigio-chiaro: #6f6a5e; /* era #959082: contrasto 3,2 su bianco */
  --crema: #F5F2E8;
  --bordo: #ddd8c7;

  --font-titoli: "Onest", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-testo: "Satoshi", "Onest", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --larghezza: 1180px;
  --larghezza-stretta: 760px;
  --raggio: 14px;
  --raggio-grande: 24px;
  --ombra: 0 10px 30px rgba(15, 26, 20, .08);
  --spazio-sezione: clamp(56px, 8vw, 104px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--font-testo);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--verde); }
h1, h2, h3, h4 { font-family: var(--font-titoli); line-height: 1.15; margin: 0 0 .5em; color: inherit; }
h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 700; }
p { margin: 0 0 1em; }
.evidenza { color: var(--lime); }
.sfondo-chiaro .evidenza, .sezione--crema .evidenza, .sezione--bianca .evidenza { color: var(--verde); background: var(--lime); padding: 0 .15em; border-radius: 4px; }

.contenitore { width: 100%; max-width: var(--larghezza); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .contenitore { padding: 0 32px; } }
.contenitore--stretto { max-width: var(--larghezza-stretta); }

/* Sezioni */
.sezione { padding: var(--spazio-sezione) 0; }
.sezione--verde { background: var(--verde); color: var(--bianco); }
.sezione--verde a:not(.bottone) { color: var(--lime); }
.sezione--crema { background: var(--crema); }
.sezione--lime { background: var(--lime); color: var(--verde); }
.sezione--bianca { background: var(--bianco); }
.occhiello {
  display: inline-flex; align-items: center; gap: .5em;
  font-family: var(--font-titoli); font-size: .875rem; font-weight: 600;
  color: var(--verde); margin-bottom: .75em;
}
.occhiello::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sezione--verde .occhiello { color: var(--lime); }
.centrato { text-align: center; }
.centrato .occhiello { justify-content: center; }

/* Griglie */
.griglia { display: grid; gap: 24px; }
@media (min-width: 720px) {
  .griglia--2 { grid-template-columns: repeat(2, 1fr); }
  .griglia--3 { grid-template-columns: repeat(3, 1fr); }
  .griglia--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) { .griglia--4 { grid-template-columns: repeat(4, 1fr); } }
.colonne { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .colonne { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* Bottoni */
.bottone {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font-titoli); font-weight: 700; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.bottone:hover { transform: translateY(-1px); }
.bottone:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.bottone--lime { background: var(--lime); color: var(--verde); }
.bottone--lime:hover { background: var(--lime-scuro); }
.bottone--verde { background: var(--verde); color: var(--bianco); }
.bottone--verde:hover { background: var(--verde-scuro); }
.bottone--contorno { background: transparent; color: var(--verde); border-color: var(--verde); }
.sezione--verde .bottone--contorno { color: var(--bianco); border-color: var(--bianco); }
.bottone--grande { min-height: 56px; padding: 16px 32px; font-size: 1.0625rem; }

/* Schede */
.scheda { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 24px; box-shadow: var(--ombra); }
.scheda--lime { background: var(--lime); border-color: transparent; color: var(--verde); }
.scheda--verde { background: var(--verde); border-color: transparent; color: var(--bianco); }
.numero-grande { font-family: var(--font-titoli); font-weight: 800; font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1; }

/* Domande frequenti */
.faq details { border-bottom: 1px solid var(--bordo); padding: 18px 0; }
.faq summary { font-family: var(--font-titoli); font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--verde); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 12px 0 0; color: var(--grigio); }

/* Moduli */
.modulo { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label, .campo legend { font-family: var(--font-titoli); font-weight: 600; font-size: .95rem; }
.campo input[type="text"], .campo input[type="email"], .campo input[type="tel"], .campo select, .campo textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--bordo); border-radius: 10px;
  font: inherit; color: var(--nero); background: var(--bianco);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-chiaro); }
.campo--consenso { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-size: .9rem; color: var(--grigio); }
.campo--consenso input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--verde); }
.modulo__errore { color: var(--maroon); font-size: .9rem; }
.modulo__esito { padding: 16px; border-radius: 10px; background: var(--verde-chiaro); color: var(--verde); }

/* Intestazione */
.intestazione { position: sticky; top: 0; z-index: 50; background: rgba(17, 74, 67, .96); backdrop-filter: blur(8px); }
.intestazione__riga { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }
.intestazione__logo img { height: 36px; width: auto; }
.intestazione__menu { display: flex; align-items: center; gap: 20px; }
.intestazione__menu a:not(.bottone) { color: var(--bianco); text-decoration: none; font-family: var(--font-titoli); font-weight: 600; }
@media (max-width: 560px) { .intestazione__menu a:not(.bottone) { display: none; } .intestazione__menu .bottone { min-height: 40px; padding: 8px 16px; font-size: .9rem; } }

/* Piede */
.piede { background: var(--verde); color: var(--bianco); padding: 40px 0 24px; }
.piede__riga { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.piede__logo img { height: 40px; width: auto; }
.piede__link { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.piede__link a, .piede__preferenze { color: var(--bianco); text-decoration: none; font: 600 .95rem var(--font-titoli); }
.piede__preferenze { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.piede__note { margin-top: 24px; font-size: .8rem; opacity: .75; }

/* Banner dei cookie */
.consenso { position: fixed; inset: auto 0 0 0; z-index: 1000; padding: 16px; display: flex; justify-content: center; pointer-events: none; }
.consenso__box {
  pointer-events: auto; max-width: 720px; width: 100%; background: var(--bianco); color: var(--nero);
  border-radius: var(--raggio); box-shadow: 0 20px 50px rgba(15, 26, 20, .25); padding: 20px; border: 1px solid var(--bordo);
}
.consenso__titolo { font: 700 1.05rem var(--font-titoli); margin-bottom: 6px; }
.consenso__testo { font-size: .92rem; color: var(--grigio); }
.consenso__scelte { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; font-size: .95rem; }
.consenso__scelte label { display: inline-flex; gap: 8px; align-items: center; }
.consenso__bottoni { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.consenso__bottoni .bottone { min-height: 44px; padding: 10px 20px; font-size: .95rem; }
@media (max-width: 560px) { .consenso__bottoni .bottone { flex: 1 1 100%; } }

/* Pulsante WhatsApp al posto della chat di GHL */
.whatsapp-fisso {
  position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: var(--bianco); display: grid; place-items: center; box-shadow: var(--ombra);
}

/* Articoli del blog */
.articolo__corpo { padding: 40px 0 var(--spazio-sezione); }
.articolo__torna a { font: 600 .95rem var(--font-titoli); text-decoration: none; }
.articolo__titolo { margin-top: 12px; }
.articolo__data { color: var(--grigio); font-size: .95rem; }
.articolo__copertina { width: 100%; border-radius: var(--raggio); margin: 24px 0 32px; aspect-ratio: 16 / 9; object-fit: cover; }
.articolo__testo h2 { margin-top: 1.6em; font-size: 1.6rem; }
.articolo__testo h3 { margin-top: 1.4em; }
.articolo__testo img { border-radius: var(--raggio); margin: 24px auto; }
.articolo__testo table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.articolo__testo th, .articolo__testo td { border: 1px solid var(--bordo); padding: 8px 10px; text-align: left; }
.articolo__testo iframe { max-width: 100%; }

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

/* Elenco del blog */
.elenco-articoli { display: grid; gap: 28px; }
@media (min-width: 720px) { .elenco-articoli { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .elenco-articoli { grid-template-columns: repeat(3, 1fr); } }
.scheda-articolo { background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; display: flex; flex-direction: column; }
.scheda-articolo a { color: inherit; text-decoration: none; }
.scheda-articolo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.scheda-articolo__titolo { font-size: 1.15rem; margin: 16px 20px 8px; }
.scheda-articolo__testo { margin: 0 20px 12px; color: var(--grigio); font-size: .95rem; }
.scheda-articolo__data { margin: auto 20px 18px; color: var(--grigio-chiaro); font-size: .85rem; }
.articolo__cta { text-align: center; margin: 28px 0; }
.articolo__testo video { width: 100%; border-radius: var(--raggio); margin: 24px 0; background: var(--nero); }
.consenso__scelte[hidden] { display: none; }

/* Popup di scelta del quiz */
.scelta-quiz { border: 0; border-radius: var(--raggio-grande); padding: 32px 24px 28px; max-width: 520px; width: calc(100% - 32px); box-shadow: 0 30px 80px rgba(15, 26, 20, .35); }
.scelta-quiz::backdrop { background: rgba(8, 38, 34, .6); }
.scelta-quiz__titolo { font: 600 1.25rem/1.35 var(--font-titoli); text-align: center; margin: 0 0 20px; color: var(--verde); }
.scelta-quiz__bottoni { display: grid; gap: 12px; }
.scelta-quiz__chiudi { position: absolute; top: 8px; right: 8px; margin: 0; }
.scelta-quiz__chiudi button { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--grigio); padding: 6px 10px; }

/* Banner dei cookie e popup del quiz: indipendenti dagli stili delle singole pagine
 * (alcune pagine azzerano margini, font e interlinea per copiare GHL). */
.consenso, .scelta-quiz { font-family: var(--font-testo); font-size: 16px; line-height: 1.5; color: var(--nero); -webkit-font-smoothing: antialiased; text-align: left; }
.consenso *, .scelta-quiz * { box-sizing: border-box; }
.consenso .consenso__box { padding: 24px 24px 20px; }
.consenso .consenso__titolo { margin: 0 0 10px; font: 700 1.1rem/1.3 var(--font-titoli); color: var(--nero); }
.consenso .consenso__testo { margin: 0 0 18px; font-size: .93rem; line-height: 1.6; color: var(--grigio); }
.consenso .consenso__testo a { color: var(--verde); }
.consenso .consenso__scelte { margin: 0 0 18px; }
.consenso .consenso__bottoni { gap: 12px; }
.consenso .bottone, .scelta-quiz .bottone { font-family: var(--font-titoli); line-height: 1.2; margin: 0; }
.scelta-quiz .scelta-quiz__titolo { margin: 0 0 22px; font: 600 1.25rem/1.35 var(--font-titoli); color: var(--verde); text-align: center; }

/* Piede, intestazione e schede del blog: indipendenti dagli azzeramenti delle singole pagine. */
.piede, .intestazione { font-family: var(--font-testo); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.piede .piede__note { margin: 24px auto 0; }
.piede .piede__logo img { height: 40px; width: auto; }
.intestazione .intestazione__logo img { height: 36px; width: auto; }
.scheda-articolo .scheda-articolo__titolo { margin: 16px 20px 8px; line-height: 1.25; }
.scheda-articolo .scheda-articolo__testo { margin: 0 20px 12px; line-height: 1.5; }
.scheda-articolo .scheda-articolo__data { margin: auto 20px 18px; }

/* Piede sempre in fondo allo schermo anche nelle pagine corte (niente bianco sotto). */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body > * { flex-shrink: 0; }
body > .piede { margin-top: auto; }

/* campo esca contro i robot nei moduli: fuori dallo schermo, non nascosto con display:none */
.esca { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }