/* components.css — resa dei componenti di integrative_medicine (studio di medicina integrata).
   Registro clinico contemporaneo: la persona al centro, testata cinematografica, movimento sobrio.
   I token stanno in tokens.css e NON si ridichiarano qui. Nessun colore letterale fuori dai marchi di
   terzi (il verde WhatsApp), che infatti hanno un token proprio e vivono solo sul loro pulsante. */

/* =========================================================================
   BOTTONI — forma pill (i riferimenti moderni della categoria stanno fra 38 e 57px di raggio).
   ========================================================================= */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--text-base);
  padding: .78em 1.5em; border-radius: var(--radius-pill); border: 2px solid transparent;
  background: var(--brand); color: var(--on-dark);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  text-align: center;
}
.btn:hover { background: var(--brand-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* ⚠ L'oro pieno porta testo SOLO su petrolio. Questo bottone vive sulle bande scure: lì l'inchiostro
   sull'oro fa 12,4 ed è la coppia più forte del sito. Su fondo chiaro NON si usa. */
.btn--accent { background: var(--accent); color: var(--ink); }
.btn--accent:hover { background: #E8B302; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn--ghost:hover { background: var(--brand); color: var(--on-dark); }
.btn--ghost-on-dark { background: transparent; color: var(--on-dark); border-color: rgba(255,255,255,.45); }
.btn--ghost-on-dark:hover { background: var(--on-dark); color: var(--brand); border-color: var(--on-dark); }
/* WhatsApp: marchio di terzi, verde scurito quanto basta perché il bianco ci stia sopra in AA (4,71). */
.btn--wa { background: var(--whatsapp); color: #FFFFFF; }
.btn--wa:hover { background: var(--whatsapp-dark); color: #FFFFFF; }
.btn__ico { width: 1.15em; height: 1.15em; background: currentColor; flex: none;
  -webkit-mask: url("../assets/img/icons/social-whatsapp.svg") no-repeat center / contain;
  mask: url("../assets/img/icons/social-whatsapp.svg") no-repeat center / contain; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }

/* =========================================================================
   TESTATA — agganciata, petrolio pieno. Il marchio del cliente è BIANCO: vive su questo fondo.
   ========================================================================= */
/* LA TESTATA: a pagina aperta è una barra NORMALE, a filo e piena. Solo quando si scorre si stacca dai
   bordi e diventa una capsula sospesa. È il gesto che si nota senza doverlo cercare, e non sposta nulla
   al caricamento — una capsula già staccata al primo sguardo si legge come un errore di allineamento.
   ⚠ Il `backdrop-filter` crea un containing-block per il `position: fixed`: l'overlay del menu si
   limiterebbe all'altezza della capsula. Sotto la soglia mobile il filtro non si applica mai. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  width: 100%; margin-inline: auto;
  background: var(--brand); color: var(--on-dark);
  border: 1px solid transparent; border-radius: 0;
  transition: width .38s var(--ease), top .38s var(--ease), border-radius .38s var(--ease),
              background .38s var(--ease), box-shadow .38s var(--ease), backdrop-filter .38s var(--ease);
}
@media (min-width: 900px) {
  .site-header.is-scrolled {
    top: var(--space-3);
    width: min(100% - (var(--gutter) * 1.2), calc(var(--container) + 9rem));
    border-radius: var(--radius-pill);
    border-color: rgba(255,255,255,.16);
    background: rgba(1, 62, 88, .82);
    backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 18px 44px -24px rgba(1,29,44,.92);
  }
  .site-header.is-scrolled .site-header__row { padding-inline: var(--space-5); }
}

/* ⚠ Regola 16: marchio, navigazione e CTA sulla STESSA linea e centrati verticalmente (spazio sopra =
   sotto). I figli del wp:group portano un margine di blocco WP che li spinge sotto il centro: si azzera.
   ⚠⚠ `flex-wrap: nowrap` è ciò che tiene la testata su una riga: senza, con sei voci di menu il blocco si
   spezza in tre righe e l'intestazione triplica di altezza. */
.site-header__row {
  display: flex; align-items: center; flex-wrap: nowrap; gap: var(--space-4);
  padding-block: var(--space-3);
  transition: padding var(--dur) var(--ease), padding-inline .38s var(--ease);
}
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); flex: 0 1 auto; min-width: 0; }
.wordmark__mark { width: 38px; height: 38px; flex: none; }
.wordmark__txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.wordmark__name { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; }
/* La qualifica viene dai dati business, in forma BREVE (b.brandTag = la prima voce della categoria):
   l'elenco intero delle discipline e' largo quanto mezza testata. Non va mai a capo. */
.wordmark__tag { font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--azzurro); white-space: nowrap; }

/* ⚠ La navigazione si stacca dal marchio: senza questo respiro, con la capsula stretta «Home» finisce
   appiccicata alla dicitura del marchio. Il valore è il margine minimo, non un'estetica. */
.site-nav { margin-left: auto; min-width: 0; padding-left: clamp(1.5rem, 3vw, 3.5rem); }
.site-header__cta { display: inline-flex; align-items: center; gap: var(--space-3); flex: none; }
.site-header__tel { font-weight: 600; white-space: nowrap; font-size: .95rem; }
.site-header__tel:hover { color: var(--azzurro); }
/* Il bottone della testata e' piu' compatto di quelli in pagina: li' e' un gesto, qui un'ancora. */
.site-header__cta .btn { padding: .55em 1.1em; font-size: .92rem; }
/* ⚠⚠ Sotto la soglia mobile la testata porta SOLO marchio e hamburger: con `nowrap` il telefono e il
   pulsante WhatsApp non entrano in 390px e allargavano la pagina di 12px su OGNI pagina — un difetto
   costante, quindi facile da attribuire al contenuto invece che alla testata. I due gesti non si perdono:
   la barra fissa in basso li porta entrambi, con bersagli piu' grandi. */
@media (max-width: 899.98px) {
  .site-header__cta { display: none; }
  .wordmark__tag { display: none; }
  .wordmark__mark { width: 34px; height: 34px; }
}

/* Nav desktop. ⚠ A parità di specificità vince WP (il CSS dei blocchi è iniettato DOPO il tema): per il
   sotto-menu si RICOPIA lo schema di selettore di WP, non se ne scrive uno più corto. */
.site-header .wp-block-navigation { font-family: var(--font-body); font-weight: 500; font-size: .9rem; }
/* ⚠⚠ Il `nowrap` serve SOLO alla testata desktop e va confinato lì: applicato anche sotto la soglia
   dell'overlay comprimeva il pulsante hamburger a 5px di larghezza — il menu c'era e si apriva, ma non
   si vedeva. Un difetto che il crawl non coglie (la pagina resta 200) e che si trova solo MISURANDO il
   bersaglio del tocco. */
@media (min-width: 900px) {
  .site-header .wp-block-navigation__container { flex-wrap: nowrap; gap: clamp(.5rem, 1.1vw, 1.15rem); }
}
.site-header .wp-block-navigation .wp-block-navigation-item__content { padding-block: var(--space-2); white-space: nowrap; }
.site-header .wp-block-navigation a:hover { color: var(--azzurro); }
.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: var(--brand-dark); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  padding: var(--space-2) 0; box-shadow: var(--shadow-md); min-width: 15rem;
}
.site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: var(--space-2) var(--space-4); color: var(--on-dark);
}

/* Overlay del menu su mobile.
   ⚠⚠ A PARITÀ DI SPECIFICITÀ VINCE WP: il CSS dei blocchi è iniettato DOPO il tema, e la sua regola
   `.wp-block-navigation:not(.has-background) … .is-menu-open { background-color: #fff }` tiene l'overlay
   BIANCO. Con il testo bianco sopra, il menu si apriva davvero ma non si vedeva nulla — voci comprese.
   Si vince solo RICOPIANDO il suo schema di selettore e aggiungendo un livello, non scrivendone uno più
   corto. Stessa cosa per il colore del testo e per i sotto-menu, che WP rende come card bianche. */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open,
.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--grad-abisso); color: var(--on-dark);
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--chrome) + var(--space-6)) var(--gutter) var(--space-8);
}
.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open a,
.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open button,
.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--on-dark);
}
/* i sotto-menu: WP li serve come card BIANCHE con ombra anche dentro l'overlay scuro */
.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  background: transparent; color: var(--on-dark); border: 0; box-shadow: none; min-width: 0;
}
.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  padding-left: var(--space-5) !important; margin-left: 0 !important; width: 100%;
}
.site-header .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--azzurro); font-size: 1rem; padding-left: 0; border-bottom-color: rgba(255,255,255,.08);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  width: 100%; text-align: left; padding: var(--space-3) 0;
  border-bottom: 1px solid rgba(255,255,255,.14); font-size: 1.15rem;
}
/* i sotto-menu su mobile vanno INLINE: il default WP li rende come card-dropdown, illeggibili qui */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important; border: 0 !important; box-shadow: none !important; background: none !important;
  padding-left: var(--space-4);
}
/* l'ultima voce non deve finire sotto la barra CTA fissa */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-bottom: 96px; width: 100%;
}

/* --- BERSAGLI DEL TOCCO: sotto i 44px un pulsante è raggiungibile solo con fortuna. Valgono per
   l'hamburger e per la X, che WordPress consegna rispettivamente senza larghezza propria e a 24px nudi.
   ⚠⚠ Le misure vanno DENTRO la soglia mobile: dichiarate fuori, forzavano `display: grid` sull'hamburger
   e lo rendevano visibile anche su desktop accanto alla navigazione completa. --- */
@media (min-width: 900px) {
  .site-header .wp-block-navigation__responsive-container-open { display: none !important; }
}
@media (max-width: 899.98px) {
.site-header .wp-block-navigation__responsive-container-open {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  padding: 0; margin-left: var(--space-2); color: var(--on-dark); background: transparent; border: 0;
  border-radius: var(--radius); transition: background var(--dur) var(--ease);
}
.site-header .wp-block-navigation__responsive-container-open:hover { background: rgba(255,255,255,.12); }
.site-header .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }
.site-header .wp-block-navigation__responsive-container-close {
  width: 46px; height: 46px; padding: 10px; display: grid; place-items: center;
  top: var(--space-5); right: var(--gutter); color: var(--on-dark);
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.06); transition: background var(--dur) var(--ease);
}
.site-header .wp-block-navigation__responsive-container-close:hover { background: rgba(255,255,255,.16); }
.site-header .wp-block-navigation__responsive-container-close svg { width: 22px; height: 22px; }
/* le voci occupano tutta la riga e hanno un bersaglio alto: a 52px di larghezza il tocco fallisce */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100%; gap: 0; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  min-height: 60px; display: flex; align-items: center; padding: var(--space-4) var(--space-2);
}
/* l'overlay non deve sbordare: era 402px su un viewport da 390 */
.site-header .wp-block-navigation__responsive-container.is-menu-open { width: 100%; max-width: 100vw; left: 0; right: 0; }
}

/* =========================================================================
   BARRA CTA MOBILE + BOLLA WHATSAPP
   ========================================================================= */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; gap: 1px; background: rgba(1,29,44,.2);
  box-shadow: 0 -8px 24px -14px rgba(1,29,44,.6);
}
.cta-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-2); font-weight: 600; font-size: .95rem; }
.cta-bar .cta-bar__wa { background: var(--whatsapp); color: #FFFFFF; }
.cta-bar .cta-bar__tel { background: var(--brand); color: var(--on-dark); }
@media (max-width: 599.98px) { .cta-bar { display: flex; } body { padding-bottom: var(--ctabar-h); } }

/* Bolla WhatsApp fissa: il gesto principale del sito.
   ⚠⚠ L'alone sta su due PSEUDO-elementi con pointer-events:none — se intercettasse i click, il pulsante
   sotto smetterebbe di funzionare e il crawl non se ne accorgerebbe (resterebbe 200 su tutto).
   ⚠ È un alone LENTO (2,4s), non un lampeggio: un lampeggio sarebbe fastidioso e cadrebbe sui limiti
   WCAG per il contenuto che lampeggia. Con reduced-motion sparisce del tutto. */
.wa-fab {
  position: fixed; right: clamp(1rem, 2.4vw, 2rem); bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: 56; width: 58px; height: 58px; border-radius: var(--radius-pill);
  background: var(--whatsapp); color: #FFFFFF; display: grid; place-items: center;
  box-shadow: 0 12px 30px -10px rgba(1,29,44,.55);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.wa-fab__ico { width: 30px; height: 30px; background: currentColor;
  -webkit-mask: url("../assets/img/icons/social-whatsapp.svg") no-repeat center / contain;
  mask: url("../assets/img/icons/social-whatsapp.svg") no-repeat center / contain; }
.wa-fab::before, .wa-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--whatsapp); pointer-events: none;
  animation: fp-wa-pulse var(--pulse-dur) var(--ease) infinite;
}
.wa-fab::after { animation-delay: calc(var(--pulse-dur) / 2); }
.wa-fab:hover { background: var(--whatsapp-dark); transform: translateY(-2px); }
.wa-fab:hover::before, .wa-fab:hover::after { animation-duration: 1600ms; }
@keyframes fp-wa-pulse {
  from { transform: scale(1); opacity: .55; }
  to   { transform: scale(2.1); opacity: 0; }
}
@media (max-width: 599.98px) { .wa-fab { bottom: calc(var(--ctabar-h) + .75rem); width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) {
  .wa-fab::before, .wa-fab::after { animation: none; opacity: 0; }
  .wa-fab:hover { transform: none; }
}

/* =========================================================================
   TESTATA A DUE CAMPI — testo a sinistra, fotografia in una cornice VERTICALE che sfonda nella banda
   successiva. È il dispositivo che tiene insieme due richieste: la struttura da personal brand del
   riferimento di categoria, e la fotografia che taglia le sezioni invece di stare chiusa nella propria.
   ⚠ Lo sfondamento è un margine NEGATIVO sulla cornice + `overflow: visible` sulla banda: se la banda
   taglia, la foto si tronca e l'effetto sparisce senza che nulla lo segnali.
   ========================================================================= */
.hero {
  position: relative; z-index: 1; overflow: visible;
  background: var(--grad-notte); color: var(--on-dark);
  padding-block: calc(var(--space-8)) clamp(3rem, 2rem + 3vw, 5rem);
}
/* Aloni: cerchi di luce sfocati. Tolgono la piattezza alla campitura senza aggiungere oggetti da leggere.
   ⚠ Vivono dentro un contenitore che li RITAGLIA: sbordavano di 115px oltre il viewport. Il taglio non si
   può mettere sulla banda, perché per specifica un asse a `clip` toglie il `visible` all'altro e la
   cornice che sfonda verso il basso sparirebbe insieme agli aloni. */
.hero__auras { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.hero__aura { position: absolute; border-radius: var(--radius-pill); pointer-events: none; filter: blur(6px); }
.hero__aura--a { width: min(46vw, 620px); aspect-ratio: 1; background: var(--alone-azzurro); top: -14%; right: -8%; }
.hero__aura--b { width: min(30vw, 420px); aspect-ratio: 1; background: var(--alone-oro); bottom: 12%; left: -10%; opacity: .7; }

.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem); align-items: end;
  padding-bottom: 0;
}
/* il testo si stacca dal fondo della banda; la cornice no, perche' deve uscirne */
.hero__body { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }
.hero__body { max-width: 34rem; }
/* ⚠ Nessuno spazio morto sopra il titolo: l'occhiello è la prima cosa e ha un margine proprio piccolo.
   Il vuoto sopra la scritta era il difetto piu' visibile della versione precedente. */
.hero .eyebrow { color: var(--accent); margin-bottom: var(--space-2); }
.hero h1 { color: var(--on-dark); margin: 0; }
.hero .lead { color: var(--on-dark); max-width: 40ch; margin-top: var(--space-3); }
.hero__checks { display: grid; gap: var(--space-2); margin-top: var(--space-5); }
.hero__checks li { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; font-size: .95rem; }
.hero__checks li::before {
  content: ""; width: 1.1rem; height: 1.1rem; flex: none; background: var(--accent);
  -webkit-mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
  mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
}
.hero .btn-row { margin-top: var(--space-6); }

/* La cornice: verticale, arrotondata, e SFONDA di 90px nella banda sotto. */
.hero__frame {
  position: relative; margin: 0;
  border-radius: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 4.55; margin-bottom: 0;
  outline: 1px solid rgba(255,255,255,.14); outline-offset: -1px;
}
.hero__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
/* La banda che segue la testata deve LASCIARE POSTO allo sfondamento, non coprirlo. */
.hero + * { padding-top: var(--section-y); }

@media (max-width: 899.98px) {
  .hero__grid { grid-template-columns: 1fr; padding-bottom: var(--space-7); }
  .hero__frame { aspect-ratio: 4 / 3.2; margin-bottom: 0; }
  .hero__body { max-width: none; }
}

/* Testata design-only: nessuna fotografia utilizzabile → campo pieno, MAI una foto finta. */
.hero--design { background: var(--grad-abisso); padding-block: calc(var(--chrome) * .5 + var(--space-8)) var(--space-9); }
.hero--design .hero__grid { grid-template-columns: 1fr; padding-bottom: 0; }
.hero--design .hero__body { max-width: 48rem; }
.hero--design .hero__deco {
  position: absolute; inset-inline-end: -8%; inset-block-start: 12%; width: min(52vw, 620px); aspect-ratio: 1;
  border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.16); pointer-events: none;
}
.hero--design .hero__deco::after { content: ""; position: absolute; inset: 18%; border-radius: inherit; border: 1px solid rgba(255,255,255,.1); }
.hero--design + * { padding-top: var(--section-y); }

/* Testata di pagina interna. ⚠ NON riusa la scala della testata (--text-3xl): è un cappello di pagina, non
   un hero — con quella scala «occupa mezza schermata», e la page-head è CONDIVISA da tutte le pagine. */
/* La testata di pagina e la prima sezione si compenetrano: la sezione sale, la testata la accoglie.
   Fra le due si apriva una gola di 120-160px su ogni pagina interna. */
.page-head {
  background: var(--grad-notte); color: var(--on-dark); position: relative; overflow: hidden;
  padding-block: calc(var(--chrome) * .55 + var(--space-6)) var(--space-7);
}
.page-head::before { content: ""; position: absolute; inset: 0; background: var(--grad-velo); pointer-events: none; }
.page-head > * { position: relative; }

.page-head h1 { font-size: var(--text-2xl); color: var(--on-dark); }
.page-head .eyebrow { color: var(--accent); }
.page-head .lead { color: var(--on-dark-muted); margin-top: var(--space-3); }

/* =========================================================================
   INTESTAZIONE DI SEZIONE
   ========================================================================= */
.section-intro { max-width: 44rem; margin-bottom: var(--space-5); }
.section-intro--center { margin-inline: auto; text-align: center; }
.section-intro--center .lead { margin-inline: auto; }
.section--brand .section-intro .lead, .section--brand-dark .section-intro .lead { color: var(--on-dark-muted); }

/* =========================================================================
   SPLIT (manifesto / approfondimento) — foto e testo affiancati, lati alternati.
   ========================================================================= */
/* ⚠ La colonna fotografica era alta 705-828px contro i 288-400 del testo: mezza banda restava vuota
   accanto alla foto. Il testo si CENTRA contro la colonna e la foto si accorcia — il vuoto si toglie
   riequilibrando, non riempiendolo di parole che il materiale non ha. */
.split { display: grid; grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.split--reverse .split__media { order: 2; }
/* ⚠ La colonna fotografica ESCE dalla banda sopra e sotto (margine negativo) e resta agganciata mentre
   il testo scorre: e' il dispositivo che lega due sezioni invece di lasciarle impilate. La banda deve
   quindi restare `overflow: visible`, o il taglio annulla tutto senza segnalarlo. */
.split__media {
  position: sticky; top: calc(var(--chrome) + var(--space-4));
  margin-block: calc(var(--section-y) * -0.62);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg);
}
.split__media img { width: 100%; aspect-ratio: 3 / 3.5; max-height: 34rem; object-fit: cover; }
/* ⚠ Un confronto PRIMA/DOPO non si ritaglia: tagliandolo si perde il termine di paragone, che è tutto
   quello che quell'immagine ha da dire. Si posa intero su una superficie di marca. */
.split__media--intera { background: var(--surface); }
.split__media--intera img { aspect-ratio: 4 / 3.2; max-height: 30rem; object-fit: contain; }
/* il segno d'appoggio: un quarto di cerchio azzurro dietro la foto, come nel sito attuale del cliente */
.split__media::after {
  content: ""; position: absolute; inset-block-end: -18%; inset-inline-start: -12%;
  width: 46%; aspect-ratio: 1; background: var(--azzurro-tint); border-radius: var(--radius-pill); z-index: -1;
}
.split__body > * + * { margin-top: var(--space-4); }
.split__body { padding-block: var(--space-2); }
@media (max-width: 899.98px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  /* su una colonna sola lo sfondamento non ha senso: la foto tornerebbe sopra il testo */
  .split__media { position: static; margin-block: 0; }
  .split__media img { aspect-ratio: 4 / 3; }
}

/* Elenco di conferme: ricorre in più sezioni. */
.checks { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.checks li { display: flex; align-items: flex-start; gap: var(--space-3); }
.checks li::before {
  content: ""; width: 1.35rem; height: 1.35rem; flex: none; margin-top: .16rem; background: var(--brand);
  -webkit-mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
  mask: url("../assets/img/icons/check.svg") no-repeat center / contain;
}
.section--brand .checks li::before, .section--brand-dark .checks li::before, .hero .checks li::before { background: var(--accent); }
.checks--two { grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: var(--space-3) var(--space-6); }
@media (max-width: 767.98px) { .checks--two { grid-template-columns: 1fr; } }

/* =========================================================================
   PILASTRI — le discipline, schede a icona su tre/quattro colonne.
   ========================================================================= */
.pillars { padding-block: var(--section-y); background: var(--grad-alba); position: relative; z-index: 1; }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tile-gap); }
.cards--three { grid-template-columns: repeat(3, 1fr); }
.cards--two { grid-template-columns: repeat(2, 1fr); }
.card {
  position: relative; overflow: hidden;
  background: var(--paper); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* filetto d'accento che si allunga all'hover: un dettaglio piccolo, non un effetto */
.card::after {
  content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 0;
  background: var(--grad-oro); transition: height .45s var(--ease);
}
.card:hover::after { height: 100%; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--azzurro); }
/* il disco: sfumatura petrolio con l'icona in negativo, invece di un glifo nudo */
.card__icon {
  width: 3.1rem; height: 3.1rem; flex: none; border-radius: var(--radius-pill);
  background: var(--grad-notte); position: relative;
}
.card__icon::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 1.6rem; height: 1.6rem;
  background: var(--azzurro);
  -webkit-mask: inherit; mask: inherit;
}
.card h3 { font-size: 1.08rem; margin-top: var(--space-1); }
.card p { color: var(--ink-muted); font-size: .95rem; line-height: 1.55; }
.card__more { margin-top: auto; padding-top: var(--space-3); font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: .4rem; }
.card__more::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.card:hover .card__more::after { transform: translateX(4px); }
/* Una scheda che è tutta un link: il click prende l'intera tessera, non solo la riga finale. */
.card--link { position: relative; }
.card--link .card__more::before { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (max-width: 1023.98px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599.98px) { .cards, .cards--three, .cards--two { grid-template-columns: 1fr; } }

/* =========================================================================
   METODO — i principi come passi numerati, con la fotografia dello strumento a fianco.
   ========================================================================= */
.method { padding-block: var(--section-y); background: var(--paper); position: relative; z-index: 1; overflow: visible; }
.method__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
/* Lo sfalsamento del mosaico rompe l'allineamento perfetto — che e' cio' che fa sembrare una griglia un
   foglio di calcolo — ma va SOTTO la linea del testo: con uno scarto negativo la prima tessera saliva
   sopra l'intestazione e ne copriva l'ultima riga. */
.mosaic > :nth-child(3) { margin-top: calc(var(--tile-gap) * 1.2); }
.mosaic > :nth-child(4) { margin-top: calc(var(--tile-gap) * 0.5); }
.steps { display: grid; gap: var(--space-5); counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start; }
.step__icon {
  width: 3rem; height: 3rem; border-radius: var(--radius-pill); background: var(--azzurro-tint);
  display: grid; place-items: center; flex: none; position: relative;
}
.step__icon::before { content: ""; width: 1.6rem; height: 1.6rem; background: var(--brand); }
.step__icon::after {
  counter-increment: step; content: counter(step);
  position: absolute; inset-block-start: -.35rem; inset-inline-end: -.35rem;
  width: 1.4rem; height: 1.4rem; border-radius: var(--radius-pill);
  background: var(--brand); color: var(--on-dark);
  font-family: var(--font-display); font-size: .72rem; font-weight: 600;
  display: grid; place-items: center;
}
.step h3 { font-size: 1.1rem; }
.step p { color: var(--ink-muted); font-size: .97rem; margin-top: .2rem; }
/* Lo strumento è un prodotto SCONTORNATO su fondo chiaro: `cover` lo taglierebbe. Va `contain`, posato su
   un campo di marca — la regola vale per ogni foto con più del 25% di bordo uniforme. */
/* Il pannello dello strumento SALE nella banda precedente: lega le due sezioni e riempie il vuoto che
   si apriva sopra di esso quando la colonna dei passi era piu' alta. */
.method__tool {
  background: var(--grad-notte); border-radius: var(--radius-lg); padding: var(--space-6);
  text-align: center; color: var(--on-dark); box-shadow: var(--shadow-lg);
  position: sticky; top: calc(var(--chrome) + var(--space-4)); margin-top: calc(var(--section-y) * -0.5);
}
.method__tool img { width: 100%; max-height: 18rem; object-fit: contain; margin-inline: auto; }
.method__tool h3 { color: var(--on-dark); margin-top: var(--space-4); }
/* variante senza fotografia: il pannello resta un blocco pieno, non un riquadro vuoto */
.method__tool--txt { display: flex; flex-direction: column; justify-content: center; text-align: left; min-height: 100%; gap: var(--space-2); }
.method__tool--txt h3 { margin-top: 0; font-size: var(--text-lg); }
.method__tool p { color: var(--on-dark-muted); font-size: .95rem; margin-top: var(--space-2); }
.method__tool .btn { margin-top: var(--space-4); }
@media (max-width: 899.98px) {
  .method__grid { grid-template-columns: 1fr; }
  .method__tool { position: static; margin-top: 0; }
  .mosaic > :nth-child(1), .mosaic > :nth-child(3) { margin-top: 0; }
}

/* Varianti DESIGN delle sezioni asset-driven: si accendono quando le fotografie non reggono la soglia.
   Non mostrano mai una foto finta né un riquadro con un'immagine rotta — è per questo che esistono. */
.method--design .steps--row { grid-template-columns: repeat(3, 1fr); }
.method--design .step { grid-template-columns: 1fr; }
.method__note { margin-top: var(--space-7); padding: var(--space-6); background: var(--azzurro-tint); border-radius: var(--radius-lg); }
.method__note p { max-width: 68ch; color: var(--ink); }
.method__note .checks { margin-top: var(--space-4); }
@media (max-width: 899.98px) { .method--design .steps--row { grid-template-columns: 1fr; } }

/* Il manifesto senza fotografia diventa una dichiarazione tipografica centrata sulla colonna di lettura. */
.statement { max-width: 54rem; }
.statement__body { margin-top: var(--space-4); color: var(--ink-muted); max-width: 68ch; }

/* Lo studio senza fotografie resta la sola intestazione: una banda vuota è peggio di una banda assente,
   ma il testo della sezione è comunque contenuto del cliente e va mostrato. */
.studio--design { padding-block: calc(var(--section-y) * 0.7); }

/* =========================================================================
   STUDIO — mosaico fotografico asimmetrico (mai una griglia piatta: è il segno della categoria).
   ========================================================================= */
.studio { padding-block: var(--section-y); background: var(--grad-alba); position: relative; z-index: 1; }
.mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(8rem, 5rem + 9vw, 13rem); gap: var(--tile-gap); }
.mosaic a, .mosaic figure { position: relative; overflow: hidden; border-radius: var(--radius-lg); display: block; margin: 0; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform 620ms var(--ease); }
.mosaic a:hover img { transform: scale(1.05); }
.mosaic > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
.mosaic > :nth-child(4) { grid-column: span 2; }
@media (max-width: 899.98px) {
  .mosaic { grid-template-columns: repeat(2, 1fr); }
  .mosaic > :nth-child(1) { grid-column: span 2; }
  .mosaic > :nth-child(4) { grid-column: span 2; }
}
@media (max-width: 479.98px) { .mosaic { grid-template-columns: 1fr; } .mosaic > * { grid-column: auto !important; grid-row: auto !important; } }

/* =========================================================================
   FIDUCIA — benefici, convenzioni e voci dei pazienti, su banda petrolio.
   ========================================================================= */
.trust { padding-block: var(--section-y) calc(var(--section-y) + var(--space-8)); background: var(--grad-notte); color: var(--on-dark); position: relative; z-index: 1; overflow: hidden; }
/* velo diagonale: la banda scura non e' una campitura piatta ma una luce che la attraversa */
.trust::before { content: ""; position: absolute; inset: 0; background: var(--grad-velo); pointer-events: none; }
.trust > * { position: relative; }
.trust .lead { color: var(--on-dark-muted); }
.benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tile-gap); }
.benefit { display: flex; flex-direction: column; gap: var(--space-3); }
.benefit__icon {
  width: 3.2rem; height: 3.2rem; border-radius: var(--radius-pill); background: rgba(255,255,255,.1);
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2);
}
.benefit__icon::before { content: ""; width: 1.7rem; height: 1.7rem; background: var(--azzurro); }
.benefit h3 { color: var(--on-dark); font-size: 1.05rem; }
.benefit p { color: var(--on-dark-muted); font-size: .95rem; }
@media (max-width: 899.98px) { .benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .benefits { grid-template-columns: 1fr; } }

/* Convenzioni: i marchi dei convenzionatori. Sono loghi di TERZI, con proporzioni e fondi diversi fra
   loro: vanno `contain` su una piastrella chiara, mai ritagliati né stirati. */
/* i marchi hanno proporzioni di terzi diverse: la griglia le pareggia, il flex no */
.partners { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--tile-gap); margin-top: var(--space-5); }
.partner {
  background: var(--paper); border-radius: var(--radius-lg); padding: var(--space-4);
  display: grid; place-items: center; min-height: 5.5rem;
}
.partner img { max-height: 3.4rem; width: auto; object-fit: contain; }
.partner__txt { color: var(--brand); font-family: var(--font-display); font-weight: 600; text-align: center; font-size: .92rem; line-height: 1.35; }
.partner--txt { background: rgba(255,255,255,.94); }
.partner { transition: transform var(--dur) var(--ease); }
.partner:hover { transform: translateY(-3px); }
@media (max-width: 899.98px) { .partners { grid-template-columns: repeat(2, 1fr); } }

/* Voci dei pazienti */
/* ⚠ Sette voci in una griglia a tre colonne lasciano due celle vuote in fondo: il difetto che si vede.
   Le colonne CSS le bilanciano da sole, qualunque sia il numero e la lunghezza dei testi. */
/* ⚠ A colonne CSS l'ultima citazione di ogni colonna finisce a filo del fondo banda e le colonne
   chiudono a quote diverse: sotto serve aria, e fra una citazione e l'altra un distacco pieno. */
.voices { columns: 3; column-gap: var(--tile-gap); margin-top: var(--space-5); padding-bottom: var(--space-6); }
.voice { break-inside: avoid; margin-bottom: calc(var(--tile-gap) * 1.35); display: block; }
.voices > .voice:last-child { margin-bottom: 0; }
.voice { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.voice p { color: var(--on-dark); font-size: .97rem; }
.voice { margin: 0; }
.voice p::before { content: "\201C"; color: var(--accent); font-size: 2rem; line-height: 0; vertical-align: -.35rem; margin-right: .15rem; }
.voice__who { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; }
/* Il nome è in ORO: su questa banda petrolio l'oro pieno porta testo (6,30). Su fondo chiaro sarebbe 1,60. */
.voice__name { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--accent); font-style: normal; }
/* ⚠ NESSUNA fotografia profilo e NESSUNA valutazione a stelle: gli avatar del sito attuale sono immagini
   STOCK abbinate a nomi di persona (licenza da verificare), e «N stelle» è un claim che il claim-linter
   blocca. Le voci restano testo e firma — che è la parte che il cliente ha davvero. */
@media (max-width: 1199.98px) { .voices { columns: 2; } }
@media (max-width: 767.98px) { .voices { columns: 1; } }

/* =========================================================================
   SEDI — la fascia delle sedi operative (questo mestiere è multi-sede per natura).
   ========================================================================= */
.sedi-band { padding-block: var(--section-y); background: var(--grad-alba); position: relative; z-index: 1; }
/* ⚠ Il markup delle schede sede lo produce `sedeCards()` degli helper CONDIVISI: qui si stila quello che
   quella funzione emette (h3 · .sede__addr · table.hours · .map-link), non una seconda struttura. Una
   copia da tenere allineata a mano è esattamente ciò che quell'helper esiste per evitare. */
.sedi { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tile-gap); }
.sede { background: var(--paper); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.sede h3 { display: flex; align-items: center; gap: var(--space-2); font-size: 1.05rem; color: var(--brand); }
.sede h3::before {
  content: ""; width: 1.25rem; height: 1.25rem; flex: none; background: var(--brand);
  -webkit-mask: url("../assets/img/icons/sede.svg") no-repeat center / contain;
  mask: url("../assets/img/icons/sede.svg") no-repeat center / contain;
}
.sede__addr { font-style: normal; color: var(--ink-muted); line-height: 1.55; }
.sede__addr a:hover { color: var(--brand); text-decoration: underline; }
.map-link { margin-top: auto; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: .35rem; }
.map-link::after { content: "\2197"; }
.map-link:hover { color: var(--accent-dark); }
/* Gli orari sono una TABELLA vera, non un'immagine: leggibile da uno screen reader e indicizzabile. */
.hours { width: 100%; border-collapse: collapse; font-size: .93rem; }
.hours caption { text-align: left; font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); padding-bottom: var(--space-2); }
.hours th { text-align: left; font-weight: 500; color: var(--ink); padding: .3rem 0; }
.hours td { text-align: right; color: var(--ink-muted); padding: .3rem 0; }
.hours .is-closed { color: var(--brand-mid); }
.contact-info .sede { background: transparent; border: 0; padding: 0; margin-top: var(--space-3); gap: var(--space-2); }
.contact-info .sede + .sede { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.contact-info .hours { margin-top: var(--space-2); }
@media (max-width: 899.98px) { .sedi { grid-template-columns: 1fr; } }

/* =========================================================================
   FASCIA CONTATTI FINALE
   ========================================================================= */
.cta-band {
  background: var(--grad-abisso); color: var(--on-dark);
  padding-block: var(--space-7) var(--section-y); position: relative; z-index: 1; overflow: hidden;
}
.cta-band__panel {
  background: var(--grad-notte); border-radius: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem); box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.12);
}
.cta-band::before { content: ""; position: absolute; width: min(34vw,440px); aspect-ratio: 1; background: var(--alone-oro); top: 6%; right: -4%; pointer-events: none; z-index: 0; }
.cta-band > * { position: relative; }
.cta-band .eyebrow { color: var(--accent); }
.cta-band h2 { color: var(--on-dark); }
.cta-band .lead { color: var(--on-dark-muted); }
.cta-band__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.cta-band__grid > * { align-self: center; }
@media (max-width: 899.98px) { .cta-band__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   PAGINA CONTATTI — due colonne: modulo a sinistra, recapiti a destra.
   ========================================================================= */
.contact-cols { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
.contact-form { display: grid; gap: var(--space-4); }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .8em 1em; width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--brand); outline: 2px solid var(--focus); outline-offset: 1px; }
.field textarea { min-height: 9rem; resize: vertical; }
/* ⚠ `.consent` è un flex: un <a> dentro il testo diventerebbe un flex-item a sé e spezzerebbe la riga.
   Tutto il testo, link compreso, sta in un solo <span>. */
.consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: .92rem; color: var(--ink-muted); }
.consent input { margin-top: .25rem; flex: none; }
.consent a { color: var(--brand); text-decoration: underline; }
/* aside dei recapiti: fondo CHIARO — non si riusa la fascia dell'home, che è tarata su fondo scuro */
.contact-info { background: var(--surface); border: var(--border); border-radius: var(--radius-lg); padding: var(--space-6); }
.contact-info dl { display: grid; gap: var(--space-3); }
.contact-info dt { font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-muted); }
.contact-info dd { margin: 0; color: var(--ink); }
.contact-info a:hover { color: var(--brand); text-decoration: underline; }
@media (max-width: 899.98px) {
  .contact-cols { grid-template-columns: 1fr; }
  .contact-form .row { grid-template-columns: 1fr; }
}

/* =========================================================================
   PIÈ DI PAGINA
   ========================================================================= */
.site-footer { background: var(--grad-abisso); color: var(--on-dark); padding-block: var(--space-8) var(--space-5); }
/* ⚠ Le tre sedi stavano schiacciate nella colonna dei recapiti, che diventava lunga il doppio delle
   altre mentre la prima restava quasi vuota. Ora hanno una FASCIA propria, e la colonna del marchio porta
   una riga di testo: quattro colonne di altezza confrontabile invece di una piena e una vuota. */
/* ⚠ La colonna dei recapiti deve contenere l'indirizzo email su UNA riga: 36 caratteri che vanno a capo
   si leggono come un errore. La colonna si allarga e il corpo dell'email scende quanto serve. */
.site-footer__grid { display: grid; grid-template-columns: 1.15fr .85fr 1fr 1.5fr; gap: clamp(1.75rem, 1rem + 2.2vw, 3.25rem); align-items: start; }
.site-footer__brand { max-width: 24rem; }
.site-footer__claim { color: var(--on-dark-muted); font-size: .92rem; line-height: 1.6; margin-top: var(--space-4); }
.site-footer__sedi {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tile-gap);
  margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.14);
}
.site-footer__sedi address {
  font-style: normal; color: var(--on-dark-muted); font-size: .92rem; line-height: 1.6;
  padding-left: var(--space-5); position: relative;
}
.site-footer__sedi address::before {
  content: ""; position: absolute; left: 0; top: .15rem; width: 1.1rem; height: 1.1rem; background: var(--azzurro);
  -webkit-mask: url("../assets/img/icons/sede.svg") no-repeat center / contain;
  mask: url("../assets/img/icons/sede.svg") no-repeat center / contain;
}
.site-footer__sedi strong { color: var(--on-dark); display: block; font-family: var(--font-display); font-weight: 600; }
@media (max-width: 899.98px) { .site-footer__sedi { grid-template-columns: 1fr; gap: var(--space-4); } }
.site-footer h3 { font-size: .95rem; color: var(--on-dark); letter-spacing: .04em; }
.site-footer ul { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.site-footer a:hover { color: var(--azzurro); }
.site-footer .wordmark__tag { color: var(--azzurro); white-space: normal; line-height: 1.5; max-width: 17rem; }
.site-footer address { font-style: normal; color: var(--on-dark-muted); }
.site-footer dl { display: grid; gap: var(--space-3); margin-top: var(--space-4); color: var(--on-dark-muted); }
.site-footer dt { font-size: .78rem; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--azzurro); }
.site-footer dd { margin: 0; color: var(--on-dark); }
.site-footer dd a[href^="mailto:"] { white-space: nowrap; font-size: .92rem; overflow-wrap: normal; }
.social { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.social a {
  width: 2.4rem; height: 2.4rem; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.24);
  display: grid; place-items: center; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.social a:hover { background: var(--azzurro); border-color: var(--azzurro); }
.social__ico { width: 1.15rem; height: 1.15rem; background: var(--on-dark); }
.social a:hover .social__ico { background: var(--brand-dark); }
.social__ico[data-social="whatsapp"] { -webkit-mask: url("../assets/img/icons/social-whatsapp.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-whatsapp.svg") no-repeat center / contain; }
.social__ico[data-social="facebook"] { -webkit-mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-facebook.svg") no-repeat center / contain; }
.social__ico[data-social="instagram"] { -webkit-mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain; mask: url("../assets/img/icons/social-instagram.svg") no-repeat center / contain; }
.site-footer__legal {
  margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between;
  color: var(--on-dark-muted); font-size: .88rem;
}
/* Powered by Dgitaly: il marchio è un badge QUADRATO senza scritta — il testo è nostro e il logo non si
   deforma (larghezza e altezza dichiarate uguali). */
.powered { display: inline-flex; align-items: center; gap: .45rem; }
.powered img { width: 20px; height: 20px; }
@media (max-width: 899.98px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599.98px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   LIGHTBOX — creata da reveal.js al caricamento e aperta con .is-open.
   ⚠⚠ A RIPOSO DEVE ESSERE `display:none`. Una `.fp-lb{display:flex}` senza stato nascosto lascia
   l'overlay sempre in scena: oscura la pagina e INTERCETTA OGNI CLICK. È già successo, il crawl dava
   40/40 pagine pulite su un sito dove non era cliccabile niente, e il difetto l'ha trovato il cliente.
   ========================================================================= */
.fp-lb { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center;
  background: rgba(1,29,44,.92); padding: var(--space-5); }
.fp-lb.is-open { display: flex; }
.fp-lb__img { max-width: min(94vw, 1400px); max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }
.fp-lb__x { position: absolute; top: var(--space-4); right: var(--space-4); width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); color: #FFFFFF; font-size: 1.6rem; line-height: 1; }
.fp-lb__x:hover { background: rgba(255,255,255,.26); }
.fp-lb__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem;
  border: 0; border-radius: var(--radius-pill); background: rgba(255,255,255,.14); color: #FFFFFF; display: grid; place-items: center; }
.fp-lb__nav svg { width: 1.5rem; height: 1.5rem; }
.fp-lb__nav:hover { background: rgba(255,255,255,.26); }
.fp-lb__prev { left: var(--space-4); }
.fp-lb__next { right: var(--space-4); }

/* =========================================================================
   PROSA LEGALE (privacy) e utilità
   ========================================================================= */
.legal { padding-block: var(--section-y); }
.legal h2 { font-size: var(--text-lg); margin-top: var(--space-6); }
.legal p, .legal li { color: var(--ink-muted); max-width: 68ch; }
.legal ul { list-style: disc; padding-left: 1.3rem; display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.legal a { color: var(--brand); text-decoration: underline; }

/* =========================================================================
   MAPPA DELLE ICONE — l'icona si sceglie con l'attributo `data-icon`.
   ⚠ La maschera NON può stare in uno style inline: `url('../assets/…')` non risolve nel post_content,
   perché la riscrittura dei percorsi tocca solo i .php del tema e nel database il PHP non gira. Vive qui,
   dove `url()` si risolve rispetto al FOGLIO.
   ========================================================================= */
[data-icon="integrata"] .card__icon::after, [data-icon="integrata"] .step__icon::before, [data-icon="integrata"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/integrata.svg") no-repeat center / contain; mask: url("../assets/img/icons/integrata.svg") no-repeat center / contain; }
[data-icon="osteopatia"] .card__icon::after, [data-icon="osteopatia"] .step__icon::before, [data-icon="osteopatia"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/osteopatia.svg") no-repeat center / contain; mask: url("../assets/img/icons/osteopatia.svg") no-repeat center / contain; }
[data-icon="kinesiologia"] .card__icon::after, [data-icon="kinesiologia"] .step__icon::before, [data-icon="kinesiologia"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/kinesiologia.svg") no-repeat center / contain; mask: url("../assets/img/icons/kinesiologia.svg") no-repeat center / contain; }
[data-icon="nutrizione"] .card__icon::after, [data-icon="nutrizione"] .step__icon::before, [data-icon="nutrizione"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/nutrizione.svg") no-repeat center / contain; mask: url("../assets/img/icons/nutrizione.svg") no-repeat center / contain; }
[data-icon="visione"] .card__icon::after, [data-icon="visione"] .step__icon::before, [data-icon="visione"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/visione.svg") no-repeat center / contain; mask: url("../assets/img/icons/visione.svg") no-repeat center / contain; }
[data-icon="pnei"] .card__icon::after, [data-icon="pnei"] .step__icon::before, [data-icon="pnei"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/pnei.svg") no-repeat center / contain; mask: url("../assets/img/icons/pnei.svg") no-repeat center / contain; }
[data-icon="causa"] .card__icon::after, [data-icon="causa"] .step__icon::before, [data-icon="causa"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/causa.svg") no-repeat center / contain; mask: url("../assets/img/icons/causa.svg") no-repeat center / contain; }
[data-icon="dolore"] .card__icon::after, [data-icon="dolore"] .step__icon::before, [data-icon="dolore"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/dolore.svg") no-repeat center / contain; mask: url("../assets/img/icons/dolore.svg") no-repeat center / contain; }
[data-icon="postura"] .card__icon::after, [data-icon="postura"] .step__icon::before, [data-icon="postura"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/postura.svg") no-repeat center / contain; mask: url("../assets/img/icons/postura.svg") no-repeat center / contain; }
[data-icon="mobilita"] .card__icon::after, [data-icon="mobilita"] .step__icon::before, [data-icon="mobilita"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/mobilita.svg") no-repeat center / contain; mask: url("../assets/img/icons/mobilita.svg") no-repeat center / contain; }
[data-icon="benessere"] .card__icon::after, [data-icon="benessere"] .step__icon::before, [data-icon="benessere"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/benessere.svg") no-repeat center / contain; mask: url("../assets/img/icons/benessere.svg") no-repeat center / contain; }
[data-icon="morfologico"] .card__icon::after, [data-icon="morfologico"] .step__icon::before, [data-icon="morfologico"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/morfologico.svg") no-repeat center / contain; mask: url("../assets/img/icons/morfologico.svg") no-repeat center / contain; }
[data-icon="biochimico"] .card__icon::after, [data-icon="biochimico"] .step__icon::before, [data-icon="biochimico"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/biochimico.svg") no-repeat center / contain; mask: url("../assets/img/icons/biochimico.svg") no-repeat center / contain; }
[data-icon="psicologico"] .card__icon::after, [data-icon="psicologico"] .step__icon::before, [data-icon="psicologico"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/psicologico.svg") no-repeat center / contain; mask: url("../assets/img/icons/psicologico.svg") no-repeat center / contain; }
[data-icon="diagnosi"] .card__icon::after, [data-icon="diagnosi"] .step__icon::before, [data-icon="diagnosi"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/diagnosi.svg") no-repeat center / contain; mask: url("../assets/img/icons/diagnosi.svg") no-repeat center / contain; }
[data-icon="terapie"] .card__icon::after, [data-icon="terapie"] .step__icon::before, [data-icon="terapie"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/terapie.svg") no-repeat center / contain; mask: url("../assets/img/icons/terapie.svg") no-repeat center / contain; }
[data-icon="prevenzione"] .card__icon::after, [data-icon="prevenzione"] .step__icon::before, [data-icon="prevenzione"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/prevenzione.svg") no-repeat center / contain; mask: url("../assets/img/icons/prevenzione.svg") no-repeat center / contain; }
[data-icon="orario"] .card__icon::after, [data-icon="orario"] .step__icon::before, [data-icon="orario"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/orario.svg") no-repeat center / contain; mask: url("../assets/img/icons/orario.svg") no-repeat center / contain; }
[data-icon="sede"] .card__icon::after, [data-icon="sede"] .step__icon::before, [data-icon="sede"] .benefit__icon::before { -webkit-mask: url("../assets/img/icons/sede.svg") no-repeat center / contain; mask: url("../assets/img/icons/sede.svg") no-repeat center / contain; }


/* =========================================================================
   DETTAGLI — le cose piccole che si notano senza doverle cercare. Nessuna di queste aggiunge un oggetto
   da leggere: lavorano tutte su elementi che ci sono già.
   ========================================================================= */

/* Il filo che unisce i passi del metodo: senza, tre passi numerati sono tre schede staccate; con, si
   leggono come una sequenza. Parte dal primo disco e muore nell'ultimo. */
.steps { position: relative; }
.steps::before {
  content: ""; position: absolute; left: 1.5rem; top: 1.5rem; bottom: 1.5rem; width: 2px;
  background: linear-gradient(180deg, var(--azzurro) 0%, var(--azzurro-tint) 60%, transparent 100%);
  opacity: .55;
}
.step { position: relative; }
.step__icon { background: var(--azzurro-tint); box-shadow: 0 0 0 6px var(--paper); }
@media (max-width: 899.98px) { .steps::before { display: none; } }

/* La voce di menu si sottolinea in oro allo hover: il filetto cresce da sinistra, non appare. */
.site-header .wp-block-navigation .wp-block-navigation-item__content { position: relative; }
.site-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: .35rem; height: 2px;
  background: var(--grad-oro); border-radius: 2px; transition: right .3s var(--ease);
}
.site-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after { right: 0; }

/* L'occhiello porta un trattino d'oro: un segno di due caratteri che ancora il testo alla banda. */
.eyebrow { display: flex; align-items: center; gap: var(--space-3); }
.eyebrow::before {
  content: ""; width: 1.6rem; height: 2px; flex: none; border-radius: 2px;
  background: var(--accent-ink);
}
.eyebrow--light::before, .hero .eyebrow::before, .page-head .eyebrow::before, .cta-band .eyebrow::before { background: var(--grad-oro); }
.eyebrow--center { justify-content: center; }

/* ⚠ Il distacco fra una citazione e l'altra si ridichiara QUI: la regola `.voice { margin: 0 }` scritta
   più sopra lo azzerava, e a parità di specificità vince l'ultima dichiarata. Misurato: era 0px. */
.voices .voice { margin: 0 0 calc(var(--tile-gap) * 1.6); }
.voices .voice:last-child { margin-bottom: 0; }

/* Le tessere del mosaico si scoprono a scaglioni e prendono luce sotto il puntatore. */
.mosaic a { box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.mosaic a:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* Le SCHEDE DELLE DISCIPLINE salgono nella banda della testata: legano le due sezioni e tolgono il
   gradino piatto fra la campitura scura e quella chiara. */
.pillars { padding-top: calc(var(--section-y) + 2.5rem); }
.pillars .cards { margin-top: calc(-4.5rem - var(--section-y) * .2); }
.pillars .section-intro { margin-bottom: calc(var(--space-5) + 4.5rem); }
@media (max-width: 899.98px) {
  .pillars .cards { margin-top: 0; }
  .pillars .section-intro { margin-bottom: var(--space-5); }
  .pillars { padding-top: var(--section-y); }
}

/* Il piè si stacca dal contenuto con un filo d'oro sottilissimo, non con un bordo. */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--azzurro) 60%, transparent);
  opacity: .5;
}


/* Convenzioni: il marchio del convenzionatore accanto al nome, come sul sito attuale del cliente.
   ⚠ Sono loghi di TERZI con proporzioni diverse fra loro: `contain` su una piastrella chiara, mai
   ritagliati ne stirati. */
.conv { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--tile-gap); }
.conv__item {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center;
  background: var(--paper); border: var(--border); border-radius: var(--radius-lg);
  padding: var(--space-5); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.conv__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.conv__logo { width: 6.5rem; height: 5rem; display: grid; place-items: center; flex: none; }
.conv__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.conv__item h3 { font-size: 1.08rem; color: var(--brand); }
.conv__item p { color: var(--ink-muted); font-size: .95rem; margin-top: .2rem; }
@media (max-width: 767.98px) { .conv { grid-template-columns: 1fr; } }