/* Stile delle pagine di testo (homepage, esempi, note metodologiche, privacy, cookie, termini).
   Una modifica qui vale per tutte le pagine che caricano questo file; lo stile proprio di una pagina
   resta nel suo <style>, che viene dopo e quindi prevale. I link hanno ?v=versione: il browser tiene
   il file per un anno e scarica quello nuovo a ogni versione (lo controlla pubblica.sh). */
:root {
  --avorio: #f5f3ee;
  --bianco: #ffffff;
  --bordo: #e6e2d8;
  --inchiostro: #2b2d31;
  --testo: #4a5260;
  --tenue: #8a8f98;
  --blu: #173a5e;          /* blu notte: apertura, link, icone */
  --blu-scuro: #0d2440;    /* fondo pagina, pulsanti pieni */
  --blu-tinta: #eaeff5;    /* riquadri tinti */
  --blu-icona: #dfe7f0;
  --oro: #c9a14a;          /* accento */
  --oro-scuro: #b38a35;
  --oro-chiaro: #e2c27e;   /* accento su fondo scuro */
  --verde: #0ca30c;
  --raggio-grande: 28px;
  --raggio: 20px;
  --larghezza: 1120px;
  --titoli: "Poppins", system-ui, sans-serif;
}
section[id] { scroll-margin-top: 96px; }
body {
  margin: 0;
  background: var(--avorio);
  color: var(--testo);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--titoli); color: var(--inchiostro); letter-spacing: -.02em; margin: 0; }
h2 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; line-height: 1.12; }
h3 { font-size: 21px; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 16px; }
.occhiello { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--blu); margin-bottom: 14px; }
.centrato { text-align: center; max-width: 760px; margin: 0 auto; }
.centrato .intro { font-size: 19px; margin-top: 16px; }
/* pulsanti a pillola */
.pillola {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px; border-radius: 999px; font-weight: 600; font-size: 17px;
  text-decoration: none; border: 2px solid transparent; transition: transform .15s, background .15s, box-shadow .15s;
}
.pillola:hover { transform: translateY(-1px); }
.pillola svg { flex: none; }
.pillola.bianca { background: #fff; color: var(--blu-scuro); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.pillola.contorno { color: #fff; border-color: rgba(255, 255, 255, .55); }
.pillola.contorno:hover { background: rgba(255, 255, 255, .1); }
.pillola.calda { background: var(--oro); color: var(--blu-scuro); box-shadow: 0 8px 20px rgba(201, 161, 74, .3); }
.pillola.calda:hover { background: var(--oro-scuro); }
.pillola.blu { background: var(--blu-scuro); color: #fff; }
/* apertura */
.apertura {
  background: var(--blu);
  color: #fff; padding: 64px 0 80px;
}
.apertura .contenitore { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.chip { display: inline-block; background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; font-size: 15px; padding: 8px 18px; border-radius: 999px; }
.apertura h1 { color: #fff; font-size: clamp(42px, 6.4vw, 74px); font-weight: 800; line-height: 1.04; margin: 22px 0 14px; }
.apertura .firma { font-family: var(--titoli); font-weight: 500; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.35; letter-spacing: -.01em; color: var(--oro-chiaro); margin-bottom: 18px; }
.apertura .lead { font-size: 18px; color: rgba(255, 255, 255, .85); max-width: 32em; }
.apertura .azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.garanzie { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; font-size: 15px; color: rgba(255, 255, 255, .9); padding: 0; list-style: none; }
.garanzie li { display: inline-flex; align-items: center; gap: 8px; }
.garanzie svg { color: var(--oro-chiaro); }
.anteprima { background: #fff; color: var(--testo); border-radius: var(--raggio-grande); padding: 26px; box-shadow: 0 24px 60px rgba(10, 30, 50, .28); }
.anteprima .riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.anteprima .etichetta { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.anteprima .interessi { font-size: 13px; font-weight: 700; color: var(--verde); background: #e6f5e6; padding: 3px 10px; border-radius: 999px; }
.anteprima .rata { font-family: var(--titoli); font-size: 46px; font-weight: 800; color: var(--blu-scuro); line-height: 1.1; margin-top: 4px; font-variant-numeric: tabular-nums; }
.anteprima .rata small { font-size: 22px; color: var(--tenue); font-weight: 600; }
.anteprima .ipotesi { font-size: 15px; margin: 4px 0 16px; }
.anteprima .legenda { display: flex; gap: 18px; font-size: 13px; margin-top: 10px; flex-wrap: wrap; }
.anteprima .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
section.blocco { padding: 96px 0; }
/* schede */
.schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.scheda { background: #fff; border-radius: var(--raggio-grande); padding: 34px 32px; box-shadow: 0 2px 4px rgba(20, 30, 40, .03), 0 12px 32px rgba(20, 30, 40, .06); display: flex; flex-direction: column; }
.icona { width: 64px; height: 64px; border-radius: 18px; background: var(--blu-icona); color: var(--blu); display: grid; place-items: center; margin-bottom: 26px; }
.scheda .stato { align-self: flex-start; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 4px 11px; border-radius: 999px; margin-bottom: 12px; }
.stato.pronto { background: #e3f4e3; color: #0a7a0a; }
.stato.arrivo { background: #fdebdd; color: #b5551c; }
.stato.cantiere { background: #eeece6; color: var(--testo); }
.scheda h3 { margin-bottom: 10px; }
.scheda .domanda { font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--blu); margin-bottom: 12px; }
.scheda p { font-size: 16px; }
.scheda ul { margin: 0 0 16px; padding-left: 20px; font-size: 16px; }
.scheda .piede { margin-top: auto; padding-top: 6px; }
.collegamento { font-weight: 700; color: var(--blu); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.collegamento:hover { gap: 12px; }
.in-officina { color: var(--tenue); font-size: 15px; }
.tinto h2 { margin-bottom: 22px; }
.tinto p { font-size: 18px; }
.tinto .azioni { margin-top: 28px; }
.nota-autore { font-size: 17px; line-height: 1.55; color: var(--blu-scuro); border-left: 4px solid var(--oro); padding: 4px 0 4px 20px; margin-top: 24px; }
.banco { background: #fff; border-radius: var(--raggio); padding: 28px; }
.banco p { font-size: 16px; margin: 0; }
.banco + .banco { margin-top: 16px; }
/* punti di forza */
.punti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.punti .scheda { padding: 30px; }
.punti .icona { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 20px; }
.formula { background: #fff; border-radius: var(--raggio); padding: 22px 24px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 15px; line-height: 1.9; color: var(--inchiostro); overflow-x: auto; margin: 22px 0 16px; }
.esempio { background: #fff; border-radius: var(--raggio-grande); padding: 32px; box-shadow: 0 12px 32px rgba(20, 30, 40, .06); }
.esempio table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin-top: 10px; }
.esempio td { padding: 11px 0; border-bottom: 1px solid #f0ede6; }
.esempio td:last-child { text-align: right; font-weight: 700; color: var(--inchiostro); }
.esempio tr:last-child td { border-bottom: 0; }
/* domande */
.faq { max-width: 820px; margin: 44px auto 0; }
details { background: #fff; border-radius: var(--raggio); padding: 22px 26px; }
details + details { margin-top: 12px; }
summary { font-family: var(--titoli); font-weight: 600; font-size: 18px; color: var(--inchiostro); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--blu-icona); color: var(--blu); display: grid; place-items: center; font-size: 22px; line-height: 1; }
details[open] summary::after { content: "−"; }
footer .alto { padding-top: 64px; padding-bottom: 40px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
footer .motto { margin-top: 18px; font-size: 17px; }
footer h4 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .55); margin: 6px 0 16px; }
footer .avviso { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 26px; padding-bottom: 26px; font-size: 14px; }
footer .basso { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 22px; padding-bottom: 32px; font-size: 14px; color: rgba(255, 255, 255, .55); }
@media (max-width: 900px) {
  .apertura { padding: 44px 0 56px; }
  section.blocco { padding: 68px 0; }
  footer .alto { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .contenitore { padding: 0 20px; }
  .pillola { width: 100%; }
  .apertura .azioni .pillola.contorno { width: auto; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pillola { transition: none; } }
@media print {
  footer { background: none !important; color: #333 !important; border-top: 1px solid #ccc; }
  footer h4, footer .basso, footer .marchio .nome small { color: #555 !important; }
}