/* ==========================================================================
   Paradise Home — homepage

   REGOLA DI QUESTO FILE: ogni valore è copiato dal CSS della home originale.
   Fonti, tutte in research/assets/:

     uploads__elementor__css__post-1064.css      layout e tipografia della home
     uploads__elementor__css__post-6.css         kit globale (colori, container)
     uploads__elementor__css__custom-frontend.min.css   default dei container
     plugins__elementor__assets__css__widget-counter.min.css   il contatore
     uploads__elementor__css__custom-widget-icon-box.min.css   le card trattamento
     plugins__royal-elementor-addons__.../frontend.min.css     accordion e bottoni

   Accanto a ogni blocco c'è l'ID Elementor dell'elemento originale, così ogni
   misura si può riverificare sul file di partenza.

   Due promemoria che valgono per tutto il foglio:

   — I container Elementor senza `--padding-*` esplicito hanno 10px su tutti i
     lati (`--container-default-padding-*`, custom-frontend.min.css) e `gap`
     20px (`--widgets-spacing:20px 20px` del kit). Dove qui compaiono 10px o
     20px "dal nulla" vengono da lì.
   — Dove la fedeltà litiga con il contrasto WCAG vince la fedeltà: i viola del
     marchio restano quelli, e sulla leggibilità si agisce con peso, corpo e
     dimensione dell'area di tocco. I punti in cui succede sono segnalati.
   ========================================================================== */

:root {
  /* --- colori che nell'originale esistono solo nella home ---------------- */
  --home-lilac: #d4d1f8;            /* 8d9db2f, f2dcd7b: pannelli immagine e Chi siamo */
  --home-lilac-soft: #eae1fd;       /* a77f5a8: pannello dei corsi */
  --home-white-lilac: #f6f6ff;      /* 1eb52ef: card di testo dentro Chi siamo */
  --home-pink: #ffeaf7;             /* 86e1c8f: pannello Prossimi Eventi */
  --home-mint: #00bf6305;           /* 730eaa2: pannello Vieni a Trovarci (verde al 2%) */
  --home-card-border: #e2dcf1;      /* f594d6b: bordo delle 8 card trattamento */
  --home-divider: #d0d0e6;          /* d27dfa7: divisore sotto il titolo FAQ */
  --home-acc-border: #d4dee6;       /* 1a95917: bordo dei bottoni dell'accordion */
  --home-acc-panel-bg: #ffffffb5;   /* 1a95917: pannello aperto, bianco al 71% */
  --home-acc-panel-border: #e2e2e2;
  --home-acc-icon: #b3c9da;         /* 1a95917: freccia fa-sort-down/up */
  --home-acc-text: #333333;         /* 1a95917: testo dei bottoni */
  --home-dark: #303030;             /* e0ec9a5: fondo del blocco newsletter */
  --home-veil: #ffffff5c;           /* e0ec9a5::before: velo bianco al 36% */
  --home-hover: #aa95dc;            /* hover di titoli e icone, 52 dichiarazioni */
  --home-text: #777777;             /* colore di TUTTI i corpi di testo della home */
  --home-text-alt: #54595f;         /* --e-global-color-secondary, solo fc0648a e 42a1af4 */

  /* --- scale ricorrenti -------------------------------------------------- */
  --home-gap: 20px;                 /* gap di default dei container */
  --home-gap-tight: 10px;           /* 8d9db2f, f2dcd7b, e7049b1, db45118 */
  --home-pad: 30px;                 /* 8d9db2f, a77f5a8, f2dcd7b, card trattamento */
  --home-pad-inner: 10px;           /* imbottitura di default dei container */
  --home-radius: 20px;              /* ricorre 30+ volte */
  --home-radius-acc: 10px;          /* accordion */
  --home-radius-nl: 50px;           /* e0ec9a5 */
  --home-space: 50px;               /* margin-block di ogni sezione */
  --home-container: 1350px;         /* --container-max-width del kit */
  --home-container-wide: 1600px;    /* f5c15e6: --content-width */
}

/* --------------------------------------------------------------------------
   Fondo di pagina — kit post-6.css, `.elementor-kit-6`
   `background-image:url(bot-8-scaled-1.jpg); top center; no-repeat; cover`:
   la sfumatura pastello dietro tutte le pagine. La stampa
   `inc/customizations.php`, che è globale come lei.
   Questa regola è solo la deroga: esiste unicamente quando in ACF si è scelto
   un fondo diverso per la home, perché è allora che `body` prende la classe
   `home-sfondo-proprio`. Senza quella classe la regola non c'è e il fondo
   globale passa intatto. Vedi `ph_home_sfondo_classe()` in
   template-parts/home/funzioni.php.
   -------------------------------------------------------------------------- */

body.home-sfondo-proprio {
  background-image: var(--home-sfondo, none);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* --------------------------------------------------------------------------
   Contenitore delle sezioni
   Sull'originale ogni sezione è un `e-con-boxed`: il contenuto è largo al
   massimo 1350px e l'imbottitura laterale (20px) compare solo sotto 1366px.
   `.container` di main.css tiene invece 20px sempre, che stringerebbe la home
   a 1310px. Qui si riporta al comportamento dell'originale — le stesse misure
   che `recensioni.css` usa per `.phr-sezione__inner`, così le nove sezioni
   restano allineate fra loro.
   -------------------------------------------------------------------------- */

.home-hero > .container,
.home-pillar > .container,
.home-around > .container,
.home-treatments > .container,
.home-courses > .container,
.home-trainers > .container,
.home-about > .container,
.home-faq > .container {
  max-width: var(--home-container);
  padding-inline: 0;
}

/* f5c15e6: --content-width:1600px da 768px in su. È l'unica sezione che sfonda
   il contenitore del kit. */
.home-pillar--wide > .container {
  max-width: var(--home-container-wide);
}

@media (max-width: 1366px) {
  /* post-1064 @media(max-width:1366px): --padding-left/right:20px su tutte le
     sezioni di primo livello. */
  .home-hero > .container,
  .home-pillar > .container,
  .home-around > .container,
  .home-treatments > .container,
  .home-courses > .container,
  .home-trainers > .container,
  .home-about > .container,
  .home-faq > .container {
    padding-inline: 20px;
  }
}

/* --------------------------------------------------------------------------
   Ritmo verticale
   f5c15e6, 0d28d89, 02fa8c2, 0175203, 629f974, f40297d: `margin: 50px 0`.
   db45118 (FAQ): `margin:0`, `padding-top:50px`.
   f4d59a1 (hero): `margin-top:-100px`, `padding-top:180px`.
   I margini adiacenti collassano, quindi fra due sezioni lo spazio resta 50px.
   -------------------------------------------------------------------------- */

.home-pillar,
.home-treatments,
.home-courses,
.home-trainers,
.home-about {
  margin-block: var(--home-space);
}

/* Ogni sezione è un container flex in colonna con gap 20px. */
.home-hero__inner,
.home-pillar__inner,
.home-treatments__inner,
.home-courses__inner,
.home-trainers__inner,
.home-about__inner {
  display: flex;
  flex-direction: column;
  gap: var(--home-gap);
}

/* --------------------------------------------------------------------------
   Titoli di sezione — a95294e, 94c216b, c183daa, 6cdfb88, 797d9e4, dd3e70f
   Poppins 50px/600, colore primario, centrati. line-height 1.1em dove
   dichiarato (94c216b, c183daa, 6cdfb88, 797d9e4).
   ≤1024px 40px · ≤767px 35px.
   -------------------------------------------------------------------------- */

.home-pillar__titolo,
.home-treatments__titolo,
.home-courses__titolo,
.home-trainers__titolo,
.home-about__titolo {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 50px;
  font-weight: 600;
  line-height: 1.1em;
  color: var(--ph-primary);
  text-align: center;
}

/* Sottotitoli di sezione — fc0648a (#54595F) e 2a22fb1 (primario).
   Poppins 30px/600, centrati. */
.home-pillar__sottotitolo,
.home-treatments__kicker {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1em;
  text-align: center;
}

.home-pillar__sottotitolo {
  color: var(--home-text-alt);
}

.home-treatments__kicker {
  color: var(--ph-primary);
}

/* Testi di sezione — 39e4b45 (21px), 7247a76 / 7566980 / 1aa4d7e / 392700d
   (15px). Montserrat 500, #777777, centrati. */
.home-pillar__testo,
.home-treatments__testo,
.home-courses__testo,
.home-trainers__testo {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--home-text);
  text-align: center;
}

@media (max-width: 1024px) {
  .home-pillar__titolo,
  .home-treatments__titolo,
  .home-courses__titolo,
  .home-trainers__titolo,
  .home-about__titolo,
  /* Sì, 40px: sopra i 767px e sotto i 1024 i sottotitoli dell'originale
     diventano più grandi del titolo di sezione ridotto (post-1064.css,
     @media(max-width:1024px), fc0648a e 2a22fb1). È una stranezza del sito
     vero, non un refuso di questo foglio: si replica. */
  .home-pillar__sottotitolo,
  .home-treatments__kicker {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .home-pillar__titolo,
  .home-treatments__titolo,
  .home-courses__titolo,
  .home-trainers__titolo,
  .home-about__titolo,
  .home-pillar__sottotitolo,
  .home-treatments__kicker {
    font-size: 35px;
  }
}

/* --------------------------------------------------------------------------
   1. Hero — f4d59a1
   `--margin-top:-100px` + `--padding-top:180px` (≤767px 113px).
   Il margine negativo fa salire la sezione di 100px sotto la testata, che è
   `position:sticky`, trasparente in cima e con `z-index:50` come sul sito
   vero: la sovrapposizione non si vede, e l'H1 resta a 80px sotto il bordo
   della testata. Le due misure restano separate e non riassunte nella loro
   differenza, perché a ≤767px il residuo non è 80px ma 13px.
   -------------------------------------------------------------------------- */

.home-hero {
  margin-top: -100px;
  padding-top: 180px;
}

/* Il container è una colonna «normal»: i figli occupano tutta la riga e il
   centraggio è quello del testo (`text-align:center` su ogni widget). Solo la
   griglia dei bottoni ha `align-self:center`. */
.home-hero__inner {
  text-align: center;
}

/* d195452: Poppins 60px/600 primario (1024: 50px, 767: 40px). */
.home-hero__titolo {
  margin: 0;
  font-size: 60px;
  line-height: 1.2em;
}

/* 39e4b45: Montserrat 21px/500 #777777. */
.home-hero__lead {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 21px;
  font-weight: 500;
  color: var(--home-text);
}

/* 4cc8a47: griglia 2×1, `--width:37%` da 768px, `align-self:center`.
   e374411 allineato a destra e 2e4eb3c a sinistra, entrambi con il wrapper
   a `max-width:170px`: i due bottoni finiscono affiancati al centro. */
.home-hero__cta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--home-gap);
  width: 37%;
  align-self: center;
  margin-top: var(--home-gap);
}

.home-hero__btn {
  width: 100%;
  max-width: 170px;
}

.home-hero__cta > :first-child {
  justify-self: end;
}

.home-hero__cta > :last-child {
  justify-self: start;
}

/* 8b4712b + d453eea: immagine a tutta larghezza, radius 20px. */
.home-hero__media {
  width: 100%;
  margin: var(--home-gap) 0 0;
}

.home-hero__img {
  width: 100%;
  height: auto;
  border-radius: var(--home-radius);
}

@media (max-width: 1024px) {
  .home-hero__titolo {
    font-size: 50px;
  }

  /* 8b4712b ha `elementor-hidden-tablet elementor-hidden-mobile`:
     sull'originale l'immagine dell'hero non compare sotto i 1025px. */
  .home-hero__media {
    display: none;
  }
}

@media (max-width: 767px) {
  .home-hero {
    padding-top: 113px;
  }

  .home-hero__titolo {
    font-size: 40px;
  }

  /* 4cc8a47 ≤767: `repeat(1, 1fr)`; e374411 e 2e4eb3c passano a
     `text-align:center` ma tengono il wrapper da 170px. */
  .home-hero__cta {
    grid-template-columns: 1fr;
    width: auto;
  }

  .home-hero__cta > :first-child,
  .home-hero__cta > :last-child {
    justify-self: center;
  }

  /* 1ec8f37 ≤767: `--margin-bottom:-16px`. */
  .home-hero__inner {
    margin-bottom: -16px;
  }
}

/* --------------------------------------------------------------------------
   2. Allineamento Spirituale — f5c15e6
   `margin:50px 0`, `--z-index:1`, `--content-width:1600px` da 768px.
   ≤1024px `margin-top:-40px` · ≤767px `margin-top:60px`.
   -------------------------------------------------------------------------- */

.home-pillar--1 {
  position: relative;
  z-index: 1;
}

/* 73d4bc1: `width:65%`, radius 20px, centrata dal `text-align:center` del
   widget (≤767px `width:100%`). */
.home-pillar__media {
  width: 65%;
  margin-inline: auto;
  margin-block: 0;
}

.home-pillar__img {
  width: 100%;
  height: auto;
  border-radius: var(--home-radius);
}

/* 006e5e4 e 61574b4: il widget occupa tutta la riga e centra il bottone; il
   wrapper del bottone ha `max-width:30%` (≤767px 100%).
   `align-self:stretch` non è un dettaglio: senza, `.home-pillar__inner` centra
   il paragrafo restringendolo al suo contenuto, e un `max-width` in percentuale
   si misurerebbe su se stesso schiacciando il bottone a tre righe. */
.home-pillar__azione {
  margin: 0;
  text-align: center;
}

.home-pillar__azione .btn {
  max-width: 30%;
}

/* --------------------------------------------------------------------------
   3a. Coppia di immagini del secondo pilastro — 8d9db2f
   riga, gap 10px, radius 20px, padding 30px, fondo #D4D1F8.
   9fd5c41 `--width:42.519%` con `flex:0 0` e `padding-right:10px`;
   4963bf8 prende il resto, e 40b7767 ha `height:100%`.
   ≤1024px colonna · ≤767px padding 10px.
   -------------------------------------------------------------------------- */

.home-pillar__coppia {
  display: grid;
  grid-template-columns: 42.519% 1fr;
  gap: var(--home-gap-tight);
  width: 100%;
  padding: var(--home-pad);
  background: var(--home-lilac);
  border-radius: var(--home-radius);
}

.home-pillar__coppia-item {
  display: flex;
  margin: 0;
}

.home-pillar__coppia-img {
  width: 100%;
  height: auto;
  border-radius: var(--home-radius);
}

/* 40b7767: la seconda immagine riempie in altezza la colonna. */
.home-pillar__coppia-item:last-child .home-pillar__coppia-img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .home-pillar__coppia {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .home-pillar__media {
    width: 100%;
  }

  .home-pillar__coppia {
    padding: var(--home-pad-inner);
  }

  .home-pillar__azione .btn {
    max-width: 100%;
  }
}

/* Il secondo pilastro e la riga città/eventi stanno nello stesso container
   dell'originale (0d28d89): fra loro c'è il gap da 20px, non i 50px che
   separano due sezioni. 0d28d89 chiude con `margin-bottom:50px`
   (≤767px 100px). */
.home-pillar--2 {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .home-pillar--1 {
    margin-top: -40px;
  }

  /* Sotto i 1025px l'originale dà due ordini che si sommano male: nasconde
     l'immagine dell'hero (`elementor-hidden-tablet` su 8b4712b) e tira su la
     sezione seguente di 40px (`f5c15e6 --margin-top:-40px`). Senza l'immagine
     sotto i bottoni restano solo i 20px di imbottitura dei container, quindi
     i 40px finiscono addosso ai bottoni e «Allineamento Spirituale» ci finisce
     sopra. È una collisione, non un effetto: il -40px resta perché è
     dell'originale, e l'hero guadagna in fondo lo spazio che quella tirata
     deve mangiare. */
  .home-hero {
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .home-pillar--1 {
    margin-top: 60px;
  }

  /* Qui f5c15e6 torna a un margine positivo: nessuno spazio da compensare. */
  .home-hero {
    padding-bottom: 0;
  }
}

/* --------------------------------------------------------------------------
   3b-3c. Vieni a Trovarci + Prossimi Eventi — a208c76
   riga, padding 0, gap 20px (≤1024px colonna).
   730eaa2 `--width:33%` con `flex:0 0` · 86e1c8f `--width:67%`.
   -------------------------------------------------------------------------- */

.home-around {
  margin-top: var(--home-gap);
  margin-bottom: var(--home-space);
}

.home-around__inner {
  display: grid;
  grid-template-columns: 33% 1fr;
  gap: var(--home-gap);
  align-items: stretch;
}

.home-around__inner--solo {
  grid-template-columns: 1fr;
}

/* 730eaa2: padding 12px, radius 20px, fondo #00BF6305.
   Il verde al 2% di opacità a video è indistinguibile dal bianco: resta
   com'è. Una versione precedente lo aveva sostituito con bianco più un bordo
   lilla — un bordo che sull'originale non esiste. Dentro, a58d21d è una
   colonna con `justify-content:space-between` e i 10px di imbottitura di
   default: è quello che allinea il pulsante al fondo del pannello rosa. */
.home-cities {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--home-gap);
  padding: calc(12px + var(--home-pad-inner));
  background: var(--home-mint);
  border-radius: var(--home-radius);
}

/* 9dfb18d: Poppins 30px/500 primario, centrato (≤767px 25px). */
.home-cities__titolo {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--ph-primary);
  text-align: center;
}

/* 42a1af4: Poppins 24px/500 #54595F, centrato (≤767px 25px). */
.home-cities__sottotitolo {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--home-text-alt);
  text-align: center;
}

/* 780394e — widget counter (widget-counter.min.css):
   `.elementor-counter` è `flex-direction:column-reverse`, quindi l'etichetta
   sta prima nel DOM e il numero compare sopra;
   il numero è 69px/600 line-height 1, l'etichetta 19px/400 line-height 2.5.
   Il colore del wrapper è il primario (post-1064.css). */
.home-counter {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  justify-content: center;
  color: var(--ph-primary);
}

.home-counter__numero-wrap {
  display: flex;
  flex: 1;
  justify-content: center;
  font-family: var(--ph-font-heading);
  font-size: 69px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}

.home-counter__titolo {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-family: var(--ph-font-heading);
  font-size: 19px;
  font-weight: 400;
  line-height: 2.5;
}

/* bd96696: Montserrat 15px/500 #777777, centrato. */
.home-cities__elenco {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--home-text);
  text-align: center;
}

/* 87b8b4b: bottone centrato, wrapper a tutta larghezza. */
.home-cities__azione {
  margin: 0;
  text-align: center;
}

.home-cities__azione .btn {
  width: 100%;
}

/* 86e1c8f: `--width:67%`, gap 0, padding 0, radius 20px, fondo #FFEAF7.
   L'imbottitura visibile è quella del container interno 3f8c453 (10px). */
.home-events {
  display: flex;
  flex-direction: column;
  gap: var(--home-gap);
  padding: var(--home-pad-inner);
  background: var(--home-pink);
  border-radius: var(--home-radius);
}

/* 1640903: Poppins 30px/500 primario, centrato, `margin-top:10px`
   (≤767px 25px). */
.home-events__titolo {
  margin: var(--home-gap-tight) 0 0;
  font-family: var(--ph-font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--ph-primary);
  text-align: center;
}

/* 2e8f15f: il riquadro della mappa. Misure e ombra stanno in mappa.css, che è
   del modulo: qui la mappa deve solo occupare tutta la colonna. */
.home-events__mappa {
  width: 100%;
}

@media (max-width: 1024px) {
  .home-around__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .home-around {
    margin-bottom: 100px;
  }

  .home-cities__titolo,
  .home-cities__sottotitolo,
  .home-events__titolo {
    font-size: 25px;
  }
}

/* 730eaa2 e 86e1c8f non hanno varianti di imbottitura sotto i 768px: i due
   pannelli restano a 12px e a 0 (più i 10px dei loro container interni) a
   qualunque larghezza. È la ragione per cui qui non c'è nessuna regola. */

/* --------------------------------------------------------------------------
   4. Trattamenti — 02fa8c2
   48f884b: griglia `repeat(4,1fr)` su una riga, gap 20px
   (≤1024px 2 colonne · ≤767px 1 colonna).
   -------------------------------------------------------------------------- */

.home-treatments__griglia {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--home-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* f594d6b e sorelle: fondo bianco, padding 30px, bordo 1px #E2DCF1,
   radius 20px. Il wrapper dell'icon-box è una colonna con gap 15px e
   `text-align:start`. */
.home-treatment {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: var(--home-pad);
  background: var(--ph-white);
  border: 1px solid var(--home-card-border);
  border-radius: var(--home-radius);
  text-align: start;
}

/* Icona stacked+rounded: fondo primario, glifo bianco 25px, padding 10px,
   `border-radius:10%` (elementor-shape-rounded — non è un cerchio).
   In hover fondo #AA95DC, come sull'originale. */
.home-treatment__icona {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: var(--ph-primary);
  color: var(--ph-white);
  border-radius: 10%;
  transition: background-color var(--ph-transition);
}

.home-treatment__icona .icon {
  width: 25px;
  height: 25px;
  fill: currentColor;
}

.home-treatment:hover .home-treatment__icona,
.home-treatment:focus-within .home-treatment__icona {
  background: var(--home-hover);
}

/* Titolo: Poppins 26px/600 primario, `margin-block-end:20px`. */
.home-treatment__titolo {
  margin: 0 0 var(--home-gap);
  font-family: var(--ph-font-heading);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2em;
  color: var(--ph-primary);
  transition: color var(--ph-transition);
}

.home-treatment__link {
  color: inherit;
}

/* Sull'originale il link stava due volte, sull'icona e sul titolo. Qui è uno
   solo e la card resta cliccabile per intero. */
.home-treatment__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.home-treatment:hover .home-treatment__titolo,
.home-treatment:focus-within .home-treatment__titolo {
  color: var(--home-hover);
}

/* Descrizione: Montserrat 16px/500 #777777. */
.home-treatment__testo {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--home-text);
}

@media (max-width: 1024px) {
  .home-treatments__griglia {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .home-treatments__griglia {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   5. Corsi — 0175203
   a77f5a8: riga, gap 20px, bordo 1px primario, radius 20px, padding 30px,
   fondo #EAE1FD (≤1024px colonna · ≤767px padding 10px).
   fa44147: colonna immagini `--width:46.924%` con `flex:0 0`.
   e7049b1: colonna card, `justify-content:space-between`, gap 10px.
   -------------------------------------------------------------------------- */

.home-courses__pannello {
  display: grid;
  grid-template-columns: 46.924% 1fr;
  gap: var(--home-gap);
  padding: var(--home-pad);
  background: var(--home-lilac-soft);
  border: 1px solid var(--ph-primary);
  border-radius: var(--home-radius);
}

.home-courses__pannello--senza-media {
  grid-template-columns: 1fr;
}

.home-courses__media {
  display: flex;
  flex-direction: column;
  gap: var(--home-gap);
  min-height: 0;
  padding: var(--home-pad-inner);
}

.home-courses__figura {
  margin: 0;
}

/* fcc0edf e 30837eb: le due immagini hanno solo `border-radius:20px`. Nessun
   ritaglio: sull'originale restano nelle loro proporzioni e la colonna è alta
   quanto loro. */
.home-courses__img {
  width: 100%;
  height: auto;
  border-radius: var(--home-radius);
}

.home-courses__elenco {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--home-gap-tight);
  margin: 0;
  padding: var(--home-pad-inner);
  list-style: none;
}

/* a9c4282 e sorelle: fondo bianco, padding 10px 20px 20px, nessun bordo,
   radius 20px. */
.home-course {
  padding: 10px 20px 20px;
  background: var(--ph-white);
  border-radius: var(--home-radius);
  text-align: start;
}

/* Titolo: Poppins 20px/600 primario, `margin-bottom:10px`. */
.home-course__titolo {
  margin: 0 0 var(--home-gap-tight);
  font-family: var(--ph-font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2em;
  color: var(--ph-primary);
  transition: color var(--ph-transition);
}

.home-course__link {
  color: inherit;
}

.home-course:hover .home-course__titolo,
.home-course:focus-within .home-course__titolo {
  color: var(--home-hover);
}

/* Descrizione: Montserrat 14px/500 #777777. */
.home-course__testo {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--home-text);
}

@media (max-width: 1024px) {
  .home-courses__pannello {
    grid-template-columns: 1fr;
  }

  .home-courses__figura {
    min-height: 220px;
  }
}

@media (max-width: 767px) {
  .home-courses__pannello {
    padding: var(--home-pad-inner);
  }
}

/* --------------------------------------------------------------------------
   Formatori — sezione fuori dall'originale, disponibile da backoffice
   -------------------------------------------------------------------------- */

.home-trainers__griglia {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.home-trainers__azione {
  margin: var(--home-gap) 0 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Chi siamo — 629f974
   befa9d1: `margin-top:50px` fra il titolo e il pannello.
   f2dcd7b: riga, gap 10px, radius 20px, padding 30px, fondo #D4D1F8
   (≤1024px colonna · ≤767px padding 15px).
   Le due colonne non hanno `--width`: restano entrambe a `--width:100%` con
   `flex-shrink:1`, quindi si dividono lo spazio a metà.
   -------------------------------------------------------------------------- */

.home-about__pannello {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--home-gap-tight);
  margin-top: var(--home-space);
  padding: var(--home-pad);
  background: var(--home-lilac);
  border-radius: var(--home-radius);
}

.home-about__pannello--senza-media {
  grid-template-columns: 1fr;
}

/* 1eb52ef: colonna, `justify-content:center`, radius 20px, padding 25px,
   fondo #F6F6FF (≤767px padding 30px 20px). */
.home-about__testo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--home-gap);
  padding: 25px;
  background: var(--home-white-lilac);
  border-radius: var(--home-radius);
  text-align: start;
}

/* 2b10fff e e3ee5fd: Poppins 30px/500 primario, line-height 1.2em, allineati
   a sinistra (≤767px 25px). Sull'originale erano due `<h2>` di seguito al
   titolo di sezione; qui sono `<h3>`, che a video è identico e rende la
   gerarchia leggibile a chi naviga per titoli. */
.home-about__blocco-titolo {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2em;
  color: var(--ph-primary);
}

/* 1ef674b e 0287485: Montserrat 15px/500 #777777, allineati a sinistra. */
.home-about__blocco-testo {
  font-family: var(--ph-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--home-text);
}

.home-about__blocco-testo p:last-child {
  margin-bottom: 0;
}

/* e8f8a22 + 439e282: colonna senza imbottitura, immagine a tutta altezza. */
.home-about__media {
  margin: 0;
}

.home-about__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--home-radius);
}

/* 220a486: bottone centrato, wrapper a `max-width:100%`. */
.home-about__azione {
  margin: 0;
  text-align: center;
}

@media (max-width: 1024px) {
  .home-about__pannello {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .home-about__pannello {
    padding: 15px;
  }

  .home-about__testo {
    padding: 30px 20px;
  }

  .home-about__blocco-titolo {
    font-size: 25px;
  }
}

/* --------------------------------------------------------------------------
   7. Testimonianze — f40297d
   La sezione la stampa il modulo del carosello (`inc/recensioni.php` +
   `assets/css/recensioni.css`), che replica il markup e il CSS del plugin
   `paradise-reviews`: cornice `.phr-sezione`, titolo `.phr-sezione__titolo`,
   carosello con frecce e puntini. Qui non c'è nulla da vestire.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   8. FAQ — db45118
   riga, gap 10px, `margin:0`, `padding-top:50px` (≤1024px colonna).
   Sfondo `::before`: fac-cover-1.jpg center/cover con `--overlay-opacity:0.23`.
   a83368b `--width:38%` con `flex:0 0` e `elementor-hidden-tablet`.
   71afd98 `margin-bottom:70px`.
   -------------------------------------------------------------------------- */

.home-faq {
  position: relative;
  isolation: isolate;
  margin: 0;
  padding-top: var(--home-space);
}

.home-faq--con-sfondo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--home-faq-sfondo);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: var(--home-faq-velo, 0.23);
}

.home-faq__inner {
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: var(--home-gap-tight);
}

/* d700742: `width:100%`, radius 20px, `margin:30px 0 -20px`
   (≤1366px margin-top 40px · ≤767px margin 0). */
.home-faq__media {
  margin: 30px 0 -20px;
}

.home-faq__img {
  width: 100%;
  height: auto;
  border-radius: var(--home-radius);
}

.home-faq__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--home-gap);
  margin-bottom: 70px;
  padding: var(--home-pad-inner);
}

/* 86474fe — wpr-dual-color-heading: `.first` Poppins 40px/300 corsivo,
   `.second` Poppins 40px/600, entrambi primari, allineati a sinistra
   (≤1024px 40px · ≤767px 35px). `margin-right:0` sul primo span: fra le due
   parole resta solo lo spazio del testo. */
.home-faq__titolo {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 40px;
  line-height: 1.2em;
  color: var(--ph-primary);
  text-align: left;
}

.home-faq__titolo-leggero {
  font-weight: 300;
  font-style: italic;
  margin-right: 0;
}

.home-faq__titolo-forte {
  font-weight: 600;
}

/* d27dfa7: separatore 1px #D0D0E6, largo il 75%, allineato a sinistra,
   con 2px di respiro sopra e sotto. */
.home-faq__divisore {
  width: 75%;
  margin: 0;
  margin-block: 2px;
  border: 0;
  border-top: 1px solid var(--home-divider);
}

.home-faq__elenco {
  display: flex;
  flex-direction: column;
}

/* 1a95917 — wpr-advanced-accordion.
   `data-active-index="0"`: il JS di Royal calcola `indice - 1`, cioè -1, e
   nessuna voce risulta aperta al caricamento. Qui `<details>` senza `open`
   fa la stessa cosa, e `name="home-faq"` tiene aperta una voce sola come
   l'accordion originale. */
.home-faq__voce {
  margin-block: 6px;
}

/* Bottone: fondo bianco, testo #333333, bordo 1px #D4DEE6, radius 10px,
   padding 12px, Poppins 16px/400 (≤767px 15px),
   `transition: all .3s ease-in-out`. */
.home-faq__domanda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: var(--ph-white);
  border: 1px solid var(--home-acc-border);
  border-radius: var(--home-radius-acc);
  font-family: var(--ph-font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--home-acc-text);
  cursor: pointer;
  list-style: none;
  transition: all 0.3s ease-in-out;
}

.home-faq__domanda::-webkit-details-marker {
  display: none;
}

/* `.wpr-acc-item-title .wpr-acc-title-text { margin-left: 5px }`: lo slot
   dell'icona di titolo resta vuoto (fill #EDEDED, mai visibile) e lascia
   solo questo scarto. */
.home-faq__domanda-testo {
  margin-left: 5px;
}

/* Icona di apertura: fa-sort-down chiusa, fa-sort-up aperta, riempimento
   #B3C9DA, larghezza 15px. Il colore è quello dell'originale — su bianco fa
   1,7:1, sotto la soglia per un indicatore di comando, e resta questo: a
   dire "apri" qui è l'intero bottone, che è largo quanto la colonna, alto
   45px e cambia bordo in `:hover` e in `:focus-visible`. */
.home-faq__domanda::after {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: var(--home-acc-icon);
  clip-path: polygon(0 30%, 100% 30%, 50% 75%);
  transition: all 0.3s ease-in-out;
}

.home-faq__voce[open] > .home-faq__domanda::after {
  clip-path: polygon(0 70%, 100% 70%, 50% 25%);
}

.home-faq__domanda:hover,
.home-faq__domanda:focus-visible {
  border-color: var(--ph-primary);
}

/* Pannello: fondo #FFFFFFB5, bordo 1px #E2E2E2, radius 10px, padding 17px,
   testo Montserrat 14px/500 #777777. */
.home-faq__risposta {
  margin-top: 6px;
  padding: 17px;
  background: var(--home-acc-panel-bg);
  border: 1px solid var(--home-acc-panel-border);
  border-radius: var(--home-radius-acc);
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--home-text);
}

.home-faq__risposta p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1366px) {
  .home-faq__media {
    margin-top: 40px;
  }
}

@media (max-width: 1024px) {
  .home-faq__inner {
    grid-template-columns: 1fr;
  }

  /* a83368b ha `elementor-hidden-tablet`: sotto i 1025px l'immagine sparisce. */
  .home-faq__media {
    display: none;
  }
}

@media (max-width: 767px) {
  .home-faq__titolo {
    font-size: 35px;
  }

  .home-faq__domanda {
    font-size: 15px;
  }
}

/* --------------------------------------------------------------------------
   9. Newsletter — e4a2c71
   È l'unica sezione `e-con-full`: il blocco va da un bordo all'altro dello
   schermo, non si ferma ai 1350px del contenitore.
   `min-height:21vh`, gap 20px; padding 10px oltre 1366px,
   `0 20px 100px` ≤1366px, `0 0 50px` ≤1024px, `0 10px 50px` ≤767px.
   e0ec9a5: `min-height:37vh` (≤1024px 30vh · ≤767px 55vh),
   `justify-content:center`, radius 50px, fondo #303030 + bg.jpg center/cover,
   velo `::before` #FFFFFF5C con `--overlay-opacity:1`.

   Il velo bianco e il testo viola sono quelli del sito vero. Una versione
   precedente aveva ribaltato il velo (nero al 72%) e portato il testo a
   bianco per superare la soglia AA: nessuno l'aveva chiesto, ed era un cambio
   di identità visiva travestito da correzione. Il viola resta; sulla
   leggibilità agiscono le leve che l'originale già usa — peso 600 e corpo
   50px sul titolo, 20px sul sopratitolo.
   -------------------------------------------------------------------------- */

.home-newsletter {
  display: flex;
  flex-direction: column;
  gap: var(--home-gap);
  min-height: 21vh;
  padding: var(--home-pad-inner);
}

.home-newsletter__pannello {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--home-gap);
  width: 100%;
  min-height: 37vh;
  padding: var(--home-pad-inner);
  background-color: var(--home-dark);
  background-image: var(--home-nl-sfondo, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--home-radius-nl);
  text-align: center;
}

.home-newsletter__pannello::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--home-veil);
  border-radius: inherit;
}

/* 2c409c5: colonna con i 10px di default (≤1024px padding-block 20px). */
.home-newsletter__blocco {
  display: flex;
  flex-direction: column;
  gap: var(--home-gap);
  align-items: center;
  width: 100%;
  padding: var(--home-pad-inner);
}

/* 5fee1f2: Poppins 20px/600 primario, centrato (≤767px 18px). */
.home-newsletter__kicker {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 20px;
  font-weight: 600;
  color: var(--ph-primary);
}

/* 21f328a: Poppins 50px/600 primario, line-height 1.2em, centrato
   (≤1024px 40px · ≤767px 30px). */
.home-newsletter__titolo {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 50px;
  font-weight: 600;
  line-height: 1.2em;
  color: var(--ph-primary);
}

/* Sull'originale qui non c'è nessun modulo: i due campi restano per il giorno
   in cui il servizio di mailing arriverà, e finché sono vuoti non stampano
   niente. */
.home-newsletter__form {
  width: 100%;
  max-width: 560px;
  margin: 0;
}

.home-newsletter__privacy {
  max-width: 60ch;
  font-size: 13px;
  color: var(--home-text);
}

@media (max-width: 1366px) {
  .home-newsletter {
    padding: 0 20px 100px;
  }
}

@media (max-width: 1024px) {
  .home-newsletter {
    padding: 0 0 50px;
  }

  .home-newsletter__pannello {
    min-height: 30vh;
  }

  .home-newsletter__blocco {
    padding-block: 20px;
  }

  .home-newsletter__titolo {
    font-size: 40px;
  }
}

@media (max-width: 767px) {
  .home-newsletter {
    padding: 0 10px 50px;
  }

  .home-newsletter__pannello {
    min-height: 55vh;
  }

  .home-newsletter__kicker {
    font-size: 18px;
  }

  .home-newsletter__titolo {
    font-size: 30px;
  }
}

/* --------------------------------------------------------------------------
   Animazioni di ingresso
   Sull'originale le fa Elementor: `elementor-invisible` tiene l'elemento
   nascosto, un osservatore aggiunge `animated <nome>` quando entra in vista e
   il ritardo arriva da `_animation_delay` (100/200/300/400ms sulla home).
   Le durate sono quelle di Elementor: `.animated{animation-duration:1.25s}`,
   `.animated-slow{2s}`.
   Qui il meccanismo è in `assets/js/app.js`, che osserva `[data-reveal]` e
   aggiunge `is-revealed`. Sotto `prefers-reduced-motion` rivela tutto subito.
   -------------------------------------------------------------------------- */

/* Il meccanismo di base è quello di main.css: senza JS il contenuto è già
   visibile (`[data-reveal]{opacity:1}`), con JS parte da `opacity:0` e
   `.is-revealed` lo riporta a posto.

   Qui cambia solo *come* torna a posto: al passaggio con `transform` fisso di
   main.css si sostituiscono i cinque fotogrammi dell'originale, e il ritardo
   che `ph_home_anim()` passa come `--ph-anim-delay` diventa
   `animation-delay`.

   Il movimento vive dentro i keyframes e non nello stato a riposo, esattamente
   come in Elementor: `elementor-invisible` rende l'elemento trasparente ma non
   lo sposta, e lo spostamento esiste solo durante l'animazione. È una
   differenza che si vede: un `translate3d(0,100%,0)` fermo su una sezione
   alta 800px allungherebbe la pagina di 800px finché quella sezione non entra
   in vista, e la barra di scorrimento si accorcerebbe a scatti mentre si
   scende.

   Durate: `.animated{animation-duration:1.25s}` di Elementor, 2s per gli
   elementi con `animated-slow`. */

.js [data-reveal] {
  transform: none;
  transition: none;
}

.js [data-reveal].is-revealed {
  animation-duration: 1.25s;
  animation-fill-mode: both;
  animation-delay: var(--ph-anim-delay, 0ms);
}

.js [data-reveal][data-reveal-slow].is-revealed {
  animation-duration: 2s;
}

.js [data-reveal="fadeIn"].is-revealed {
  animation-name: home-fadeIn;
}

.js [data-reveal="zoomIn"].is-revealed {
  animation-name: home-zoomIn;
}

.js [data-reveal="slideInUp"].is-revealed {
  animation-name: home-slideInUp;
}

.js [data-reveal="slideInLeft"].is-revealed {
  animation-name: home-slideInLeft;
}

.js [data-reveal="slideInRight"].is-revealed {
  animation-name: home-slideInRight;
}

@keyframes home-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes home-zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes home-slideInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes home-slideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes home-slideInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Mentre scorrono da destra o da sinistra, i due pannelli non devono
   allargare la pagina. */
.home-around__inner,
.home-faq__inner {
  overflow: clip;
}

/* --------------------------------------------------------------------------
   Movimento ridotto — restano i colori, spariscono gli spostamenti
   Le regole qui sopra sono più specifiche di quelle di main.css: vanno
   annullate una per una, altrimenti sopravvivrebbero alla preferenza.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js [data-reveal].is-revealed,
  .js [data-reveal="fadeIn"].is-revealed,
  .js [data-reveal="zoomIn"].is-revealed,
  .js [data-reveal="slideInUp"].is-revealed,
  .js [data-reveal="slideInLeft"].is-revealed,
  .js [data-reveal="slideInRight"].is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }

  .home-treatment__icona,
  .home-treatment__titolo,
  .home-course__titolo,
  .home-faq__domanda,
  .home-faq__domanda::after {
    transition: none;
  }
}