/* =========================================================================
   Centro Longevity — layout delle sezioni passate a immagine (17/08/2026)

   Perché questo file esiste e non si tocca longevity.css: longevity.css è un
   artefatto di build minificato e i suoi sorgenti SCSS non esistono più.
   Ogni override successivo vive in un file sorgente a parte, caricato dopo.

   Perché ogni regola è agganciata a una classe modificatore (.lg-grid-img,
   .lg-hero-img--full) e non direttamente a .lg-percorsi-grid / .lg-hero-img:
   la pagina "Palestra della Salute" riusa lo stesso template Longevity e
   quindi riceve anche questo CSS, e usa già .lg-percorsi-grid e .lg-hero-img
   con un layout suo. Senza il modificatore, questo file la romperebbe.
   Con il modificatore, il CSS è inerte ovunque non lo si scriva a mano.

   La doppia classe alza anche la specificità sopra longevity.css
   (#id + 2 classi contro #id + 1), quindi l'ordine di caricamento non è
   l'unica cosa che ci tiene in piedi.
   ========================================================================= */


/* --- Hero: immagine non ritagliata --------------------------------------
   longevity.css impone height:260px/600px + object-fit:cover su .lg-hero-img.
   Qui la foto va mostrata intera: si toglie l'altezza fissa e il ritaglio.
   Il selettore include il blocco contenitore per battere la regola @992px
   di longevity.css a prescindere dall'ordine dei file.                     */
#lc-longevity .lg-hero-foto-block .lg-hero-img--full,
#lc-longevity .lg-hero-foto-block img.lg-hero-img--full {
	height: auto;
	object-fit: initial;
}


/* --- Immagini che sostituiscono una card -------------------------------- */
#lc-longevity .lg-area-immagine > img,
#lc-longevity .lg-percorso-immagine > img {
	display: block;      /* toglie il gap da baseline sotto l'immagine */
	width: 100%;
	height: auto;
}


/* --- Griglia "6 aree": 2 colonne su mobile, 3 da tablet in su ------------
   I PNG delle aree hanno ~7% di margine trasparente per lato: fa già da
   gutter ottico, quindi il gap dichiarato qui è più stretto di quello che
   sembrerebbe servire.                                                     */
#lc-longevity .lg-aree-grid.lg-grid-img {
	grid-template-columns: repeat(2, 1fr);
	gap: 6px;
}

@media (min-width: 768px) {
	#lc-longevity .lg-aree-grid.lg-grid-img {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
}


/* --- Griglia "Percorsi mirati": 2 / 3 / 4 colonne ----------------------- */
#lc-longevity .lg-percorsi-grid.lg-grid-img {
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

@media (min-width: 768px) {
	#lc-longevity .lg-percorsi-grid.lg-grid-img {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}
}

@media (min-width: 1200px) {
	#lc-longevity .lg-percorsi-grid.lg-grid-img {
		grid-template-columns: repeat(4, 1fr);
		/* gap 18px, max-width 1150px e centratura arrivano già da
		   longevity.css: qui si cambiano solo le colonne. */
	}
}


/* =========================================================================
   Secondo giro, 17/08/2026
   ========================================================================= */


/* --- H1: logo lockup al posto di "Centro Longevity Idealmedica:" ---------
   Il logo è dentro l'<h1>: il testo dell'heading resta completo grazie
   all'alt. Qui si dà solo la misura. Non si tocca .lg-h1-line1, che ora
   fa solo da contenitore (il suo font-size non ha più testo da vestire).  */
#lc-longevity .lg-h1-logo {
	display: block;
	width: min(210px, 66%);
	height: auto;
	margin-bottom: 14px;
}

@media (min-width: 576px) {
	#lc-longevity .lg-h1-logo {
		width: min(255px, 58%);
		margin-bottom: 18px;
	}
}

/* "un pelo più piccolo": 52 -> 46 desktop, 32 -> 29 mobile.
   Agganciato al modificatore .lg-h1--logo, NON a .lg-h1-line2 e basta: la
   pagina Palestra della Salute ha un H1 con lo stesso identico markup
   (.lg-h1-line1 > span.lg-h1-line2) e senza il modificatore le si
   rimpicciolirebbe il titolo. Verificato, non è teoria.
   La doppia classe serve anche a stare sopra longevity.css senza dipendere
   dall'ordine di caricamento. */
#lc-longevity .lg-h1--logo .lg-h1-line2 {
	display: block;
	font-size: 46px;
}

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


/* --- Fasi cliniche E FAQ: apertura e chiusura fluide ---------------------
   (Le FAQ sono state aggiunte a questo blocco il 24/08/2026. Volutamente
   QUI dentro e non in un blocco a parte: sono lo stesso componente — un
   <details> nativo con un chevron — e due meccanismi diversi sulla stessa
   pagina si sarebbero disallineati alla prima modifica. Stessa durata e
   stessa curva, così le due sezioni si aprono con lo stesso gesto.)

   Un <details> nativo scatta perché il contenuto passa da non renderizzato
   a renderizzato in un frame. Si anima con ::details-content: transizione
   di block-size (serve interpolate-size per poter arrivare ad 'auto') più
   content-visibility con allow-discrete, che tiene il contenuto visibile
   mentre collassa — è quest'ultima riga a rendere fluida anche la CHIUSURA:
   senza, il contenuto sparisce di colpo mentre l'altezza sta ancora
   animando, e si sistema solo metà del problema.

   Il blocco @supports NON è decorativo. Senza, un browser che conosce
   `block-size: 0` ma non sa animare ::details-content collasserebbe il
   pannello per sempre: contenuto invisibile anche da aperto. Con la query,
   dove il meccanismo non c'è non si collassa niente e si torna al
   comportamento istantaneo di oggi.

   Il testo delle 4 fasi resta comunque nel DOM servito in ogni caso: il
   vincolo SEO di CLAUDE.md §8 non è toccato da nulla di tutto questo.     */
@supports selector(details::details-content) and (interpolate-size: allow-keywords) {

	#lc-longevity {
		interpolate-size: allow-keywords;
	}

	#lc-longevity .lg-fase::details-content,
	#lc-longevity .lg-faq-details::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size .32s cubic-bezier(.22, .61, .36, 1),
			content-visibility .32s allow-discrete;
	}

	#lc-longevity .lg-fase[open]::details-content,
	#lc-longevity .lg-faq-details[open]::details-content {
		block-size: auto;
	}
}

/* Il chevron ruotava in .16s e finiva di girare a metà apertura. */
#lc-longevity .lg-fase .lg-fase-chevron,
#lc-longevity .lg-faq-chevron {
	transition: transform .32s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
	#lc-longevity .lg-fase::details-content,
	#lc-longevity .lg-faq-details::details-content,
	#lc-longevity .lg-fase .lg-fase-chevron,
	#lc-longevity .lg-faq-chevron,
	#lc-longevity .lg-faq-chevron-cerchio {
		transition: none;
	}
}


/* --- Benefici: card tutte alla stessa altezza ----------------------------
   Swiper dà alle slide un'altezza propria, quindi le card si fermano al
   loro contenuto e i bordi non si allineano. Slide ad altezza automatica
   + card al 100% le fa arrivare tutte in fondo alla riga.                 */
#lc-longevity .lg-benefici-swiper .swiper-wrapper {
	align-items: stretch;
}

#lc-longevity .lg-benefici-swiper .swiper-slide {
	height: auto;
}

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


/* --- Partner: griglia 2 (mobile) / 4 (desktop) ---------------------------
   Il carosello è stato tolto: con 4 loghi non scorreva niente e la
   paginazione mostrava un solo punto attivo. Qui è una griglia semplice.
   Il trattamento grayscale/opacity dei loghi resta quello del handoff,
   dichiarato in longevity.css su .lg-partner-logo img.                    */
#lc-longevity .lg-partner-griglia {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px 16px;
	align-items: center;
	justify-items: center;
	max-width: 1050px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 768px) {
	#lc-longevity .lg-partner-griglia {
		grid-template-columns: repeat(4, 1fr);
		gap: 32px;
	}
}

/* I loghi hanno margini bianchi generosi dentro il PNG (500x250 con il
   marchio al centro): dimensionarli in altezza come faceva il carosello li
   rende minuscoli. Qui contano la larghezza della cella e il rapporto 2:1. */
#lc-longevity .lg-partner-griglia .lg-partner-logo {
	height: auto;
	width: 100%;
}

#lc-longevity .lg-partner-griglia .lg-partner-logo img {
	width: 100%;
	height: auto;
	max-width: 240px;
}

/* longevity.css desatura i loghi partner (grayscale + opacity .6). Aveva
   senso sui segnaposto, che erano forme piene. I file consegnati sono già
   tenui di loro — grigio chiaro Cerba, tratto rosso sottile Padova — e con
   quel filtro sopra diventavano quasi invisibili proprio nella sezione che
   serve a dare credibilità. Qui tornano a colori pieni.
   Se un domani si rivuole il trattamento tenue, togliere queste due righe. */
#lc-longevity .lg-partner-griglia .lg-partner-logo img {
	filter: none;
	opacity: 1;
}


/* --- Fase 2: schema dei pannelli genetici, ora immagine -----------------
   Sostituisce i 4 chip HTML (.lg-schema*) con il grafico consegnato. Le
   regole .lg-schema, .lg-schema-chip, .lg-schema-centro di longevity.css
   non matchano più nulla: restano lì, innocue.
   Il cap in larghezza tiene il grafico allineato alla colonna di testo
   della fase (i <p> hanno max-width 44em) invece di farlo tracimare.     */
#lc-longevity .lg-schema-immagine {
	max-width: 640px;
	margin-top: 26px;
}

#lc-longevity .lg-schema-immagine > img {
	display: block;
	width: 100%;
	height: auto;
}


/* --- Fasce CTA intermedie (17/08/2026) ---------------------------------
   Due pannelli blu a piena larghezza: dopo i Benefici e prima del Team.
   Rompono la colonna bianca continua (otto sezioni su nove erano bianche o
   #F5F8FA, che contro il bianco non si distingue) e rimettono un punto di
   conversione nei ~8.300px che separavano il bottone dell'hero da quello
   della CTA finale.

   Il fondo è agganciato all'id e non a una classe perché in LiveCanvas la
   <section> non può portare classi custom: stessa soluzione già usata da
   #cta-finale in longevity.css. Due id battono comunque qualunque regola
   di quel file.
   Nessuna di queste classi esiste sulla Palestra della Salute, che riusa
   lo stesso template: il blocco è inerte lì.                              */
#lc-longevity #lg-cta-benefici,
#lc-longevity #lg-cta-team {
	background-color: #004a87;
	color: #fff;
}

/* Eyebrow: su fondo blu il #3661ab di base sparirebbe. Stesso azzurro
   chiaro già adottato da #cta-finale. */
#lc-longevity #lg-cta-benefici .lg-eyebrow,
#lc-longevity #lg-cta-team .lg-eyebrow {
	color: #7fcdf2;
}

/* Su telefono impilata e centrata; da 768px testo a sinistra e bottoni a
   destra, così la fascia resta bassa (~150px) e non diventa una sezione. */
#lc-longevity .lg-fascia {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#lc-longevity .lg-fascia-claim {
	margin: 0;
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

#lc-longevity .lg-fascia-azione {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 360px;
}

@media (min-width: 768px) {
	#lc-longevity .lg-fascia {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 40px;
		text-align: left;
	}

	#lc-longevity .lg-fascia-claim {
		font-size: 28px;
	}

	#lc-longevity .lg-fascia-azione {
		flex: 0 0 auto;
		flex-direction: row;
		width: auto;
		max-width: none;
	}
}

/* Il secondario di base ha bordo #cfdae4 e testo #004a87: su blu
   scomparirebbe. Stessi valori di #cta-finale. */
#lc-longevity #lg-cta-team .lg-btn-secondary {
	border-color: #6fa8d0;
	color: #fff;
}

#lc-longevity #lg-cta-team .lg-btn-secondary:hover {
	border-color: #44ade3;
	color: #fff;
}

/* Focus visibile: l'outline #44ade3 di base stacca poco sul #004a87. */
#lc-longevity #lg-cta-benefici .lg-btn-primary:focus-visible,
#lc-longevity #lg-cta-team .lg-btn-primary:focus-visible,
#lc-longevity #lg-cta-team .lg-btn-secondary:focus-visible {
	outline-color: #7fcdf2;
}


/* =========================================================================
   24/08/2026 — Le 6 card "aree" tornano TESTO (rientro dalla deroga §8.2,
   solo per la sezione 2: i 12 percorsi restano immagine).

   Il cliente ha consegnato le 6 icone come SVG separati — solo il
   pittogramma, senza fondo né testo. Quindi fondo blu stondato, titolo e
   descrizione tornano markup: <svg> inline + <h3> dentro
   ".lg-aree-card--svg". Il testo torna nel DOM, l'alt non è più l'unico
   appiglio per crawler e screen reader.

   Le misure NON sono a occhio: sono campionate dai PNG che stiamo
   sostituendo (derivate 768x895), così la sezione resta visivamente
   identica a quella approvata dal cliente il 17/08.
       fondo          #00517a       campionato dal PNG
       testo          #f3f3f3       campionato dal PNG (titolo e descrizione
                                    hanno lo stesso corpo e lo stesso colore:
                                    nelle grafiche il testo della card è un
                                    blocco unico, non titolo + sottotitolo)
       proporzione    768 / 895
       corpo testo    67px su 768   = 8.72% della larghezza card
       interlinea     81px su 67px  = 1.21
       icone          scala unica x5.26 sulle unità viewBox: verificato che
                      nei PNG il rapporto ink/viewBox è identico su tutte e
                      sei, quindi una sola costante le governa tutte.

   Perché unità di container (cqw) e non tre breakpoint: la card è essa
   stessa il container, così testo e icona scalano CON la card esattamente
   come faceva il PNG, a qualunque viewport e con qualunque numero di
   colonne. Con font-size fisso servirebbero media query da riallineare a
   ogni cambio di griglia.

   Due trappole trovate sul campo, da non re-introdurre:

   1. Un elemento NON può interrogare se stesso. Su ".lg-aree-card--svg"
      le cqw NON si riferiscono alla card: risalgono al container più
      esterno (qui il viewport). Per questo la proporzione è espressa con
      aspect-ratio e i padding in %, non in cqw. Le cqw le usano solo i
      FIGLI (icona e titolo), per cui il riferimento è la card.
      Corollario: il padding orizzontale della card è 0 — se ci fosse,
      ridurrebbe il content box e quindi il valore di 1cqw per i figli,
      falsando tutte le misure qui sopra. La larghezza del testo si limita
      con max-width sull'H3.

   2. Il titolo ora è un <h3>, e Enfold stila gli heading con
      "#top #wrap_all .all_colors h3" — DUE id, specificità (2,1,1), che
      batte qualunque selettore ancorato al solo "#lc-longevity" (1,2,0).
      Si porta via color e font-family. Da qui il "#top" davanti alla
      regola del titolo: alza la specificità a (2,2,0) senza ricorrere a
      !important. Non toglierlo "per pulizia".
      Nota storica: prima del 24/08 i titoli card erano <p><strong> e la
      regola Enfold non li toccava — il conflitto nasce esattamente con il
      passaggio a heading.

   3. "aspect-ratio" spegne lo stretch della griglia. Con un rapporto
      intrinseco, align-items/align-self "normal" si comporta come "start",
      non come "stretch": le card che crescono oltre la proporzione (perché
      il contenuto non ci sta) restano più alte delle vicine, e la riga
      diventa disallineata. Serve "align-self: stretch" ESPLICITO sulla
      card, più "grid-auto-rows: 1fr" sulla griglia perché anche le tre
      righe fra loro restino uguali. L'aspect-ratio resta e continua a
      dettare la proporzione minima; lo stretch la supera solo se un testo
      più lungo lo impone.

   Ogni regola è agganciata al modificatore "--svg": senza quello il CSS è
   inerte, quindi non tocca la Palestra della Salute (che riusa
   .lg-aree-card) e non resta appeso se si torna indietro.
   ========================================================================= */

#lc-longevity .lg-aree-grid.lg-aree-grid--svg {
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;   /* tutte le righe alte uguali, non solo le card
	                          della stessa riga: vedi trappola 3 sopra */
	gap: 6px;
}

@media (min-width: 768px) {
	#lc-longevity .lg-aree-grid.lg-aree-grid--svg {
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
	}
}

#lc-longevity .lg-aree-card.lg-aree-card--svg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;       /* NON ridondante: vedi trappola 3 sopra */
	aspect-ratio: 768 / 895;   /* proporzione del PNG sostituito */
	padding: 17.4% 0 14.5%;    /* % = frazione della larghezza card, come i PNG */
	background-color: #00517a;
	border-radius: 6px;
	text-align: center;
}

/* Box quadrato IDENTICO per tutte e sei. Nei PNG le icone erano alla stessa
   scala ma con ingombri diversi (307-408px di altezza su 768): la luna era
   vistosamente più grande della bici, e le card finivano alte diverse.
   Qui ognuna viene inscritta nello stesso quadrato mantenendo le proprie
   proporzioni (preserveAspectRatio di default, "meet"), quindi l'ingombro
   è uguale e il contenuto della card ha sempre la stessa altezza.
   45cqw = 345px su una card da 768, la mediana degli ingombri originali. */
#lc-longevity .lg-aree-card--svg .lg-aree-icona {
	display: block;
	flex: none;   /* senza questo l'icona è un flex item e viene SCHIACCIATA
	                 (non ridimensionata: schiacciata, perde le proporzioni)
	                 se il testo occupa una riga in più del previsto. */
	width: 45%;
	height: auto;
	aspect-ratio: 1;
	margin: 0 0 6.4%;
}

/* "#top" in testa: vedi trappola 2 nel commento sopra. */
#top #lc-longevity .lg-aree-card--svg .lg-aree-titolo {
	max-width: 90%;
	/* "auto" sui lati, non 0: il <div editable> che avvolge l'H3 è un flex
	   item largo quanto la card (il suo max-content, con il <br>, eccede la
	   card e viene clampato). Con margin 0 l'H3 largo il 90% resterebbe
	   incollato a sinistra dentro quel div, disallineato dall'icona. */
	margin: 0 auto;
	/* Roboto esplicito, NON "inherit": il font ereditato qui è Montserrat,
	   ~8% più largo, e mandava "Dieta personalizzata e nutraceutica" su una
	   riga in più rispetto alla grafica. Roboto è il font che il tema usa
	   già per gli heading ed è quello che le grafiche riproducono. */
	font-family: roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.21;
	letter-spacing: 0;
	text-transform: none;
	color: #f3f3f3;
}


/* =========================================================================
   24/08/2026 (2) — Anche le 12 card "percorsi mirati" tornano TESTO.
   Stesso schema delle 6 aree qui sopra; con questo la deroga §8.2 del
   CLAUDE.md è rientrata del tutto: sulla pagina non resta testo dentro
   immagini.

   Differenza rispetto alle aree: qui ogni card ha la SUA tinta, e l'icona
   non sta sul fondo ma dentro un CERCHIO più scuro. Nei PNG l'icona è
   disegnata nella tinta chiara del fondo, ed è esattamente il colore in
   cui il cliente ha consegnato gli SVG — per questo i fill dentro il
   markup non vanno cambiati: sono già giusti.
   (Unica eccezione: l'odontoiatrica, bianca al 61% di opacità. L'opacità
   arriva dal <style> dell'SVG e va preservata nella conversione, non è un
   dettaglio ignorabile: senza, l'icona stacca dal resto della serie.)

   Misure campionate dai PNG sostituiti (derivate 768x562):
       proporzione    768 / 562
       raggio         30px su 768 → 3.9% in orizzontale e 5.33% in
                      verticale, così l'angolo resta CIRCOLARE a ogni
                      dimensione (una sola % su un box non quadrato
                      darebbe un angolo ellittico)
       testo          #00517a, 51.5px su 768 = 6.71% della larghezza card,
                      interlinea 61.5/51.5 = 1.19, peso 400
       cerchio        165px su 768 = 21.48% — IDENTICO su tutte e 12
       icona          box quadrato uguale per tutte, 65% del cerchio, da
                      cui il padding di 3.74cqw sul cerchio stesso

   Il corpo del testo è stato calibrato misurando in Roboto le stesse righe
   che si leggono nei PNG (es. "Test balance" = 285px su 768): cinque righe
   diverse danno 50.9-53.2px, media 51.5. Conferma anche che il font delle
   grafiche è Roboto, non il Montserrat ereditato.

   Valgono le stesse tre trappole documentate per le aree: cqw solo sui
   figli, "#top" per battere Enfold sugli heading, "align-self: stretch" +
   "grid-auto-rows: 1fr" perché aspect-ratio spegne lo stretch di griglia.

   Contrasto: #00517a sulle 12 tinte va da 4.22:1 a 6.37:1. Dieci passano
   AA per testo normale; derma (4.46:1) ed estetica (4.22:1) passano solo
   come testo grande — cosa che il testo è, ovunque tranne le card più
   strette. Sono i colori del cliente e sono gli stessi che la pagina già
   mostrava dentro i PNG: non è un peggioramento, ma va saputo.
   ========================================================================= */

#lc-longevity .lg-percorsi-grid.lg-percorsi-grid--svg {
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: 10px;
}

@media (min-width: 768px) {
	#lc-longevity .lg-percorsi-grid.lg-percorsi-grid--svg {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}
}

@media (min-width: 1200px) {
	#lc-longevity .lg-percorsi-grid.lg-percorsi-grid--svg {
		grid-template-columns: repeat(4, 1fr);
		/* gap 18px, max-width 1150px e centratura arrivano da longevity.css */
	}
}

#lc-longevity .lg-percorsi-card.lg-percorsi-card--svg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	aspect-ratio: 768 / 562;
	padding: 6% 0;
	border: 0;
	border-radius: 3.9% / 5.33%;
	background-color: var(--lg-tinta);
	text-align: center;
}

/* Il cerchio NON è un elemento in più: è lo sfondo dell'<svg> stesso, e il
   padding è ciò che tiene l'icona alla stessa dimensione su tutte e 12.
   Un wrapper dedicato romperebbe la gerarchia piatta che LiveCanvas si
   aspetta dentro un lc-block. */
#lc-longevity .lg-percorsi-card--svg .lg-percorsi-icona {
	display: block;
	flex: none;
	box-sizing: border-box;
	width: 21.48%;
	height: auto;
	aspect-ratio: 1;
	padding: 3.74%;
	margin: 0 0 4%;
	border-radius: 50%;
	background-color: var(--lg-cerchio);
}

/* "#top" in testa: batte "#top #wrap_all .all_colors h3" di Enfold, che ha
   due id e altrimenti si porta via color e font-family. Vedi il blocco
   delle aree per il ragionamento completo. */
#top #lc-longevity .lg-percorsi-card--svg .lg-percorsi-titolo {
	max-width: 88%;
	margin: 0 auto;
	font-family: roboto, Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.19;
	letter-spacing: 0;
	text-transform: none;
	color: #00517a;
}

/* Le 12 tinte, campionate dai PNG del cliente. Divergono di 1-2 unità dai
   token --lg-tint-* del CLAUDE.md §3.2, che erano presi dalla brochure:
   qui fanno fede le grafiche consegnate. */
#lc-longevity .lg-percorsi-card--cardio   { --lg-tinta:#bee0e5; --lg-cerchio:#8ec5ce }
#lc-longevity .lg-percorsi-card--eco      { --lg-tinta:#c9b9db; --lg-cerchio:#9e86bc }
#lc-longevity .lg-percorsi-card--angio    { --lg-tinta:#fbdb94; --lg-cerchio:#f7bc56 }
#lc-longevity .lg-percorsi-card--gine     { --lg-tinta:#8bc6e7; --lg-cerchio:#4c9ad1 }
#lc-longevity .lg-percorsi-card--rx       { --lg-tinta:#bbd5f0; --lg-cerchio:#89b2e2 }
#lc-longevity .lg-percorsi-card--sport    { --lg-tinta:#d4b6af; --lg-cerchio:#b08278 }
#lc-longevity .lg-percorsi-card--cogn     { --lg-tinta:#c0d99c; --lg-cerchio:#91b95f }
#lc-longevity .lg-percorsi-card--odonto   { --lg-tinta:#e9b8d0; --lg-cerchio:#d585aa }
#lc-longevity .lg-percorsi-card--derma    { --lg-tinta:#aebec3; --lg-cerchio:#778e95 }
#lc-longevity .lg-percorsi-card--balance  { --lg-tinta:#f9c9b9; --lg-cerchio:#f39e86 }
#lc-longevity .lg-percorsi-card--postura  { --lg-tinta:#f9c194; --lg-cerchio:#f39256 }
#lc-longevity .lg-percorsi-card--estetica { --lg-tinta:#74c4be; --lg-cerchio:#35978e }


/* =========================================================================
   24/08/2026 (3) — Rifiniture delle FAQ.

   L'animazione di apertura e chiusura NON sta qui: le FAQ sono state
   aggiunte al blocco "Fasi cliniche E FAQ" più in alto in questo stesso
   file, perché sono lo stesso componente e devono muoversi allo stesso
   modo. Qui restano solo le cose che valgono per le FAQ e basta.

   Il <summary> non aveva un cursore che dicesse "cliccami", e il chevron
   non aveva stato di hover: su una riga alta 26px, larga tutta la colonna
   e senza sfondo, l'unico segnale che fosse interattiva era il glifo.
   ========================================================================= */

#lc-longevity .lg-faq-riga {
	cursor: pointer;
	-webkit-user-select: none;   /* il doppio clic in apertura selezionava la domanda */
	user-select: none;
}

#lc-longevity .lg-faq-chevron-cerchio {
	transition: border-color .2s ease, background-color .2s ease;
}

#lc-longevity .lg-faq-riga:hover .lg-faq-chevron-cerchio {
	border-color: #3661ab;
	background-color: #eef4fb;
}


/* =========================================================================
   24/08/2026 (4) — Hero: fondo azzurrino, orologio antiorario, tipografia
   dedicata. Richiesta del proprietario, su mock suo
   (longevity-materiale/idealmedica-longevity 2.html).

   I testi NON cambiano: H1 e paragrafo restano quelli approvati, parola per
   parola. Cambiano fondo, tipografia e l'elemento a destra — dove c'era la
   foto ora c'è l'orologio. La foto non è stata cancellata dalla libreria:
   per rimetterla basta ripristinare il blocco .lg-hero-foto-block.

   Tre scelte fatte diversamente dal mock, con motivo:

   1. I FONT SONO SELF-HOSTED, non presi da Google. Il mock linka
      fonts.googleapis.com; §2.2 del CLAUDE.md vieta dipendenze esterne su
      una pagina medicale, e il tema self-hosta già tutti i suoi font in
      /fonts. Scaricati i soli woff2 del sottoinsieme LATINO e dei soli pesi
      EFFETTIVAMENTE usati (il tondo di Cormorant era stato preso e poi
      tolto: in pagina compare solo il corsivo): 3 file, ~105 KB, che arrivano solo su questa pagina perché
      questo foglio è caricato solo qui.

   2. L'ANIMAZIONE È IN CSS, non in SMIL. Il mock usa <animateTransform>.
      In CSS si ottiene lo stesso risultato, si può spegnere sotto
      prefers-reduced-motion (una lancetta che gira all'infinito è
      esattamente il tipo di moto che quella preferenza esiste per fermare)
      e le lancette restano ferme e leggibili invece di sparire.

   3. IL COLORE DEL TESTO NON È QUELLO DEL MOCK. Il mock scrive il paragrafo
      in rgba(15,42,64,.62) a 12px: su fondo azzurrino sono ~3:1, sotto AA
      su una pagina che parla di prevenzione sanitaria. Qui il paragrafo
      resta del colore di pagina, che sullo stesso fondo dà 8,4:1. Il font
      è quello che voleva lui, la leggibilità no.
   ========================================================================= */

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('../../fonts/cormorant-garamond-300-italic-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway LG';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../../fonts/raleway-300-latin.woff2') format('woff2');
}

@font-face {
	font-family: 'Raleway LG';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../../fonts/raleway-400-latin.woff2') format('woff2');
}

/* --- Fondo azzurrino ------------------------------------------------------
   I colori NON sono quelli del mock: sono i token azzurri già in uso in
   pagina (--lg-100 #d7e6f4, --lg-050 #edf4fa, tinta rx #bbd5f0), montati
   nello stesso schema del mock. Così l'hero è azzurrino come voleva lui ma
   resta parente del resto della pagina invece di introdurre una terza
   famiglia di blu.

   Agganciato all'id, non a una classe: in LiveCanvas la <section> non può
   portare classi custom (stessa tecnica di #cta-finale e delle due fasce
   CTA, §7.1).                                                             */
#lc-longevity #lg-sezione-hero {
	background-image:
		/* Sfumatura di uscita: l'azzurrino si spegne nel bianco della sezione
		   successiva invece di tagliarsi di netto.

		   Misurata in PIXEL dal basso, non in percentuale dell'altezza: la
		   sezione cambia altezza col viewport e con la lunghezza dei testi,
		   quindi una percentuale sposterebbe l'attacco della sfumatura sopra
		   o sotto i bottoni a seconda del caso.

		   96px NON è un numero a caso: è il padding-bottom della sezione
		   (py-lg-7), cioè esattamente la fascia vuota che resta sotto i
		   bottoni. La sfumatura vive lì dentro e non tocca il contenuto. Se
		   un giorno si cambia quel padding, va cambiato anche questo valore.

		   Banda stretta di proposito: la prima versione partiva a metà
		   sezione e sbiadiva anche i bottoni — l'effetto era "scolorito", non
		   "sfumato". Qui il colore resta pieno dietro tutto il contenuto e il
		   passaggio al bianco si legge come una scelta.

		   Il bianco è quello di #main, verificato, non un bianco a occhio. */
		linear-gradient(to top, #fff 0, rgba(255, 255, 255, 0) 96px),
		radial-gradient(ellipse 46% 62% at 78% 44%, rgba(255, 255, 255, .55) 0%, transparent 70%),
		linear-gradient(135deg, #d7e6f4 0%, #edf4fa 45%, #bbd5f0 100%);
	scroll-margin-top: calc(88px + 1rem);
}

@media (max-width: 989px) {
	#lc-longevity #lg-sezione-hero {
		scroll-margin-top: calc(80px + 1rem);
	}
}

/* Il filo in cima al mock: due id per stare sopra a longevity.css. */
#lc-longevity #lg-sezione-hero {
	position: relative;
	border-top: 3px solid transparent;
	border-image: linear-gradient(to right, transparent, rgba(0, 81, 122, .38) 30%, rgba(0, 81, 122, .38) 70%, transparent) 1;
}

/* --- Tipografia, SOLO qui dentro -----------------------------------------
   Tutto è annidato sotto #lg-sezione-hero: fuori dall'hero non cambia una
   riga, che è la condizione posta ("i font solo nell'hero se possibile").

   Il font-family va messo sullo <span>, non sull'<h1>: Enfold stila gli
   heading con "#top #wrap_all .all_colors h1" (due id) e vincerebbe. Sullo
   span quella regola non arriva, e la dichiarazione diretta batte
   l'ereditarietà.                                                          */
#lc-longevity #lg-sezione-hero .lg-h1--logo .lg-h1-line2 {
	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;   /* il -0.02em serviva al sans in bold, non a un serif chiaro */
}

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

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

/* Il paragrafo scende di corpo e riempie la sua colonna.
   Il max-width di 33em che arriva da longevity.css va tolto: essendo in em si
   accorcia insieme al font, e a 18px varrebbe 594px — meno della colonna,
   quindi il testo si stringerebbe proprio mentre si allarga il contenitore. */
#lc-longevity #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-longevity #lg-sezione-hero .lg-hero-paragrafo {
		font-size: 16px;
	}
}

/* --- Orologio ------------------------------------------------------------
   Le lancette girano ALL'INDIETRO: è il senso dell'immagine, non un errore.
   Durate reali (60s / 1h / 12h), così il moto è quello di un orologio vero
   solo rovesciato — a occhio si nota la lancetta dei secondi, il resto si
   percepisce senza distrarre.

   Rotazione con transform-box:view-box e origine sul centro del quadrante
   (95,95 in coordinate viewBox): niente <g> di traslazione, l'origine è
   dichiarata dove sta davvero il perno.                                    */
#lc-longevity .lg-hero-orologio-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
}

#lc-longevity .lg-orologio {
	display: block;
	width: min(340px, 86%);
	height: auto;
}

#lc-longevity .lg-orologio-lancetta {
	transform-box: view-box;
	transform-origin: 95px 95px;
	animation: lg-orologio-indietro linear infinite;
}

#lc-longevity .lg-orologio-secondi { animation-duration: 60s }
#lc-longevity .lg-orologio-minuti  { animation-duration: 3600s }
#lc-longevity .lg-orologio-ore     { animation-duration: 43200s }

@keyframes lg-orologio-indietro {
	from { transform: rotate(0deg) }
	to   { transform: rotate(-360deg) }
}

#lc-longevity .lg-orologio-didascalia {
	margin: 0;
	font-family: 'Raleway LG', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .3em;
	text-transform: uppercase;
	line-height: 1.9;
	text-align: center;
	color: #00517a;
}

@media (prefers-reduced-motion: reduce) {
	#lc-longevity .lg-orologio-lancetta {
		animation: none;
	}
}

/* --- Griglia dell'hero -----------------------------------------------------
   Impianto originale, confermato: colonna 1 tutti i testi, colonna 2
   l'orologio su tutte le righe — lo slot che aveva la foto.

   Sotto i 992 la griglia è a una colonna e vale l'ordine del DOM:
   occhiello, titolo, paragrafo, orologio, bottoni.                          */
@media (min-width: 992px) {
	#lc-longevity .lg-hero-orologio-block {
		grid-column: 2;
		grid-row: 1 / 6;
	}
}

/* --- Il contenitore delle due colonne, più largo --------------------------
   Enfold cappa .container a 1320px, che con 72px di padding per lato lasciava
   1176px utili: stretti, per due colonne più un gutter da 64.

   Serve la catena "#top #wrap_all" davanti: la regola di Enfold è
   ".responsive #top #wrap_all .container" (due id + due classi) e batte
   qualunque selettore ancorato al solo #lc-longevity. Stesso motivo per cui i
   titoli delle card portano "#top" — §4.4: alzare la specificità invece di
   ricorrere a !important.

   Solo su questa sezione: le altre otto restano sulla larghezza di sempre. */
@media (min-width: 992px) {
	#top #wrap_all #lc-longevity #lg-sezione-hero .container {
		width: 92%;
		max-width: 1600px;
	}
}

/* ===========================================================================
   31/08/2026 — «Scopri la tua vera età biologica»
   ===========================================================================

   Il secondo rigo va in azzurro, il primo resta nel blu di pagina.

   Perché l'azzurro sta sul <p> e non sull'H2: l'H2 è l'elemento che porta il
   peso semantico della sezione, e l'azzurro del brand su bianco fa 2,52:1
   (vedi sotto). Tenendolo sul rigo secondario, il titolo conserva il suo
   contrasto pieno e l'accento colorato cade su un testo che il lettore
   incontra comunque subito sotto.

   #44ade3 non è un colore nuovo: è l'azzurro già in uso in longevity.css,
   quello dei bottoni della pagina.

   ⚠️ Contrasto 2,52:1 su bianco — sotto il 4,5:1 dell'AA e sotto anche il
   3:1 ammesso per il testo grande. È lo stesso valore già segnalato per i
   bottoni, che il cliente ha scelto di accettare. Se un giorno si volesse
   rientrare, la leva è scurire l'azzurro (serve circa #1a7fb3 per arrivare a
   3:1, #0e5f88 per 4,5:1), non cambiare il colore dei bottoni.

   Catena "#top #wrap_all": Enfold stila i paragrafi con selettori a due id,
   che batterebbero qualunque cosa ancorata al solo #lc-longevity. §4.4:
   alzare la specificità invece di ricorrere a !important.                   */
#top #wrap_all #lc-longevity .lg-text-azzurro {
	color: #44ade3;
}

/* ===========================================================================
   31/08/2026 — Le 4 fotografie delle fasi cliniche + il comando di apertura
   ===========================================================================

   Quattro foto 16:9 (1080x608), una per fase. Sostituiscono i segnaposto
   testuali "(foto prelievi)", "(foto con scritto test genetico)", ecc., che
   erano rimasti visibili in pagina.

   Stanno DENTRO il <summary>, non nel corpo, per due ragioni:

   - restano visibili anche a fase chiusa. Senza, le fasi 2-3-4 sono tre
     righe grigie quasi identiche e la sezione non si scansiona;
   - su desktop riempiono la colonna destra, che era vuota: il testo si
     ferma intorno ai 900px su 1176 disponibili.

   Non sono spostabili nel corpo mantenendo questa posizione visiva: Chrome
   rende il contenuto di <details> in uno slot interno, quindi i figli
   non-summary non sono riordinabili rispetto al <summary> (stessa trappola
   gia' documentata in CLAUDE.md §8.1 per le card della Palestra). Se la foto
   deve vedersi a card chiusa, deve stare nel <summary>.

   Conseguenza voluta: la foto fa parte del comando di apertura, quindi
   cliccarla apre la fase. E' coerente con il resto della riga.

   ---------------------------------------------------------------------------
   IL COMANDO DI APERTURA — rifatto il 31/08/2026
   ---------------------------------------------------------------------------

   Com'era: un cerchio vuoto di 32px, bordo #cfe0ee e glifo #44ade3, nella
   colonna piu' a destra, cioe' OLTRE la foto. Su desktop stava a ~700px dal
   titolo della fase: distante dal contenuto a cui si riferisce, piccolo, e
   con un contrasto troppo basso per leggersi come comando.

   Com'e' ora: cerchio pieno #004a87 con il glifo bianco, spostato SOTTO il
   titolo, nella stessa colonna del testo. Tre cambiamenti, tre motivi:

   - la posizione. Il comando sta dove finisce la frase che lo riguarda, che
     e' dove arriva l'occhio. Non piu' in fondo alla riga oltre un'immagine.
   - il riempimento. Un cerchio pieno legge come un pulsante, un cerchio
     vuoto come un ornamento.
   - il colore. #44ade3 su fondo chiaro dava ~2,5:1, sotto il 3:1 che la
     WCAG 1.4.11 chiede agli elementi di interfaccia non testuali. #004a87
     sul fondo di sezione da' ~10:1, e il bianco sul cerchio ~9:1.

   Resta vero che l'intero <summary> e' cliccabile: il cerchio e' il segnale,
   non l'unico bersaglio.                                                    */

#lc-longevity .lg-fase-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;    /* stesso raggio delle altre immagini di pagina */
}

/* --- Il cerchio, a ogni larghezza ---------------------------------------- */
#lc-longevity .lg-fase-chevron {
	border: 0;
	background: #004a87;
	color: #fff;
	width: 30px;
	height: 30px;
	font-size: 15px;
	flex: 0 0 auto;
}
#lc-longevity .lg-fase:hover .lg-fase-chevron {
	background: #00396b;
}

/* --- Cerchio + parola, un blocco solo ------------------------------------
   Il cerchio da solo si vede ma non dice cosa fa. La parola toglie il dubbio
   e riempie lo spazio vuoto alla sua destra su desktop.

   "Dettagli" e non "Approfondisci": e' l'unica delle due che regge in
   entrambi gli stati dell'accordion, aperto e chiuso.

   Il chevron e' stato annidato dentro questo blocco, quindi non e' piu' un
   figlio diretto della griglia del <summary>: le sue "grid-column/grid-row"
   in longevity.css ora non si applicano piu', il posizionamento passa al
   contenitore. La rotazione del glifo continua a funzionare perche' li' il
   selettore e' discendente (details[open] .lg-fase-chevron).

   La parola entra nel nome accessibile del <summary>, che diventa
   "Fase 01 / <titolo> / Dettagli": ridondante ma corretta.                */
#lc-longevity .lg-fase-azione {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #004a87;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
}

/* --- Telefono: etichetta, foto, titolo, comando -------------------------- */
/* Ordine chiesto dal cliente il 31/08/2026. Si ottiene riassegnando le righe
   della griglia, non toccando il markup: nel DOM restano etichetta, titolo,
   foto, comando. La divergenza non crea problemi perche' il <summary> e' un
   unico comando: non ci sono piu' elementi focalizzabili da riordinare.

   Prima il comando era in alto a destra, 26px, allineato all'etichetta:
   il punto piu' lontano dal titolo che si potesse scegliere.               */
#lc-longevity .lg-fase-summary {
	grid-template-columns: 1fr;
}
#lc-longevity .lg-fase-summary > div:nth-of-type(1) { grid-row: 1 }  /* etichetta */
#lc-longevity .lg-fase-foto                        { grid-row: 2; margin-top: 12px }
#lc-longevity .lg-fase-summary > div:nth-of-type(2) { grid-row: 3; margin-top: 12px }  /* titolo */
#lc-longevity .lg-fase-azione {
	grid-column: 1;
	grid-row: 4;
	justify-self: start;
	margin-top: 14px;
}

/* --- Sotto i 992 la foto non deve allargarsi oltre misura ---------------- */
/* A 768px il contenitore e' largo 680 e la foto veniva 680x383: le quattro
   fasi da sole facevano 2.697px, piu' che su telefono (2.166) e quasi il
   doppio del desktop. Su un telefono da 390 il contenitore e' 332px, quindi
   il tetto non entra in gioco e la foto resta a filo.                      */
@media (max-width: 991.98px) {
	#lc-longevity .lg-fase-foto {
		max-width: 460px;
	}
}

/* --- Da 992: numero | testo | foto --------------------------------------- */
/* La colonna del chevron sparisce: il comando scende nella colonna del
   testo, terza riga. La foto attraversa tutte e tre le righe.

   align-self end/center/start sulle tre righe: la foto e' piu' alta del
   blocco di testo e con il row-span la sua altezza si distribuisce sulle
   righe, che altrimenti allontanerebbero etichetta, titolo e comando.
   Ancorandoli rispettivamente in fondo, al centro e in cima alle proprie
   righe, i tre restano vicini e il gruppo risulta centrato sulla foto.     */
@media (min-width: 992px) {
	#lc-longevity .lg-fase-summary {
		grid-template-columns: 56px 1fr 240px;
	}
	#lc-longevity .lg-fase-foto {
		grid-column: 3;
		grid-row: 1 / 4;
		align-self: center;
		margin-top: 0;
		max-width: none;
	}
	#lc-longevity .lg-fase-summary > div:nth-of-type(1) { align-self: end }
	#lc-longevity .lg-fase-summary > div:nth-of-type(2) { grid-row: 2; align-self: center; margin-top: 0 }
	#lc-longevity .lg-fase-azione {
		grid-column: 2;
		grid-row: 3;
		align-self: start;
		margin-top: 10px;
	}
}

@media (min-width: 1200px) {
	#lc-longevity .lg-fase-summary {
		grid-template-columns: 56px 1fr 300px;
	}
}

/* --- L'alone al tocco su telefono ----------------------------------------
   Toccando il <summary> comparivano due cose sovrapposte: il rettangolo
   grigio-azzurro che Android e iOS disegnano su ogni elemento interattivo
   (-webkit-tap-highlight-color) e, su alcuni browser, il contorno di focus.
   Su un blocco alto come questo, con dentro una fotografia, il risultato era
   una lastra colorata su mezza schermata.

   Si tolgono entrambi SOLO per il puntatore. Il contorno da tastiera resta:
   ":focus-visible" continua a essere servito dalla regola di longevity.css
   ("summary:focus-visible{outline:2px solid #44ade3}"), e ":focus:not(
   :focus-visible)" per definizione non lo tocca.

   Nota per chi ripercorre la strada: qui NON si puo' togliere l'accordion
   come si e' fatto sulla Palestra (CLAUDE.md §8.1) — le 4 fasi hanno un
   vincolo SEO esplicito e il <details> e' proprio cio' che lo soddisfa. E
   "pointer-events: none" sul <summary> non e' una scorciatoia: lo renderebbe
   inutilizzabile.                                                         */
#lc-longevity .lg-fase-summary {
	-webkit-tap-highlight-color: transparent;
}
#lc-longevity .lg-fase-summary:focus:not(:focus-visible) {
	outline: none;
}

/* ===========================================================================
   31/08/2026 — Sezione "Cosa ottieni": impaginazione rifatta
   ===========================================================================

   Com'era. Tutto incolonnato al centro su 760px: occhiello, H2
   "l'Obiettivo del Programma Longevity", il claim sull'Healthspan, poi — in
   mezzo al nulla — le due frecce del carosello, poi il secondo H2 "Punti di
   forza" e il segnaposto "(foto di punti di forza)", poi le card.

   Il difetto grosso erano le frecce: comandano il carosello ma stavano PRIMA
   del titolo che lo introduce, quindi si leggevano come parte del claim.
   Sospese fra due blocchi, senza niente a cui riferirsi.

   Com'e' ora. La sezione ha due movimenti, e ora si vedono come due:

   1. L'OBIETTIVO — testo a sinistra, fotografia a destra. La foto (un uomo
      che corre in salute) illustra l'esito di cui parla il claim, non le sei
      card astratte: e' li' che serve. Il blocco smette anche di essere una
      colonna stretta centrata in mezzo a 1176px disponibili.
   2. I PUNTI DI FORZA — titolo a sinistra e frecce a destra sulla STESSA
      riga, poi le card. Le frecce ora stanno attaccate a cio' che comandano.

   Le sei card non sono state toccate.

   ⚠️ Le frecce restano FRATELLI di .ns-swiper, non figlie. Il CSS del kit
   ha `.ns-swiper .swiper-button-prev{display:none}` sotto md: annidarle le
   farebbe sparire su telefono. E restano dentro [data-ns-scope], che e' come
   ns-swiper.js le trova. Le due condizioni sono verificate.               */

/* --- 1. Obiettivo: testo + foto ------------------------------------------ */
#lc-longevity .lg-obiettivo {
	display: grid;
	gap: 28px;
	margin-bottom: 56px;
}
@media (min-width: 992px) {
	#lc-longevity .lg-obiettivo {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
		align-items: center;
		margin-bottom: 72px;
	}
}

/* .lg-benefici-h2-block porta 52px di margine da 768px in su: nati per
   separare l'H2 dalle card, dentro la colonna di testo erano un buco.     */
#lc-longevity .lg-obiettivo-testo .lg-benefici-h2-block {
	margin-bottom: 18px;
}

#lc-longevity .lg-obiettivo-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}

/* Il claim: era .fs-2 .text-center. "text-center" e' stato tolto dal
   markup, non sovrascritto — e' una utility Bootstrap con !important e
   qualunque regola nostra perderebbe in silenzio (§7.3, stessa lezione
   imparata sul paragrafo dell'hero).                                      */
#lc-longevity .lg-obiettivo-claim {
	margin: 0;
	color: #42525e;
	line-height: 1.25;
}

/* --- 2. Punti di forza: titolo a sinistra, frecce a destra ---------------- */
#lc-longevity .lg-forza-intestazione {
	display: grid;
	gap: 14px;
	margin-bottom: 26px;
}
#lc-longevity .lg-forza-h2 {
	margin: 0;
	font-size: 25px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.015em;
}
#lc-longevity .lg-forza-intestazione .lg-benefici-frecce {
	margin-bottom: 0;
}
@media (min-width: 768px) {
	#lc-longevity .lg-forza-intestazione {
		grid-template-columns: 1fr auto;
		align-items: center;
		gap: 24px;
	}
	#lc-longevity .lg-forza-h2 {
		font-size: 28px;
	}
}

/* ===========================================================================
   31/08/2026 — Sezione dedicata al Longevity Coach
   ===========================================================================

   Fascia blu fra "Il nostro team" e "Partner scientifici": testo a sinistra,
   ritratto scontornato a destra.

   IL FONDO BLU NON E' UNA SCELTA DI RITMO. Il PNG e' scontornato su
   trasparenza e il camice e' bianco: su #fff o su #f5f8fa la figura non
   avrebbe contorno e sembrerebbe un'immagine rotta. #004a87 e' lo stesso
   fondo delle due fasce CTA e della CTA finale, quindi non introduce un
   colore nuovo.

   Agganciato all'id perche' in LiveCanvas la sezione non puo' portare
   classi custom — stessa tecnica di #lg-cta-benefici e #lg-sezione-partner.

   Il ritratto "poggia" sul bordo inferiore della fascia invece di
   galleggiarci dentro: e' il trattamento che uno scontornato chiede.

   Per ottenerlo la sezione porta "pt-5 pt-lg-7" e NON "py-5 py-lg-7" come
   le altre: quelle utility hanno !important su padding-bottom e nessuna
   regola nostra le batterebbe. Si toglie la classe, non la si sovrascrive
   — §7.3, stessa lezione gia' imparata su .fs-4 nell'hero.               */

#lc-longevity #lg-sezione-coach {
	background-color: #004a87;
	color: #fff;
	overflow: hidden;
}

/* Su fondo blu il #3661ab di base sparirebbe. Stesso azzurro chiaro gia'
   adottato da #cta-finale e dalle fasce CTA. */
#lc-longevity #lg-sezione-coach .lg-eyebrow {
	color: #7fcdf2;
}

#lc-longevity .lg-coach {
	display: grid;
	gap: 24px;
	align-items: end;
	justify-items: center;
	text-align: center;
}

#lc-longevity .lg-coach-nome {
	margin: 10px 0 0;
	color: #fff;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

#lc-longevity .lg-coach-corpo {
	margin: 18px 0 0;
	max-width: 46ch;
	color: #d7e6f4;
	line-height: 1.6;
}

#lc-longevity .lg-coach-azione {
	margin-top: 24px;
}

#lc-longevity .lg-coach-img {
	display: block;
	width: 240px;
	max-width: 100%;
	height: auto;
}

/* Il primario di base e' blu su bianco: dentro la fascia si vedrebbe poco.
   Stessi valori gia' usati da #lg-cta-team per il secondario su blu. */
#lc-longevity #lg-sezione-coach .lg-btn-primary:focus-visible {
	outline-color: #7fcdf2;
}

@media (min-width: 992px) {
	#lc-longevity .lg-coach {
		grid-template-columns: 1fr auto;
		gap: 64px;
		justify-items: start;
		text-align: left;
	}
	#lc-longevity .lg-coach-testo {
		padding-bottom: 72px;   /* il testo resta centrato, la foto scende */
		align-self: center;
	}
	#lc-longevity .lg-coach-nome {
		font-size: 34px;
	}
	#lc-longevity .lg-coach-img {
		width: 360px;
	}
}

/* I 20px fra il ritratto e il bordo inferiore della fascia sono il
   "margin-bottom: 20px" che Enfold mette su .row: bootstrap-grid non
   dichiara margin-bottom, quindi quello di Enfold sopravvive. E' la
   collisione gia' prevista in CLAUDE.md §2.3, la cui neutralizzazione
   (".lg-scope .row{margin-bottom:0}", §4.3) non e' mai finita nel CSS
   compilato.

   Qui la si applica SOLO a questa sezione: farlo a livello di pagina
   sposterebbe di 20px tutte le altre, ed e' una decisione che non passa da
   una fascia dedicata a un coach. Altrove il margine e' invisibile perche'
   le sezioni hanno padding sotto.                                        */
#lc-longevity #lg-sezione-coach .row {
	margin-bottom: 0;
}

/* ===========================================================================
   31/08/2026 — I 4 loghi partner diventano scontornati
   ===========================================================================

   I file nuovi sono PNG con trasparenza su TELA QUADRATA (1920 o 2250 px di
   lato), non piu' 500x250 con margini bianchi.

   Il problema che pongono: dentro la tela il marchio occupa una frazione
   molto diversa da logo a logo — misurata sul canale alfa dei file:

       logo         larghezza    altezza     rapporto del marchio
       cerba          79%          27%            2,91
       eurofins       72%          15%            4,93
       altamedica     63%          39%            1,65
       unipd          81%          36%            2,23

   Con il vincolo in altezza che c'era ai tempi del carosello (92px sulla
   cella) il marchio di eurofins ne avrebbe occupati 14: illeggibile, e ogni
   logo di una dimensione diversa. Quel vincolo non c'e' piu' — dal
   17/08/2026 ".lg-partner-griglia .lg-partner-logo" e' "height:auto" — ma il
   problema si ripresenta uguale lasciando che sia la larghezza della cella a
   dettare la scala: i quattro marchi verrebbero di dimensioni ottiche molto
   diverse fra loro.

   Quindi ogni logo riceve la PROPRIA altezza di tela, calcolata e non scelta
   a occhio: e' target-ottico / frazione-di-altezza-del-marchio. I valori
   stanno nel CSS e non nel markup, come le 12 tinte dei percorsi (§8.3): il
   cliente non puo' sbilanciare un logo sbagliando un numero in LiveCanvas.

   Il marchio e' centrato nella tela entro il mezzo punto percentuale su
   tutti e quattro i file (verificato sul canale alfa), quindi resta centrato
   anche nella cella.

   ⚠️ COSTO: i margini trasparenti restano, e la cella si adatta all'altezza
   dell'immagine. La riga loghi passa da ~92px a 235, dettata da eurofins che
   e' il file con il marchio piu' piccolo rispetto alla tela. Se un giorno
   quello spazio da' fastidio, si recupera fissando l'altezza della cella e
   lasciando che "overflow:hidden" ritagli i margini — funziona proprio
   perche' i marchi sono centrati. Non fatto ora: e' un cambio d'aspetto che
   il cliente ha gia' approvato cosi'.

   Il filtro grayscale del handoff qui NON c'e': era gia' stato annullato il
   17/08/2026 ("filter:none; opacity:1" poco sopra in questo file). I loghi
   si vedono a colori, ed e' cosi' anche con i file precedenti.            */

#lc-longevity #lg-sezione-partner .lg-partner-logo img {
	height: var(--lg-logo-h);
	width: auto;
	max-width: none;       /* la larghezza la detta l'altezza, non la cella */
}

/* target ottico del marchio: ~40px di altezza per i lockup orizzontali,
   ~56 per quello impilato di Altamedica, che e' su due righe.             */
#lc-longevity .lg-partner-logo--cerba      { --lg-logo-h: 118px }  /* 32 / .273 */
#lc-longevity .lg-partner-logo--eurofins   { --lg-logo-h: 190px }  /* 28 / .147 */
#lc-longevity .lg-partner-logo--altamedica { --lg-logo-h: 130px }  /* 50 / .386 */
#lc-longevity .lg-partner-logo--unipd      { --lg-logo-h: 140px }  /* 51 / .362 */

@media (min-width: 768px) {
	#lc-longevity .lg-partner-logo--cerba      { --lg-logo-h: 150px }
	#lc-longevity .lg-partner-logo--eurofins   { --lg-logo-h: 235px }
	#lc-longevity .lg-partner-logo--altamedica { --lg-logo-h: 158px }
	#lc-longevity .lg-partner-logo--unipd      { --lg-logo-h: 172px }
}

/* ===========================================================================
   31/08/2026 — URGENTE: le card di aree e percorsi scoppiavano su iPhone
   ===========================================================================

   Segnalato dal cliente su iPhone reale, anche in navigazione privata: le 6
   card delle aree grandissime, una per riga, piu' larghe dello schermo.

   Causa, riprodotta in laboratorio disattivando "container-type" su Chrome e
   ottenendo la stessa identica schermata:

       icona   45cqw  ->  176px   (45% del viewport da 390, non della card)
       titolo  8.72cqw -> 34px    (8,72% del viewport)
       card             ->  414px di larghezza su uno schermo da 390

   Quando il contenitore NON viene stabilito, le unita' "cqw" non decadono a
   zero: per specifica ricadono sul viewport piccolo. Un'icona che doveva
   essere il 45% di una card da 165px diventa il 45% dello schermo, sfonda la
   traccia della griglia e trascina tutto con se'.

   Perche' proprio li': le quattro regole che seguono erano le uniche di
   tutta la pagina a dipendere da "cqw" per una MISURA, non per un dettaglio.

   La correzione non toglie le container query — dove funzionano danno i
   valori campionati dai PNG e approvati dal cliente il 17/08, e vanno
   tenuti. Le mette pero' dentro un "@container", che per definizione non
   matcha quando il contenitore non esiste. Fuori restano gli equivalenti in
   percentuale.

   Le percentuali NON sono un ripiego approssimativo: le card non hanno
   padding orizzontale (§8.3 spiega perche'), quindi il loro content box e'
   largo quanto la card e "45%" vale esattamente quanto "45cqw". L'unica
   misura che non ha un equivalente percentuale e' il "font-size", che va
   quindi per fasce — i valori sotto sono le dimensioni reali della card
   misurate a 390, 768 e 1200.

   Per il titolo dei percorsi il ripiego parte da 13px invece dei ~10,8 che
   darebbe il calcolo: e' la soglia gia' indicata come ragionevole nel punto
   aperto di §8.3, e su un browser che sta gia' rinunciando alle container
   query non ha senso ereditarne anche il difetto.                         */

/* --- Ripiego: nessuna container query ------------------------------------ */
#lc-longevity .lg-aree-card--svg .lg-aree-icona {
	width: 45%;
	height: auto;
	aspect-ratio: 1;
	margin: 0 0 6.4%;
}
#top #lc-longevity .lg-aree-card--svg .lg-aree-titolo {
	font-size: 15px;
}

#lc-longevity .lg-percorsi-card--svg .lg-percorsi-icona {
	width: 21.48%;
	height: auto;
	aspect-ratio: 1;
	padding: 3.74%;
	margin: 0 0 4%;
}
#top #lc-longevity .lg-percorsi-card--svg .lg-percorsi-titolo {
	max-width: 88%;
	font-size: 13px;
}

@media (min-width: 768px) {
	#top #lc-longevity .lg-aree-card--svg .lg-aree-titolo { font-size: 19px }
	#top #lc-longevity .lg-percorsi-card--svg .lg-percorsi-titolo { font-size: 15px }
}
@media (min-width: 1200px) {
	#top #lc-longevity .lg-aree-card--svg .lg-aree-titolo { font-size: 28px }
	#top #lc-longevity .lg-percorsi-card--svg .lg-percorsi-titolo { font-size: 16px }
}

/* Il blocco "@container" che rimetteva i valori in cqw e' stato TOLTO il
   31/08/2026, e con lui ogni cqw del file: sull'iPhone del cliente le card
   restavano rotte anche con il gate, quindi li' la container query o non
   stabilisce il contenitore o non risolve le unita' come dovrebbe.

   Restano solo le percentuali: e' lo stesso meccanismo di "img-fluid"
   (max-width:100%), supportato ovunque da sempre. Scarto misurato in Chrome
   rispetto ai valori in cqw: card 165->169, icona 74->76, titolo 14,4->15px.
   Due-quattro pixel, invisibili, in cambio di una sezione che non puo' piu'
   rompersi su un browser che non conosciamo.                              */



/* ===========================================================================
   31/08/2026 — La fascia bianca sopra l'hero, sotto i 990px
   ===========================================================================

   Segnalata dal cliente: fra header e hero comparivano 90px di bianco, ma
   solo su telefono e tablet. Misurato: 90px esatti a 989, 768, 430 e 390;
   zero da 990 in su.

   Causa. "style.css" del child ha, per tutto il sito:

       .html_header_top.html_header_topbar_active.html_header_sticky
       #top #main { padding-top: 90px !important }

   Serve a compensare l'header quando questo NON occupa spazio nel flusso
   (da 990px in su il valore misurato e' proprio 90). Sotto i 990 pero'
   l'header STA nel flusso e si prende i suoi 82-92px: i 90 non compensano
   piu' niente, si sommano. E' lo stesso equivoco gia' incontrato sulle
   ancore della Palestra (CLAUDE.md §8.1, 31/08): l'elemento che copre la
   pagina non e' quello che sembra, e va misurato invece che dedotto.

   Non e' un difetto della Longevity: succede su ogni pagina del sito. Si
   vede solo qui perche' altrove la prima sezione e' bianca su bianco.

   Perche' non correggo la causa. "style.css" e' il file che CLAUDE.md §5
   mette fra quelli da non toccare, e quella regola vale su tutte le pagine:
   cambiarla per un problema visibile su una sola sezione sposterebbe di
   90px l'inizio di tutto il sito. La causa va segnalata, non aggirata di
   nascosto.

   Cosa faccio invece. Tiro su l'hero di 90px e gliene restituisco
   altrettanti di padding: la sezione copre la fascia con il proprio fondo,
   il contenuto resta dov'era e l'header non viene toccato. La sfumatura non
   ha giunte perche' e' lo stesso elemento e lo stesso gradiente, solo piu'
   alto.

   !important sul padding: "py-5" e' una utility Bootstrap che lo dichiara
   gia' important, e nessuna regola nostra la batterebbe senza. E' il caso
   previsto da §4.4 — si alza la specificita' (quattro id) e si commenta
   quale regola si sta battendo.

   La soglia e' 989.98px e non 768: sopra i 990 la fascia non c'e', e
   applicare li' il margine negativo infilerebbe l'hero sotto l'header.   */
@media (max-width: 989.98px) {
	#top #wrap_all #lc-longevity #lg-sezione-hero {
		margin-top: -90px;
		padding-top: calc(90px + 3rem) !important;   /* 3rem = il py-5 di partenza */
	}
}

/* ===========================================================================
   31/08/2026 — Le card non possono piu' sfondare la propria colonna
   ===========================================================================

   Il gate "@container" del blocco precedente non e' bastato: sull'iPhone del
   cliente le card restano enormi anche con quel file online. Vuol dire che
   la causa non e' (solo) quella che avevo riprodotto in Chrome.

   Questo blocco non insegue piu' la causa: rende impossibile il SINTOMO.

   Un elemento di griglia ha "min-width: auto", cioe' non puo' rimpicciolirsi
   sotto la propria min-content. Se qualcosa dentro la card viene calcolato
   enorme — l'icona, il testo, non importa cosa ne sia la ragione — la card
   non lo comprime: allarga la traccia, e la griglia esce dallo schermo. E'
   il meccanismo che trasforma "un'icona sbagliata" in "pagina rotta".

   Con "min-width: 0" la card puo' stringersi quanto serve, la traccia resta
   quella decisa dalla griglia e la riga resta di due colonne. Al peggio
   sara' l'icona a risultare sproporzionata dentro una card della dimensione
   giusta: un difetto estetico invece di un layout distrutto.

   "width: 100%" toglie l'altra strada per cui una card puo' venire piu'
   larga della colonna: con "aspect-ratio" e una riga di altezza definita
   ("grid-auto-rows: 1fr" piu' "align-self: stretch"), la larghezza puo'
   essere DEDOTTA dall'altezza. Fissando la larghezza, la deduzione va nel
   verso giusto — altezza dalla larghezza — e non il contrario.

   "max-width: 100%" sulle icone e' la cintura sulle bretelle: qualunque
   valore ottengano, non escono dalla card.                                */

/* Agganciate ai modificatori "--svg" e non alle griglie nude: la Palestra
   della Salute riusa lo stesso template e usa gia' .lg-percorsi-grid (§8.2).
   Senza il modificatore, questa regola le arriverebbe addosso.           */
#lc-longevity .lg-aree-grid--svg > *,
#lc-longevity .lg-percorsi-grid--svg > * {
	min-width: 0;
	max-width: 100%;
}

#lc-longevity .lg-aree-card--svg,
#lc-longevity .lg-percorsi-card--svg {
	width: 100%;
	min-width: 0;
	max-width: 100%;
}

#lc-longevity .lg-aree-card--svg .lg-aree-icona,
#lc-longevity .lg-percorsi-card--svg .lg-percorsi-icona {
	max-width: 100%;
}

/* Uno scalino in piu' oltre i 1400px: li' la card delle aree arriva a 385px
   e il titolo, alla proporzione originale dell'8,72%, vale 33,6px. Senza
   questa fascia resterebbe ai 28px pensati per il 1200, visibilmente
   piccolo. I percorsi passano da 239 a 277px di card: 6,71% = 18,6.       */
@media (min-width: 1400px) {
	#top #lc-longevity .lg-aree-card--svg .lg-aree-titolo { font-size: 33px }
	#top #lc-longevity .lg-percorsi-card--svg .lg-percorsi-titolo { font-size: 18px }
}

/* "container-type: inline-size" e' stato tolto dalle due card il
   31/08/2026: con le cqw sparite non serviva piu' a niente, ma continuava
   ad applicare il containment sull'asse inline. Su un browser dove il
   guasto non e' ancora spiegato, un meccanismo inutile e' solo un
   indiziato in piu'.                                                     */

/* ==========================================================================
   02/09/2026 — (1) La foto del team non e' piu' ritagliata

   longevity.css la teneva a un'altezza fissa con "object-fit: cover":
   240px sotto i 992, 470px sopra. Aveva senso quando l'immagine era
   1024x1024 quadrata dentro una colonna larga 463px — senza ritaglio
   sarebbe stata alta 463px e avrebbe sbilanciato la riga.

   Il cliente l'ha sostituita in produzione con una 2048x1152, cioe' 16:9,
   e con quella il ritaglio taglia via meta' inquadratura. Qui l'altezza
   torna a dedursi dalla larghezza.

   CONSEGUENZA VOLUTA, misurata a desktop: la foto passa da 470px a 261px
   di altezza (la colonna e' larga 463px) accanto a una colonna di testo
   alta 619px. E' piu' bassa del testo che ha di fianco, ed e' il prezzo di
   non ritagliare. Se un giorno da fastidio, la leva e' una sola: portare
   ".lg-team-grid" da "5fr 7fr" a "6fr 6fr" e la foto sale a 313px.

   ATTENZIONE ALL'AGGANCIO: "#lc-longevity .lg-team-img" NON basta. La
   Palestra della Salute riusa questo template e nella sua sezione
   "#contatti" ha la stessa identica impalcatura — ".lg-team-grid" >
   ".lg-team-foto-block" > "img.lg-team-img" — con dentro una foto 4:3.
   Verificato: con l'aggancio per sola classe quella foto passava da 240 a
   308px e perdeva il ritaglio, cioe' una pagina che qui non c'entra
   cambiava aspetto. Nessuna classe distingue le due pagine, l'id di
   sezione si': la <section> del team ha percio' ricevuto
   "id=lg-sezione-team" (solo id, niente data-lg-nav: non deve entrare
   nella section nav), come gia' hero, fasi, percorsi e partner.        */

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

/* ==========================================================================
   02/09/2026 — (2) Le 6 card delle aree aprono una fotografia

   Vedi il commento della sezione 2 dentro post_content per il perche' di
   lightbox invece di flipbox, e assets/js/longevity-lightbox.js per il
   comportamento. Qui solo le misure.
   ========================================================================== */

/* La card resta esattamente com'era: si aggiunge solo l'ancora per il
   cerchio. Il cerchio e' "absolute" e NON un flex item — da flex item
   entrerebbe nel flusso della colonna centrata e, con "aspect-ratio"
   che blocca l'altezza, comprimerebbe icona e titolo.                    */
#lc-longevity .lg-aree-card--svg {
	position: relative;
	cursor: pointer;
}

/* IN ALTO A DESTRA, non in basso. L'icona e' larga il 45% ed e' centrata:
   la fascia verticale che occupa lascia i due angoli superiori vuoti a
   qualunque numero di righe vada il titolo. In basso invece lo spazio
   libero e' solo il padding della card — misurato: 58px a desktop ma
   ~25px sul telefono — e una riga di testo in piu' ci sbatterebbe contro. */
#lc-longevity .lg-aree-chevron {
	position: absolute;
	top: 8px;
	right: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Cerchio PIENO: un cerchio vuoto legge come ornamento, e' la stessa
	   ragione per cui il comando delle 4 fasi e' stato riempito il 31/08.
	   Bianco su #00517a da' 8,6:1, molto oltre il 3:1 che la WCAG 1.4.11
	   chiede a un elemento di interfaccia.                               */
	background: #fff;
	color: #00517a;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

#lc-longevity .lg-aree-chevron svg {
	width: 13px;
	height: 13px;
	display: block;
}

#lc-longevity .lg-aree-card--svg:hover .lg-aree-chevron {
	background: #d7e6f4;
	transform: scale(1.08);
}

/* Il contorno di focus resta, e si vede: il bianco del cerchio sparisce
   sul fondo blu se non lo si stacca, quindi outline chiaro + offset.    */
#lc-longevity .lg-aree-chevron:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

@media (min-width: 768px) {
	#lc-longevity .lg-aree-chevron { top: 12px; right: 12px; width: 30px; height: 30px }
	#lc-longevity .lg-aree-chevron svg { width: 15px; height: 15px }
}

@media (prefers-reduced-motion: reduce) {
	#lc-longevity .lg-aree-chevron { transition: none }
	#lc-longevity .lg-aree-card--svg:hover .lg-aree-chevron { transform: none }
}

/* --------------------------------------------------------------------------
   L'overlay.

   UNICHE REGOLE DEL FILE SENZA "#lc-longevity" DAVANTI, e per un motivo:
   l'overlay viene appeso a <body>, non dentro il wrapper. Un
   "position: fixed" dentro un antenato con "transform" smette di essere
   relativo al viewport, ed Enfold ne applica in giro. Non e' una perdita
   di scoping: le classi ".lg-lightbox*" le crea solo
   longevity-lightbox.js, che e' accodato dal solo template Longevity.
   -------------------------------------------------------------------------- */
.lg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;   /* l'header sticky di Enfold sta a 501 */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(6, 24, 40, .88);
	/* Fondo sfocato dove c'e': e' una rifinitura, non una dipendenza. */
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.lg-lightbox[hidden] { display: none }

.lg-lightbox-figura {
	position: relative;   /* ancora del badge "Immagine AI" */
	margin: 0;
	line-height: 0;
}

/* L'ALTEZZA COMANDA, non la larghezza.

   Le sei immagini sono verticali (484x542, rapporto 0,893) e la richiesta
   e' "almeno il 50% dello schermo". Dimensionando in altezza il vincolo si
   soddisfa per costruzione; la larghezza segue e il secondo termine del
   min() la tiene dentro lo schermo sui formati stretti.

   IL clamp() SERVE A NON SGRANARE. I file sono alti solo 542px: una misura
   in sole vh li ingrandisce parecchio sugli schermi alti — provato, su un
   viewport da 1134px 72vh valeva 816px, cioe' 1,51x, e si vedeva.
   Con "clamp(50vh, 542px, 72vh)" l'immagine sta alla sua dimensione nativa
   ogni volta che quella cade fra il 50% e il 72% dello schermo, e si
   scosta solo agli estremi:

     viewport      altezza     % schermo   ingrandimento
     390 x  844    437px       51,8%       0,81x   (larghezza al massimo)
     1440 x  900   542px       60,2%       1,00x   nativa
     1920 x 1080   542px       55,3%       1,00x   nativa
     2088 x 1134   567px       50,0%       1,05x   pavimento del 50%

   Il minimo del 50% e' quindi sempre rispettato, e l'ingrandimento non
   supera mai 1,05x. Se il cliente riesporta le sei immagini a ~1000x1120
   basta alzare il termine centrale del clamp.

   Il secondo termine del min() e' il freno in larghezza: sui formati
   stretti l'immagine non deve uscire dallo schermo. 0.893 e' il rapporto
   larghezza/altezza dei sei file (484x542).                              */
.lg-lightbox-img {
	display: block;
	width: auto;
	height: min( clamp(50vh, 542px, 72vh), calc(100vw / 0.893) );
	max-width: 100vw;
	border-radius: 6px;
}

.lg-lightbox-contatore {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	margin: 0;
	text-align: center;
	color: rgba(255, 255, 255, .82);
	font-size: 13px;
	letter-spacing: .08em;
}

/* Il testo dell'annuncio serve solo agli screen reader: si toglie dalla
   vista senza "display:none", che lo toglierebbe anche a loro.          */
.lg-lightbox-stato {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lg-lightbox-chiudi,
.lg-lightbox-nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;          /* 44px e' il bersaglio tattile minimo */
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	cursor: pointer;
	transition: background-color .18s ease;
}

.lg-lightbox-chiudi:hover,
.lg-lightbox-nav:hover { background: rgba(255, 255, 255, .3) }

.lg-lightbox-chiudi:focus-visible,
.lg-lightbox-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px }

.lg-lightbox-chiudi svg { width: 18px; height: 18px }
.lg-lightbox-nav svg    { width: 20px; height: 20px }

.lg-lightbox-chiudi { top: 14px; right: 14px }
.lg-lightbox-prec   { left: 10px;  top: 50%; transform: translateY(-50%) }
.lg-lightbox-succ   { right: 10px; top: 50%; transform: translateY(-50%) }

/* Sotto i 640px le frecce starebbero SOPRA l'immagine, che li' e' a tutta
   larghezza: scendono in basso, affiancate al contatore. Lo swipe resta il
   gesto principale, le frecce il ripiego per chi non lo conosce.         */
@media (max-width: 639.98px) {
	.lg-lightbox-nav  { top: auto; bottom: 14px; transform: none }
	.lg-lightbox-prec { left: 22px }
	.lg-lightbox-succ { right: 22px }
	.lg-lightbox-contatore { bottom: 28px }
	.lg-lightbox-img  { border-radius: 0 }
}

/* Il badge "Immagine AI". Stessi valori di palestra-salute.css §8, dove
   c'e' anche il ragionamento per esteso (contrasto 4,7:1 nel caso
   peggiore, "Immagine AI" e non "AI", mai sotto i 10px). E' duplicato e
   non condiviso perche' quel file lo carica solo la Palestra: spostarlo
   in comune vorrebbe dire toccare una pagina che qui non c'entra.       */
.lg-lightbox .lg-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 .lg-ai-badge {
		right: 6px;
		bottom: 6px;
		padding: 2px 7px;
		font-size: 10px;
		letter-spacing: .04em;
	}
}

/* ==========================================================================
   02/09/2026 — (3) Sezione team: l'immagine a piena larghezza su desktop

   La foto e' un mosaico di una trentina di ritratti. Nella colonna da 463px
   del layout precedente era illeggibile; qui prende tutti i 1176px del
   contenitore, cioe' 2,5 volte la larghezza e 6,4 volte l'area.

   ⚠️ NON ASPETTARSI CHE I NOMI SI LEGGANO. Misurato sull'originale: le
   didascalie sotto i ritratti sono alte ~13px su 2048px di larghezza.
   A 1176 diventano 7,5px, e anche a tutta pagina resterebbero sotto i 10.
   L'immagine vale come "guarda quanti siamo", non come elenco: se il
   cliente vuole i nomi leggibili serve un'altra immagine, non un altro CSS.

   PERCHE' L'IMMAGINE NON STA SUBITO SOTTO L'H2, come si sarebbe tentati:
   separerebbe il titolo dai due paragrafi che lo spiegano, e a piena
   larghezza titolo e paragrafi verrebbero righe da ~140 caratteri. Con
   l'intestazione su due colonne il testo resta a misura comoda e la banda
   sotto e' tutta per l'immagine.

   Tutto agganciato a "#lg-sezione-team": la Palestra della Salute ha la
   stessa impalcatura ".lg-team-grid" nella sua sezione #contatti e senza
   l'id si ritroverebbe questo layout addosso. Stessa trappola del blocco
   (1) qui sopra, verificata allo stesso modo.

   Mobile invariato: una colonna, foto in testa, come prima.
   ========================================================================== */

@media (min-width: 992px) {

	#lc-longevity #lg-sezione-team .lg-team-grid {
		grid-template-columns: 5fr 7fr;
		column-gap: 64px;
		/* "start" e non "center": con tre righe di altezza molto diversa il
		   centraggio verticale faceva galleggiare l'intestazione. */
		align-items: start;
	}

	/* --- riga 1: intestazione a due colonne ---
	   I due wrapper esistono per questo. Con occhiello/H2 e paragrafi come
	   celle separate della stessa griglia, le righe si allineano a coppie e
	   sotto l'occhiello si apre un buco alto quanto il primo paragrafo:
	   ogni wrapper e' invece una cella sola, e dentro il testo scorre. */
	#lc-longevity #lg-sezione-team .lg-team-intro { grid-column: 1; grid-row: 1 }
	#lc-longevity #lg-sezione-team .lg-team-testo { grid-column: 2; grid-row: 1 }

	/* Il margine sotto l'ultimo paragrafo non serve piu': lo stacco verso
	   l'immagine lo da' il margine dell'immagine, uno solo e prevedibile. */
	#lc-longevity #lg-sezione-team .lg-team-p2-block { margin-bottom: 0 }

	/* --- riga 2: l'immagine ---
	   "1 / -1" e non "1 / 3": se un domani le colonne diventassero tre, la
	   riga continua a coprirle tutte senza toccare questa regola.
	   Nel DOM la foto e' il PRIMO blocco della sezione (e su telefono resta
	   in testa): qui la riga esplicita la porta al centro senza che il
	   markup cambi — stessa tecnica delle 4 fasi, §7.4.                  */
	#lc-longevity #lg-sezione-team .lg-team-foto-block {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: 48px 0 0;
	}

	/* --- riga 3: le 4 specialita' in riga --- */
	#lc-longevity #lg-sezione-team .lg-team-specialita-block {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 44px;
	}

	/* Fra 992 e 1100 le quattro voci restano 2x2, cioe' come erano. NON e'
	   una scelta di gusto: Chrome, su questa macchina, non scende sotto i
	   1120px di viewport, quindi sotto quella soglia i numeri sarebbero
	   calcolati e non misurati. Meglio la disposizione gia' approvata che
	   una larghezza mai vista. Se un giorno si misura davvero e sta bene,
	   basta abbassare il 1100 qui sotto.                                  */
}

/* Da due colonne a quattro. Misurato a 1120px di viewport: box da 206px,
   la voce piu' lunga — "salute cognitiva e prevenzione neurodegenerativa" —
   sta in 5 righe e tutti e quattro i box restano alti uguali (99px).
   Il filetto in alto resta: sotto l'immagine fa da chiusura della sezione. */
@media (min-width: 1100px) {
	#lc-longevity #lg-sezione-team .lg-team-specialita {
		grid-template-columns: repeat(4, 1fr);
		gap: 0 32px;
	}
}

/* ==========================================================================
   02/09/2026 — (4) Badge "Immagine AI" sulle fotografie di pagina

   Indicazione del cliente: su questa pagina tutte le fotografie sono
   generate con l'AI tranne quella del team. Sei immagini lo ricevono —
   clessidra, le 4 delle fasi, i punti di forza — piu' le 6 delle aree che
   ce l'hanno gia' dentro la lightbox. Dodici dichiarazioni in tutto.

   NON lo ricevono, e non e' una dimenticanza: la foto del team (reale), i
   4 loghi dei partner (marchi veri di enti veri: dichiararli sintetici
   sarebbe falso), il lockup dentro l'H1, medico-genetista.png (uno schema
   disegnato, non una fotografia) e le 18 icone piu' l'orologio dell'hero,
   che sono SVG vettoriali.

   Valori identici a palestra-salute.css §8, dove sta il ragionamento per
   esteso: fondo blu scuro al 62% e testo bianco perche' bianco-su-bianco e'
   invisibile (nel caso peggiore, foto tutta bianca sotto l'etichetta, resta
   4,7:1, sopra AA); "Immagine AI" e non un tondino con "AI", che su una
   pagina il cui pubblico comprende persone anziane sarebbe un indovinello;
   mai sotto i 10px, sotto i quali smette di essere una dichiarazione.

   NON e' aria-hidden: le sei <img> hanno alt="" perche' illustrative,
   quindi senza questo testo per chi usa uno screen reader non esisterebbe
   alcuna dichiarazione.

   ⚠️ Resta fuori portata la marcatura leggibile dalla macchina che l'art. 50
   del regolamento UE 2024/1689 chiede accanto a quella visibile: e' C2PA,
   vive dentro il file e la scrive chi genera. "data-ai-generated" e' un
   aggancio nostro, non uno standard.
   ========================================================================== */

/* Le ancore. ".lg-fase-foto" e ".lg-obiettivo-foto" esistevano gia';
   ".lg-clessidra-foto" e' stata aggiunta al contenitore, che era un
   ".lc-block" nudo e non offriva nulla a cui agganciarsi.               */
#lc-longevity .lg-clessidra-foto,
#lc-longevity .lg-fase-foto,
#lc-longevity .lg-obiettivo-foto {
	position: relative;
}

/* La clessidra e' l'unica delle tre a NON riempire il suo contenitore: la
   sua <img> ha "img-fluid", cioe' "max-width: 100%", quindi oltre i 1080px
   di contenitore resta larga 1080 e allineata a sinistra. Senza stringere il
   contenitore il badge finirebbe all'estremita' destra del blocco, sospeso
   nel vuoto accanto alla foto invece che sopra.

   ⚠️ "fit-content" va messo QUI E SOLO QUI. Sulle altre due l'immagine e'
   "width: 100%", e un contenitore che si dimensiona sul contenuto mentre il
   contenuto si dimensiona sul contenitore e' un calcolo circolare: si
   risolve a zero. Provato — le 4 foto delle fasi collassavano a 0x0 e il
   badge restava a mezz'aria.                                             */
#lc-longevity .lg-clessidra-foto {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;   /* la foto e' centrata nella sua sezione */
}

/* Un'<img> e' inline: sotto la linea di base resta lo spazio dei discendenti,
   qualche pixel, e il badge ancorato al fondo del contenitore ci galleggia
   dentro invece di appoggiarsi al bordo della foto. */
#lc-longevity .lg-clessidra-foto > img { display: block }

#lc-longevity .lg-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;
	/* Le 4 foto delle fasi stanno DENTRO il <summary>, che e' il comando di
	   apertura: senza questo il badge intercetterebbe il clic e quel punto
	   della foto non aprirebbe la fase. */
	pointer-events: none;
}

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