/* =========================================================================
   Alzati e Fattura — sezione 15 FAQ
   Desktop 1440×1084 · mobile 390×1373.
   Fisarmonica costruita con <details>: funziona anche senza JavaScript ed
   è già accessibile da tastiera.
   ========================================================================= */

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

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

  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Più stretto delle altre sezioni (1080 invece di 1200) e con meno spazio
     fra le due colonne: le domande sono righe di testo lunghe, tenerle
     raccolte al centro le rende più facili da scorrere. */
  gap: 48px;
  padding: 96px max(120px, (100% - 1080px) / 2);
  background: var(--ink);
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

.aef-faq__left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 1 320px;
  position: sticky;
  top: 130px;
}

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

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

.aef-faq__help {
  margin: 0;
  color: var(--dim);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

.aef-faq__help a {
  color: var(--green-bright);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}

.aef-faq__help a:hover { border-bottom-color: var(--green-bright); }

/* ---------- Elenco ---------- */
.aef-faq__list {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 640px;
}

.aef-faq__item {
  border-bottom: 1px solid var(--deep);
}

.aef-faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  cursor: pointer;
  list-style: none;
  transition: color .2s ease;
}

/* Toglie la freccetta predefinita del browser */
.aef-faq__q::-webkit-details-marker { display: none; }

.aef-faq__q:hover { color: var(--green-bright); }

.aef-faq__q:focus-visible {
  outline: 2px solid var(--green-bright);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Il segno + che diventa − quando la risposta si apre.
   Prima era il carattere «+» ruotato di 135°: ma un «+» ruotato resta una
   croce, comunque lo si giri, e infatti sulla domanda aperta si vedeva una
   ×. Il cliente ha chiesto il «−». Ora sono due barrette: quella verticale si
   richiude su sé stessa e resta solo l'orizzontale. È un disegno, non un
   carattere, quindi non dipende dal font — e resta tutto in CSS, quindi
   funziona anche col JavaScript spento come il resto della fisarmonica. */
.aef-faq__sign {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  width: 16px;
  height: 16px;
}

.aef-faq__sign::before,
.aef-faq__sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--green-bright);
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}

.aef-faq__sign::after { transform: rotate(90deg); }

.aef-faq__item[open] .aef-faq__sign::after { transform: rotate(90deg) scaleX(0); }

.aef-faq__a {
  padding: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

.aef-faq__a p { margin: 0 0 .8em; }
.aef-faq__a p:last-child { margin-bottom: 0; }

/* Apertura morbida invece che a scatto */
.aef-faq__item[open] .aef-faq__a {
  animation: aef-faq-open .34s cubic-bezier(.2,.8,.3,1);
}

@keyframes aef-faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* Segnala le risposte ancora da scrivere, solo a chi sta modificando */
body.elementor-editor-active .aef-faq__a:empty::before {
  content: 'Risposta da inserire';
  color: #FF5C1F;
  font-style: italic;
}

/* ---------- Tablet ---------- */
@media (max-width: 1180px) {
  .aef-faq { gap: 40px; padding: 72px 40px; }
  .aef-faq__title { font-size: 32px; line-height: 38px; }
}

/* =========================================================================
   MOBILE e TABLET STRETTO — frame 390×1373

   Sotto i 900 px le due colonne non convivono: la sinistra veniva compressa
   a poco più di 200 px e il titolo si spezzava in cinque righe («Una /
   risposta / per / ogni tua / domanda»), mentre le domande restavano in una
   colonna altrettanto stretta. In verticale una sotto l'altra, come nel
   frame telefono. Il ritocco più sotto ridà al tablet il suo respiro.
   ========================================================================= */
@media (max-width: 900px) {
  .aef-faq {
    flex-direction: column;
    gap: 20px;
    padding: 64px 24px;
  }

  .aef-faq__left {
    position: static;
    flex: 1 1 auto;
    width: 100%;
    gap: 8px;
  }

  /* Nel frame mobile del Figma le domande non sono righe separate da una
     linea, come sul computer: sono schede singole su fondo più chiaro, con
     un filo verde e gli angoli tondi. Era la differenza che si notava di più. */
  .aef-faq__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }

  .aef-faq__item {
    padding: 16px 18px;
    border: 1px solid rgba(0, 226, 123, 0.10);
    border-bottom: 1px solid rgba(0, 226, 123, 0.10);
    border-radius: 12px;
    background: #0B1D16;
  }

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

  .aef-faq__title {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.3px;
  }

  .aef-faq__q {
    padding: 0;
    gap: 12px;
    font-size: 15px;
    line-height: 21px;
  }

  .aef-faq__a {
    padding: 10px 0 0;
    font-size: 14px;
    line-height: 21px;
  }
}

/* Fra 768 e 900 px la disposizione è quella del telefono, ma lo schermo è
   largo il doppio: margini e corpo del testo restano quelli del tablet, e la
   colonna delle domande non si allarga oltre la misura leggibile. */
@media (min-width: 768px) and (max-width: 900px) {
  .aef-faq { padding: 72px 40px; align-items: center; }
  .aef-faq__left,
  .aef-faq__list { width: 100%; max-width: 680px; }
  .aef-faq__title { font-size: 32px; line-height: 38px; }
  .aef-faq__q { font-size: 17px; line-height: 24px; }
  .aef-faq__a { font-size: 15px; line-height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .aef-faq__sign::before,
  .aef-faq__sign::after { transition: none; }
  .aef-faq__item[open] .aef-faq__a { animation: none; }
}

/* =========================================================================
   LANDING PARTNER — .aef-faq--partner
   Frame «FAQ» 100:1795 (1440×635) e «FAQ — mobile» 100:2480 (390×826),
   versione del 31 agosto 22:12.

   TUTTO quello che sta qui sotto è agganciato a .aef-faq--partner: la
   landing biglietti e la landing informazioni usano lo stesso foglio e non
   devono muoversi di un decimo di pixel.

   E ogni regola sta chiusa nella sua media query, anche quando sembrerebbe
   inutile: «.aef-faq--partner .qualcosa» pesa due classi e batterebbe
   «.qualcosa» anche dentro la media query del telefono. Una regola pensata
   per il computer e scritta fuori scenderebbe fino a 390px e vincerebbe.
   Fuori dalle media query stanno soltanto le due cose che i due frame
   chiedono uguali a tutte le larghezze.
   ========================================================================= */

/* ---------- valido a tutte le larghezze ---------- */

/* Il frame manda a capo dov'è finito lo spazio, non dove viene più bilanciato:
   sul computer «Una risposta per / ogni tua domanda» (347 di colonna), sul
   telefono «Una risposta per ogni / tua domanda» (c'è un U+2028 dopo «ogni»).
   Con text-wrap: balance il computer ne faceva tre e il telefono spezzava
   dopo «per».
   Attenzione al valore: `text-wrap: normal` non esiste, il browser lo butta
   via e il balance resta in piedi. Quello che lo annulla è `wrap`. */
.aef-faq--partner .aef-faq__title { text-wrap: wrap; }

/* La domanda aperta è verde in tutti e due i frame. Prima il verde stava solo
   su :hover: aprendo una qualsiasi delle cinque righe restava bianca. */
.aef-faq--partner .aef-faq__item[open] > .aef-faq__q { color: var(--green-bright); }

/* ---------- COMPUTER — frame 1440×635 ---------- */
@media (min-width: 1181px) {
  /* Il frame è largo 1200 di contenuto (non 1080) ed è in SPACE_BETWEEN: le
     due colonne stanno ai bordi e lo spazio fra loro è quello che avanza,
     193 = 1200 − 347 − 660. L'itemSpacing 80 del frame resta come minimo.

     Il pavimento resta 120 com'era, e come lo scrivono tutti gli altri fogli
     di questa landing. Con 40 il conto tornava soltanto a 1440 (dove decide
     l'altro termine, (100% − 1200) / 2 = 120): fra 1181 e 1400 la sezione
     rientrava di 40 mentre bento, pacchetti, form e footer rientrano di 100,
     e a 1280 la FAQ cominciava 60px più a sinistra di tutte le altre. Adesso
     a 1440 fa 120 come il frame e sotto non sporge mai. */
  .aef-faq--partner {
    justify-content: space-between;
    gap: 80px;
    padding: 96px max(120px, (100% - 1200px) / 2);
  }

  /* Le due colonne del frame misurano 347 e 660 e insieme al minimo di 80 fra
     loro chiedono 1087: con il margine a 120 lo spazio basta solo da 1327px in
     su. Sotto, qualcosa deve cedere, e non può essere la colonna del titolo:
     «ogni tua domanda» a corpo 42 misura 346,5 e nei 347 del frame ci sta per
     mezzo pixel, quindi basta togliergliene uno perché il titolo passi da due
     righe a tre. Cede l'elenco, che è una colonna di testo e si limita a
     mandare a capo qualche riga in più (514 di larghezza a 1181px). Con
     flex-shrink a zero su tutti e due, invece, l'elenco usciva dal margine
     destro di 26px. Da 1327 in su, 1440 compreso, non cambia niente: lo
     spazio avanza e nessuna delle due si restringe. */
  .aef-faq--partner .aef-faq__left { flex: 0 0 347px; }
  .aef-faq--partner .aef-faq__list { flex: 0 1 660px; min-width: 0; max-width: 660px; }

  /* Nel frame la riga di aiuto è HUG, larga 174, e va a capo dopo «cerchi?».
     Il montatore consegna la frase su una riga sola: la misura la rimanda a
     capo nello stesso punto. */
  .aef-faq--partner .aef-faq__help { max-width: 174px; }

  /* Interlinee fisse come le dichiara il frame: 26 sulla domanda (l'
     intestazione diventa 18 + 26 + 18 = 62) e 22 sulla risposta. */
  .aef-faq--partner .aef-faq__q { line-height: 26px; }
  .aef-faq--partner .aef-faq__a { line-height: 22px; max-width: 600px; }

  /* Il segno resta il disegno in CSS (vedi il commento più sopra), ma largo
     quanto il carattere del frame: «+» 12, «–» 10. È quello che decide la
     larghezza utile della domanda, 632 da chiusa e 634 da aperta. */
  .aef-faq--partner .aef-faq__sign { width: 12px; }
  .aef-faq--partner .aef-faq__item[open] .aef-faq__sign { width: 10px; }

  /* Lo stacco fra i due capoversi delle risposte 1 e 4: nel frame è una riga
     di testo intera, 22px, non un margine da 11. */
  .aef-faq--partner .aef-faq__a p { margin: 0 0 22px; }
  .aef-faq--partner .aef-faq__a p:last-child { margin-bottom: 0; }
}

/* ---------- TELEFONO — frame 390×826 ---------- */
@media (max-width: 900px) {
  .aef-faq--partner { position: relative; }

  /* L'a-capo del titolo. Nel frame telefono la stringa contiene un U+2028
     dopo «ogni»: «Una risposta per ogni / tua domanda». Il montatore consegna
     la frase su una riga sola, e a tutti e 342 i pixel della colonna il
     browser ci fa stare anche «tua» (322 su 342), spezzando dopo. Il rientro
     a destra accorcia la riga a 300 e riporta l'a-capo dov'è nel frame: il
     riquadro del titolo resta largo 342 e alto 68, si accorcia solo la riga.
     I due estremi misurati: «Una risposta per ogni» 274,8 — «Una risposta per
     ogni tua» 322,2. Serve solo dove la colonna è larga abbastanza da farci
     stare anche «tua», cioè da 370px di finestra in su: sotto, il rientro
     non cambia niente e più giù fa danno — vedi in coda al foglio. */
  .aef-faq--partner .aef-faq__title { padding-right: 42px; }

  /* Il filo della scheda nel Figma è INSIDE: non toglie spazio al contenuto.
     Con `border` e box-sizing: border-box si mangiava 2px in larghezza (306
     → 304) e 2px in altezza (74 → 76). Con outline + outline-offset: -1px il
     filo si disegna dentro senza spostare niente. Ed è al 15%, non al 10%. */
  .aef-faq--partner .aef-faq__item {
    border: 0;
    outline: 1px solid rgba(0, 226, 123, 0.15);
    outline-offset: -1px;
  }

  /* Sul telefono il frame non dichiara counterAxisAlignItems, cioè MIN: il
     segno sta in cima, in bordo alla prima riga della domanda, non centrato
     sulle due. Alto 22 come la riga del carattere del frame: è quello che
     rende la scheda chiusa alta 54 e quella aperta 232. */
  .aef-faq--partner .aef-faq__sign {
    align-self: flex-start;
    width: 11px;
    height: 22px;
  }
  .aef-faq--partner .aef-faq__item[open] .aef-faq__sign { width: 9px; }

  /* Nel frame telefono la riga di aiuto è l'ULTIMO figlio della sezione,
     sotto le schede, a 20 dall'elenco e 64 dal fondo. Nel markup sta dentro
     la colonna di sinistra — dove sul computer deve stare, perché lì è il
     terzo testo del blocco titolo — quindi qui la si toglie dal flusso e la
     si appoggia in fondo, lasciando all'elenco lo spazio che le serve
     (20 di stacco + 18 di riga). Così il blocco titolo torna alto 92 e le
     schede risalgono a 176, dov'erano nel frame. */
  .aef-faq--partner .aef-faq__help {
    position: absolute;
    left: 24px;
    right: 24px;
    /* Appoggiata per la CIMA, non per il fondo: 82 = 64 di fondo + 18 di
       riga, quindi a 390 il risultato è identico (y 744, fondo a 64). La
       differenza si vede quando la frase va a capo, sotto i 322px: legata
       per il fondo cresceva verso l'alto e si mangiava lo stacco dalle
       schede, che scendeva da 20 a 2px; legata per la cima cresce verso il
       basso, dentro i 64px di margine inferiore, e lo stacco resta 20 a
       qualunque larghezza. */
    top: calc(100% - 82px);
    font-size: 13px;
    line-height: 18px;
  }
  .aef-faq--partner .aef-faq__list { margin-bottom: calc(20px + 18px); }

  /* Riga vuota fra i capoversi: 21 sul telefono, come l'interlinea. */
  .aef-faq--partner .aef-faq__a p { margin: 0 0 21px; }
  .aef-faq--partner .aef-faq__a p:last-child { margin-bottom: 0; }
}

/* ---------- TABLET STRETTO — fra 768 e 900 ----------
   Qui vale la disposizione del telefono, ma il foglio condiviso centra le due
   colonne dentro 680 e allarga i margini a 40. La riga di aiuto, che sopra è
   stata tolta dal flusso, va rimessa in colonna con loro: senza questo
   ritocco resterebbe appoggiata al margine sinistro, 70px più a sinistra
   delle schede. Non è una larghezza che l'audit misura: è che non si può
   lasciare peggio di come si è trovato. */
@media (min-width: 768px) and (max-width: 900px) {
  .aef-faq--partner .aef-faq__help {
    left: 40px;
    right: 40px;
    /* Legata per la cima come sopra: 90 = 72 di fondo (il margine di questa
       fascia) + 18 di riga. */
    top: calc(100% - 90px);
    max-width: 680px;
    margin-inline: auto;
  }
}

/* ---------- TELEFONI STRETTI — sotto i 370 ----------
   Il rientro di 42 sul titolo serve a riportare l'a-capo dopo «ogni», e serve
   soltanto finché nella colonna ci starebbe anche «tua»: «Una risposta per
   ogni tua» misura 322,2, quindi da 370px di finestra in su (342 di colonna a
   390). Sotto quella larghezza il testo va a capo dopo «ogni» da solo, e il
   rientro toglie spazio e basta: a 321px e meno la seconda riga «ogni tua
   domanda» (231,5) non ci sta più nei 230 che restano e il titolo prende tre
   righe invece di due — con tutto il resto della sezione che scende di 34.
   Qui lo si spegne: da 280px in su il titolo resta su due righe. */
@media (max-width: 369px) {
  .aef-faq--partner .aef-faq__title { padding-right: 0; }
}