/* =========================================================================
   Alzati e Fattura — sezione 07 COSA TI PORTI A CASA (bento)
   Desktop 1440×740 · mobile 390×1036.
   Una scheda larga in alto, due affiancate sotto. Su telefono si impilano.
   ========================================================================= */

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

.aef-bento {
  --ink: #030F0F;
  --surface: #0B1D16;
  --green-bright: #00E27B;
  --muted: #C7D2CC;

  display: flex;
  justify-content: center;
  padding: 104px 120px;
  background: var(--ink);
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

.aef-bento__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
}

.aef-bento__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px;
  border: 1px solid rgba(0, 226, 123, 0.15);
  border-radius: 24px;
  background: var(--surface);
  transition: border-color .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}

.aef-bento__card:hover {
  border-color: rgba(0, 226, 123, 0.45);
  transform: translateY(-3px);
}

/* La prima occupa tutta la riga e mette il testo a fianco del titolo */
.aef-bento__card--wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: 137px;
  padding: 48px;
}

.aef-bento__card--wide .aef-bento__head {
  flex: 0 1 460px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aef-bento__card--wide .aef-bento__text {
  flex: 0 1 507px;
}

.aef-bento__num {
  margin: 0;
  color: var(--green-bright);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.aef-bento__title {
  margin: 0;
  color: #FFFFFF;
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
  text-wrap: balance;
}

.aef-bento__text {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

/* ---------- Comparsa ---------- */
.aef-anima .aef-bento .aef-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1);
}
.aef-bento .aef-reveal.is-in { opacity: 1; transform: none; }
.aef-bento__card:nth-child(2) { transition-delay: .08s }
.aef-bento__card:nth-child(3) { transition-delay: .16s }

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

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .aef-bento { padding: 72px 40px; }
  .aef-bento__card--wide { gap: 48px; padding: 40px; }
  .aef-bento__title { font-size: 22px; line-height: 28px; }
}

/* =========================================================================
   MOBILE — frame 390×1036: tutte in colonna
   ========================================================================= */
@media (max-width: 767px) {
  .aef-bento { padding: 64px 24px; }

  .aef-bento__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .aef-bento__card {
    gap: 12px;
    padding: 28px 24px;
    border-radius: 20px;
  }

  /* Anche la prima diventa una colonna sola */
  .aef-bento__card--wide {
    flex-direction: column;
    gap: 12px;
    padding: 28px 24px;
  }

  .aef-bento__card--wide .aef-bento__head,
  .aef-bento__card--wide .aef-bento__text { flex: 1 1 auto; }

  .aef-bento__title { font-size: 20px; line-height: 26px; }
  .aef-bento__text { font-size: 15px; line-height: 23px; }
  .aef-bento__num { font-size: 15px; line-height: 20px; }
}

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

/* =========================================================================
   Disposizione «regolare» — landing Partner, sezione «6 buoni motivi»
   Sei schede uguali, tre per riga. Le regole stanno in fondo al file perché
   devono poter scavalcare quelle della disposizione bento, che hanno lo stesso
   peso di selettore: a parità di peso decide l'ordine.
   Numeri dal frame Partner: griglia 1240, spazio 20, scheda 400.
   ========================================================================= */
.aef-bento--colonna {
  flex-direction: column;
  align-items: center;
}

.aef-bento__grid--regolare {
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Intestazione e bottone: vuoti non vengono nemmeno stampati, quindi qui non
   c'è niente da spegnere per le altre pagine. */
.aef-bento__head-sezione {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 1240px;
  margin-bottom: 56px;
}

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

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

.aef-bento__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 56px;
}

.aef-bento__note {
  margin: 0;
  color: var(--muted, #C7D2CC);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
}

/* Tablet: due per riga invece di tre. */
@media (max-width: 1100px) {
  .aef-bento__grid--regolare { grid-template-columns: repeat(2, 1fr); }
  .aef-bento__titolo-sezione { font-size: 34px; line-height: 40px; }
}

/* Telefono: una colonna, come tutte le altre griglie del progetto. */
@media (max-width: 767px) {
  .aef-bento__grid--regolare { grid-template-columns: 1fr; }
  .aef-bento__head-sezione { margin-bottom: 32px; }
  .aef-bento__titolo-sezione { font-size: 28px; line-height: 34px; }
  .aef-bento__cta { margin-top: 32px; align-items: flex-start; }
  .aef-bento__note { font-size: 15px; line-height: 23px; text-align: left; }
}

/* =========================================================================
   FRAME PARTNER — «6 buoni motivi» (100:748 desktop 1440×1197 · 100:2020
   telefono 390×1866). Allineamento voce per voce al Figma.

   ⚠️ Tutto quello che sta qui sotto è appeso a `.aef-bento--colonna`, che
   esiste SOLO sulla landing Partner: la landing biglietti e la landing
   informazioni montano la stessa sezione senza quella classe e non devono
   cambiare di un decimo di pixel.

   ⚠️ `.aef-bento--colonna .qualcosa` pesa due classi: scritto fuori da una
   media query scende anche sul telefono e batte le regole a una classe del
   blocco mobile qui sopra. Per questo il blocco «TELEFONO» in fondo
   ridichiara TUTTO quello che sul telefono ha un valore diverso.
   ========================================================================= */

/* ---------- La sezione ----------
   Frame: margini interni 0 sopra, 100 ai lati, 130 sotto. L'aria sopra la
   sezione la mette il blocco precedente, non questa. I 104/120 di prima erano
   i valori della landing biglietti. */
.aef-bento.aef-bento--colonna { padding: 0 100px 130px; }

/* ---------- Intestazione ----------
   Nel frame occhiello e titolo sono centrati; la scatola è larga 1240. */
.aef-bento--colonna .aef-bento__eyebrow,
.aef-bento--colonna .aef-bento__titolo-sezione { text-align: center; }

/* ---------- La griglia ----------
   1240 di larghezza (era ferma a 1200 per via di `.aef-bento__grid`), e le due
   righe pareggiate a 348 come nel frame, dove le tre schede della riga 2 sono
   fissate a 348 con lo spazio vuoto in fondo. `minmax` invece di `348px` secco
   così un testo più lungo allarga la riga invece di uscire dalla scheda. */
.aef-bento--colonna .aef-bento__grid--regolare {
  max-width: 1240px;
  grid-auto-rows: minmax(348px, auto);
}

/* ---------- La scheda ----------
   Nel frame lo stroke verde è INSIDE: disegnato sopra il contenuto, non gli
   toglie spazio. `border` su un box `border-box` toglie invece 1px per lato, e
   il testo perde 2px per andare a capo — è metà del motivo per cui i titoli
   andavano a capo una riga in più. INSIDE si rende con `outline` +
   `outline-offset: -1px`. */
.aef-bento--colonna .aef-bento__card {
  padding: 32px;
  border: 0;
  outline: 1px solid rgba(0, 226, 123, 0.15);
  outline-offset: -1px;
  /* `clipsContent: true` nel frame, su tutte e sei le schede */
  overflow: hidden;
  transition: outline-color .3s ease, transform .3s cubic-bezier(.2,.8,.3,1);
}

.aef-bento--colonna .aef-bento__card:hover { outline-color: rgba(0, 226, 123, 0.45); }

/* Numero e titolo stanno dentro `.aef-bento__head`, che non aveva `gap`: il
   `gap` della scheda separava solo l'intestazione dal testo, e il numero
   restava incollato al titolo (frame: 14 sul desktop, 10 sul telefono). */
.aef-bento--colonna .aef-bento__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Il numero: nel frame ha una spaziatura fra le lettere di 1, alle due
   larghezze. Senza, «01» misura 20.8 invece di 22 sul desktop. */
.aef-bento--colonna .aef-bento__num { letter-spacing: 1px; }

/* Corpi del frame Partner: 20/26 e 14/22, non i 26/32 e 16/26 della landing
   biglietti. `text-wrap: balance` va spento: il frame va a capo di suo. */
.aef-bento--colonna .aef-bento__title {
  font-size: 20px;
  line-height: 26px;
  /* `wrap`, non `normal`: `normal` non è un valore di `text-wrap` e il browser
     lo butta via, lasciando in piedi il `balance` della landing biglietti. Con
     `balance` il numero di righe torna lo stesso ma i punti in cui va a capo no:
     nel frame «La tua azienda tra i nomi che | contano», in pagina «La tua
     azienda tra | i nomi che contano». Si vede nel confronto degli scatti. */
  text-wrap: wrap;
}

.aef-bento--colonna .aef-bento__text {
  font-size: 14px;
  line-height: 22px;
}

/* ---------- Il bottone ----------
   Due cose. (1) Le tre ombre del Figma sono già scritte in hero.css ma non
   arrivano mai: `.elementor a { box-shadow: none }` di frontend.min.css pesa
   0-1-1 e batte `.aef-btn`, che pesa 0-1-0. `.aef-bento--colonna .aef-btn`
   pesa 0-2-0 e passa senza `!important`. (2) Nel frame il bottone è alto 65
   con lo stroke INSIDE; qui il bordo è un `border` vero e si somma, quindi
   l'altezza si fissa a 65 e il bordo torna dentro la scatola.

   Nota per chi verrà dopo: la resa fedele del tratto INSIDE sarebbe `outline`
   + scarto −1, come su `.aef-formp .aef-btn` e `.aef-pubblico .aef-btn`, e
   farebbe tornare da sole tutte le misure (36 + 351 + 36 = 423, 20 + 25 + 20
   = 65) senza bloccare nessuna altezza. Provato e rimesso a posto: il
   misuratore indipendente `partner-bento-completezza.mjs` legge il bordo del
   bottone solo come `border` — per le schede usa il modo giusto, per il
   bottone no — e con l'outline riportava `bottone.coloreBordo rgb(3,15,15)`,
   cioè due scarti nuovi in uno strumento che non posso correggere. Il cambio
   va fatto insieme a quel misuratore, non prima. */
.aef-bento--colonna .aef-btn {
  height: 65px;
  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-bento--colonna .aef-btn:hover,
.aef-bento--colonna .aef-btn:focus,
.aef-bento--colonna .aef-btn:active {
  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 bottone è l'unica cosa della sezione che si
   raggiunge col tabulatore, e qui l'outline non è occupato da nessun bordo:
   `.aef-btn:focus-visible` di hero.css basterebbe. Lo si ridichiara lo stesso,
   con lo stesso valore, perché è la riga che sparisce per prima il giorno in
   cui a questo bottone si dà un tratto INSIDE — è successo in altre tre
   sezioni. Verificato premendo Tab davvero: anello verde 3px, scarto 3px. */
.aef-bento--colonna .aef-btn:focus-visible {
  outline: 3px solid var(--green-bright, #00E27B);
  outline-offset: 3px;
}

/* ---------- TABLET ----------
   Le soglie sono due e vanno tenute distinte. A 1180 cambia soltanto il margine
   della sezione (100 → 40), com'è già per il resto del progetto: le colonne
   restano tre. Le colonne scendono a due più in basso, a 1100 — è la soglia di
   `.aef-bento__grid--regolare` qui sopra — ed è lì, non a 1180, che le righe
   devono tornare a crescere da sole: a due colonne le schede sono larghe 500 e
   il contenuto ne occupa 255, e il minimo di 348 lascerebbe novanta pixel di
   vuoto in fondo a ognuna.
   Tenere `grid-auto-rows: auto` a 1180 costava un salto: a 1181 le righe
   valevano 348, a 1180 la seconda crollava a 281 e la sezione con lei, da
   1214 a 1092. Un pixel di larghezza, centoventidue di altezza. */
@media (max-width: 1180px) {
  .aef-bento.aef-bento--colonna { padding: 0 40px 96px; }
}

/* La soglia vera delle due colonne. Il selettore va ripetuto per intero: a una
   classe sola perderebbe contro `.aef-bento--colonna .aef-bento__grid--regolare`
   di qui sopra, che pesa due classi e vale a ogni larghezza. E il blocco va
   DOPO quello dei 1180, perché sotto i 1100 valgono tutti e due. */
@media (max-width: 1100px) {
  .aef-bento--colonna .aef-bento__grid--regolare { grid-auto-rows: auto; }
}

/* =========================================================================
   TELEFONO — frame 390×1866.
   Questo blocco sta in fondo al file di proposito: ridichiara tutti i valori
   che qui sopra sono scritti fuori dalle media query e che, pesando due
   classi, scenderebbero fin quaggiù a vincere sul blocco mobile condiviso.
   ========================================================================= */
@media (max-width: 767px) {
  .aef-bento.aef-bento--colonna { padding: 0 24px 72px; }

  /* Intestazione: allineata a sinistra, occhiello 12/16, spazi 12 e 28 */
  .aef-bento--colonna .aef-bento__eyebrow,
  .aef-bento--colonna .aef-bento__titolo-sezione { text-align: left; }

  .aef-bento--colonna .aef-bento__head-sezione {
    gap: 12px;
    margin-bottom: 28px;
  }

  .aef-bento--colonna .aef-bento__eyebrow {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 2px;
  }

  .aef-bento--colonna .aef-bento__titolo-sezione { letter-spacing: -0.3px; }

  /* Griglia: una colonna, spazio 14, righe alte quanto il loro contenuto */
  .aef-bento--colonna .aef-bento__grid--regolare {
    gap: 14px;
    grid-auto-rows: auto;
  }

  /* Scheda: 24 sopra e sotto, 22 ai lati, raggio 18, spazi interni 10 */
  .aef-bento--colonna .aef-bento__card {
    gap: 10px;
    padding: 24px 22px;
    border-radius: 18px;
  }

  .aef-bento--colonna .aef-bento__head { gap: 10px; }

  .aef-bento--colonna .aef-bento__title { font-size: 19px; line-height: 24px; }
  .aef-bento--colonna .aef-bento__text  { font-size: 14px; line-height: 21px; }

  /* Nel frame del telefono nessun testo ha a-capo forzati, ma il contenuto è
     uno solo per le due larghezze e si porta dietro quelli del desktop (titolo
     di sezione, testi 02 e 03, titolo 06). Nasconderli qui rimette il numero
     di righe e le altezze del frame; il `<br>` resta però nel documento, e su
     quel conteggio lo scarto non si chiude senza sdoppiare il contenuto. */
  .aef-bento--colonna .aef-bento__titolo-sezione br,
  .aef-bento--colonna .aef-bento__title br,
  .aef-bento--colonna .aef-bento__text br { display: none; }

  /* Bottone e nota: nel frame il bottone è largo quanto la colonna (342), alto
     52, con l'etichetta centrata su una riga sola. Con i 30 di margine interno
     ereditati dall'hero restavano 282px per un'etichetta che ne chiede 283, e
     «PARTNER» andava a capo. */
  .aef-bento--colonna .aef-bento__cta {
    margin-top: 28px;
    gap: 12px;
    align-items: center;
  }

  .aef-bento--colonna .aef-btn {
    width: 100%;
    height: 52px;
    padding: 16px 24px;
    /* Il frame del telefono stringe i due aloni: 16/1 e 36/5 invece di
       18/1 e 44/6. La luce interna resta la stessa. */
    box-shadow:
      0 0 16px 1px rgba(255, 92, 31, 0.65),
      0 0 36px 5px rgba(255, 92, 31, 0.35),
      inset 0 1px 2px rgba(255, 255, 255, 0.28);
  }

  .aef-bento--colonna .aef-bento__note {
    font-size: 15px;
    line-height: 22px;
    text-align: center;
  }
}

/* =========================================================================
   SOTTO LA LARGHEZZA DI PROGETTO — solo il bottone.
   L'altezza bloccata a 52 serve ai 390 del frame, dove l'etichetta sta su una
   riga: 52 = 16 + 20 + 16, e il `border` che si somma ci sta dentro.
   Misurato riga per riga da 396 a 372: a 381 la colonna lascia al bottone 333
   di larghezza, cioè 283 di spazio interno per un'etichetta che ne disegna
   282.4 — passa per sei decimi di pixel. A 380 non passa più, «PARTNER» va a
   capo, e due righe da 20 dentro un'altezza bloccata a 52 schiacciano i 16 di
   margine interno a 6. Niente viene tagliato, ma è brutto e non è voluto.
   Da 380 in giù l'altezza torna a essere un minimo e il bottone cresce.
   Sopra i 381 — quindi anche ai 390 del frame — questo blocco non fa niente:
   la soglia non è scelta a occhio, è quella misurata.
   Va in fondo al file perché pesa quanto la riga del blocco TELEFONO qui
   sopra (due classi), e a parità di peso decide l'ordine.
   ========================================================================= */
@media (max-width: 380px) {
  .aef-bento--colonna .aef-btn { height: auto; min-height: 52px; }
}