/* =========================================================================
   palestra-benessere.css — solo la pagina Palestra del Benessere.
   03/09/2026.

   ⚠️ NOME E SLUG DIVERGONO, PER SCELTA DEL CLIENTE. La pagina si chiama
   "Palestra del Benessere" dal 02/09/2026 ma l'URL resta
   /palestra-della-salute/. Non è un errore e non va "corretto" per coerenza.
   La chiave di questa pagina (_lc_page) è `palestra-benessere`, cioè il
   nome — ed è esattamente il motivo per cui la chiave non si ricava dallo
   slug: se lo facesse, questo file non verrebbe mai caricato.

   ORIGINE. Prima della migrazione la pagina riusava il template della
   Longevity e prendeva il CSS da TRE file:
     longevity.css + longevity-immagini.css + palestra-salute.css
   cioè si portava dietro l'intero foglio di un'altra pagina per usarne una
   frazione. È da lì che nasceva il difetto di CLAUDE.md §7.5, dove una
   regola scritta per la foto del team della Longevity cambiava l'aspetto di
   una foto di questa pagina.

   Qui c'è SOLO ciò che questa pagina usa davvero: le regole sono state
   filtrate confrontandole con le classi presenti nel suo markup.

   ⚠️ LE PARTI A e B SONO DUPLICATE con centro-longevity.css, ed è voluto per
   ora: quelle regole (hero, team, CTA, card dei benefici, carosello) le due
   pagine le usano IDENTICHE, e il posto giusto sarebbe css/07-blocchi.
   Non sono state promosse in questa passata perché sono due pagine online e
   approvate dal cliente, e la promozione va fatta con un confronto visivo
   sezione per sezione. È il primo debito da saldare.
   ========================================================================= */


/* =========================================================================
   PARTE A — regole ereditate da longevity.css (minificato, riformattato)
   ========================================================================= */

#lc-palestra-benessere .lg-fase-label {
	font-size:13px;
	font-weight:600;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#44ade3;
}

#lc-palestra-benessere .lg-cta-h2 {
	font-size:40px;
	font-weight:600;
	line-height:1.18;
}

#lc-palestra-benessere .lg-hero-grid {
	display:grid;
	grid-template-columns:1fr;
}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-hero-grid {
		grid-template-columns:1.05fr 1fr;
		column-gap:64px;
		align-items:center;
	}

}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-hero-eyebrow-block {
		grid-column:1;
		grid-row:1;
	}

}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-hero-h1-block {
		grid-column:1;
		grid-row:2;
	}

}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-hero-testo-block {
		grid-column:1;
		grid-row:3;
	}

}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-hero-cta-block {
		grid-column:1;
		grid-row:5;
	}

}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-hero-foto-block {
		grid-column:2;
		grid-row:1/6;
	}

}

#lc-palestra-benessere .lg-hero-paragrafo {
	max-width:33em;
}

#lc-palestra-benessere .lg-hero-img {
	display:block;
	height:260px;
	object-fit:cover;
	border-radius:6px;
}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-hero-img {
		height:600px;
	}

}

#lc-palestra-benessere .lg-hero-cta-block {
	display:flex;
	flex-direction:column;
	gap:14px;
	align-items:stretch;
}

@media(min-width: 576px) {
	#lc-palestra-benessere .lg-hero-cta-block {
		max-width:460px;
	}

}

#lc-palestra-benessere #lg-sezione-fasi {
	background:#f5f8fa;
	border-top:1px solid #e5ebf1;
	border-bottom:1px solid #e5ebf1;
}

#lc-palestra-benessere .lg-benefici-frecce {
	display:flex;
	justify-content:flex-end;
	gap:10px;
	margin-bottom:22px;
}

@media(min-width: 768px) {
	#lc-palestra-benessere .lg-benefici-frecce {
		margin-bottom:26px;
	}

}

#lc-palestra-benessere .lg-benefici-frecce .swiper-button-prev,
#lc-palestra-benessere .lg-benefici-frecce .swiper-button-next {
	position:static;
	top:auto;
	left:auto;
	right:auto;
	margin-top:0;
	width:34px;
	height:34px;
	border-radius:50%;
	border:1px solid #cfdae4;
	background:#fff;
	display:flex;
	color:#004a87;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
}

@media(min-width: 768px) {
	#lc-palestra-benessere .lg-benefici-frecce .swiper-button-prev,
	#lc-palestra-benessere .lg-benefici-frecce .swiper-button-next {
		width:38px;
		height:38px;
	}

}

#lc-palestra-benessere .lg-benefici-frecce .swiper-button-prev.swiper-button-disabled,
#lc-palestra-benessere .lg-benefici-frecce .swiper-button-next.swiper-button-disabled {
	color:#8aa4b8;
	border-color:#e2eaf1;
}

#lc-palestra-benessere .lg-benefici-frecce .swiper-button-prev .swiper-navigation-icon,
#lc-palestra-benessere .lg-benefici-frecce .swiper-button-next .swiper-navigation-icon {
	width:9px;
	height:auto;
	stroke-width:0;
}

@media(min-width: 768px) {
	#lc-palestra-benessere .lg-benefici-frecce .swiper-button-prev .swiper-navigation-icon,
	#lc-palestra-benessere .lg-benefici-frecce .swiper-button-next .swiper-navigation-icon {
		width:10px;
	}

}

#lc-palestra-benessere .lg-benefici-card {
	border:1px solid #e2eaf1;
	border-radius:6px;
	background:#fff;
	padding:24px 20px;
}

@media(min-width: 768px) {
	#lc-palestra-benessere .lg-benefici-card {
		padding:34px 30px;
	}

}

#lc-palestra-benessere .lg-benefici-card:hover {
	border-color:#cfe0ee;
}

#lc-palestra-benessere .lg-benefici-titolo {
	margin:0 0 12px;
	color:#004a87;
}

#lc-palestra-benessere .lg-benefici-testo {
	margin:0;
	color:#4a5a66;
}

#lc-palestra-benessere .lg-benefici-progress-block {
	margin-top:22px;
}

@media(min-width: 768px) {
	#lc-palestra-benessere .lg-benefici-progress-block {
		margin-top:28px;
	}

}

#lc-palestra-benessere .lg-benefici-progress-block .ns-swiper-progress {
	height:3px;
	background:#e2eaf1;
	border-radius:2px;
	margin-top:0;
}

#lc-palestra-benessere .lg-benefici-progress-block .ns-swiper-progress-fill {
	background:#44ade3;
	border-radius:2px;
}

#lc-palestra-benessere .lg-percorsi-intro {
	max-width:760px;
	margin-left:auto;
	margin-right:auto;
}

#lc-palestra-benessere .lg-team-grid {
	display:grid;
	grid-template-columns:1fr;
}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-team-grid {
		grid-template-columns:5fr 7fr;
		column-gap:64px;
		align-items:center;
	}

}

#lc-palestra-benessere .lg-team-foto-block {
	margin-bottom:26px;
}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-team-foto-block {
		grid-column:1;
		grid-row:1/6;
		margin-bottom:0;
	}

}

#lc-palestra-benessere .lg-team-img {
	display:block;
	height:240px;
	object-fit:cover;
	border-radius:6px;
}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-team-img {
		height:470px;
	}

}

#lc-palestra-benessere .lg-team-eyebrow-block {
	margin-bottom:12px;
}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-team-eyebrow-block {
		grid-column:2;
		grid-row:1;
		margin-bottom:16px;
	}

}

#lc-palestra-benessere .lg-team-h2-block {
	margin-bottom:18px;
}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-team-h2-block {
		grid-column:2;
		grid-row:2;
		margin-bottom:26px;
	}

}

#lc-palestra-benessere .lg-team-p1-block {
	margin-bottom:16px;
}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-team-p1-block {
		grid-column:2;
		grid-row:3;
		margin-bottom:20px;
	}

}

#lc-palestra-benessere .lg-team-p2-block {
	margin-bottom:26px;
}

@media(min-width: 992px) {
	#lc-palestra-benessere .lg-team-p2-block {
		grid-column:2;
		grid-row:4;
		margin-bottom:34px;
	}

}

#lc-palestra-benessere #cta-finale {
	background-color:#004a87;
	color:#fff;
}

#lc-palestra-benessere .lg-cta-content {
	max-width:760px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

#lc-palestra-benessere .lg-cta-h2 {
	color:#fff;
	letter-spacing:-0.02em;
}

#lc-palestra-benessere .lg-cta-h2-block {
	margin-bottom:16px;
}

@media(min-width: 576px) {
	#lc-palestra-benessere .lg-cta-h2-block {
		margin-bottom:22px;
	}

}

#lc-palestra-benessere .lg-cta-p {
	color:#bcd7ea;
	font-size:16px;
	line-height:1.65;
}

@media(min-width: 576px) {
	#lc-palestra-benessere .lg-cta-p {
		font-size:18px;
	}

}

#lc-palestra-benessere .lg-cta-p-block {
	margin-bottom:28px;
}

@media(min-width: 576px) {
	#lc-palestra-benessere .lg-cta-p-block {
		margin-bottom:38px;
	}

}


/* =========================================================================
   PARTE B — regole ereditate da longevity-immagini.css

   I commenti originali NON sono qui: sono stati rimossi prima
   dell'estrazione perché alcuni citano regole del tema CON LE GRAFFE
   DENTRO, e il parser le contava come blocchi. Il foglio usciva con quattro
   graffe di chiusura in più e il browser scartava in silenzio tutto ciò che
   veniva dopo — la nav delle aree compresa, che risultava una lista di link
   nudi. I commenti integrali di quel file sono conservati in
   css/pagine/centro-longevity.css, PARTE 2.
   ========================================================================= */

#lc-palestra-benessere .lg-hero-foto-block .lg-hero-img--full,
#lc-palestra-benessere .lg-hero-foto-block img.lg-hero-img--full {
	height: auto;
	object-fit: initial;
}

#lc-palestra-benessere .lg-h1--logo .lc-h1-riga2 {
	display: block;
	font-size: 46px;
}

@media (max-width: 575.98px) {
	#lc-palestra-benessere .lg-h1--logo .lc-h1-riga2 {
		font-size: 29px;
	}

}

@supports selector(details::details-content) and (interpolate-size: allow-keywords) {
	#lc-palestra-benessere {
		interpolate-size: allow-keywords;
	}

}

#lc-palestra-benessere .lg-benefici-swiper .lg-benefici-card {
	height: 100%;
}

#lc-palestra-benessere #lg-sezione-hero .lg-h1--logo .lc-h1-riga2 {
	font-family: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
	font-style: italic;
	font-weight: 300;
	font-size: 54px;
	line-height: 1.14;
	letter-spacing: 0;
}

@media (max-width: 575.98px) {
	#lc-palestra-benessere #lg-sezione-hero .lg-h1--logo .lc-h1-riga2 {
		font-size: 34px;
	}

}

#lc-palestra-benessere #lg-sezione-hero .lc-eyebrow {
	font-family: 'Raleway LG', Helvetica, Arial, sans-serif;
	font-weight: 400;
	letter-spacing: .22em;
}

#lc-palestra-benessere #lg-sezione-hero .lg-hero-paragrafo {
	max-width: none;
	font-family: 'Raleway LG', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 1.75;
}

@media (max-width: 575.98px) {
	#lc-palestra-benessere #lg-sezione-hero .lg-hero-paragrafo {
		font-size: 16px;
	}

}

#lc-palestra-benessere .lg-forza-intestazione .lg-benefici-frecce {
	margin-bottom: 0;
}

#lc-palestra-benessere #lg-sezione-coach .lc-eyebrow {
	color: #7fcdf2;
}

#lc-palestra-benessere #lg-sezione-coach .lc-btn-primary:focus-visible {
	outline-color: #7fcdf2;
}

#lc-palestra-benessere #lg-sezione-team .lg-team-img {
	height: auto;
}

.lg-lightbox .lc-ai-badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(10, 32, 50, .62);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.45;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

@media (max-width: 575.98px) {
	.lg-lightbox .lc-ai-badge {
		right: 6px;
		bottom: 6px;
		padding: 2px 7px;
		font-size: 10px;
		letter-spacing: .04em;
	}

}

@media (min-width: 992px) {
	#lc-palestra-benessere #lg-sezione-team .lg-team-grid {
		grid-template-columns: 5fr 7fr;
		column-gap: 64px;
		align-items: start;
	}

	#lc-palestra-benessere #lg-sezione-team .lg-team-p2-block {
		margin-bottom: 0;
	}

	#lc-palestra-benessere #lg-sezione-team .lg-team-foto-block {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 48px 0 0;
	}

}


/* =========================================================================
   PARTE C — palestra-salute.css, scritto a mano, commenti originali
   ========================================================================= */

/* ==========================================================================
   Palestra della Salute — form contatti
   ==========================================================================

   PERCHE' QUESTO FILE ESISTE, E NON UNA RIGA IN longevity.css
   longevity.css e' un artefatto di build minificato: i sorgenti SCSS
   (custom-php/centro-longevity/build/, citati in DEPLOY.md §1) non esistono
   piu'. Scrivere li' dentro a mano significa perdere tutto alla prima build
   che qualcuno rigenerasse. Questo file e' sorgente, si edita a mano, e viene
   caricato DOPO longevity.css (dipendenza 'longevity-css' nel loader).

   MARKUP
   Il form e' il CF7 "Palestra della Salute — Richiesta info", che usa classi
   .lg-form-* nostre e NON .column-half/.column-full del tema. Quelle ultime
   in style.css portano `color:#FFF`, che incolla il form ai fondi scuri:
   evitandole, il form e' indipendente dal fondo e i colori li decide questo
   file. Definizione del form in longevity-materiale/form-palestra-salute.md

   Tutto e' sotto #lc-palestra-benessere #cta-finale: non puo' colare su altre pagine
   ne' su altre sezioni della stessa pagina.
   ========================================================================== */


/* ==========================================================================
   PARTE A — Tipografia e spaziature della pagina
   Fuori da #cta-finale. Il file si carica solo dove esiste uno shortcode CF7
   (vedi loader.php), quindi solo su questa pagina: la Longevity non lo vede.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A1. Titoli delle 4 aree dei corsi
   Sono <h3> ma portano le classi .lc-h2 .lc-h2--compatto, cosi' ereditano la
   scala tipografica gia' definita in longevity.css (32px, 25px sotto 576px)
   senza che qui si ridichiarino i breakpoint. E' la regola di CLAUDE.md §8:
   un H3 grande come un H2 si fa con una classe, non cambiando tag.
   Qui restano solo colore e allineamento.
   -------------------------------------------------------------------------- */

#lc-palestra-benessere .lg-titolo-area {
	color: #004a87;
	text-align: center;
}

/* "I corsi" e' l'H2 che le contiene: resta scuro e piu' grande (36px di
   .lc-h2 senza --compact), cosi' la gerarchia si vede prima di leggerla. */
#lc-palestra-benessere .lg-h2--center {
	text-align: center;
}

/* L'intro dei corsi sta sotto un titolo centrato: allineata a sinistra
   sbilancia il blocco. Colpisce solo i paragrafi dentro .lg-percorsi-intro,
   quindi non tocca ne' l'hero ne' la sezione contatti. */
#lc-palestra-benessere .lg-percorsi-intro .lc-corpo-intro {
	text-align: center;
}

/* --------------------------------------------------------------------------
   A1-bis. Nav delle 4 aree + card compatte su mobile
   Il problema che risolve: a una colonna i 26 corsi fanno ~6.600px, circa 9
   schermate di telefono tutte uguali. La lunghezza in se' non e' il male,
   l'assenza di orientamento si': la nav da' quattro punti d'ingresso senza
   nascondere nulla al caricamento (vincolo CLAUDE.md §8).
   -------------------------------------------------------------------------- */

#lc-palestra-benessere {
	--lg-header-h: 88px;   /* header Enfold: fixed, data-scroll-offset=88 */
	--lg-nav-h: 62px;
}

@media (max-width: 989px) {
	#lc-palestra-benessere {
		--lg-header-h: 80px;
	}
}

/* NAV NON STICKY, DI PROPOSITO.
   Per agganciarla servirebbe rimettere a `visible` l'overflow di #wrap_all e
   di body: Enfold li usa su tutto il sito come guardia contro lo scroll
   orizzontale, e un antenato con overflow non-visible diventa il contenitore
   di scorrimento di position:sticky, per cui la nav non si aggancia.
   Scartato: e' un intervento sulla struttura del tema per un vantaggio
   secondario. Con le card ad accordion la sezione su mobile si accorcia
   abbastanza da non averne bisogno. */
#lc-palestra-benessere .lg-aree-nav {
	margin-bottom: 28px;
	padding-bottom: 12px;
	box-shadow: 0 1px 0 #e5ebf1;
}

#lc-palestra-benessere .lg-aree-nav-list {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Mobile: riga scorrevole. 4 voci impilate mangerebbero mezza schermata. */
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

#lc-palestra-benessere .lg-aree-nav-list::-webkit-scrollbar {
	display: none;
}

#lc-palestra-benessere .lg-aree-nav-list li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

#lc-palestra-benessere .lg-aree-nav-list a {
	display: block;
	padding: 9px 16px;
	border: 1px solid #cfdae4;
	border-radius: 999px;
	background: #fff;
	color: #004a87;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#lc-palestra-benessere .lg-aree-nav-list a:hover {
	border-color: #44ade3;
}

/* Voce attiva: bianco su #004a87 = 9.01:1 */
#lc-palestra-benessere .lg-aree-nav-list a.is-active {
	background: #004a87;
	border-color: #004a87;
	color: #fff;
}

#lc-palestra-benessere .lg-aree-nav-list a:focus-visible {
	outline: 3px solid rgba(68, 173, 227, .8);
	outline-offset: 2px;
}

@media (min-width: 768px) {
	#lc-palestra-benessere .lg-aree-nav-list {
		flex-wrap: wrap;
		justify-content: center;
		overflow: visible;
	}
}

/* Senza questo l'ancora atterra sotto l'header fisso e il titolo dell'area
   resta coperto.
   CORRETTO 31/08/2026: c'era anche --lg-nav-h nel calcolo, retaggio di
   quando si sperava di rendere la nav sticky. La nav e' `static` (vedi il
   commento "NAV NON STICKY" qui sopra): scorre via con la pagina e non copre
   niente, quindi quei 62px erano solo un buco sopra il titolo.
   Lo scroll vero lo governa comunque palestra-salute.js: Enfold intercetta i
   click sulle ancore interne e scrolla con un offset suo. Questa riga resta
   per chi arriva con l'ancora gia' nell'URL, dove il JS non passa. */
#lc-palestra-benessere .lg-area-anchor {
	scroll-margin-top: calc(var(--lg-header-h) + 16px);
}

/* Card piu' compatte sotto i 768px.
   Si stringono SPAZI, non corpi di testo: il pubblico di questa pagina
   comprende anziani e persone con patologie croniche, e rimpicciolire il
   testo per far stare piu' roba nello schermo sarebbe il compromesso
   sbagliato. Il corpo resta 15px, l'occhiello 13px. */
@media (max-width: 767.98px) {
	#lc-palestra-benessere #lg-sezione-fasi .lg-benefici-card {
		padding: 17px 16px;
	}
	#lc-palestra-benessere #lg-sezione-fasi .lg-benefici-titolo {
		margin-bottom: 7px;
	}
	#lc-palestra-benessere #lg-sezione-fasi .lc-corpo-card {
		line-height: 1.5;
	}
	#lc-palestra-benessere #lg-sezione-fasi .lg-fase-label {
		margin-bottom: 4px !important;   /* batte l'utility .mb-2 di Bootstrap */
	}
	#lc-palestra-benessere #lg-sezione-fasi .lg-percorsi-grid {
		gap: 8px;
	}
}

/* --------------------------------------------------------------------------
   A1-ter. QUI C'ERA L'ACCORDION — rimosso il 31/08/2026
   Le card erano <details open> che il JS chiudeva sotto i 768px. Con la
   fotografia e il carosello (paragrafo 7) la sezione non cresce piu' con il
   numero di corsi: non c'era piu' niente da comprimere, e restava solo il
   costo — l'alone di focus al tocco, che e' il comportamento nativo del
   <summary> in quanto comando di apertura.
   Le card sono ora blocchi normali: foto, frequenza, titolo, descrizione,
   nell'ordine, sempre visibili. Sono spariti con l'accordion anche il
   chevron disegnato col bordo, il grid del <summary> e la ginnastica per
   tenere la frequenza sopra il titolo.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   A2. Hero — aria fra il titolo e il paragrafo
   Sotto un H1 da 52px un paragrafo attaccato sembra una didascalia.
   -------------------------------------------------------------------------- */

#lc-palestra-benessere .lg-hero-testo-block {
	margin-top: 10px;
}

#lc-palestra-benessere .lg-hero-paragrafo {
	line-height: 1.85;
}

/* --------------------------------------------------------------------------
   A3. Sezione contatti — "Scrivici un messaggio" sotto Chiama/WhatsApp
   -------------------------------------------------------------------------- */

#lc-palestra-benessere .lg-contatti-scrivici {
	margin-top: 12px;
}


/* ==========================================================================
   PARTE B — Form contatti (sezione blu)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Contenitore
   .lg-cta-content centra il testo della sezione: il form no, i campi vanno
   allineati a sinistra o l'occhio non trova l'inizio di ogni riga.
   -------------------------------------------------------------------------- */

#lc-palestra-benessere #cta-finale .lg-form {
	max-width: 640px;
	margin: 40px auto 0;
	text-align: left;
}


/* --------------------------------------------------------------------------
   2. Griglia dei campi
   Una colonna su mobile, due da 768px. Il messaggio le attraversa entrambe.
   -------------------------------------------------------------------------- */

#lc-palestra-benessere #cta-finale .lg-form-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 768px) {
	#lc-palestra-benessere #cta-finale .lg-form-grid {
		grid-template-columns: 1fr 1fr;
	}
	#lc-palestra-benessere #cta-finale .lg-form-field--full {
		grid-column: 1 / -1;
	}
}

#lc-palestra-benessere #cta-finale .lg-form-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;   /* CF7 avvolge i campi in <p>: il margine di default sfasa la griglia */
}

#lc-palestra-benessere #cta-finale .lg-form-field label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
}

/* L'asterisco in un colore diverso si legge come segnale, non come refuso. */
#lc-palestra-benessere #cta-finale .lg-form-req {
	color: #7fcdf2;
}

/* CF7 avvolge ogni controllo in uno <span> inline. */
#lc-palestra-benessere #cta-finale .lg-form .wpcf7-form-control-wrap {
	display: block;
}

/* CF7 passa il markup del form attraverso wpautop: aggiunge <p> attorno al
   contenuto sciolto dei <div> e, se un campo va a capo nel sorgente, un <br>
   fra etichetta e campo. Dentro un contenitore flex quel <br> diventa un
   elemento a se' e apre un buco di ~50px. Il markup del form e' scritto con
   ogni campo su una riga sola per non generarli; queste due regole sono la
   rete di sicurezza se qualcuno lo riformatta dall'editor CF7. */
#lc-palestra-benessere #cta-finale .lg-form p {
	margin: 0;
}

#lc-palestra-benessere #cta-finale .lg-form br {
	display: none;
}


/* --------------------------------------------------------------------------
   3. Campi
   Fondo bianco pieno e testo scuro, non campi traslucidi: il pubblico di
   questa pagina comprende persone anziane e ipovedenti, e un campo semi-
   trasparente su blu e' esattamente il posto sbagliato per fare eleganza.
   -------------------------------------------------------------------------- */

#lc-palestra-benessere #cta-finale .lg-form input[type="text"],
#lc-palestra-benessere #cta-finale .lg-form input[type="email"],
#lc-palestra-benessere #cta-finale .lg-form input[type="tel"],
#lc-palestra-benessere #cta-finale .lg-form textarea {
	width: 100%;
	min-height: 52px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0);
	border-radius: 8px;
	background: #fff;
	color: #14324e;
	font-family: inherit;
	font-size: 16px;   /* sotto i 16px iOS zooma il viewport al focus */
	line-height: 1.35;
	box-sizing: border-box;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Nessun min-height qui: l'altezza la decide l'attributo rows del campo
   ([textarea* messaggio x4] = 4 righe). Un min-height in CSS lo scavalcherebbe
   e cambiare le righe dall'editor CF7 non avrebbe piu' effetto. */
#lc-palestra-benessere #cta-finale .lg-form textarea {
	height: auto;
	resize: vertical;
}

#lc-palestra-benessere #cta-finale .lg-form input:focus-visible,
#lc-palestra-benessere #cta-finale .lg-form textarea:focus-visible {
	outline: 3px solid rgba(127, 205, 242, .75);
	outline-offset: 2px;
	border-color: #7fcdf2;
}

/* Campo in errore: bordo rosso, cosi' l'errore non e' segnalato dal solo
   testo sotto (che chi ingrandisce molto la pagina puo' non vedere). */
#lc-palestra-benessere #cta-finale .lg-form .wpcf7-not-valid {
	border-color: #ff8a80;
	box-shadow: 0 0 0 1px #ff8a80;
}


/* --------------------------------------------------------------------------
   4. Consenso privacy
   Casella disegnata da zero: quella nativa su fondo blu e' il quadratino
   grigio di sistema, fuori scala e fuori palette.
   -------------------------------------------------------------------------- */

#lc-palestra-benessere #cta-finale .lg-form-privacy {
	margin-top: 26px;
}

#lc-palestra-benessere #cta-finale .lg-form-privacy .wpcf7-list-item {
	margin: 0;
}

#lc-palestra-benessere #cta-finale .lg-form-privacy label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	cursor: pointer;
}

#lc-palestra-benessere #cta-finale .lg-form-privacy small {
	font-size: 14px;
	line-height: 1.5;
	color: #fff;
}

#lc-palestra-benessere #cta-finale .lg-form-privacy a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

#lc-palestra-benessere #cta-finale .lg-form-privacy a:hover {
	color: #7fcdf2;
}

#lc-palestra-benessere #cta-finale .lg-form input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	position: relative;
	width: 22px;
	height: 22px;
	margin: 0;
	border: 2px solid rgba(255, 255, 255, .75);
	border-radius: 5px;
	background: transparent;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

#lc-palestra-benessere #cta-finale .lg-form input[type="checkbox"]:hover {
	border-color: #fff;
}

#lc-palestra-benessere #cta-finale .lg-form input[type="checkbox"]:checked {
	background-color: #44ade3;
	border-color: #44ade3;
}

/* Il segno di spunta: due lati di un bordo, ruotati. Nessuna immagine. */
#lc-palestra-benessere #cta-finale .lg-form input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

#lc-palestra-benessere #cta-finale .lg-form input[type="checkbox"]:focus-visible {
	outline: 3px solid rgba(127, 205, 242, .75);
	outline-offset: 3px;
}


/* --------------------------------------------------------------------------
   5. Invio
   -------------------------------------------------------------------------- */

#lc-palestra-benessere #cta-finale .lg-form-submit {
	margin-top: 30px;
	text-align: center;
}

#lc-palestra-benessere #cta-finale .lg-form .wpcf7-submit {
	/* style.css dichiara `.wpcf7-submit{ float:left }`: senza questo il
	   bottone esce dal flusso e text-align:center non lo tocca. */
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-width: 240px;
	min-height: 54px;
	/* !important: style.css dichiara `.wpcf7-submit{ padding:15px 30px !important }` */
	padding: 16px 36px !important;
	border: 1px solid #44ade3;
	border-radius: 8px;
	background: #44ade3;
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-transform: none;   /* il tema le vuole maiuscole, la pagina no */
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

#lc-palestra-benessere #cta-finale .lg-form .wpcf7-submit:hover {
	background: #2f9bd2;
	border-color: #2f9bd2;
}

#lc-palestra-benessere #cta-finale .lg-form .wpcf7-submit:focus-visible {
	outline: 3px solid rgba(127, 205, 242, .75);
	outline-offset: 3px;
}

#lc-palestra-benessere #cta-finale .lg-form .wpcf7-spinner {
	vertical-align: middle;
}


/* --------------------------------------------------------------------------
   6. Messaggi
   Quelli di default sono testo bianco su bordo trasparente: sul blu si
   perdono. Su fondo bianco e testo scuro si leggono in ogni stato.
   -------------------------------------------------------------------------- */

#lc-palestra-benessere #cta-finale .wpcf7-response-output {
	max-width: 640px;
	margin: 24px auto 0 !important;   /* CF7 impone un margin inline */
	padding: 14px 18px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #fff;
	color: #14324e;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
}

#lc-palestra-benessere #cta-finale .lg-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	padding: 0;
	background: transparent;
	color: #ffc9c4;   /* 6.3:1 sul blu della sezione */
	font-size: 13px;
	font-weight: 600;
	text-shadow: none;
}

/* ==========================================================================
   7. Corsi con la fotografia — 31/08/2026
   Ogni corso ha la sua foto (1080x1350, 4:5). Sotto i 768px i corsi di
   ciascuna area scorrono in un carosello Swiper; da 768px in su lo swiper e'
   spento (data-off-md in ns-swiper.js) e .swiper-wrapper torna la griglia
   di prima, 2 colonne e poi 3 da 1200px.

   PERCHE' IL CAROSELLO. In colonna singola 26 foto avrebbero aggiunto circa
   6.000px alla pagina su telefono, annullando la compattazione che la deroga
   di CLAUDE.md 8.1 era servita a ottenere (sezione corsi da 6.600 a 2.714px).
   Il carosello mostra una card e mezza per volta: l'altezza della sezione
   non dipende piu' dal numero di corsi.
   ========================================================================== */

/* --- 7.1 La card ---------------------------------------------------------
   Padding a zero sulla card: la foto deve arrivare ai bordi. Il respiro lo
   danno i singoli blocchi di testo qui sotto. overflow:hidden serve a far
   ritagliare la foto dal border-radius della card.                        */
#lc-palestra-benessere #lg-sezione-fasi .lg-corso-card {
	padding: 0;
	overflow: hidden;
	height: 100%;   /* nel carosello le slide sono stirate: la card le riempie */
}

/* Foto, frequenza, titolo e descrizione si impilano da soli: la card e' un
   blocco normale. Il padding sta sui singoli figli e non sulla card, perche'
   la foto deve arrivare ai bordi.
   Le 4 card dell'area Aziende non hanno la frequenza: il selettore di
   adiacenza dà il respiro al titolo quando la foto lo precede.            */
#lc-palestra-benessere #lg-sezione-fasi .lg-card-freq         { padding: 14px 16px 0; }
#lc-palestra-benessere #lg-sezione-fasi .lg-card-titolo-block { padding: 0 16px 10px; }
#lc-palestra-benessere #lg-sezione-fasi .lg-card-desc         { padding: 0 16px 16px; }
#lc-palestra-benessere #lg-sezione-fasi .lg-card-foto + .lg-card-titolo-block { padding-top: 14px; }

/* --- 7.2 La foto ---------------------------------------------------------
   4:5 nativo su telefono, quadrata da 768px in su. Il taglio quadrato toglie
   il 20% dell'altezza (10% sopra e 10% sotto): sulle foto consegnate resta
   fuori solo il soffitto e il pavimento, i volti restano dentro. Un 4:3
   avrebbe tolto il 40% e avrebbe tagliato le teste.                       */
#lc-palestra-benessere #lg-sezione-fasi .lg-card-img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
	background: #eef3f7;   /* si vede solo mentre la foto carica */
}

/* --- 7.3 Titolo del corso piu' grande -----------------------------------
   Da 19px a 22/24px. Si scrive qui e non su .lc-h3-card, che longevity.css
   usa anche altrove: il selettore e' ancorato alla sezione corsi.         */
#lc-palestra-benessere #lg-sezione-fasi .lg-benefici-titolo {
	font-size: 22px;
	line-height: 1.25;
}

@media (min-width: 768px) {
	#lc-palestra-benessere #lg-sezione-fasi .lg-card-img { aspect-ratio: 1 / 1; }
	#lc-palestra-benessere #lg-sezione-fasi .lg-benefici-titolo { font-size: 24px; }
	#lc-palestra-benessere #lg-sezione-fasi .lg-card-freq         { padding: 18px 20px 0; }
	#lc-palestra-benessere #lg-sezione-fasi .lg-card-titolo-block { padding: 0 20px 10px; }
	#lc-palestra-benessere #lg-sezione-fasi .lg-card-desc         { padding: 0 20px 20px; }
	#lc-palestra-benessere #lg-sezione-fasi .lg-card-foto + .lg-card-titolo-block { padding-top: 18px; }
}

/* --- 7.4 Carosello su telefono, griglia su desktop ----------------------- */
#lc-palestra-benessere .lg-corsi-swiper .swiper-slide { height: auto; }   /* card ad altezza piena */

/* Da 768px Swiper e' spento ma lascia comunque width e margin-right inline
   sulle slide e la transform sul wrapper: vanno battuti con !important,
   e' l'unico modo. */
@media (min-width: 768px) {
	#lc-palestra-benessere .lg-corsi-swiper { overflow: visible; }
	#lc-palestra-benessere .lg-corsi-swiper > .swiper-wrapper {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 18px;
		transform: none !important;
	}
	#lc-palestra-benessere .lg-corsi-swiper > .swiper-wrapper > .swiper-slide {
		width: auto !important;
		margin: 0 !important;
	}
	/* Frecce e barra servono solo al carosello. */
	#lc-palestra-benessere .lg-corsi-frecce,
	#lc-palestra-benessere .lg-corsi-progress { display: none; }
}

@media (min-width: 1200px) {
	#lc-palestra-benessere .lg-corsi-swiper > .swiper-wrapper {
		grid-template-columns: repeat(3, 1fr);
		max-width: 1150px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Frecce sopra le card e barra sotto: le classi sono quelle gia' usate dal
   carosello dei Benefici della Longevity (tonde, 34/38px, bordo #cfdae4),
   qui si regolano solo i margini.                                         */
#lc-palestra-benessere .lg-corsi-frecce   { margin-bottom: 14px; }
#lc-palestra-benessere .lg-corsi-progress { margin-top: 16px; }

/* Senza JavaScript — e nell'editor LiveCanvas, dove gli script non girano —
   le slide restano impilate: frecce e barra non comanderebbero nulla. */
#lc-palestra-benessere .ns-swiper:not(.swiper-initialized) ~ .lg-corsi-progress,
#lc-palestra-benessere .lg-corsi-frecce:has(+ .ns-swiper:not(.swiper-initialized)) { display: none; }

/* --- 7.5 Hero: dove si trova la palestra --------------------------------
   Il "secondo piano" compare due volte in pagina: qui e nel paragrafo della
   sezione contatti. Chi arriva da una ricerca e non scorre fino in fondo
   deve poterlo leggere prima di decidere se telefonare.                   */
#lc-palestra-benessere .lg-hero-dove {
	margin: 0;
	color: #3c5568;
	font-size: 15px;
	line-height: 1.5;
}

#lc-palestra-benessere .lg-hero-dove strong { color: #004a87; }

/* --- 7.6 Stacco fra un'area e la successiva ------------------------------
   Prima lo dava il .mb-5 sulla barra di avanzamento. Sbagliato: da 768px in
   su la barra e' display:none, e un elemento nascosto non porta margine —
   sul desktop le quattro aree risultavano attaccate (stacco misurato: 0px).
   Il margine va su .lg-area, che c'e' a ogni larghezza. Su margin-top e non
   su margin-bottom cosi' l'ultima area non aggiunge spazio in fondo alla
   sezione, dove il padding ce l'ha gia' la <section>.
   Su telefono lo stacco era ed e' 48px: li' il .mb-5 funzionava (la barra e'
   visibile) e non c'era niente da correggere.                             */
#lc-palestra-benessere #lg-sezione-fasi .lg-area + .lg-area { margin-top: 48px; }

@media (min-width: 768px) {
	#lc-palestra-benessere #lg-sezione-fasi .lg-area + .lg-area { margin-top: 76px; }
}

/* ==========================================================================
   8. Badge "Immagine AI" — 31/08/2026
   Tutte le fotografie di questa pagina sono generate con l'AI. L'AI Act
   (regolamento UE 2024/1689) chiede che il contenuto sintetico che sembra
   autentico sia dichiarato in modo chiaro e riconoscibile: qui la
   dichiarazione e' un'etichetta su ogni singola immagine.

   DUE SCELTE CHE SI SCOSTANO DAL MOCKUP, ed entrambe per lo stesso motivo:
   una dichiarazione che non si legge non e' una dichiarazione.

   1. Non e' bianco su bianco. Il mockup diceva "sfondo bianco con opacita'
      e testo bianco": e' invisibile. Qui il fondo e' blu molto scuro al 62%
      e il testo bianco. Nel caso peggiore — foto completamente bianca sotto
      l'etichetta — il contrasto risultante e' 4,7:1, sopra la soglia AA;
      su una foto scura sale. E' "quasi in dissolvenza" come chiesto, ma
      resta leggibile su qualunque immagine.

   2. Non e' un tondino con dentro "AI". In un cerchio ci stanno due lettere,
      e "AI" da solo e' un indovinello — su una pagina il cui pubblico
      comprende persone anziane, di piu'. "Immagine AI" e' esplicito, sta in
      una pillola piccola e non ruba spazio alla fotografia.

   Il badge NON e' aria-hidden: e' la dichiarazione, e deve arrivare anche a
   chi usa uno screen reader. Le immagini hanno alt="" perche' illustrative,
   quindi senza questo testo per loro non esisterebbe alcuna dichiarazione.

   Resta fuori portata di questo file la marcatura leggibile dalla macchina
   prevista dall'art. 50: quella e' C2PA, vive dentro il file immagine e la
   scrive chi genera. L'attributo data-ai-generated sulle <img> e' solo un
   aggancio nostro, non uno standard.
   ========================================================================== */

#lc-palestra-benessere .lg-card-foto,
#lc-palestra-benessere .lg-hero-foto-block,
#lc-palestra-benessere .lg-team-foto-block {
	position: relative;   /* ancora per il badge */
}

#lc-palestra-benessere .lc-ai-badge {
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(10, 32, 50, .62);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.45;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;   /* non deve intercettare lo swipe del carosello */
}

/* Su schermi piccoli l'etichetta si stringe un po', ma non scende sotto i
   10px: e' il limite oltre il quale smette di essere una dichiarazione
   leggibile e diventa una decorazione. */
@media (max-width: 575.98px) {
	#lc-palestra-benessere .lc-ai-badge {
		right: 6px;
		bottom: 6px;
		padding: 2px 7px;
		font-size: 10px;
		letter-spacing: .04em;
	}
}

/* ==========================================================================
   9. Chi lavora nella palestra — 31/08/2026
   Stessa impalcatura della sezione corsi: carosello sotto i 768px, griglia
   sopra. Le classi dei controlli (.lg-corsi-frecce, .lg-corsi-progress) sono
   riusate tali e quali, quindi qui non c'e' niente da ridefinire per frecce
   e barra.

   La differenza dalle card dei corsi: qui la foto e' QUADRATA e c'e' un
   link. Cliccabile e' solo il link, non la card — un contorno di focus su un
   <a> e' corretto e atteso, a differenza dell'alone che aveva il <summary>
   quando le card dei corsi erano un accordion.
   ========================================================================== */

#lc-palestra-benessere .lg-staff-card {
	padding: 0;
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;   /* il link resta in fondo anche a card diseguali */
}

/* I cinque ritratti hanno rapporti molto diversi (da 0,67 a 1,39) e non
   esistono derivate quadrate: il taglio lo fa il CSS. Sono tutti mezzibusti
   centrati, quindi il centro va bene; l'unico che perde parecchio ai lati e'
   Vecchiato, che e' orizzontale, ma il volto resta dentro. */
#lc-palestra-benessere .lg-staff-img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* 18% e non "center": il ritaglio quadrato mangia altezza solo sui
	   ritratti verticali, e il piu' stretto (Gomis, 666x1000) a meta' altezza
	   perdeva la sommita' della testa. Su Vecchiato, che e' orizzontale, il
	   valore non ha effetto: li' il quadrato ritaglia i lati, non l'altezza. */
	object-position: center 18%;
	background: #eef3f7;
}

#lc-palestra-benessere .lg-staff-nome  { padding: 16px 16px 4px; }
#lc-palestra-benessere .lg-staff-ruolo { padding: 0 16px; }
#lc-palestra-benessere .lg-staff-link  { padding: 12px 16px 16px; margin-top: auto; }

#lc-palestra-benessere .lg-staff-nome h3 {
	margin: 0;
	color: #004a87;
	font-size: 19px;
	line-height: 1.25;
}

#lc-palestra-benessere .lg-staff-ruolo p { margin: 0; }

#lc-palestra-benessere .lg-staff-link a {
	display: inline-block;
	color: #004a87;
	font-size: 15px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

#lc-palestra-benessere .lg-staff-link a:hover,
#lc-palestra-benessere .lg-staff-link a:focus-visible {
	color: #2b69a1;
}

#lc-palestra-benessere .lg-staff-link a:focus-visible {
	outline: 3px solid rgba(68, 173, 227, .8);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (min-width: 768px) {
	#lc-palestra-benessere .lg-staff-nome  { padding: 18px 18px 5px; }
	#lc-palestra-benessere .lg-staff-ruolo { padding: 0 18px; }
	#lc-palestra-benessere .lg-staff-link  { padding: 14px 18px 18px; }
	#lc-palestra-benessere .lg-staff-nome h3 { font-size: 20px; }
}

/* Carosello -> griglia, come per i corsi. Cinque persone: tre colonne da
   768px e cinque da 1200, cosi' su schermo largo stanno in una riga sola. */
#lc-palestra-benessere .lg-staff-swiper .swiper-slide { height: auto; }

@media (min-width: 768px) {
	#lc-palestra-benessere .lg-staff-swiper { overflow: visible; }
	#lc-palestra-benessere .lg-staff-swiper > .swiper-wrapper {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
		transform: none !important;
	}
	#lc-palestra-benessere .lg-staff-swiper > .swiper-wrapper > .swiper-slide {
		width: auto !important;
		margin: 0 !important;
	}
}

@media (min-width: 1200px) {
	#lc-palestra-benessere .lg-staff-swiper > .swiper-wrapper {
		grid-template-columns: repeat(5, 1fr);
		gap: 16px;
		max-width: 1150px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* --- 9.1 Il contenitore dei ritratti e' piu' largo delle altre sezioni ----
   Cinque card in fila dentro il contenitore standard venivano 217px l'una:
   troppo poco per un ritratto, contro i 371px delle card dei corsi (che pero'
   sono tre per riga).

   Tre tetti da alzare, non uno:
   1. il max-width 1150px che avevo messo sul .swiper-wrapper per uniformita'
      con la griglia dei corsi — qui va tolto;
   2. Enfold, che cappa .container a 1320px anche a 1920 di viewport;
   3. i 72px di padding orizzontale che longevity.css mette sul .container.
      Erano il vero collo di bottiglia: mangiavano 144px, piu' di quanto
      valesse tutto il resto. Su una fila di ritratti non servono — li' non
      c'e' testo lungo da tenere corto — quindi qui scendono a 24px.

   Il secondo richiede la catena "#top #wrap_all": la regola del tema e'
   `.responsive #top #wrap_all .container`, due id piu' due classi, e batte
   qualunque cosa ancorata al solo #lc-palestra-benessere. E' la stessa tecnica gia'
   usata sull'hero della Longevity (CLAUDE.md 7.3): alzare la specificita'
   invece di ricorrere a !important.

   Il 94% invece di una larghezza fissa serve a non incollare le card ai
   bordi sui portatili: sotto i ~1700px comanda la percentuale, sopra il
   tetto di 1600px.

   L'intestazione e il paragrafo NON si allargano: .lg-percorsi-intro ha gia'
   un max-width di 760px suo, quindi restano centrati e leggibili.

   Conseguenza voluta: questa sezione e' piu' larga delle altre. Se un giorno
   il disallineamento da fastidio, si abbassa quel max-width e torna a filo. */
#top #wrap_all #lg-sezione-staff .container {
	width: 96%;
	max-width: 1600px;
	padding-left: 24px;
	padding-right: 24px;
}

@media (min-width: 1200px) {
	#lc-palestra-benessere .lg-staff-swiper > .swiper-wrapper {
		max-width: none;
		gap: 20px;
	}
}