/* ==========================================================================
   Sezione "CTA finale" — blocco antracite (statico, nessun JS)
   Titolo protagonista, descrizione, pulsante bianco verso il form Hero
   (#consulenza), P.S. sotto una linea sottile. Mobile: pulsante a tutta
   larghezza; da 40em larghezza del contenuto.
   Sfondo fotografico (stesso approccio di Hero, "Prima di firmare" e "Come
   funziona"): overlay ink nello stesso background, testi chiari.
   ========================================================================== */

/* Colore di riserva = --color-ink se l'immagine manca. */
.final-cta {
  padding-block: 64px;
  background-color: var(--color-ink);
  background-image:
    linear-gradient(rgba(23, 35, 43, 0.78), rgba(23, 35, 43, 0.78)),
    url("../assets/images/facciata-novarreda-sezione-11.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.final-cta__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.final-cta__title {
  max-width: 22ch;
  color: var(--color-surface);
  font-size: clamp(1.875rem, 1.2rem + 3vw, 3.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.final-cta__text {
  max-width: 52ch;
  margin-top: 20px;
  color: var(--color-border); /* grigio chiarissimo sull'antracite */
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* ---------- Pulsante ---------- */
.final-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  margin-top: 32px;
  padding: 14px 24px;
  border-radius: 10px;
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.final-cta__button:hover,
.final-cta__button:active {
  background-color: var(--color-accent-soft);
}

/* Anello di focus chiaro: il blu globale è poco visibile sull'antracite */
.final-cta__button:focus-visible {
  outline: 3px solid var(--color-surface);
  outline-offset: 3px;
}

.final-cta__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* ---------- P.S. ---------- */
.final-cta__ps {
  max-width: 72ch;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.final-cta__ps strong {
  color: var(--color-surface);
  font-weight: 700;
}

/* ---------- Tablet ---------- */
@media (min-width: 40em) {
  .final-cta {
    padding-block: 88px;
  }

  .final-cta__button {
    display: inline-flex;
    padding-inline: 32px;
  }

  .final-cta__ps {
    margin-top: 56px;
    padding-top: 32px;
    font-size: 1rem;
  }
}

/* ---------- Desktop ---------- */
@media (min-width: 60em) {
  .final-cta {
    padding-block: 112px;
  }

  .final-cta__text {
    margin-top: 24px;
    font-size: 1.1875rem;
  }

  .final-cta__button {
    margin-top: 40px;
  }

  .final-cta__ps {
    margin-top: 72px;
  }
}