/* =========================================================================
   Alzati e Fattura — sezione P04 PERCHÉ AFL (confronto) · landing Partner
   Frame «Perché AFL — argomento» 1440×1133 [100:637]
         «Perché AFL — mobile»    390×1243  [204:536]   (Figma 31/08 ore 22:12)
   Ogni valore è letto dal file, nessuno è a occhio.

   Revisione del 01/09/2026 — che cosa è cambiato e perché
   -------------------------------------------------------
   · I 18px fra le intestazioni e la prima riga non arrivavano mai: la regola
     era `.aef-confronto__riga:first-of-type`, ma il primo `div` dentro la
     tabella è `.aef-confronto__intestazioni`, quindi nessuna riga è mai «prima
     del suo tipo» e il selettore trovava 0 elementi. Ora lo spazio lo dà il
     margine sotto delle intestazioni, che non dipende dall'ordine dei fratelli.
   · Le due velature erano al 13% e al 16%, il frame le vuole al 30% e al 34%.
     Vanno insieme al punto qui sotto: i cerchietti bianchi si vedono **perché**
     sotto c'è una velatura forte.
   · Cerchietti delle icone e righe divisorie a #FFFFFF (cambio del 31/08).
     Attenzione: sul telefono la riga fra i due elenchi è rimasta #E2E8E5.
   · Il bordo della tabella nel frame è 1px INSIDE con una sfumatura
     #F04F4F → #00E27B: orizzontale sul desktop, verticale sul telefono. Non si
     può rendere con `border` (mangia un pixel al contenuto e sposta gli a capo)
     né con `outline` (che non accetta sfumature): è un anello sovrapposto,
     disegnato con una maschera, che non tocca la disposizione.
   · Il riquadro «VS» del telefono non esiste più nel frame: al suo posto una
     riga sottile 302×1.
   · Sul telefono l'introduzione è a bandiera sinistra, non centrata.
   ========================================================================= */

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

.aef-confronto {
  --ink: #030F0F;
  --green-bright: #00E27B;
  --green-mid: #00A05C;
  --muted: #C7D2CC;
  --dim: #7A8A82;
  --scuro: #22312B;
  /* Sul desktop le divisorie sono bianche (cambio del 31/08): si vedono perché
     sopra al bianco della tabella corrono le due velature. */
  --linea: #FFFFFF;
  /* Sul telefono la riga fra i due elenchi è rimasta grigia. */
  --linea-tel: #E2E8E5;
  --rosso: #F04F4F;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Frame: 110 sopra e sotto, 100 ai lati. */
  padding: 110px 100px;
  background: var(--ink);
  text-align: center;
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- L'effetto «matrix» sul fondo ----------
   Stesso disegno della sezione Speaker e stesso file (`speaker/numbers.svg`,
   rigenerabile con `scripts/matrix-svg.mjs`): il frame «Number» è identico,
   1463×992 spostato di -12px in orizzontale. Cambia solo dove attacca —
   a +543 su una sezione di 1133, quindi una fascia in fondo alta 590.
   Sul telefono non c'è: il frame ha 79 nodi e nessuno si chiama «Number». */
.aef-confronto--matrix::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 590px;
  z-index: -1;
  background-image: url('../img/speaker/numbers.svg');
  background-size: 1463px 992px;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: .55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 520px);
  mask-image: linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0) 520px);
}

/* ---------- Introduzione ----------
   Le distanze del frame sono 24 · 14 · 14 · 52 · 44, scritte come spaziatori:
   niente `gap` unico, si danno una per una. */
.aef-confronto__titolo {
  margin: 0;
  /* La sezione è un flex in colonna con `align-items: center`, quindi ogni figlio
     si stringe sul proprio contenuto invece di prendere la colonna. Al titolo
     serve la larghezza piena — 872 sul computer, 342 sul telefono — perché è
     quella che il frame dichiara e perché è lei a decidere dove va a capo il
     testo. Senza, il blocco misurava 859 e 292. */
  width: 100%;
  max-width: 872px;
  color: #FFFFFF;
  font-size: 34px;
  font-weight: 800;
  line-height: 42px;
  letter-spacing: -0.3px;
}

.aef-confronto__testo {
  margin: 24px 0 0;
  max-width: 900px;
}

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

/* Fra i due capoversi il frame lascia 14. */
.aef-confronto__testo p + p { margin-top: 14px; }

.aef-confronto__claim {
  margin: 14px 0 0;
  /* Come il titolo: la sezione centra i figli e questo testo, corto, si
     stringeva sul contenuto. Il frame lo vuole largo quanto la colonna — 900
     sul computer, 342 sul telefono — e sul telefono, a bandiera sinistra,
     partiva a 78 invece che a 24 (errore 91). */
  width: 100%;
  max-width: 900px;
  color: var(--green-bright);
  /* Il frame dice 16/26, cioè più piccolo dei due capoversi sopra (19/30). Il
     cliente ha chiesto che sia **uguale al testo che lo precede** (3 settembre):
     è uno scostamento voluto dal disegno, non una svista. Sul telefono il
     frame li fa già uguali (15 e 15) e lì non cambia niente. */
  font-size: 19px;
  font-weight: 700;
  line-height: 30px;
}

/* ---------- Gli a capo decisi dal disegno, solo sul telefono ----------
   Nel frame mobile il titolo e il claim vanno a capo dove dice il disegno: nel
   testo ci sono dei separatori di riga U+2028 — due nel titolo («Sei mesi di
   lavoro della / tua rete vendita in / soli due giorni») e uno nel claim. Gli
   stessi due testi nel frame da computer stanno su una riga sola e di
   separatori non ne hanno: l'a capo vale **solo** sotto i 767px.

   Nessuna larghezza li riproduce da sola, e non è un'impressione: alle misure
   del frame «Sei mesi di lavoro della» occupa 292.4px e «tua rete vendita in
   soli» 283.4, quindi la colonna dovrebbe essere insieme più larga di 292.4 e
   più stretta di 283.4. Lo stesso vale per il claim. Servono i separatori.

   Il campo del pannello li porta così come stanno nel Figma, il template li
   trasforma in un `<br>` con questa classe, e qui sopra i 767px il `<br>`
   sparisce: un elemento con `display: none` non genera riquadri e non spezza
   la riga, quindi il testo da computer torna filato. */
@media (min-width: 768px) {
  /* Il selettore parte da `.aef-confronto` come tutti gli altri di questo
     foglio: la sezione non deve mai poter toccare niente fuori da sé. */
  .aef-confronto .aef-confronto__acapo-tel { display: none; }
}

/* ---------- La tabella ---------- */
.aef-confronto__tabella {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1240px;
  margin-top: 52px;
  padding: 36px 44px;
  border-radius: 24px;
  background-color: #FFFFFF;
  /* Le due velature del frame: rossa a sinistra (30% → 0%) e verde a destra
     (0% → 34%), ciascuna larga metà tabella — 620 su 1240. Sono due rettangoli
     sovrapposti al bianco, non un gradiente solo. */
  background-image:
    linear-gradient(90deg, rgba(240, 79, 79, 0.3) 0%, rgba(240, 79, 79, 0) 100%),
    linear-gradient(90deg, rgba(0, 226, 123, 0) 0%, rgba(0, 226, 123, 0.34) 100%);
  background-size: 50% 100%, 50% 100%;
  background-position: left top, right top;
  background-repeat: no-repeat, no-repeat;
}

/* Il bordo della scheda. Nel frame è 1px con allineamento INSIDE e una
   sfumatura #F04F4F → #00E27B da sinistra a destra.
   Non è reso con `border` perché il bordo toglierebbe due pixel al contenuto e
   sposterebbe gli a capo dentro le celle; non è reso con `outline` perché
   l'outline non accetta sfumature. È un anello sovrapposto: un rettangolo
   grande quanto la scheda, riempito con la sfumatura e mascherato in modo che
   resti visibile solo la cornice di 1px. Non occupa spazio e non intercetta il
   mouse, quindi la disposizione resta identica. */
.aef-confronto__tabella::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, #F04F4F 0%, #00E27B 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  /* Ripetuto **dopo** la scorciatoia `mask`: quella riazzera il composite
     webkit dichiarato più sopra, e su un Safari vecchio che non conosce
     `mask-composite` l'anello si dipingerebbe come un rettangolo sfumato pieno
     sopra tutta la scheda. Su Chrome e sul Safari recente non cambia niente. */
  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* Intestazioni e righe condividono la stessa griglia a tre colonne: due celle
   larghe uguali e una colonna in mezzo. Con `1fr auto 1fr` e 24 di spazio i
   conti del frame tornano da soli — 520 per le celle delle righe (colonna
   centrale 64) e 508 per quelle delle intestazioni (colonna centrale 88). */
.aef-confronto__intestazioni,
.aef-confronto__riga {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  text-align: left;
}

/* Fra intestazioni e prima riga il frame lascia 18.
   Lo spazio sta qui e non su `.aef-confronto__riga:first-of-type`: quella
   regola non agganciava niente, perché il primo `div` dentro la tabella sono
   le intestazioni e nessuna riga è mai «prima del suo tipo». */
.aef-confronto__intestazioni { margin-bottom: 18px; }

.aef-confronto__vuoto { width: 88px; }

.aef-confronto__col {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 26px;
  letter-spacing: 3.57px;
}

/* Il colore di questa colonna è cambiato col Figma del 1º settembre: prima
   l'intestazione e i testi erano grigi come tutto il resto, ora l'intestazione
   è rossa e i testi sono scuri quanto quelli della colonna di destra. Non è
   solo fedeltà: sul rosa chiaro del fondo quel grigio dava 2,6 di contrasto
   contro i 4,5 richiesti, e col colore nuovo arriva a dieci. */
.aef-confronto__col--no { color: var(--rosso); }
.aef-confronto__col--si { color: var(--green-mid); }

.aef-confronto__riga {
  padding: 20px 0;
}

/* La riga divisoria è un rettangolo da 1px fra una riga e l'altra: qui è il
   bordo superiore, così non ne resta una appesa in fondo alla tabella — nel
   frame sono quattro, nessuna sopra la prima riga né sotto l'ultima. */
.aef-confronto__riga + .aef-confronto__riga {
  border-top: 1px solid var(--linea);
}

.aef-confronto__cella {
  display: flex;
  /* Nel frame il cerchietto è centrato sull'altezza della cella: in quella a
     due righe (52) sta a 17 dal bordo alto, non a 4. */
  align-items: center;
  gap: 14px;
}

.aef-confronto__icona {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

.aef-confronto__cella-testo {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
}

.aef-confronto__cella--no .aef-confronto__cella-testo { color: var(--scuro); }
.aef-confronto__cella--si .aef-confronto__cella-testo { color: var(--scuro); }

/* Nelle celle di destra il tratto in grassetto ha un colore suo, più scuro del
   testo attorno: #030F0F contro #22312B. A sinistra invece coincide col testo,
   e lì non si dichiara niente. */
.aef-confronto__cella--si .aef-confronto__cella-testo strong { color: var(--ink); }

.aef-confronto__freccia {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Nel frame il riquadro è 64×12 e il disegno dentro è 60×10, centrato.
     Non cambia l'altezza della riga, che la decidono le celle (26 o 52). */
  width: 64px;
  height: 12px;
}

/* La riga fra i due elenchi esiste solo nel frame mobile: su computer le due
   colonne stanno affiancate e non c'è niente da separare. */
.aef-confronto__separatore { display: none; }

/* ---------- Pulsante ---------- */
.aef-confronto__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 44px;
}

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

/* ---------- Il pulsante dentro questa sezione ----------
   Due correzioni che riguardano `.aef-btn` (hero.css) e che qui sono limitate
   alla sezione, perché quella classe la usano anche le pagine del cliente.
   Il rimedio buono è in hero.css e vale per tutte le sezioni.

   1. Nel frame lo stroke del pulsante è 1px INSIDE. Reso con `border` su un
      elemento a larghezza automatica aggiunge 2px in larghezza e 2 in altezza
      (423×65 diventava 424.8×67): va reso con outline e scarto negativo.
   2. `.elementor a { box-shadow: none }` (0-1-1) spegne i tre aloni del frame,
      dichiarati da `.aef-btn` (0-1-0). Per riaccenderli serve almeno 0-2-0;
      ma 0-2-0 scavalcherebbe anche `.aef-btn:hover` (stessa specificità, e
      questo foglio viene dopo), quindi passaggio del mouse e fuoco sono
      ridichiarati qui sotto con gli stessi valori di hero.css. */
.aef-confronto .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 — e perché sul telefono il frame vuole due
     raggi diversi, che così si ridichiarano in un posto solo.
     Stesso nome e stessa tecnica di `hero.css`: le due copie locali restano
     leggibili come una convenzione unica. */
  --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);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), background-color .18s ease, outline-color .18s ease, box-shadow .18s ease;
}

.aef-confronto .aef-btn:hover,
.aef-confronto .aef-btn:focus,
.aef-confronto .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 questa
   regola fino a ieri — cancella 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) come lo stato :focus qui sopra e sta dopo di lui:
   così vince l'ordine e l'anello non se lo mangia nessuno. */
.aef-confronto .aef-btn:focus-visible {
  box-shadow:
    0 0 0 3px var(--green-bright),
    var(--aef-alone);
}

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

/* Dentro l'editor le animazioni non scattano: senza questa regola la sezione
   risulterebbe invisibile mentre la si modifica. */
body.elementor-editor-active .aef-confronto .aef-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .aef-confronto { padding: 80px 40px; }
  .aef-confronto__tabella { padding: 28px 24px; }
  .aef-confronto__col { font-size: 16px; letter-spacing: 2px; }
  .aef-confronto__vuoto { width: 40px; }
  .aef-confronto__freccia { width: 40px; }
}

/* =========================================================================
   MOBILE — frame «Perché AFL — mobile» 390×1243 [204:536]
   Le due colonne non stanno affiancate: diventano due elenchi impilati,
   separati da una riga sottile, e la freccia sparisce perché indicherebbe di
   lato una cosa che sta sotto.
   ========================================================================= */
@media (max-width: 767px) {
  /* Nel frame telefono tutta l'introduzione è a bandiera sinistra. */
  .aef-confronto { padding: 64px 24px; text-align: left; }

  /* La fascia di cifre sul telefono non c'è: 79 nodi nel frame, nessuno si
     chiama «Number». */
  .aef-confronto--matrix::before { content: none; }

  /* Valori del frame mobile, non interpolati dal computer. */
  .aef-confronto__titolo { font-size: 28px; line-height: 34px; }
  .aef-confronto__testo { margin-top: 16px; }
  .aef-confronto__testo p { font-size: 15px; line-height: 23px; }
  .aef-confronto__testo p + p { margin-top: 12px; }
  .aef-confronto__claim { margin-top: 12px; font-size: 15px; line-height: 21px; }

  .aef-confronto__tabella {
    margin-top: 32px;
    padding: 22px 20px;
    border-radius: 18px;
    /* Qui le due velature sono impilate, non affiancate, e non si dividono la
       scheda a metà: nel frame la rossa è alta 333 e attacca in cima, la verde
       è alta 375 e attacca in fondo — si sovrappongono per 65 nel mezzo, dove
       una è già sfumata a zero e l'altra non è ancora partita. */
    background-image:
      linear-gradient(180deg, rgba(240, 79, 79, 0.3) 0%, rgba(240, 79, 79, 0) 100%),
      linear-gradient(180deg, rgba(0, 226, 123, 0) 0%, rgba(0, 226, 123, 0.34) 100%);
    background-size: 100% 333px, 100% 375px;
    background-position: top left, bottom left;
  }

  /* Sul telefono la sfumatura del bordo gira di 90 gradi: rosso in alto,
     verde in basso. */
  .aef-confronto__tabella::after {
    background: linear-gradient(180deg, #F04F4F 0%, #00E27B 100%);
  }

  /*
   * Sul telefono il frame non è una tabella appaiata: sono **due elenchi
   * impilati** — prima tutti «gli altri eventi», poi una riga sottile, poi
   * quelli di Alzati e Fattura. Le righe diventano trasparenti al layout con
   * `display: contents`, così le celle diventano figlie dirette della tabella e
   * si possono raggruppare con `order` senza toccare il markup.
   *
   * Il passo: nel frame la tabella è un contenitore con spazio 16 che tiene
   * due gruppi — «altri eventi» e «alzati e fattura live» — e in mezzo la
   * riga; dentro ciascun gruppo l'elenco delle voci ha spazio 14. Qui i due
   * gruppi non esistono come elementi (le righe sono `display: contents`),
   * quindi lo spazio del contenitore resta 16 come nel frame e le voci dalla
   * seconda in poi si riprendono i 2px di differenza.
   */
  .aef-confronto__tabella {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .aef-confronto__riga + .aef-confronto__riga .aef-confronto__cella { margin-top: -2px; }

  .aef-confronto__intestazioni,
  .aef-confronto__riga { display: contents; }

  .aef-confronto__col--no    { order: 1; }
  .aef-confronto__cella--no  { order: 2; }
  .aef-confronto__separatore { order: 3; }
  .aef-confronto__col--si    { order: 4; }
  .aef-confronto__cella--si  { order: 5; }

  .aef-confronto__vuoto,
  .aef-confronto__freccia { display: none; }

  /* Senza griglia le righe non hanno più bordo né spaziatura propria: lo
     spazio lo dà il `gap` della colonna. */
  .aef-confronto__riga { padding: 0; }
  .aef-confronto__riga + .aef-confronto__riga { border-top: 0; }

  .aef-confronto__col { font-size: 16px; line-height: 22px; letter-spacing: 2.67px; }

  /* La riga fra i due elenchi: 302×1, e qui è rimasta #E2E8E5 — il passaggio
     al bianco del 31/08 riguarda solo le divisorie del desktop. */
  .aef-confronto__separatore {
    display: block;
    height: 1px;
    background: var(--linea-tel);
  }

  .aef-confronto__cella { gap: 10px; }
  .aef-confronto__icona { flex: 0 0 16px; width: 16px; height: 16px; }
  .aef-confronto__cella-testo { font-size: 14px; line-height: 21px; }

  /* Il pulsante prende tutta la colonna: senza `align-self` il blocco si
     stringerebbe sul contenuto e con esso il pulsante. */
  .aef-confronto__cta { margin-top: 32px; gap: 12px; align-self: stretch; }

  /* 16/24 come nel frame: con i 30 di hero.css restavano 280px per una scritta
     che ne misura 283, e l'etichetta andava a capo.

     Gli aloni sono quelli del componente «Button / CTA — Mobile» (212:1084):
     16px con allargamento 1 e 36px con allargamento 5, non i 18/1 e 44/6 del
     frame da computer. La luce interna in alto è la stessa nei due frame. */
  .aef-confronto .aef-btn {
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    line-height: 20px;
    --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);
  }

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

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

/* =====================================================================
   LA VARIANTE «PRIMA / DOPO»
   Scelta dal cliente il 5 settembre al posto della tabella affiancata.
   Non è nel frame: è uno scostamento voluto, e i testi restano quelli.

   Un pannello solo, due strati sovrapposti. La griglia delle righe sta sul
   pannello e i due strati la ereditano con `subgrid`: ogni coppia occupa la
   stessa traccia, alta quanto la più lunga delle due frasi, così le linee di
   separazione dei due lati cadono alla stessa quota — come nella tabella
   affiancata. Senza questo ogni strato faceva le sue altezze e i separatori
   si sfalsavano.

   A sinistra come va qui, a destra come vanno gli altri: il cursore parte
   chiuso e scopre il nostro lato entrando da sinistra.
   ===================================================================== */
.aef-confronto--prima-dopo .aef-confronto__pd {
  width: 100%;
  max-width: 1240px;
  margin-top: 52px;
  text-align: left;
}

.aef-confronto__pd-etichette {
  display: flex;
  justify-content: space-between;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}
.aef-confronto__pd-etichette .aef-confronto__col--no { color: var(--rosso); }
.aef-confronto__pd-etichette .aef-confronto__col--si { color: var(--green-bright); }

.aef-confronto__pd-box {
  position: relative;
  display: grid;
  /* Le due tracce agli estremi sono l'aria sopra e sotto: stanno nella griglia
     invece che nel padding, così gli strati arrivano ai bordi del pannello e
     il taglio del cursore resta pieno per tutta l'altezza. Il numero di righe
     lo passa il markup in `--aef-righe`: il pannello si compila dal repeater. */
  --aef-aria-y: 52px;
  --aef-aria-x: 48px;
  grid-template-columns: 1fr;
  grid-template-rows: var(--aef-aria-y) repeat(var(--aef-righe, 5), auto) var(--aef-aria-y);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
  outline: 1px solid rgba(255, 255, 255, .1);
  outline-offset: -1px;
  /* Il dito deve poter scorrere la pagina in verticale anche partendo da qui:
     solo il trascinamento orizzontale muove il cursore. */
  touch-action: pan-y;
}

.aef-confronto__pd-strato {
  grid-column: 1;
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  position: relative;
}

.aef-confronto__pd-strato--no {
  background: #140f11;
  color: #8d9590;
}
/* Una grana leggera, come una stampa vecchia: distingue il «prima» senza
   aggiungere un colore. */
.aef-confronto__pd-strato--no::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.aef-confronto__pd-strato--si {
  z-index: 2;
  background: radial-gradient(120% 140% at 100% 0%, #0f5a38 0%, var(--green-deep, #0A3B26) 45%, #062a1c 100%);
  color: #fff;
  clip-path: inset(0 calc(100% - var(--aef-pd, 50%)) 0 0);
}
.aef-confronto__pd-strato--si::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 226, 123, .28) 0%, transparent 70%);
}

.aef-confronto__pd-riga {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 0 18px;
  align-items: start;
  margin-inline: var(--aef-aria-x);
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 19px;
  line-height: 28px;
  min-height: 92px;
}
.aef-confronto__pd-riga:last-child { border-bottom: 0; }
.aef-confronto__pd-riga p { margin: 0; }
/* Ogni strato tiene il testo nella **sua** metà: a riposo si leggono due
   colonne intere, e il taglio delle parole c'è solo mentre si trascina. */
.aef-confronto__pd-strato--no .aef-confronto__pd-riga { padding-left: calc(50% + 24px); }
.aef-confronto__pd-strato--si .aef-confronto__pd-riga { padding-right: calc(50% + 24px); }
.aef-confronto__pd-strato--no strong { color: #b6bdb8; font-weight: 600; }
.aef-confronto__pd-strato--si .aef-confronto__pd-riga { font-weight: 600; }
.aef-confronto__pd-strato--si strong { color: var(--green-bright); }

/* Le due icone: qui il tondo lo fa il foglio, non l'SVG. */
.aef-confronto__pd-riga .aef-confronto__icona {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 5px;
  margin-top: 2px;
  box-sizing: border-box;
}
.aef-confronto__pd-strato--no .aef-confronto__icona { background: rgba(240, 79, 79, .12); }
.aef-confronto__pd-strato--si .aef-confronto__icona { background: rgba(0, 226, 123, .16); }

.aef-confronto__pd-cursore {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 4;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
          appearance: none;
}
.aef-confronto__pd-linea {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--aef-pd, 50%);
  width: 2px;
  z-index: 3;
  transform: translateX(-1px);
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--green-bright) 12%, var(--green-bright) 88%, transparent);
}
.aef-confronto__pd-maniglia {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green-bright);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px rgba(0, 226, 123, .18), 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .2s;
}
.aef-confronto__pd-box:hover .aef-confronto__pd-maniglia,
.aef-confronto__pd-box.is-presa .aef-confronto__pd-maniglia { transform: translate(-50%, -50%) scale(1.06); }
/* L'anello di fuoco da tastiera: il cursore è trasparente, quindi si disegna
   sulla maniglia — se no chi arriva col Tab non vede dov'è. */
.aef-confronto__pd-cursore:focus-visible + .aef-confronto__pd-linea .aef-confronto__pd-maniglia {
  box-shadow: 0 0 0 4px var(--ink), 0 0 0 7px var(--green-bright), 0 10px 30px rgba(0, 0, 0, .45);
}

.aef-confronto__pd-aiuto {
  margin: 14px 0 0;
  text-align: center;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: .4px;
}

/* i due pulsanti del telefono, spenti sul computer */
.aef-confronto__pd-scelta { display: none; }

@media (max-width: 767px) {
  .aef-confronto--prima-dopo .aef-confronto__pd { margin-top: 32px; }
  /* Mezzo schermo per lato non basta a leggere niente: al posto del cursore
     due pulsanti, e i due strati si scambiano in dissolvenza. */
  .aef-confronto__pd-etichette,
  .aef-confronto__pd-cursore,
  .aef-confronto__pd-linea,
  .aef-confronto__pd-aiuto { display: none; }

  .aef-confronto__pd-scelta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin: 0 0 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
    outline: 1px solid rgba(255, 255, 255, .1);
    outline-offset: -1px;
  }
  .aef-confronto__pd-scelta button {
    appearance: none;
    border: 0;
    border-radius: 9px;
    padding: 12px 8px;
    background: transparent;
    color: var(--muted);
    font: 800 11px/1.25 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    transition: background .25s, color .25s;
    cursor: pointer;
  }
  .aef-confronto__pd-scelta button.is-on { color: var(--ink); }
  .aef-confronto__pd-scelta button[data-lato="no"].is-on { background: var(--rosso); }
  .aef-confronto__pd-scelta button[data-lato="si"].is-on { background: var(--green-bright); }

  .aef-confronto__pd-box { --aef-aria-y: 26px; --aef-aria-x: 20px; }
  .aef-confronto__pd-strato--no .aef-confronto__pd-riga,
  .aef-confronto__pd-strato--si .aef-confronto__pd-riga { padding-left: 0; padding-right: 0; min-height: 0; }
  .aef-confronto__pd-riga {
    grid-template-columns: 22px 1fr;
    gap: 0 12px;
    padding: 14px 0;
    font-size: 15px;
    line-height: 22px;
  }
  .aef-confronto__pd-riga .aef-confronto__icona { width: 20px; height: 20px; padding: 4px; margin-top: 1px; }
  .aef-confronto__pd-strato--si { clip-path: none; opacity: 0; transition: opacity .35s ease; }
  .aef-confronto__pd-box.is-si .aef-confronto__pd-strato--si { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .aef-confronto__pd-maniglia,
  .aef-confronto__pd-strato--si { transition: none; }
}