/* =========================================================================
   Alzati e Fattura — sezione 01 HERO
   Ricostruita dal Figma: desktop 1440×807 · mobile 390×746
   Valori presi dal file, non a occhio.
   ========================================================================= */

/* I bordi devono stare dentro le misure prese dal Figma, non sommarsi:
   senza questa regola ogni elemento con bordo cresce di 2px e la sezione sfora. */
.aef-hero,
.aef-hero *,
.aef-hero *::before,
.aef-hero *::after { box-sizing: border-box; }

.aef-hero {
  --ink: #030F0F;
  --surface: #0B1D16;
  --green: #00B865;
  --green-bright: #00E27B;
  --green-deep: #0A3B26;
  --muted: #C7D2CC;
  --dim: #7A8A82;
  --orange: #FF5C1F;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 90px 24px 80px;
  min-height: 807px;
  overflow: hidden;
  background-color: var(--ink);
  text-align: center;
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/*
 * Pagina informazioni: lì il conto alla rovescia è spento, quindi il contenuto
 * è più corto e l'altezza minima avanzava — sotto le valutazioni restava una
 * fascia vuota che sulla pagina dei biglietti non c'è. Qui l'altezza la decide
 * il contenuto, come già succede sull'altra pagina (dove il contenuto supera
 * comunque gli 807px e il minimo non conta).
 *
 * Vale a tutte le larghezze: la regola per telefono più in basso ridichiara il
 * minimo, e senza questa riga lì tornerebbe il vuoto.
 */
.aef-hero--senza-timer { min-height: 0; }

/* Filmato di sfondo: sta sopra la foto (che resta come riserva) e sotto la
   velatura, così i testi restano leggibili come nel Figma. Finché non parte
   davvero è trasparente e si vede la foto. */
.aef-hero__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
}

.aef-hero__video.is-playing { opacity: 1; }

/* Sfondo: foto + velatura verticale.
   Il gradiente replica i tre stop del Figma: 45% → 82% → 97% di #030F0F. */
.aef-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  /* L'immagine arriva dal pannello di Elementor; se non ne viene scelta una,
     si usa quella del progetto inclusa nel plugin. */
  background-image: var(--aef-hero-bg, url('../img/hero-bg.webp'));
  background-size: cover;
  /* Figma usa scaleMode FILL senza trasformazioni: l'immagine è centrata.
     Con "center top" si vedeva il soffitto invece del palco. */
  background-position: center center;
}

.aef-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(3, 15, 15, 0.45) 0%,
    rgba(3, 15, 15, 0.82) 70%,
    rgba(3, 15, 15, 0.97) 100%
  );
}

/* Filetto verde in cima */
.aef-hero__hairline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--green-bright);
  z-index: 1;
}

/* ---------- Badge data e luogo ---------- */
.aef-hero__badges {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.aef-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  /* Il bordo bianco nel Figma ha opacità 0.4, non è pieno */
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  background: rgba(11, 29, 22, 0.9);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 2.5px;
  white-space: nowrap;
}

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

/* ---------- Titolo ---------- */
.aef-hero__title {
  margin: 0;
  max-width: 878px;
  color: #FFFFFF;
  font-size: 60px;
  font-weight: 900;
  line-height: 64px;
  letter-spacing: -0.5px;
  text-wrap: balance;
}

/* Parole evidenziate dentro il titolo: nel Figma "VENDITE" e "FATTURATO"
   hanno un fill verde diverso dal resto del testo. */
.aef-hero__title em,
.aef-hero__title .aef-hl {
  color: var(--green-bright);
  font-style: inherit;
  font-weight: inherit;
}

/* ---------- Sottotitolo ---------- */
/* Sottotitolo grande verde, fra il titolo e il paragrafo. Serve alla landing
   Partner; nelle pagine che lasciano il campo vuoto non viene nemmeno stampato,
   quindi qui non c'è niente da spegnere. Valori dal frame Partner 1440. */
.aef-hero__sub {
  margin: 0;
  max-width: 900px;
  color: var(--green-bright);
  font-size: 34px;
  font-weight: 800;
  line-height: 42px;
  letter-spacing: -0.3px;
}

.aef-hero__lead {
  margin: 0;
  max-width: 814px;
  color: var(--muted);
  font-size: 19px;
  font-weight: 400;
  line-height: 30px;
}

/* Riga sotto il pulsante («Solo N posti per ogni settore»). Sta dentro
   .aef-hero__cta, che è un flex in riga: va messa a tutta larghezza, altrimenti
   finisce di fianco al bottone invece che sotto. */
.aef-hero__note {
  flex-basis: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
}

/* ---------- Bottone ---------- */
.aef-hero__cta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}

.aef-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 36px;
  /* Bordo bianco al 40%, non pieno */
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  /* Valore di riserva sul serio: `--orange` e `--ink` sono dichiarate dentro
     `.aef-hero`, quindi un `.aef-btn` usato in un'altra sezione — il bottone dei
     «6 motivi», per dirne una — usciva senza fondo e con il testo nero su nero.
     Dove le variabili ci sono non cambia niente. */
  background: var(--orange, #FF5C1F);
  color: var(--ink, #030F0F);
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  /* Le tre ombre del Figma: alone stretto, alone largo, luce interna in alto */
  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);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* ---------- Hover del pulsante ----------
   Valori del componente «Button / CTA» del Figma, stato Hover: sfondo
   #FF5C1F → #FF7A45, bordo bianco dal 40 al 55%, aloni più ampi, luce interna
   dal 28 al 40%.

   Il `color` va ridichiarato in ogni stato: Elementor porta i link a #333366
   su :hover, :focus e :visited. Dichiarandolo solo nello stato normale, il
   testo del pulsante diventava blu al passaggio del mouse — misurato il
   2026-08-08 su tutti e otto i pulsanti, in entrambi gli ambienti. */
.aef-btn,
.aef-btn:link,
.aef-btn:visited { color: var(--ink, #030F0F); }

.aef-btn:hover,
.aef-btn:focus,
.aef-btn:active {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.55);
  background: #FF7A45;
  color: var(--ink, #030F0F);
  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);
}

.aef-btn:active { transform: translateY(0); }

.aef-btn:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 3px;
}

/* ---------- Countdown ---------- */
.aef-hero__countdown {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.aef-hero__countdown-label {
  color: var(--orange);
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 2.5px;
}

.aef-hero__units {
  display: flex;
  gap: 12px;
}

.aef-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 62px;
  padding: 10px 16px;
  border: 1px solid var(--green-deep);
  border-radius: 12px;
  /* Fondo al 90%: nel Figma lascia trasparire la foto */
  background: rgba(11, 29, 22, 0.9);
}

.aef-unit__value {
  color: var(--green-bright);
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
}

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

/* Battito al cambio dei secondi */
.aef-unit__value.is-tick { animation: aef-tick .45s cubic-bezier(.2,.8,.3,1); }

@keyframes aef-tick {
  0%   { transform: translateY(-6px); opacity: .25; }
  60%  { transform: translateY(1px);  opacity: 1; }
  100% { transform: translateY(0); }
}

/* ---------- Recensioni ---------- */
.aef-hero__ratings {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.aef-hero__ratings img {
  height: 50px;
  width: auto;
  display: block;
}

/* ---------- Comparsa allo scroll ---------- */
.aef-anima .aef-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}

.aef-reveal.is-in { opacity: 1; transform: none; }

.aef-hero .aef-reveal:nth-child(2) { transition-delay: .05s }
.aef-hero .aef-reveal:nth-child(3) { transition-delay: .12s }
.aef-hero .aef-reveal:nth-child(4) { transition-delay: .19s }
.aef-hero .aef-reveal:nth-child(5) { transition-delay: .26s }
.aef-hero .aef-reveal:nth-child(6) { transition-delay: .33s }
.aef-hero .aef-reveal:nth-child(7) { transition-delay: .40s }
.aef-hero .aef-reveal:nth-child(8) { transition-delay: .47s }

/* Dentro l'editor di Elementor le animazioni non devono nascondere nulla:
   senza questa regola la sezione appare vuota in fase di modifica.
   È la trappola già vista sul progetto Giulia Campolo. */
body.elementor-editor-active .aef-reveal {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .aef-reveal { opacity: 1; transform: none; transition: none; }
  .aef-unit__value.is-tick { animation: none; }
  .aef-btn { transition: none; }
}

/* =========================================================================
   TABLET — non presente nel Figma: interpolazione fra le due versioni.
   Da far approvare prima della consegna.
   ========================================================================= */
@media (max-width: 1100px) {
  .aef-hero__title { font-size: clamp(34px, 5vw, 60px); line-height: 1.08; }
  .aef-hero__lead  { font-size: 17px; line-height: 27px; }
}

/* =========================================================================
   MOBILE — valori dal frame 390×746
   ========================================================================= */
@media (max-width: 767px) {
  .aef-hero {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 16px;
    padding: 40px 24px 32px;
    min-height: 746px;
    text-align: left;
  }

  /*
   * Ridichiarata perché la riga qui sopra rimette il minimo: senza timer
   * l'altezza la fa il contenuto.
   *
   * Il rientro in basso cresce da 32 a 88: sulla pagina dei biglietti fra le
   * valutazioni e «Ne hanno parlato» restano 70px (32 di rientro più 38 che
   * avanzano dall'altezza minima). Tolta l'altezza minima quei 38 sparivano e
   * ne restavano 14 — troppo stretti, e comunque diversi dall'altra pagina.
   * Con 88 le due pagine misurano lo stesso vuoto.
   */
  .aef-hero--senza-timer { min-height: 0; padding-bottom: 88px; }

  .aef-hero::before {
    background-image: var(--aef-hero-bg-m, var(--aef-hero-bg, url('../img/hero-bg-900.webp')));
  }

  .aef-hero__badges { justify-content: flex-start; }

  .aef-badge {
    padding: 6px 12px;
    background: var(--ink);
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 1px;
    white-space: normal;
  }

  .aef-hero__eyebrow {
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 1px;
  }

  .aef-hero__title {
    font-size: 30px;
    line-height: 36px;
    letter-spacing: -0.3px;
  }

  .aef-hero__lead {
    font-size: 16px;
    line-height: 25px;
  }

  /* Valori letti dal frame mobile Partner, non interpolati. */
  .aef-hero__sub {
    font-size: 20px;
    font-weight: 700;
    line-height: 27px;
  }

  .aef-hero__note {
    font-size: 15px;
    line-height: 23px;
    text-align: left;
  }

  .aef-hero__cta { justify-content: flex-start; }

  .aef-btn {
    padding: 16px 30px;
    font-size: 16px;
    line-height: 20px;
  }

  .aef-hero__countdown {
    gap: 10px;
    justify-content: flex-start;
  }

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

  /* Su mobile le quattro unità stanno in un unico riquadro col bordo verde */
  .aef-hero__units {
    gap: 10px;
    padding: 7px 14px;
    border: 1px solid var(--green-bright);
    border-radius: 8px;
    background: var(--surface);
  }

  .aef-unit {
    flex-direction: row;
    align-items: baseline;
    gap: 1px;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .aef-unit__value {
    font-size: 17px;
    font-weight: 800;
    line-height: 22px;
    letter-spacing: 0.3px;
  }

  .aef-unit__label {
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0;
  }

  .aef-hero__ratings {
    gap: 16px;
    justify-content: flex-start;
  }

  .aef-hero__ratings img { height: 40px; }
}

/* =========================================================================
   IMPAGINAZIONE «PARTNER» — frame 🖥 Landing Partner — V1.2, desktop 1440×807
   Il disegno della hero Partner non è quello della landing biglietti: cambiano
   i margini della sezione, la larghezza del contenuto, **tutte** le distanze
   fra i blocchi e la velatura sopra la fotografia.
   Sta in fondo al file perché deve poter scavalcare le regole di serie, che
   hanno lo stesso peso di selettore: a parità di peso decide l'ordine.
   Ogni numero qui sotto è letto dal frame, nessuno è a occhio.
   ========================================================================= */

.aef-hero--partner {
  /* Figma: padding 80/100/80/100. Il contenuto risulta largo 1240. */
  padding: 80px 100px;
  /* Le distanze non sono uniformi: si azzera il gap e si danno una per una. */
  gap: 0;
  /* Il frame è alto 807 con il contenuto (545) centrato: senza questa riga la
     sezione si accorcia a 709, perché la Partner non ha il conto alla rovescia
     e `--senza-timer` azzera il minimo. Sta dopo quella regola nel file, quindi
     la scavalca. */
  min-height: 807px;
}

/* Velatura: nel frame Partner parte **scura** (94%), si apre a metà (72% al
   42%) e si richiude in fondo (97%). Quella di serie fa il contrario — parte
   al 45% e scurisce — ed è il motivo per cui la fotografia si vedeva nel punto
   sbagliato. */
.aef-hero--partner::after {
  background: linear-gradient(
    180deg,
    rgba(3, 15, 15, 0.94) 0%,
    rgba(3, 15, 15, 0.72) 42%,
    rgba(3, 15, 15, 0.97) 100%
  );
}

/* Distanze fra i blocchi, dagli spaziatori del frame: 22 · 18 · 20 · 34 · 34 */
.aef-hero--partner .aef-hero__title  { margin-top: 22px; max-width: 1180px; }
.aef-hero--partner .aef-hero__sub    { margin-top: 18px; max-width: 1040px; }
.aef-hero--partner .aef-hero__lead   { margin-top: 20px; max-width: 760px; }
.aef-hero--partner .aef-hero__cta    { margin-top: 34px; gap: 14px; }
/* Recensioni. Nel frame i due riempimenti sono scaleMode FIT: l'immagine entra
   nel rettangolo tenendo le proporzioni e resta centrata, quindi si vede meno
   del rettangolo e lo spazio fra i due loghi è più largo del gap dichiarato.
   I 28 del frame sono lo spazio fra i **rettangoli**; quello che si vede fra i
   due loghi è 28 + 1,17 + 17,75 = 46,92. In pagina le immagini sono già
   l'inchiostro (altezza fissa, larghezza automatica), quindi il gap CSS deve
   essere quello visto, non quello dei rettangoli.
   Il `margin-right` non è un ritocco a occhio: il FIT lascia 1,17px liberi
   attorno a Trustpilot e 17,75 attorno a Google, quindi nel frame l'inchiostro
   della coppia è 8,3px più a sinistra del centro della sezione. Con
   `align-items: center` il margine destro sposta la fila esattamente di
   quei 8,3 e il primo logo cade a 572,17 come nel frame. */
.aef-hero--partner .aef-hero__ratings {
  margin-top: 34px;
  gap: 46.92px;
  margin-right: 16.6px;
}

/* Badge: nel frame è 311×32 con testo 12/16 e spaziatura 1. Di serie è più
   grande (14/20, spaziatura 2,5) e usciva 406×38.
   Cambiano anche i colori: fondo nero al 60% e bordo **verde al 25%**, mentre
   di serie il fondo è verde scurissimo pieno e il bordo bianco al 40%. */
.aef-hero--partner .aef-badge {
  padding: 8px 18px;
  /* Il vuoto fra 📍 e «5-6», che valeva 6px di troppo in larghezza.

     Nel frame la pillola ha **un figlio solo**: un nodo TEXT che contiene già
     l'emoji dentro la stringa — «📍 5-6 DICEMBRE 2026 — MALPENSA FIERE»
     (desktop 100:574 → 100:575 «label» largo 275; telefono 100:1874 → 100:1875
     largo 255). Con un figlio solo l'itemSpacing 8 del frame non si applica mai,
     e sul frame per telefono non è nemmeno dichiarato: fra l'emoji e il testo
     c'è soltanto lo spazio normale della stringa.
     In pagina però WordPress sostituisce il carattere 📍 con un
     `<img class="emoji">` (wp_staticize_emoji): la pillola, che è un flex, si
     ritrova due figli invece di uno e il `gap: 8px` di serie — inerte nel Figma —
     diventa vero. Da lì i 6px in più: 316,92 invece di 311 e 289,02 invece di 283.

     Il gap si azzera, e `pre-wrap` tiene lo spazio della stringa, che altrimenti
     si mangerebbe stando all'inizio del secondo pezzo: così l'emoji e il testo
     restano staccati come nel frame, ma dello spazio del carattere e non di 8px.
     Risultato misurato: 312,23 e 284,14.
     `pre-wrap` e non `pre` di proposito: sotto i 360 la pillola deve poter
     ancora andare a capo, come le lascia fare `white-space: normal` della regola
     di serie per telefono — verificato a 320, dove resta 272×42 identica.
     Se un giorno l'emoji tornasse un carattere vero, questa regola non fa
     danno: con un figlio solo il gap non si applica comunque. */
  gap: 0;
  white-space: pre-wrap;
  /* Nel frame lo stroke è INSIDE: sta **dentro** la pillola e non la allarga.
     Reso con `border` cresceva di 2px in larghezza e in altezza — 34 invece di
     32 — e quei 2px risalivano fino all'altezza del contenuto. `outline` con
     scostamento negativo disegna lo stesso filo senza toccare le misure. */
  border: 0;
  outline: 1px solid rgba(0, 226, 123, 0.25);
  outline-offset: -1px;
  background: rgba(3, 15, 15, 0.6);
  /* Il frame dice 12/16. Il cliente ha chiesto «circa 2px in più, solo su
     desktop» (5 settembre): qui sono 14/18, e sul telefono la regola sotto i
     767 rimette 11/15. Scostamento voluto dal disegno.
     Il valore sta **in fondo al blocco** e non in cima: dichiararlo due volte
     nello stesso blocco fa vincere l'ultimo, e per un giro il corpo è rimasto
     a 12 mentre il foglio diceva 14 (errore 104). */
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 1px;
}

/* Bottone: stesso rimedio del badge per lo stroke INSIDE, più l'alone.

   L'alone: `.elementor a { box-shadow: none }` di frontend.min.css pesa (0,1,1)
   e scavalcava `.aef-btn` di questo file, che pesa (0,1,0) — il pulsante in
   pagina era spento mentre nel frame ha tre ombre. Qui il selettore pesa (0,2,0)
   e vince sul foglio di Elementor senza `!important`. Le tre ombre sono quelle
   del componente «Button / CTA — Desktop»: alone stretto, alone largo, luce
   interna in alto. */
.aef-hero--partner .aef-btn {
  border: 0;
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: -1px;
  /* L'alone sta in una variabile, e non scritto a mano dentro `box-shadow`,
     perché l'anello di fuoco da tastiera (più sotto) deve **sommarsi** a queste
     tre ombre invece di sostituirle. Così l'anello non ripete un solo numero
     dell'alone: prende quello dello stato in cui il pulsante si trova. */
  --aef-alone:
    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);
  box-shadow: var(--aef-alone);
}

/* Gli stati vanno ridichiarati: `.aef-btn:hover` pesa (0,2,0) come la regola qui
   sopra, e stando prima nel file perderebbe. Con (0,3,0) l'ordine non conta più. */
.aef-hero--partner .aef-btn:hover,
.aef-hero--partner .aef-btn:focus,
.aef-hero--partner .aef-btn:active {
  outline-color: rgba(255, 255, 255, 0.55);
  --aef-alone:
    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);
  box-shadow: var(--aef-alone);
}

/* L'anello di fuoco da tastiera.

   Qui l'`outline` è già occupato: fa da tratto INSIDE del Figma sul bordo del
   pulsante. Disegnare l'anello con un altro `outline` — come faceva la regola
   di serie e come faceva questa fino a ieri — significa cancellare quel filo
   bianco per tutto il tempo in cui il pulsante ha il fuoco.
   L'anello si disegna quindi con `box-shadow`, che si somma alle ombre già
   presenti separandole con una virgola: il filo INSIDE resta al suo posto,
   l'alone dello stato resta al suo posto, e sopra a tutti si aggiunge il
   cerchio verde da 3px.
   Il selettore pesa (0,3,0) e sta dopo lo stato :focus, che pesa altrettanto:
   così vince l'ordine e l'anello non se lo mangia nessuno. */
.aef-hero--partner .aef-btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--green-bright),
    var(--aef-alone);
}

/* La nota sotto il pulsante fa parte del blocco «cta + nota», che nel frame ha
   spazio 14 fra bottone e riga di testo: già impostato sopra con il gap. */
.aef-hero--partner .aef-hero__note { margin: 0; }

@media (max-width: 1100px) {
  .aef-hero--partner { padding: 64px 40px; }
}

@media (max-width: 767px) {
  /* Frame mobile Partner 390×700: margini 40/24 e altezza minima 700, non 807 —
     quella è del frame da computer e su telefono lasciava 107px di vuoto.

     `justify-content: center`: il frame mobile tiene il contenuto **centrato**
     fra i due rientri (52 sopra e 52 sotto). La regola di serie per telefono lo
     appoggia in alto, e in pagina restava una fascia morta di 70px sotto i
     loghi mentre sopra non ce n'era nessuna. Da quella sola riga nascevano sette
     scarti di quota: badge, h1, sub, body, cta, nota e recensioni. */
  .aef-hero--partner {
    padding: 40px 24px;
    min-height: 700px;
    justify-content: center;
  }

  /* Il testo dei pulsanti, sul telefono, più grande — chiesto dal cliente il 3
     settembre: «va messo più grande così da occupare meglio lo spazio nel
     pulsante ed essere più visibile». Il frame dice 16, quindi è uno
     scostamento voluto.

     Non si tocca `.aef-btn` in generale: quella classe la usano anche le due
     landing già pubblicate. Qui sono elencate le sole sezioni della Partner —
     `--partner` e `--colonna` sono varianti, le altre cinque esistono solo su
     questa pagina.

     Perché `clamp` e non un numero: l'etichetta più lunga è «SCOPRI COME
     DIVENTARE PARTNER», che a corpo 16 misura 282,4. Su un telefono da 390 lo
     spazio dentro il pulsante era 294 (rientri 24 per lato), quindi a 17 il
     testo andava a capo e il pulsante passava da 47 a 72 di altezza. Portando i
     rientri a 16 lo spazio sale a 310 e il corpo può crescere con lo schermo:
     ~16,8 su un 390, 18 su un 430, e resta su una riga.
     Il minimo è 15,5 e non 16 apposta: a 360 lo spazio è 280 e a corpo 16
     l'etichetta ne chiede 282,4 — due righe. A 15,5 ne chiede 273,9 e ci sta.
     Sotto i 340 va a capo comunque, e ci andava anche prima.

     La classe è ripetuta (`.aef-btn.aef-btn`) per una ragione precisa: ogni
     sezione ridefinisce `padding: 16px 24px` con un selettore che pesa quanto
     questo, e i loro fogli vengono caricati dopo. A parità di peso vince
     l'ultimo, e i rientri restavano 24: il corpo cresceva, lo spazio no, e il
     testo andava a capo lo stesso. */
  .aef-hero--partner .aef-btn.aef-btn,
  .aef-confronto .aef-btn.aef-btn,
  .aef-pubblico .aef-btn.aef-btn,
  .aef-bento--colonna .aef-btn.aef-btn,
  .aef-past .aef-btn.aef-btn,
  .aef-pacchetti .aef-btn.aef-btn,
  .aef-formp .aef-btn.aef-btn {
    padding-inline: 16px;
    font-size: clamp(15.5px, 4.3vw, 18px);
  }

  /* Il badge per telefono è più piccolo (11/15 e rientri 6/14). Senza questa
     regola vinceva `.aef-hero--partner .aef-badge` di sopra, che pesa (0,2,0)
     contro (0,1,0) della regola per telefono: a parità di media query decide il
     peso, e sul telefono il badge prendeva i valori del computer — 36px più
     largo del frame. */
  .aef-hero--partner .aef-badge {
    padding: 6px 14px;
    font-size: 11px;
    line-height: 15px;
  }

  .aef-hero--partner .aef-hero__title   { margin-top: 16px; }
  .aef-hero--partner .aef-hero__sub     { margin-top: 12px; }

  /* Il paragrafo per telefono è 15/23, non 16/25: quelli sono i valori della
     landing biglietti e qui mancava l'eccezione. */
  .aef-hero--partner .aef-hero__lead {
    margin-top: 14px;
    font-size: 15px;
    line-height: 23px;
  }

  /* L'a-capo dopo «con più» è scritto a mano nel frame **da computer**; nel
     frame per telefono non c'è. Il testo arriva dal pannello con un ritorno a
     capo dentro, `nl2br` lo trasforma in un <br> valido a tutte le larghezze, e
     a 390 spezzava la seconda riga a metà lasciando la terza lunghissima.
     Qui il <br> viene spento solo sul telefono: il ritorno a capo del sorgente
     resta e diventa uno spazio normale, quindi le parole non si attaccano. */
  .aef-hero--partner .aef-hero__lead br { display: none; }

  .aef-hero--partner .aef-hero__cta     { margin-top: 26px; gap: 12px; }

  /* Nel frame per telefono il bottone è FILL: largo tutti i 342 del contenuto.
     Con i rientri giusti l'etichetta ci sta in una riga sola e la cornice non
     avrebbe più bisogno di stringersi, quindi senza `width` uscirebbe larga 331.
     I rientri sono 24, non 30: con 30 restavano 280px per un'etichetta che ne
     chiede 283, e «SCOPRI COME DIVENTARE PARTNER» andava a capo in due righe.
     Le tre ombre qui sono quelle del componente per telefono, lette sul nodo
     100:1886 «Button / CTA — Mobile» di figma/raw/partner-mobile.json:
     DROP_SHADOW radius 16 spread 1, DROP_SHADOW radius **36** spread 5,
     INNER_SHADOW radius 2 offset y 1. La seconda sfocatura qui diceva 40:
     era l'unico numero di questo blocco che non veniva dal frame, e non se ne
     accorgeva nessuno perché anche l'atteso del misuratore diceva 40. Gli altri
     CTA per telefono del file (100:1868, 100:2294) dichiarano gli stessi 36. */
  .aef-hero--partner .aef-btn {
    width: 100%;
    padding: 16px 24px;
    --aef-alone:
      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);
    box-shadow: var(--aef-alone);
  }

  /* Il blocco «cta + nota» del frame mobile appoggia i figli a sinistra
     (`counterAxisAlignItems` assente su un frame verticale vuol dire MIN), e
     la nota è HUG: parte a 24, cioè **a filo del bordo sinistro del pulsante**,
     che è largo tutta la colonna. Fino al 3 settembre stava centrata — il
     testo partiva a 88,6 invece che a 24 — e nessuna misura lo diceva perché
     il misuratore guardava il centro dell'inchiostro contro un'attesa presa
     dalla pagina, non dal frame. Nelle altre sezioni il blocco è
     `counterAxisAlignItems: CENTER` e la nota resta centrata: è una differenza
     del disegno, non una svista. */
  .aef-hero--partner .aef-hero__note {
    line-height: 22px;
    text-align: left;
  }

  /* Loghi alti 42 come i rettangoli del frame, e spazio visto 37 (22 fra i
     rettangoli più 0,59 e 14,41 che il FIT lascia liberi ai lati).
     Il margine destro del computer va azzerato: qui la fila è appoggiata a
     sinistra e sposterebbe soltanto la cornice. */
  .aef-hero--partner .aef-hero__ratings {
    margin-top: 26px;
    margin-right: 0;
    gap: 37px;
  }

  .aef-hero--partner .aef-hero__ratings img { height: 42px; }
}