/* =========================================================================
   Alzati e Fattura — sezione P12 IL FORM · landing Partner
   Frame «Sezione Form — variante reference · Desktop» 1440×1536 (100:2518)
   e «Sezione Form — variante reference · Mobile» 390×2065 (100:2655),
   versione del 31 agosto 22:12.

   Due cose valgono per tutto il foglio.

   1) Nel Figma ogni tratto è INSIDE. In CSS si rende con `outline` più
      `outline-offset: -1px`, mai con `border`, che ruba due pixel al
      contenuto: era il motivo per cui la scheda misurava 393 invece di 391,
      la scheda di vetro lasciava 1142 di spazio interno invece di 1144 e i
      pulsanti erano alti 67 invece di 65.

   2) Il modulo lo scrive HubSpot: il markup è loro, si può solo vestirlo.
      HubSpot inietta un proprio foglio con la regola
      `.hs-custom-style > div input:not([type=image])…:not([type=file])`,
      che pesa (0,7,2) — una classe più sei `:not()` con dentro un selettore
      d'attributo, più due elementi — e impone `padding: 0 15px` e
      `min-height: 27px`. Per batterla senza `!important` qui si usa una
      catena da sette classi e tre elementi, (0,7,3) o più. Non è barocca per
      vezzo: è l'aritmetica della specificità. Chi la accorcia si ritrova i
      campi alti 27px.
   ========================================================================= */

.aef-formp,
.aef-formp *,
.aef-formp *::before,
.aef-formp *::after { box-sizing: border-box; }

.aef-formp {
  --ink: #030F0F;
  --surface: #0B1D16;
  --green-bright: #00E27B;
  --green-deep: #0A3B26;
  --muted: #C7D2CC;
  --dim: #7A8A82;
  --orange: #FF5C1F;
  --campo-fondo: #F2F5F3;
  --campo-bordo: #E2E8E5;

  position: relative;
  isolation: isolate;
  /* Il frame «griglia» ritaglia i due aloni ai bordi della sezione: senza
     questo, l'alone sfocato di 200px sborda sulle sezioni vicine. */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  padding: 110px 100px;
  background: var(--ink);
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Reticolo di sfondo: nel frame sono rettangoli da 1px, verticali ogni 64 e
   orizzontali ogni 64, verde al 10%. */
.aef-formp::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 63px, rgba(0, 226, 123, 0.10) 63px, rgba(0, 226, 123, 0.10) 64px),
    repeating-linear-gradient(180deg, transparent 0, transparent 63px, rgba(0, 226, 123, 0.10) 63px, rgba(0, 226, 123, 0.10) 64px);
  pointer-events: none;
}

/* L'alone della sezione: ellisse «glow» 900×540 appesa a x 820 y -180, verde
   scuro al 16%, sfocata 200. Sta sotto il reticolo, come nel frame, dove le
   righe della griglia sono disegnate dopo. */
.aef-formp::after {
  content: '';
  position: absolute;
  left: 820px;
  top: -180px;
  z-index: -2;
  width: 900px;
  height: 540px;
  border-radius: 50%;
  background: var(--green-deep);
  opacity: .16;
  filter: blur(200px);
  pointer-events: none;
}

/* ---------- Parte alta: introduzione e scheda ---------- */
.aef-formp__top {
  position: relative;
  display: grid;
  /* Frame: 700 + 80 + 460 = 1240. */
  grid-template-columns: 700fr 460fr;
  gap: 80px;
  align-items: start;
  width: 100%;
  max-width: 1240px;
}

.aef-formp__intro { display: flex; flex-direction: column; }

.aef-formp__eyebrow {
  margin: 0;
  color: var(--green-bright);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 2.5px;
}

.aef-formp__title {
  margin: 20px 0 0;
  color: #FFFFFF;
  font-size: 42px;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.5px;
}

/* Il pezzo di titolo che il frame colora con un characterStyleOverride:
   «Insieme.» nell'introduzione, «entro 24 ore» sopra il modulo. Lo <span> lo
   mette il template, perché il testo arriva dal pannello come stringa unica. */
.aef-formp__verde { color: var(--green-bright); }

.aef-formp__sub {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 19px;
  font-weight: 400;
  line-height: 30px;
}

.aef-formp__pulsanti {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 36px;
}

/* Il pulsante arancione è il componente «Button / CTA» condiviso. Due cose
   vanno ridichiarate qui dentro:
   — il tratto, che nel frame è INSIDE (border → outline con offset -1);
   — le tre ombre, che `.elementor a { box-shadow: none }` (0,1,1) spegneva
     scavalcando `.aef-btn` di hero.css, che pesa (0,1,0). Qui il selettore
     pesa (0,2,0) e vince senza `!important`.
   È lo stesso rimedio già applicato in hero.css a `.aef-hero--partner`. */
.aef-formp .aef-btn {
  border: 0;
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: -1px;
  box-shadow:
    0 0 18px 1px rgba(255, 92, 31, 0.65),
    0 0 44px 6px rgba(255, 92, 31, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.28);
}

/* Gli stati pesano (0,2,0) in hero.css: da lì in poi l'ordine dei fogli
   deciderebbe da solo. Con (0,3,0) non conta più. */
.aef-formp .aef-btn:hover,
.aef-formp .aef-btn:focus,
.aef-formp .aef-btn:active {
  outline-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 26px 3px rgba(255, 122, 69, 0.75),
    0 0 60px 10px rgba(255, 122, 69, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* L'anello di fuoco da tastiera NON si può disegnare con `outline`: qui
   l'outline fa già da tratto INSIDE del frame, e usarlo per il fuoco
   cancellerebbe il tratto. Si disegna quindi con `box-shadow`, che si somma
   alle ombre del componente — che vanno ripetute dopo la virgola, altrimenti
   l'anello le spegne. Due anelli concentrici: 3px del colore del fondo, che
   rifà lo stacco che prima dava `outline-offset: 3px`, poi 3px di verde. */
.aef-formp .aef-btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--ink),
    0 0 0 6px var(--green-bright),
    0 0 26px 3px rgba(255, 122, 69, 0.75),
    0 0 60px 10px rgba(255, 122, 69, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Il secondo pulsante è «vuoto»: solo tratto bianco al 35%, nessun fondo. */
.aef-formp__ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 36px;
  border: 0;
  outline: 1.5px solid rgba(255, 255, 255, 0.35);
  outline-offset: -1.5px;
  border-radius: 10px;
  background: transparent;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: outline-color .2s ease, background-color .2s ease;
}

/* Il colore va ridichiarato in ogni stato: Elementor porta i link a #333366 su
   hover, focus e visited. */
.aef-formp__ghost:link,
.aef-formp__ghost:visited { color: #FFFFFF; }

.aef-formp__ghost:hover,
.aef-formp__ghost:focus,
.aef-formp__ghost:active {
  outline-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}

/* Stesso anello del pulsante pieno: box-shadow, così il tratto bianco del
   frame resta al suo posto anche mentre il pulsante ha il fuoco. La
   `transition` di questo pulsante non elenca `box-shadow`: l'anello compare
   subito, non in dissolvenza. */
.aef-formp__ghost:focus-visible {
  box-shadow:
    0 0 0 3px var(--ink),
    0 0 0 6px var(--green-bright);
}

.aef-formp__nota {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
}

/* ---------- La scheda «i prossimi step» ---------- */
.aef-formp__card {
  position: relative;
  padding: 36px 32px;
  border: 0;
  outline: 1px solid rgba(46, 217, 140, 0.22);
  outline-offset: -1px;
  border-radius: 20px;
  background: var(--surface);
}

/* L'alone verde dietro la scheda. Nel frame l'ellisse «glow card» sta a 795,35
   mentre la scheda sta a 880,110: parte quindi 85px a sinistra e 75px sopra il
   suo angolo. Prima era centrata sulla scheda e finiva 314px più a destra, per
   tre quarti fuori dallo schermo: nel render l'area attorno alla scheda è verde
   accesa, dal vivo era nera. */
.aef-formp__card::before {
  content: '';
  position: absolute;
  left: -85px;
  top: -75px;
  z-index: -1;
  width: 630px;
  height: 573px;
  border-radius: 50%;
  background: var(--green-bright);
  opacity: .38;
  filter: blur(150px);
  pointer-events: none;
}

.aef-formp__passi {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aef-formp__passo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

/* Nel frame il badge è un quadrato con angoli da 8, non un cerchio. */
.aef-formp__badge {
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  border-radius: 8px;
  background: var(--green-deep);
  color: var(--green-bright);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

.aef-formp__passo-testo {
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.aef-formp__divider {
  height: 1px;
  margin: 28px 0 24px;
  background: rgba(255, 255, 255, 0.12);
}

.aef-formp__stat {
  display: flex;
  align-items: center;
  gap: 16px;
}

.aef-formp__stat-num {
  margin: 0;
  color: var(--green-bright);
  font-size: 42px;
  font-weight: 800;
  line-height: 48px;
  letter-spacing: -0.5px;
}

/* Nel frame il blocco delle due righe è in sizing FILL: prende tutto lo spazio
   che avanza (307 sul desktop, 220 sul telefono). Senza `flex: 1` si stringeva
   sul testo e restava a 186. */
.aef-formp__stat-testi { flex: 1; min-width: 0; }

.aef-formp__stat-label {
  margin: 0;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.aef-formp__stat-nota {
  margin: 2px 0 0;
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
}

/* ---------- Parte bassa: il modulo ---------- */
.aef-formp__basso {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1240px;
}

.aef-formp__title--form { margin: 0; }

/* La scheda di vetro: fondo bianco al 7% con sfocatura dietro, come nel frame
   (BACKGROUND_BLUR 40 sul desktop, 32 sul telefono). */
.aef-formp__vetro {
  padding: 48px;
  border: 0;
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: -1px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}

/* La riga sotto il modulo va **sotto il bottone**, cioè al centro: nel frame è
   larga 359 dentro un pannello di 1240 e comincia a 440, che è esattamente la
   metà. Era appoggiata a sinistra, dove finiva sotto il primo campo invece che
   sotto il pulsante d'invio. */
.aef-formp__form-nota {
  margin: 16px 0 0;
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
}

.aef-formp__mancante {
  margin: 0;
  padding: 32px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

/* =========================================================================
   Il modulo di HubSpot dentro la scheda di vetro
   ========================================================================= */

/* Il frame impagina i campi su due colonne da 560 con 24 di spazio in mezzo e
   22 fra le righe; HubSpot li rende invece «stacked», uno sotto l'altro. Il
   rimedio è impaginare il loro <form> con una griglia: l'ordine dei campi nel
   documento è già quello del frame, quindi il riempimento per righe li mette
   al posto giusto (ragione sociale | settore, fatturato | nome, e così via). */
.aef-formp__hs form.hs-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 22px;
  align-items: start;
}

/* I quattro campi utm_* sono invisibili ma, dentro una griglia, occuperebbero
   comunque la loro casella e spezzerebbero l'impaginazione. Si riconoscono dal
   fatto che dentro `.input` hanno solo un campo nascosto — il campo telefono,
   che pure contiene un input nascosto, lo tiene più in profondità e non ci
   casca. Stessa cosa per hs_context e per l'iframe di servizio. */
.aef-formp__hs form.hs-form > .hs-form-field:has(> .input > input[type="hidden"]),
.aef-formp__hs form.hs-form > input[type="hidden"],
.aef-formp__hs form.hs-form > iframe { display: none; }

/* Consenso e bottone occupano tutta la larghezza. Lo stacco del frame è più
   largo dello spazio fra le righe: 22 di griglia più 22 di margine fanno i 44
   che il frame mette sopra il consenso, 22 più 18 i 40 sopra il bottone. */
.aef-formp__hs form.hs-form > .hs_accettazione_gdpr {
  grid-column: 1 / -1;
  margin-top: 22px;
}

.aef-formp__hs form.hs-form > .hs_submit {
  grid-column: 1 / -1;
  margin-top: 18px;
}

.aef-formp__hs .hs_submit .hs-field-desc { display: none; }
/* Il pulsante d'invio sta **al centro** del pannello, non appoggiato a
   sinistra: nel frame del 1º settembre il pannello ha allineamento centrato e
   il pulsante, largo 304, parte a 468 dentro i 1240 — cioè esattamente in
   mezzo. Prima stava a 148, quattrocento pixel più a sinistra. */
.aef-formp__hs .hs_submit .actions {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* L'asterisco dei campi obbligatori: nel frame è rosso, non bianco come il
   resto dell'etichetta. Vale anche per quello dentro il testo del consenso. */
.aef-formp__hs .hs-form-required { color: #F04F4F; }

.aef-formp__hs a { color: var(--green-bright); }

/* Il link dentro il testo del consenso è l'unica cosa raggiungibile col Tab in
   questa sezione che NON ha un tratto INSIDE da proteggere: qui l'outline è
   libero e va usato per l'anello, che così non si spezza sui capoversi come
   farebbe un box-shadow su un elemento in linea. Senza questa riga restava
   l'anello di sistema, blu, dentro una sezione verde su fondo quasi nero. */
.aef-formp__hs a:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 2px;
  border-radius: 2px;
}

.aef-formp__hs .hs-form-field > label {
  display: block;
  margin-bottom: 8px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.aef-formp__hs .hs-field-desc { color: var(--dim); font-size: 12px; }

/* ---------- I campi ----------
   Nel frame rifatto i campi sono CHIARI: fondo #F2F5F3, tratto #E2E8E5 INSIDE,
   angoli da 8. Prima erano scuri, com'erano nella versione precedente.
   La catena lunga serve a battere la regola di HubSpot: vedi la nota in testa
   al foglio. Qui pesa (0,9,3) sugli input e (0,7,3) sulle tendine. */
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input input.hs-input:not([type="checkbox"]):not([type="hidden"]),
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input select.hs-input,
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input textarea.hs-input {
  width: 100%;
  min-height: 0;
  padding: 14px 16px;
  border: 0;
  outline: 1px solid var(--campo-bordo);
  outline-offset: -1px;
  border-radius: 8px;
  background-color: var(--campo-fondo);
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

/* Le tendine: altezza dichiarata perché con `line-height: normal` il select
   arrivava a 52 invece dei 48 del frame. La freccia nativa del browser si
   spegne e al suo posto va il chevron del frame — 16×16, vettore grigio
   #7A8A82, a 16px dal bordo destro. È disegnato come immagine di fondo e non
   come <svg>: nel frame la sezione non contiene nessun elemento immagine. */
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input select.hs-input {
  height: 48px;
  padding-right: 40px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 5.2 8 9.8 12.4 5.2' fill='none' stroke='%237A8A82' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
}

.aef-formp__hs input::placeholder,
.aef-formp__hs textarea::placeholder { color: var(--dim); opacity: 1; }

.aef-formp__hs select option { background: #FFFFFF; color: var(--ink); }
.aef-formp__hs select.is-placeholder { color: var(--dim); }

/* Il campo al fuoco: il tratto diventa verde. I due `:not()` non sono una
   ripetizione ornamentale, sono l'aritmetica della specificità applicata anche
   qui: senza, questo selettore pesa (0,8,3) e la regola di base qui sopra, che
   con i suoi due `:not()` pesa (0,9,3), vince — il campo restava grigio anche
   col fuoco dentro, e il modulo diventava impossibile da compilare da tastiera
   (WCAG 2.4.7). Con i due `:not()` questa pesa (0,10,3) e vince.
   Gli stessi due `:not()` tengono fuori la casella del consenso, che ha una
   regola di fuoco sua più avanti: prima se la mangiava questa. */
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input input.hs-input:not([type="checkbox"]):not([type="hidden"]):focus,
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input select.hs-input:focus,
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input textarea.hs-input:focus {
  outline: 2px solid #2ED98C;
  outline-offset: -2px;
}

/* E l'anello da tastiera, fuori dal campo, con box-shadow: l'outline qui è già
   impegnato a fare il tratto verde di sopra. Sul campo chiaro il verde stacca
   verso il vetro scuro che gli sta intorno. */
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input input.hs-input:not([type="checkbox"]):not([type="hidden"]):focus-visible,
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input select.hs-input:focus-visible,
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input textarea.hs-input:focus-visible {
  box-shadow: 0 0 0 3px var(--green-bright);
}

/* ---------- L'ordine dei campi ----------
   Il modulo è una griglia a due colonne e HubSpot manda i campi nell'ordine
   deciso nel suo pannello: azienda · settore / fatturato · **nome** / cognome ·
   email / cellulare · ruolo / sponsor. Così nome e cognome cadono su due righe
   diverse, e il cliente ha chiesto di averli affiancati (3 settembre). Basta
   far salire il campo «Siete stati Partner o Sponsor» al quarto posto: da lì
   in poi le coppie si ricompongono da sole —
   azienda · settore / fatturato · sponsor / **nome · cognome** / email ·
   cellulare / ruolo.

   Si riordina qui e non nel pannello di HubSpot perché il pannello è del
   cliente. **Se un giorno l'ordine lo sistemano lì, questo blocco va tolto**,
   altrimenti si riordina due volte. I campi si riconoscono dalla classe che
   HubSpot dà a ciascuno (`hs_<nome del campo>`): se rinominano un campo, la
   riga corrispondente smette di avere effetto e l'ordine torna quello di
   HubSpot — si perde l'accostamento, non si rompe il modulo. */
.aef-formp__hs form.hs-form .hs_company                                { order: 1; }
.aef-formp__hs form.hs-form .hs_settore_dropdown                       { order: 2; }
.aef-formp__hs form.hs-form .hs_fatturato_annuo                        { order: 3; }
.aef-formp__hs form.hs-form .hs_hai_mai_sponsorizzato_eventi_simili_   { order: 4; }
.aef-formp__hs form.hs-form .hs_firstname                              { order: 5; }
.aef-formp__hs form.hs-form .hs_lastname                               { order: 6; }
.aef-formp__hs form.hs-form .hs_email                                  { order: 7; }
.aef-formp__hs form.hs-form .hs_phone                                  { order: 8; }
.aef-formp__hs form.hs-form .hs_jobtitle                               { order: 9; }
/* Consenso e pulsante restano in fondo, in quest'ordine. */
.aef-formp__hs form.hs-form .hs_accettazione_gdpr                      { order: 20; }
.aef-formp__hs form.hs-form .hs_submit                                 { order: 21; }

/* ---------- Il telefono con prefisso ----------
   Il frame vuole 91 di prefisso, 12 di spazio e 457 di numero. Senza larghezza
   dichiarata il select si dimensiona sull'etichetta più lunga della lista paesi
   di HubSpot e arrivava a 343. */
.aef-formp__hs .hs-fieldtype-intl-phone {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

/* Due passeggeri clandestini dentro il gruppo del telefono: un campo nascosto e
   il `::after { content: " "; display: table }` con cui HubSpot chiude i suoi
   float. Larghi zero tutti e due, ma in un contenitore flessibile diventano
   elementi a pieno titolo e si portano via un secondo `gap`. Erano i 12px che
   mancavano al numero, 445 invece di 457. */
.aef-formp__hs .hs-fieldtype-intl-phone input[type="hidden"] { display: none; }
/* La regola da battere è `.hs-fieldtype-intl-phone.hs-input::after`, (0,2,0):
   qui servono tre classi, non due. */
.aef-formp__hs .hs-fieldtype-intl-phone.hs-input::after { content: none; }

/* I 91px sono la misura del frame, disegnata sulla parola «Italia». Per un mese
   qui ce n'erano 132: la lista paesi di HubSpot chiamava quella voce «Italy
   (Italia)» e dentro 91 si leggeva «Italy (I». Dal 3 settembre `formp.js`
   riscrive le etichette in italiano — «Italia» chiede 32px di testo, e con i
   margini interni ne bastano 77 — quindi il campo torna alla misura del
   disegno, e il numero ai 457 che il frame gli dà. Se un giorno lo script
   sparisse, il campo tornerebbe stretto sul testo lungo: sono legati. */
.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs_phone div.input .hs-fieldtype-intl-phone select.hs-input {
  flex: 0 0 91px;
  width: 91px;
  min-width: 0;
  padding-right: 34px;
  background-position: right 12px center;
}

.aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs_phone div.input .hs-fieldtype-intl-phone input.hs-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

/* ---------- Il consenso ----------
   HubSpot mette il consenso dentro un elenco puntato: senza questa riga resta
   un pallino appeso davanti alla casella. */
.aef-formp__hs .inputs-list,
.aef-formp__hs ul.no-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aef-formp__hs .hs-form-booleancheckbox-display {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: var(--muted);
  font-weight: 500;
}

/* La casella: nel frame è un riquadro 16×16 vuoto, angoli da 3, contorno bianco
   al 40% INSIDE. Quella nativa, su fondo scuro, si legge come un quadrato
   chiaro pieno. */
.aef-formp__hs .hs-form-booleancheckbox-display input[type="checkbox"] {
  flex: 0 0 16px;
  -webkit-appearance: none;
  appearance: none;
  margin: 1px 0 0;
  width: 16px;
  height: 16px;
  border: 0;
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: -1px;
  border-radius: 3px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  cursor: pointer;
}

.aef-formp__hs .hs-form-booleancheckbox-display input[type="checkbox"]:checked {
  background-color: var(--green-bright);
  outline-color: var(--green-bright);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 4.8 8.5 9.5 3.6' fill='none' stroke='%23030F0F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Anche qui l'anello va con box-shadow, non con outline: l'outline della
   casella è il suo riquadro 16×16, e sostituirlo col fuoco lo farebbe sparire.
   Questa regola pesa (0,4,1): finché la regola di fuoco dei campi non teneva
   fuori le caselle, (0,8,3) se la mangiava e questa era codice morto. */
.aef-formp__hs .hs-form-booleancheckbox-display input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px var(--green-bright);
}

/* HubSpot scrive `font-size:14px` in linea sullo <span> che avvolge il testo
   del consenso: è l'unico punto del foglio dove serve `!important`, perché
   contro uno stile in linea la specificità non basta. Il frame chiede 12. */
.aef-formp__hs .hs-form-booleancheckbox-display span {
  font-size: 12px !important;
  line-height: 18px;
  font-weight: 500;
  color: var(--muted);
}

.aef-formp__hs .hs-form-booleancheckbox-display .hs-form-required { color: #F04F4F; }

/* ---------- Il bottone di invio ----------
   Nel frame è a misura del testo e allineato a sinistra, non largo quanto la
   scheda; e ha le tre ombre del componente «Button / CTA». */
.aef-formp__hs .hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 20px 36px;
  border: 0;
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: -1px;
  border-radius: 10px;
  background: var(--orange);
  color: var(--ink);
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, outline-color .18s ease, box-shadow .18s ease;
  box-shadow:
    0 0 18px 1px rgba(255, 92, 31, 0.65),
    0 0 44px 6px rgba(255, 92, 31, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.28);
}

.aef-formp__hs .hs-button:hover,
.aef-formp__hs .hs-button:focus {
  background: #FF7A45;
  outline-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 0 26px 3px rgba(255, 122, 69, 0.75),
    0 0 60px 10px rgba(255, 122, 69, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

/* Le tre ombre del componente vanno ripetute: `box-shadow` non si somma da
   sé, e senza di loro l'anello spegnerebbe l'alone arancione. */
.aef-formp__hs .hs-button:focus-visible {
  box-shadow:
    0 0 0 3px var(--ink),
    0 0 0 6px var(--green-bright),
    0 0 26px 3px rgba(255, 122, 69, 0.75),
    0 0 60px 10px rgba(255, 122, 69, 0.45),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.aef-formp__hs .hs-error-msg,
.aef-formp__hs .hs-error-msgs { color: #F04F4F; font-size: 13px; }

/* ---------- Comparsa ---------- */
.aef-anima .aef-formp .aef-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.aef-formp .aef-reveal.is-in { opacity: 1; transform: none; }

body.elementor-editor-active .aef-formp .aef-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .aef-formp { padding: 80px 40px; gap: 48px; }
  .aef-formp__top { grid-template-columns: 1fr; gap: 44px; }
  .aef-formp__title { font-size: 34px; line-height: 40px; }
  .aef-formp__vetro { padding: 32px; }
  .aef-formp__hs form.hs-form { grid-template-columns: 1fr; }
  .aef-formp__hs .hs-button { width: 100%; }
}

/* ---------- Telefono ----------
   Il frame del telefono non è il desktop rimpicciolito: cambia corpo, interlinea,
   spaziatura lettere, spazi interni e passo del reticolo. Prima qui si
   ridichiarava solo una manciata di regole e tutto il resto restava ai valori
   del desktop; è la ragione della metà degli scarti di questa sezione. */
@media (max-width: 767px) {
  .aef-formp { padding: 72px 24px; gap: 44px; }

  /* Reticolo più fitto: 48 in entrambe le direzioni. */
  .aef-formp::before {
    background-image:
      repeating-linear-gradient(90deg, transparent 0, transparent 47px, rgba(0, 226, 123, 0.10) 47px, rgba(0, 226, 123, 0.10) 48px),
      repeating-linear-gradient(180deg, transparent 0, transparent 47px, rgba(0, 226, 123, 0.10) 47px, rgba(0, 226, 123, 0.10) 48px);
  }

  /* L'alone della sezione sul telefono: 420×320 a 160,-110, al 18%, sfocato 140. */
  .aef-formp::after {
    left: 160px;
    top: -110px;
    width: 420px;
    height: 320px;
    opacity: .18;
    filter: blur(140px);
  }

  .aef-formp__top { gap: 44px; }

  .aef-formp__eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 2px; }
  /* Lo stacco sopra il titolo vale solo per quello dell'introduzione: il titolo
     sopra il modulo è il primo figlio della parte bassa e non ha niente sopra.
     Con il selettore corto vinceva su `.aef-formp__title--form { margin: 0 }`,
     che pesa uguale ma sta prima nel foglio, e la sezione cresceva di 14px. */
  .aef-formp__intro .aef-formp__title { margin-top: 14px; }
  .aef-formp__title { font-size: 28px; line-height: 34px; letter-spacing: -0.3px; }
  .aef-formp__sub { margin-top: 14px; font-size: 16px; line-height: 25px; }
  .aef-formp__pulsanti { flex-direction: column; gap: 12px; margin-top: 26px; }
  .aef-formp__nota { margin-top: 14px; font-size: 15px; line-height: 22px; text-align: center; }

  .aef-formp .aef-btn,
  .aef-formp__ghost { width: 100%; padding: 16px 24px; font-size: 16px; line-height: 20px; }

  /* La scheda «i prossimi step». */
  .aef-formp__card { padding: 26px 22px; border-radius: 18px; }
  .aef-formp__card::before {
    left: -65px;
    top: -65px;
    width: 472px;
    height: 519px;
    opacity: .26;
    filter: blur(110px);
  }
  .aef-formp__passi { margin-top: 20px; gap: 16px; }
  .aef-formp__passo { gap: 12px; }
  .aef-formp__badge {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 7px;
    font-weight: 600;
    letter-spacing: 1px;
  }
  .aef-formp__passo-testo { line-height: 21px; }
  .aef-formp__divider { margin: 22px 0 20px; }
  .aef-formp__stat { gap: 14px; }
  .aef-formp__stat-num { font-size: 36px; line-height: 42px; font-weight: 900; letter-spacing: 0; }
  .aef-formp__stat-label { line-height: 21px; }
  .aef-formp__stat-nota { font-weight: 600; letter-spacing: 1px; }

  /* La parte bassa. */
  .aef-formp__basso { gap: 16px; }
  .aef-formp__vetro {
    padding: 24px 20px;
    border-radius: 18px;
    -webkit-backdrop-filter: blur(32px);
    backdrop-filter: blur(32px);
  }
  .aef-formp__form-nota { margin-top: 14px; font-size: 11px; line-height: 16px; text-align: center; }

  /* Il modulo: una colonna sola, 16 fra le righe. */
  .aef-formp__hs form.hs-form { grid-template-columns: 1fr; row-gap: 16px; }
  .aef-formp__hs form.hs-form > .hs_accettazione_gdpr { margin-top: 18px; }
  .aef-formp__hs form.hs-form > .hs_submit { margin-top: 14px; }

  .aef-formp__hs .hs-form-field > label { margin-bottom: 6px; font-size: 13px; line-height: 18px; }

  .aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input input.hs-input:not([type="checkbox"]):not([type="hidden"]),
  .aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input select.hs-input,
  .aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input textarea.hs-input {
    padding: 12px 14px;
    font-size: 15px;
  }

  .aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs-form-field div.input select.hs-input {
    height: 44px;
    padding-right: 36px;
    background-position: right 14px center;
    background-size: 14px 14px;
  }

  .aef-formp__hs .hs-fieldtype-intl-phone { gap: 10px; }

  .aef-formp .aef-formp__vetro .aef-formp__hs form.hs-form .hs_phone div.input .hs-fieldtype-intl-phone select.hs-input {
    /* Come sul computer: con «Italia» al posto di «Italy (Italia)» il campo
       torna agli 83 del frame — il testo ne chiede 32, i margini 44 — e il
       numero ai 209 del disegno invece di 174. */
    flex: 0 0 83px;
    width: 83px;
    padding-right: 30px;
    background-position: right 10px center;
  }

  .aef-formp__hs .hs-form-booleancheckbox-display { gap: 10px; }
  .aef-formp__hs .hs-form-booleancheckbox-display span { font-size: 11px !important; line-height: 16px; }

  .aef-formp__hs .hs-button {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    line-height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aef-formp .aef-reveal { opacity: 1; transform: none; transition: none; }
}