/* ==========================================================================
   Blocco condiviso — HERO CON FORM
   Contact Us `Hero` 85:7467 · 1512 x 1059
   Become a partner `Hero` 85:6646 · 1512 x 1146

   Eredita da `.hero2` (blocchi/hero-interno.css) il gradiente di fondo, il
   padding verticale 171/80 e i quattro quadrati decorativi: sono identici,
   offset compreso. Qui sotto c'e solo quello che cambia — cioe il contenuto,
   che invece non ha niente in comune.

   Verifica altezza Contact Us:
     171 + 808 + 80 = 1059 ✔    colonna = 112 (testo) + 40 + 656 (card) = 808 ✔
     testo = 77 (h1 una riga) + 16 + 19 = 112 ✔
   Verifica altezza Become a partner:
     171 + 895 + 80 = 1146 ✔    colonna = 189 + 40 + 666 = 895 ✔
     testo = 154 (h1 due righe) + 16 + 19 = 189 ✔

   ⚠️ In Figma la sezione ha padding orizzontale 320 e il blocco del titolo,
   largo 1432, ne esce a x = -280 per allinearsi alla griglia di pagina. Qui
   il padding resta il gutter normale del progetto e sono i due figli ad
   avere larghezze diverse: il testo quanto il container, la card 872. Stesso
   risultato a schermo, senza margini negativi da mantenere.
   ========================================================================== */

.hero-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-form__colonna {
  position: relative;                    /* sopra i quadrati decorativi */
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);                   /* 40 fra titolo e card */
}

.hero-form__testo {
  width: var(--container-width);         /* 1432 */
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);                   /* 16 */
  text-align: center;
}

.hero-form__h1 { width: 100%; color: var(--text-on-dark); }
.hero-form__lead { width: 100%; color: var(--text-on-dark-muted); }

/* --- La card bianca 85:7476 / 85:7141 — 872 di larghezza ------------------ */
.hero-form__card {
  width: 872px;
  max-width: 100%;
  /* ⚠️ Solo Contact Us lo passa. Vedi la nota in hero-form.php: e la traccia
     fantasma della griglia di Figma, riprodotta come altezza minima invece
     che come riga vuota. Su Become a partner non c'e. */
  min-height: var(--altezza-card, 0);
  padding: var(--space-5);               /* 40 */
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--text-on-light);
}