/* =========================================================================
   Alzati e Fattura — sezione P08 RECENSIONI PARTNER · landing Partner
   Frame «Recensioni partner» 1440×1592,5 [100:837] e
         «Recensioni partner — mobile» 390×2324 [100:2107] (31 agosto, 22:12).

   Niente stelle e niente marchio Trustpilot, a differenza della sezione
   recensioni della landing biglietti: qui sono testimonianze dette a voce e
   riportate per iscritto (indicazione del designer, commento del 26 agosto).
   ========================================================================= */

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

.aef-rp {
  --ink: #030F0F;
  --surface: #0B1D16;
  --green-bright: #00E27B;
  --muted: #C7D2CC;
  --dim: #7A8A82;
  --scuro: #22312B;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  /* Frame: niente margine sopra, 130 sotto, 100 ai lati. */
  padding: 0 100px 130px;
  background: var(--ink);
  font-family: 'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Nel frame desktop occhiello e titolo sono CENTER (lo erano anche nella
   revisione precedente, 13-46); sul telefono tornano a sinistra. */
.aef-rp__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 1240px;
  text-align: center;
}

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

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

/* Sul telefono il frame manda a capo il titolo **a mano**, fra «dei» e
   «nostri» (U+2028). Se il campo Titolo di Elementor porta quel capoverso il
   modello lo rende con un <br>: sul desktop il titolo deve restare su una riga
   sola, quindi lì il <br> si spegne. */
.aef-rp__title br { display: none; }

/* ---------- Valutazioni ---------- */
/* Blocco HUG centrato nella sezione (nel frame x 571, largo 298): niente
   `width: 100%`, ci pensa l'`align-items: center` della sezione. */
.aef-rp__ratings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

/* Nel frame le due insegne stanno dentro cornici **FIT** più larghe del
   disegno che contengono (Trustpilot 120×50, Google 150×50 con dentro un
   disegno da 114,5): è la cornice a decidere quanta aria resta fra le due.
   Qui si riproduce la cornice con una larghezza fissa e `object-fit: contain`,
   che è l'equivalente CSS del FIT di Figma. Con `width: auto` le due insegne
   restavano a 28px l'una dall'altra invece dei ~47 del frame. */
.aef-rp .aef-rp__rating {
  height: 50px;
  object-fit: contain;
  display: block;
}

/* La cornice si aggancia all'INSEGNA, non al posto che occupa nella riga:
   `data-insegna` lo scrive il modello dal nome del file (trustpilot-4-8,
   google-5-0). Con `:nth-child` bastava che il contenuto invertisse le due
   valutazioni perché Trustpilot prendesse in silenzio la cornice di Google.
   Se la chiave non corrisponde più, la larghezza torna automatica e il
   misuratore se ne accorge subito (voce «insegna N.w»). */
.aef-rp .aef-rp__rating[data-insegna^="trustpilot"] { width: 120px; }
.aef-rp .aef-rp__rating[data-insegna^="google"]     { width: 150px; }

/* ---------- Il riquadro del filmato ---------- */
.aef-rp__video {
  position: relative;
  width: 100%;
  max-width: 1240px;
  /* 1240×697,5 nel frame. */
  aspect-ratio: 1240 / 697.5;
  /* Il tratto del frame è INSIDE (1px, tratteggio 6/4): con `border` toglierebbe
     due pixel all'area interna e trascinerebbe con sé la didascalia. `outline`
     con offset negativo lo disegna dentro senza rubare spazio. */
  outline: 1px dashed rgba(0, 226, 123, 0.25);
  outline-offset: -1px;
  border-radius: 4px;
  background: var(--surface);
  overflow: hidden;
}

.aef-rp__play,
.aef-rp__video-vuoto {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.aef-rp__play { cursor: pointer; }

/* Il filmato aperto sul posto: prende tutto il riquadro, che ha già le
   proporzioni del frame (1240×697,5) e taglia gli angoli. Vedi `video.js`. */
.aef-rp__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.aef-rp .aef-rp__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Il tondo bianco col triangolo: 64px, bianco all'85%, come nel frame. */
.aef-rp__play-tondo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  transition: transform .2s ease, background-color .2s ease;
}

/* Il triangolo è l'icona «play» di lucide dentro un riquadro da 26 (20 sul
   telefono): con la griglia 24 del disegno originale il glifo viene 15,17×19,5,
   che è quello che dichiara il frame. Lo spessore del tratto è 2,5 in pixel
   assoluti, quindi va riscalato con il riquadro. */
.aef-rp__play-icona {
  display: block;
  width: 26px;
  height: 26px;
  stroke-width: 2.3;
}

.aef-rp__play:hover .aef-rp__play-tondo,
.aef-rp__play:focus-visible .aef-rp__play-tondo {
  transform: scale(1.06);
  background: #FFFFFF;
}

/* L'anello di fuoco da tastiera. Il bottone del filmato riempie tutto il
   riquadro (`inset: 0`) e il riquadro ha `overflow: hidden`: l'anello che il
   browser disegnerebbe da solo sta FUORI dal bordo del bottone, cioè fuori dal
   riquadro, e verrebbe tagliato via tutto — chi arriva col tabulatore non
   vedrebbe niente. Qui l'anello si disegna DENTRO, con scarto negativo, così
   resta nel ritaglio; e sul tondo se ne aggiunge un secondo, che dice dov'è il
   comando invece di limitarsi a cerchiare il riquadro.
   Sul tondo l'anello è una `box-shadow` e non un `outline`: le ombre si
   sommano separandole con una virgola, mentre l'outline del riquadro è già
   occupato dal tratto tratteggiato del frame. */
.aef-rp__play:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: -3px;
}

.aef-rp__play:focus-visible .aef-rp__play-tondo {
  box-shadow: 0 0 0 3px var(--green-bright), 0 0 0 6px rgba(3, 15, 15, 0.55);
}

/* La didascalia del frame, che resta finché il filmato non c'è: appoggiata in
   basso e centrata, non in cima. */
.aef-rp__caption {
  position: absolute;
  right: 16px;
  bottom: 15.5px;
  left: 16px;
  margin: 0;
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ---------- Le quattro testimonianze ---------- */
.aef-rp__schede {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
  max-width: 1240px;
}

.aef-rp__scheda {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Due classi: Elementor porta le immagini a `height: auto` con un selettore
   più forte di una sola (errore 32). */
.aef-rp .aef-rp__foto {
  width: 100%;
  aspect-ratio: 295 / 225;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Il ritaglio delle fotografie non è centrato nel frame: ogni fill dichiara un
   `imageTransform`, cioè quale porzione della sorgente si vede, e con il taglio
   al 50% si perde la testata del pannello alle spalle delle persone (fino a
   46px più in basso su Certitude). Le percentuali qui sotto sono ricavate da
   quella matrice, non scelte a occhio — ma non tutte allo stesso modo, ed è la
   distinzione che conta se un domani se ne devono calcolare altre:

   · DESKTOP — il frame ritaglia solo in verticale (sx = 1), e la banda che
     `object-fit: cover` può mostrare coincide con quella del frame: basta
     allineare il BORDO ALTO, cioè P = ty / (1 − sy).
       Banca Sella  0,00281 / 0,1482 = 1,9%
       Millionaire  0,00165 / 0,2373 = 0,7%
       Certitude    0,14249 / 0,4915 = 29%
     La quarta è FILL, cioè centrata: nessuna riga, vale il 50% predefinito.

   · TELEFONO — la scheda 2 è di nuovo un ritaglio verticale puro
     (0,00057 / 0,29825 = 0,2%); la 3 e la 4 sono FILL.
     La scheda 1 NO, e qui il conto è un altro: lì il frame ritaglia anche in
     orizzontale (sx 0,9288, tx 0,0356) e la sua banda verticale — 0,728 della
     sorgente — non coincide con quella che `cover` può mostrare a 342×240, che
     è 0,783. Non esistendo una quota che le faccia combaciare, si allinea il
     CENTRO delle due bande: P = (0,4195 − 0,3914) / 0,2172 = 12,9%.
     Il bordo alto darebbe 25,5% e farebbe scendere la fotografia di ~14px.

   Limite dichiarato: quel ritaglio ORIZZONTALE della scheda 1 del telefono
   (92,88% della sorgente, cioè un ingrandimento del 7,7%) `object-fit: cover`
   non lo sa fare — a 342×240 usa per forza tutta la larghezza. Il centro è
   allineato, ma resta la differenza di campo. Si toglie solo con una sorgente
   già ritagliata.

   Il ritaglio si aggancia a `data-partner`, che il modello ricava dal nome
   dell'azienda, e non alla posizione nel DOM: con `:nth-child` bastava che il
   contenuto riordinasse o aggiungesse una testimonianza perché la fotografia
   sbagliata ereditasse in silenzio il ritaglio di un'altra, senza che nessuna
   misura cambiasse. Adesso il misuratore confronta anche `object-position`
   scheda per scheda, quindi una chiave che non corrisponde più si vede. */
.aef-rp__scheda[data-partner^="banca-sella"] .aef-rp__foto { object-position: 50% 1.9%; }
.aef-rp__scheda[data-partner^="millionaire"] .aef-rp__foto { object-position: 50% 0.7%; }
.aef-rp__scheda[data-partner^="certitude"]   .aef-rp__foto { object-position: 50% 29%; }

/* Nel frame il riquadro info è alto 260 in tutte e quattro le schede: cresce
   fino al fondo della scheda, e sotto la testimonianza più corta resta bianco. */
.aef-rp__info {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 12px;
  padding: 20px 24px 28px;
}

/* I loghi si appoggiano in ALTO, a filo del margine interno (nel frame stanno
   tutti a 245 dal bordo della scheda).
   La corsia ha un'altezza minima di 46: è così che il frame fa partire la
   testimonianza a 303 in tutte e tre le schede col testo lungo — i loghi da 36
   e da 32 stanno dentro un riquadro impaginato «space between» alto 260, e il
   testo finisce comunque alla stessa quota del primo, che di logo ne ha 46.
   Il quarto logo è più alto (52) e si porta dietro la sua corsia: la sua
   testimonianza parte a 309, esattamente come nel frame.
   Sul telefono il riquadro info è HUG e ogni logo ha la sua altezza: là la
   corsia minima si azzera. */
.aef-rp__logo-spazio {
  display: flex;
  align-items: flex-start;
  min-height: 46px;
}

/* Autoritas è l'eccezione, e lo è nel frame: il suo riquadro è alto 35 e la sua
   testimonianza parte a 292 invece che a 303 come le altre tre. La corsia
   minima da 46 la riallineava alle altre, cioè faceva una cosa più ordinata di
   quella disegnata. Qui la corsia vale quanto il suo riquadro. */
.aef-rp__scheda[data-partner^="autoritas"] .aef-rp__logo-spazio { min-height: 35px; }

/* I loghi sono gli stessi file **bianchi** che stanno sul fondo scuro altrove.
   Su una scheda bianca sarebbero invisibili, e infatti nel frame il designer
   non ha usato una seconda versione: ha messo la fusione «differenza», che su
   bianco li rende neri. Qui si fa lo stesso.

   Se un domani arrivassero i loghi in versione colorata — ce n'è una cartella
   Drive in un commento del Figma — questa riga va tolta, altrimenti li
   invertirebbe. */
.aef-rp .aef-rp__logo {
  height: var(--aef-logo-h, 40px);
  width: auto;
  display: block;
  mix-blend-mode: difference;
}

/* Certitude è l'unico dei quattro che nel frame non sta in una cornice FIT ma
   in un RITAGLIO (scaleMode STRETCH con `imageTransform`): la cornice è
   201,5×32 e dentro ci sta il file disteso a 201,5 di larghezza e spostato a
   sinistra del 3,086% — 6,22px — con l'ultimo tratto di cornice vuoto.
   Un <img> largo quanto viene non lo riproduce: il disegno esce ~6px più a
   destra del frame e la cornice misura 198,9 invece di 201,5.
   Qui la cornice si rifà per davvero: il riquadro del logo ritaglia,
   l'immagine è larga come la cornice e scivola a sinistra di quei 6,22px.
   (Il frame del telefono dichiara 3,140% invece di 3,086%: 0,11px di
   differenza, sotto il pixel reso — non vale una seconda riga.) */
.aef-rp__scheda[data-partner^="certitude"] .aef-rp__logo-spazio {
  width: 201.5px;
  /* Fra 1101 e ~1259px le quattro colonne del desktop si stringono e la corsia
     interna scende sotto i 201,5 della cornice. Senza questo tetto la cornice
     usciva dalla scheda e il `overflow: hidden` della scheda le mangiava un
     pezzo di logo; senza la cornice, prima, era peggio ancora — il logo era un
     elemento flessibile e si SCHIACCIAVA (162 di larghezza a 1101 invece di
     199, con l'altezza ferma a 32). Con il tetto la cornice si rimpicciolisce
     tutta intera e il disegno con lei, in proporzione. */
  max-width: 100%;
  overflow: hidden;
}

.aef-rp .aef-rp__scheda[data-partner^="certitude"] .aef-rp__logo {
  /* Larga quanto la cornice e alta di conseguenza: alla misura piena fa
     201,5×32, e quando la cornice si stringe scende in proporzione invece di
     appiattirsi. Lo scarto a sinistra è in percentuale per lo stesso motivo:
     è il 3,086% della cornice, cioè 6,22px quando è intera. */
  width: 100%;
  height: auto;
  aspect-ratio: 201.5 / 32;
  flex: none;
  /* Il frame distende 404×65 su 201,5×32: è quello che fa `fill`. */
  object-fit: fill;
  margin-left: -3.086%;
}

.aef-rp__azienda {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  font-weight: 800;
  line-height: 31px;
}

/* `blockquote` è l'elemento giusto per una citazione, ma i temi lo mettono in
   corsivo e con un rientro: nel frame il testo è dritto e a filo. */
.aef-rp__testo {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
  color: var(--scuro);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
}

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

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

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .aef-rp { padding: 0 40px 90px; gap: 36px; }
  .aef-rp__title { font-size: 34px; line-height: 40px; }
  .aef-rp__schede { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Telefono ---------- */
@media (max-width: 767px) {
  .aef-rp { padding: 0 24px 72px; gap: 28px; }

  .aef-rp__head { gap: 12px; text-align: left; }
  .aef-rp__eyebrow { font-size: 12px; line-height: 16px; letter-spacing: 2px; }
  .aef-rp__title { font-size: 28px; line-height: 34px; letter-spacing: -0.3px; }
  .aef-rp__title br { display: inline; }

  /* Nel frame telefono le insegne sono appoggiate a sinistra (x 24). */
  .aef-rp__ratings { align-self: flex-start; gap: 22px; }
  .aef-rp .aef-rp__rating { height: 42px; }
  .aef-rp .aef-rp__rating[data-insegna^="trustpilot"] { width: 100px; }
  .aef-rp .aef-rp__rating[data-insegna^="google"]     { width: 125px; }

  .aef-rp__video { aspect-ratio: 342 / 192; }
  .aef-rp__caption { right: 12px; bottom: 12px; left: 12px; font-weight: 600; letter-spacing: 1px; }
  .aef-rp__play-tondo { width: 48px; height: 48px; }
  .aef-rp__play-icona { width: 20px; height: 20px; stroke-width: 3; }

  .aef-rp__schede { grid-template-columns: 1fr; gap: 14px; }
  .aef-rp .aef-rp__foto { aspect-ratio: 342 / 240; }
  /* Il frame telefono ritaglia le fotografie da un punto suo: le prime due più
     in alto, la terza e la quarta centrate (FILL). Il 12,9% della prima è un
     allineamento al CENTRO della banda, non al suo bordo alto — il conto sta
     per esteso nel commento del blocco desktop. */
  .aef-rp__scheda[data-partner^="banca-sella"] .aef-rp__foto { object-position: 50% 12.9%; }
  .aef-rp__scheda[data-partner^="millionaire"] .aef-rp__foto { object-position: 50% 0.2%; }
  .aef-rp__scheda[data-partner^="certitude"]   .aef-rp__foto { object-position: 50% 50%; }

  /* Qui le schede stanno una sotto l'altra: non c'è niente da allineare, e il
     frame lascia a ogni logo la sua altezza.
     Il logo però è **centrato**: nel frame sta a sinistra (x=46 dentro una
     colonna di 342), ma il cliente l'ha chiesto al centro il 3 settembre, e
     con un logo stretto come Banca Sella — 122 su 298 — la scheda sembrava
     sbilanciata. Scostamento voluto dal disegno. */
  .aef-rp__logo-spazio { min-height: 0; display: flex; justify-content: center; }
  .aef-rp__logo { margin-inline: auto; }
  /* Certitude non ha un riquadro largo quanto la colonna ma uno da 201,5 che
     **ritaglia** il logo (vedi la regola sopra): lì non basta centrare
     l'immagine dentro il riquadro — il ritaglio va tenuto com'è — bisogna
     centrare il riquadro nella scheda. */
  .aef-rp__scheda[data-partner^="certitude"] .aef-rp__logo-spazio { margin-inline: auto; }
  .aef-rp__info { padding: 18px 22px 24px; gap: 10px; }
  .aef-rp__testo { line-height: 21px; }
}

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

/* ---------- Le due scritte del riquadro filmato ----------
   Il frame del computer porta la dicitura per esteso, quello del telefono la
   forma breve: a 390px la lunga andava su due righe e alzava il riquadro di
   sedici pixel. Stessa impalcatura del bottone della barra di navigazione. */
.aef-rp .aef-rp__caption-short { display: none; }

@media (max-width: 767px) {
  .aef-rp .aef-rp__caption-long  { display: none; }
  .aef-rp .aef-rp__caption-short { display: inline; }
}

/* ---------- Il marchio di Autoritas, senza i leoni ----------
   Nel frame questo logo sta dentro un riquadro alto 35 che ritaglia, e
   l'immagine — alta 78 — ci sta dentro spostata di 44px in su: si vede solo la
   scritta. È la richiesta del commento del 1º settembre, «senza i due leoni
   sopra, sennò è impossibile ottenere un buon risultato»: con i leoni dentro
   35 pixel la parola resterebbe alta otto e non si leggerebbe.
   `cover` scala l'immagine a 147x78 dentro i 35 del riquadro, e allinearla in
   basso lascia fuori esattamente i 44 pixel dei leoni. */
.aef-rp [data-insegna="autoritas"] .aef-rp__logo,
.aef-rp__logo[src*="logo-autoritas"] {
  /* La larghezza è quella del marchio a scala piena — 147 — non quella che
     verrebbe riducendo l'immagine a 35 di altezza, che darebbe 66 e una scritta
     minuscola. Il riquadro **ritaglia**, non rimpicciolisce. */
  width: 147px;
  height: 35px;
  object-fit: cover;
  object-position: 50% 100%;
}

@media (max-width: 767px) {
  .aef-rp [data-insegna="autoritas"] .aef-rp__logo,
  .aef-rp__logo[src*="logo-autoritas"] { width: 147px; height: 35px; }
}