/* =========================================================================
   Alzati e Fattura — sezione P11 3 MODI PER ESSERE PARTNER · landing Partner
   Frame «3 modi per essere partner» 1440×1077 · mobile 390×1872.
   ========================================================================= */

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

.aef-pacchetti {
  --ink: #030F0F;
  --green-bright: #00E27B;
  --muted: #C7D2CC;
  --dim: #7A8A82;
  --scuro: #22312B;
  --deep: #0A3B26;

  display: flex;
  flex-direction: column;
  align-items: center;
  /* Frame: niente margine sopra (la sezione prima finisce col suo), 130 sotto,
     100 ai lati, 56 fra intestazione e schede. */
  gap: 56px;
  padding: 0 100px 130px;
  background: var(--ink);
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Intestazione ----------
   Nel frame occhiello, titolo e sottotitolo sono tutti e tre CENTER. */
.aef-pacchetti__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 1240px;
  text-align: center;
}

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

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

/* Il sottotitolo è largo 860 dentro un'intestazione da 1240 e nel frame sta al
   centro: 190 di stacco per lato. Senza i margini automatici si incollava a
   sinistra. */
.aef-pacchetti__sub {
  margin: 0 auto;
  /* `width: 100%` serve davvero: i margini automatici, da soli, spengono lo
     stiramento del blocco flessibile e il paragrafo si stringeva sul testo
     (614 invece di 860). */
  width: 100%;
  max-width: 860px;
  color: var(--muted);
  font-size: 19px;
  font-weight: 400;
  line-height: 30px;
}

/* ---------- Le tre schede ----------
   Altezze diverse, **allineate in basso**: crescono verso l'alto man mano che
   il pacchetto sale di livello, e il pulsante resta alla stessa quota in tutte
   e tre. È `align-items: end` a farlo, non altezze scritte a mano. */
.aef-pacchetti__griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 24px;
  width: 100%;
  max-width: 1240px;
}

.aef-pacchetti__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 30px;
  /* Nel Figma lo stroke della scheda è INSIDE 2px: disegna dentro il riquadro
     senza togliere spazio al contenuto. Reso con `border` mangiava due pixel
     per lato — il testo scendeva da 337,3 a 333,3 e due voci su dodici
     mandavano a capo una parola, facendo crescere le schede di 22px. Con
     `outline` più `outline-offset: -2px` la linea sta dentro e non toglie
     niente. */
  border: 0;
  outline: 2px solid var(--aef-pac, #00E27B);
  outline-offset: -2px;
  border-radius: 24px;
  /* La sfumatura parte dal colore del pacchetto e sbianca **presto**: nel
     frame il bianco è già pieno a poco più di un terzo dell'altezza, non in
     fondo. La quota d'arrivo cambia da scheda a scheda. */
  background: linear-gradient(180deg, var(--aef-pac-alto, #D1FAE7) 0%, #FFFFFF var(--aef-pac-fine, 100%));
  color: var(--scuro);
}

.aef-pacchetti__card:nth-child(1) { --aef-pac-fine: 40.8%; }
.aef-pacchetti__card:nth-child(2) { --aef-pac-fine: 35.6%; }
/* Al passaggio del mouse la scheda si solleva e si accende — chiesto dal
   cliente il 3 settembre («un effetto over che lo ingrandisce e lo accende un
   po'»). Tre accortezze:
   · si ingrandisce dell'1,5%, non di più: le tre schede stanno affiancate e un
     ingrandimento vistoso le farebbe accavallare;
   · il bagliore prende il **colore del pacchetto** (`--aef-pac`), così ognuna
     si accende del suo verde o del suo arancione;
   · vale solo dove esiste un mouse. Sul telefono `:hover` resta appiccicato
     dopo il tocco e la scheda rimarrebbe ingrandita finché non se ne tocca
     un'altra. */
@media (hover: hover) and (pointer: fine) {
  .aef-pacchetti__card {
    transition: transform .28s cubic-bezier(.2,.8,.3,1), box-shadow .28s ease;
  }

  .aef-pacchetti__card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow:
      0 18px 40px rgba(3, 15, 15, .28),
      0 0 44px color-mix(in srgb, var(--aef-pac, #00E27B) 34%, transparent);
  }

  /* La Executive ha già il suo bagliore: qui non si sostituisce, si rinforza. */
  .aef-pacchetti__card:nth-child(3):hover {
    box-shadow:
      0 18px 40px rgba(3, 15, 15, .28),
      0 0 72px rgba(255, 92, 31, .46);
  }
}

/* La Executive ha il bagliore arancione che la stacca dalle altre due. */
.aef-pacchetti__card:nth-child(3) {
  --aef-pac-fine: 33.5%;
  box-shadow: 0 0 60px rgba(255, 92, 31, 0.32);
}

/* L'etichetta «⚡ IL PIÙ SCELTO» sta a cavallo del bordo superiore. */
.aef-pacchetti__etichetta {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 22px;
  border-radius: 100px;
  /* Nel frame la pastiglia è verde brillante su tutte, non del colore del
     pacchetto, e ha il suo alone verde. */
  background: var(--green-bright);
  box-shadow: 0 0 27.6px rgba(0, 226, 123, 0.5);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

/* WordPress sostituisce il ⚡ del testo con la SVG di Twemoji e le mette
   `margin: 0 0.07em !important`: due spazi che nel frame non ci sono. Su un
   corpo da 15 fanno 2,1px, ed è tutto lo scarto della pastiglia (167,03 invece
   di 165 — il testo del frame è largo 121, in pagina veniva 123,03).
   L'`!important` qui è l'unico modo di battere quello del core, e non può
   uscire da questa sezione: il selettore parte dalla pastiglia. */
.aef-pacchetti__etichetta img.emoji { margin: 0 !important; }

.aef-pacchetti__nome {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
}

/* ---------- La promessa dentro la cornice ----------
   Nel frame il riquadro «promessa» è 337,33×92 con 20/24 di margini interni,
   **senza fondo e senza contorno** (`fills: []`, `strokes: []`, raggio 12 che
   quindi non si vede). Quello che si vede è l'istanza «Frame / Bracket verde»,
   rientrata di 4 per lato — 329,33×84 — e dentro di lei otto figure separate,
   lette da `figma/raw/partner-desktop.json`, nodo 100:1603, in coordinate
   relative al riquadro promessa:

     linea T   x 17     y 9,25    309×1,5      (finisce 11,33 prima del bordo)
     linea B   x 17     y 81,25   309×1,5
     linea L   x 10,5   y 14      1,5×63       (finisce 15 prima del fondo)
     linea R   x 325    y 14      1,5×63       (rientro destro 10,83)
     angoli    16×12 ai quattro spigoli del bracket, cioè a 4 dal riquadro

   Le quattro linee sono **interrotte**: non si toccano fra loro, e gli angoli
   le attraversano a metà. Un `outline` — che è per forza un rettangolo chiuso e
   continuo — non può dirlo: quello di prima cadeva a 4 dal bordo invece che a
   9,25/10,5, cioè 6 pixel fuori posto, e passava sul filo esterno degli angoli
   invece che nel loro mezzo. Perciò la cornice è dipinta, una figura per strato,
   senza togliere spazio al testo: i quattro angoli sullo sfondo del riquadro, le
   quattro linee su uno strato sovrapposto. Stanno separati perché sono due cose
   diverse anche nel frame — quattro vettori uguali agli spigoli, quattro
   rettangoli in mezzo — e perché così lo sfondo del riquadro resta la lista
   degli angoli, che è come la leggono i misuratori.
   I tre numeri che sul telefono cambiano sono variabili. */
.aef-pacchetti__promessa {
  /* Rientri della cornice, presi uno per uno dal frame. A destra il frame
     assorbe il terzo di pixel della colonna (329,33 di larghezza su geometria
     intera): 4,33 · 10,83 · 11,33 invece di 4 · 10,5 · 11. */
  --bx-linea: 1.5px;
  --bx-oriz-sx: 17px;
  --bx-oriz-lunga: calc(100% - 28.33px);
  --bx-oriz-alto: 9.25px;
  --bx-vert-sx: 10.5px;
  --bx-vert-dx: 10.83px;
  --bx-vert-alta: calc(100% - 29px);
  --bx-vert-alto: 14px;
  --bx-ang-sx: 4px;
  --bx-ang-dx: 4.33px;

  position: relative;
  margin: 16px 0 0;
  padding: 20px 24px;
  border: 0;
  /* Nel frame il raggio 12 sta sul riquadro invisibile: non si vede, e non
     ritaglia niente (l'angolo più vicino allo spigolo dista 11,3 dal centro
     dell'arco, cioè ci sta dentro). Lo si dichiara lo stesso, così il riquadro
     è quello del frame anche dove non si vede. */
  border-radius: 12px;
  /* I quattro angoli. Quello del frame è un parallelogramma inclinato 16×12
     (`M0 12 L12,8 12 L16 0 L3,2 0 Z`, identico su tutti e quattro gli spigoli,
     non specchiato): reso con una banda a 105° — la perpendicolare ai suoi
     lati — tagliata dal riquadro 16×12 fra 3,09 e 15,46, che è la proiezione
     esatta di quei vertici sull'asse della sfumatura. */
  background-image:
    linear-gradient(105deg, rgba(0,226,123,0) 3.09px, var(--green-bright) 3.09px, var(--green-bright) 15.46px, rgba(0,226,123,0) 15.46px),
    linear-gradient(105deg, rgba(0,226,123,0) 3.09px, var(--green-bright) 3.09px, var(--green-bright) 15.46px, rgba(0,226,123,0) 15.46px),
    linear-gradient(105deg, rgba(0,226,123,0) 3.09px, var(--green-bright) 3.09px, var(--green-bright) 15.46px, rgba(0,226,123,0) 15.46px),
    linear-gradient(105deg, rgba(0,226,123,0) 3.09px, var(--green-bright) 3.09px, var(--green-bright) 15.46px, rgba(0,226,123,0) 15.46px);
  background-size: 16px 12px, 16px 12px, 16px 12px, 16px 12px;
  background-position:
    left var(--bx-ang-sx) top var(--bx-ang-sx),
    right var(--bx-ang-dx) top var(--bx-ang-sx),
    left var(--bx-ang-sx) bottom var(--bx-ang-sx),
    right var(--bx-ang-dx) bottom var(--bx-ang-sx);
  background-repeat: no-repeat;
  color: var(--deep);
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
}

/* Le quattro linee. Lo strato è grande quanto il riquadro (`inset: 0` su un
   riquadro senza bordo dà il riquadro), quindi le percentuali qui dentro
   contano come sopra. */
.aef-pacchetti__promessa::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--green-bright), var(--green-bright)),
    linear-gradient(var(--green-bright), var(--green-bright)),
    linear-gradient(var(--green-bright), var(--green-bright)),
    linear-gradient(var(--green-bright), var(--green-bright));
  background-size:
    var(--bx-oriz-lunga) var(--bx-linea),
    var(--bx-oriz-lunga) var(--bx-linea),
    var(--bx-linea) var(--bx-vert-alta),
    var(--bx-linea) var(--bx-vert-alta);
  background-position:
    left var(--bx-oriz-sx) top var(--bx-oriz-alto),
    left var(--bx-oriz-sx) bottom var(--bx-oriz-alto),
    left var(--bx-vert-sx) top var(--bx-vert-alto),
    right var(--bx-vert-dx) top var(--bx-vert-alto);
  background-repeat: no-repeat;
}

/* ---------- Le voci ---------- */
.aef-pacchetti__voci {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aef-pacchetti__voce {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

/* Nel frame la spunta parte dalla stessa quota della voce: niente margine
   sopra. Larghezza e altezza stanno qui e non solo negli attributi della SVG,
   perché sul telefono il frame la vuole 16. */
.aef-pacchetti__spunta {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

/* ---------- Pulsante ----------
   Nel frame fra l'ultima voce e il pulsante ci sono due spaziatori, 26 e 16:
   42 in tutto. `margin-top: auto` resta per i casi in cui la scheda venga
   stirata, ma la distanza la dà il margine interno. */
.aef-pacchetti__cta {
  margin-top: auto;
  padding-top: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* I tre pulsanti sono **tutti arancioni**, non del colore del pacchetto: nel
   frame sono `#FF5C1F` con l'alone di sempre, identici a quelli del resto della
   pagina. Del pacchetto qui cambia solo la larghezza.

   Due cose vanno ridichiarate qui dentro:
   · l'alone, perché `.elementor a { box-shadow: none }` (0,1,1) batte `.aef-btn`
     (0,1,0) e lasciava i tre pulsanti arancioni piatti;
   · il bordo bianco, che nel frame è INSIDE 1px e non aggiunge altezza: reso
     con `border` portava il pulsante da 61 a 63. Diventa un `outline` con
     offset −1. */
.aef-pacchetti .aef-pacchetti__btn,
.aef-pacchetti .aef-pacchetti__btn:link,
.aef-pacchetti .aef-pacchetti__btn:visited {
  width: 100%;
  padding: 18px 24px;
  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);
}

.aef-pacchetti .aef-pacchetti__btn:hover,
.aef-pacchetti .aef-pacchetti__btn:focus {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: -1px;
  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. Il bordo bianco del frame è INSIDE ed è reso
   con `outline`: l'outline è quindi già occupato, e prendendolo per l'anello
   (com'era prima) il bordo del pulsante spariva proprio mentre lo si sta
   usando. L'anello si disegna allora con `box-shadow`, che si somma alle ombre
   invece di sostituire il bordo: verde brillante, 3px tutt'intorno, davanti
   all'alone arancione dello stato attivo. */
.aef-pacchetti .aef-pacchetti__btn:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: -1px;
  box-shadow:
    0 0 0 3px 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-pacchetti__nota {
  margin: 0;
  color: var(--dim);
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  text-align: center;
}

/* ---------- La progressione ---------- */
.aef-pacchetti__progressione {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1240px;
  /* Frame: 28 fra le schede e le frecce. Il `gap` della sezione è 56, quindi
     qui si recupera la differenza. */
  margin-top: -28px;
}

.aef-pacchetti .aef-pacchetti__passo {
  width: 100%;
  height: auto;
  display: block;
}

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

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

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .aef-pacchetti { padding: 0 40px 90px; gap: 36px; }
  .aef-pacchetti__title { font-size: 34px; line-height: 40px; }
  .aef-pacchetti__griglia,
  .aef-pacchetti__progressione { grid-template-columns: 1fr; }
  .aef-pacchetti__progressione { margin-top: 0; gap: 12px; }
}

/* =========================================================================
   MOBILE — frame «3 modi per essere partner — mobile» 390×1872
   Le tre schede vanno in colonna: allineate in basso non avrebbe più senso,
   quindi tornano tutte a partire dall'alto.
   ========================================================================= */
@media (max-width: 767px) {
  /* Frame mobile: 72 di margine sotto, 24 ai lati, **40** fra intestazione e
     schede e fra una scheda e l'altra. Il conto torna:
     177 + 40 + 1583 + 72 = 1872. */
  .aef-pacchetti { padding: 0 24px 72px; gap: 40px; }

  .aef-pacchetti__head { gap: 12px; }
  /* Nel frame telefono l'occhiello è più piccolo del desktop: 12/16 con 2 di
     spaziatura, non 14/20 con 2,5. */
  .aef-pacchetti__eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 2px; }
  .aef-pacchetti__title { font-size: 28px; line-height: 34px; letter-spacing: -0.3px; }
  .aef-pacchetti__sub { font-size: 15px; line-height: 23px; }
  /* Gli a capo forzati (il testo arriva col suo «\n» e il modello lo passa a
     `nl2br`) servono al frame desktop. Sul telefono i due frame scrivono il
     testo **senza** a capo — `characters` del nodo titolo di
     partner-mobile.json è tutto su una riga, «3 modi per essere parte di
     Alzati e Fattura LIVE» — e lasciano andare a capo il blocco: due righe che
     si spezzano dopo «di», non dopo «parte», e tre righe di sottotitolo invece
     di quattro. Qui si spengono e il testo va a capo da sé. */
  .aef-pacchetti__title br,
  .aef-pacchetti__sub br { display: none; }

  .aef-pacchetti__griglia { grid-template-columns: 1fr; gap: 40px; align-items: stretch; }
  /* Frame mobile: 28 sopra, 22 ai lati, 26 sotto. */
  .aef-pacchetti__card { padding: 28px 22px 26px; border-radius: 20px; }
  .aef-pacchetti__card:nth-child(1) { --aef-pac-fine: 33%; }
  .aef-pacchetti__card:nth-child(2) { --aef-pac-fine: 29.2%; }
  .aef-pacchetti__card:nth-child(3) { --aef-pac-fine: 27.8%; box-shadow: 0 0 50px rgba(255, 92, 31, 0.32); }

  /* Sul telefono la pastiglia è più piccola, con la spaziatura più larga e
     **senza** alone. */
  .aef-pacchetti__etichetta {
    padding: 9px 18px;
    box-shadow: none;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1px;
  }

  /* Nel frame telefono le frecce di progressione **non ci sono**: in colonna
     indicherebbero di lato una cosa che sta sotto. */
  .aef-pacchetti__progressione { display: none; }

  /* Dentro la scheda gli spazi del frame sono 12 · 18 · 34, e il nome è più
     grande e più pesante che su computer: 24/30 con peso 800. */
  .aef-pacchetti__nome { font-size: 24px; font-weight: 800; line-height: 30px; letter-spacing: -0.2px; }
  /* Nel frame telefono il bracket è 290×68 dentro un riquadro 298×76: stessi
     rientri di sopra, ma qui la colonna è larga tonda e a destra non c'è più il
     terzo di pixel da assorbire (nodo 100:2305 di partner-mobile.json: linea T
     x 17 lunga 270, linea R rientro 10,5, angoli a 4). */
  .aef-pacchetti__promessa {
    --bx-oriz-lunga: calc(100% - 28px);
    --bx-vert-dx: 10.5px;
    --bx-ang-dx: 4px;
    margin-top: 12px;
    padding: 17px 20px;
    border-radius: 10px;
    font-size: 15px;
    line-height: 21px;
  }
  .aef-pacchetti__voci { margin-top: 18px; gap: 12px; }
  .aef-pacchetti__voce { font-size: 14px; line-height: 21px; gap: 10px; }
  .aef-pacchetti__spunta { flex-basis: 16px; width: 16px; height: 16px; }
  .aef-pacchetti__cta { padding-top: 34px; gap: 8px; }
  .aef-pacchetti__nota { font-size: 13px; line-height: 18px; }

  /* Il pulsante nel frame è alto 47: 14 di margine sopra e sotto più 19 di
     riga. Il selettore va ripetuto con `:link` e `:visited`, se no perde
     contro la regola generale qui sopra, che ne ha una in più. */
  .aef-pacchetti .aef-pacchetti__btn,
  .aef-pacchetti .aef-pacchetti__btn:link,
  .aef-pacchetti .aef-pacchetti__btn:visited {
    padding: 14px 24px;
    font-size: 15px;
    line-height: 19px;
    box-shadow:
      0 0 16px rgba(255, 92, 31, 0.65),
      0 0 36px rgba(255, 92, 31, 0.35),
      inset 0 1px 2px rgba(255, 255, 255, 0.28);
  }

  /* Stesso anello di fuoco, ma sopra l'alone più piccolo del telefono. */
  .aef-pacchetti .aef-pacchetti__btn:focus-visible {
    box-shadow:
      0 0 0 3px var(--green-bright),
      0 0 16px rgba(255, 92, 31, 0.65),
      0 0 36px rgba(255, 92, 31, 0.35),
      inset 0 1px 2px rgba(255, 255, 255, 0.4);
  }
}

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

/* Il fulmine dell'etichetta: figura del plugin al posto dell'emoji, così la
   pastiglia misura uguale ovunque. Le stesse misure che WordPress dà alla sua
   — 15px, allineata al testo — senza i margini che il core aggiunge con
   `!important` e senza dipendere da s.w.org. */
.aef-pacchetti .aef-pacchetti__fulmine {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: -2px;
}