/* =========================================================================
   medicina-estetica.css — solo questa pagina. 03/09/2026.

   È corto di proposito, ed è la misura che dice se la struttura comune
   funziona: quando una pagina nuova ha bisogno di venti regole sue, vuol
   dire che i componenti condivisi coprono tutto il resto. Se un giorno
   questo file cresce, la domanda giusta non è "come lo organizzo" ma
   "quale di queste regole doveva stare negli strati comuni".

   SCOPE: #lc-medicina-estetica, la classe che il template stampa sul
   wrapper a partire dal meta _lc_page. Le altre pagine LiveCanvas non la
   hanno, quindi queste regole non possono raggiungerle.
   ========================================================================= */


/* --- Le due mappe dei trattamenti ---------------------------------------
   Non sono fotografie decorative: sono schemi con le etichette dei
   trattamenti STAMPATE DENTRO il file (1920x868, rapporto 2,21:1 — già un
   banner, quindi nessun ritaglio). Per questo nel markup portano un alt
   lunghissimo che riporta per intero ciò che vi si legge: quel testo non
   esiste da nessun'altra parte nel DOM ed è l'unico appiglio per crawler e
   screen reader. È la stessa situazione della deroga di CLAUDE.md §8.2.

   Se un giorno il cliente consegna queste mappe come SVG o come testo,
   l'alt torna breve e queste due regole spariscono.                       */
#lc-medicina-estetica .me-banner {
	max-width: var(--lc-larghezza);
	margin-inline: auto;
}

#lc-medicina-estetica .me-banner-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lc-raggio);
}


/* --- Colore dei titoli ---------------------------------------------------
   Il design system dichiara i titoli in #004a87 (--lc-blu), ma il child
   theme li stila con "#top #wrap_all .all_colors h3" — due id — e vince
   sugli strati comuni, che stanno di proposito a specificità bassa perché
   una pagina possa sempre sovrascriverli.

   Risultato senza questa regola: gli h3 e gli h4 di questa pagina uscivano
   in #053f68, il blu del tema, invece del blu del sistema. Su un solo
   titolo non si nota; su 86 (22 h3 + 64 h4) la pagina è di un blu diverso
   dal resto.

   Qui si rialza il tiro a livello di pagina, che è il posto giusto. Le due
   pagine migrate NON hanno questa regola: sono state disegnate e approvate
   con il colore del tema, e allinearle le farebbe divergere dalla
   produzione. Quando il cliente deciderà, la regola si sposta negli strati
   comuni e si toglie da qui.                                              */
#top #wrap_all #lc-medicina-estetica :is(.lc-h3, .lc-h3-card, .lc-h4) {
	color: var(--lc-blu);
}


/* --- L'elenco dei passaggi ------------------------------------------------
   Sta in una fascia azzurra bassa fra l'hero e la prima sezione vera.

   I puntini fuori dal testo (list-style-position: outside, che è il default)
   con il rientro giusto: dentro una fascia colorata un elenco che parte a
   filo del bordo sembra sbagliato, e i puntini "dentro" spezzerebbero
   l'allineamento delle righe successive.

   Interlinea più larga del solito: sono cinque voci lunghe una frase intera
   ciascuna, e a 1.6 si leggevano come un unico blocco grigio.              */
#lc-medicina-estetica .me-passaggi {
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.7;
}

#lc-medicina-estetica .me-passaggi li + li {
	margin-top: 10px;
}

#lc-medicina-estetica .me-passaggi strong {
	color: var(--lc-blu);
}


/* --- I due pulsanti verso le aree ---------------------------------------
   Affiancati e larghi uguale, centrati sotto l'elenco dei passaggi. Sono la
   stessa scelta presentata due volte, non un'azione principale e una
   secondaria: per questo sono entrambi primari.

   max-width perché su schermi larghi due bottoni al 50% ciascuno
   diventerebbero due barre da 430px per tre parole.                       */
#lc-medicina-estetica .me-scelta-area {
	max-width: 560px;
	margin-inline: auto;
}


/* --- Le card senza foto --------------------------------------------------
   Quattro inestetismi non hanno ancora la fotografia. La loro card sta nella
   stessa riga di quelle che ce l'hanno e si allunga per allinearsi: con il
   contenuto ancorato in alto, tutto il vuoto finisce sotto il testo e la
   card sembra troncata a metà.

   Centrando in verticale, il vuoto si distribuisce sopra e sotto e la card
   si legge come una card corta, non come una card rotta.

   Quando arriveranno le foto mancanti questa regola diventerà inerte da
   sola: non c'è niente da ricordarsi di togliere.                          */
#lc-medicina-estetica .lc-griglia--3 > .lc-card:not(.lc-card--foto) {
	display: flex;
	flex-direction: column;
	justify-content: center;
}


/* --- Hero: fondo azzurrino che sfuma nel bianco --------------------------
   Stessa impostazione dell'hero del Centro Longevity, che è la pagina di
   riferimento del sito: azzurrino in diagonale, una schiaritura dove sta la
   fotografia, e una banda finale che si spegne nel bianco della sezione
   successiva invece di tagliarsi di netto.

   ⚠️ LA BANDA È MISURATA IN PIXEL DAL BASSO, NON IN PERCENTUALE. La sezione
   cambia altezza col viewport e con la lunghezza dei testi: 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, cioè
   esattamente la fascia vuota che resta sotto i bottoni. La sfumatura vive
   lì dentro e non tocca il contenuto. Se si cambia quel padding, va
   cambiato anche questo valore — sulla Longevity la prima versione partiva
   a metà sezione e sbiadiva anche i bottoni: l'effetto era "scolorito", non
   "sfumato".

   Il fondo è agganciato all'id perché in LiveCanvas la <section> non può
   portare classi custom.

   I colori sono quelli dell'hero Longevity, non nuovi: le due pagine devono
   sembrare dello stesso sito, e introdurre una terza famiglia di azzurri
   servirebbe solo a farle sembrare di due.                                 */
#lc-medicina-estetica #hero {
	background-image:
		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%);
}

/* Il filo in cima, come sulla Longevity: chiude l'hero contro l'header
   senza disegnarci una riga netta sopra. */
#lc-medicina-estetica #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;
}

/* --- I 90px di bianco fra header e hero, sotto i 990px ------------------
   style.css del child fa "#top #main { padding-top: 90px !important }" per
   tutto il sito. Da 990px in su l'header non occupa spazio nel flusso e quei
   90px lo compensano davvero; sotto, l'header sta nel flusso e si prende i
   suoi, quindi i 90 si sommano e resta una fascia vuota. Si vede solo dove la
   prima sezione ha un fondo colorato — qui l'hero ce l'ha
   (PARTICOLARITA-TEMA.md §4). Misurati in pagina il 04/09/2026: esattamente
   90px prima, 0 dopo.

   ⚠️ SI AGGANCIA ALL'ID E NON ALLA CLASSE .lc-sezione--recupera-header che
   03-layout gia' definisce: LiveCanvas cancella le classi custom dalle
   <section> al salvataggio (PARTICOLARITA-TEMA.md §11), quindi quella classe
   sparirebbe la prima volta che il cliente apre la pagina nell'editor e la
   fascia tornerebbe senza che nessun errore lo dica. L'id sopravvive.

   Il contenuto non si sposta: la sezione risale di 90px e se li riprende in
   padding, coprendo la fascia col proprio fondo. L'header non viene toccato.

   ⚠️ Il 48px e' il padding-top di .lc-sezione sotto i 992px: se cambia la',
   cambia qui.                                                              */
@media (max-width: 989.98px) {
	#lc-medicina-estetica #hero {
		margin-top: -90px;
		padding-top: calc(48px + 90px);
	}
}