/* ==========================================================================
   Paradise Home — pagine trattamento e indice /trattamenti/

   Le misure dei box di conversione arrivano dal CSS per-pagina reale del sito
   (research/assets/uploads__elementor__css__post-1301.css e gemelli): fondo
   verde #00BF630D, fondo rosa #FFEAF7, raggio 20px, padding 20px sul box e
   10px sulle sue colonne, titoli Poppins 30px/500 #242068, testo Montserrat
   15px/500 #777777, colonna sinistra larga il 36,113%.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Intestazione: percorso, titolo e introduzione occupano tutta la larghezza
   del contenuto, e sotto stanno i due box di conversione affiancati.
   Sul sito originale non c'è hero con immagine di fondo né colonna laterale.
   -------------------------------------------------------------------------- */

.trattamento-hero {
  padding: 50px 0 0;
}

.trattamento-hero__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: stretch;
}

.trattamento-hero__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

/* Il percorso di navigazione dell'originale ha 10px di margine negativo sotto:
   sta più vicino al titolo di quanto farebbe la spaziatura fra i widget. */
.trattamento-hero__body .breadcrumb {
  margin-bottom: -10px;
}

/* Sulle otto pagine trattamento il titolo è più grande che nel resto del sito:
   60px anziché 50, e scende a 50 e 40 ai due punti di rottura di Elementor. */
.trattamento-hero__title {
  margin: 0;
  /*
   * Il corpo scende con la larghezza invece di restare fisso.
   *
   * A 390px «Riprogrammazione» chiedeva 394px in un riquadro da 326: `overflow-wrap`
   * la spezzava a metà parola, senza trattino («Riprogrammazi / one»), su otto titoli
   * della pagina delle Carte. Con il corpo che scala, a 390px vale circa 29px e la
   * parola ci sta intera; oltre i 750px resta il 60px dell'originale, che è la misura
   * da replicare. `overflow-wrap` rimane più sotto come rete, per titoli ancora più
   * lunghi di quelli che conosciamo.
   */
  font-size: clamp(26px, 8vw, 60px);
}

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

@media (max-width: 767px) {
  .trattamento-hero__title {
    font-size: 40px;

    /* A 390px una parola come «Riprogrammazione» (Carte di Riprogrammazione
       Cellulare) a 40px Poppins è più larga della colonna (350px) e allarga la
       pagina di 24px in orizzontale. Stessa regola dei titoli di sezione in
       contenuto.css, e per lo stesso motivo senza `hyphens`: `overflow-wrap`
       spezza la parola solo quando non entra, e senza trattino.

       Qui però serve `anywhere` e non `break-word`, ed è l'unico posto del tema in
       cui la differenza si vede: `break-word` spezza la riga ma NON riduce la
       larghezza minima dell'elemento, così la colonna del titolo si allargava
       lo stesso e la pagina delle Carte usciva 414px di documento su 390 di
       finestra (misurato). `anywhere` fa le due cose insieme. `break-word`
       resta come ripiego per Safari sotto la 15.4, che `anywhere` non lo conosce. */
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
  }
}

/* Il widget del testo introduttivo, sull'originale, non ha una dimensione propria:
   eredita quella del corpo del testo. Ingrandirlo mandava l'introduzione su una riga
   in più e spingeva giù i box di conversione. */
.trattamento-hero__intro {
  font-size: inherit;
}

.trattamento-hero__intro > *:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Box di conversione: prenotazione e formazione.
   Lo stesso blocco compare sotto l'introduzione e di nuovo in fondo al corpo,
   con dentro l'immagine del trattamento in entrambe le occorrenze.
   -------------------------------------------------------------------------- */

.cta-duo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cta-duo--sezione {
  padding-block: 50px;
}

.cta-duo__inner,
.cta-duo--hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Da schermo largo i due box stanno affiancati: il primo a larghezza fissa,
   il secondo si prende il resto perché ospita anche l'immagine. Sotto i
   1025px l'originale li impila (--width:100% nel suo media query). */
@media (min-width: 1025px) {
  .cta-duo__inner,
  .cta-duo--hero {
    flex-direction: row;
    align-items: stretch;
  }

  .cta-duo__inner > .cta-box:first-child,
  .cta-duo--hero > .cta-box:first-child {
    flex: 0 0 36.113%;
    width: 36.113%;
  }

  .cta-duo__inner > .cta-box:last-child,
  .cta-duo--hero > .cta-box:last-child {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.cta-box {
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 20px;
  border-radius: var(--ph-radius-lg);
  /* #00BF630D: verde a 5% di opacità, come nell'originale. */
  background: rgba(0, 191, 99, 0.05);
}

/* Il secondo box è quello della formazione: fondo rosa e colonna immagine.
   `:only-child` copre la pagina delle Carte, dove il box è uno solo e resta comunque
   rosa: nel CSS per-pagina dell'originale (post-1293.css) le due sole occorrenze di
   #FFEAF7 sono i container 514503c e 00f0ade, cioè i due box della pagina, ciascuno
   figlio unico del proprio contenitore — quindi `:nth-child(2)` non li prendeva e
   restavano verdi. Il colore si legge dai token, non a mano. */
.cta-box:nth-child(2),
.cta-box:only-child {
  background: var(--ph-tint-pink);
}

.cta-box__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 20px;
  justify-content: space-between;
  min-width: 0;
  padding: 10px;
}

.cta-box__title {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  color: #242068;
}

@media (max-width: 767px) {
  .cta-box__title {
    font-size: 25px;
  }
}

.cta-box__text {
  margin: 0;
  font-family: var(--ph-font-body);
  font-size: 15px;
  font-weight: 500;
  color: #777;
}

.cta-box__actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* I bottoni dei box occupano tutta la larghezza della colonna, come i widget
   bottone di Elementor dentro un container in colonna. */
.cta-box__btn {
  justify-content: center;
  width: 100%;
  padding: 11px 10px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 400;
  text-align: center;
}

.cta-box__media {
  flex: 0 0 auto;
  /* Senza questi due la colonna dell immagine prende la larghezza intrinseca del file
     (736px): img{max-width:100%} non basta, perche il 100% si riferisce a questo
     contenitore, che a sua volta e larghezza-contenuto. Il riferimento diventa
     circolare e il browser ricade sui pixel veri dell immagine, allargando l intero
     documento oltre il viewport. Su uno schermo da 390px tutto il testo della pagina
     finiva tagliato a destra, non solo il riquadro. */
  max-width: 100%;
  min-width: 0;
  padding: 10px;
}

.cta-box__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ph-radius-lg);
}

@media (min-width: 1025px) {
  .cta-box__media {
    flex: 0 0 var(--cta-media-quota, 33.246%);
    width: var(--cta-media-quota, 33.246%);
  }
}

/* Sotto i 1025px il box torna in colonna e l'immagine va sotto il testo. */
@media (max-width: 1024px) {
  .cta-box {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
   Scheda sintetica: durata, prezzo, ripetibilità, modalità.
   Il partial esiste ma page-trattamento.php non lo stampa: sull'originale non
   c'è nessuna barra di riepilogo. Le regole restano per chi lo riusasse.
   -------------------------------------------------------------------------- */

.trattamento-dati {
  padding-block: 32px;
}

.trattamento-dati__lista {
  display: grid;
  gap: 20px 32px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: 0;
  padding: 24px 28px;
  background: var(--ph-primary-pale);
  border-radius: var(--ph-radius-lg);
}

.trattamento-dati__voce {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.trattamento-dati__icona {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--ph-primary);
}

.trattamento-dati__etichetta {
  font-family: var(--ph-font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-primary);
}

.trattamento-dati__valore {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ph-text);
}

/* --------------------------------------------------------------------------
   Corpo editoriale
   -------------------------------------------------------------------------- */

/* Sull'originale il container del corpo ha 50px di margine sopra e sotto, come
   quello dell'intestazione: la stessa distanza da titolo e box di conversione. */
.trattamento__corpo {
  padding-block: 50px;
}

/* --------------------------------------------------------------------------
   Ritmo verticale del corpo: i margini dell'originale, non quelli del tema

   `main.css` dà al contenuto di pagina un respiro largo (h2/h3 `margin-top:1.8em`,
   elenchi `margin-block:1em 1.4em`, `li + li` 0,45em) che va bene per gli articoli
   del blog ma non per l'articolo dei trattamenti: sull'originale quel testo sta in
   un unico widget text-editor di Elementor, dove i titoli hanno `margin:8px 0 16px`
   e gli elenchi non hanno margini né spazio fra le voci (misurato sui computed style
   del widget 9bf49e8 di /trattamenti/carte-di-riprogrammazione-cellulare/, e uguale
   sulle altre pagine trattamento).

   Con i margini del tema la pagina delle Carte era alta 10.331px contro i 7.144
   dell'originale, e lo scarto cresceva titolo dopo titolo: +666px al «Principio
   Alchemico», +1.866px al «Contattaci» di fondo pagina. Solo il corpo ne metteva
   circa 1.130: 10 h2 × 62px, 7 h3 × 32px, 10 elenchi × 21px e 45 voci × 6,75px.
   Le regole restano confinate a `.trattamento__corpo`, così il blog non si muove.
   -------------------------------------------------------------------------- */

/* 50px di margine del container originale (b96f225) + 10px del suo `e-con-inner`:
   il padding del tema (32px) ne aggiungeva 22 per lato che l'originale non ha. */
.trattamento__corpo .entry-content {
  padding-block: 10px;
}

.trattamento__corpo .entry-content h2,
.trattamento__corpo .entry-content h3 {
  margin-top: 8px;
  margin-bottom: 16px;
}

/* Serve anche con `margin-top:8px`: `.entry-content > *:first-child{margin-top:0}` di
   main.css ha specificità più bassa delle regole qui sopra e verrebbe scavalcato. */
.trattamento__corpo .entry-content > *:first-child {
  margin-top: 0;
}

.trattamento__corpo .entry-content ul,
.trattamento__corpo .entry-content ol {
  margin-block: 0;
}

.trattamento__corpo .entry-content li + li {
  margin-top: 0;
}

.trattamento__corpo .entry-content hr {
  height: 1px;
  margin: 48px 0;
  border: 0;
  background: var(--ph-border);
}

/* Figura centrata nel corpo (blocco immagine «aligncenter», es. la foto verticale
   image00004 di /trattamenti/guarigione-con-i-cristalli/, che sull'originale sta in un
   widget immagine di Elementor, centrato, alla misura `large`): il tema non carica il
   CSS dei blocchi (performance.php toglie wp-block-library), quindi la classe di
   WordPress va coperta qui. `img` è display:block in main.css: serve il margine auto.
   Due selettori perché su un tema senza theme.json WordPress rende il blocco allineato
   come `<div class="wp-block-image"><figure class="aligncenter size-large">`
   (wp_restore_image_outer_container), non come `<figure class="wp-block-image aligncenter">`. */
.trattamento__corpo .entry-content .wp-block-image.aligncenter,
.trattamento__corpo .entry-content .wp-block-image .aligncenter {
  text-align: center;
}

.trattamento__corpo .entry-content .wp-block-image.aligncenter img,
.trattamento__corpo .entry-content .wp-block-image .aligncenter img {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Galleria (pagina Carte di Riprogrammazione Cellulare)
   -------------------------------------------------------------------------- */

.trattamento-galleria {
  padding-block: 24px var(--ph-section-y);
}

.trattamento-galleria__title {
  margin-bottom: 28px;
}

/* Griglia contigua e angoli vivi: sull'originale la galleria è il widget WordPress
   nativo (`gallery-columns-4`), dove ogni `.gallery-item` è un inline-block senza
   margini né raggio. Misurato a 1440: piastrelle da 338px alle x 45 / 383 / 720 /
   1058 — zero stacco fra le colonne — e righe a y 900 e 1125, cioè attaccate.
   La replica metteva 20px di gap e 20px di raggio. */
.trattamento-galleria__grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La scala dell'originale, dal foglio di stile del widget galleria di Elementor
   (uploads/elementor/css/custom-widget-image-gallery.min.css): `.gallery-item` va al
   25% sopra i 768px, al 50% fra 480 e 767, al 100% sotto i 480. Le due soglie basse si
   replicano; sopra i 768 resta il numero di colonne del campo, che su questa pagina il
   cliente ha chiesto a 3. Sotto i 480 la replica ne metteva due, e la carta scendeva a
   175px di lato: illeggibile, e non è quello che fa l'originale (misurato a 390px:
   una colonna sola, 350px di lato). */
@media (max-width: 479px) {
  .trattamento-galleria__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .trattamento-galleria__grid[data-colonne="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trattamento-galleria__grid[data-colonne="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.trattamento-galleria__item {
  overflow: hidden;
}

/* 3:2 come i file originali (2560×1707): il 4/3 di prima ritagliava sopra e sotto e
   stringeva la carta fin quasi ai bordi della piastrella, mentre l'originale la
   inquadra intera, con il suo margine e l'ombra. Con la proporzione giusta
   `object-fit` non taglia più nulla. */
.trattamento-galleria__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

/* --------------------------------------------------------------------------
   Prossime date: le card evento arrivano da template-parts/card-evento.php,
   il cui stile vive in eventi.css. Qui servono le poche regole mancanti,
   confinate alla sezione per non duplicare componenti globali.
   -------------------------------------------------------------------------- */

.trattamento-eventi {
  padding-block: var(--ph-section-y);
  background: var(--ph-surface);
}

.trattamento-eventi .card__meta--data,
.trattamento-eventi .card__luogo,
.trattamento-eventi .card__corso {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.trattamento-eventi .card__meta-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--ph-accent-ink);
}

.trattamento-eventi__vuoto {
  max-width: 46em;
  margin: 0;
  font-size: 17px;
}

/* --------------------------------------------------------------------------
   FAQ in accordion.

   Sull'originale è il widget Royal `wpr-advanced-accordion` (elemento 7e32c03 di
   post-1301.css, gemello 180abdf di post-1297.css): non un elenco piatto con i
   filetti, ma una pila di pillole bianche staccate. Valori esatti:

     sezione ee8b733   nessun margine verticale
     titolo 29882ce    --margin-bottom:50px
     titolo c797abc    Poppins 40px, «FAQ» in 300 corsivo e il resto in 600,
                       nel viola primario, allineati a sinistra (35px ≤767px)
     filetto 6b60a9a   1px #D0D0E6, largo il 75%, allineato a sinistra,
                       2px di imbottitura sopra e sotto
     .wpr-acc-button   fondo #FFFFFF, bordo 1px #D4DEE6, angoli 10px,
                       6px di margine sopra e sotto, imbottitura 12px,
                       Poppins 16px/500 #54595F (15px ≤767px),
                       transition all .3s ease-in-out; in hover e da aperta
                       il testo passa a #692A98
     .wpr-acc-title-text  margin-left:5px (icona di titolo mai visibile)
     .wpr-toggle-icon     15px, riempimento #B3C9DA anche da aperta
     .wpr-acc-panel    fondo #FFFFFFB5, bordo 1px #E2E2E2, angoli 10px,
                       imbottitura 17px, testo Montserrat 14px/500 #777777

   I pannelli nascono chiusi con l'attributo `hidden`: senza JavaScript nessuno
   li aprirebbe, quindi in assenza della classe `js` restano tutti visibili.
   -------------------------------------------------------------------------- */

.trattamento-faq {
  padding-block: 0;
}

.trattamento-faq__heading {
  margin-bottom: var(--ph-section-gap);
  text-align: left;
}

.trattamento-faq__heading .section-heading__title {
  margin: 0;
  font-size: 40px;
  color: var(--ph-primary);
}

.trattamento-faq__eyebrow {
  font-weight: 300;
  font-style: italic;
}

.trattamento-faq__eyebrow::after {
  content: " ";
}

.trattamento-faq__sub {
  font-weight: 600;
}

/* Filetto 6b60a9a, sotto il titolo doppio. */
.trattamento-faq__filetto {
  display: block;
  width: 75%;
  margin-top: 2px;
  border-top: 1px solid var(--ph-divider);
}

@media (max-width: 767px) {
  .trattamento-faq__heading .section-heading__title {
    font-size: 35px;
  }
}

.accordion {
  border-top: 0;
}

.accordion__item {
  border-bottom: 0;
}

.accordion__heading {
  margin: 0;
  font-size: inherit;
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-block: 6px;
  padding: 12px;
  background: var(--ph-white);
  border: 1px solid var(--ph-border-cool);
  border-radius: var(--ph-radius-md);
  font-family: var(--ph-font-heading);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  color: var(--ph-secondary);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

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

.accordion__trigger:hover,
.accordion__trigger:focus-visible,
.accordion__trigger[aria-expanded="true"] {
  color: var(--ph-primary);
}

/* Freccia: 15px, riempimento #B3C9DA. 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» c'è l'intero bottone, largo quanto la colonna, che cambia colore
   del testo in hover e in :focus-visible. */
.accordion__icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--ph-icon-soft);
  transition: all 0.3s ease-in-out;
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(180deg);
}

.accordion__panel {
  margin-bottom: 6px;
  padding: 17px;
  background: rgba(255, 255, 255, 0.71);
  border: 1px solid var(--ph-border-panel);
  border-radius: var(--ph-radius-md);
  font-family: var(--ph-font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-text-muted);
}

.accordion__content > *:first-child {
  margin-top: 0;
}

.accordion__content > *:last-child {
  margin-bottom: 0;
}

.accordion__approfondisci {
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
}

/* Senza JavaScript i pannelli non sarebbero apribili: restano aperti. */
html:not(.js) .accordion__panel[hidden] {
  display: block;
}

html:not(.js) .accordion__icon {
  display: none;
}

@media (max-width: 767px) {
  .accordion__trigger {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion__icon,
  .accordion__trigger {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Chi lo pratica
   -------------------------------------------------------------------------- */

.trattamento-praticanti {
  padding-block: var(--ph-section-y);
  background: var(--ph-surface);
}

.praticanti {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.praticanti__link {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 16px;
  background: var(--ph-white);
  border: 1px solid var(--ph-border);
  border-radius: var(--ph-radius-lg);
  color: inherit;
  transition: transform var(--ph-transition), box-shadow var(--ph-transition);
}

.praticanti__link:hover,
.praticanti__link:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--ph-shadow-card);
  color: inherit;
}

.praticanti__media {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ph-primary-pale);
}

.praticanti__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.praticanti__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.praticanti__nome {
  font-family: var(--ph-font-heading);
  font-size: 17px;
  font-weight: var(--ph-heading-weight);
  color: var(--ph-primary);
}

.praticanti__ruolo {
  font-size: 14px;
}

.praticanti__sedi {
  font-size: 13px;
  color: var(--ph-accent-ink);
}

.praticanti__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ph-accent-ink);
  transition: transform var(--ph-transition);
}

.praticanti__link:hover .praticanti__icon {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .praticanti__link,
  .praticanti__icon {
    transition: none;
  }

  .praticanti__link:hover {
    transform: none;
  }

  .praticanti__link:hover .praticanti__icon {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   CTA di chiusura: «Hai domande? Contattaci per qualsiasi informazione»

   Stesso blocco su tutte e otto le pagine trattamento, sull'indice della
   formazione e su ogni pagina corso. Valori dal CSS reale del sito
   (uploads__elementor__css__post-1301.css; 1297 / 1251 / 1323 / 9775 coincidono):

     bd8691f  sezione, --margin-top/--margin-bottom:100px
     259375e  riquadro a due colonne, --border-radius:20px, --gap:0,
              background #FFFFFF + bg.jpg center/cover con velo ::before
              linear-gradient(-90deg,#C595FF52 0%,#0625FF 100%) e
              --overlay-opacity:0.23; sotto i 1025px va in colonna
     6cc67b8  colonna del testo, --width:56% (100% fra 768 e 1024px),
              --justify-content:center, --padding:30px 30px 30px 70px
              (20px su tutti i lati sotto i 768px)
     cb938b0  titolo doppio Poppins 50px: «Hai domande?» in 300 corsivo e
              «Contattaci per qualsiasi informazione» in 600, nel primario,
              allineati a sinistra. Nessuna variante responsive: l'originale
              non ne dichiara nemmeno una, e non se ne inventa una qui.
     7fbf5ce  testo Montserrat 15px/500 #54595F
     b6b5574  bottone bianco, raggio 4px, Poppins 15px/400 #692A98,
              max-width 248px, durata 0.4s; in hover fondo
              linear-gradient(180deg,#B195E3 0%,#2B2D69 100%) e testo bianco.
              Nel markup dell'originale questo bottone non ha icona.
     2d74cbd  colonna dell'immagine, 10px di imbottitura di default;
              sotto i 1025px l'immagine scende al 70%.
   -------------------------------------------------------------------------- */

.trattamento-cta-finale {
  margin-block: 100px;
}

.trattamento-cta-finale__riquadro {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: row;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--ph-radius-lg);
  background-color: var(--ph-white);
  background-image: var(--cta-finale-sfondo, none);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.trattamento-cta-finale__riquadro::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(-90deg, #c595ff52 0%, #0625ff 100%);
  opacity: 0.23;
}

.trattamento-cta-finale__body {
  display: flex;
  flex: 0 0 56%;
  flex-direction: column;
  gap: var(--ph-widget-gap);
  justify-content: center;
  width: 56%;
  min-width: 0;
  padding: 30px 30px 30px 70px;
}

.trattamento-cta-finale__title {
  margin: 0;
  font-family: var(--ph-font-heading);
  /* 50px, la misura dell'originale, che non dichiara nessuna variante
     responsive per questo titolo. Sotto i 480px però non ci sta più: vedi la
     regola in fondo a questo blocco. */
  font-size: 50px;
  line-height: var(--ph-leading-heading);
  color: var(--ph-primary);

  /* La rete, sull'intero titolo e non sul solo pezzo in grassetto: una parola
     più larga della colonna si spezza invece di sporgere dal riquadro, che ha
     `overflow:hidden` e la taglierebbe a metà senza mostrare che manca.

     Solo `overflow-wrap`: qui c'era anche `hyphens: auto`, ed era il difetto più
     visibile del sito. La colonna del testo è il 56% del riquadro, cioè 606px a
     1300 di finestra: «Contattaci» a 50px ne occupa 268 e ci starebbe comodo,
     ma la sillabazione lo tagliava lo stesso per riempire la riga, e in fondo a
     16 pagine si leggeva «Hai domande? Contat-taci per qualsiasi informazione».
     `overflow-wrap` non fa niente finché la parola entra nella riga. */
  overflow-wrap: break-word;
}

.trattamento-cta-finale__title-light {
  font-weight: 300;
  font-style: italic;
}

/* Fra i due pezzi del titolo doppio l'originale ha uno spazio di testo. */
.trattamento-cta-finale__title-light::after {
  content: " ";
}

.trattamento-cta-finale__title-strong {
  font-weight: 600;
}

/* --- il titolo sotto i 480px ---------------------------------------------
   «informazione» in Poppins 600 a 50px misura 336,5px. La colonna del testo
   della CTA è larga quanto la finestra meno i 20px di gabbia e i 20px di
   imbottitura per lato: a 390px sono 310px, e la parola sporgeva di 26,5px
   dentro un riquadro con `overflow:hidden` — le ultime lettere sparivano
   (misurato: clientWidth 310, scrollWidth 336).

   Il conto dice che il titolo a 50px smette di entrarci sotto i 417px di
   finestra (336,5 + 40 di imbottitura + 40 di gabbia): sopra quella misura
   resta quello dell'originale, e la variante vale solo dove serve davvero. Il
   taglio è 479px, che il tema usa già in contenuto.css.

   34px è la misura che il sito stesso dà allo stesso titolo nel piè di pagina
   sui piccoli schermi, quindi non è un corpo nuovo: «informazione» diventa
   229px e ci sta con margine fino a una finestra da 320px. */
@media (max-width: 479px) {
  .trattamento-cta-finale__title {
    font-size: 34px;
  }
}

.trattamento-cta-finale__text {
  font-family: var(--ph-font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ph-secondary);
}

.trattamento-cta-finale__text > *:first-child {
  margin-top: 0;
}

.trattamento-cta-finale__text > *:last-child {
  margin-bottom: 0;
}

.trattamento-cta-finale__actions {
  display: flex;
}

.trattamento-cta-finale__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 248px;
  padding: 11px 10px;
  border: 0;
  border-radius: 4px;
  background-color: var(--ph-white);
  background-image: none;
  font-family: var(--ph-font-heading);
  font-size: 15px;
  font-weight: 400;
  text-align: center;
  color: var(--ph-primary);
  transition: all 0.4s;
}

.trattamento-cta-finale__btn:hover,
.trattamento-cta-finale__btn:focus-visible {
  background-image: linear-gradient(180deg, #b195e3 0%, #2b2d69 100%);
  color: var(--ph-white);
}

.trattamento-cta-finale__media {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding: 10px;
}

.trattamento-cta-finale__img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .trattamento-cta-finale__riquadro {
    flex-direction: column;
  }

  .trattamento-cta-finale__body {
    flex: 1 1 auto;
    width: 100%;
  }

  .trattamento-cta-finale__img {
    width: 70%;
  }
}

@media (max-width: 767px) {
  .trattamento-cta-finale__body {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trattamento-cta-finale__btn {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Indice /trattamenti/
   -------------------------------------------------------------------------- */

.trattamenti-indice__intro {
  margin-top: 16px;
}

.trattamenti-indice__intro > *:last-child {
  margin-bottom: 0;
}

/* Con la fotografia accanto all'introduzione (campo `intro_immagine`): sul sito
   ufficiale paradisehome.it il container 28a6801 divide la testata in due colonne
   da 740px, testo a sinistra e trattamenti-2.webp a destra. Da 1025px in su la
   testata diventa una griglia a due colonne uguali con i contenuti centrati in
   verticale; sotto, la figura scende sotto il testo. Senza figura la testata è un
   semplice involucro e l'introduzione resta com'era. */
.trattamenti-indice__testata--con-figura {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ph-widget-gap);
  align-items: center;
  margin-top: 16px;
}

.trattamenti-indice__testata--con-figura .trattamenti-indice__intro {
  margin-top: 0;
}

.trattamenti-indice__figura {
  margin: 0;
}

.trattamenti-indice__figura-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--ph-radius-lg);
}

@media (min-width: 1025px) {
  .trattamenti-indice__testata--con-figura {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ph-section-gap);
  }
}

/* La sezione della griglia è il contenitore 3d7f1d7 di post-1249.css:
   --margin-top:0, --margin-bottom:50px. L'intestazione sopra (b257a73) porta i
   50px di stacco dall'alto. */
.trattamenti-elenco {
  padding-block: 0 var(--ph-section-gap);
}

/* Lo scarto della griglia è il `--gap` di default dei container Elementor, 20px,
   non i 28px che il tema aveva scelto. */
.trattamenti-griglia {
  display: grid;
  gap: var(--ph-widget-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

/*
 * Sotto i 600px una colonna sola.
 *
 * Le due colonne restavano fino a 320px: su un telefono da 390 ogni scheda era larga
 * 153px e al titolo — Poppins 26px, non ridotto — restavano 91px. «Allineamento
 * Spirituale» non ci entrava e finiva sotto la scheda accanto, che lo copriva: si
 * leggeva «Allineamer». Una scheda per riga, e il titolo ha tutta la larghezza.
 */
@media (max-width: 599px) {
  .trattamenti-griglia,
  .trattamenti-griglia[data-colonne="3"],
  .trattamenti-griglia[data-colonne="4"] {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1025px) {
  .trattamenti-griglia[data-colonne="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trattamenti-griglia[data-colonne="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* La scheda è l'icon-box dell'originale (elemento e815be5 del CSS di /trattamenti/):
   riquadro bianco con bordo #E2DCF1 e raggio 20px, imbottitura 30px, freccia bianca
   su quadrato viola arrotondato in cima, titolo Poppins 26px/600 e abstract
   Montserrat 16px/500 #777777. Sul sito ufficiale paradisehome.it le schede portano
   invece un'icona decorativa su una testata colorata: `.trattamento-card__icona--immagine`. */
.trattamento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 30px;
  background: var(--ph-white);
  border: 1px solid #e2dcf1;
  border-radius: var(--ph-radius-lg);
  transition: border-color var(--ph-transition);
}

.trattamento-card__icona {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 10%;
  background: var(--ph-primary);
  color: var(--ph-white);
  transition: background-color var(--ph-transition);
}

.trattamento-card__icona .icon {
  width: 25px;
  height: 25px;
}

.trattamento-card:hover .trattamento-card__icona,
.trattamento-card:focus-within .trattamento-card__icona {
  background: #aa95dc;
}

/* Sul sito ufficiale (paradisehome.it) ogni scheda porta in testa un'immagine
   decorativa — Group-29, Group-30, Logo-Retina-1 o Logo-Retina-2, `max-width:92px`
   nel widget pricing-table — sopra una fascia colorata (`padding:55px 20px 15px`)
   che cambia da scheda a scheda: #F9DDEE, l'accent #E76AB5, il secondario #CC8CE3
   o il primario #692A98. Qui la fascia è il riquadro dell'icona allargato a tutta
   la scheda e alto almeno quanto il logo quadrato più l'imbottitura, così le otto
   testate hanno la stessa altezza e i titoli restano allineati. Due simboli sono
   bianchi (Group-29, Logo-Retina-2): senza la tinta sotto non si vedrebbero, per
   questo la tinta non cambia al passaggio del mouse. */
.trattamento-card__icona--immagine {
  --card-tinta: var(--ph-primary);

  width: 100%;
  height: auto;
  min-height: 132px;
  padding: 20px;
  border-radius: var(--ph-radius-md);
  background: var(--card-tinta);
}

.trattamento-card__icona--rosa-chiaro {
  --card-tinta: var(--ph-tint-pink);
}

.trattamento-card__icona--rosa {
  --card-tinta: #e76ab5; /* --e-global-color-accent dell'originale */
}

.trattamento-card__icona--lilla {
  --card-tinta: #cc8ce3; /* --e-global-color-secondary dell'originale */
}

.trattamento-card__icona--viola {
  --card-tinta: var(--ph-primary);
}

.trattamento-card__icona-img {
  display: block;
  width: 92px;
  max-width: 100%;
  height: auto;
}

.trattamento-card:hover .trattamento-card__icona--immagine,
.trattamento-card:focus-within .trattamento-card__icona--immagine {
  background: var(--card-tinta);
}

/* `margin-block-end:20px` sul titolo dell'icon-box (e815be5): era 5px. */
.trattamento-card__title {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 600;
  line-height: var(--ph-leading-heading);
}

.trattamento-card:hover .trattamento-card__title,
.trattamento-card:focus-within .trattamento-card__title {
  color: #aa95dc;
}

.trattamento-card__link {
  color: inherit;
}

/* Tutta la scheda è cliccabile, ma il link resta uno solo: chi naviga con la
   tastiera o lo screen reader incontra un unico elemento attivabile. */
.trattamento-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.trattamento-card__abstract {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 500;
  color: #777;
}

.trattamento-card__abstract > *:last-child {
  margin-bottom: 0;
}

.trattamenti-indice__chiusura {
  padding-bottom: var(--ph-section-y);
}

/* Banner di chiusura (container 5b33998 del sito ufficiale): la fotografia
   Back-Trattamenti.webp a copertura, `--min-height:380px`, `--margin-top:40px`,
   velo nel viola primario con `--overlay-opacity:0.74`. Sopra, la frase in bianco
   (Marko One 40px sull'originale: qui il font dei titoli); sotto, l'invito in un
   riquadro largo al massimo 500px, fondo #FFFFFF73, bordo 3px nel viola, due righe
   centrate nel viola primario a 40px (30px sotto i 1025px). L'attaccamento fisso
   dello sfondo e le animazioni di colore e bagliore dell'originale non si portano.
   Lo sfondo arriva dal template come stile in linea, com'è per il fondo della home. */
.trattamenti-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 380px;
  margin-top: 40px;
  padding: var(--ph-section-gap) 0;
  background-color: var(--ph-primary);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Dopo il testo di chiusura, che ha già i suoi 100px sotto, i 40px in più
   sarebbero un vuoto: sull'originale il banner segue la griglia a 40px. */
.container + .trattamenti-banner {
  margin-top: 0;
}

.trattamenti-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ph-primary);
  opacity: 0.74;
}

.trattamenti-banner__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}

.trattamenti-banner__title {
  margin: 0;
  font-family: var(--ph-font-heading);
  font-size: 40px;
  font-weight: var(--ph-heading-weight);
  line-height: var(--ph-leading-heading);
  color: var(--ph-white);
  overflow-wrap: break-word;
}

.trattamenti-banner__invito {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 500px;
  padding: 20px 24px;
  border: 3px solid var(--ph-primary);
  border-radius: var(--ph-radius-md);
  background: rgba(255, 255, 255, 0.45);
  font-family: var(--ph-font-heading);
  font-size: 30px;
  font-weight: var(--ph-heading-weight);
  line-height: var(--ph-leading-heading);
  color: var(--ph-primary);
  text-decoration: none;
  overflow-wrap: break-word;
  transition: background-color var(--ph-transition);
}

.trattamenti-banner__invito:hover,
.trattamenti-banner__invito:focus-visible {
  background: rgba(255, 255, 255, 0.75);
  color: var(--ph-primary);
}

@media (max-width: 1024px) {
  .trattamenti-banner__title {
    font-size: 30px;
  }

  .trattamenti-banner__invito {
    font-size: 24px;
  }
}

@media (max-width: 767px) {
  .trattamenti-banner {
    min-height: 0;
  }

  .trattamenti-banner__title {
    font-size: 26px;
  }

  .trattamenti-banner__invito {
    padding: 16px;
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trattamento-card,
  .trattamento-card__icona,
  .trattamenti-banner__invito {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Galleria delle Carte di Riprogrammazione: spaziatura dell'originale

   La galleria esiste su una pagina sola, e sull'originale è un container a sé
   (`elementor-element-f392ade`) con `--margin-top:50px` e `--margin-bottom:50px`,
   non con la spaziatura piena di una sezione. Con `var(--ph-section-y)` sotto —
   100px — fra l'ultima carta e «Il Principio Alchemico» si apriva un vuoto di
   266px contro gli 89 dell'originale, e l'ultima riga da due carte lo faceva
   sembrare un errore di impaginazione. Cinquanta sopra e cinquanta sotto, come
   nel CSS per-pagina di Elementor.
   -------------------------------------------------------------------------- */
.trattamento-galleria {
  padding-block: 50px;
}

/* Sull'originale i due container adiacenti (galleria e testo) hanno entrambi 50px di
   margine e i margini verticali fra fratelli si fondono: fra l'ultima carta e «Il
   Principio Alchemico» restano 78px misurati. Qui sono padding, che non si fondono:
   50 + 50 + 10 farebbero 110. Azzerando il padding alto del corpo quando segue la
   galleria si replica la fusione. */
.trattamento-galleria + .trattamento__corpo {
  padding-top: 0;
}

/* Stesso caso a specchio quando la galleria viene dopo il testo (campo
   `galleria_posizione` = 'dopo_corpo', com'è sul sito ufficiale per le Carte): fra
   l'ultimo paragrafo e la prima carta resterebbero 50 + 10 + 50 = 110px, contro i
   ~60 del sito ufficiale dove i due container si fondono. */
.trattamento__corpo + .trattamento-galleria {
  padding-top: 0;
}