/* Soluzione Rapida · home (step 5) — fedele al design del kit, rifinita.
   🎨 Selettore di colore (Domenico, 22/10/2026): il colore del marchio è UNO, --brand; tutto il resto del
   marchio si calcola da lui (color-mix). Neri, grigi e bianchi restano fissi. Il testo sopra il marchio è
   --su-brand (bianco; il pannello lo mette nero se il colore scelto è chiaro). */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* marchio: misurato sul kit (rgb 237 8 15) */
  --brand: rgb(237 8 15);
  --su-brand: #FFFFFF;
  --brand-testo: var(--brand);
  /* varianti calcolate dal marchio */
  --brand-hover: color-mix(in srgb, var(--brand) 84%, #000);
  --brand-active: color-mix(in srgb, var(--brand) 72%, #000);
  --brand-tenue: color-mix(in srgb, var(--brand) 6%, transparent);
  --brand-rosa: color-mix(in srgb, var(--brand) 11%, transparent);
  --brand-bordo: color-mix(in srgb, var(--brand) 30%, transparent);
  --brand-ombra: color-mix(in srgb, var(--brand) 32%, transparent);

  /* neutri fissi, misurati sul design */
  --inchiostro: #0B1732;
  --testo: #3F4F67;
  --testo-tenue: #596A8A;
  --blu-menu: #1A335A;
  --scuro: #242C34;
  --scuro-linea: #4E545A;
  --linea: #E2E5EC;
  --grigio-passo: #DADDE5;
  --bianco: #FFFFFF;
  --sfondo: #FEFEFE;
  --errore: #C61A11;

  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --r-s: 10px;
  --r-m: 14px;
  --r-l: 20px;
  --ombra-card: 0 30px 60px -30px rgba(11, 23, 50, .28), 0 2px 6px rgba(11, 23, 50, .05);
  --contenitore: 1280px;
  --gutter: max(24px, env(safe-area-inset-left, 0px));
  --testata-h: 104px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--testata-h) + 12px);
}
html.menu-aperto { overflow: hidden; }
body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; color: var(--inchiostro); font-weight: 800; letter-spacing: -.025em; line-height: 1.08; text-wrap: balance; }
p, li, summary { text-wrap: pretty; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.salta {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--inchiostro); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none;
}
.salta:focus { top: 12px; }

.contenitore {
  width: 100%;
  max-width: calc(var(--contenitore) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: var(--gutter);
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
.centro { text-align: center; }
.occhiello {
  color: var(--brand-testo);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.occhiello--piccolo { font-size: 13px; letter-spacing: .12em; margin-bottom: 8px; }
.titolo-sezione { font-size: clamp(1.9rem, 3.3vw, 3.05rem); }

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 0 24px;
  border: 0; border-radius: var(--r-s);
  font-size: 17px; font-weight: 700; letter-spacing: -.005em; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: background-color .2s ease, color .2s ease, transform .16s var(--ease-out), box-shadow .2s ease;
}
.btn .ico { width: 1.15em; height: 1.15em; flex: none; transition: transform .25s var(--ease-out); }
.btn:active { transform: scale(.97); }
.btn--brand { background: var(--brand); color: var(--su-brand); box-shadow: 0 12px 24px -14px var(--brand-ombra); }
.btn--brand:active { background: var(--brand-active); }
.btn--bianco { background: var(--bianco); color: var(--brand-testo); }
.btn--chiaro { background: var(--bianco); color: var(--inchiostro); box-shadow: inset 0 0 0 1.5px var(--linea); }
.btn--largo { width: 100%; }
.btn--grande { min-height: 58px; font-size: 19px; padding: 0 34px; }
@media (hover: hover) and (pointer: fine) {
  .btn--brand:hover { background: var(--brand-hover); }
  .btn--bianco:hover { background: #F4F5F8; }
  .btn--chiaro:hover { box-shadow: inset 0 0 0 1.5px var(--testo-tenue); }
  .btn:hover .ico { transform: translateX(3px); }
}

/* ---------- testata ---------- */
.testata {
  position: sticky; top: 0; z-index: 50;
  background: var(--bianco);
  transition: box-shadow .25s ease, transform .4s var(--ease-in-out);
}
.testata.is-staccata { box-shadow: 0 6px 24px -12px rgba(11, 23, 50, .22); }
.testata__riga { display: flex; align-items: center; gap: 40px; height: var(--testata-h); }
.testata__logo { display: block; flex: none; margin-right: auto; }
.testata__logo img { height: 68px; width: auto; transform-origin: left center; transition: transform .35s var(--ease-out); }
.testata.is-staccata .testata__logo img { transform: scale(.84); }
.menu ul { display: flex; gap: 30px; }
.menu a {
  position: relative; display: inline-block; padding: 8px 0;
  color: var(--blu-menu); font-size: 16px; font-weight: 500; text-decoration: none; white-space: nowrap;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .menu a:hover::after { transform: scaleX(1); } }
.testata__cta { min-height: 52px; white-space: nowrap; flex: none; }
.testata__apri {
  display: none; position: relative; width: 46px; height: 46px; margin-right: -6px;
  border: 0; border-radius: 12px; background: transparent; cursor: pointer; touch-action: manipulation;
}
.testata__apri:active { background: var(--brand-tenue); }
.testata__apri span {
  position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px; background: var(--inchiostro);
  transition: transform .25s var(--ease-out), opacity .2s ease;
}
.testata__apri span:nth-child(1) { top: 15px; }
.testata__apri span:nth-child(2) { top: 22px; }
.testata__apri span:nth-child(3) { top: 29px; }
.testata__apri[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.testata__apri[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.testata__apri[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.testata__apri[aria-expanded="true"] .testata__apri-apri, .testata__apri[aria-expanded="false"] .testata__apri-chiudi { display: none; }
.menu-tel {
  position: fixed; left: 0; right: 0; top: var(--testata-h);
  height: calc(100dvh - var(--testata-h));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--bianco);
  padding: 20px max(16px, env(safe-area-inset-left, 0px)) calc(24px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linea);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .18s ease, transform .18s var(--ease-out), visibility 0s linear .18s;
}
.menu-tel.is-aperto {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .3s var(--ease-out), transform .38s var(--ease-out), visibility 0s;
}
@media (min-width: 1200px) { .menu-tel { display: none; } }
.menu-tel li + li { border-top: 1px solid var(--linea); }
.menu-tel a:not(.btn) {
  display: block; padding: 18px 4px; color: var(--inchiostro); font-size: 22px; font-weight: 700;
  text-decoration: none; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.menu-tel a:not(.btn):active { color: var(--brand-testo); }
.menu-tel .btn { margin-top: 24px; min-height: 56px; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 76px 0 0; }
.hero__onde { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--brand); }
.hero::after { /* il rosa del design, un po' più pieno sotto la testata */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--brand-tenue), transparent 70%);
}
.hero__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(0, .9fr);
  grid-template-areas: "testo modulo" "scena modulo";
  grid-template-rows: auto 1fr;
  column-gap: 64px;
}
.hero__testo { grid-area: testo; }
.hero__titolo { font-size: clamp(2.5rem, 5.1vw, 4.7rem); line-height: 1.01; letter-spacing: -.038em; }
.hero__titolo .evidenza { display: block; color: var(--brand-testo); }
.hero__sotto { margin-top: 22px; max-width: 32em; font-size: 22px; line-height: 1.45; color: var(--inchiostro); }
.spunte { display: flex; flex-wrap: wrap; gap: 12px 48px; margin-top: 22px; }
.spunte li { display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 500; color: var(--inchiostro); }
.spunta {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: var(--su-brand);
}
.spunta svg { width: 18px; height: 18px; }
.hero__scena { grid-area: scena; align-self: end; margin: 18px 0 -6px -2%; }
.scena { position: relative; width: min(100%, 690px); aspect-ratio: 1240 / 916; }
.hero__modulo { grid-area: modulo; align-self: start; padding-bottom: 64px; }

/* ---------- modulo a passi ---------- */
.modulo {
  position: relative;
  background: var(--bianco);
  border-radius: var(--r-l);
  box-shadow: var(--ombra-card);
  padding: 30px 32px 24px;
}
.modulo__titolo { font-size: 32px; letter-spacing: -.03em; }
.passi {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 22px -8px 0; text-align: center;
}
.passi::before {
  content: ""; position: absolute; top: 20px; left: 12.5%; right: 12.5%; height: 2px; background: var(--linea);
}
.passi::after { /* l'avanzamento: la linea si riempie del colore del marchio, passo dopo passo */
  content: ""; position: absolute; top: 20px; left: 12.5%; right: 12.5%; height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease-in-out);
}
.passi[data-passo="2"]::after { transform: scaleX(.3334); }
.passi[data-passo="3"]::after { transform: scaleX(.6667); }
.passi[data-passo="4"]::after { transform: scaleX(1); }
.passi__voce { position: relative; display: grid; justify-items: center; gap: 8px; }
.passi__num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--grigio-passo); color: var(--inchiostro); font-weight: 700; font-size: 17px;
  box-shadow: 0 0 0 6px var(--bianco);
  transition: background-color .3s ease, color .3s ease;
}
.passi__nome { font-size: 16px; color: var(--testo-tenue); transition: color .3s ease; }
.passi__voce.is-attivo .passi__num, .passi__voce.is-fatto .passi__num { background: var(--brand); color: var(--su-brand); }
.passi__voce.is-attivo .passi__nome { color: var(--brand-testo); font-weight: 600; }
.modulo__contatore { margin-top: 14px; font-size: 15px; color: var(--testo-tenue); }

.modulo__passi { display: grid; margin-top: 16px; }
.modulo__passo { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.modulo__passo.is-attivo { visibility: visible; opacity: 1; }
.modulo__domanda { display: block; margin-bottom: 14px; color: var(--inchiostro); font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.modulo__domanda--campo { margin-top: 24px; }

.scelte-card { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.scelta-card {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 10px;
  min-height: 136px; padding: 18px 12px; text-align: center;
  border-radius: var(--r-m); background: var(--bianco); box-shadow: inset 0 0 0 1.5px var(--linea);
  cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: box-shadow .2s ease, background-color .2s ease, transform .16s var(--ease-out);
}
.scelta-card:active { transform: scale(.98); }
.scelta-card input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.scelta-card__pallino {
  position: absolute; top: 14px; left: 14px; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px #C9CED8; background: var(--bianco); transition: box-shadow .2s ease;
}
.scelta-card__ico { width: 42px; height: 42px; color: var(--brand); }
.scelta-card__nome { max-width: 9em; color: var(--inchiostro); font-size: 18px; font-weight: 700; line-height: 1.2; }
.scelta-card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); }
.scelta-card:has(input:checked) .scelta-card__pallino { box-shadow: inset 0 0 0 2px var(--brand), inset 0 0 0 6px var(--bianco); background: var(--brand); }
.scelta-card:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
.scelta-card.is-spenta { opacity: .45; }
@media (hover: hover) and (pointer: fine) { .scelta-card:hover { box-shadow: inset 0 0 0 1.5px var(--brand-bordo); } .scelta-card:has(input:checked):hover { box-shadow: inset 0 0 0 2px var(--brand); } }

.selezione { position: relative; }
.selezione select {
  width: 100%; height: 56px; padding: 0 48px 0 18px;
  border: 0; border-radius: var(--r-s); background: var(--bianco); box-shadow: inset 0 0 0 1.5px var(--linea);
  color: var(--inchiostro); font-size: 17px; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.selezione select:invalid { color: var(--testo-tenue); }
.selezione .ico { position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); color: var(--inchiostro); pointer-events: none; }
.modulo__passo .btn--grande { margin-top: 22px; }

.scelte-lista { display: grid; gap: 8px; }
.scelta {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px 10px 46px;
  border-radius: var(--r-s); box-shadow: inset 0 0 0 1.5px var(--linea); cursor: pointer;
  color: var(--inchiostro); font-size: 16px; font-weight: 600; line-height: 1.25;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: box-shadow .2s ease, background-color .2s ease, transform .16s var(--ease-out);
}
.scelta::before {
  content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  box-shadow: inset 0 0 0 2px #C9CED8; background: var(--bianco);
}
.scelta input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.scelta:has(input:checked) { box-shadow: inset 0 0 0 2px var(--brand); background-color: var(--brand-tenue); }
.scelta:has(input:checked)::before { box-shadow: inset 0 0 0 2px var(--brand), inset 0 0 0 5px var(--bianco); background: var(--brand); }
.scelta:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.scelta:active { background-color: var(--brand-tenue); transform: scale(.98); }

.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
.campo label { display: block; margin-bottom: 6px; color: var(--inchiostro); font-size: 15px; font-weight: 600; }
.facoltativo { color: var(--testo-tenue); font-weight: 400; }
.campo input {
  width: 100%; height: 52px; padding: 0 14px;
  border: 0; border-radius: var(--r-s); background: var(--bianco); box-shadow: inset 0 0 0 1.5px var(--linea);
  color: var(--inchiostro); font-size: 17px; transition: box-shadow .2s ease;
}
.campo input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--brand); }
.campo input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--errore); }
.campo-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo__privacy { margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--testo-tenue); }
.modulo__privacy a { color: var(--inchiostro); }
.modulo__azioni { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 18px; }
.modulo__azioni .btn { min-height: 54px; }
.errore { margin-top: 8px; color: var(--errore); font-size: 14.5px; font-weight: 600; }
.errore a { color: inherit; }
.nota { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-s); background: var(--brand-tenue); color: var(--inchiostro); font-size: 15px; }
.modulo__nota { margin-top: 14px; text-align: center; font-size: 15px; color: var(--testo-tenue); }
.modulo__fatto {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 12px;
  padding: 32px; text-align: center; border-radius: var(--r-l); background: var(--bianco);
}
.modulo__fatto[hidden] { display: none; }
.modulo__fatto-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: var(--su-brand); }
.modulo__fatto-ico svg { width: 34px; height: 34px; }
.modulo__fatto h3 { font-size: 28px; }
.modulo__fatto p { max-width: 26em; color: var(--testo); }

/* ---------- tre punti ---------- */
.punti { background: var(--bianco); border-bottom: 1px solid #F1F2F5; }
.punti__lista { display: grid; grid-template-columns: repeat(3, 1fr); padding-top: 30px; padding-bottom: 30px; }
.punto { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 4px 24px; }
.punto + .punto { border-left: 1.5px solid var(--linea); }
.punto__ico { width: 58px; height: 58px; flex: none; color: var(--brand); }
.punto p { display: grid; gap: 2px; }
.punto strong { color: var(--inchiostro); font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.punto span { color: var(--testo); font-size: 16px; }

/* ---------- calcola ---------- */
.calcola { padding: 24px 0 0; }
.calcola__box {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 44px; align-items: center;
  padding: 56px 56px; border-radius: var(--r-l);
  background-color: var(--bianco); background-image: linear-gradient(var(--brand-tenue), var(--brand-tenue));
}
.calcola__titolo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.pillola {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 16px; border-radius: 99px;
  background: var(--bianco); color: var(--brand-testo); font-size: 15px; font-weight: 700;
  box-shadow: 0 4px 14px -6px rgba(11, 23, 50, .14);
}
.calcola__sotto { margin-top: 10px; font-size: 19px; color: var(--testo); }
.calcola__card {
  margin-top: 26px; padding: 30px 30px 26px; border-radius: var(--r-m); background: var(--bianco);
  box-shadow: 0 18px 40px -28px rgba(11, 23, 50, .25);
}
.cursore + .cursore { margin-top: 24px; }
.cursore__riga { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.cursore__riga label { color: var(--inchiostro); font-size: 18px; font-weight: 700; }
.cursore__riga output { white-space: nowrap; color: var(--inchiostro); font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
input[type="range"] {
  --pct: 50%;
  display: block; width: 100%; height: 40px; margin: 4px 0 0; background: transparent;
  -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 99px;
  background: linear-gradient(to right, var(--brand) var(--pct), var(--linea) var(--pct));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%;
  background: var(--brand); border: 4px solid var(--bianco); box-shadow: 0 3px 10px rgba(11, 23, 50, .28);
  transition: transform .16s var(--ease-out);
}
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type="range"]::-moz-range-track { height: 10px; border-radius: 99px; background: var(--linea); }
input[type="range"]::-moz-range-progress { height: 10px; border-radius: 99px; background: var(--brand); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--brand); border: 4px solid var(--bianco);
  box-shadow: 0 3px 10px rgba(11, 23, 50, .28);
}
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--brand-bordo), 0 3px 10px rgba(11, 23, 50, .28); }
.calcola__basso { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 14px; }
.calcola__tipo { flex: 1; min-width: 0; }
.calcola__tipo legend { margin-bottom: 10px; color: var(--testo); font-size: 16px; }
.interruttore { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--linea); }
.interruttore label { position: relative; display: block; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.interruttore input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.interruttore span {
  display: grid; place-items: center; min-height: 46px; padding: 6px 10px; border-radius: 8px; text-align: center;
  color: var(--inchiostro); font-size: 16px; font-weight: 600; line-height: 1.15;
  transition: background-color .2s ease, color .2s ease;
}
.interruttore input:checked + span { background: var(--brand); color: var(--su-brand); }
.interruttore input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.calcola__img { width: 168px; margin: -40px -8px -10px 0; flex: none; }

.calcola__dx {
  padding: 34px 34px 30px; border-radius: var(--r-l); background: var(--scuro); color: var(--bianco);
  box-shadow: 0 30px 50px -30px rgba(11, 23, 50, .55);
}
.calcola__etichetta { font-size: 18px; color: rgba(255, 255, 255, .86); }
.calcola__cifra { white-space: nowrap; margin-top: 4px; font-size: clamp(2.6rem, 4.4vw, 4rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.calcola__durata { margin-top: 8px; font-size: 18px; color: rgba(255, 255, 255, .86); }
.calcola__due {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 22px; padding: 18px 0;
  border-top: 1px solid var(--scuro-linea); border-bottom: 1px solid var(--scuro-linea);
}
.calcola__due div { display: grid; gap: 4px; }
.calcola__due div + div { padding-left: 22px; border-left: 1px solid var(--scuro-linea); }
.calcola__due span { font-size: 16px; color: rgba(255, 255, 255, .76); }
.calcola__due strong { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.calcola__invito { margin: 18px 0 20px; font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, .86); }
.calcola__nota { grid-column: 1 / -1; margin-top: -18px; text-align: center; font-size: 15px; color: var(--testo-tenue); }

/* ---------- come funziona ---------- */
.processo { padding: 92px 0 0; }
.processo .titolo-sezione { max-width: 22em; margin-inline: auto; }
.processo__passi { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 44px; }
.passo { position: relative; padding: 0 44px; }
.passo + .passo::before {
  content: ""; position: absolute; left: 0; top: 30px; height: 118px; width: 2px; border-radius: 2px; background: var(--brand);
}
.passo__testa { display: flex; align-items: center; gap: 18px; height: 150px; }
.passo__num {
  display: grid; place-items: center; flex: none; width: 66px; height: 66px; border-radius: 50%;
  background: var(--brand); color: var(--su-brand); font-size: 25px; font-weight: 800; letter-spacing: -.02em;
}
.passo__testa img { height: 146px; width: auto; }
.passo h3 { margin-top: 18px; font-size: 23px; letter-spacing: -.02em; }
.passo p { margin-top: 8px; max-width: 20em; font-size: 18px; color: var(--testo); }
.processo .centro .btn { margin-top: 36px; min-width: 300px; }

/* ---------- finanziamenti ---------- */
.servizi { padding: 72px 0 0; }
.servizi__griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 36px; }
.servizio {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 44%; align-items: center; gap: 12px;
  min-height: 256px; padding: 28px 30px 28px 40px; border-radius: var(--r-l);
}
.servizio__fondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--brand); }
.servizio__ico { width: 54px; height: 54px; color: var(--brand); }
.servizio h3 { margin-top: 16px; font-size: 32px; letter-spacing: -.035em; }
.servizio p { margin-top: 10px; max-width: 18em; font-size: 18px; line-height: 1.45; color: var(--testo); }
.servizio__img { justify-self: end; width: auto; max-height: 232px; }
.servizi__nota { margin-top: 26px; text-align: center; font-size: 20px; color: var(--blu-menu); }

/* ---------- vicini ---------- */
.vicini { padding: 28px 0 0; }
.vicini__box {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 52px; align-items: center;
  padding: 26px 52px 26px 26px; border-radius: var(--r-l); background: var(--scuro); color: var(--bianco);
}
.vicini__visivo {
  position: relative; isolation: isolate; overflow: hidden; min-height: 356px; border-radius: var(--r-m);
  display: flex; align-items: flex-end; justify-content: flex-end; padding-right: 9%; color: var(--brand);
}
.vicini__onde { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.vicini__persona { position: relative; height: 336px; width: auto; margin-bottom: -4px; }
.vicini__moneta { position: absolute; left: 9%; bottom: 10%; width: 112px; transform: rotate(-14deg); }
.vicini__logo { position: absolute; left: 28px; top: 26px; width: 210px; }
.vicini__testo h2 { color: var(--bianco); font-size: clamp(1.9rem, 3vw, 2.85rem); }
.vicini__lead { margin-top: 16px; max-width: 26em; font-size: 21px; line-height: 1.42; color: rgba(255, 255, 255, .92); text-wrap: balance; }
.vicini__oam { margin-top: 12px; font-size: 18px; color: rgba(255, 255, 255, .8); }
.citta { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin-top: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--scuro-linea); }
.citta li { padding: 8px 36px 8px 0; }
.citta li:nth-child(even) { padding: 8px 0 8px 36px; border-left: 1px solid var(--scuro-linea); }
.citta li { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 500; }
.citta__pin { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--brand); color: var(--su-brand); }
.citta__pin svg { width: 21px; height: 21px; }
.vicini__piede { margin-top: 20px; font-size: 18px; color: rgba(255, 255, 255, .9); }

/* ---------- domande ---------- */
.faq { padding: 56px 0 0; }
.faq__griglia { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); gap: 56px; align-items: center; }
.faq__intro .titolo-sezione { font-size: clamp(1.9rem, 3.3vw, 3.15rem); }
.faq__linea { display: block; width: 300px; max-width: 70%; height: auto; margin-top: 10px; color: var(--brand); }
.faq__lista { display: grid; gap: 10px; }
.domanda {
  border-radius: var(--r-m); background-color: var(--bianco); box-shadow: inset 0 0 0 1px var(--linea);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.domanda[open] { background-image: linear-gradient(var(--brand-tenue), var(--brand-tenue)); box-shadow: none; }
.domanda summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 56px; padding: 12px 22px 12px 26px; list-style: none; cursor: pointer;
  color: var(--inchiostro); font-size: 18px; font-weight: 700; letter-spacing: -.01em;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda[open] summary { color: var(--brand-testo); }
.domanda summary:active { opacity: .8; }
.domanda__ico { display: grid; flex: none; width: 30px; height: 30px; color: var(--brand); }
.domanda__ico svg { grid-area: 1 / 1; width: 30px; height: 30px; transition: opacity .2s ease, transform .3s var(--ease-out); }
.domanda .ico-meno { opacity: 0; transform: rotate(-90deg); }
.domanda[open] .ico-piu { opacity: 0; transform: rotate(90deg); }
.domanda[open] .ico-meno { opacity: 1; transform: none; }
.domanda__risposta { padding: 0 26px 18px; font-size: 17px; line-height: 1.5; color: var(--testo); }

/* ---------- invito finale ---------- */
.invito { padding: 40px 0 0; }
.invito__box {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; min-height: 224px; padding: 38px 24px; border-radius: 22px; text-align: center;
}
.invito__fondo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; color: var(--brand); }
.invito__telefono { position: absolute; left: 4.5%; top: 50%; width: 196px; transform: translateY(-50%) rotate(-10deg); z-index: -1; }
.invito__moneta { position: absolute; z-index: -1; }
.invito__moneta--1 { left: 18%; top: 50%; width: 104px; transform: translateY(-30%) rotate(18deg); }
.invito__moneta--2 { right: 4.5%; top: 9%; width: 146px; transform: rotate(-12deg); }
.invito__moneta--3 { right: 14%; bottom: 4%; width: 112px; transform: rotate(16deg); }
.invito__testo h2 { color: var(--su-brand); font-size: clamp(2rem, 3.4vw, 3.2rem); }
.invito__testo p { margin-top: 10px; font-size: 21px; color: var(--su-brand); opacity: .94; }
.invito__testo .btn { margin-top: 24px; min-width: 320px; }

/* ---------- piede ---------- */
.piede { padding: 36px 0 24px; }
.piede__riga { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 44px; }
.piede__logo img { height: 58px; width: auto; }
.piede__oam { padding: 14px 44px; border-left: 1.5px solid var(--linea); border-right: 1.5px solid var(--linea); color: var(--blu-menu); font-size: 16px; }
.piede__legale { justify-self: end; max-width: 25em; color: var(--blu-menu); font-size: 15px; line-height: 1.45; }
.piede__link { display: flex; gap: 0; margin-bottom: 6px; }
.piede__link a { padding: 4px 0; color: var(--blu-menu); font-size: 16px; text-decoration: none; }
.piede__link a + a::before { content: "|"; display: inline-block; margin: 0 16px; color: var(--testo-tenue); }
@media (hover: hover) and (pointer: fine) { .piede__link a:hover { color: var(--brand-testo); } }
.piede__basso {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea);
  font-size: 13.5px; color: var(--testo-tenue);
}
.piede__note { max-width: 64em; }
.credit a { color: var(--inchiostro); font-weight: 600; }

/* ---------- pagine legali e 404 ---------- */
.pagina { position: relative; isolation: isolate; padding: 56px 0 72px; }
.pagina::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 320px; z-index: -1;
  background: linear-gradient(180deg, var(--brand-tenue), transparent);
}
.legale { max-width: 780px; margin-inline: auto; color: var(--testo); font-size: 17px; line-height: 1.6; }
.legale h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 8px; }
.legale h1 + p { color: var(--testo-tenue); font-size: 15px; margin-bottom: 28px; }
.legale h2 { margin: 36px 0 10px; font-size: 23px; letter-spacing: -.02em; }
.legale p + p, .legale ul + p { margin-top: 12px; }
.legale ul { margin: 10px 0 0; padding-left: 0; display: grid; gap: 8px; }
.legale li { position: relative; padding-left: 22px; }
.legale li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.legale a { color: var(--inchiostro); text-underline-offset: 3px; }
.legale table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.legale th, .legale td { padding: 12px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linea); }
.legale th { color: var(--inchiostro); font-weight: 700; }
.errore404 { padding: 40px 0 20px; text-align: center; }
.errore404__box { display: grid; justify-items: center; }
.errore404__testo { margin-top: 14px; font-size: 20px; color: var(--testo); }
.errore404__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
@media (max-width: 959px) {
  .pagina { padding: 34px 0 48px; }
  .legale { font-size: 16px; }
  .legale h2 { font-size: 20px; margin-top: 28px; }
  .legale table, .legale thead, .legale tbody, .legale tr, .legale th, .legale td { display: block; }
  .legale thead { display: none; }
  .legale tr { padding: 12px 0; border-bottom: 1px solid var(--linea); }
  .legale td { padding: 2px 0; border: 0; }
  .legale td:first-child { color: var(--inchiostro); font-weight: 700; }
  .errore404__testo { font-size: 17px; }
  .errore404__azioni { width: 100%; }
  .errore404__azioni .btn { width: 100%; }
  .pagina-interna { padding-bottom: 0; }
}

/* ---------- barra fissa da telefono ---------- */
.barra-cta { display: none; }

/* ============ tablet ============ */
@media (max-width: 1480px) {
  .menu ul { gap: 24px; }
  .menu a { font-size: 15px; }
  .testata__riga { gap: 28px; }
  .testata__logo img { height: 54px; }
  .testata__cta { padding: 0 20px; }
}
@media (max-width: 1320px) {
  .menu ul { gap: 18px; }
  .menu a { font-size: 14.5px; }
  .testata__riga { gap: 22px; }
  .testata__logo img { height: 46px; }
}
@media (max-width: 1199px) {
  .menu { display: none; }
  .testata__apri { display: block; }
}
@media (max-width: 1100px) {
  .testata__riga { gap: 28px; }
  .hero__griglia { column-gap: 40px; }
  .calcola__box { padding: 36px; gap: 32px; }
  .passo { padding: 0 26px; }
  .vicini__box { padding-right: 32px; gap: 36px; }
  .piede__riga { gap: 28px; }
  .piede__oam { padding: 10px 28px; }
}

@media (max-width: 959px) {
  :root { --testata-h: 68px; --gutter: max(16px, env(safe-area-inset-left, 0px)); }
  .contenitore { padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  body { font-size: 16px; }
  .occhiello { font-size: 12.5px; letter-spacing: .16em; margin-bottom: 10px; }
  .testata__logo img { height: 34px; }
  .menu, .testata__cta { display: none; }
  .testata__apri { display: block; }

  .hero { padding-top: 30px; }
  .hero__griglia { grid-template-columns: minmax(0, 1fr); grid-template-areas: "testo" "scena" "modulo"; grid-template-rows: auto; }
  .hero__titolo { font-size: clamp(2.3rem, 10.4vw, 3.4rem); }
  .hero__sotto { margin-top: 14px; font-size: 17.5px; }
  .spunte { flex-direction: column; gap: 10px; margin-top: 18px; }
  .spunte li { font-size: 16px; }
  .spunta { width: 26px; height: 26px; }
  .spunta svg { width: 16px; height: 16px; }
  .hero__scena { margin: 10px auto 0; width: min(100%, 440px); }
  .scena { width: 100%; }
  .hero__modulo { margin-top: -18px; padding-bottom: 32px; width: 100%; max-width: 560px; justify-self: center; }
  .modulo { padding: 24px 20px 20px; }
  .modulo__titolo { font-size: 27px; }
  .passi { margin-top: 18px; }
  .passi__num { width: 36px; height: 36px; font-size: 16px; }
  .passi::before, .passi::after { top: 18px; }
  .passi__nome { font-size: 15px; }
  .modulo__domanda { font-size: 18px; }
  .scelta-card { min-height: 118px; padding: 16px 8px 14px; }
  .scelta-card__ico { width: 36px; height: 36px; }
  .scelta-card__nome { font-size: 16.5px; }
  .scelta-card__pallino { top: 10px; left: 10px; width: 20px; height: 20px; }
  .scelta { font-size: 15.5px; min-height: 48px; }
  .campi { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .modulo__passo:not(.is-attivo) { display: none; }
  .modulo__azioni { grid-template-columns: auto 1fr; }

  .punti__lista { grid-template-columns: minmax(0, 1fr); padding-top: 8px; padding-bottom: 8px; }
  .punto { justify-content: flex-start; gap: 16px; padding: 14px 4px; }
  .punto + .punto { border-left: 0; border-top: 1px solid var(--linea); }
  .punto__ico { width: 40px; height: 40px; }
  .punto strong { font-size: 17.5px; }
  .punto span { font-size: 15px; }

  .calcola { padding-top: 16px; }
  .calcola__box { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 16px 16px; }
  .calcola__sx { padding: 0 4px; }
  .calcola__sotto { font-size: 16.5px; }
  .pillola { min-height: 30px; font-size: 14px; padding: 0 12px; }
  .calcola__card { padding: 20px 16px 18px; margin-top: 18px; }
  .cursore__riga label { font-size: 16.5px; }
  .cursore__riga output { font-size: 22px; }
  .calcola__box { position: relative; }
  .calcola__basso { display: block; }
  .calcola__img { position: absolute; top: 10px; right: 10px; width: 64px; margin: 0; }
  .calcola__titolo .titolo-sezione { padding-right: 0; }
  .calcola__sx > .occhiello { padding-right: 72px; }
  .interruttore span { font-size: 15px; min-height: 48px; }
  .calcola__dx { padding: 24px 20px 20px; }
  .calcola__cifra { font-size: 2.9rem; }
  .calcola__due strong { font-size: 18px; }
  .calcola__due span { font-size: 15px; }
  .calcola__due div + div { padding-left: 14px; }
  .calcola__nota { margin-top: -4px; padding: 0 6px 4px; font-size: 14px; }

  .processo { padding-top: 60px; }
  .processo__passi { grid-template-columns: minmax(0, 1fr); margin-top: 26px; }
  .passo {
    display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px;
    padding: 16px 0;
  }
  .passo + .passo { border-top: 1px solid var(--linea); }
  .passo + .passo::before { display: none; }
  .passo__testa { grid-row: 1 / 3; position: relative; height: auto; justify-content: center; }
  .passo__testa img { height: 104px; }
  .passo__num { position: absolute; left: -4px; top: -4px; width: 40px; height: 40px; font-size: 16px; z-index: 1; }
  .passo h3 { margin-top: 4px; font-size: 19px; align-self: end; }
  .passo p { margin-top: 4px; font-size: 16px; }
  .processo .centro .btn { margin-top: 20px; min-width: 0; width: 100%; }

  .servizi { padding-top: 60px; }
  .servizi__griglia { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 24px; }
  .servizio { grid-template-columns: minmax(0, 1fr) 38%; min-height: 0; padding: 22px 16px 22px 20px; gap: 8px; }
  .servizio__ico { width: 40px; height: 40px; }
  .servizio h3 { margin-top: 10px; font-size: 22px; }
  .servizio p { font-size: 15.5px; margin-top: 6px; }
  .servizio__img { max-height: 140px; }
  .servizi__nota { margin-top: 18px; font-size: 16.5px; }

  .vicini { padding-top: 28px; }
  .vicini__box { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 12px 12px 22px; }
  .vicini__visivo { min-height: 0; height: 230px; }
  .vicini__persona { height: 220px; }
  .vicini__visivo { padding-right: 6%; }
  .vicini__moneta { width: 74px; left: 10%; }
  .vicini__logo { left: 16px; top: 16px; width: 130px; }
  .vicini__testo { padding: 22px 10px 0; }
  .vicini__lead { font-size: 17.5px; margin-top: 12px; }
  .vicini__oam { font-size: 15.5px; }
  .citta { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; padding-bottom: 18px; }
  .citta li, .citta li:nth-child(even) { padding: 0; border-left: 0; }
  .citta li { font-size: 16px; }
  .citta__pin { width: 34px; height: 34px; }
  .citta__pin svg { width: 19px; height: 19px; }
  .vicini__piede { margin-top: 16px; font-size: 16px; }

  .faq { padding-top: 60px; }
  .faq__griglia { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .faq__linea { width: 200px; margin-top: 6px; }
  .domanda summary { font-size: 16.5px; min-height: 58px; padding: 12px 14px 12px 18px; }
  .domanda__ico, .domanda__ico svg { width: 26px; height: 26px; }
  .domanda__risposta { padding: 0 18px 18px; font-size: 16px; }

  .invito { padding-top: 44px; }
  .invito__box { min-height: 0; padding: 34px 18px 150px; align-items: start; }
  .invito__testo p { font-size: 17px; }
  .invito__testo .btn { min-width: 0; width: 100%; max-width: 360px; }
  .invito__telefono { left: 6%; top: auto; bottom: 14px; width: 120px; transform: rotate(-10deg); }
  .invito__moneta--1 { left: 36%; top: auto; bottom: 18px; width: 70px; transform: rotate(18deg); }
  .invito__moneta--2 { right: 6%; top: auto; bottom: 46px; width: 92px; }
  .invito__moneta--3 { right: 30%; bottom: 8px; width: 60px; }

  .piede { padding-top: 40px; }
  .piede__riga { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .piede__logo img { height: 40px; }
  .piede__oam { padding: 0; border: 0; font-size: 15px; }
  .piede__legale { justify-self: start; font-size: 14px; }
  .piede__basso { flex-direction: column; align-items: flex-start; margin-top: 20px; }

  .barra-cta {
    display: block; position: sticky; bottom: 0; z-index: 40;
    padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 24px -14px rgba(11, 23, 50, .3);
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .25s ease, transform .32s var(--ease-out), visibility 0s linear .32s;
  }
  .barra-cta.is-visibile { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .32s var(--ease-out), visibility 0s; }
  .barra-cta .btn { min-height: 52px; }
}

@media (max-width: 380px) {
  .scelte-card { gap: 10px; }
  .scelta-card__nome { font-size: 15.5px; }
  .modulo__azioni .btn { padding: 0 16px; }
  .servizio { grid-template-columns: minmax(0, 1fr) 34%; }
  .calcola__img { top: 8px; width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  /* meno movimento, non zero: restano i cambi di colore e le dissolvenze, spariscono gli spostamenti */
  html { scroll-behavior: auto; }
  .btn:active, .scelta-card:active, input[type="range"]:active::-webkit-slider-thumb { transform: none; }
  .btn:hover .ico { transform: none; }
  .barra-cta, .barra-cta.is-visibile { transform: none; }
}

@media (max-width: 600px) {
  .vicini__visivo { padding-right: 4%; }
  .vicini__persona { height: 186px; }
  .vicini__logo { left: 14px; top: 14px; width: 128px; }
  .vicini__moneta { width: 62px; left: 8%; bottom: 12%; }
}

/* =====================================================================
   MOVIMENTO (step 5-bis) — curve e durate di Emil Kowalski, cosa si muove dalle regole THK.
   Solo transform e opacity; niente colori fissi: tutto dal marchio (--brand) e dai neutri.
   ===================================================================== */

/* ---------- hero: la prima schermata entra (CSS, senza aspettare il JavaScript) ---------- */
@keyframes entra { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes entra-card { from { opacity: 0; transform: translateY(40px) scale(.98); } to { opacity: 1; transform: none; } }
.hero__testo > .occhiello,
.hero__titolo .riga,
.hero__sotto,
.spunte li { animation: entra .8s var(--ease-out) both; }
.hero__titolo .riga { display: block; }
.hero__testo > .occhiello { animation-delay: .05s; }
.hero__titolo .riga:first-child { animation-delay: .12s; }
.hero__titolo .riga + .riga { animation-delay: .2s; }
.hero__sotto { animation-delay: .3s; }
.spunte li:first-child { animation-delay: .38s; }
.spunte li + li { animation-delay: .44s; }
.hero__azioni { animation: entra .8s var(--ease-out) .46s both; }
.hero__modulo .modulo { animation: entra-card .9s var(--ease-out) .22s both; }

/* ---------- hero: la scena del kit, a pezzi separati che si muovono ognuno per conto suo ---------- */
.pezzo { position: absolute; display: block; }
.pezzo img { display: block; width: 100%; height: auto; }
.pezzo__entra { display: block; animation: pezzo-entra .95s var(--ease-out) both; }
@keyframes pezzo-entra { from { transform: translate(var(--dx, 0), var(--dy, 36px)) scale(var(--ds, .94)); } to { transform: none; } }
@keyframes galleggia { from { translate: 0 0; rotate: 0deg; } to { translate: var(--gx, 0) var(--gy, -10px); rotate: var(--gr, 0deg); } }
.pezzo img { animation: galleggia var(--gd, 7s) var(--ease-in-out) var(--gt, 0s) infinite alternate; }
.pezzo--nastro { left: -1%; top: 14%; width: 102%; rotate: -9deg; z-index: 1; --ds: .96; --dy: 18px; --gy: -5px; --gr: .6deg; --gd: 9s; }
.pezzo--banconote { left: 3%; top: 40%; width: 32%; rotate: 18deg; z-index: 2; --dx: -36px; --dy: 10px; --gx: -6px; --gy: -8px; --gr: -3deg; --gd: 8s; --gt: -2s; }
.pezzo--moneta-dx { left: 68%; top: 1%; width: 15%; z-index: 3; --dy: -30px; --ds: .82; --gy: -14px; --gr: 8deg; --gd: 6s; --gt: -1s; }
.pezzo--moneta-sx { left: 8%; top: 12%; width: 10.5%; rotate: -18deg; z-index: 3; --dy: -24px; --ds: .82; --gy: -12px; --gr: -10deg; --gd: 5.5s; --gt: -3s; }
.pezzo--telefono { left: 20.5%; top: 0; width: 46%; rotate: 5deg; z-index: 4; --dy: 44px; --ds: .97; --gy: -9px; --gr: -1deg; --gd: 7s; }
.pezzo--documento { left: 58%; top: 29%; width: 35%; rotate: -4deg; z-index: 5; --dx: 44px; --dy: 16px; --gy: -12px; --gr: 2deg; --gd: 6.5s; --gt: -2.5s; }
.pezzo--moneta-bassa { left: 0; top: 62%; width: 16.5%; rotate: 8deg; z-index: 6; --dx: -20px; --dy: 30px; --ds: .82; --gy: -10px; --gr: 7deg; --gd: 6s; --gt: -4s; }
.pezzo--moneta-pill { left: 81%; top: 75%; width: 10%; rotate: 14deg; z-index: 4; --dy: 26px; --ds: .82; --gy: -8px; --gr: -8deg; --gd: 5s; --gt: -1.5s; }
.pezzo--telefono .pezzo__entra { animation-delay: .1s; }
.pezzo--documento .pezzo__entra { animation-delay: .28s; }
.pezzo--banconote .pezzo__entra { animation-delay: .22s; }
.pezzo--moneta-dx .pezzo__entra, .pezzo--moneta-bassa .pezzo__entra { animation-delay: .36s; }
.pezzo--moneta-sx .pezzo__entra, .pezzo--moneta-pill .pezzo__entra { animation-delay: .44s; }
.is-ferma .pezzo img, .is-ferma .galleggia { animation-play-state: paused; }

/* lo sfondo a onde della hero respira, piano */
@keyframes onde { from { transform: translate3d(0, 0, 0) scale(1.08); } to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.12); } }
.hero__onde { transform-origin: 50% 50%; animation: onde 18s var(--ease-in-out) infinite alternate; }

/* ---------- oggetti che galleggiano fuori dalla hero (fascia finale, uffici) ---------- */
.galleggia { animation: galleggia var(--gd, 6s) var(--ease-in-out) var(--gt, 0s) infinite alternate; }
.invito__telefono { --gy: -10px; --gr: 3deg; --gd: 6.5s; }
.invito__moneta--1 { --gy: -12px; --gr: -10deg; --gd: 5s; --gt: -1s; }
.invito__moneta--2 { --gy: -14px; --gr: 8deg; --gd: 6s; --gt: -2.5s; }
.invito__moneta--3 { --gy: -10px; --gr: -8deg; --gd: 5.5s; --gt: -4s; }
.vicini__moneta { --gy: -12px; --gr: 10deg; --gd: 6s; }

/* ---------- le sezioni arrivano mentre si scorre (.reveal → .in, una volta sola) ---------- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
.passo + .passo::before { transform-origin: top center; transition: transform .8s var(--ease-out) .3s; }
.passo.reveal + .passo.reveal::before, .passo + .passo.reveal::before { transform: scaleY(0); }
.passo.reveal.in + .passo.reveal.in::before, .passo + .passo.reveal.in::before { transform: none; }

/* ---------- modulo: i passi che cambiano, la conferma ---------- */
@keyframes passo-avanti { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modulo__passo.is-attivo.entra { animation: passo-avanti .34s var(--ease-out) both; }
.modulo::after { /* l'anello che indica il modulo quando ci si arriva da «Parla con un consulente» */
  content: ""; position: absolute; inset: -7px; border-radius: 26px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--brand); opacity: 0;
}
@keyframes anello { 0% { opacity: 0; transform: scale(.985); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(1.02); } }
.modulo.is-indicato::after { animation: anello 1.3s var(--ease-out) both; }
@keyframes fatto-entra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.modulo__fatto:not([hidden]) { animation: fatto-entra .42s var(--ease-out) both; }
@keyframes traccia { to { stroke-dashoffset: 0; } }
.modulo__fatto-ico svg { stroke-dasharray: 16; stroke-dashoffset: 16; animation: traccia .5s var(--ease-out) .25s forwards; }

/* ---------- FAQ: la risposta entra quando si apre (chiusura immediata, più veloce) ---------- */
@keyframes risposta { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.domanda[open] .domanda__risposta { animation: risposta .32s var(--ease-out) both; }

/* ---------- menu da telefono: le voci arrivano una dopo l'altra ---------- */
@keyframes voce { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.menu-tel.is-aperto li, .menu-tel.is-aperto .btn { animation: voce .4s var(--ease-out) both; }
.menu-tel.is-aperto li:nth-child(2) { animation-delay: .05s; }
.menu-tel.is-aperto li:nth-child(3) { animation-delay: .1s; }
.menu-tel.is-aperto .btn { animation-delay: .15s; }

/* ---------- testata: si nasconde scendendo e torna salendo (solo da telefono) ---------- */
@media (max-width: 959px) {
  .testata.is-nascosta { transform: translateY(-100%); box-shadow: none; }
}

/* ---------- col mouse: le immagini dei finanziamenti si avvicinano ---------- */
.servizio__img { transition: scale .3s var(--ease-out), translate .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .servizio:hover .servizio__img { scale: 1.05; translate: 0 -4px; }
}

/* ---------- meno movimento: restano dissolvenze e colori, spariscono gli spostamenti ---------- */
@keyframes dissolvi { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hero__testo > .occhiello, .hero__titolo .riga, .hero__sotto, .spunte li, .hero__azioni, .hero__modulo .modulo,
  .modulo__passo.is-attivo.entra, .modulo__fatto:not([hidden]), .domanda[open] .domanda__risposta,
  .menu-tel.is-aperto li, .menu-tel.is-aperto .btn { animation-name: dissolvi; }
  .pezzo__entra, .pezzo img, .galleggia, .hero__onde { animation: none; }
  .modulo.is-indicato::after { animation-name: dissolvi; animation-direction: alternate; animation-iteration-count: 2; animation-duration: .45s; }
  .reveal { transform: none; transition: opacity .5s ease; }
  .passo + .passo::before, .passo.reveal + .passo.reveal::before, .passo + .passo.reveal::before { transform: none; transition: none; }
  .testata, .testata.is-nascosta { transform: none; }
  .testata__logo img, .testata.is-staccata .testata__logo img { transform: none; }
  .menu-tel, .menu-tel.is-aperto { transform: none; }
  .servizio__img, .servizio:hover .servizio__img { scale: none; translate: none; }
  .passi::after { transition: opacity .3s ease; }
}

/* =====================================================================
   STEP 6 — le sezioni del copy con le forme del design
   ===================================================================== */
.ico--chat { width: 1.25em; height: 1.25em; }
.hero__titolo { font-size: clamp(2.4rem, 4.5vw, 4.25rem); }
.hero__azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.spunte li { max-width: 34em; line-height: 1.35; }

/* modulo a 4 passi */
.modulo__titolo { font-size: 28px; line-height: 1.12; }
.modulo__intro { margin-top: 10px; font-size: 16px; line-height: 1.45; color: var(--testo); }
.modulo__contatore { margin: 0 0 6px; }
.modulo__cifra {
  display: block; margin: 4px 0 2px; color: var(--inchiostro); font-size: 44px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.modulo__scala { margin-top: 2px; font-size: 15px; color: var(--testo-tenue); }
.modulo__passo .nota { margin-top: 14px; }
.modulo__avvertenze { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 12.5px; line-height: 1.5; color: var(--testo-tenue); }
.scelte-card--sei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.scelte-card--sei .scelta-card { min-height: 86px; padding: 12px 10px 10px 38px; grid-auto-flow: column; justify-content: start; justify-items: start; align-items: center; text-align: left; gap: 10px; }
.scelte-card--sei .scelta-card__pallino { top: 50%; left: 12px; margin-top: -11px; }
.scelte-card--sei .scelta-card__ico { width: 28px; height: 28px; }
.scelte-card--sei .scelta-card__nome { font-size: 16px; max-width: none; }
.scelta-card.is-spenta { opacity: .45; cursor: not-allowed; }
.scelta-card.is-spenta input { cursor: not-allowed; }
.modulo__fatto p a { color: var(--inchiostro); font-weight: 600; }
.modulo__fatto .btn { margin-top: 6px; }

/* i finanziamenti: 4 schede, 2 per riga */
.servizi__griglia { list-style: none; padding: 0; }
.servizio h3 a { color: inherit; text-decoration: none; }
.servizio h3 .ico { display: inline-block; width: .78em; height: .78em; margin-left: .28em; vertical-align: -.06em; color: var(--brand); transition: transform .25s var(--ease-out); }
.servizio--link { cursor: pointer; transition: transform .16s var(--ease-out); }
.servizio--link .servizio__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.servizio--link:active { transform: scale(.98); }
.servizio--link:has(.servizio__link:focus-visible) { outline: 3px solid var(--brand); outline-offset: 3px; }
.servizio__link:focus-visible { outline: none; }
@media (hover: hover) and (pointer: fine) {
  .servizio--link:hover h3 .ico { transform: translateX(4px); }
}
.servizio p { max-width: 17em; }
.conta { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }

/* chi può chiedere: il riquadro rosa del calcolatore */
.chi { padding: 72px 0 0; }
.chi__box { align-items: end; }
.chi__box .titolo-sezione { max-width: 16em; }
.chi__lista { list-style: none; display: grid; gap: 0; padding: 8px 28px; }
.chi__lista li { display: flex; align-items: center; gap: 18px; padding: 18px 0; color: var(--inchiostro); font-size: 19px; font-weight: 600; line-height: 1.35; }
.chi__lista li + li { border-top: 1px solid var(--linea); }
.chi__ico { display: grid; place-items: center; flex: none; width: 50px; height: 50px; border-radius: 50%; background-color: var(--bianco); background-image: linear-gradient(var(--brand-rosa), var(--brand-rosa)); color: var(--brand); }
.chi__ico svg { width: 26px; height: 26px; }
.chi__nota { display: grid; align-content: center; gap: 22px; }
.chi__nota-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--brand); color: var(--su-brand); }
.chi__nota-ico svg { width: 34px; height: 34px; }
.chi__nota p { font-size: clamp(1.4rem, 2.1vw, 1.9rem); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }

/* come funziona: 5 passaggi in fila */
.processo { padding-top: 80px; }
.processo__passi--cinque { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 40px; }
.processo__passi--cinque .passo { padding: 0 22px; }
.processo__passi--cinque .passo + .passo::before { top: 24px; height: 96px; }
.processo__passi--cinque .passo__testa { height: 124px; gap: 12px; }
.processo__passi--cinque .passo__num { width: 54px; height: 54px; font-size: 21px; }
.processo__passi--cinque .passo__testa img { height: 112px; max-width: calc(100% - 66px); object-fit: contain; }
.processo__passi--cinque .passo p { margin-top: 14px; font-size: 17px; line-height: 1.45; color: var(--inchiostro); }
.processo__nota { margin-top: 30px; text-align: center; font-size: 16px; color: var(--testo-tenue); }
.processo__azione .btn { margin-top: 20px; min-width: 300px; }

/* un passaggio in meno: titolo con la sottolineatura, scheda rosa */
.diretto { padding-top: 80px; }
.diretto__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.diretto__scheda {
  display: grid; gap: 14px; padding: 34px 36px; border-radius: var(--r-l);
  background-color: var(--bianco); background-image: linear-gradient(var(--brand-tenue), var(--brand-tenue));
  color: var(--inchiostro); font-size: 19px; line-height: 1.5;
}
.diretto__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand); color: var(--su-brand); }
.diretto__ico svg { width: 30px; height: 30px; }
.link-freccia {
  display: inline-flex; align-items: center; gap: .45em; justify-self: start; margin-top: 6px; padding: 6px 0;
  color: var(--brand-testo); font-size: 17px; font-weight: 700; text-decoration: none;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.link-freccia .ico { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease-out); }
.link-freccia:active { opacity: .75; }
.link-freccia--chiaro { color: var(--bianco); }
@media (hover: hover) and (pointer: fine) { .link-freccia:hover .ico { transform: translateX(4px); } }

/* dove siamo */
.vicini { padding-top: 64px; }
.vicini__testo .citta { margin-top: 24px; }
.vicini__piede { line-height: 1.45; }
.vicini__testo .link-freccia { margin-top: 14px; }

/* domande */
#domande { padding-top: 72px; }
.faq__tutte { justify-self: start; margin-top: 8px; }

/* invito finale */
.invito__azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.invito__testo .btn { margin-top: 0; min-width: 0; }
.invito__testo p a { color: inherit; font-weight: 700; white-space: nowrap; }
.btn--vuoto { background: transparent; color: var(--su-brand); box-shadow: inset 0 0 0 2px var(--su-brand); }
@media (hover: hover) and (pointer: fine) { .btn--vuoto:hover { background: color-mix(in srgb, var(--su-brand) 12%, transparent); } }

/* piede */
.piede__riga { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; align-items: start; gap: 48px; }
.piede__marchio p { margin-top: 12px; max-width: 22em; color: var(--blu-menu); font-size: 16px; }
.piede__contatti { display: grid; gap: 8px; color: var(--blu-menu); font-size: 16px; line-height: 1.5; }
.piede__contatti a { color: var(--inchiostro); font-weight: 700; white-space: nowrap; }
.piede__pagine { display: grid; gap: 6px; }
.piede__pagine a { color: var(--blu-menu); font-size: 16px; text-decoration: none; padding: 2px 0; }
@media (hover: hover) and (pointer: fine) { .piede__pagine a:hover { color: var(--brand-testo); } }
.piede__avvertenze { margin-top: 26px; max-width: 70em; font-size: 13.5px; line-height: 1.5; color: var(--testo-tenue); }
.piede__basso .piede__link { margin: 0; }
.piede__basso .piede__link a { font-size: 13.5px; color: var(--testo-tenue); }

@media (max-width: 1100px) {
  .processo__passi--cinque .passo { padding: 0 14px; }
  .processo__passi--cinque .passo__testa img { height: 92px; }
}
@media (max-width: 959px) {
  .hero__azioni { margin-top: 20px; }
  .hero__azioni .btn { width: 100%; }
  .spunte li { font-size: 15.5px; align-items: flex-start; }
  .modulo__titolo { font-size: 24px; }
  .modulo__intro { font-size: 15.5px; }
  .modulo__cifra { font-size: 38px; }
  .scelte-card--sei .scelta-card { min-height: 74px; padding-left: 36px; }
  .scelte-card--sei .scelta-card__nome { font-size: 15px; }
  .scelte-card--sei .scelta-card__ico { width: 24px; height: 24px; }

  .servizi { padding-top: 56px; }
  .servizio p { max-width: none; }

  .chi { padding-top: 48px; }
  .chi__lista { padding: 4px 16px; }
  .chi__lista li { font-size: 16.5px; gap: 14px; padding: 14px 0; }
  .chi__ico { width: 42px; height: 42px; }
  .chi__ico svg { width: 22px; height: 22px; }
  .chi__nota { gap: 14px; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .chi__nota-ico { width: 48px; height: 48px; }
  .chi__nota-ico svg { width: 26px; height: 26px; }
  .chi__nota p { font-size: 19px; }

  .processo { padding-top: 56px; }
  .processo__passi--cinque { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  .processo__passi--cinque .passo { padding: 14px 0; grid-template-rows: auto; align-items: center; }
  .processo__passi--cinque .passo__testa { grid-row: auto; height: auto; }
  .processo__passi--cinque .passo__testa img { height: 88px; max-width: 100%; }
  .processo__passi--cinque .passo__num { width: 36px; height: 36px; font-size: 15px; }
  .processo__passi--cinque .passo p { margin-top: 0; font-size: 16px; }
  .processo__nota { margin-top: 14px; font-size: 14.5px; }
  .processo__azione .btn { min-width: 0; width: 100%; }

  .diretto { padding-top: 56px; }
  .diretto__griglia { grid-template-columns: minmax(0, 1fr); }
  .diretto__scheda { padding: 22px 20px; font-size: 16.5px; }
  .diretto__ico { width: 46px; height: 46px; }
  .diretto__ico svg { width: 24px; height: 24px; }

  .vicini { padding-top: 48px; }
  #domande { padding-top: 56px; }
  .faq__tutte { width: 100%; }

  .invito__azioni { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; margin-inline: auto; }
  .invito__box { padding-bottom: 150px; }

  .piede__riga { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .piede__pagine { grid-template-columns: 1fr 1fr; gap: 4px 16px; }
  .piede__basso { gap: 10px; }
}
.servizi__griglia .servizio { grid-template-columns: minmax(0, 1fr) 40%; }
@media (max-width: 959px) { .servizi__griglia .servizio { grid-template-columns: minmax(0, 1fr) 36%; } }

/* =====================================================================
   STEP 6-bis — le pagine interne, coi componenti della home
   ===================================================================== */
.menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu a[aria-current="page"], .menu-tel a[aria-current="page"] { color: var(--brand-testo); }
.piede__pagine a[aria-current="page"] { color: var(--brand-testo); font-weight: 600; }

/* testata della pagina: la hero della home, senza modulo */
.hero--pagina { padding-top: 64px; }
.hero--pagina .hero__griglia { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-areas: "testo scena"; grid-template-rows: auto; align-items: center; column-gap: 56px; padding-bottom: 64px; }
.hero--pagina .hero__titolo { font-size: clamp(2.3rem, 4.1vw, 3.9rem); }
.hero--pagina .hero__sotto + .hero__sotto { margin-top: 10px; }
.hero__scena--pagina { align-self: center; justify-self: center; margin: 0; width: min(100%, 440px); }
.hero__scena--pagina .pezzo__entra { --dy: 40px; --ds: .94; animation-delay: .18s; }
.hero__scena--pagina img { width: 100%; --gy: -12px; --gr: 2deg; --gd: 6.5s; }

/* sezioni */
.sezione { padding-top: 80px; }
.servizi.sezione, .faq.sezione, .chi.sezione, .vicini.sezione { padding-top: 80px; }
.riquadro__box {
  padding: 48px 52px; border-radius: var(--r-l);
  background-color: var(--bianco); background-image: linear-gradient(var(--brand-tenue), var(--brand-tenue));
}
.riquadro__intro { margin-top: 12px; font-size: 19px; color: var(--testo); }
.riquadro__schede { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 26px; }
.riquadro__schede--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.riquadro__schede--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scheda {
  display: grid; align-content: start; gap: 10px; padding: 24px 26px; border-radius: var(--r-m); background: var(--bianco);
  box-shadow: 0 18px 40px -28px rgba(11, 23, 50, .25);
}
.scheda__etichetta { color: var(--testo); font-size: 17px; font-weight: 600; }
.scheda__valore { color: var(--inchiostro); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.riquadro__schede--3 .scheda__valore, .riquadro__schede--4 .scheda__valore { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.riquadro__schede--4 .scheda { grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; }
.riquadro__dopo { margin-top: 22px; font-size: 18px; line-height: 1.5; color: var(--inchiostro); max-width: 46em; }
.riquadro__box .link-freccia { margin-top: 18px; }
.chi__intro { margin-top: 12px; font-size: 19px; color: var(--testo); }
.chi__nota p + p, .chi__nota-dopo { font-size: 18px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .86); letter-spacing: 0; }
.chi__nota a:not(.btn) { color: inherit; }
.chi__nota .btn { justify-self: start; }

/* il riquadro scuro, solo testo */
.vicini__box--solo { grid-template-columns: minmax(0, 1fr); padding: 52px 56px; }
.vicini__box--solo .vicini__testo { max-width: 52em; }
.vicini__box--solo .chi__nota-ico { margin-bottom: 18px; }
.vicini__box--solo .vicini__piede { margin-top: 14px; }
.vicini__box--solo .vicini__piede strong { color: var(--bianco); }
.vicini__piede--su { margin-top: 14px; }
.citta--righe { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 0; padding-bottom: 0; }
.citta.citta--righe li, .citta.citta--righe li:nth-child(even) { padding: 10px 24px 10px 0; border-left: 0; align-items: flex-start; line-height: 1.4; }
.vicini__testo .link-freccia--chiaro { margin-top: 16px; }

/* la scheda dei finanziamenti, larga o breve */
.servizio--largo { grid-template-columns: minmax(0, 1fr) 34%; padding: 44px 40px 44px 52px; min-height: 300px; }
.servizio--largo .titolo-sezione { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.servizio--largo p { max-width: 34em; margin-top: 14px; font-size: 19px; color: var(--inchiostro); }
.servizio--largo .servizio__img { max-height: 280px; }
.servizio--breve { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 32px 36px; }
.servizio--breve p { max-width: none; margin-top: 14px; font-size: 19px; color: var(--inchiostro); }

/* la richiesta: testo a sinistra, il modulo a passi della home a destra */
.richiesta__griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: start; }
.richiesta__sx { padding-top: 12px; }
.richiesta__testo { margin-top: 16px; font-size: 19px; line-height: 1.5; color: var(--inchiostro); max-width: 30em; }
.richiesta__testo a { color: var(--inchiostro); font-weight: 700; white-space: nowrap; }
.richiesta__passi { list-style: none; display: grid; gap: 14px; margin-top: 24px; }
.richiesta__passi li { display: flex; align-items: center; gap: 16px; color: var(--inchiostro); font-size: 18px; line-height: 1.4; }
.richiesta__passi .passo__num { width: 44px; height: 44px; font-size: 16px; position: static; }
.richiesta__azioni { margin-top: 22px; }
.richiesta__dx .modulo { box-shadow: var(--ombra-card); }

/* la fascia rossa con un link sotto */
.invito__testo .link-freccia { margin-top: 16px; }

@media (max-width: 1100px) {
  .riquadro__schede--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .hero--pagina { padding-top: 30px; }
  .hero--pagina .hero__griglia { grid-template-columns: minmax(0, 1fr); grid-template-areas: "testo" "scena"; padding-bottom: 36px; }
  .hero--pagina .hero__titolo { font-size: clamp(2.05rem, 9vw, 3rem); }
  .hero__scena--pagina { width: min(70%, 280px); margin-top: 22px; }
  .sezione, .servizi.sezione, .faq.sezione, .chi.sezione, .vicini.sezione { padding-top: 52px; }
  .riquadro__box { padding: 26px 16px 20px; }
  .riquadro__intro, .chi__intro { font-size: 16.5px; }
  .riquadro__schede, .riquadro__schede--3, .riquadro__schede--4 { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .scheda { padding: 18px 18px; }
  .riquadro__schede--3 .scheda, .riquadro__schede--4 .scheda { grid-auto-flow: column; justify-content: start; align-items: center; gap: 14px; }
  .scheda__valore { font-size: 22px; }
  .riquadro__schede--3 .scheda__valore, .riquadro__schede--4 .scheda__valore { font-size: 17px; }
  .riquadro__dopo { font-size: 16px; margin-top: 16px; }
  .chi__nota p + p, .chi__nota-dopo { font-size: 15.5px; }
  .chi__nota { grid-template-columns: minmax(0, 1fr); }
  .vicini__box--solo { padding: 26px 20px; }
  .citta--righe { grid-template-columns: minmax(0, 1fr); }
  .servizio--largo { grid-template-columns: minmax(0, 1fr) 32%; padding: 24px 16px 24px 20px; min-height: 0; align-items: start; }
  .servizio--largo p { font-size: 16px; }
  .servizio--largo .servizio__img { max-height: 120px; margin-top: 46px; }
  .servizio--breve { padding: 22px 20px; }
  .servizio--breve p { font-size: 16px; }
  .richiesta__griglia { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .richiesta__sx { padding-top: 0; }
  .richiesta__testo { font-size: 16.5px; }
  .richiesta__passi li { font-size: 16px; gap: 12px; }
  .richiesta__passi .passo__num { width: 36px; height: 36px; font-size: 14px; }
}
/* 6-bis, primo giro: la fascia coi titoli lunghi, le schede brevi e larghe da telefono */
.invito__testo { position: relative; max-width: 640px; }
.invito__testo h2 { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.servizi__griglia .servizio--breve { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 959px) {
  .invito__testo { max-width: none; }
  .servizio--largo { grid-template-columns: minmax(0, 1fr); }
  .servizio--largo .servizio__img { order: -1; justify-self: end; max-height: 110px; margin: 0 0 -8px; }
}