/* =========================================================================
   02-tipografia.css — titoli, corpo, occhiello. 03/09/2026.

   LA CLASSE FA LA DIMENSIONE, IL TAG FA LA GERARCHIA.
   Serve un H3 grande come un H2? Si cambia classe, mai tag. L'albero dei
   titoli e' un vincolo SEO (CLAUDE.md §8) e non si piega all'estetica.
   Per lo stesso motivo l'occhiello e' sempre uno <span> o un <p>, mai un
   heading, e ha una classe che lo fa sembrare un'etichetta.

   PERCHE' #top DAVANTI AI TITOLI. Enfold li stila con
   "#top #wrap_all .all_colors h2": due id piu' due classi, che battono
   qualunque selettore ancorato alla sola .lc-page e si portano via color e
   font-family. Alzare la specificita' e' l'alternativa a !important
   prevista da CLAUDE.md §4.4, gia' adottata sulla Longevity quando le card
   sono passate a heading (§8.3). Il conflitto nasce solo con i tag di
   heading: sui <p> e sugli <span> non serve.

   MOBILE FIRST: le media query sono solo in min-width, tranne il blocco
   finale sotto i 576px, che e' l'unico ritocco per gli schermi stretti e
   sta in un punto solo invece che sparso in dodici regole.
   ========================================================================= */


/* --- Occhiello ----------------------------------------------------------
   L'etichetta sopra il titolo di sezione. Maiuscolo e spaziato: a 12px la
   spaziatura fra le lettere e' cio' che lo rende leggibile come etichetta e
   non come testo rimpicciolito.                                           */
.lc-page .lc-eyebrow {
	display: block;
	margin-bottom: 14px;
	color: var(--lc-blu-chiaro);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .2em;
	text-transform: uppercase;
}


/* --- Titolo principale --------------------------------------------------
   Due righe con pesi opposti: la prima leggera e in grigio, la seconda
   pesante e in blu. E' il ritmo dell'hero delle pagine gia' online.       */
#top .lc-page .lc-h1-riga1 {
	color: var(--lc-testo-tenue);
	font-size: 40px;
	font-weight: 300;
	line-height: 1.16;
}

#top .lc-page .lc-h1-riga2 {
	display: block;
	color: var(--lc-blu);
	font-size: 52px;
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
}


/* --- Titoli di sezione -------------------------------------------------- */
#top .lc-page .lc-h2 {
	color: var(--lc-blu);
	font-size: 36px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* Per i titoli lunghi, dove 36px manderebbero l'intestazione su tre righe. */
#top .lc-page .lc-h2--compatto {
	font-size: 32px;
}

#top .lc-page .lc-h3 {
	color: var(--lc-blu);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.28;
}

/* Il titolo dentro una card: sta in uno spazio stretto e non puo' avere la
   stessa misura di un titolo di sottosezione, anche quando e' lo stesso tag. */
#top .lc-page .lc-h3-card {
	color: var(--lc-blu);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

#top .lc-page .lc-h4 {
	color: var(--lc-blu);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
}


/* --- Corpo del testo ----------------------------------------------------
   Tre misure e non una: l'introduzione di sezione respira piu' del testo
   dentro una card, che sta in uno spazio stretto. Interlinea 1,7 sui testi
   lunghi: il pubblico di queste pagine e' over 40 (CLAUDE.md §8.1).       */
.lc-page .lc-corpo-intro {
	color: var(--lc-testo);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.7;
}

.lc-page .lc-corpo {
	color: var(--lc-testo);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.7;
}

.lc-page .lc-corpo-card {
	color: var(--lc-testo);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
}

/* Paragrafi consecutivi dentro lo stesso blocco. Il margine sta qui e non
   sul <p> (che 00-reset azzera) perche' cosi' un paragrafo solo non si
   porta dietro spazio che nessuno gli ha chiesto. */
.lc-page :is(.lc-corpo-intro, .lc-corpo, .lc-corpo-card) + :is(.lc-corpo-intro, .lc-corpo, .lc-corpo-card) {
	margin-top: 1em;
}


/* --- Elenchi puntati ---------------------------------------------------- */
.lc-page .lc-elenco {
	padding-left: 20px;
	color: var(--lc-testo);
	font-size: 15px;
	line-height: 1.6;
	list-style: disc;
}

.lc-page .lc-elenco li + li {
	margin-top: 4px;
}

/* L'etichetta che introduce un elenco: piccola e maiuscola, come
   l'occhiello ma dentro un blocco invece che sopra una sezione. */
.lc-page .lc-elenco-etichetta {
	margin-bottom: 8px;
	color: var(--lc-blu-chiaro);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}


/* --- Schermi stretti ----------------------------------------------------
   L'unico blocco in max-width del file, e sta in fondo di proposito: tutti
   i ritocchi per telefono in un punto solo, invece che una media query
   appiccicata sotto ognuna delle dodici regole qui sopra.                 */
@media (max-width: 575.98px) {
	#top .lc-page .lc-h1-riga1 { font-size: 27px }
	#top .lc-page .lc-h1-riga2 { font-size: 32px }
	#top .lc-page .lc-h2,
	#top .lc-page .lc-h2--compatto { font-size: 25px }
	#top .lc-page .lc-h3 { font-size: 20px }
	#top .lc-page .lc-h3-card { font-size: 18px }
	#top .lc-page .lc-h4 { font-size: 16px }
	.lc-page .lc-corpo-intro { font-size: 16px }
	.lc-page .lc-corpo { font-size: 15px }
}