/* =============================================================================
   AlfaMed — COMPONENTI.
   Carica DOPO skin.css (che porta solo i valori dei token) e dopo base.css della
   base. Qui stanno le differenze STRUTTURALI, quelle che nessun valore di token
   può esprimere:

     · l'eyebrow della base è testo mono maiuscolo senza sfondo;
       quello di AlfaMed è una PILL con fondo e bordo.
     · i bottoni della base si SOLLEVANO al passaggio del mouse;
       quelli di AlfaMed no (il brand chiede sobrietà: "nessun rimpicciolimento,
       nessun effetto decorativo").
     · `.section--alt` nella base è una fascia GRIGIA su pagina bianca;
       in AlfaMed è una fascia BIANCA su pagina grigia — è l'inverso.

   Regola: SOLO var(--…) del contratto. Nessun colore o misura scritti a mano.
   ========================================================================== */

/* ---------- Sezioni: l'alternanza è invertita ----------
   La pagina è grigia (--surface-page: #f7f8fa) e le superfici sono bianche.
   Quindi la sezione "tenue" è quella BIANCA, non quella grigia. I filetti sopra
   e sotto danno il ritmo che nel design system separa le fasce. */
.section--alt {
	background: var(--surface-card);
	border-block: var(--border-width) solid var(--border-default);
}

/* ---------- Eyebrow: una pill, non un'etichetta mono ----------
   È la differenza visiva più riconoscibile del brand. Va riscritta per intero:
   la base la vuole maiuscola, mono, spaziata e senza sfondo. */
.eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-normal);
	text-transform: none;
	color: var(--color-secondary-hover);
	background: var(--color-action-subtle);
	border: var(--border-width) solid #d8e3f4;
	border-radius: var(--radius-full);
	padding: var(--space-1) var(--space-3);
	margin-bottom: var(--space-3);
}
.eyebrow .icon { width: 15px; height: 15px; }

/* Su fondo scuro la pill diventa una velatura chiara: il fondo blu chiaro
   sparirebbe contro il navy. */
.section--dark .eyebrow,
.section--brand .eyebrow,
.section--action .eyebrow,
.section--image .eyebrow {
	color: var(--text-on-dark);
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--border-on-dark);
}

/* ---------- Lo STESSO sopratitolo, reso dal blocco CONDIVISO ----------

   `gvn/section` è il blocco della base, quello che usano tutti i siti, e il suo
   markup non si tocca. Con gli stessi due campi — icona e sopratitolo — emette:

       <div class="gsec__kicker">
         <span class="gsec__kicker-icon">▣</span>   ← una piastrella, a fianco
         <span class="eyebrow">Il poliambulatorio</span>
       </div>

   Gulliver le vuole SEPARATE: la piastrella blu quadrata accanto all'etichetta.
   AlfaMed le vuole INSIEME: una pillola sola, con l'icona dentro.

   È esattamente ciò per cui esiste questo strato. Il dato è lo stesso, il modulo
   in wp-admin è lo stesso, il blocco è lo stesso: cambia soltanto come il TEMA
   lo dipinge. Non serve un campo in più, né un blocco proprio, né una riga di PHP
   — servono queste dieci righe di CSS, ed è il tema che le porta.

   Il trucco è spostare la pillola di un livello: il fondo, il bordo e il raggio
   li prende il CONTENITORE, e i due figli si smaterializzano dentro. Il DOM resta
   quello della base; l'occhio vede una pillola sola. */
.gsec__kicker {
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	background: var(--color-action-subtle);
	border: var(--border-width) solid #d8e3f4;
	border-radius: var(--radius-full);
	margin-bottom: var(--space-3);
}

/* L'icona perde la piastrella: niente riquadro, niente gradiente, niente 44px.
   Diventa un glifo alto quanto il testo, come nelle pillole degli altri blocchi. */
.gsec__kicker-icon {
	width: auto; height: auto;
	background: none;
	border-radius: 0;
	color: var(--color-secondary-hover);
}
.gsec__kicker-icon .icon { width: 15px; height: 15px; }

/* L'etichetta interna non è più una pillola: lo è il suo contenitore. */
.gsec__kicker .eyebrow {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

/* Su fondo scuro la pillola (che ora è il contenitore) diventa una velatura. */
.section--dark .gsec__kicker,
.section--brand .gsec__kicker,
.section--action .gsec__kicker,
.section--image .gsec__kicker {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--border-on-dark);
}
.section--dark .gsec__kicker-icon,
.section--brand .gsec__kicker-icon,
.section--action .gsec__kicker-icon,
.section--image .gsec__kicker-icon { color: var(--text-on-dark); }

/* ---------- L'ELENCO di gvn/section: un curriculum, non tre schede ----------
   Stesso principio, stessi campi. La base incolonna le voci con una PIASTRELLA
   blu da 46px accanto a ciascuna e il titolo in grassetto: giusto per Gulliver,
   dove ogni voce è un punto di forza a sé. Nel design di AlfaMed lo stesso elenco
   è il curriculum del Direttore — righe lunghe di testo con una spunta davanti,
   e la spunta è un GLIFO, non un riquadro. Un riquadro blu alto 46px accanto a
   una riga di testo la fa sembrare un'altra cosa. */
.gsec__rows { gap: var(--space-3); }
.gsec__row-icon {
	width: auto; height: auto;
	background: none;
	border-radius: 0;
	color: var(--color-action);
	margin-top: 3px;
}
.gsec__row-icon .icon { width: 18px; height: 18px; }
.gsec__row { gap: var(--space-3); }
.gsec__row-body { font-size: var(--am-fs-nav); line-height: 1.6; }

/* ---------- I NUMERI: schede bianche, non cifre nude ----------
   La base li lascia sulla pagina, cifra e didascalia in mono maiuscolo. Il design
   li mette dentro tre SCHEDE bianche col bordo, centrate, e la cifra in serif —
   è il carattere dei titoli, quello che dà ad AlfaMed la sua faccia. */

/* La testata dei numeri è CENTRATA. `gvn/section` centra solo lo stile «loghi»,
   ed è congelato: la scelta non si può fare dal pannello. Ma è una scelta di
   impaginazione, cioè roba da tema — e il tema la fa, qui, in due righe. */
.gsec--numeri .gsec__head { margin-inline: auto; text-align: center; }
.gsec--numeri .gsec__kicker { justify-content: center; }

.gsec__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
}
.gsec__stat {
	flex: none; min-width: 0;
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-7) var(--space-6);
	text-align: center;
}
/* Su fascia bianca le schede prendono il grigio della pagina, o sparirebbero. */
.section--alt .gsec__stat { background: var(--surface-page); }
.gsec__stat-value {
	font-family: var(--font-display);
	font-size: 2.75rem;                    /* 44px */
	font-weight: var(--weight-semibold);
	color: var(--color-secondary-hover);
}
.gsec__stat-label {
	font-family: var(--font-body);
	font-size: var(--am-fs-nav);
	letter-spacing: var(--tracking-normal);
	text-transform: none;
	color: var(--text-secondary);
	margin-top: var(--space-2);
}
@media (max-width: 900px) { .gsec__stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .gsec__stats { grid-template-columns: 1fr; } }

/* ---------- Bottoni: fermi ----------
   Niente sollevamento, niente ombre al passaggio: il design system è esplicito
   ("nessuna animazione decorativa", hover = solo un tono più scuro). */
.btn {
	height: 48px;
	padding-block: 0;
	border-radius: var(--radius-md);
	font-size: var(--fs-body);
	transition: background-color var(--duration-fast) var(--ease-standard),
	            border-color var(--duration-fast) var(--ease-standard),
	            color var(--duration-fast) var(--ease-standard);
}
.btn:hover { transform: none; }              /* ← la base lo alzava di 1px */
.btn--sm { height: 40px; padding-inline: var(--space-4); font-size: var(--fs-caption); }
.btn--lg { height: 52px; padding-inline: var(--space-6); font-size: var(--fs-body); }

/* Il contorno: bordo vero da 1px, non un'ombra interna da 2px. */
.btn--outline {
	color: var(--color-secondary-hover);
	border: var(--border-width) solid var(--color-action);
	box-shadow: none;
}
.btn--outline:hover {
	background: var(--color-action-subtle);
	box-shadow: none;
}
.btn--on-dark {
	border: var(--border-width) solid var(--border-on-dark);
	box-shadow: none;
}
.btn--on-dark:hover { box-shadow: none; border-color: rgba(255, 255, 255, 0.5); }

/* Il gradient non esiste in questo brand: un bottone "gradient" è il bottone
   pieno. (Serve perché il blocco gvn/section, condiviso, emette btn--gradient.) */
.btn--gradient { background: var(--color-action); color: var(--on-action); }
.btn--gradient:hover { background: var(--color-action-hover); filter: none; box-shadow: none; }

/* ---------- Card: bordo OPPURE ombra, mai entrambi ---------- */
.card {
	border: var(--border-width) solid var(--border-default);
	box-shadow: none;
	border-radius: var(--radius-lg);
}
.card--interactive:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	border-color: #b3c8e7;
}
/* Su fascia bianca le card devono staccarsi: prendono il grigio della pagina. */
.section--alt .card { background: var(--surface-page); }

/* ===========================================================================
   HEADER — allineato al design system, riga per riga.

   La barra della base è pensata per un sito che si apre con una hero SCURA: le
   voci sottolineate, il logo che si sdoppia, lo stato «scrolled» che cambia
   opacità. AlfaMed ha una hero CHIARA e una barra che non cambia mai: qui si
   disfa tutto ciò che la base fa in più, e non basta aggiungere — bisogna anche
   SPEGNERE. È l'errore che avevo fatto: le voci del menu avevano ancora la
   sottolineatura blu della base, perché avevo scritto le mie regole senza
   togliere le sue.
   ========================================================================== */

.header {
	background: color-mix(in srgb, var(--surface-page) 85%, transparent);
	backdrop-filter: saturate(140%) blur(10px);
	border-bottom: var(--border-width) solid var(--border-default);
}
/* La barra non cambia allo scroll: nel design è sempre la stessa. La base la
   rende più opaca (92%) quando si aggancia — un effetto che qui non esiste. */
.header.is-scrolled {
	background: color-mix(in srgb, var(--surface-page) 85%, transparent);
	box-shadow: none;
}

.header__inner { gap: var(--space-6); min-height: var(--header-h); }

/* Il logo è GRANDE: 72px in una barra di 90. È il marchio, non un'etichetta. */
.header__logo-img .logo-img,
.header__logo-img img,
.header__logo-img svg { height: 72px; width: auto; }

/* ---------- La navigazione ----------
   Voci STRETTE e attaccate al logo: `gap: 2px` e nessun `flex: 1`. Nella base la
   nav si allarga a riempire la barra (flex:1, gap 24px) e le voci finiscono
   spalmate da un capo all'altro; qui sono un gruppetto compatto a sinistra, e lo
   spazio vuoto sta in mezzo — fra la nav e le azioni. */
.nav {
	flex: none;
	gap: 2px;
	margin-inline-start: var(--space-3);
}
.nav a {
	padding: 9px 14px;
	border-radius: var(--radius-md);
	border-bottom: 0;                    /* ← la base ne mette 2px, trasparenti */
	font-size: var(--am-fs-nav);
	font-weight: var(--weight-medium);
	color: var(--text-secondary);
}
/* La voce attiva si distingue per COLORE E PESO, non per una riga sotto. La
   sottolineatura è un tratto della base: qui va spenta esplicitamente, o resta. */
.nav a:hover {
	background: var(--surface-muted);
	color: var(--text-primary);
	border-color: transparent;
}
.nav a.is-active {
	color: var(--color-secondary-hover);
	font-weight: var(--weight-semibold);
	background: transparent;
	border-color: transparent;
}

/* ---------- Le azioni ---------- */
.header__actions { gap: 10px; }

/* Il telefono: è il gesto che ci si aspetta da un poliambulatorio. Il numero è
   navy scuro, l'icona è blu d'azione — l'icona invita, il numero informa. */
.header__phone {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: var(--am-fs-nav);
	font-weight: var(--weight-semibold);
	color: var(--color-primary-hover);
	padding: var(--space-2) 10px;
	white-space: nowrap;
}
.header__phone .icon { width: 17px; height: 17px; flex: none; color: var(--color-action); }
.header__phone:hover { color: var(--color-action); }

/* Il bottone della barra è un `.btn--primary` più basso: 44px invece di 48.
   Deve stare dentro una barra, non dentro una sezione. */
.header__actions .btn { height: 44px; }

/* L'hamburger è un BOTTONE, non un'icona nuda: quadrato, con il suo bordo e il
   suo fondo, come nel design. La base lo lascia trasparente perché la sua barra
   può essere scura; qui è sempre chiara. */
.hamburger {
	width: 44px; height: 44px;
	padding: 0;
	align-items: center; justify-content: center;
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	color: var(--color-primary-hover);
	cursor: pointer;
}
.hamburger .icon { width: 22px; height: 22px; }

/* ---------- La barra sopra una sezione scura ----------
   La base la fa galleggiare trasparente e schiarisce ciò che CONOSCE: le voci di
   menu, il logo (che scambia con la versione bianca) e il bottone. Ma non conosce
   il TELEFONO — l'ha aggiunto AlfaMed — né sa che qui l'hamburger è un bottone
   col fondo bianco. Risultato: voci bianche accanto a un numero navy, e un
   quadrato bianco con dentro un'icona bianca.
   Quello che la base aggiunge, il sito lo completa. */
body.top-overlay .header__phone { color: var(--text-on-dark); }
body.top-overlay .header__phone .icon { color: var(--text-on-dark); }
body.top-overlay .header__phone:hover { color: var(--accent-warm); }
body.top-overlay .header .hamburger {
	background: transparent;
	border-color: var(--border-on-dark);
	color: var(--text-on-dark);
}

/* Le voci di menu. Due cose andavano storte insieme, ed è una questione di
   CASCATA, non di colore:
     · il mio hover mette un fondo GRIGIO CHIARO (--surface-muted): su fondo scuro
       è una macchia sbiadita;
     · la base, in trasparenza, RIMETTE la sottolineatura (accent-warm) — la sua
       regola `body.top-overlay .header .nav a:hover` è più specifica della mia
       `.nav a:hover`, quindi il mio `border-color: transparent` perdeva.
   Non basta cambiare il colore: bisogna scrivere alla STESSA specificità della
   base, e venire dopo. Da qui i selettori lunghi.
   Su fondo scuro il rilievo si fa con una VELATURA chiara, non con un grigio. */
body.top-overlay .header .nav a:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--text-on-dark);
	border-color: transparent;
}
body.top-overlay .header .nav a.is-active {
	background: rgba(255, 255, 255, .12);
	color: var(--text-on-dark);
	border-color: transparent;
}

/* Appena si scorre, la barra si posa e ridiventa solida: tutto torna com'era.
   Senza queste, il telefono resterebbe bianco su vetro chiaro — illeggibile
   esattamente come il problema di partenza, ma dall'altra parte. */
body.top-overlay .header.is-scrolled .header__phone { color: var(--color-primary-hover); }
body.top-overlay .header.is-scrolled .header__phone .icon { color: var(--color-action); }
body.top-overlay .header.is-scrolled .hamburger {
	background: var(--surface-card);
	border-color: var(--border-default);
	color: var(--color-primary-hover);
}
/* E le voci tornano quelle di sempre: grigio chiaro sotto il cursore, voce attiva
   in blu, mai una riga sotto. Anche qui la base ha una regola più specifica
   (`.is-scrolled`) che rimetterebbe la sottolineatura: va pareggiata, non
   ignorata. Senza queste, dopo lo scroll resterebbe la velatura bianca su vetro
   chiaro — cioè niente, e l'hover sparirebbe. */
body.top-overlay .header.is-scrolled .nav a:hover {
	background: var(--surface-muted);
	color: var(--text-primary);
	border-color: transparent;
}
body.top-overlay .header.is-scrolled .nav a.is-active {
	background: transparent;
	color: var(--color-secondary-hover);
	border-color: transparent;
}

/* Il menu mobile resta quello della base (pannello laterale con velo e chiusura):
   funziona, e non è la grafica dell'header desktop. Qui si tocca solo l'aspetto
   delle sue voci, non il suo comportamento. */
.drawer__nav a { border-bottom: 0; }
.drawer__nav a.is-active { color: var(--color-secondary-hover); }

/* Sotto i 768px la base nasconde la nav e mostra l'hamburger. Qui se ne va anche
   il telefono: resta il bottone «Prenota», che è l'azione, e il numero si
   raggiunge dal footer.
   Il bottone NON si nasconde: alla stessa soglia la base spegne `.header__cta`,
   ma qui il bottone è un `.btn`, quindi quella regola non lo tocca — ed è giusto
   così, il design lo tiene anche sul telefono. */
@media (max-width: 768px) {
	.header__phone { display: none; }
	.hamburger { display: inline-flex; margin-inline-end: 0; }
	.header__logo-img .logo-img,
	.header__logo-img img,
	.header__logo-img svg { height: 52px; }   /* 72 non ci sta accanto al bottone */
}

/* ---------- Chip (filtri e pillole informative) ---------- */
.chip {
	display: inline-flex; align-items: center; gap: var(--space-2);
	font-size: var(--fs-caption);
	font-weight: var(--weight-medium);
	color: var(--text-secondary);
	background: var(--surface-muted);
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-full);
	padding: var(--space-2) var(--space-4);
}
.chip .icon { width: 15px; height: 15px; }

/* ---------- Footer: navy PIÙ SCURO della fascia CTA ----------
   Nel design system sono due blu diversi: la fascia CTA è primary-700, il footer
   primary-900. Il contratto ha un solo `--surface-dark`, e usandolo per entrambi
   la pagina finiva con due grandi rettangoli dello stesso colore — la fascia
   spariva dentro il footer. Il secondo navy vive in skin.css (--am-surface-deep),
   perché è un VALORE, e i valori stanno lì. */
.footer { background: var(--am-surface-deep); color: var(--on-surface-dark); }
.footer__logo .logo-img,
.footer__logo img,
.footer__logo svg { height: 42px; }
.footer a:hover { color: var(--on-surface-dark); }
.footer__grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; }

/* La colonna brand: tagline, direttore, social. */
.footer__tag-line { font-family: var(--font-body); line-height: 1.65; }
.footer__director {
	font-size: var(--fs-caption);
	color: color-mix(in srgb, var(--on-surface-dark) 62%, transparent);
	margin-top: var(--space-4);
}
.footer__director strong { font-weight: var(--weight-semibold); }
.footer__director strong a { color: var(--on-surface-dark); }

.footer__social { display: flex; gap: var(--space-2); margin-top: var(--space-4); }
.footer__social a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	border-radius: var(--radius-md);
	background: rgba(255, 255, 255, .08);
	color: var(--on-surface-dark);
	transition: background-color var(--duration-fast) var(--ease-standard);
}
.footer__social a:hover { background: var(--color-action); }
.footer__social .icon { width: 18px; height: 18px; }

/* La colonna contatti: ogni riga ha la sua icona. */
.footer__office a,
.footer__office span {
	display: flex; align-items: flex-start; gap: var(--space-2);
	font-size: var(--fs-caption);
	line-height: 1.5;
	color: color-mix(in srgb, var(--on-surface-dark) 74%, transparent);
}
.footer__office .icon { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--accent-warm); }

.footer__bar-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---------- Il logo AlfaMed non ha una versione "scura su chiaro" diversa ----
   Nell'header trasparente sopra una hero chiara serve comunque quello a colori:
   la base scambia i due loghi con .top-overlay, ma qui l'hero è CHIARA, quindi
   la barra resta solida e il logo a colori. Nessuna regola necessaria — è qui
   scritto perché è il tipo di cosa che si rimette a caso quando non torna. */

/* ===========================================================================
   COMPONENTI CONDIVISI FRA BLOCCHI E TEMPLATE
   Griglie e schede stanno QUI e non nei CSS dei blocchi perché servono anche
   negli archivi (/servizi/, /specialisti/), dove blocchi non ce ne sono — e
   WordPress carica il CSS di un blocco SOLO dove quel blocco compare.
   ========================================================================== */

/* AlfaMed — Specialità. Solo token del contratto. */

.am-spec__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}

.am-spec__card {
	display: flex; flex-direction: column; gap: var(--space-2);
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	color: inherit;
	transition: box-shadow var(--duration-normal) var(--ease-standard),
	            transform var(--duration-normal) var(--ease-standard),
	            border-color var(--duration-normal) var(--ease-standard);
}
/* Su fascia bianca la card prende il grigio della pagina, o sparirebbe dentro. */
.section--alt .am-spec__card { background: var(--surface-page); }

a.am-spec__card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-3px);
	border-color: #b3c8e7;
}

.am-spec__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px;
	border-radius: var(--radius-md);
	background: var(--color-action-subtle);
	color: var(--color-secondary-hover);
	margin-bottom: var(--space-2);
}
.am-spec__icon .icon { width: 23px; height: 23px; }

/* I titoli delle schede sono in SANS, non nel serif dei titoli: sono etichette
   di navigazione, non testate. (Lo dice il design system.) */
.am-spec__card h3 {
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: 1.0625rem;
	color: var(--text-primary);
}
.am-spec__card p {
	font-size: var(--fs-caption);
	color: var(--text-muted);
	line-height: 1.55;
	flex: 1;              /* spinge "Scopri" in fondo, allineato fra le schede */
	margin: 0;
}
.am-spec__more {
	display: inline-flex; align-items: center; gap: var(--space-1);
	font-size: var(--fs-caption);
	font-weight: var(--weight-semibold);
	color: var(--color-secondary-hover);
	margin-top: var(--space-2);
}
.am-spec__more .icon { width: 15px; height: 15px; transition: transform var(--duration-fast); }
a.am-spec__card:hover .am-spec__more .icon { transform: translateX(3px); }

@media (max-width: 1000px) { .am-spec__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .am-spec__grid { grid-template-columns: 1fr; } }

/* AlfaMed — Specialisti. Solo token del contratto. */

/* Tre colonne di norma (la home mostra tre medici), quattro nell'elenco
   completo. Non è un dettaglio: con quattro colonne fisse i tre medici della
   home restano stretti, con una colonna vuota a destra. */
.am-team__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.am-team__grid--4 { grid-template-columns: repeat(4, 1fr); }

.am-team__card {
	display: flex; flex-direction: column;
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
	overflow: hidden;                       /* la foto segue l'angolo della scheda */
	transition: box-shadow var(--duration-normal) var(--ease-standard),
	            transform var(--duration-normal) var(--ease-standard);
}
.section--alt .am-team__card { background: var(--surface-page); }
.am-team__card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }

/* Ritratti tutti uguali: senza un'altezza fissa le schede si sfalsano e la
   griglia si sfilaccia. `object-position: top center` tiene i volti
   nell'inquadratura quando la foto è più alta della finestra — tagliare dal
   basso è sempre meglio che tagliare una fronte. */
.am-team__photo { height: 260px; overflow: hidden; background: var(--surface-muted); }
.am-team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.am-team__body { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-5); flex: 1; }

/* Il ruolo è in SANS, non nel mono degli accenti: è un titolo professionale
   («Nutrizionista · Dietista»), non un'etichetta tecnica. Nel mono, con quel
   punto mediano, sembrava un identificativo di sistema. */
.am-team__role {
	font-family: var(--font-body);
	font-size: var(--fs-micro);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-secondary-hover);
}
.am-team__card h3 {
	font-family: var(--font-body);
	font-weight: var(--weight-semibold);
	font-size: var(--fs-body-lg);
	color: var(--text-primary);
}
.am-team__card h3 a { color: inherit; }
.am-team__card h3 a:hover { color: var(--color-action); }
.am-team__card p { font-size: var(--fs-caption); color: var(--text-muted); line-height: 1.55; margin: 0; flex: 1; }

.am-team__book {
	display: inline-flex; align-items: center; gap: var(--space-1);
	font-size: var(--fs-caption); font-weight: var(--weight-semibold);
	color: var(--color-secondary-hover);
	margin-top: var(--space-3);
}
.am-team__book .icon { width: 15px; height: 15px; transition: transform var(--duration-fast); }
.am-team__card:hover .am-team__book .icon { transform: translateX(3px); }

@media (max-width: 1000px) { .am-team__grid, .am-team__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .am-team__grid, .am-team__grid--4 { grid-template-columns: 1fr; } }

/* I bottoni «Tutte le prestazioni» / «Vedi tutti gli specialisti» stanno
   CENTRATI sotto la griglia, non allineati a sinistra come quelli di una
   testata: chiudono la sezione, non la aprono. */
.am-spec__actions,
.am-team__actions { display: flex; justify-content: center; margin-top: var(--space-8); }

/* ===========================================================================
   IL DIRETTORE SANITARIO — scheda in evidenza
   Elenco Specialisti, pagina Chi siamo, blocco alfamed/direttore: tre posti, un
   markup solo (alfamed_director_card).
   ========================================================================== */

.am-director {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--space-8);
	align-items: center;
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	padding: var(--space-3);              /* la foto arriva quasi al bordo: è una cornice */
	overflow: hidden;
}
.section--alt .am-director { background: var(--surface-page); }

.am-director__photo img {
	width: 100%; height: 320px;
	object-fit: cover; object-position: top;
	border-radius: var(--radius-lg);
	display: block;
}
.am-director__body { padding: var(--space-5) var(--space-8) var(--space-5) 0; }

.am-director__role {
	display: inline-flex; align-items: center; gap: var(--space-2);
	font-size: var(--fs-caption);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--color-secondary-hover);
	margin-bottom: var(--space-3);
}
.am-director__role .icon { width: 16px; height: 16px; flex: none; }

.am-director__name { font-size: var(--fs-h3); margin: 0 0 var(--space-3); }
.am-director__name a { color: inherit; }
.am-director__name a:hover { color: var(--color-action); }

.am-director__body p { color: var(--text-secondary); line-height: 1.7; }
.am-director__body p + p { margin-top: var(--space-3); }
.am-director__actions { margin-top: var(--space-5); }

@media (max-width: 980px) {
	.am-director { grid-template-columns: 1fr; gap: var(--space-5); }
	.am-director__photo img { height: 280px; }
	.am-director__body { padding: 0 var(--space-5) var(--space-5); }
}

/* ===========================================================================
   LA FISARMONICA DELLE PRESTAZIONI
   Sta QUI e non nel CSS del blocco perché la usa anche l'archivio /servizi/,
   dove blocchi non ce ne sono — e WordPress carica il foglio di un blocco SOLO
   dove quel blocco compare. Nel foglio del blocco, questo CSS non sarebbe MAI
   arrivato alla pagina Servizi.
   ========================================================================== */

.am-acc__list { display: flex; flex-direction: column; gap: var(--space-3); }

.am-acc__item {
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow var(--duration-normal) var(--ease-standard);
}
.section--alt .am-acc__item { background: var(--surface-page); }
.am-acc__item[open] { box-shadow: var(--shadow-md); }

/* `list-style: none` + il pseudo-elemento di WebKit: senza, resta il triangolino
   nero del browser accanto all'icona. */
.am-acc__head {
	list-style: none;
	cursor: pointer;
	display: flex; align-items: center; gap: var(--space-5);
	padding: var(--space-5) var(--space-6);
}
.am-acc__head::-webkit-details-marker { display: none; }
.am-acc__head:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.am-acc__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px; height: 46px; flex: none;
	border-radius: var(--radius-md);
	background: var(--color-action-subtle);
	color: var(--color-secondary-hover);
}
.am-acc__icon .icon { width: 24px; height: 24px; }

.am-acc__titles { flex: 1; min-width: 0; }
.am-acc__title {
	display: block;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: var(--weight-semibold);
	color: var(--text-primary);
	line-height: var(--leading-tight);
}
.am-acc__sub {
	display: block;
	font-size: var(--fs-caption);
	color: var(--text-muted);
	line-height: 1.5;
	margin-top: 3px;
}

.am-acc__chev { display: inline-flex; flex: none; color: var(--text-muted); transition: transform var(--duration-normal) var(--ease-standard); }
.am-acc__chev .icon { width: 22px; height: 22px; }
.am-acc__item[open] .am-acc__chev { transform: rotate(180deg); }

/* Il corpo rientra fino alla colonna del titolo: l'elenco si allinea al titolo,
   non all'icona. */
.am-acc__body { padding: 0 var(--space-6) var(--space-6) 88px; }

.am-acc__points {
	list-style: none; margin: 0 0 var(--space-5); padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2) var(--space-7);
}
.am-acc__points li { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--text-secondary); line-height: 1.5; }
.am-acc__check { display: inline-flex; flex: none; color: var(--color-success); margin-top: 2px; }
.am-acc__check .icon { width: 17px; height: 17px; }

.am-acc__ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 760px) {
	.am-acc__head   { padding: var(--space-4); gap: var(--space-4); }
	.am-acc__body   { padding: 0 var(--space-4) var(--space-5); }
	.am-acc__points { grid-template-columns: 1fr; }
}

/* ===========================================================================
   IL MODULO DI CONTATTO — fascia propria, contenitore stretto
   Gli stili dei campi arrivano da gvn-base (blocks/modulo/style.css), che ora il
   motore accoda ovunque ci sia un form — non solo dove c'è il blocco gvn/modulo.
   ========================================================================== */

.am-modulo__inner { max-width: 760px; }
.am-modulo__card {
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-8);
	max-width: none;                       /* il .gform__wrap si stringerebbe da solo */
}
.am-modulo__card h2 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.am-modulo__lead { color: var(--text-secondary); font-size: var(--fs-caption); margin-bottom: var(--space-6); }

/* ===========================================================================
   LA BARRA SOCIAL FLOTTANTE
   ========================================================================== */

.am-fab {
	position: fixed; right: 18px; bottom: 18px;
	z-index: var(--z-overlay);
	display: flex; flex-direction: column; gap: var(--space-2);
}
.am-fab__link {
	display: flex; align-items: center; justify-content: center;
	width: 50px; height: 50px;
	border-radius: var(--radius-full);
	color: #fff;
	box-shadow: var(--shadow-lg);
	transition: transform var(--duration-fast) var(--ease-standard), filter var(--duration-fast);
}
.am-fab__link:hover { transform: translateY(-2px); filter: brightness(1.06); }
.am-fab__link .icon { width: 24px; height: 24px; }

/* Questi NON sono colori del tema, e non devono seguire la skin: sono i colori
   di marchio di WhatsApp, Instagram e Facebook. Un bottone WhatsApp blu non è
   più "coerente" — è semplicemente irriconoscibile. */
.am-fab__link--whatsapp  { background: #25d366; }
.am-fab__link--instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 70%, #285aeb 100%); }
.am-fab__link--facebook  { background: #1877f2; }

@media (max-width: 760px) {
	.am-fab { right: 14px; bottom: 14px; }
	.am-fab__link { width: 46px; height: 46px; }
}

/* ===========================================================================
   SCHEDE DI DETTAGLIO (servizio, specialista)
   Nove pagine su dodici del sito sono questo template.
   ========================================================================== */

/* Testata di pagina: la versione chiara e sobria della hero. */
.am-pagehero {
	background: linear-gradient(180deg, var(--color-primary-subtle) 0%, var(--surface-page) 100%);
	border-bottom: var(--border-width) solid var(--border-default);
	padding-block: var(--space-10) var(--space-12);
}
.am-pagehero .eyebrow { margin-bottom: 0; }
.am-pagehero__title { font-size: var(--fs-h1); letter-spacing: var(--tracking-tight); margin-top: var(--space-3); }
.am-pagehero__lead  { max-width: 60ch; margin-top: var(--space-4); }

.am-crumbs {
	display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
	font-size: var(--fs-caption);
	color: var(--text-muted);
	margin-bottom: var(--space-5);
}
.am-crumbs a { color: var(--text-muted); }
.am-crumbs a:hover { color: var(--color-action); }
.am-crumbs [aria-current] { color: var(--text-primary); font-weight: var(--weight-medium); }

/* Due colonne: barra laterale stretta, testo largo. */
.am-detail { display: grid; grid-template-columns: 340px 1fr; gap: var(--space-12); align-items: start; }

/* La barra resta a vista mentre si scorre il testo — ed è il motivo per cui il
   bottone "Prenota" è lì: deve restare raggiungibile in ogni punto della pagina.
   `top` tiene conto dell'header appiccicoso, o finirebbe nascosta dietro. */
.am-detail__aside { position: sticky; top: calc(var(--header-h) + var(--space-6)); display: grid; gap: var(--space-5); }

.am-detail__photo img { width: 100%; border-radius: var(--radius-lg); display: block; }

.am-detail__card {
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}
.am-detail__card-title { font-size: var(--fs-h4); margin-bottom: var(--space-4); }
.am-detail__meta { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-3); }
.am-detail__meta li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.5; }
.am-detail__meta-icon { display: inline-flex; color: var(--color-action); flex: none; margin-top: 1px; }
.am-detail__meta-icon .icon { width: 17px; height: 17px; }

/* Il testo libero scritto nell'editor. */
.am-detail__main { max-width: var(--measure); }
.am-detail__main > * + * { margin-top: var(--space-5); }
.am-detail__main h2 { font-size: var(--fs-h3); margin-top: var(--space-10); }
.am-detail__main h2:first-child { margin-top: 0; }
.am-detail__main p { color: var(--text-secondary); line-height: var(--leading-normal); }
.am-detail__main ul:not([class]) { padding-left: 1.2em; color: var(--text-secondary); }

/* Elenco con la spunta (preparazione, formazione). */
.am-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.am-checklist li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--text-secondary); }
.am-checklist__icon { display: inline-flex; color: var(--color-success); flex: none; margin-top: 3px; }
.am-checklist__icon .icon { width: 18px; height: 18px; }

/* Le prestazioni di un servizio sono voci corte e MOLTE (otto, per la medicina
   estetica): in colonna singola diventano una lista lunghissima che spinge il
   resto della pagina sotto la piega. */
.am-checklist--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-7); }
@media (max-width: 760px) { .am-checklist--2col { grid-template-columns: 1fr; } }

/* Il percorso a tappe, su fondo CHIARO (la variante scura vive nel blocco ATBM).
   Le schede si affiancano e si leggono da sinistra a destra: è una sequenza, e
   un elenco puntato non lo direbbe. */
.am-steps {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.am-steps__item {
	flex: 1; min-width: 150px;
	display: flex; flex-direction: column; gap: var(--space-2);
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-3);
}
.am-steps__n {
	font-family: var(--font-accent);
	font-size: var(--fs-micro);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	color: var(--color-action);
}
.am-steps__ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px;
	border-radius: var(--radius-full);
	background: var(--color-action-subtle);
	color: var(--color-secondary-hover);
}
.am-steps__ic .icon { width: 18px; height: 18px; }
.am-steps__item strong { font-size: var(--fs-caption); font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.3; }
.am-steps__item span:not([class]) { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.45; }
@media (max-width: 720px) { .am-steps { flex-direction: column; } }

/* Pillole (prestazioni, servizi correlati). */
.am-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.am-tags .chip .icon { width: 15px; height: 15px; flex: none; }
.am-tags__link:hover { background: var(--color-action-subtle); color: var(--color-secondary-hover); border-color: #d8e3f4; }

/* I medici collegati in fondo alla scheda di un servizio. */
.am-minidocs { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.am-minidoc {
	display: flex; align-items: center; gap: var(--space-3);
	background: var(--surface-card);
	border: var(--border-width) solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-3) var(--space-4);
	color: inherit;
	transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.am-minidoc:hover { border-color: #b3c8e7; box-shadow: var(--shadow-md); }
.am-minidoc__img { width: 52px; height: 52px; border-radius: var(--radius-full); object-fit: cover; object-position: top; flex: none; }
.am-minidoc strong { display: block; font-size: var(--fs-caption); color: var(--text-primary); }
.am-minidoc__role { display: block; font-size: var(--fs-micro); color: var(--text-muted); margin-top: 2px; }

/* Fascia finale con l'invito a prenotare. */
.am-cta {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: var(--space-6);
	background: var(--surface-dark);
	color: var(--on-surface-dark);
	border-radius: var(--radius-xl);
	padding: var(--space-10);
}
.am-cta h2 { color: var(--on-surface-dark); font-size: var(--fs-h3); }
.am-cta p  { color: rgba(255, 255, 255, .78); margin-top: var(--space-2); max-width: 46ch; }
.am-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* Sul navy il bottone di contorno deve schiarirsi, o sparisce. */
.am-cta__actions .btn--outline { color: var(--on-surface-dark); border-color: var(--border-on-dark); }
.am-cta__actions .btn--outline:hover { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .5); }

@media (max-width: 980px) {
	.am-detail { grid-template-columns: 1fr; gap: var(--space-8); }
	/* Su mobile la barra non "resta a vista": scorre col resto. Appiccicarla su
	   uno schermo alto quanto lei mangerebbe metà pagina. */
	.am-detail__aside { position: static; }
	.am-minidocs { grid-template-columns: 1fr; }
}