/* =========================================================================
   Life Tips — base del nuovo design
   Struttura e componenti condivise. I colori e i caratteri arrivano dai tre
   file tema-a/b/c.css, che definiscono solo le variabili.
   Caricato DOPO styles.css: sovrascrive il vecchio foglio.
   ========================================================================= */

/* Valori di riserva: ogni tema può sovrascriverli. */
:root {
	--h-header: 66px;
	--raggio: 8px;
	--raggio-grande: 12px;
	--misura: 68ch;
	--peso-titoli: 700;
	--spaziatura-titoli: -.01em;
	--allineamento-titolo: center;
	--allineamento-sezione: left;
	--sezione-bordo: none;
	--sezione-padding: 0;
	--ombra-header: none;
	--header-bordo: none;
	--ombra-carta: 0 2px 10px rgba(0,0,0,.06);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	background: var(--sfondo);
	color: var(--testo);
	font-family: var(--font-testo);
	font-size: var(--dim-base);
	line-height: 1.7;
	letter-spacing: var(--spaziatura, 0);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accento); text-decoration: none; }
a:hover { color: var(--accento-scuro); text-decoration: underline; text-underline-offset: 2px; }

strong { color: var(--testo-forte); font-weight: 600; }
em { color: inherit; }
hr { border: 0; border-top: 1px solid var(--bordo); opacity: 1; margin: 1.6em 0; }

::selection { background: var(--accento); color: #fff; }

/* ---------- Intestazione ------------------------------------------------ */
#header {
	height: var(--h-header);
	background: var(--header-bg);
	box-shadow: var(--ombra-header);
	border-bottom: var(--header-bordo);
	transition: box-shadow .25s ease;
}
#header.header-scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.14); }
#header .logo img { max-height: 42px; }
#main { margin-top: var(--h-header); }

.navbar a, .navbar a:focus {
	font-family: var(--font-ui);
	font-size: .875rem;
	font-weight: 500;
	letter-spacing: .01em;
	color: var(--header-testo);
	padding: 10px 0 10px 26px;
}
.navbar a:hover, .navbar .active, .navbar li:hover > a { color: var(--header-testo-attivo); }
.navbar .dropdown ul {
	background: var(--menu-bg);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	box-shadow: 0 12px 32px rgba(0,0,0,.13);
	padding: 8px 0;
}
.navbar .dropdown ul a { color: var(--menu-testo); padding: 9px 18px; font-weight: 500; }
.navbar .dropdown ul a:hover, .navbar .dropdown ul li:hover > a {
	color: var(--accento); background: var(--menu-hover); text-decoration: none;
}
.mobile-nav-toggle, .mobileChanges { color: var(--header-testo-attivo) !important; }

/* ---------- Briciole di pane ------------------------------------------- */
.breadcrumbs {
	background: var(--barra-bg);
	border-bottom: 1px solid var(--bordo);
	padding: 14px 0;
	min-height: 0;
}
/* .lt-briciola era un <h5>: un titolo di quinto livello messo prima dell'<h1>
   della pagina, solo per avere il testo piccolo e in grassetto. Per chi legge
   con lo screen reader, e per chi indicizza, quel salto di livello sballava
   la struttura del documento. Ora e' un <div>: stessa resa, struttura sana.
   h5 e h2 restano qui per le pagine non ancora aggiornate. */
.breadcrumbs .lt-briciola, .breadcrumbs h5, .breadcrumbs h2 {
	font-family: var(--font-ui);
	font-size: .95rem;
	font-weight: 600;
	color: var(--testo-tenue);
	margin: 0;
}
.breadcrumbs ol { font-size: .8rem; color: var(--testo-tenue); }
.breadcrumbs ol a { color: var(--testo-tenue); }
.breadcrumbs ol a:hover { color: var(--accento); }

/* ---------- Contenitore dell'articolo ----------------------------------- */
#portfolio-details { padding: 34px 0 50px; }

.portfolio-info {
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	box-shadow: var(--ombra-carta);
	padding: clamp(20px, 4.5vw, 44px);
	color: var(--testo);
}

/* Misura di lettura: righe troppo lunghe stancano.
   Il contenuto e' testo di studio, spesso letto per intero. */
.portfolio-info > * { max-width: var(--misura); margin-left: auto; margin-right: auto; }
.portfolio-info > .tabella-scroll, .portfolio-info > .video-wrap { max-width: 100%; }

h1.titolo-articolo {
	font-family: var(--font-titoli);
	font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.3rem);
	font-weight: var(--peso-titoli);
	line-height: 1.2;
	letter-spacing: var(--spaziatura-titoli);
	color: var(--testo-forte);
	opacity: 1;
	text-align: var(--allineamento-titolo);
	margin: 0 0 .5em;
	text-wrap: balance;
}

h2.titolo-sezione {
	font-family: var(--font-titoli);
	font-size: clamp(1.15rem, .95rem + .9vw, 1.45rem);
	font-weight: var(--peso-titoli);
	line-height: 1.3;
	letter-spacing: var(--spaziatura-titoli);
	color: var(--testo-forte);
	text-align: var(--allineamento-sezione);
	margin: 2.2em 0 .8em;
	padding-bottom: var(--sezione-padding);
	border-bottom: var(--sezione-bordo);
	text-wrap: balance;
}

/* Indice ancorato in cima all'articolo */
.portfolio-info > strong > a[href^="#"] { font-weight: 600; }

/* ---------- Tabelle testo-a-fronte -------------------------------------- */
.tabella-scroll {
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--tabella-bg);
	margin: 1.6em 0;
}
.tabella-scroll > table { min-width: 32em; }
.tabella-scroll td, .tabella-scroll th {
	padding: .7em .9em;
	border-bottom: 1px solid var(--bordo);
	line-height: 1.65;
	/* SENZA QUESTA RIGA le parafrasi non si possono leggere.
	   Le tabelle testo-a-fronte hanno una riga sola con due celle: a sinistra i
	   versi, a destra la parafrasi. Le due colonne hanno altezze naturali
	   diverse (la parafrasi va a capo piu' spesso) e, senza indicazione, il
	   browser le centra verticalmente: il testo di Dante scivolava di 843 pixel
	   lasciando un vuoto bianco in cima, e ogni verso finiva accanto alla
	   spiegazione sbagliata. Riguarda i 100 canti e tutte le poesie, cioe' il
	   contenuto piu' importante del sito. */
	vertical-align: top;
}
.tabella-scroll tr:last-child td { border-bottom: 0; }
/* Intestazione delle tabelle testo/parafrasi. Resta attaccata in alto mentre
   si scorre: su un canto lungo centoquaranta versi, dopo la prima schermata
   non si sapeva piu' quale colonna fosse quale. */
.tabella-scroll th {
	position: sticky;
	top: var(--h-header);
	z-index: 1;
	background: var(--superficie-2);
	font-family: var(--font-ui);
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--testo-tenue);
	text-align: left;
	border-bottom: 1px solid var(--bordo);
}
.tabella-scroll td:first-child {
	border-right: 1px solid var(--bordo);
	font-family: var(--font-citazione);
	color: var(--testo-citazione);
}

/* ---------- Video ------------------------------------------------------- */
.video-wrap { border-radius: var(--raggio); }

/* ---------- Avviso sanitario -------------------------------------------- */
.avviso-salute {
	border: 1px solid var(--avviso-bordo);
	border-left: 4px solid var(--avviso-accento);
	background: var(--avviso-bg);
	color: var(--testo-tenue);
	border-radius: var(--raggio);
	font-size: .88rem;
}
.avviso-salute strong { color: var(--avviso-accento); }

/* ---------- Colonna laterale -------------------------------------------- */
.col-lg-4 .portfolio-info { padding: 20px; }
.col-lg-4 .portfolio-info h3 {
	font-family: var(--font-ui);
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--testo-tenue);
	margin: 0 0 12px;
}
#lastArticles a > div, #topUsers a > div, #lastPosts a > div {
	background: var(--superficie-2) !important;
	border: 1px solid var(--bordo) !important;
	border-radius: var(--raggio) !important;
	color: var(--testo-tenue) !important;
	transition: border-color .18s ease, transform .18s ease;
}
#lastArticles a:hover > div, #topUsers a:hover > div, #lastPosts a:hover > div {
	border-color: var(--accento) !important;
	transform: translateY(-1px);
	opacity: 1 !important;
}

/* ---------- Ricerca nelle categorie ------------------------------------- */
.categorySearch {
	background-color: var(--superficie-2);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 11px 12px 11px 34px;
	font-size: .95rem;
	color: var(--testo);
	background-position: 10px center;
}
.categorySearch:focus { border-color: var(--accento); background-color: var(--superficie); }

/* Elenchi di categoria */
#LISTTEXT a, #allList a, #ToHideNewResearch a {
	display: block;
	padding: 11px 14px;
	border-bottom: 1px solid var(--bordo);
	color: var(--testo);
	font-size: .97rem;
	line-height: 1.45;
	transition: background .15s ease, padding-left .15s ease;
}
#LISTTEXT a:hover, #allList a:hover, #ToHideNewResearch a:hover {
	background: var(--menu-hover);
	color: var(--accento);
	padding-left: 20px;
	text-decoration: none;
}
#LISTTEXT br, #allList br, #ToHideNewResearch br { display: none; }

/* ---------- Home -------------------------------------------------------- */
.call-to-action { padding: clamp(48px, 9vw, 86px) 0; background: var(--hero-bg); }
.call-to-action h1, .call-to-action h3 {
	font-family: var(--font-titoli);
	font-size: clamp(1.8rem, 1.2rem + 2.8vw, 2.7rem);
	font-weight: var(--peso-titoli);
	letter-spacing: var(--spaziatura-titoli);
	color: var(--hero-testo);
	margin-bottom: .35em;
	text-wrap: balance;
}
.call-to-action p { color: var(--hero-testo); opacity: .9; font-size: 1.05rem; }

.section-title h2 {
	font-family: var(--font-titoli);
	font-weight: var(--peso-titoli);
	letter-spacing: var(--spaziatura-titoli);
	color: var(--testo-forte) !important;
}
.section-bg { background: var(--barra-bg); }

.services .icon-box {
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	padding: 26px;
	margin-bottom: 24px;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.services .icon-box:hover {
	transform: translateY(-3px);
	border-color: var(--accento);
	box-shadow: var(--ombra-carta);
}
.services .icon i { color: var(--accento); font-size: 1.9rem; }
.services .title, .services .title a { color: var(--testo-forte); font-family: var(--font-titoli); font-weight: var(--peso-titoli); }
.services .description { color: var(--testo-tenue); font-size: .94rem; }

.portfolio #portfolio-flters li {
	font-family: var(--font-ui);
	font-size: .82rem;
	font-weight: 600;
	color: var(--testo-tenue);
	border: 1px solid var(--bordo);
	border-radius: 999px;
	padding: 7px 16px;
	margin: 0 6px 10px 0;
	background: var(--superficie);
	transition: all .18s ease;
}
.portfolio #portfolio-flters li:hover { border-color: var(--accento); color: var(--accento); }
.portfolio #portfolio-flters li.filter-active {
	background: var(--accento); border-color: var(--accento); color: #fff;
}
.portfolio .portfolio-wrap {
	border-radius: var(--raggio-grande);
	overflow: hidden;
	border: 1px solid var(--bordo);
	background: var(--superficie);
	transition: transform .2s ease, box-shadow .2s ease;
}
.portfolio .portfolio-wrap:hover { transform: translateY(-3px); box-shadow: var(--ombra-carta); }

#footer {
	background: var(--footer-bg);
	color: var(--footer-testo);
	border-top: 1px solid var(--bordo);
	padding: 34px 0;
}
#footer a { color: var(--footer-testo); text-decoration: underline; text-underline-offset: 3px; }

.back-to-top {
	background: var(--accento);
	width: 46px; height: 46px;
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.back-to-top i { color: #fff; }

/* ---------- Mobile ------------------------------------------------------ */
@media (max-width: 991.98px) {
	.navbar-mobile ul { background: var(--menu-bg); border-radius: var(--raggio); }
	.navbar-mobile a { color: var(--menu-testo); }
	.navbar-mobile a:hover, .navbar-mobile li:hover > a { color: var(--accento); }
	.col-lg-4 .portfolio-info { margin-top: 22px; }
}
@media (max-width: 575px) {
	:root { --dim-base: 1rem; }
	#portfolio-details { padding: 18px 0 32px; }
	.portfolio-info { border-radius: var(--raggio); }
}

/* Rispetta chi ha ridotto le animazioni */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   AREA UTENTE E FORM
   ========================================================================= */

.lt-account { padding: clamp(26px, 5vw, 56px) 0 60px; }
.lt-account .container { max-width: 620px; }
.lt-account--largo .container { max-width: 860px; }

.lt-card {
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande);
	box-shadow: var(--ombra-carta);
	padding: clamp(22px, 4.5vw, 44px);
}
.lt-card h1.titolo-articolo { text-align: left; margin-bottom: .25em; }
.lt-sottotitolo { color: var(--testo-tenue); margin: 0 0 1.8em; font-size: 1.02rem; }

/* ---------- Form --------------------------------------------------------- */
.lt-form { display: flex; flex-direction: column; gap: 20px; }
.lt-form--inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; }

.lt-campo { display: flex; flex-direction: column; gap: 7px; }
.lt-label { font-family: var(--font-ui); font-size: .86rem; font-weight: 600; color: var(--testo-forte); }
.lt-aiuto { font-size: .82rem; color: var(--testo-tenue); line-height: 1.5; }

.lt-form input[type=text],
.lt-form input[type=email],
.lt-form input[type=password],
.lt-form input[type=file] {
	width: 100%;
	font: inherit;
	font-size: 1rem;
	color: var(--testo-forte);
	background: var(--superficie-2);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 13px 14px;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.lt-form input:focus {
	outline: none;
	background: var(--superficie);
	border-color: var(--accento);
	box-shadow: 0 0 0 3px rgba(31, 95, 158, .2);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accento) 20%, transparent);
}
.lt-form input:focus-visible { outline: none; }

.lt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: var(--font-ui); font-size: .95rem; font-weight: 650;
	padding: 13px 22px; min-height: 46px;
	border: 1px solid var(--bordo); border-radius: var(--raggio);
	background: var(--superficie-2); color: var(--testo-forte);
	cursor: pointer; text-decoration: none;
	transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.lt-btn:hover { text-decoration: none; border-color: var(--accento); color: var(--accento); }
.lt-btn:active { transform: translateY(1px); }
.lt-btn--primario { background: var(--accento); border-color: var(--accento); color: #fff; }
.lt-btn--primario:hover { background: var(--accento-scuro); border-color: var(--accento-scuro); color: #fff; }
.lt-btn--neutro:hover { border-color: var(--testo-tenue); color: var(--testo-forte); }
.lt-bottoni { display: flex; gap: 12px; flex-wrap: wrap; }

.lt-form-note {
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
	font-size: .9rem; color: var(--testo-tenue);
	padding-top: 4px; border-top: 1px solid var(--bordo); margin-top: 4px;
	align-items: center;
}
/* "Ho dimenticato la password" e "Registrati" sono le due vie d'uscita di chi
   non riesce a entrare: erano alte 20-24 pixel, meno di mezzo centimetro sul
   telefono. Sotto le due voci si separano, cosi' ci sta il bersaglio pieno. */
.lt-form-note a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 420px) {
	.lt-form-note { flex-direction: column; align-items: flex-start; gap: 0; }
}
.lt-privacy { font-size: .82rem; color: var(--testo-tenue); line-height: 1.6; margin: 0; }
.lt-torna { margin: 26px 0 0; font-size: .92rem; }
.lt-nota-sicurezza {
	margin-top: 26px; padding: 16px 18px;
	background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio);
	font-size: .88rem; line-height: 1.65; color: var(--testo-tenue);
}
.lt-nota-sicurezza strong { color: var(--testo-forte); }

/* Indicatore di robustezza della password */
.lt-forza { font-size: .8rem; font-weight: 600; }
.lt-forza--0, .lt-forza--1 { color: #b3261e; }
.lt-forza--2, .lt-forza--3 { color: #9a6700; }
.lt-forza--4, .lt-forza--5 { color: #0f7a52; }

/* ---------- Avvisi ------------------------------------------------------- */
.lt-avviso {
	border-radius: var(--raggio); padding: 13px 16px; margin-bottom: 20px;
	font-size: .93rem; line-height: 1.55; border: 1px solid;
}
.lt-avviso--errore { background: #fdeceb; border-color: #f3c5c1; color: #8c2018; }
.lt-avviso--ok     { background: #e9f6ef; border-color: #bfe3ce; color: #1a6b45; }
.lt-avviso--nota   { background: var(--superficie-2); border-color: var(--bordo); color: var(--testo-tenue); word-break: break-all; }

/* ---------- Riepilogo account ------------------------------------------- */
.lt-riepilogo { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 30px; }
.lt-riepilogo__avatar {
	width: 84px; height: 84px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
	background: var(--accento); color: #fff;
	display: grid; place-items: center;
	font-family: var(--font-ui); font-size: 2.1rem; font-weight: 700; text-transform: uppercase;
}
.lt-riepilogo__avatar--piccolo { width: 64px; height: 64px; font-size: 1.6rem; }
.lt-riepilogo__avatar img { width: 100%; height: 100%; object-fit: cover; }

.lt-riepilogo__dati { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 26px; margin: 0; flex: 1 1 260px; }
.lt-riepilogo__dati dt { font-family: var(--font-ui); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--testo-tenue); margin-bottom: 3px; }
.lt-riepilogo__dati dd { margin: 0; color: var(--testo-forte); font-weight: 600; word-break: break-word; }

.lt-avatar-riga { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }

.lt-sezione { padding-top: 26px; margin-top: 26px; border-top: 1px solid var(--bordo); }
.lt-sezione:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.lt-sezione > h2 {
	font-family: var(--font-titoli); font-size: 1.12rem; font-weight: var(--peso-titoli);
	color: var(--testo-forte); margin: 0 0 16px;
}

/* ---------- Griglia delle azioni ---------------------------------------- */
.lt-griglia-azioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.lt-azione {
	display: grid; gap: 4px; padding: 18px;
	border: 1px solid var(--bordo); border-radius: var(--raggio);
	background: var(--superficie-2); color: var(--testo);
	transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.lt-azione:hover { border-color: var(--accento); transform: translateY(-2px); text-decoration: none; background: var(--superficie); }
.lt-azione i { font-size: 1.35rem; color: var(--accento); }
.lt-azione__titolo { font-family: var(--font-ui); font-weight: 700; color: var(--testo-forte); }
.lt-azione__desc { font-size: .84rem; color: var(--testo-tenue); line-height: 1.45; }
.lt-azione--esci i { color: #b3261e; }
.lt-azione--esci:hover { border-color: #e6b4af; }

/* ---------- Interruttore ------------------------------------------------- */
.lt-switch { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.lt-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lt-switch__segno {
	flex: 0 0 auto; width: 48px; height: 28px; border-radius: 999px;
	background: var(--bordo); position: relative; transition: background .2s ease; margin-top: 2px;
}
.lt-switch__segno::after {
	content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
	border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s ease;
}
.lt-switch input:checked + .lt-switch__segno { background: var(--accento); }
.lt-switch input:checked + .lt-switch__segno::after { transform: translateX(20px); }
.lt-switch input:focus-visible + .lt-switch__segno { outline: 3px solid var(--accento); outline-offset: 2px; }
.lt-switch__testo strong { display: block; color: var(--testo-forte); }
.lt-switch__testo em { font-style: normal; font-size: .87rem; color: var(--testo-tenue); line-height: 1.55; }

/* ---------- Utente nel menu --------------------------------------------- */
.lt-utente > a { gap: 8px; }
.lt-utente__pallino {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--accento); color: #fff;
	display: inline-grid; place-items: center;
	font-size: .78rem; font-weight: 700; text-transform: uppercase;
}
.lt-accedi > a {
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 999px; padding: 7px 18px !important; margin-left: 22px;
	color: var(--header-testo-attivo) !important;
}
.lt-accedi > a:hover { background: var(--accento); border-color: var(--accento); }
@media (max-width: 991.98px) {
	.lt-accedi > a { margin-left: 0; display: inline-block; }
}

/* =========================================================================
   HOME
   ========================================================================= */

.lt-hero {
	background: var(--hero-bg);
	color: var(--hero-testo);
	padding: clamp(46px, 8vw, 92px) 0 clamp(40px, 6vw, 68px);
}
.lt-hero h1 {
	font-family: var(--font-titoli);
	font-size: clamp(1.9rem, 1.1rem + 3.4vw, 3.1rem);
	font-weight: var(--peso-titoli);
	letter-spacing: var(--spaziatura-titoli);
	line-height: 1.12;
	color: var(--hero-testo);
	margin: 0 0 .5em;
	text-wrap: balance;
}
.lt-hero__sommario {
	font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
	line-height: 1.65;
	color: var(--hero-testo);
	opacity: .88;
	max-width: 56ch;
	margin: 0 0 2em;
}

/* position: relative e' l'aggancio della tendina dei suggerimenti, che si
   appoggia qui sotto. Senza, si posiziona rispetto al primo antenato
   posizionato — che qui e' la fascia blu intera — e finisce a caso. */
.lt-cerca { display: flex; gap: 10px; flex-wrap: wrap; max-width: 640px; position: relative; }
.lt-cerca__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lt-cerca input {
	flex: 1 1 260px;
	font: inherit; font-size: 1rem;
	padding: 14px 18px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: var(--raggio);
	background: rgba(255,255,255,.12);
	color: var(--hero-testo);
	min-width: 0;
}
.lt-cerca input::placeholder { color: var(--hero-testo); opacity: .6; }
.lt-cerca input:focus {
	outline: none; background: #fff; color: var(--testo-forte);
	border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.18);
}
.lt-cerca input:focus::placeholder { color: var(--testo-tenue); }
.lt-cerca .lt-btn--primario { background: #fff; border-color: #fff; color: var(--testo-forte); flex: 0 0 auto; }
.lt-cerca .lt-btn--primario:hover { background: rgba(255,255,255,.86); border-color: transparent; color: var(--testo-forte); }

.lt-hero__scorciatoie {
	list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
	padding: 0; margin: 20px 0 0;
}
.lt-hero__scorciatoie a {
	display: inline-block; padding: 6px 14px;
	border: 1px solid rgba(255,255,255,.3); border-radius: 999px;
	font-family: var(--font-ui); font-size: .84rem; font-weight: 600;
	color: var(--hero-testo); opacity: .9;
}
.lt-hero__scorciatoie a:hover { background: rgba(255,255,255,.16); opacity: 1; text-decoration: none; }

/* ---------- Sezioni ------------------------------------------------------ */
.lt-sezione-home { padding: clamp(38px, 6vw, 72px) 0; }
.lt-sezione-home--alt { background: var(--barra-bg); }

.lt-titolo-home {
	font-family: var(--font-titoli);
	font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
	font-weight: var(--peso-titoli);
	letter-spacing: var(--spaziatura-titoli);
	color: var(--testo-forte);
	text-align: center;
	margin: 0 0 1.5em;
	text-wrap: balance;
}
.lt-titolo-home--sx { text-align: left; margin-bottom: .8em; }

/* ---------- Categorie ---------------------------------------------------- */
.lt-categorie { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.lt-categoria {
	display: grid; gap: 5px; padding: 24px;
	background: var(--superficie); border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande); color: var(--testo);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lt-categoria:hover { transform: translateY(-3px); border-color: var(--accento); box-shadow: var(--ombra-carta); text-decoration: none; }
.lt-categoria i { font-size: 1.7rem; color: var(--accento); }
.lt-categoria__nome { font-family: var(--font-ui); font-weight: 700; font-size: 1.08rem; color: var(--testo-forte); }
.lt-categoria__n {
	font-family: var(--font-ui); font-size: .74rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em; color: var(--accento);
}
.lt-categoria__desc { font-size: .89rem; line-height: 1.55; color: var(--testo-tenue); }

/* ---------- Filtri e schede --------------------------------------------- */
.lt-filtri { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.lt-filtro {
	font-family: var(--font-ui); font-size: .84rem; font-weight: 650;
	padding: 8px 16px; min-height: 38px;
	border: 1px solid var(--bordo); border-radius: 999px;
	background: var(--superficie); color: var(--testo-tenue); cursor: pointer;
	transition: all .16s ease;
}
.lt-filtro:hover { border-color: var(--accento); color: var(--accento); }
.lt-filtro.attivo { background: var(--accento); border-color: var(--accento); color: #fff; }

.lt-schede { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.lt-scheda {
	display: flex; flex-direction: column; overflow: hidden;
	background: var(--superficie); border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande); color: var(--testo);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lt-scheda:hover { transform: translateY(-3px); border-color: var(--accento); box-shadow: var(--ombra-carta); text-decoration: none; }
.lt-scheda[hidden] { display: none; }
.lt-scheda__img { display: block; aspect-ratio: 16 / 10; background: var(--superficie-2); overflow: hidden; }
/* "contain" e non "cover".
   Le immagini di questo sito non sono fotografie decorative: sono lavagne,
   grafici e schemi con dentro delle SCRITTE. Ritagliandole per riempire il
   riquadro sparivano pezzi di parola — "ANO CARTESIANO" per "Piano
   cartesiano", "uazione della CONFERENZA" per "L'equazione della
   circonferenza", "NUMERI COMPLESS" tagliato a meta'. Meglio due bordi grigi
   che un titolo mutilato. */
.lt-scheda__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lt-scheda__testo { display: grid; gap: 6px; padding: 15px 17px 19px; }
.lt-scheda__cat {
	font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .09em; color: var(--accento);
}
.lt-scheda__titolo {
	font-family: var(--font-titoli); font-weight: 650; line-height: 1.35;
	color: var(--testo-forte); font-size: .99rem;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.lt-vedi-tutto { text-align: center; margin: 30px 0 0; font-family: var(--font-ui); font-weight: 650; }

/* ---------- Due colonne -------------------------------------------------- */
.lt-duecolonne { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.lt-duecolonne p { line-height: 1.75; }
.lt-illustrazione img { width: 100%; height: auto; border-radius: var(--raggio-grande); }

.lt-elenco-check { list-style: none; padding: 0; margin: 1.4em 0 0; display: grid; gap: 11px; }
.lt-elenco-check li { position: relative; padding-left: 30px; line-height: 1.6; }
.lt-elenco-check li::before {
	content: ""; position: absolute; left: 0; top: .45em;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--accento);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 5.9l-4.2 5a.7.7 0 01-1 .05L4.2 8.7a.7.7 0 11.95-1l1.8 1.7 3.7-4.4a.7.7 0 111.05.9z'/%3E%3C/svg%3E") center/contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 100 16A8 8 0 008 0zm3.7 5.9l-4.2 5a.7.7 0 01-1 .05L4.2 8.7a.7.7 0 11.95-1l1.8 1.7 3.7-4.4a.7.7 0 111.05.9z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Contatti ----------------------------------------------------- */
.lt-contatti { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 52px); align-items: start; }
.lt-contatti .lt-form {
	background: var(--superficie); border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande); padding: clamp(20px, 3.5vw, 32px);
	box-shadow: var(--ombra-carta);
}
.lt-contatti textarea {
	width: 100%; font: inherit; font-size: 1rem; resize: vertical;
	color: var(--testo-forte); background: var(--superficie-2);
	border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 13px 14px;
}
.lt-contatti textarea:focus {
	outline: none; background: var(--superficie); border-color: var(--accento);
	box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

@media (max-width: 860px) {
	.lt-duecolonne, .lt-contatti { grid-template-columns: 1fr; }
	.lt-illustrazione { order: -1; }
}
@media (max-width: 575px) {
	.lt-schede { grid-template-columns: 1fr 1fr; gap: 12px; }
	.lt-scheda__testo { padding: 11px 12px 15px; }
	.lt-scheda__titolo { font-size: .9rem; -webkit-line-clamp: 4; }
	.lt-cerca .lt-btn--primario { width: 100%; }
}

/* =========================================================================
   COMMUNITY, COMMENTI, PAGINE DI SERVIZIO
   ========================================================================= */

/* ---------- Testata di sezione ------------------------------------------ */
.lt-testata {
	background: var(--hero-bg);
	color: var(--hero-testo);
	padding: clamp(30px, 5vw, 54px) 0;
}
.lt-testata h1 {
	font-family: var(--font-titoli);
	font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.4rem);
	font-weight: var(--peso-titoli);
	letter-spacing: var(--spaziatura-titoli);
	line-height: 1.15;
	color: var(--hero-testo);
	margin: 0;
	text-wrap: balance;
}
.lt-testata p { color: var(--hero-testo); opacity: .87; margin: .6em 0 0; max-width: 62ch; }
.lt-testata p strong { color: var(--hero-testo); }
.lt-testata--stretta .container { max-width: 760px; }
.lt-corpo-sezione { padding: clamp(26px, 4.5vw, 48px) 0 60px; }

/* ---------- Pallini utente ---------------------------------------------- */
.lt-pallino {
	width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
	background: var(--accento); color: #fff;
	display: inline-grid; place-items: center;
	font-family: var(--font-ui); font-size: 1.05rem; font-weight: 700; text-transform: uppercase;
	line-height: 1;
}
.lt-pallino--piccolo { width: 34px; height: 34px; font-size: .85rem; }
.lt-pallino img { width: 100%; height: 100%; object-fit: cover; }

.lt-badge {
	display: inline-block; margin: 0 6px;
	padding: 2px 8px; border-radius: 999px;
	background: var(--accento); color: #fff;
	font-family: var(--font-ui); font-size: .66rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .07em; vertical-align: middle;
}

.lt-firma { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.lt-firma > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lt-firma strong { color: var(--testo-forte); font-family: var(--font-ui); font-size: .93rem; }
.lt-firma time { color: var(--testo-tenue); font-size: .8rem; }

.lt-testo-utente { line-height: 1.7; word-break: break-word; overflow-wrap: anywhere; }
.lt-vuoto { color: var(--testo-tenue); padding: 18px 0; }
/* Il separatore fra autore e data era a opacita 0,5: contrasto 2,07 contro il
   minimo di 4,5. E un carattere piccolo, serve che si veda. */
.lt-punto { color: var(--testo-tenue); }

/* ---------- Numeri ------------------------------------------------------ */
.lt-numeri {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px; margin-bottom: 28px;
}
.lt-numeri > div {
	background: var(--superficie); border: 1px solid var(--bordo);
	border-radius: var(--raggio); padding: 16px; text-align: center;
}
.lt-numeri strong {
	display: block; font-family: var(--font-titoli);
	font-size: 1.7rem; font-weight: 700; color: var(--accento); line-height: 1.1;
}
.lt-numeri span {
	font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em; color: var(--testo-tenue);
}

/* ---------- Tessere ----------------------------------------------------- */
.lt-community-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 34px; }
.lt-tessera {
	display: grid; gap: 8px; align-content: start; padding: 26px;
	background: var(--superficie); border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande); color: var(--testo);
	transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lt-tessera:hover { transform: translateY(-3px); border-color: var(--accento); box-shadow: var(--ombra-carta); text-decoration: none; }
.lt-tessera i { font-size: 1.9rem; color: var(--accento); }
.lt-tessera h2, .lt-tessera h3 {
	font-family: var(--font-titoli); font-size: 1.12rem; font-weight: var(--peso-titoli);
	color: var(--testo-forte); margin: 0;
}
.lt-tessera p { font-size: .9rem; line-height: 1.6; color: var(--testo-tenue); margin: 0; }
.lt-tessera__azione { font-family: var(--font-ui); font-size: .87rem; font-weight: 700; color: var(--accento); margin-top: 4px; }
.lt-tessera--grande { grid-row: span 1; }
@media (min-width: 900px) { .lt-tessera--grande { grid-column: span 2; } }

/* ---------- Blocchi a due colonne --------------------------------------- */
.lt-due-colonne-community { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 860px) { .lt-due-colonne-community { grid-template-columns: 1fr; } }

.lt-blocco {
	background: var(--superficie); border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande); padding: 22px;
}
.lt-blocco__testa { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.lt-blocco__testa h2 {
	font-family: var(--font-titoli); font-size: 1.05rem; font-weight: var(--peso-titoli);
	color: var(--testo-forte); margin: 0;
}
/* "Tutte" e "Apri" erano bersagli da 32x22 e 26x22 pixel: parole corte, e
   quindi collegamenti minuscoli da centrare col dito. Il riquadro cliccabile
   ora arriva a 44 pixel di lato anche se la parola e' di cinque lettere. */
.lt-blocco__testa a {
	font-family: var(--font-ui); font-size: .82rem; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; min-width: 44px; padding: 0 6px; margin: -11px -6px;
}

.lt-riga-domanda, .lt-riga-chat {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 0; border-top: 1px solid var(--bordo); color: var(--testo);
}
.lt-riga-domanda:hover { text-decoration: none; }
.lt-riga-domanda:hover strong { color: var(--accento); }
.lt-riga-domanda__testo, .lt-riga-chat__testo { display: grid; gap: 2px; min-width: 0; flex: 1; }
.lt-riga-domanda__testo strong { font-size: .95rem; color: var(--testo-forte); line-height: 1.4; }
.lt-riga-domanda__testo small, .lt-riga-chat__testo span { font-size: .8rem; color: var(--testo-tenue); }
.lt-riga-chat__testo strong { font-size: .87rem; color: var(--testo-forte); }
.lt-riga-chat__testo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-conteggio {
	flex: 0 0 auto; min-width: 34px; text-align: center;
	background: var(--superficie-2); border: 1px solid var(--bordo); border-radius: var(--raggio);
	padding: 4px 8px; font-family: var(--font-ui); font-size: .85rem; font-weight: 700; color: var(--testo-tenue);
}

/* ---------- Domande e risposte ------------------------------------------ */
.lt-qa { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
@media (max-width: 980px) { .lt-qa { grid-template-columns: 1fr; } .lt-qa__form { order: -1; } }
.lt-card--sticky { position: sticky; top: calc(var(--h-header) + 16px); }

.lt-domanda {
	display: flex; gap: 18px; padding: 20px;
	background: var(--superficie); border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande); margin-bottom: 12px;
	transition: border-color .18s ease;
}
.lt-domanda:hover { border-color: var(--accento); }
.lt-domanda__voti { flex: 0 0 62px; text-align: center; }
.lt-domanda__voti strong {
	display: block; font-family: var(--font-titoli); font-size: 1.4rem;
	font-weight: 700; color: var(--accento); line-height: 1.1;
}
.lt-domanda__voti span { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--testo-tenue); }
.lt-domanda__corpo { min-width: 0; }
.lt-domanda h2 { font-family: var(--font-titoli); font-size: 1.1rem; font-weight: var(--peso-titoli); margin: 0 0 6px; line-height: 1.35; }
.lt-domanda h2 a { color: var(--testo-forte); }
.lt-domanda h2 a:hover { color: var(--accento); text-decoration: none; }
.lt-domanda__estratto { font-size: .9rem; color: var(--testo-tenue); line-height: 1.6; margin: 0 0 10px; }
.lt-domanda__meta { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--testo-tenue); flex-wrap: wrap; }

.lt-qa-dettaglio { max-width: 820px; }
.lt-domanda-testo { margin-bottom: 26px; }
.lt-titolo-risposte {
	font-family: var(--font-titoli); font-size: 1.2rem; font-weight: var(--peso-titoli);
	color: var(--testo-forte); margin: 0 0 16px;
}
.lt-risposta { display: flex; gap: 16px; margin-bottom: 14px; }
.lt-risposta__voto { flex: 0 0 auto; }
.lt-risposta__corpo { min-width: 0; flex: 1; }
.lt-voto {
	display: grid; place-items: center; gap: 2px;
	width: 52px; padding: 9px 0;
	background: var(--superficie-2); border: 1px solid var(--bordo);
	border-radius: var(--raggio); color: var(--testo-tenue);
	font-family: var(--font-ui); font-size: .85rem; font-weight: 700;
	cursor: pointer; transition: all .16s ease;
}
.lt-voto:hover { border-color: var(--accento); color: var(--accento); }
.lt-voto--dato { background: var(--accento); border-color: var(--accento); color: #fff; }
.lt-voto--spento { cursor: default; opacity: .65; }
.lt-rispondi { margin-top: 26px; }
.lt-rispondi h2, .lt-qa__form h2 {
	font-family: var(--font-titoli); font-size: 1.08rem; font-weight: var(--peso-titoli);
	color: var(--testo-forte); margin: 0 0 14px;
}

.lt-paginazione { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 20px; }
.lt-paginazione a {
	min-width: 38px; padding: 8px 12px; text-align: center;
	border: 1px solid var(--bordo); border-radius: var(--raggio);
	background: var(--superficie); color: var(--testo-tenue);
	font-family: var(--font-ui); font-size: .87rem; font-weight: 650;
}
.lt-paginazione a:hover { border-color: var(--accento); color: var(--accento); text-decoration: none; }
.lt-paginazione a.attiva { background: var(--accento); border-color: var(--accento); color: #fff; }

.lt-vuoto-grande {
	text-align: center; padding: 54px 22px;
	background: var(--superficie); border: 1px dashed var(--bordo); border-radius: var(--raggio-grande);
}
.lt-vuoto-grande i { font-size: 2.6rem; color: var(--accento); opacity: .6; }
.lt-vuoto-grande h2 { font-family: var(--font-titoli); font-size: 1.15rem; color: var(--testo-forte); margin: 12px 0 6px; }
.lt-vuoto-grande p { color: var(--testo-tenue); margin: 0; }

/* ---------- Chat -------------------------------------------------------- */
.lt-chat { max-width: 760px; margin: 0 auto; }
.lt-chat__finestra {
	height: min(58vh, 520px); overflow-y: auto; padding: 18px;
	background: var(--superficie); border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande) var(--raggio-grande) 0 0;
	scroll-behavior: smooth;
}
.lt-msg { display: flex; gap: 11px; margin-bottom: 14px; align-items: flex-start; }
.lt-msg__bolla {
	background: var(--superficie-2); border: 1px solid var(--bordo);
	border-radius: 4px var(--raggio) var(--raggio) var(--raggio);
	padding: 9px 13px; max-width: 78%; min-width: 0;
}
.lt-msg__testa { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; margin-bottom: 3px; }
.lt-msg__testa strong { font-family: var(--font-ui); font-size: .84rem; color: var(--testo-forte); }
.lt-msg__testa time { font-size: .72rem; color: var(--testo-tenue); }
.lt-msg__testo { font-size: .95rem; line-height: 1.55; word-break: break-word; overflow-wrap: anywhere; }
.lt-msg--mio { flex-direction: row-reverse; }
.lt-msg--mio .lt-msg__bolla {
	background: var(--accento); border-color: var(--accento); color: #fff;
	border-radius: var(--raggio) 4px var(--raggio) var(--raggio);
}
.lt-msg--mio .lt-msg__testa strong, .lt-msg--mio .lt-msg__testa time { color: #fff; opacity: .92; }
.lt-msg--mio .lt-badge { background: rgba(255,255,255,.25); }

.lt-chat__invio {
	display: flex; gap: 8px; padding: 12px;
	background: var(--superficie-2); border: 1px solid var(--bordo); border-top: 0;
	border-radius: 0 0 var(--raggio-grande) var(--raggio-grande);
}
.lt-chat__invio input {
	flex: 1; min-width: 0; font: inherit; font-size: 1rem;
	padding: 12px 14px; border: 1px solid var(--bordo);
	border-radius: var(--raggio); background: var(--superficie); color: var(--testo-forte);
}
.lt-chat__invio input:focus { outline: none; border-color: var(--accento); }
.lt-solo-desktop { display: none; }
@media (min-width: 620px) { .lt-solo-desktop { display: inline; } }

/* ---------- Commenti sotto gli articoli --------------------------------- */
.lt-commenti { padding: 0 0 clamp(30px, 5vw, 56px); }
/* Il riquadro dei commenti sta ora dentro la stessa colonna dell'articolo
   (container > row > col-lg-8), quindi non gli serve piu' una larghezza
   propria: quella la decide la griglia, come per il testo sopra. */
.lt-commenti__box {
	background: var(--superficie); border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande); padding: clamp(20px, 4vw, 36px);
	box-shadow: var(--ombra-carta);
}
.lt-commenti__titolo {
	font-family: var(--font-titoli); font-size: 1.2rem; font-weight: var(--peso-titoli);
	color: var(--testo-forte); margin: 0 0 18px;
	padding-bottom: 12px; border-bottom: 1px solid var(--bordo);
}
.lt-commento { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--bordo); }
.lt-commento:last-of-type { border-bottom: 0; }
.lt-commento__corpo { min-width: 0; flex: 1; }
.lt-elimina button {
	background: none; border: 0; cursor: pointer; line-height: 1;
	font-size: 1.3rem; color: var(--testo-tenue); padding: 0 6px; border-radius: 4px;
}
.lt-elimina button:hover { color: #b3261e; background: #fdeceb; }
.lt-nuovo-commento { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--bordo); }
.lt-nuovo-commento textarea, .lt-qa textarea, .lt-rispondi textarea {
	width: 100%; font: inherit; font-size: 1rem; resize: vertical;
	color: var(--testo-forte); background: var(--superficie-2);
	border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 13px 14px;
}
.lt-nuovo-commento textarea:focus, .lt-qa textarea:focus, .lt-rispondi textarea:focus {
	outline: none; background: var(--superficie); border-color: var(--accento);
}
.lt-label--nascosta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Invito a registrarsi ---------------------------------------- */
.lt-invito {
	background: var(--superficie-2); border: 1px solid var(--bordo);
	border-radius: var(--raggio); padding: 20px; margin-top: 18px;
}
.lt-invito p { margin: 0 0 12px; color: var(--testo-tenue); line-height: 1.6; }
.lt-invito p:last-child { margin-bottom: 0; }
.lt-invito strong { color: var(--testo-forte); }
.lt-invito__azioni { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Pagina di errore -------------------------------------------- */
.lt-errore { max-width: 860px; margin: 0 auto; text-align: center; }
.lt-errore__icona i { font-size: 3.4rem; color: var(--accento); opacity: .55; }
.lt-errore h2 {
	font-family: var(--font-titoli); font-size: 1.2rem; font-weight: var(--peso-titoli);
	color: var(--testo-forte); margin: 18px 0 20px;
}
.lt-errore__scelte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; text-align: left; }
.lt-errore__azione { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.lt-errore__nota { margin-top: 28px; }
.lt-codice { font-family: var(--font-citazione, monospace); font-size: .78rem; opacity: .7; }

/* ---------- Pagine di testo lungo (privacy, supporto) ------------------- */
.lt-testo-lungo { max-width: 74ch; margin: 0 auto; line-height: 1.75; }
.lt-testo-lungo h2 {
	font-family: var(--font-titoli); font-size: 1.15rem; font-weight: var(--peso-titoli);
	color: var(--testo-forte); margin: 2em 0 .6em;
}
.lt-testo-lungo h2:first-child { margin-top: 0; }

/* =========================================================================
   SEGNALAZIONI E MODERAZIONE
   ========================================================================= */

.lt-segnala {
	font-family: var(--font-ui); font-size: .74rem; font-weight: 650;
	color: var(--testo-tenue); text-transform: uppercase; letter-spacing: .05em;
	padding: 3px 8px; border-radius: 999px; border: 1px solid transparent;
	white-space: nowrap;
}
.lt-segnala:hover { color: #b3261e; border-color: #e6b4af; background: #fdeceb; text-decoration: none; }
.lt-azioni-riga { display: inline-flex; align-items: center; gap: 6px; }
.lt-msg__testa .lt-segnala { opacity: 0; transition: opacity .15s ease; }
.lt-msg:hover .lt-msg__testa .lt-segnala,
.lt-msg__testa .lt-segnala:focus-visible { opacity: 1; }
.lt-msg--mio .lt-segnala { display: none; }

.lt-facoltativo { font-weight: 400; color: var(--testo-tenue); }

.lt-scelte { border: 0; padding: 0; margin: 0; display: grid; gap: 9px; }
.lt-scelte legend { padding: 0; margin-bottom: 4px; }
.lt-scelte label { display: flex; align-items: center; gap: 9px; cursor: pointer; font-size: .95rem; }
.lt-scelte input[type=radio] { width: 18px; height: 18px; accent-color: var(--accento); flex: 0 0 auto; }

.lt-citazione-segnalata {
	margin: 0 0 20px; padding: 16px 18px;
	background: var(--superficie-2); border: 1px solid var(--bordo);
	border-left: 3px solid var(--accento); border-radius: 0 var(--raggio) var(--raggio) 0;
}
.lt-citazione-segnalata figcaption {
	font-size: .82rem; color: var(--testo-tenue); margin-bottom: 8px;
	display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.lt-citazione-segnalata blockquote {
	margin: 0; font-size: .95rem; line-height: 1.65;
	word-break: break-word; overflow-wrap: anywhere;
}

/* ---------- Barra della redazione nel pannello -------------------------- */
.lt-strisica-admin {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	padding: 16px 20px; margin-bottom: 24px;
	background: var(--superficie-2); border: 1px solid var(--accento);
	border-radius: var(--raggio);
}
.lt-strisica-admin > i { font-size: 1.6rem; color: var(--accento); }
.lt-strisica-admin > div { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.lt-strisica-admin strong { color: var(--testo-forte); font-family: var(--font-ui); }
.lt-strisica-admin span { font-size: .87rem; color: var(--testo-tenue); }

/* ---------- Navigazione a schede ---------------------------------------- */
.lt-schede-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.lt-schede-nav a {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 10px 16px; border-radius: var(--raggio);
	border: 1px solid var(--bordo); background: var(--superficie);
	font-family: var(--font-ui); font-size: .88rem; font-weight: 650; color: var(--testo-tenue);
}
.lt-schede-nav a:hover { border-color: var(--accento); color: var(--accento); text-decoration: none; }
.lt-schede-nav a.attiva { background: var(--accento); border-color: var(--accento); color: #fff; }
.lt-pallina {
	min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
	background: #b3261e; color: #fff; font-size: .72rem; font-weight: 700;
	display: inline-grid; place-items: center;
}
.lt-schede-nav a.attiva .lt-pallina { background: #fff; color: var(--accento); }

/* ---------- Scheda di segnalazione -------------------------------------- */
.lt-segnalazione { margin-bottom: 16px; }
.lt-segnalazione__testa { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.lt-segnalazione__testa time { font-size: .8rem; color: var(--testo-tenue); margin-left: auto; }
.lt-segnalazione__da { font-size: .88rem; color: var(--testo-tenue); margin: 0 0 14px; }
.lt-segnalazione__da strong { color: var(--testo-forte); }

.lt-etichetta {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	background: var(--superficie-2); border: 1px solid var(--bordo); color: var(--testo-tenue);
}
.lt-etichetta--spam       { background: #fff4e5; border-color: #f0d6ae; color: #8a5300; }
.lt-etichetta--offensivo  { background: #fdeceb; border-color: #f3c5c1; color: #8c2018; }
.lt-etichetta--personale  { background: #fdeceb; border-color: #f3c5c1; color: #8c2018; }
.lt-etichetta--copiato    { background: #eef4fa; border-color: #cfe0ef; color: #1f5f9e; }
.lt-etichetta--bloccato   { background: #fdeceb; border-color: #f3c5c1; color: #8c2018; }
.lt-tipo-contenuto {
	font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .07em; color: var(--accento);
}

.lt-azioni-mod { display: flex; gap: 8px; flex-wrap: wrap; }
.lt-azioni-mod .lt-btn { font-size: .85rem; padding: 9px 14px; min-height: 38px; }
.lt-btn--pericolo { border-color: #e6b4af; color: #8c2018; }
.lt-btn--pericolo:hover { background: #b3261e; border-color: #b3261e; color: #fff; }

/* ---------- Elenchi di moderazione -------------------------------------- */
.lt-tabella-mod {
	background: var(--superficie); border: 1px solid var(--bordo);
	border-radius: var(--raggio-grande); overflow: hidden;
}
.lt-riga-mod {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 18px; border-bottom: 1px solid var(--bordo);
}
.lt-riga-mod:last-child { border-bottom: 0; }
.lt-riga-mod--nascosta { background: var(--superficie-2); opacity: .68; }
.lt-riga-mod__testo { flex: 1; min-width: 0; }
.lt-riga-mod__testo strong { color: var(--testo-forte); font-family: var(--font-ui); font-size: .92rem; }
.lt-riga-mod__testo time { font-size: .78rem; color: var(--testo-tenue); margin-left: 7px; }
.lt-riga-mod__testo p {
	margin: 4px 0 0; font-size: .88rem; color: var(--testo-tenue); line-height: 1.5;
	word-break: break-word; overflow-wrap: anywhere;
}
.lt-riga-mod__azioni { flex: 0 0 auto; }
.lt-riga-mod .lt-tipo-contenuto { flex: 0 0 74px; }

@media (max-width: 640px) {
	.lt-riga-mod { flex-wrap: wrap; }
	.lt-riga-mod__azioni { width: 100%; }
	.lt-riga-mod__azioni .lt-btn { width: 100%; }
	.lt-segnalazione__testa time { margin-left: 0; width: 100%; }
}

/* Annunci nel corpo dell'articolo (riposizionati dalla sidebar) */
.lt-annuncio-inline {
	margin: 2em auto;
	max-width: var(--misura);
	padding: 8px 0;
	border-top: 1px solid var(--bordo);
	border-bottom: 1px solid var(--bordo);
	text-align: center;
	min-height: 100px;
}
.lt-annuncio-etichetta {
	display: block;
	font-family: var(--font-ui);
	font-size: .66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	/* Il colore andava bene, era l'opacita' a rovinarlo: 0.6 portava il
	   contrasto a 2,45 contro il minimo di 4,5, e la scritta "PUBBLICITÀ"
	   risultava illeggibile. Per legge quell'etichetta deve essere visibile:
	   serve a distinguere la pubblicita' dal contenuto. */
	color: var(--testo-tenue);
	margin-bottom: 6px;
}
.lt-annuncio-inline .adsbygoogle { min-height: 90px; }

/* =========================================================================
   MENU MOBILE — riscritto
   Il foglio vecchio lo lasciava com'era: pannello bianco stretto, voci
   minuscole, sottomenu con l'ombra sbagliata. Qui si sostituisce del tutto.
   ========================================================================= */

@media (max-width: 991.98px) {

	/* IL MENU CHIUSO NON DEVE VEDERSI.
	   Questa riga stava nel vecchio styles.css e non era stata portata qui
	   quando quel foglio e' stato tolto. Senza, sotto i 992px l'intero albero
	   del menu — voci, sottomenu, sotto-sottomenu — restava stampato nella
	   pagina, uno sopra l'altro, sotto la testata. Il pannello si apre
	   aggiungendo la classe .navbar-mobile, quindi qui si nasconde tutto
	   tranne quel caso. */
	.navbar:not(.navbar-mobile) > ul { display: none; }

	/* Il bottone che apre: area toccabile piena, non solo il carattere.
	   ATTENZIONE alle righe background/border/padding/appearance: e' un
	   <button>, e ogni browser gli mette da solo uno sfondo chiaro, un bordo e
	   gli angoli arrotondati. Senza azzerarli, sulla testata blu scuro compariva
	   un riquadro bianco con dentro i tre trattini, come un pezzo incollato
	   sopra. Non basta non dargli un colore: bisogna toglierglielo. */
	.mobile-nav-toggle {
		display: grid !important;
		place-items: center;
		width: 46px;
		height: 46px;
		font-size: 0 !important;          /* via il carattere "≡" originale */
		background: transparent;
		border: 0;
		padding: 0;
		-webkit-appearance: none;
		appearance: none;
		border-radius: var(--raggio);
		cursor: pointer;
		position: relative;
		z-index: 1002;
		transition: background .18s ease;
	}
	.mobile-nav-toggle:hover { background: rgba(255,255,255,.14); }
	.mobile-nav-toggle:focus { outline: none; }
	.mobile-nav-toggle:focus-visible { outline: 2px solid var(--header-testo-attivo); outline-offset: 2px; }

	/* Tre trattini disegnati, che diventano una X quando il menu e' aperto */
	.mobile-nav-toggle::before,
	.mobile-nav-toggle::after,
	.mobile-nav-toggle span.lt-barra {
		content: "";
		position: absolute;
		left: 12px;
		width: 22px;
		height: 2px;
		border-radius: 2px;
		background: var(--header-testo-attivo);
		transition: transform .25s ease, opacity .18s ease, top .25s ease;
	}
	.mobile-nav-toggle::before { top: 15px; }
	.mobile-nav-toggle span.lt-barra { top: 22px; }
	.mobile-nav-toggle::after  { top: 29px; }

	.navbar-mobile .mobile-nav-toggle::before { top: 22px; transform: rotate(45deg); }
	.navbar-mobile .mobile-nav-toggle::after  { top: 22px; transform: rotate(-45deg); }
	.navbar-mobile .mobile-nav-toggle span.lt-barra { opacity: 0; }

	/* Velo scuro dietro al pannello */
	.navbar-mobile {
		position: fixed;
		inset: 0;
		background: rgba(10, 20, 30, .55);
		backdrop-filter: blur(3px);
		-webkit-backdrop-filter: blur(3px);
		overflow: hidden;
		transition: none;
		z-index: 1000;
	}
	.navbar-mobile .mobile-nav-toggle {
		position: fixed;
		top: 10px;
		right: 12px;
	}

	/* Il pannello vero e proprio: entra da destra, a tutta altezza */
	.navbar-mobile ul {
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: min(88vw, 380px);
		margin: 0;
		padding: calc(var(--h-header) + 8px) 0 24px;
		background: var(--menu-bg);
		box-shadow: -12px 0 40px rgba(0,0,0,.3);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		animation: lt-entra-menu .22s ease-out;
	}
	@keyframes lt-entra-menu { from { transform: translateX(100%); } to { transform: translateX(0); } }
	@media (prefers-reduced-motion: reduce) {
		.navbar-mobile ul { animation: none; }
	}

	/* Voci di primo livello: grandi, separate, comode da toccare */
	.navbar-mobile > ul > li { border-bottom: 1px solid var(--bordo); }
	.navbar-mobile > ul > li:last-child { border-bottom: 0; }

	.navbar-mobile a,
	.navbar-mobile a:focus {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 15px 22px !important;
		min-height: 52px;
		font-family: var(--font-ui);
		font-size: 1.02rem;
		font-weight: 600;
		color: var(--menu-testo);
		line-height: 1.3;
	}
	.navbar-mobile a:hover,
	.navbar-mobile li:hover > a,
	.navbar-mobile .active { color: var(--accento); background: var(--menu-hover); }

	/* La freccetta del sottomenu ruota quando si apre */
	.navbar-mobile .dropdown > a > i {
		font-size: 1rem;
		color: var(--testo-tenue);
		transition: transform .22s ease;
		flex: 0 0 auto;
	}
	.navbar-mobile .dropdown > .dropdown-active + a > i,
	.navbar-mobile .dropdown > a.aperto > i { transform: rotate(90deg); }

	/* Sottomenu: rientrato, su fondo tenue, senza ombre inutili */
	.navbar-mobile .dropdown ul {
		position: static;
		display: none;
		width: auto;
		margin: 0;
		padding: 4px 0 8px;
		background: var(--superficie-2);
		box-shadow: none;
		border: 0;
		border-top: 1px solid var(--bordo);
		animation: none;
		overflow: visible;
	}
	.navbar-mobile .dropdown > .dropdown-active { display: block; }

	.navbar-mobile .dropdown ul li { min-width: 0; }
	.navbar-mobile .dropdown ul a {
		padding: 12px 22px 12px 40px !important;
		min-height: 46px;
		font-size: .96rem;
		font-weight: 500;
		color: var(--testo);
		position: relative;
	}
	.navbar-mobile .dropdown ul a::before {
		content: "";
		position: absolute;
		left: 24px;
		top: 50%;
		width: 6px;
		height: 6px;
		margin-top: -3px;
		border-radius: 50%;
		background: var(--bordo);
	}
	.navbar-mobile .dropdown ul a:hover { color: var(--accento); background: var(--menu-hover); }
	.navbar-mobile .dropdown ul a:hover::before { background: var(--accento); }

	/* Sotto-sottomenu (Categorie > Scuola > Italiano) */
	.navbar-mobile .dropdown .dropdown ul a { padding-left: 58px !important; font-size: .92rem; }
	.navbar-mobile .dropdown .dropdown ul a::before { left: 42px; }

	/* Il bottone Accedi diventa un pulsante pieno, non una voce fra le altre */
	.navbar-mobile .lt-accedi { padding: 16px 22px; border-bottom: 0 !important; }
	.navbar-mobile .lt-accedi > a {
		justify-content: center;
		background: var(--accento);
		border: 0 !important;
		border-radius: var(--raggio) !important;
		color: #fff !important;
		margin: 0 !important;
		padding: 14px 20px !important;
		font-weight: 700;
	}
	.navbar-mobile .lt-accedi > a:hover { background: var(--accento-scuro); }

	/* Utente connesso: il pallino con l'iniziale resta visibile */
	.navbar-mobile .lt-utente > a { font-weight: 700; }
	.navbar-mobile .lt-utente__pallino { flex: 0 0 auto; }

	/* Quando il menu e' aperto la pagina sotto non deve scorrere */
	body:has(.navbar-mobile) { overflow: hidden; }
}

/* Su schermi molto stretti il pannello occupa tutto */
@media (max-width: 400px) {
	.navbar-mobile ul { width: 100vw; }
	.navbar-mobile a, .navbar-mobile a:focus { padding: 14px 18px !important; }
	.navbar-mobile .dropdown ul a { padding-left: 34px !important; }
	.navbar-mobile .dropdown ul a::before { left: 18px; }
}

/* ---------- Colonna di destra --------------------------------------------
   Sostituisce i tre blocchi che prima stampavano HTML gia' scritto dentro
   file di testo, con gli stili nell'attributo style. */
.lt-lato {
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 18px 18px 14px;
	margin: 0 0 18px;
}
.lt-lato__titolo {
	font-family: var(--font-ui);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--testo-tenue);
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--bordo);
}
.lt-lato__vuoto { font-size: .9rem; color: var(--testo-tenue); margin: 0; line-height: 1.6; }
.lt-lato--annuncio { padding: 0; border: 0; background: none; }
.lt-lato--appiccicato { position: sticky; top: 76px; }

/* classifica utenti */
.lt-classifica { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.lt-classifica li + li { border-top: 1px solid var(--bordo); }
.lt-classifica a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 4px;
	color: var(--testo-forte);
	text-decoration: none;
	border-radius: 8px;
}
.lt-classifica a:hover { background: var(--barra-bg); color: var(--accento); text-decoration: none; }
.lt-classifica__posto {
	flex: 0 0 20px;
	font-family: var(--font-ui);
	font-size: .8rem;
	font-weight: 700;
	color: var(--testo-tenue);
	text-align: center;
}
/* i primi tre si notano, senza coppe né medaglie */
.lt-classifica li:nth-child(1) .lt-classifica__posto { color: var(--accento); }
.lt-classifica li:nth-child(2) .lt-classifica__posto,
.lt-classifica li:nth-child(3) .lt-classifica__posto { color: var(--testo-forte); }
.lt-classifica__nome {
	flex: 1 1 auto;
	font-size: .92rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lt-classifica__punti {
	flex: 0 0 auto;
	font-family: var(--font-ui);
	font-size: .78rem;
	font-weight: 700;
	color: var(--testo-tenue);
	background: var(--barra-bg);
	border-radius: 999px;
	padding: 2px 9px;
}

/* elenchi articoli e commenti */
.lt-lato__elenco { list-style: none; margin: 0; padding: 0; }
.lt-lato__elenco li + li { border-top: 1px solid var(--bordo); }
.lt-lato__elenco a {
	display: block;
	padding: 10px 4px;
	color: var(--testo-forte);
	text-decoration: none;
	border-radius: 8px;
}
.lt-lato__elenco a:hover { background: var(--barra-bg); text-decoration: none; }
.lt-lato__elenco a:hover .lt-lato__titoletto { color: var(--accento); }
.lt-lato__categoria {
	display: block;
	font-family: var(--font-ui);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--accento);
	margin-bottom: 3px;
}
.lt-lato__titoletto { display: block; font-size: .9rem; line-height: 1.42; }
.lt-lato__chi { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.lt-lato__chi strong { font-size: .85rem; }
.lt-lato__chi .lt-pallino { width: 22px; height: 22px; font-size: .72rem; }
.lt-lato__testo { display: block; font-size: .88rem; color: var(--testo); line-height: 1.45; }
.lt-lato__dove {
	display: block;
	font-size: .76rem;
	color: var(--testo-tenue);
	margin-top: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---------- Profilo pubblico --------------------------------------------- */
.lt-profilo { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; }
.lt-profilo__scheda {
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 26px 22px;
	text-align: center;
	position: sticky;
	top: 84px;
}
.lt-avatar--grande { width: 92px; height: 92px; font-size: 2.4rem; margin: 0 auto 14px; }
.lt-profilo__nome { font-size: 1.3rem; margin: 0 0 4px; word-break: break-word; }
.lt-profilo__data { font-size: .84rem; color: var(--testo-tenue); margin: 0 0 16px; }
.lt-distintivo {
	display: inline-block;
	font-family: var(--font-ui);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #fff;
	background: var(--accento);
	border-radius: 999px;
	padding: 3px 11px;
	margin: 0 0 10px;
}
/* Il profilo utente aveva lo STESSO nome di stile dei contatori della
   community. Essendo scritto dopo nel foglio, vinceva lui: i quattro numeri
   della community diventavano quattro riquadri giganti 2x2. Nome distinto. */
.lt-numeri--profilo {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--bordo);
	border: 1px solid var(--bordo);
	border-radius: 10px;
	overflow: hidden;
	margin: 0 0 16px;
	padding: 0;
}
.lt-numeri--profilo li { background: var(--superficie); padding: 12px 6px; }
.lt-numeri--profilo strong { display: block; font-size: 1.3rem; font-weight: 700; color: var(--testo-forte); }
.lt-numeri--profilo span { font-size: .74rem; color: var(--testo-tenue); text-transform: uppercase; letter-spacing: .04em; }
.lt-profilo__spiega { font-size: .8rem; color: var(--testo-tenue); line-height: 1.6; margin: 0 0 14px; text-align: left; }

.lt-blocco { margin: 0 0 34px; }
.lt-blocco > h2 {
	font-size: 1.06rem;
	margin: 0 0 14px;
	padding-bottom: 9px;
	border-bottom: 2px solid var(--bordo);
}
.lt-elenco-attivita { list-style: none; margin: 0; padding: 0; }
.lt-elenco-attivita li {
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 15px 17px;
	margin-bottom: 11px;
}
.lt-elenco-attivita > li > a { font-weight: 600; color: var(--testo-forte); }
.lt-elenco-attivita > li > a:hover { color: var(--accento); }
.lt-estratto { font-size: .9rem; color: var(--testo); margin: 7px 0 0; line-height: 1.55; }
.lt-elenco-attivita .lt-meta { font-size: .8rem; color: var(--testo-tenue); margin: 7px 0 0; }

@media (max-width: 991.98px) {
	.lt-profilo { grid-template-columns: 1fr; gap: 22px; }
	.lt-profilo__scheda { position: static; }
	.lt-numeri--profilo { grid-template-columns: repeat(4, 1fr); }
	.lt-profilo__spiega { text-align: center; }
}
@media (max-width: 480px) {
	.lt-numeri--profilo { grid-template-columns: 1fr 1fr; }
}

/* Contenitore dell'immagine di caricamento nelle pagine di categoria.
   Era <div align="center">: attributo di presentazione, tolto da HTML5 e
   ignorato dai lettori di schermo. Stessa resa, markup valido. */
.lt-caricamento { text-align: center; }

/* ---------- Pagina di ricerca -------------------------------------------- */
/* Il modulo era largo 640px e i risultati sotto 1300: due blocchi allineati a
   sinistra ma di larghezza diversa, con le righe dei risultati vuote per meta'
   perche' dentro c'e' solo la miniatura e il titolo. Ora hanno la stessa
   misura, cosi' la colonna e' una sola. */
.lt-cerca--pagina { margin: 0 0 28px; max-width: 820px; }
.lt-risultati { display: grid; gap: 12px; max-width: 820px; }
.lt-risultato {
	display: flex;
	gap: 14px;
	align-items: center;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	padding: 12px 14px;
	color: var(--testo-forte);
	text-decoration: none;
}
.lt-risultato:hover { border-color: var(--accento); text-decoration: none; }
.lt-risultato:hover .lt-risultato__titolo { color: var(--accento); }
.lt-risultato__img { flex: 0 0 78px; }
.lt-risultato__img img { width: 78px; height: 58px; object-fit: contain; background: var(--superficie-2); border-radius: 8px; display: block; }
.lt-risultato__testo { flex: 1 1 auto; min-width: 0; }
.lt-risultato__cat {
	display: block;
	font-family: var(--font-ui);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--accento);
	margin-bottom: 3px;
}
.lt-risultato__titolo { display: block; font-weight: 600; line-height: 1.4; }
.lt-risultato__meta { display: block; font-size: .78rem; color: var(--testo-tenue); margin-top: 4px; }
.lt-risultato__dentro { color: var(--accento); }
.lt-nota-ricerca { font-size: .84rem; color: var(--testo-tenue); margin: 20px 0 0; }
.lt-suggerimenti { max-width: 640px; }
.lt-suggerimenti h2 { font-size: 1.05rem; margin: 0 0 12px; }
.lt-suggerimenti ul { list-style: none; padding: 0; margin: 0; }
.lt-suggerimenti li { padding: 9px 0; border-bottom: 1px solid var(--bordo); font-size: .92rem; color: var(--testo-tenue); }
.lt-suggerimenti li a { font-weight: 600; }
.lt-filtro span { opacity: .6; font-size: .85em; margin-left: 3px; }

@media (max-width: 520px) {
	.lt-risultato__img { flex-basis: 58px; }
	.lt-risultato__img img { width: 58px; height: 44px; }
}

/* ---------- Ricerca nella testata ----------------------------------------
   Prima nessuna delle 594 pagine aveva un campo di ricerca: per cercare
   bisognava tornare in home. */
.lt-solo-lettori {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Il campo vive in DUE posti con due sfondi opposti: nella testata, che e'
   blu scuro, e dentro il pannello del telefono, che e' bianco. Al primo
   tentativo gli avevo dato lo sfondo bianco delle superfici della pagina: sulla
   testata scura diventava un rettangolo bianco appiccicato sopra, che non
   c'entrava niente col resto. Qui i due casi sono trattati separatamente.

   Sulla testata: un unico contenitore a pillola, semitrasparente, con la lente
   dentro. Non due riquadri accostati. */
.lt-cerca-testata {
	display: flex;
	align-items: center;
	/* Aggancio per la tendina dei suggerimenti, che si appoggia qui sotto. */
	position: relative;
	background: rgba(255, 255, 255, .10);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	padding: 0 4px 0 0;
	transition: background .18s ease, border-color .18s ease;
}
.lt-cerca-testata:focus-within {
	background: rgba(255, 255, 255, .16);
	border-color: rgba(255, 255, 255, .38);
}
.lt-cerca-testata input {
	width: 150px;
	font-family: var(--font-ui);
	font-size: .86rem;
	padding: 8px 6px 8px 15px;
	border: 0;
	border-radius: 999px 0 0 999px;
	background: transparent;
	color: var(--header-testo-attivo);
	transition: width .18s ease;
}
.lt-cerca-testata input::placeholder { color: var(--header-testo); opacity: .85; }
.lt-cerca-testata input:focus { outline: none; width: 210px; }
.lt-cerca-testata input::-webkit-search-cancel-button { cursor: pointer; filter: invert(1) opacity(.6); }
.lt-cerca-testata button {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--header-testo);
	cursor: pointer;
	transition: color .18s ease, background .18s ease;
}
.lt-cerca-testata button:hover { color: var(--header-testo-attivo); background: rgba(255, 255, 255, .14); }

@media (max-width: 991.98px) {
	/* Nel pannello del telefono la ricerca sta in cima, a tutta larghezza:
	   e' la prima cosa che serve. Qui lo sfondo e' bianco, quindi il campo
	   torna ai colori normali della pagina. */
	.navbar-mobile .lt-voce-cerca { padding: 14px 18px 10px; border-bottom: 1px solid var(--bordo); }
	.navbar-mobile .lt-cerca-testata {
		background: var(--barra-bg);
		border-color: var(--bordo);
		padding: 0 5px 0 0;
	}
	.navbar-mobile .lt-cerca-testata:focus-within { background: var(--superficie); border-color: var(--accento); }
	.navbar-mobile .lt-cerca-testata input {
		width: 100%; flex: 1 1 auto;
		font-size: 1rem; padding: 12px 6px 12px 16px;
		color: var(--testo-forte);
	}
	.navbar-mobile .lt-cerca-testata input:focus { width: 100%; }
	.navbar-mobile .lt-cerca-testata input::placeholder { color: var(--testo-tenue); opacity: 1; }
	.navbar-mobile .lt-cerca-testata input::-webkit-search-cancel-button { filter: none; }
	.navbar-mobile .lt-cerca-testata button { height: 44px; width: 44px; color: var(--testo-tenue); }
	.navbar-mobile .lt-cerca-testata button:hover { color: var(--accento); background: transparent; }

	/* Fuori dal pannello aperto non deve comparire nella barra. */
	.navbar:not(.navbar-mobile) .lt-voce-cerca { display: none; }
}

/* =========================================================================
   REGOLE EREDITATE DAL VECCHIO styles.css
   =========================================================================
   Fino a oggi il sito caricava DUE fogli di stile: prima styles.css, poi
   questo. Il tema nuovo non cancellava il vecchio, gli si sovrapponeva: alcune
   regole vecchie restavano al comando, e ogni modifica al tema nuovo andava
   combattuta contro codice che nessuno leggeva piu'.

   Prima di togliere styles.css ho misurato, elemento per elemento, che cosa
   cambiava spegnendolo. Quello che si rompeva davvero e' riportato qui sotto,
   riscritto con le variabili del tema. Il resto non serviva.

   Le uniche differenze volute rispetto a prima: il contenitore dell'articolo e
   l'ombra ora prendono i valori del tema nuovo (che prima erano lettera morta),
   e il pulsante "torna su" prende il colore del tema invece dell'azzurrino.
   ========================================================================= */

/* --- Barra di navigazione: senza questa il menu del desktop si sfascia ---
       Vale SOLO da 992px in su. Senza questo limite la disposizione in fila
       vinceva anche dentro il pannello del telefono (arriva dopo nel file, a
       parita di specificita), e la ricerca li dentro si riduceva a 45px. */
@media (min-width: 992px) {
.navbar ul {
	margin: 0;
	padding: 0;
	display: flex;
	list-style: none;
	align-items: center;
}
.navbar a, .navbar a:focus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 0 10px 30px;
	font-family: var(--font-ui);
	font-size: .875rem;
	color: var(--header-testo);
	white-space: nowrap;
}
.navbar a i, .navbar a:focus i { font-size: 12px; line-height: 0; margin-left: 5px; }
.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a { color: var(--header-testo-attivo); }
.navbar .dropdown ul { display: block; position: absolute; left: 14px; top: calc(100% + 30px); margin: 0; padding: 10px 0; z-index: 99; opacity: 0; visibility: hidden; background: var(--menu-bg); box-shadow: var(--ombra-header); transition: .3s; border-radius: var(--raggio); }
.navbar .dropdown ul li { min-width: 200px; }
.navbar .dropdown ul a { padding: 10px 20px; font-size: .875rem; color: var(--menu-testo); }
.navbar .dropdown ul a:hover, .navbar .dropdown ul li:hover > a { color: var(--accento); }
.navbar .dropdown:hover > ul { opacity: 1; top: 100%; visibility: visible; }
.navbar .dropdown .dropdown ul { top: 0; left: calc(100% - 30px); visibility: hidden; }
.navbar .dropdown .dropdown:hover > ul { opacity: 1; top: 0; left: 100%; visibility: visible; }
}

/* --- Il pulsante del menu: su schermo largo NON deve vedersi ------------- */
.mobile-nav-toggle { display: none; cursor: pointer; }

/* --- Briciole di pane: senza flex vanno a capo una per riga -------------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.breadcrumbs ol li + li { padding-left: 10px; }
.breadcrumbs ol li + li::before { display: inline-block; padding-right: 10px; color: var(--testo-tenue); content: "/"; }

/* --- Torna su: senza position fixed finisce in fondo alla pagina --------- */
.back-to-top {
	position: fixed;
	visibility: hidden;
	opacity: 0;
	right: 15px;
	bottom: 15px;
	z-index: 99999;
	width: 42px;
	height: 42px;
	border-radius: var(--raggio);
	background: var(--accento);
	transition: all .3s;
	/* Ora e' un <button>: senza questi azzeramenti il browser ci mette il suo
	   bordo grigio e il suo sfondo di sistema, come era gia' successo con il
	   bottone del menu sul telefono. */
	border: 0;
	padding: 0;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.back-to-top:focus-visible { outline: 3px solid var(--hero-testo); outline-offset: 2px; }
.back-to-top i { font-size: 24px; color: #fff; line-height: 0; }
.back-to-top:hover { background: var(--accento-scuro); }
.back-to-top.active { visibility: visible; opacity: 1; }

/* --- Testata e pie' di pagina -------------------------------------------- */
#header { height: var(--h-header); z-index: 997; transition: all .3s; }
#footer { font-size: .875rem; }
#footer .copyright { text-align: center; }
#footer .credits { padding-top: 10px; text-align: center; font-size: .8125rem; color: var(--footer-testo); }
/* Il collegamento alla privacy era un bersaglio di 85x17 pixel: sul telefono,
   con il polpastrello, quei 17 pixel di altezza sono meno di mezzo centimetro.
   Le linee guida ne chiedono almeno 44. */
#footer .credits a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 12px;
}

/* --- Campo di ricerca dentro le pagine di categoria ---------------------- */
.categorySearch {
	width: 100%;
	font-family: var(--font-ui);
	font-size: 1rem;
	padding: 12px 16px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--superficie);
	color: var(--testo-forte);
}
.categorySearch:focus { outline: none; border-color: var(--accento); }

/* ---------- Navigazione dentro una serie (canti, lezioni) ---------------- */
.lt-serie {
	margin: 34px 0 0;
	padding: 18px 20px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
}
.lt-serie__dove { margin: 0 0 14px; font-size: .86rem; }
.lt-serie__dove a { font-weight: 600; }
.lt-serie__dove span { color: var(--testo-tenue); }
.lt-serie__frecce { display: flex; gap: 12px; justify-content: space-between; }
.lt-serie__frecce > a {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	color: var(--testo-forte);
	text-decoration: none;
	min-width: 0;
}
.lt-serie__frecce > a:hover { border-color: var(--accento); text-decoration: none; }
.lt-serie__frecce > a:hover strong { color: var(--accento); }
.lt-serie__frecce span { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-tenue); }
.lt-serie__frecce strong { font-size: .96rem; }
.lt-serie__succ { text-align: right; }
.lt-serie__prec::before { content: "← "; color: var(--testo-tenue); }
.lt-serie__succ strong::after { content: " →"; color: var(--testo-tenue); }
.lt-serie__vuoto { flex: 1 1 0; }
@media (max-width: 520px) {
	.lt-serie__frecce { flex-direction: column; }
	.lt-serie__succ { text-align: left; }
}

/* ---------- Indice dell'opera (Divina Commedia) --------------------------- */
.lt-opera { display: grid; gap: 34px; }
.lt-cantica h2 { font-size: 1.3rem; margin: 0 0 6px; }
.lt-cantica__testo { color: var(--testo-tenue); font-size: .92rem; margin: 0 0 16px; max-width: 62ch; line-height: 1.6; }
.lt-canti {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
	gap: 8px;
}
.lt-canti li { margin: 0; }
.lt-canti a, .lt-canti span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	font-family: var(--font-ui);
	font-size: .9rem;
	font-weight: 600;
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	background: var(--superficie);
	color: var(--testo-forte);
	text-decoration: none;
}
.lt-canti a:hover { border-color: var(--accento); color: var(--accento); text-decoration: none; }
.lt-canti span { color: var(--testo-tenue); opacity: .45; cursor: not-allowed; }

/* =========================================================================
   STAMPA
   =========================================================================
   Nessuno dei fogli di stile prevedeva la stampa. Chi stampava una parafrasi
   per portarla in classe si portava dietro menu, colonna laterale, due
   riquadri pubblicitari, due annunci dentro il testo, i commenti e il pulsante
   "torna su". Per uno studente questo vale piu' di meta' delle funzioni nuove.
   ========================================================================= */
@media print {
	/* Via tutto quello che non e' il contenuto. */
	#header, .breadcrumbs, .col-lg-4, .lt-lato, .lt-lato--annuncio, .lt-lato--appiccicato,
	.back-to-top, .lt-commenti, .lt-serie, #footer, .adsbygoogle, ins.adsbygoogle,
	.lt-cerca, .lt-cerca-testata, .lt-filtri, .categorySearch, #toDisplay,
	.navbar, .mobile-nav-toggle, iframe, .video-wrap, script, noscript {
		display: none !important;
	}

	/* Il testo occupa tutta la pagina. */
	body { background: #fff !important; color: #000 !important; font-size: 11.5pt; line-height: 1.45; }
	#main, .container, .portfolio-details, .col-lg-8, .portfolio-info, .lt-corpo-sezione {
		width: auto !important; max-width: none !important;
		margin: 0 !important; padding: 0 !important;
		box-shadow: none !important; border: 0 !important; background: #fff !important;
	}

	h1, h1.titolo-articolo { font-size: 17pt; margin: 0 0 .5em; }
	h2, .titolo-sezione { font-size: 13pt; margin: 1.1em 0 .4em; }
	h3 { font-size: 12pt; }
	/* Un titolo non deve restare da solo in fondo al foglio. */
	h1, h2, h3, .titolo-sezione { page-break-after: avoid; break-after: avoid; }
	p, li, tr { page-break-inside: avoid; break-inside: avoid; orphans: 3; widows: 3; }

	/* Le tabelle testo/parafrasi sono la ragione per cui si stampa: devono
	   restare affiancate e leggibili, e ripetere l'intestazione a ogni foglio. */
	.tabella-scroll { overflow: visible !important; }
	table { width: 100% !important; border-collapse: collapse; font-size: 10.5pt; }
	thead { display: table-header-group; }
	td, th { vertical-align: top; padding: 4pt 6pt; border-bottom: .5pt solid #ccc; }
	td:first-child { width: 50%; }

	img { max-width: 100% !important; page-break-inside: avoid; }
	#logoHome { display: none !important; }     /* l'immagine di copertina non serve su carta */

	a { color: #000 !important; text-decoration: none; }
	/* Sulla carta un collegamento e' inutile se non si legge dove porta: qui
	   l'indirizzo viene stampato accanto. Non per i link interni all'indice
	   della pagina, che sulla carta non hanno senso. */
	.portfolio-info a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; }
	.portfolio-info a[href^="#"]::after { content: ""; }

	@page { margin: 1.6cm 1.4cm; }
}

/* =========================================================================
   DUE REGOLE DI BASE CHE STAVANO NEL VECCHIO styles.css
   =========================================================================
   Vengono da "img { width: 100% }" del foglio vecchio, e la loro assenza si
   vedeva su circa 594 pagine: sul telefono la pagina scorreva in orizzontale.
   ========================================================================= */

/* Nessuna immagine puo' essere piu' larga del suo contenitore. L'immagine di
   copertina degli articoli e' 623px: su uno schermo da 375px sporgeva fuori e
   trascinava con se' tutta la pagina. */
img { max-width: 100%; height: auto; }
#logoHome { width: 100%; }

/* Il contenitore delle tabelle si chiamava "scorrevole" ma non scorreva: gli
   mancava proprio la riga che lo fa scorrere. Le tabelle testo/parafrasi hanno
   una larghezza minima di 32em (circa 512px) per restare leggibili a due
   colonne, quindi su un telefono DEVONO poter scorrere dentro il loro riquadro
   invece di allargare la pagina. */
.tabella-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =========================================================================
   CORREZIONI TROVATE GUARDANDO LE SCHERMATE
   =========================================================================
   Difetti che nessuna misura numerica avrebbe segnalato: le dimensioni erano
   giuste, i contrasti calcolati sui colori dichiarati pure. Si vedevano solo
   guardando la pagina disegnata.
   ========================================================================= */

/* 1. La X per chiudere il menu era BIANCA SU PANNELLO BIANCO: invisibile.
      Il colore andava bene sulla testata scura, non dentro il pannello. */
@media (max-width: 991.98px) {
	.navbar-mobile .mobile-nav-toggle::before,
	.navbar-mobile .mobile-nav-toggle::after {
		background: var(--testo-forte);
	}
	.navbar-mobile .mobile-nav-toggle:hover { background: var(--barra-bg); }
}

/* 2. Il pulsante "Cerca" bianco e' pensato per l'intestazione blu della home,
      dove risalta. Nella pagina dei risultati lo sfondo e' chiaro: li' un
      pulsante bianco su fondo chiaro non si distingue da un riquadro vuoto.
      Torna del colore del tema. */
.lt-cerca--pagina .lt-btn--primario {
	background: var(--accento);
	border-color: var(--accento);
	color: #fff;
}
.lt-cerca--pagina .lt-btn--primario:hover {
	background: var(--accento-scuro);
	border-color: var(--accento-scuro);
	color: #fff;
}
.lt-cerca--pagina input {
	border: 1px solid var(--bordo);
	background: var(--superficie);
	color: var(--testo-forte);
}
.lt-cerca--pagina input:focus { outline: none; border-color: var(--accento); }

/* 3. Sulle briciole di pane del telefono il titolo comparivа DUE volte: una
      come etichetta lunga a sinistra (quattro righe) e una nel percorso a
      destra. Sul telefono resta solo il percorso. */
@media (max-width: 767.98px) {
	.breadcrumbs .lt-briciola { display: none; }
	.breadcrumbs ol { font-size: .78rem; }
	.breadcrumbs ol li:last-child {
		/* "max-width: 100%" da solo non bastava: dentro un contenitore flessibile
		   una voce non si restringe mai sotto la larghezza del proprio contenuto
		   (min-width vale "auto" di suo). Con un titolo lungo — per esempio la
		   poesia "Ho sceso, dandoti il braccio..." — la voce restava larga come
		   il titolo intero e allargava la pagina di 244 pixel, costringendo a
		   scorrere di lato. Le due righe qui sotto le permettono di stringersi
		   e di tagliare con i puntini. */
		min-width: 0;
		flex: 0 1 auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* La barra delle briciole tiene l'etichetta a sinistra e il percorso a destra:
   con un titolo lungo le due cose si toccavano. */
.breadcrumbs .d-flex { gap: 16px; }
.breadcrumbs .lt-briciola { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumbs ol { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }

/* 4. Testo scuro dentro le zone scure.
      La regola generale "strong { color: var(--testo-forte) }" e' giusta sulla
      pagina, che e' chiara, ma il pie' di pagina e la testata hanno lo sfondo
      blu scuro: li' dentro quel colore diventa testo scuro su fondo scuro, cioe'
      invisibile. Era il motivo per cui nel pie' di pagina si leggeva
      "© 2026 · Tutti i diritti riservati" con un buco al posto di "Life Tips".
      Nelle zone scure il grassetto prende il colore del testo che lo circonda. */
#footer strong, #footer b,
#header strong, #header b,
.navbar strong, .navbar b { color: inherit; }
#footer .copyright strong { color: var(--header-testo-attivo, #fff); }

/* =========================================================================
   CORREZIONI DAL COLLAUDO
   ========================================================================= */

/* Aree da toccare col dito troppo piccole (37-41px). Sotto i 44px il dito
   sbaglia bersaglio: vale per le pillole delle scorciatoie e per i filtri
   della home. */
@media (max-width: 991.98px) {
	.lt-hero__scorciatoie a,
	.lt-filtro,
	.lt-filtri > * {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* Riquadro pubblicitario che non viene riempito.
   Quando Google non ha un annuncio da mostrare NON toglie il riquadro: gli
   scrive dentro data-ad-status="unfilled" e gli lascia l'altezza calcolata,
   che nella colonna di destra vale circa 280 pixel. In pagina restavano tre
   buchi bianchi da 280-320 pixel, e nell'articolo un riquadro incorniciato con
   sopra la scritta PUBBLICITA' e sotto il nulla.
   La regola di prima (min-height: 0) non bastava: l'altezza che va tolta e'
   quella scritta da Google nell'attributo style, e min-height non la tocca. */
.lt-lato--annuncio:empty,
.lt-lato--appiccicato:empty { display: none; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.lt-lato--annuncio, .lt-lato--appiccicato { min-height: 0; }
/* Tolto l'annuncio resta il margine del contenitore: si toglie anche quello. */
.lt-lato--annuncio:has(ins[data-ad-status="unfilled"]),
.lt-lato--appiccicato:has(ins[data-ad-status="unfilled"]) { margin: 0; display: none; }
.lt-annuncio-inline:has(ins[data-ad-status="unfilled"]) { display: none; }

/* Messaggio delle sezioni ancora senza articoli: prima la pagina mostrava solo
   il titolo e una casella di ricerca, senza spiegare niente. */
.lt-sezione-vuota { color: var(--testo-tenue); line-height: 1.7; margin: 1.4em 0; }

/* Il testo d'aiuto del campo di ricerca era BIANCO: giusto sull'intestazione
   blu della home, invisibile sulla pagina dei risultati, che ha lo sfondo
   chiaro. Spariva del tutto appena si apriva /cerca senza aver scritto nulla. */
.lt-cerca--pagina input::placeholder { color: var(--testo-tenue); opacity: 1; }
.lt-cerca--pagina input:focus::placeholder { color: var(--testo-tenue); }

/* La X di chiusura restava inchiodata in alto mentre il pannello scorreva:
   finiva disegnata sopra le voci del menu, e chi toccava li' chiudeva il menu
   invece di aprire la categoria. Ora sta su una fascia con lo sfondo pieno. */
@media (max-width: 991.98px) {
	.navbar-mobile .mobile-nav-toggle {
		background: var(--menu-bg);
		border-radius: 0 0 0 var(--raggio);
		box-shadow: -6px 6px 12px rgba(0,0,0,.10);
	}
	.navbar-mobile .mobile-nav-toggle:hover { background: var(--barra-bg); }
}

/* Le voci dell'indice dell'articolo portavano il titolo di sezione SOTTO la
   testata fissa, che e' alta 66px: il titolo spariva e si atterrava a meta'
   del testo precedente. */
:target,
[id^="scheda"], [id^="intro"], [id^="testo"], [id^="riassunto"],
[id^="figure"], [id^="personaggi"], [id^="temi"], [id^="analisi"], [id^="passi"],
#commenti, .lt-serie, .titolo-sezione {
	scroll-margin-top: calc(var(--h-header) + 16px);
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* =========================================================================
   CORREZIONI DAL QUARTO GIRO DI COLLAUDO
   ========================================================================= */

/* Il pie' di pagina non arrivava in fondo alla finestra: sulle pagine corte
   (accesso, domande, profilo) sotto la fascia scura restavano 250 pixel di
   grigio vuoto fino al bordo dello schermo. Ora la pagina occupa almeno tutta
   l'altezza e il pie' di pagina scende in fondo da solo. */
html, body { min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > #main, body > main { flex: 1 0 auto; }
body > footer, body > #footer { flex-shrink: 0; }

/* La freccetta delle voci di primo livello del menu telefono puntava a
   SINISTRA da aperta, invece che in basso: il segno diceva il contrario di
   quello che era successo. */
@media (max-width: 991.98px) {
	.navbar-mobile > ul > li.dropdown > a > i { transform: rotate(0deg); transition: transform .2s ease; }
	.navbar-mobile > ul > li.dropdown > a.aperto > i { transform: rotate(180deg); }
}

/* La tabella testo/parafrasi sul telefono si tagliava a meta' senza dire che
   si poteva scorrere. Un'ombra sul bordo destro segnala che c'e' altro, e una
   riga di intestazione dice quale colonna e' quale. */
.tabella-scroll {
	background-image: linear-gradient(to right, var(--tabella-bg) 30%, rgba(255,255,255,0)),
	                  linear-gradient(to left,  var(--tabella-bg) 30%, rgba(255,255,255,0)),
	                  linear-gradient(to right, rgba(0,0,0,.10), rgba(0,0,0,0) 14px),
	                  linear-gradient(to left,  rgba(0,0,0,.10), rgba(0,0,0,0) 14px);
	background-position: 0 0, 100% 0, 0 0, 100% 0;
	background-repeat: no-repeat;
	background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* Le carte delle sezioni in home non erano allineate: titolo, conteggio e
   descrizione cadevano ad altezze diverse a seconda della lunghezza del testo. */
.lt-categorie { align-items: stretch; }
.lt-categoria { display: flex; flex-direction: column; height: 100%; }
.lt-categoria__testo, .lt-categoria p { flex: 1 0 auto; }

/* Il campo di ricerca delle pagine di categoria aveva una larghezza fissa che
   non si allineava ne' al titolo ne' all'elenco sotto. */
.categorySearch { max-width: 100%; box-sizing: border-box; }

/* Bersagli da toccare ancora sotto i 44 px sul telefono. */
@media (max-width: 991.98px) {
	.lt-filtro, .lt-lato__elenco a, .lt-classifica a,
	.breadcrumbs ol a, .back-to-top { min-height: 44px; }
	.breadcrumbs ol a { display: inline-flex; align-items: center; }
	.back-to-top { width: 46px; height: 46px; }
	/* L'indice in cima all'articolo — "Scheda dell'Opera", "Introduzione",
	   "Testo e Parafrasi"… — sono nove voci una sotto l'altra alte 22 pixel.
	   E' la prima cosa che si tocca aprendo un canto: con nove bersagli cosi'
	   vicini si finisce quasi sempre su quello sbagliato. */
	.portfolio-info a[href^="#"] { display: inline-flex; align-items: center; min-height: 40px; }
}

/* Il testo segnaposto del campo di ricerca in home era troppo chiaro sul
   fondo blu. */
.lt-cerca input::placeholder { color: var(--hero-testo); opacity: .85; }

/* =========================================================================
   TENDINA DEI SUGGERIMENTI
   =========================================================================
   Compare sotto la casella di ricerca mentre si scrive. Il markup lo crea
   script/lt-suggerimenti.js: se lo script non parte non c'e' niente da
   mostrare, e la casella resta il modulo semplice di prima.

   PERCHE' E' FATTA DI <div> E NON DI <ul>/<li>
   La casella della testata vive dentro <nav class="navbar">, e il menu ha due
   regole che prendono QUALSIASI lista gli stia dentro:
       .navbar ul         { display: flex; align-items: center }
       .navbar-mobile ul  { position: fixed; top/right/bottom; width: 380px;
                            background; box-shadow; animation... }
   Con una <ul> la prima impaginava i suggerimenti in colonnine affiancate, e
   la seconda, sul telefono, trasformava la tendina in un SECONDO pannello a
   tutta altezza sopra il menu. Si poteva combattere alzando la precisione dei
   selettori, e per un po' e' stato fatto: tre regole scritte in triplice
   copia solo per disfare quello che il foglio faceva altrove. Con dei <div>
   il problema non si pone. Il ruolo per la sintesi vocale lo danno gli
   attributi role="listbox" e role="option", non il nome del tag.

   LO Z-INDEX
   Dentro #header (997) convivono il menu a discesa delle categorie (99), il
   pannello del telefono (1000) e il suo bottone di chiusura (1002). La
   tendina sta a 1003 perche' deve passare davanti a tutti e tre: sul telefono
   si apre dentro il pannello e finirebbe sotto il bottone. Resta comunque
   sotto il pulsante "torna su" (99999).
   ========================================================================= */
.lt-sugg {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 1003;
	min-width: 100%;
	width: max-content;
	max-width: min(420px, calc(100vw - 24px));
	max-height: min(70vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px;
	background: var(--superficie);
	border: 1px solid var(--bordo);
	border-radius: var(--raggio);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
}
.lt-sugg[hidden] { display: none; }

.lt-sugg__voce {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	/* Almeno 44 pixel di altezza: e' un bersaglio da centrare col dito. */
	min-height: 44px;
	padding: 8px 12px;
	border-radius: var(--raggio);
	cursor: pointer;
	color: var(--testo);
}
.lt-sugg__voce[hidden] { display: none; }
.lt-sugg__voce--scelta { background: var(--superficie-2); }

.lt-sugg__titolo {
	font-family: var(--font-ui);
	font-size: .9rem;
	font-weight: 600;
	color: var(--testo-forte);
	line-height: 1.35;
}
/* La parte scritta dall'utente, messa in risalto. Niente fondo giallo di
   sistema: si usa il colore d'accento del sito. */
.lt-sugg__titolo mark {
	background: none;
	color: var(--accento);
	font-weight: 700;
}
.lt-sugg__voce--scelta .lt-sugg__titolo { color: var(--accento); }

.lt-sugg__sezione {
	font-family: var(--font-ui);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--testo-tenue);
}

.lt-sugg__vuoto {
	padding: 12px;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--testo-tenue);
}
.lt-sugg__vuoto[hidden] { display: none; }

/* L'ultima riga, quella che porta alla ricerca completa. Resta ATTACCATA in
   fondo mentre si scorre: sul telefono nel riquadro ci stanno cinque guide e
   mezza, e questa riga finiva sotto il bordo — cioe' l'unica strada per chi
   cerca una cosa che nei titoli non c'e', "conte ugolino" per dirne una,
   spariva proprio nel caso in cui serve. */
.lt-sugg__voce--tutte {
	position: sticky;
	bottom: -6px;                    /* -6 annulla il padding del riquadro */
	background: var(--superficie);
	border-top: 1px solid var(--bordo);
	border-radius: 0 0 var(--raggio) var(--raggio);
	margin-top: 4px;
}
.lt-sugg__voce--tutte .lt-sugg__titolo { color: var(--accento); }
.lt-sugg__voce--tutte .lt-sugg__sezione { text-transform: none; letter-spacing: .02em; font-weight: 600; }

/* Sul telefono la casella sta in cima al pannello del menu, largo al massimo
   380 pixel: la tendina prende tutta la larghezza che ha e si tiene bassa,
   per non seppellire le voci del menu sotto. */
@media (max-width: 991.98px) {
	.lt-sugg {
		left: 0;
		right: 0;
		width: auto;
		min-width: 0;
		max-width: none;
		max-height: 46vh;
	}
}