/* =====================================================================
   Le landing — il foglio unico

   ⚠️⚠️ **I riferimenti sono `docs/riferimenti/landing-separazione.html`
   e `landing-truffe.html`, e non sono una tavolozza: sono il disegno.**
   Misure, colori e proporzioni qui sotto sono misurati da lì, sezione
   per sezione. Quando si cambia qualcosa si guarda prima quel file. Le
   regole delle truffe stanno in fondo, in una sezione loro.

   ⚠️⚠️ **Questo foglio convive con quello di GeneratePress**, non lo
   sostituisce: le landing usano header e footer del tema. Da qui due
   regole che valgono per tutto il file:

   — **tutto è ancorato a `main.lp`**, mai al `body`: header e footer
     sono del tema e non devono prendere niente da qui. Le variabili, la
     tipografia di base e i colori stanno su `.lp`;
   — **ogni proprietà che il tema imposta su un elemento nudo, qui si
     riscrive**, non si dà per scontata. GP mette su `h1`, `h2`, `h3`
     Playfair con pesi 900 e 700, `margin-bottom:2rem` e il suo colore;
     su `p` un `margin-bottom:1.5em`; sul `body` Albert Sans a 18px. Un
     titolo di sezione che ne eredita anche solo una stona col
     riferimento senza che niente sia «rotto».

   ⚠️ **Selettori discendenti sulle sezioni a blocchi.** Le sezioni
   centrali le rende Gutenberg, che a seconda della versione infila un
   `.wp-block-group__inner-container` fra il gruppo e i suoi figli. Un
   selettore figlio diretto funzionerebbe su un'installazione e non
   sull'altra, e la differenza si vede solo in frontend.
   ===================================================================== */

/* ---------------------------------------------------------------------
   I caratteri

   ⚠️ Autoospitati. Nel riferimento arrivano da Google Fonts: una
   richiesta a un dominio di Google al caricamento, cioè prima che
   qualcuno abbia accettato qualcosa. `font-display:swap` perché il testo
   si legga subito col carattere di sistema.
   --------------------------------------------------------------------- */
@font-face {
	font-family: 'Source Serif 4';
	src: url('../fonts/source-serif-4.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter var';
	src: url('../fonts/inter.woff2') format('woff2');
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------
   I colori

   Il verticale cambia l'accento e il fondo tenue, non l'impianto: le due
   landing devono somigliarsi, sono lo stesso studio.
   --------------------------------------------------------------------- */
.lp {
	--lp-accento: #b8433c;
	--lp-accento-scuro: #9c332d;
	--lp-accento-chiaro: #c9564d;
	--lp-scuro: #14263f;
	--lp-scuro-piu: #0f1e33;
	--lp-tenue: #f4efe8;
	--lp-testo: #14263f;
	--lp-testo-2: #5b6b80;
	--lp-testo-3: #4b5b71;
	--lp-su-scuro: #9fb0c6;
	--lp-su-scuro-2: #b7c4d6;
	--lp-bordo: #e9e4dc;
	--lp-bordo-freddo: #e4eaf2;
	--lp-oro: #e0a33c;

	--lp-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--lp-sans: 'Inter var', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--lp-larghezza: 1240px;
	--lp-lato: 32px;
}

/*
   ⚠️ **Il riferimento delle truffe è un altro disegno**, non la stessa
   pagina con un altro accento: tutto in Inter — anche i titoli e i
   numeri —, contenitore a 1180, hero chiaro. `--lp-serif` puntato sul
   sans è ciò che fa cambiare carattere a ogni titolo senza ripetere una
   regola per ognuno. Misure e colori da `docs/riferimenti/landing-truffe.html`.
*/
.lp.lp-truffe {
	--lp-accento: #9e2e28;
	--lp-accento-scuro: #83231e;
	--lp-accento-chiaro: #b8433c;
	--lp-scuro: #0a1a2f;
	--lp-scuro-piu: #071324;
	--lp-tenue: #faf7f2;
	--lp-testo: #0a1a2f;
	--lp-testo-2: #4e5d73;
	--lp-testo-3: #47566b;
	--lp-su-scuro: #9fb0c6;
	--lp-su-scuro-2: #c3d0e0;
	--lp-bordo: #e7e4de;
	--lp-oro: #c9962b;

	--lp-serif: var(--lp-sans);
	/*
	   ⚠️ 1280 e non i 1180 del riferimento: deciso il 16/09/2026 guardando
	   le pagine vere, che hanno testi più lunghi del disegno. Le misure
	   interne restano quelle misurate — cambia solo quanto respira la
	   colonna.
	*/
	--lp-larghezza: 1280px;
}

/* ---------------------------------------------------------------------
   Le basi
   --------------------------------------------------------------------- */
.lp *,
.lp *::before,
.lp *::after {
	box-sizing: border-box;
}

/*
   ⚠️ `main.lp` sta dentro `.site-content`, che GP mette in `display:flex`
   per le colonne laterali. Senza `flex` e `width` il `main` sarebbe un
   elemento flessibile largo quanto il suo contenuto preferisce, e le
   fasce a tutta larghezza non arriverebbero ai bordi.
*/
.lp {
	display: block;
	flex: 1 1 100%;
	width: 100%;
	min-width: 0;
	background: #fff;
	color: var(--lp-testo);
	font-family: var(--lp-sans);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
}

.lp img {
	max-width: 100%;
	height: auto;
	display: block;
}

.lp a {
	color: var(--lp-testo);
	text-decoration: none;
}

.lp a:hover {
	color: var(--lp-accento);
}

/*
   ⚠️⚠️ **Ogni proprietà che GP mette sui titoli, riscritta.** Famiglia,
   peso, corpo, interlinea, margine sotto, colore, maiuscole: il tema le
   imposta su `h1`/`h2`/`h3` nudi, e quella che qui manca passa. Il
   colore è il caso più insidioso — `var(--contrast-2)` del tema somiglia
   al nostro blu abbastanza da non notarlo in chiaro, e sulle fasce
   scure diventa un titolo scuro su fondo scuro.
*/
.lp h1,
.lp h2,
.lp h3 {
	font-family: var(--lp-serif);
	font-style: normal;
	letter-spacing: -0.02em;
	text-transform: none;
	font-weight: 700;
	color: var(--lp-testo);
	margin: 0;
}

.lp h1 {
	font-size: clamp(38px, 5.2vw, 60px);
	line-height: 1.06;
	text-wrap: balance;
}

.lp h2 {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.12;
	text-wrap: balance;
}

.lp h3 {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
}

/*
   ⚠️ GP stampa nel suo CSS dinamico
   `.wp-block-group__inner-container{max-width:1200px;margin:0 auto}`,
   pensato per i gruppi dentro un articolo. Qui ogni sezione ha il suo
   `.lp-dentro` da 1240px: il limite del tema, applicato al contenitore
   di sezione, lo ridurrebbe a 1200 e sposterebbe tutto di 20px — il
   genere di scarto che si vede solo mettendo la pagina accanto al
   riferimento.
*/
.lp .wp-block-group__inner-container {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/*
   ⚠️ Le ancore interne atterrano sotto l'header del tema, che è fisso
   in cima: senza questo margine il titolo della sezione finisce
   nascosto dietro il menu, proprio dove si voleva portare chi ha
   cliccato.
*/
.lp [id] {
	scroll-margin-top: 110px;
}

/*
   ⚠️⚠️ **`.lp p` pesava più di ogni regola a una classe su un paragrafo**,
   e la batteva senza dirlo: sommario dell'hero, riga di privacy della
   card, occhielli, etichette, numeri — i margini scritti dal riferimento
   non passavano mai. Il sommario stava incollato all'`h1` e la privacy
   al bottone, su tutti e due i verticali. È la stessa trappola dei
   bottoni qui sotto, sui paragrafi.

   Adesso la regola generale ha peso **zero** (`:where`): vince ancora sul
   `p` nudo di GeneratePress, che viene prima, e perde con qualunque
   classe. Trovato misurando le truffe, corretto sulla separazione il
   giorno dopo, misurandola contro il suo riferimento.
*/
:where(.lp) p {
	margin: 0 0 18px;
}

:where(.lp) p:where(:last-child) {
	margin-bottom: 0;
}

.lp ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------------------
   La cornice del tema

   ⚠️ L'uscita dal contenitore la fa GeneratePress: `functions.php`
   aggiunge al `body` la sua classe `full-width-content`, e il suo CSS
   toglie il `max-width` a `#page` e il padding a `.site-content`. Qui
   resta solo il `display:block` — GP mette `.site-content` in flex per
   le colonne laterali, che sulle landing non ci sono.

   ⚠️ Niente `width:100vw` e margini negativi, che sono la scorciatoia
   solita: su Windows `100vw` include la barra di scorrimento, e la
   pagina scorre in orizzontale di 17px su ogni desktop che la mostra.
   --------------------------------------------------------------------- */
.lp-pagina .site-content {
	display: block;
	padding: 0;
}

/*
   ⚠️ **La fascia «Affronta il tuo problema…» sopra il footer non va sulle
   landing**: è un secondo invito a contattare lo Studio, con un pulsante
   che porta alla pagina Contatti, subito dopo la fascia finale della
   landing che fa la stessa cosa verso il form. Due inviti di fila, e il
   secondo porta via dalla pagina.

   Sta **dentro** l'unico Element «Site Footer» (825), accanto alle
   colonne e al copyright: non la si può spegnere col filtro sugli
   Element senza togliere tutto il footer. Il container porta la classe
   `footer-fascia`, messa a mano nel pannello dell'Element; qui la si
   nasconde solo dove c'è `lp-pagina`. Il footer resta uno solo per tutto
   il sito.

   ⚠️ Se la classe sparisce dal pannello — Element ricostruito, blocco
   sostituito — la fascia torna a vedersi sulle landing, e basta: nessun
   altro pezzo del footer dipende da questa regola.
*/
.lp-pagina .site-footer .footer-fascia {
	display: none;
}

/*
   ⚠️ Tolta la fascia, il blocco che la segue — le colonne Sedi, Links,
   Contatti — si porta dietro un bordo superiore e 80px di padding che
   servivano a staccarlo da lei: in cima al footer restava una riga
   sottile che non separava niente, sopra 208px di vuoto. Si prende «il
   blocco dopo la fascia» e non la sua classe di GenerateBlocks, che è un
   codice generato e cambia se il blocco viene ricreato.
*/
.lp-pagina .site-footer .footer-fascia + * {
	border-top: 0;
	padding-top: 0;
}

/* ---------------------------------------------------------------------
   Impalcatura
   --------------------------------------------------------------------- */
.lp-dentro {
	max-width: var(--lp-larghezza);
	margin: 0 auto;
	padding-left: var(--lp-lato);
	padding-right: var(--lp-lato);
}

.lp-sezione,
.lp .lp-sez {
	padding: 104px 0;
}

/* L'occhiello: trattino verticale + parola in maiuscoletto spaziato. */
.lp-occhio {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lp-accento-chiaro);
}

.lp-occhio::before {
	content: '';
	width: 3px;
	height: 15px;
	background: var(--lp-accento-chiaro);
	flex: none;
}

/* L'etichetta: senza trattino, sopra i titoli delle sezioni centrate. */
.lp-etichetta {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lp-accento);
}

/*
   ⚠️⚠️ **I bottoni sono link, e la regola generale dei link pesava di
   più.** `.lp a` (una classe e un elemento) batte `.lp-bottone` (una
   classe sola), quindi il colore bianco non passava mai: il bottone del
   telefono sulla fascia scura usciva blu scuro su blu scuro — un riquadro
   vuoto — e quello rosso con il testo blu. All'hover era peggio: il
   rosso della regola generale su fondo rosso. Visto sulla pagina di
   Catania, misurato: `rgb(20,38,63)` su `rgb(20,38,63)`.

   Da qui `.lp .lp-bottone`: due classi, e la regola dei link è battuta
   anche negli stati — `:hover`, `:focus`, `:visited` — dove GP mette i
   suoi colori con `a:hover`.
*/
.lp .lp-bottone,
.lp .lp-bottone:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--lp-accento);
	color: #fff;
	border: 0;
	padding: 16px 28px;
	font-family: var(--lp-sans);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lp .lp-bottone:hover,
.lp .lp-bottone:focus {
	background: var(--lp-accento-scuro);
	color: #fff;
}

.lp .lp-bottone-piccolo {
	padding: 11px 18px;
	font-size: 14px;
}

.lp .lp-bottone-fantasma,
.lp .lp-bottone-fantasma:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 16px 28px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	transition: border-color 0.15s ease;
}

.lp .lp-bottone-fantasma:hover,
.lp .lp-bottone-fantasma:focus {
	border-color: #fff;
	color: #fff;
}

/* ---------------------------------------------------------------------
   Le icone

   ⚠️ `mask` e non `background-image`: così l'icona prende il colore del
   testo che la circonda. Con un'immagine di sfondo servirebbe una copia
   bianca di ogni icona per le fasce scure, e alla prima aggiunta ne
   resterebbe una sola delle due.
   --------------------------------------------------------------------- */
.lp-icona::before {
	content: '';
	width: 20px;
	height: 20px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--lp-icona) center / contain no-repeat;
	mask: var(--lp-icona) center / contain no-repeat;
}

.lp-icona-luogo {
	--lp-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M12 21c4-4.2 6-7.3 6-9.9A6 6 0 0 0 6 11.1c0 2.6 2 5.7 6 9.9Z' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E");
}

.lp-icona-tel {
	--lp-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M7.7 3.9 5 5.5c-1 .7-1.4 2.1-.8 3.3 1.2 2.4 2.9 4.6 4.8 6.5 1.9 1.9 4.1 3.6 6.5 4.8 1.2.6 2.6.2 3.3-.8l1.6-2.7c.4-.6.2-1.4-.4-1.8l-3-2c-.6-.4-1.3-.3-1.8.2l-1.1 1.2c-1.9-1.1-3.5-2.7-4.6-4.6L10.7 8c.5-.5.6-1.2.2-1.8l-2-3c-.4-.6-1.2-.8-1.8-.4Z' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*
   ⚠️ Le tre icone dell'avvocato non usano `mask`: stanno dentro un
   quadrato tenue su fondo chiaro, sempre, quindi il colore del tratto è
   fisso e un'immagine di sfondo basta. Le due della sede invece
   compaiono anche sulla fascia scura, e lì servono del colore del testo.
*/
.lp-punto-avv-scudo {
	--lp-simbolo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314263F' stroke-width='1.5'%3E%3Cpath d='M12 3.2 5 6v5.4c0 4.2 2.9 7.6 7 9.4 4.1-1.8 7-5.2 7-9.4V6l-7-2.8Z' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lp-punto-avv-lucchetto {
	--lp-simbolo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314263F' stroke-width='1.5'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='1.5'/%3E%3Cpath d='M8.4 10.5V7.8a3.6 3.6 0 0 1 7.2 0v2.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

.lp-punto-avv-persona {
	--lp-simbolo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314263F' stroke-width='1.5'%3E%3Ccircle cx='10' cy='8.5' r='3.3'/%3E%3Cpath d='M4.5 19c.6-3 2.8-4.7 5.5-4.7 1 0 1.9.2 2.7.7' stroke-linecap='round'/%3E%3Cpath d='m14.8 17.2 1.7 1.7 3.2-3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   L'hero
   --------------------------------------------------------------------- */
.lp-hero {
	position: relative;
	background: var(--lp-scuro);
	color: #fff;
	overflow: hidden;
	padding: 0;
}

.lp-hero-griglia {
	position: relative;
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	/*
	   ⚠️ Nel markup l'ordine è titolo, card, testo: su telefono il form
	   viene subito dopo il titolo. Qui la griglia rimette il testo sotto
	   il titolo e la card a destra, lunga quanto tutti e due. La seconda
	   riga è `1fr` perché, se la card è più alta, lo spazio in più vada
	   sotto il testo e non fra il titolo e il sommario. E niente `gap`
	   verticale: fra titolo e sommario lo spazio lo dà il sommario.
	*/
	grid-template-areas:
		'titolo lato'
		'testo  lato';
	grid-template-rows: auto 1fr;
	column-gap: 72px;
	row-gap: 0;
	align-items: start;
	padding-top: 88px;
	padding-bottom: 96px;
}

.lp-hero-titolo {
	grid-area: titolo;
}

.lp-hero-lato {
	grid-area: lato;
}

.lp-hero-testo {
	grid-area: testo;
}

.lp-hero h1 {
	color: #fff;
}

.lp-hero-sommario {
	margin: 22px 0 0;
	font-size: 19px;
	line-height: 1.62;
	color: var(--lp-su-scuro-2);
	max-width: 34em;
}

.lp-punti {
	margin-top: 34px;
	display: grid;
	gap: 14px;
}

.lp-punti li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	color: #e7edf5;
}

.lp-punti li::before {
	content: '';
	width: 17px;
	height: 17px;
	margin-top: 4px;
	flex: none;
	background-color: var(--lp-accento-chiaro);
	-webkit-mask: var(--lp-spunta) center / contain no-repeat;
	mask: var(--lp-spunta) center / contain no-repeat;
	--lp-spunta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.6l3.4 3.4L16 5.4'/%3E%3C/svg%3E");
}

/* --- La card del form ------------------------------------------------ */
.lp-card {
	background: #fff;
	color: var(--lp-testo);
	padding: 34px 34px 30px;
	box-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.6);
}

.lp-card-testa {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.lp-card-testa h2 {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.lp-card-pallini {
	display: flex;
	gap: 5px;
	margin-top: 9px;
	flex: none;
}

.lp-card-pallini span {
	width: 24px;
	height: 3px;
	display: block;
	background: #e2ddd4;
}

.lp-card-pallini span:first-child {
	background: var(--lp-accento);
}

.lp-card-sotto {
	margin: 14px 0 0;
	font-size: 15px;
	color: var(--lp-testo-2);
}

.lp-card-firma {
	margin-top: 20px;
	padding: 16px 18px;
	background: var(--lp-tenue);
}

.lp-card-nome {
	font-family: var(--lp-serif);
	font-size: 17px;
	font-weight: 600;
}

.lp-card-nota {
	font-size: 13px;
	color: var(--lp-testo-2);
	margin-top: 2px;
}

.lp-card-privacy {
	margin: 16px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: #8a94a3;
}

/* --- La fascia recensioni, sotto la card ----------------------------- */
.lp-recensioni-fascia {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 26px;
}

.lp-facce {
	display: flex;
}

.lp-facce span {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--lp-scuro);
	display: block;
}

.lp-facce span:nth-child(1) {
	background: #5c6e86;
}
.lp-facce span:nth-child(2) {
	background: #6d7e95;
	margin-left: -12px;
}
.lp-facce span:nth-child(3) {
	background: #52647c;
	margin-left: -12px;
}
.lp-facce span:nth-child(4) {
	background: #7a8aa0;
	margin-left: -12px;
}

.lp-fascia-voto {
	display: flex;
	align-items: center;
	gap: 9px;
}

.lp-fascia-voto .lp-stelle {
	color: var(--lp-oro);
	font-size: 14px;
	letter-spacing: 0.12em;
}

.lp-voto {
	font-size: 16px;
	font-weight: 700;
}

.lp-fascia-numero,
.lp-fascia-numero a {
	font-size: 14px;
	color: var(--lp-su-scuro-2);
	margin-top: 2px;
}

.lp-fascia-numero a:hover {
	color: #fff;
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
   Il form del plugin

   ⚠️ Le classi `li-` le genera `lead-intake-wp`: qui si vestono e basta.
   Cambiarne una vuol dire aver cambiato il plugin, che gira su cinque
   siti — vedi §5 del CLAUDE.md.

   ⚠️⚠️ **Tre classi, non due, e la ragione è l'ordine dei fogli.**
   `form.css` del plugin viene accodato **dopo** `landing.css` — lo
   stampa lo shortcode, che sta nel corpo della pagina — e scrive
   `.li-form .li-button`: due classi, esattamente come `.lp-card
   .li-button`. A parità di peso vince chi arriva dopo, cioè il plugin, e
   ogni regola scritta qui con due classi **passava per buona e non si
   applicava**. Misurato il 16/09/2026 affiancando le due rese: il
   bottone usciva blu `#1a3d6d` e largo quanto la parola invece che rosso
   e a tutta larghezza, i campi 51px con testo a 16px invece di 49 e 15,
   le etichette medium invece che semibold — e il form 169px più alto del
   disegno. Su tutte e quattro le landing.

   ⚠️ Non l'aveva preso il confronto degli stili calcolati perché quello
   **salta apposta gli elementi dentro `.li-form`**, che sono del plugin.
   E non l'avevano preso gli screenshot perché il banco di prova carica
   `form.css` dal sito vero: senza rete non arriva, e il bottone veniva
   del colore giusto. Il banco è fedele solo con la rete attiva.

   ⚠️ **Le variabili prima delle proprietà.** Quello che il plugin
   espone come variabile si cambia lì: è il suo contratto — c'è persino
   un meccanismo di skin per sito che fa solo questo — e continua a
   valere se domani cambia il markup. Le proprietà scritte a mano qui
   sotto restano per ciò che variabile non è (le misure prese dal
   riferimento), e adesso hanno il peso per vincere.
   --------------------------------------------------------------------- */
.lp .lp-card .li-form {
	/*
	   La tavolozza del form è quella della landing. `--li-accent` tinge
	   il bottone, il bordo del bottone fantasma, l'anello del fuoco e
	   l'asterisco dei campi obbligatori: una riga qui invece di cinque
	   regole che rincorrono il plugin.
	*/
	--li-accent: var(--lp-accento);
	--li-accent-hover: var(--lp-accento-scuro);
	--li-accent-text: #fff;
	--li-focus: var(--lp-accento);
	--li-border: #d8d3ca;

	/*
	   ⚠️ Il bottone prende la riga, e non la larghezza della parola:
	   `--li-button-grow` per il plugin è `0 1 auto`, e nel riferimento è
	   il rettangolo rosso largo quanto la card.
	*/
	--li-button-grow: 1;
	--li-button-min-height: 0;

	/*
	   ⚠️⚠️ **Lo spazio fra i campi lo dà il plugin, una volta sola.**
	   `form.css` fa di ogni passaggio una griglia con `gap: var(--li-gap)`;
	   qui c'era anche un `margin-bottom` sui campi, e i due si sommavano:
	   30px dove il disegno ne vuole 14, e la card 146px più alta. La
	   separazione se n'era già accorta e aveva azzerato i margini a mano
	   (le sue regole restano, più sotto); le truffe no, perché le misure
	   erano state prese senza il foglio del plugin. Adesso la misura è
	   una: questa variabile.
	*/
	--li-gap: 14px;

	margin-top: 22px;
}

.lp .lp-card .li-title {
	display: none; /* il titolo della card è già sopra */
}

.lp .lp-card .li-progress {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.lp .lp-card .li-progress-step {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #9aa5b3;
	flex: 1;
	padding-top: 9px;
	border-top: 3px solid #e2ddd4;
}

.lp .lp-card .li-progress-step.li-is-current {
	color: var(--lp-testo);
	border-top-color: var(--lp-accento);
}

.lp .lp-card .li-progress-num {
	display: none;
}

.lp .lp-card .li-step {
	border: 0;
	margin: 0;
	padding: 0;
}

.lp .lp-card .li-step-title {
	display: none; /* lo dice già l'indicatore di avanzamento */
}

/* ⚠️ Niente margine: lo spazio è il `gap` del passaggio, vedi `--li-gap`. */
.lp .lp-card .li-field {
	display: block;
	margin-bottom: 0;
}

.lp .lp-card .li-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--lp-testo-3);
}

.lp .lp-card .li-required {
	color: var(--lp-accento);
}

.lp .lp-card .li-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.lp .lp-card .li-input {
	width: 100%;
	font-family: var(--lp-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--lp-testo);
	background: #fff;
	border: 1px solid #d9d3ca;
	border-radius: 0;
	padding: 12px 13px;
	transition: border-color 0.15s ease;
}

.lp .lp-card .li-input:focus {
	outline: 0;
	border-color: var(--lp-accento);
	box-shadow: 0 0 0 3px rgba(184, 67, 60, 0.12);
}

.lp .lp-card .li-input::placeholder {
	color: #9aa5b3;
}

.lp .lp-card .li-textarea {
	resize: vertical;
	min-height: 132px;
}

.lp .lp-card .li-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lp-testo-2);
	margin-bottom: 12px;
}

.lp .lp-card .li-check {
	margin-top: 3px;
	flex: none;
	accent-color: var(--lp-accento);
}

.lp .lp-card .li-actions {
	display: flex;
	gap: 10px;
	margin-top: 0;
}

.lp .lp-card .li-button {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	background: var(--lp-accento);
	color: #fff;
	border: 0;
	padding: 16px 24px;
	font-family: var(--lp-sans);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lp .lp-card .li-button:hover {
	background: var(--lp-accento-scuro);
}

.lp .lp-card .li-button-ghost {
	flex: none;
	background: transparent;
	color: var(--lp-testo-2);
	border: 1px solid #d9d3ca;
}

.lp .lp-card .li-button-ghost:hover {
	background: var(--lp-tenue);
	color: var(--lp-testo);
}

.lp .lp-card .li-message {
	margin: 14px 0 0;
	padding: 13px 15px;
	font-size: 14px;
	background: var(--lp-tenue);
}

.lp .lp-card .li-message-error {
	background: #fbecea;
	color: #8c2f29;
}

/* ⚠️ L'honeypot: fuori schermo e fuori dal flusso della tastiera. Non
   `display:none`, che alcuni bot riconoscono come trappola. */
.lp .lp-card .li-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Il contatore dei caratteri: lo stampa il plugin, e il limite è vero
   (`maxlength` sul campo). */
.lp .lp-card .li-counter {
	margin: 0;
	text-align: right;
	font-size: 12px;
	color: #9aa5b3;
}

.lp .lp-card .li-counter.li-is-full {
	color: #8c2f29;
}

/* Il telefono: prefisso a sinistra, numero a destra. ⚠️ `.li-input` qui
   vale `width: 100%`, quindi le larghezze si ripetono a questo peso. */
.lp .lp-card .li-phone .li-phone-prefix,
.lp .lp-card .li-phone .li-phone-eco {
	flex: 0 0 104px;
	width: 104px;
}

.lp .lp-card .li-phone .li-phone-eco {
	display: flex;
	align-items: center;
	background: var(--lp-tenue);
	color: var(--lp-testo-2);
}

/*
   ⚠️ Il ringraziamento dopo l'invio: un riquadro con respiro, non la
   striscia di una riga. Il testo lo porta il plugin.

   ⚠️ `:not([hidden])`: il blocco è nella pagina fin dall'inizio, nascosto.
   Un `display` a questo peso vincerebbe su `hidden`, e il ringraziamento
   comparirebbe sotto il form prima dell'invio.
*/
.lp .lp-card .li-success:not([hidden]) {
	display: block;
}

.lp .lp-card .li-success {
	border-radius: 0;
	min-height: 220px;
	margin: 0;
	padding: 26px 24px;
	font-size: 15px;
	color: var(--lp-testo-2);
	background: var(--lp-tenue);
	border-left: 3px solid #2f7a4b;
}

.lp .lp-card .li-success::before {
	content: none;
}

.lp .lp-card .li-success-body {
	gap: 12px;
}

.lp .lp-card .li-success-title {
	font-size: 18px;
	font-weight: 600;
	color: #256a3f;
}

/* ---------------------------------------------------------------------
   Le sezioni a blocchi
   --------------------------------------------------------------------- */
.lp .lp-sez {
	position: relative;
}

/*
   ⚠️⚠️ **Gutenberg mette un `.wp-block-group__inner-container` fra il
   gruppo e i suoi figli, e la griglia va su UNO SOLO dei due.**

   Dichiararla su tutti e due — che è la scorciatoia ovvia per non
   dipendere dalla forma del markup — produce due griglie annidate: il
   gruppo esterno diventa una griglia con **un figlio solo**, il
   contenitore interno, che finisce nella prima colonna; la griglia vera
   si ridisegna dentro quella metà. Il risultato non somiglia a un
   errore, somiglia a un disegno stretto: le due colonne si impilano a
   sinistra e le griglie si schiacciano nella metà del contenitore. È
   costato una resa da rifare, ed è stato trovato misurando la pagina
   vera, non guardandola.

   Quindi: se il contenitore interno c'è, la griglia è **sua**; se non
   c'è — l'installazione con `theme.json`, o un'anteprima — è
   dell'elemento. Le due condizioni si escludono, e `:has()` è ciò che
   permette di dirlo.

   ⚠️ Le varianti non ripetono questo selettore: cambiano **variabili**
   sul gruppo esterno, che il contenitore interno eredita. Ripetere la
   coppia di selettori per ognuna è come si torna a dimenticarne una.
*/
.lp-dentro {
	max-width: var(--lp-larghezza);
	margin: 0 auto;
	padding-left: var(--lp-lato);
	padding-right: var(--lp-lato);
}

.lp-due > .wp-block-group__inner-container,
.lp-due:not(:has(> .wp-block-group__inner-container)),
.lp-griglia > .wp-block-group__inner-container,
.lp-griglia:not(:has(> .wp-block-group__inner-container)),
.lp-griglia-larga > .wp-block-group__inner-container,
.lp-griglia-larga:not(:has(> .wp-block-group__inner-container)),
.lp-griglia-passi > .wp-block-group__inner-container,
.lp-griglia-passi:not(:has(> .wp-block-group__inner-container)),
.lp-elenco-fasi > .wp-block-group__inner-container,
.lp-elenco-fasi:not(:has(> .wp-block-group__inner-container)),
.lp-righe-studio > .wp-block-group__inner-container,
.lp-righe-studio:not(:has(> .wp-block-group__inner-container)),
.lp-prof-colonne > .wp-block-group__inner-container,
.lp-prof-colonne:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: var(--lp-colonne, 1fr);
	gap: var(--lp-gap, 24px);
	align-items: var(--lp-allinea, stretch);
	justify-content: var(--lp-giustifica, normal);
}

.lp-due {
	--lp-colonne: 1fr 1fr;
	--lp-gap: 64px;
	--lp-allinea: start;
}

/* ⚠️ Il filo di griglia è lo sfondo che si vede attraverso il `gap` di
   1px: sfondo e bordo restano sul gruppo esterno, che il contenitore
   interno riempie esattamente. */
.lp-griglia {
	--lp-colonne: repeat(3, 1fr);
	--lp-gap: 1px;
	background: var(--lp-bordo);
	border: 1px solid var(--lp-bordo);
	margin-top: 56px;
}

.lp-griglia-larga {
	--lp-colonne: repeat(3, 1fr);
	--lp-gap: 24px;
	margin-top: 56px;
	text-align: left;
}

/* Il metodo ha le colonne staccate e senza sfondo: sono passaggi, non card. */
.lp-griglia-passi {
	--lp-colonne: repeat(3, 1fr);
	--lp-gap: 44px;
}

/* --- Intro ----------------------------------------------------------- */
.lp-intro {
	background: var(--lp-tenue);
}

.lp-intro p:not(.lp-occhio):not(.lp-etichetta) {
	font-size: 18px;
	color: var(--lp-testo-3);
}

/* --- L'avvocato ------------------------------------------------------ */
.lp-avvocato .lp-due {
	--lp-colonne: 0.78fr 1.22fr;
	--lp-gap: 76px;
}

/*
   ⚠️ Il riquadro del ritratto ha il segnaposto solo finché non c'è
   un'immagine dentro: `:has(img)` lo spegne da solo quando qualcuno
   carica la foto, senza che nessuno debba togliere una classe.
*/
/*
   ⚠️⚠️ **Il riquadro ha forma e tetto propri, la foto ci si adatta.**
   Proporzioni 3:4 come nel riferimento, e al massimo 380px di larghezza:
   il ritratto caricato è un PNG **375×375**, e nella colonna intera
   (478×598) veniva ingrandito del 60% e tagliato — grande e sgranato.
   A 380px l'ingrandimento resta sotto un terzo.

   `object-fit: cover` tiene il riquadro uguale con qualsiasi foto:
   verticale, quadrata o orizzontale, cambia solo quanto se ne taglia ai
   lati, mai la forma della sezione. Provato con il ritratto e con due
   foto orizzontali degli studi.
*/
.lp-ritratto {
	width: 100%;
	max-width: 380px;
	aspect-ratio: 4 / 4;
	background: var(--lp-tenue);
	overflow: hidden;
}

.lp-ritratto:not(:has(img)) {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed #c9c2b7;
}

.lp-ritratto:not(:has(img))::after {
	content: 'ritratto avvocato';
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #a79e92;
}

/* ⚠️ Il blocco immagine porta una `<figure>`, e Gutenberg la avvolge nel
   suo contenitore: l'altezza piena va passata a tutti e due, altrimenti
   `height:100%` della figura si misura su una scatola alta quanto vuole
   e il `4/5` del riquadro non vale niente. */
.lp-ritratto > .wp-block-group__inner-container,
.lp-ritratto figure,
.lp-ritratto .wp-block-image {
	margin: 0;
	height: 100%;
}

/* ⚠️ Due classi: il CSS dei blocchi immagine mette `height:auto` su
   `.wp-block-image img`, e a parità di peso vincerebbe l'ordine dei fogli. */
.lp .lp-ritratto img {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/*
   ⚠️ `display:contents` sul contenitore interno di Gutenberg: quando
   c'è, i suoi figli entrano nella griglia del gruppo invece di formare
   una scatola sola. Senza, la riga avrebbe un elemento e l'icona
   starebbe sopra il testo su un'installazione e accanto sull'altra.
*/
.lp-punto-avv {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 16px;
	align-items: start;
	margin-top: 26px;
}

.lp-punto-avv > .wp-block-group__inner-container {
	display: contents;
}

.lp-punto-avv::before {
	content: '';
	grid-row: 1 / span 2;
	width: 42px;
	height: 42px;
	background-color: var(--lp-tenue);
	background-image: var(--lp-simbolo);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 21px 21px;
}

.lp-punto-avv h3 {
	margin: 0 0 4px;
	font-size: 17px;
	align-self: end;
}

.lp-punto-avv p {
	margin: 0;
	font-size: 15px;
	color: var(--lp-testo-2);
}

/* --- Prima di decidere ----------------------------------------------- */
.lp-prima {
	border-top: 1px solid #efebe4;
	text-align: center;
}

/*
   ⚠️ Solo i paragrafi diretti del contenitore, non quelli dentro le card:
   con un selettore discendente le tre card numerate erediterebbero la
   centratura e il `max-width`, e la griglia si sfascerebbe.
*/
.lp-prima .lp-dentro > p:not(.lp-etichetta),
.lp-prima .lp-dentro > .wp-block-group__inner-container > p:not(.lp-etichetta) {
	max-width: 44em;
	margin: 24px auto 0;
	color: var(--lp-testo-3);
}

.lp-prima h2 {
	margin-top: 20px;
	margin-bottom: 20px;
}

.lp-prima .lp-dentro {
	max-width: 1000px;
}

.lp-card-num {
	background: var(--lp-tenue);
	border-top: 2px solid var(--lp-accento);
	padding: 30px 28px 34px;
	text-align: left;
}

.lp-num {
	font-family: var(--lp-serif);
	font-size: 26px;
	font-weight: 600;
	color: var(--lp-accento);
	line-height: 1;
	margin: 0 0 14px;
}

.lp-card-num p:not(.lp-num) {
	margin: 0;
	font-size: 15px;
	color: var(--lp-testo-3);
}

/* --- Le situazioni --------------------------------------------------- */
.lp-situazioni {
	text-align: center;
}

.lp-situazione {
	background: #fff;
	padding: 34px 32px 38px;
	text-align: left;
}

.lp-situazione .lp-num {
	font-size: 22px;
}

.lp-situazione h3 {
	margin: 18px 0 10px;
	font-size: 20px;
	font-weight: 600;
}

.lp-situazione p {
	margin: 0;
	font-size: 15px;
	color: var(--lp-testo-2);
}

/* --- Il metodo ------------------------------------------------------- */
.lp-metodo {
	background: var(--lp-tenue);
}

.lp-metodo h2 {
	margin-bottom: 56px;
	max-width: 14em;
}

.lp-passo .lp-num,
.lp-passo p.lp-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 1.5px solid var(--lp-accento);
	color: var(--lp-accento);
	font-size: 19px;
	margin: 0;
}

.lp-passo h3 {
	margin: 22px 0 10px;
	font-size: 22px;
}

.lp-passo p:not(.lp-num) {
	margin: 0;
	font-size: 15px;
	color: var(--lp-testo-3);
}

/* --- Le recensioni --------------------------------------------------- */
.lp-recensioni {
	background: var(--lp-scuro);
	color: #fff;
	text-align: center;
}

.lp-recensioni h2 {
	color: #fff;
}

/*
   ⚠️⚠️ **Una recensione sola non è una griglia con due buchi.** Con
   `lp-una` la carta diventa una citazione centrata e larga: una card in
   una fila da tre si legge come «le altre due mancano», che su una
   pagina che deve rassicurare è il contrario di quello che serve.

   Quando le recensioni di separazione saranno tre, si toglie `lp-una`
   dalla griglia e tornano tre card: il resto non cambia.
*/
.lp-griglia-larga.lp-una {
	--lp-colonne: minmax(0, 760px);
	--lp-giustifica: center;
}

.lp-una .lp-recensione {
	text-align: center;
	align-items: center;
	padding: 44px 48px 40px;
	gap: 22px;
}

.lp-una .lp-recensione p:not(.lp-stelle):not(.lp-firma):not(.lp-luogo) {
	font-family: var(--lp-serif);
	font-size: clamp(20px, 2.2vw, 25px);
	line-height: 1.5;
	color: #fff;
	text-wrap: balance;
}

.lp-una .lp-firma {
	margin: 0;
}

.lp-recensioni .lp-sottotitolo {
	color: var(--lp-su-scuro-2);
}

.lp-recensioni h2 {
	font-size: clamp(30px, 3.4vw, 42px);
}

.lp-recensioni .lp-sottotitolo {
	margin: 14px 0 52px;
	font-size: 16.5px;
}

.lp-recensione {
	background: #1b3049;
	border: 1px solid rgba(255, 255, 255, 0.09);
	padding: 30px 30px 34px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.lp-recensione .lp-stelle {
	display: block;
	color: var(--lp-accento-chiaro);
	font-size: 14px;
	letter-spacing: 0.12em;
	margin-bottom: 14px;
}

.lp-recensione p:not(.lp-stelle):not(.lp-firma):not(.lp-luogo) {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
	color: var(--lp-bordo-freddo);
}

.lp-recensione .lp-stelle {
	margin-bottom: 0;
}

/* ⚠️ La firma scende in fondo: le tre card hanno testi di lunghezza
   diversa, e senza questo i nomi restano a tre altezze diverse. */
.lp-firma {
	margin: auto 0 0;
	font-weight: 600;
	font-size: 15.5px;
	color: #fff;
}

.lp-luogo {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--lp-su-scuro);
}

/* ---------------------------------------------------------------------
   La sede
   --------------------------------------------------------------------- */
.lp-sede {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	padding: 0;
}

.lp-sede-testo {
	display: flex;
	align-items: center;
	padding: 96px 64px;
}

.lp-sede-dentro {
	max-width: 520px;
	margin-left: auto;
}

.lp-sede h2 {
	font-size: clamp(28px, 3.2vw, 40px);
}

.lp-sede-presentazione {
	margin-top: 20px;
	color: var(--lp-testo-3);
}

.lp-sede-presentazione p + p {
	margin-top: 14px;
}

.lp-sede-righe {
	margin-top: 32px;
	display: grid;
	gap: 20px;
}

.lp-sede-riga {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.lp-sede-riga::before {
	width: 19px;
	height: 19px;
	margin-top: 3px;
}

.lp-sede-riga address {
	font-style: normal;
	display: grid;
	gap: 2px;
}

.lp-sede-riga strong {
	font-size: 16px;
}

.lp-sede-riga span,
.lp-sede-email {
	font-size: 14px;
	color: var(--lp-testo-2);
}

.lp-sede-tel {
	font-size: 16px;
	font-weight: 600;
}

/* --- La mappa -------------------------------------------------------- */
.lp-sede-mappa {
	min-height: 420px;
	background: var(--lp-tenue);
}

.lp-mappa {
	width: 100%;
	height: 100%;
	min-height: 420px;
	position: relative;
}

.lp-mappa iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 420px;
	border: 0;
}

.lp-mappa-segnaposto {
	position: relative;
	height: 100%;
	min-height: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 40px 32px;
	text-align: center;
	overflow: hidden;
	background: repeating-linear-gradient(45deg, rgba(20, 38, 63, 0.03) 0 12px, transparent 12px 24px), var(--lp-tenue);
}

/*
   ⚠️ La foto dello studio sta **dietro**, non accanto: la sezione sede
   del riferimento è due colonne, e aggiungerne una terza per la foto
   cambierebbe il disegno. Così lo stato «cookie rifiutati» smette di
   essere un rettangolo vuoto e diventa la sede vera.
*/
.lp-mappa-foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* ⚠️ Il velo non è decorazione: sopra una foto vera il testo scuro non
   si legge, e il contrasto cambia da una sede all'altra. */
.lp-mappa-segnaposto:has(.lp-mappa-foto)::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(244, 239, 232, 0.72), rgba(244, 239, 232, 0.94));
	z-index: 1;
}

.lp-mappa-segnaposto > *:not(.lp-mappa-foto) {
	position: relative;
	z-index: 2;
}

.lp-mappa-indirizzo {
	margin: 0;
	font-family: var(--lp-serif);
	font-size: 20px;
	font-weight: 600;
}

.lp-mappa-nota {
	margin: 0;
	font-size: 12px;
	color: var(--lp-testo-2);
	max-width: 30em;
}

.lp .lp-mappa-mostra {
	background: transparent;
	color: var(--lp-testo);
	border: 1px solid #c9c2b7;
}

.lp .lp-mappa-mostra:hover,
.lp .lp-mappa-mostra:focus {
	background: #fff;
	color: var(--lp-testo);
}

/* ---------------------------------------------------------------------
   Le FAQ
   --------------------------------------------------------------------- */
.lp-faq {
	background: var(--lp-tenue);
}

.lp-faq-griglia {
	max-width: 920px;
}

.lp-faq-titolo {
	text-align: center;
	margin-bottom: 48px;
}

.lp-faq-titolo h2 {
	margin-top: 18px;
}

.lp-faq-voce {
	border-bottom: 1px solid #e2ddd4;
}

.lp-faq-voce summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 24px 4px;
	cursor: pointer;
	list-style: none;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.45;
}

.lp-faq-voce summary::-webkit-details-marker {
	display: none;
}

.lp-faq-voce summary::marker {
	content: '';
}

.lp-piu {
	flex: none;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--lp-accento);
}

.lp-faq-voce[open] .lp-piu {
	/* ⚠️ Il segno cambia da CSS: senza, aperto e chiuso hanno lo stesso `+`. */
	font-size: 0;
}

.lp-faq-voce[open] .lp-piu::after {
	content: '−';
	font-size: 22px;
}

.lp-faq-risposta {
	padding: 0 4px 26px;
	font-size: 16px;
	color: var(--lp-testo-3);
	max-width: 54em;
}

/*
   ⚠️ **Le FAQ a blocchi**: un blocco «Dettagli» con la classe
   `lp-faq-voce`, cioè lo stesso `<details>` della parte del template —
   la domanda nel `<summary>`, la risposta nei paragrafi dentro. Due cose
   cambiano: il «+» lo disegna il CSS, perché il blocco non ha lo span del
   template, e la risposta non ha un contenitore suo.
*/
.wp-block-details.lp-faq-voce summary::after {
	content: '+';
	flex: none;
	font-family: var(--lp-sans);
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--lp-accento);
}

.wp-block-details.lp-faq-voce[open] summary::after {
	content: '−';
}

.lp .wp-block-details.lp-faq-voce > :not(summary) {
	margin: 0;
	padding: 0 4px;
	max-width: 54em;
	font-size: 16px;
	color: var(--lp-testo-3);
}

.lp .wp-block-details.lp-faq-voce > :not(summary) + :not(summary) {
	padding-top: 12px;
}

.lp .wp-block-details.lp-faq-voce > :last-child {
	padding-bottom: 26px;
}

/* ---------------------------------------------------------------------
   La fascia finale
   --------------------------------------------------------------------- */
.lp-cta {
	background: var(--lp-scuro);
	color: #fff;
	text-align: center;
	padding: 100px 0;
}

.lp-cta h2 {
	color: #fff;
}

.lp-cta p {
	margin: 20px auto 0;
	max-width: 46em;
	color: var(--lp-su-scuro-2);
}

.lp-cta-bottoni {
	margin-top: 36px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

/* =====================================================================
   Il verticale separazione, misurato

   ⚠️⚠️ **Le misure del riferimento, scritte dove valgono.** Il 16/09 la
   pagina è stata misurata contro `docs/riferimenti/landing-separazione.html`
   elemento per elemento, come le truffe: posizione dall'inizio della
   sezione, altezza, corpo, interlinea, margini. Le regole generali qui
   sopra erano nate da quel riferimento, ma molte non passavano — il
   margine dei paragrafi — o avevano preso valori a occhio. Le correzioni
   stanno qui, sotto `.lp-separazione`, perché le truffe condividono le
   regole generali e non devono muoversi: provato confrontando lo stile
   calcolato di ogni elemento delle truffe prima e dopo.
   ===================================================================== */

/* Il corpo del riferimento: 16/1.55, e ogni riga senza interlinea
   propria la eredita. */
.lp.lp-separazione {
	font-size: 16px;
	line-height: 1.55;
}

/* ⚠️ Nel riferimento solo titoli, numeri e domande delle FAQ sono in
   serif: gli h3 delle righe dell'avvocato e il nome nella card no. */
.lp-separazione .lp-punto-avv h3,
.lp-separazione .lp-card-nome {
	font-family: var(--lp-sans);
}

.lp-separazione h3 {
	line-height: 1.55;
	letter-spacing: normal;
}

.lp-separazione .lp-occhio {
	margin: 0 0 20px;
	font-size: 11.5px;
	line-height: 1.55;
	letter-spacing: 0.15em;
	color: var(--lp-accento);
}

.lp-separazione .lp-occhio::before {
	background: var(--lp-accento);
}

.lp-separazione .lp-etichetta {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.55;
	letter-spacing: 0.15em;
}

/* --- L'hero ---------------------------------------------------------- */
/* Sulla fascia blu l'occhiello è chiaro, e il trattino resta rosso. */
.lp-separazione .lp-hero .lp-occhio {
	margin-bottom: 24px;
	color: #e4e9f0;
}

.lp-separazione .lp-hero .lp-occhio::before {
	background: var(--lp-accento-chiaro);
}

.lp-separazione .lp-hero-sommario {
	margin: 26px 0 0;
	max-width: 31em;
	font-size: 18px;
	line-height: 1.65;
	color: #e4e9f1;
}

.lp-separazione .lp-punti {
	margin-top: 52px;
	max-width: 36em;
	gap: 15px;
}

.lp-separazione .lp-punti li {
	gap: 13px;
	color: #edf1f6;
}

.lp-separazione .lp-card-testa h2 {
	line-height: 1.55;
}

/*
   ⚠️ **I trattini nella testa della card sono l'avanzamento**, come nel
   riferimento, e al posto delle barre del plugin sotto. Erano due e
   disegnati: il form della separazione ha tre passi da quando il CRM
   chiede il numero dei figli, e due trattini fissi dicevano il falso.
   Li riscrive `landing-form.js` dall'indicatore del plugin — uno per
   passo, rossi fino a quello corrente — e solo allora le barre del
   plugin spariscono (`lp-passo-attivo`).
*/
.lp-card-pallini span.lp-su {
	background: var(--lp-accento);
}

.lp-separazione .lp-card-sotto {
	margin: 12px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
	color: #54637a;
}

.lp-separazione .lp-card-firma {
	margin-top: 22px;
}

.lp-separazione .lp-card-nome {
	font-size: 15.5px;
}

.lp-separazione .lp-card-nota {
	margin-top: 4px;
	font-size: 14.5px;
	color: var(--lp-testo-2);
}

.lp-separazione .lp-card .li-form {
	margin-top: 24px;
}

.lp-separazione .lp-card .li-label {
	margin-bottom: 9px;
	font-size: 15px;
	color: var(--lp-testo);
}

.lp-separazione .lp-card .li-input {
	padding: 14px;
	border-color: #d6d0c6;
	border-radius: 2px;
	font-size: 15.5px;
	line-height: 1.55;
}

.lp-separazione .lp-card .li-textarea {
	min-height: 150px;
}

/*
   ⚠️ Lo spazio fra un campo e il successivo — e fra l'ultimo campo e il
   bottone — è **uno solo**, 14px come nel riferimento. Si sommavano tre
   cose: il margine del campo, il `gap` del passo nel plugin e il margine
   del bottone, 48px in tutto.
*/
.lp-separazione .lp-card .li-step {
	gap: 14px;
}

.lp-separazione .lp-card .li-field,
.lp-separazione .lp-card .li-actions {
	margin-top: 0;
	margin-bottom: 0;
}

.lp-separazione .lp-card .li-counter {
	font-size: 13px;
	color: #7a879a;
}

.lp-separazione .lp-card .li-button {
	border-radius: 3px;
}

.lp-separazione .lp-card-privacy {
	margin-top: 16px;
	font-size: 13px;
	color: #7a879a;
	text-align: center;
}

/* --- Intro ----------------------------------------------------------- */
.lp-separazione .lp-intro .lp-due {
	--lp-gap: 80px;
}

.lp-separazione .lp-intro .lp-occhio {
	margin-bottom: 22px;
}

.lp-separazione .lp-intro p:not(.lp-occhio):not(.lp-etichetta) {
	font-size: 17.5px;
	line-height: 1.72;
}

/* --- L'avvocato ------------------------------------------------------ */
/* ⚠️ Il corpo base è 16: dove il riferimento scrive 17, si scrive 17. */
.lp-separazione .lp-avvocato p:not(.lp-occhio) {
	margin: 18px 0 0;
	max-width: 44em;
	font-size: 17px;
	line-height: 1.7;
	color: var(--lp-testo-3);
}

.lp-separazione .lp-avvocato h2 + p:not(.lp-occhio) {
	margin-top: 22px;
}

/*
   ⚠️ Nel riferimento le tre righe stanno in un contenitore con un filo
   sopra; nei blocchi quel contenitore non c'è, e aggiungerlo vorrebbe
   dire rifare i blocchi di due pagine già scritte. Il filo e lo stacco li
   prende la **prima** riga: quella che non segue un'altra riga.
*/
.lp-separazione .lp-ritratto {
	border: 8px solid #e4dfd6;
}

.lp-separazione .lp-punto-avv {
	grid-template-columns: 46px 1fr;
	gap: 0 20px;
}

.lp-separazione .lp-punto-avv:not(.lp-punto-avv + .lp-punto-avv) {
	margin-top: 40px;
	padding-top: 34px;
	border-top: 1px solid var(--lp-bordo);
}

.lp-separazione .lp-punto-avv::before {
	width: 46px;
	height: 46px;
	border-radius: 50%;
}

.lp-separazione .lp-punto-avv h3 {
	margin: 0 0 5px;
	font-size: 17px;
}

.lp-separazione .lp-avvocato .lp-punto-avv p {
	margin: 0;
	max-width: none;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--lp-testo-2);
}

/* --- Prima di decidere ----------------------------------------------- */
.lp-separazione .lp-prima {
	padding: 100px 0;
}

.lp-separazione .lp-prima h2 {
	margin: 20px 0 0;
	line-height: 1.15;
}

.lp-separazione .lp-prima .lp-dentro > p:not(.lp-etichetta),
.lp-separazione .lp-prima .lp-dentro > .wp-block-group__inner-container > p:not(.lp-etichetta) {
	font-size: 17px;
	line-height: 1.7;
}

.lp-separazione .lp-card-num .lp-num {
	margin: 0;
}

.lp-separazione .lp-card-num p:not(.lp-num) {
	margin: 20px 0 0;
	font-size: 16px;
	line-height: 1.62;
	color: #22364f;
}

/* --- La sede --------------------------------------------------------- */
/*
   ⚠️ Il testo comincia **al filo del contenitore della pagina**, come nel
   riferimento, che lo ottiene con `100vw`. Qui niente `100vw` (vedi la
   cornice del tema, in cima): la colonna è metà pagina, e metà pagina
   meno 588px è esattamente dove comincia il contenitore da 1240 più il
   suo margine di 32.
*/
.lp-separazione .lp-sede-testo {
	padding: 96px 64px 96px max(32px, calc(100% - 588px));
	background: var(--lp-tenue);
}

.lp-separazione .lp-sede-dentro {
	max-width: 34em;
	margin-left: 0;
}

.lp-separazione .lp-sede-presentazione {
	margin-top: 20px;
}

.lp-separazione .lp-sede-presentazione p {
	margin: 0;
	font-size: 17px;
	line-height: 1.7;
}

.lp-separazione .lp-sede-presentazione p + p {
	margin-top: 14px;
}

.lp-separazione .lp-sede-righe {
	margin-top: 34px;
	gap: 22px;
}

.lp-separazione .lp-sede-riga {
	gap: 18px;
	font-size: 16.5px;
}

/*
   ⚠️ L'icona nel cerchio bianco del riferimento: qui la maschera non va
   bene, perché colorerebbe il cerchio intero. Il tratto è fisso, come
   per le icone dell'avvocato — questa sezione sta sempre su fondo chiaro.
*/
.lp-separazione .lp-sede-riga::before {
	width: 42px;
	height: 42px;
	margin-top: 0;
	border-radius: 50%;
	-webkit-mask: none;
	mask: none;
	background: #fff var(--lp-simbolo) center / 19px 19px no-repeat;
}

.lp-separazione .lp-sede-riga.lp-icona-luogo {
	--lp-simbolo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314263F' stroke-width='1.5'%3E%3Cpath d='M12 21c4-4.2 6-7.3 6-9.9A6 6 0 0 0 6 11.1c0 2.6 2 5.7 6 9.9Z' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='11' r='2.2'/%3E%3C/svg%3E");
}

.lp-separazione .lp-sede-riga.lp-icona-tel {
	--lp-simbolo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314263F' stroke-width='1.5'%3E%3Cpath d='M7.7 3.9 5 5.5c-1 .7-1.4 2.1-.8 3.3 1.2 2.4 2.9 4.6 4.8 6.5 1.9 1.9 4.1 3.6 6.5 4.8 1.2.6 2.6.2 3.3-.8l1.6-2.7c.4-.6.2-1.4-.4-1.8l-3-2c-.6-.4-1.3-.3-1.8.2l-1.1 1.2c-1.9-1.1-3.5-2.7-4.6-4.6L10.7 8c.5-.5.6-1.2.2-1.8l-2-3c-.4-.6-1.2-.8-1.8-.4Z' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Indirizzo e città su una riga, centrata sul cerchio. */
.lp-separazione .lp-sede-riga address {
	display: block;
	margin: 0;
	padding-top: 9px;
}

.lp-separazione .lp-sede-riga strong,
.lp-separazione .lp-sede-riga span {
	font-size: 16.5px;
}

.lp-separazione .lp-sede-riga span,
.lp-separazione .lp-sede-email,
.lp-separazione .lp-sede-email a {
	color: var(--lp-testo-2);
}

.lp-separazione .lp-sede-riga > div {
	line-height: 1.5;
}

.lp-separazione .lp-sede-tel,
.lp-separazione .lp-sede-email {
	font-size: 16.5px;
}

.lp-separazione .lp-sede-mappa,
.lp-separazione .lp-mappa,
.lp-separazione .lp-mappa-segnaposto {
	min-height: 520px;
}

/* --- Situazioni e metodo --------------------------------------------- */
.lp-separazione .lp-situazioni h2 {
	margin-top: 20px;
}

/* ⚠️ `.lp-situazione p` dava il grigio del testo anche al numero, che è un
   paragrafo: i sei «01…06» uscivano grigi invece che rossi. */
.lp-separazione .lp-situazione .lp-num {
	color: var(--lp-accento);
}

.lp-separazione .lp-situazione p:not(.lp-num) {
	font-size: 15.5px;
	line-height: 1.65;
}

.lp-separazione .lp-passo p:not(.lp-num) {
	font-size: 16px;
	line-height: 1.65;
	color: var(--lp-testo-2);
}

/* --- Recensioni ------------------------------------------------------ */
.lp-separazione .lp-recensioni {
	padding: 100px 0;
}

.lp-separazione .lp-recensioni h2 {
	line-height: 1.14;
}

/* Lo stacco sopra la griglia lo dà il sottotitolo, come nel riferimento. */
.lp-separazione .lp-recensioni .lp-griglia-larga {
	margin-top: 0;
}

/* --- FAQ ------------------------------------------------------------- */
.lp-separazione .lp-faq-voce {
	border-bottom-color: #dfd8cd;
}

.lp-separazione .lp-faq-voce summary {
	align-items: center;
	font-family: var(--lp-serif);
	font-size: 20px;
	line-height: 1.55;
}

.lp-separazione .lp-faq-risposta {
	font-size: 16.5px;
	line-height: 1.7;
}

.lp.lp-separazione .wp-block-details.lp-faq-voce > :not(summary) {
	font-size: 16.5px;
	line-height: 1.7;
}

/* --- La fascia finale ------------------------------------------------ */
.lp-separazione .lp-cta {
	padding: 104px 0;
}

.lp-separazione .lp-cta .lp-dentro {
	max-width: 860px;
}

.lp-separazione .lp-cta p {
	margin: 22px auto 0;
	max-width: 38em;
	font-size: 17px;
	line-height: 1.7;
	color: #bfcbdc;
}

.lp-separazione .lp-cta-bottoni {
	margin-top: 38px;
}

.lp-separazione .lp-bottone,
.lp-separazione .lp-bottone-fantasma {
	padding: 15px 30px;
	border-radius: 3px;
	line-height: 1.55;
}

.lp-separazione .lp-bottone-fantasma {
	gap: 10px;
	padding: 15px 26px;
	border-color: rgba(255, 255, 255, 0.35);
}

/* =====================================================================
   Il verticale truffe

   ⚠️ Tutto qui sotto vale solo dentro `main.lp-truffe`, e la separazione
   non ne prende niente. Quello che il riferimento chiede e le regole dei
   testi non consentono — casi di successo, numeri, «come visto su» — non
   ha regole qui perché non ha markup: vedi `docs/inventario-truffe.md`.

   ⚠️ Le fasce dei template (`.lp-sezione`) hanno ognuna il proprio
   padding scritto per nome: una regola `.lp-truffe .lp-sezione`
   peserebbe più di `.lp-hero { padding:0 }` e darebbe 92px anche all'hero.
   ===================================================================== */
/*
   ⚠️⚠️ **Corpo 16/1.55 come il riferimento**, non 17/1.62: nel riferimento
   ogni riga senza interlinea propria — h3, numeri, etichette, bottoni —
   eredita 1.55, e con la nostra usciva più bassa di 3-7px una per una.

   ⚠️⚠️ **`font-optical-sizing: none`.** Il nostro Inter è variabile, con
   l'asse delle dimensioni ottiche: da solo, sopra una certa grandezza,
   passa al taglio «display», più stretto. Il riferimento usa l'Inter
   statico di Google, che quel taglio non ce l'ha. Misurato: lo stesso
   titolo a 53px è largo 790px da noi e 844 nel riferimento — da qui i
   titoli «schiacciati». Con l'asse fermo, 844.
*/
.lp.lp-truffe {
	font-size: 16px;
	line-height: 1.55;
	font-optical-sizing: none;
}

.lp-truffe h1,
.lp-truffe h2,
.lp-truffe h3 {
	letter-spacing: -0.03em;
}

.lp-truffe h2 {
	font-size: clamp(28px, 3.3vw, 38px);
	line-height: 1.15;
}

.lp-truffe h3 {
	font-size: 19px;
	line-height: 1.55;
	letter-spacing: normal;
}

/* Nel riferimento solo questi tre h3 sono stretti; gli altri no. */
.lp-truffe .lp-servizio h3,
.lp-truffe .lp-fase h3,
.lp-truffe .lp-sedi-titolo {
	letter-spacing: -0.02em;
}

.lp-truffe .lp-num {
	line-height: 1.55;
}

.lp-truffe .lp-sez {
	padding: 92px 0;
}

/* Nel riferimento l'occhiello è solo la parola, senza trattino, dentro
   una riga alta quanto il testo: da qui l'interlinea in pixel. */
.lp-truffe .lp-occhio {
	margin: 0 0 14px;
	font-size: 11.5px;
	line-height: 24.8px;
	color: var(--lp-accento);
}

.lp-truffe .lp-hero .lp-occhio {
	margin-bottom: 26px;
}

.lp-truffe .lp-occhio::before {
	display: none;
}

.lp-truffe .lp-bottone,
.lp-truffe .lp-bottone-fantasma {
	border-radius: 2px;
	font-size: 15.5px;
	line-height: 1.55;
	padding: 15px 30px;
}

/* Il bottone a filo, su fondo chiaro: «Scopri lo Studio», «Richiedi un appuntamento». */
.lp .lp-bottone-bordo,
.lp .lp-bottone-bordo:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border: 1px solid #c9c4ba;
	border-radius: 2px;
	background: transparent;
	color: var(--lp-testo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
	transition: border-color 0.15s ease;
}

.lp .lp-bottone-bordo:hover,
.lp .lp-bottone-bordo:focus {
	border-color: var(--lp-testo);
	color: var(--lp-testo);
}

.lp .lp-link-accento,
.lp .lp-link-accento:visited {
	font-size: 15px;
	font-weight: 600;
	color: var(--lp-accento);
}

.lp .lp-link-accento:hover,
.lp .lp-link-accento:focus {
	color: var(--lp-accento-scuro);
}

/* Il titolo di sezione a sinistra, con il paragrafo sotto. */
.lp-testata {
	max-width: 620px;
	margin-bottom: 52px;
}

.lp-testata p:not(.lp-occhio) {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--lp-testo-3);
}

/* --- L'hero: chiaro, non blu ----------------------------------------- */
.lp-truffe .lp-hero {
	background: linear-gradient(#fcfaf7, #fff 380px);
	color: var(--lp-testo);
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-truffe .lp-hero-griglia {
	grid-template-columns: 1.05fr 0.95fr;
	column-gap: 80px;
	padding-top: 76px;
	padding-bottom: 88px;
}

.lp-truffe .lp-hero h1 {
	color: var(--lp-testo);
	font-size: clamp(36px, 4.6vw, 53px);
	line-height: 1.08;
	letter-spacing: -0.035em;
}

.lp-truffe .lp-hero-sommario {
	font-size: 18px;
	color: var(--lp-testo-3);
}

.lp-truffe .lp-punti {
	grid-template-columns: 1fr 1fr;
	gap: 16px 28px;
	margin-top: 36px;
	max-width: 620px;
}

.lp-truffe .lp-punti li {
	gap: 11px;
	font-size: 15.5px;
	color: #22334a;
}

/* ⚠️ La spunta nel cerchio: il cerchio è nella maschera al 35%, quindi
   un colore solo fa tutti e due i toni. */
.lp-truffe .lp-punti li::before {
	margin-top: 3px;
	background-color: var(--lp-accento);
	--lp-spunta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9.25' stroke='%23000' stroke-opacity='0.35' stroke-width='1.5'/%3E%3Cpath d='M6 10.3l2.6 2.6L14.2 7.4' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lp-hero-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin-top: 38px;
}

/* --- La card: filo rosso in alto, testa separata --------------------- */
.lp-truffe .lp-card {
	border: 1px solid #e0dcd4;
	border-top: 3px solid var(--lp-accento);
	padding: 0 26px 26px;
	box-shadow:
		0 1px 2px rgba(10, 26, 47, 0.04),
		0 18px 44px -26px rgba(10, 26, 47, 0.28);
}

.lp-truffe .lp-card-testa {
	align-items: center;
	margin: 0 -26px;
	padding: 22px 26px;
	border-bottom: 1px solid #edeae4;
}

.lp-truffe .lp-card-testa h2 {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: 0;
}

/*
   ⚠️ **«Passo 1 / 3» nella testa, come nel riferimento, al posto delle
   tre barre del plugin.** Lo scrive `landing-form.js` leggendo
   l'indicatore del plugin, e solo quando ci riesce mette `lp-passo-attivo`
   sulla card: se un giorno il plugin cambiasse il suo markup, la scritta
   non comparirebbe e le barre resterebbero dov'erano. Un form a più
   passi senza indicatore sembra infinito, e si abbandona a metà.
*/
.lp-card-passo {
	flex: none;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b7a8f;
}

.lp-card.lp-passo-attivo .li-progress {
	display: none;
}

/*
   ⚠️ **Il passo dei campi del CRM su due colonne**, come la coppia del
   riferimento. Solo quel passo (`li-step-extra`): messaggio e recapiti
   restano come li disegna il plugin.

   ⚠️⚠️ **La griglia è del tema, e non le variabili del plugin.** La
   versione del plugin nel repo fa già di `.li-step` una griglia guidata
   da `--li-field-min`, ma su avvocatoaiello.com gira ancora quella di
   prima, dove il passo è una colonna flessibile: affidarsi alle
   variabili voleva dire campi allineati a destra e larghi quanto il loro
   contenuto — visto nella resa. Così regge con tutte e due.

   ⚠️ `:not([hidden])`: il plugin nasconde i passi con l'attributo, e un
   `display` scritto qui li farebbe ricomparire tutti insieme.

   ⚠️ Nessuna regola sui codici dei campi: colonne di almeno 180px, e
   quello che deve restare largo — textarea, bottoni — resta largo. Un
   campo aggiunto dal CRM trova il suo posto senza toccare qui.
*/
.lp-truffe .lp-card .li-step-extra:not([hidden]) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 14px;
	align-items: end;
}

.lp-truffe .lp-card .li-step-extra > :is(.li-actions, .li-field-textarea, .li-step-title, .li-message) {
	grid-column: 1 / -1;
}

.lp-truffe .lp-card .li-step-extra > .li-field {
	margin-bottom: 0;
}

/* ⚠️ In mezza card un'etichetta lunga va a capo: che vada in due righe
   pari, e non con l'asterisco da solo sotto. */
.lp-truffe .lp-card .li-step-extra .li-label {
	text-wrap: balance;
}

.lp-truffe .lp-card .li-step-extra > .li-actions {
	margin-top: 4px;
}

.lp-truffe .lp-card-firma {
	margin-top: 26px;
	background: var(--lp-tenue);
	border: 1px solid #ede8df;
}

.lp-truffe .lp-card-nome {
	font-size: 15px;
}

.lp-truffe .lp-card-nota {
	margin-top: 4px;
	font-size: 13.5px;
	color: #5b6a80;
}

.lp-truffe .lp-card .li-label {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5b6a80;
	margin-bottom: 7px;
}

.lp-truffe .lp-card .li-input {
	border-color: #d8d3ca;
	border-radius: 2px;
	line-height: 1.55;
	padding: 12px;
}

.lp-truffe .lp-card .li-input:focus {
	border-color: var(--lp-accento);
	box-shadow: 0 0 0 3px rgba(158, 46, 40, 0.12);
}

.lp-truffe .lp-card .li-button {
	border-radius: 2px;
	font-size: 15.5px;
	line-height: 1.55;
	padding: 15px 24px;
}

.lp-truffe .lp-card-privacy {
	font-size: 12.5px;
	color: #6b7a8f;
}

/* La fascia recensioni sotto la card, su fondo chiaro invece che blu. */
.lp-truffe .lp-facce span {
	border-color: #fff;
}

.lp-truffe .lp-fascia-numero,
.lp-truffe .lp-fascia-numero a {
	color: var(--lp-testo-2);
}

.lp-truffe .lp-fascia-numero a:hover {
	color: var(--lp-testo);
}

/* --- Servizi --------------------------------------------------------- */
.lp-servizi {
	background: var(--lp-tenue);
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-servizi .lp-griglia {
	margin-top: 0;
	background: #e4dfd6;
	border-color: #e4dfd6;
}

.lp-servizio {
	position: relative;
	background: #fff;
	padding: 34px 30px 36px;
	transition:
		box-shadow 0.18s ease,
		transform 0.18s ease;
}

.lp-servizio:hover {
	z-index: 1;
	box-shadow: 0 18px 40px -28px rgba(10, 26, 47, 0.4);
	transform: translateY(-2px);
}

.lp-servizio .lp-num {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--lp-accento);
}

.lp-servizio h3 {
	margin: 16px 0 10px;
}

.lp-servizio p:not(.lp-num) {
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: var(--lp-testo-2);
}

/* --- La firma dello Studio sotto la card ----------------------------- */
/*
   ⚠️⚠️ **Facce vere, e solo vere.** Su v1 i quattro cerchi sotto la card
   sono disegnati in CSS apposta: mettere volti di repertorio sotto una
   riga che dice «gli avvocati dello Studio» vuol dire inventare delle
   persone, ed è la stessa cosa di una recensione firmata da un nome che
   non esiste. Qui le immagini sono i ritratti dei professionisti veri,
   caricati nella Libreria media — confermato il 16/09/2026 — e per
   questo la fascia esiste.

   ⚠️⚠️ **Due modi, e lo decide il numero di immagini.** Una sola: è la
   striscia già montata coi volti in fila, e si mostra com'è — ritagliarla
   in tondo taglierebbe le facce. Più d'una: sono ritratti separati, e
   diventano cerchi sovrapposti di 12px. Lo sceglie `:has()`, quindi chi
   scrive la pagina mette le immagini che ha e non decide niente.

   ⚠️ Senza nemmeno una foto la fascia **sparisce**, invece di lasciare
   una riga di testo sospesa sotto il form: finché i ritratti non ci sono
   è meglio niente che una promessa senza volti.
*/
.lp-firma-studio {
	margin-top: 26px;
}

.lp-firma-studio > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.lp-firma-studio:not(:has(img)) {
	display: none;
}

.lp-facce-vere > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
}

.lp-facce-vere figure,
.lp-facce-vere .wp-block-image {
	margin: 0;
	line-height: 0;
	flex: none;
}

/* Una sola immagine: la striscia dei volti, alta quanto lo sarebbero i cerchi. */
.lp .lp-facce-vere img {
	display: block;
	width: auto;
	height: 44px;
	max-width: 100%;
	object-fit: contain;
}

/* Due o più: ritratti separati, e allora si ritagliano in tondo. */
.lp .lp-facce-vere:has(.wp-block-image + .wp-block-image) img {
	width: 44px;
	max-width: none;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	border: 2px solid #fff;
	box-shadow: 0 1px 2px rgba(10, 26, 47, 0.12);
}

.lp-facce-vere .wp-block-image + .wp-block-image {
	margin-left: -12px;
}

.lp-truffe p.lp-firma-studio-testo {
	margin: 0;
	max-width: 22em;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--lp-testo-2);
}

/* --- «Prima dell'appuntamento»: tre card su fondo bianco ------------- */
/*
   ⚠️ Stessa griglia e stesse card dei servizi — `lp-griglia` e
   `lp-servizio` — ma fondo bianco: due sezioni di card una sotto l'altra
   sullo stesso tenue si leggerebbero come una sola lunghissima.
*/
.lp-preparazione {
	background: #fff;
	border-bottom: 1px solid var(--lp-bordo);
}

/* --- Metodo: tre fasi in elenco, titolo a sinistra ------------------- */
.lp-fasi {
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-fasi .lp-due {
	--lp-colonne: 0.8fr 1.2fr;
	--lp-gap: 80px;
}

.lp-fasi p:not(.lp-occhio):not(.lp-num) {
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--lp-testo-3);
}

/*
   ⚠️⚠️ **Le variabili della griglia si ereditano.** Senza una colonna
   dichiarata qui, l'elenco prende il `0.8fr 1.2fr` del gruppo che lo
   contiene e le tre fasi si dispongono su due colonne. Ogni griglia
   annidata dichiara le sue.
*/
.lp-elenco-fasi {
	--lp-colonne: 1fr;
	--lp-gap: 1px;
	background: var(--lp-bordo);
	border-top: 1px solid var(--lp-bordo);
	border-bottom: 1px solid var(--lp-bordo);
}

/* ⚠️ `display:contents` sul contenitore di Gutenberg, come per le righe
   dell'avvocato: numero e testo devono essere le due celle della riga. */
.lp-fase {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 24px;
	align-items: start;
	padding: 28px 0;
	background: #fff;
}

.lp-fase > .wp-block-group__inner-container {
	display: contents;
}

.lp-fase .lp-num {
	margin: 0;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: #d6d1c7;
}

.lp-fase h3 {
	margin: 0 0 8px;
}

.lp-fasi .lp-fase p:not(.lp-num) {
	margin: 0;
	font-size: 15.5px;
	color: var(--lp-testo-2);
}

/* --- La fascia scura ------------------------------------------------- */
.lp-urgenza {
	background: var(--lp-scuro);
	color: #fff;
}

.lp-truffe .lp-urgenza {
	padding: 84px 0;
}

.lp-urgenza .lp-due {
	--lp-colonne: 1.1fr 0.9fr;
	--lp-gap: 72px;
	--lp-allinea: center;
}

.lp-urgenza h2,
.lp-urgenza h3 {
	color: #fff;
}

.lp-urgenza h2 {
	font-size: clamp(28px, 3.2vw, 36px);
}

.lp-urgenza p {
	margin: 18px 0 0;
	line-height: 1.62;
	max-width: 32em;
	font-size: 17px;
	color: var(--lp-su-scuro-2);
}

.lp-urgenza .lp-azione {
	margin-top: 26px;
}

.lp .lp-azione a,
.lp .lp-azione a:visited {
	display: inline-block;
	line-height: 1.55;
	padding: 15px 30px;
	border-radius: 2px;
	background: var(--lp-accento);
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	transition: background 0.15s ease;
}

.lp .lp-azione a:hover,
.lp .lp-azione a:focus {
	background: var(--lp-accento-scuro);
	color: #fff;
}

.lp-urgenza-nota {
	border-left: 2px solid var(--lp-accento);
	padding: 6px 0 6px 26px;
}

.lp-urgenza-nota h3 {
	margin: 0 0 10px;
}

.lp-urgenza .lp-urgenza-nota p {
	margin: 0;
	font-size: 15.5px;
	color: #b6c4d6;
}

/* --- Chi siamo ------------------------------------------------------- */
.lp-studio {
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-studio .lp-due {
	--lp-colonne: 1fr 1fr;
	--lp-gap: 72px;
}

/*
   ⚠️ **Senza foto la colonna non resta vuota: sparisce.** Lo shortcode
   non stampa niente, e il gruppo che lo contiene resta con dentro solo
   spazi — che `:empty` non prende. Si guarda se la foto c'è.
*/
.lp-studio .lp-due:not(:has(.lp-foto-sede)) {
	--lp-colonne: minmax(0, 760px);
}

.lp-studio-foto:not(:has(.lp-foto-sede)) {
	display: none;
}

.lp-studio p:not(.lp-occhio) {
	margin: 18px 0 34px;
	line-height: 1.62;
	font-size: 17px;
	color: var(--lp-testo-3);
}

.lp-righe-studio {
	--lp-colonne: 1fr;
	--lp-gap: 1px;
	background: var(--lp-bordo);
	border-top: 1px solid var(--lp-bordo);
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-riga-studio {
	background: #fff;
	padding: 22px 0;
}

.lp .lp-riga-studio h3 {
	margin: 0 0 6px;
	font-size: 16.5px;
}

.lp-studio .lp-riga-studio p {
	margin: 0;
	line-height: 1.6;
	font-size: 15px;
	color: var(--lp-testo-2);
}

.lp-foto-sede-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid #e4dfd6;
}

.lp-foto-sede-dida {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 26px;
	border: 1px solid #e4dfd6;
	border-top: 0;
}

/* ⚠️ Su una riga come nel riferimento: se non ci sta, va a capo
   l'indirizzo, non il bottone. */
.lp-foto-sede-dida > div {
	flex: 1 1 auto;
	min-width: 0;
}

.lp .lp-foto-sede-dida .lp-bottone-bordo {
	flex: none;
}

.lp-foto-sede-titolo {
	font-size: 16px;
	font-weight: 600;
}

.lp-foto-sede-luogo {
	margin-top: 4px;
	font-size: 14.5px;
	color: #5b6a80;
}

.lp .lp-foto-sede-dida .lp-bottone-bordo {
	padding: 11px 18px;
	font-size: 14.5px;
}

/* Se l'indirizzo non ci sta, va a capo intero: mai il civico da solo. */
.lp-foto-sede-luogo {
	text-wrap: balance;
}

/* --- Il professionista, con le sedi ---------------------------------- */
.lp-professionista {
	background: var(--lp-tenue);
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-prof-griglia {
	--lp-colonne: 300px 1fr;
	--lp-gap: 64px;
}

.lp-professionista .lp-ritratto {
	max-width: 300px;
	border: 8px solid #e4dfd6;
}

.lp-professionista h2 {
	font-size: clamp(28px, 3vw, 34px);
}

.lp-professionista p:not(.lp-occhio) {
	line-height: 1.62;
	max-width: 44em;
	font-size: 17px;
	color: var(--lp-testo-3);
	margin: 24px 0 auto;
}

.lp-prof-colonne {
	--lp-colonne: 1fr 1fr;
	--lp-gap: 36px;
	margin-top: 36px;
	padding-top: 32px;
	border-top: 1px solid #e4dfd6;
}

.lp .lp-prof-voce h3 {
	margin: 0 0 10px;
	font-size: 17px;
}

.lp-professionista .lp-prof-voce p {
	margin: 0;
	line-height: 1.62;
	font-size: 15px;
	color: var(--lp-testo-2);
}

.lp .lp-sedi-titolo {
	margin: 64px 0 20px;
	font-size: 20px;
}

.lp-sedi-griglia {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.lp-sede-card {
	background: #fff;
	border: 1px solid #e4dfd6;
	padding: 26px;
}

.lp-sede-card.lp-attiva {
	border-top: 2px solid var(--lp-accento);
}

/* ⚠️ Le altre città sono un collegamento, quella della pagina no: il
   testo è lo stesso, il colore lo distingue solo al passaggio. */
.lp .lp-sede-card-citta a,
.lp .lp-sede-card-citta a:visited {
	color: var(--lp-testo);
}

.lp .lp-sede-card-citta a:hover,
.lp .lp-sede-card-citta a:focus {
	color: var(--lp-accento);
}

/* La riga sotto le tre sedi: «preferisci un colloquio senza spostarti?». */
.lp-professionista .lp-sedi-nota {
	margin-top: 20px;
}

.lp-sede-card-citta {
	font-size: 17px;
	font-weight: 600;
}

.lp .lp-sede-card-indirizzo {
	margin-top: 8px;
	font-size: 15px;
	line-height: 1.55;
	color: #5b6a80;
}

/* --- Le recensioni: fondo bianco e filo di griglia ------------------- */
.lp-truffe .lp-recensioni {
	background: #fff;
	color: var(--lp-testo);
	text-align: left;
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-truffe .lp-recensioni h2 {
	color: var(--lp-testo);
	font-size: clamp(28px, 3.3vw, 38px);
}

.lp-truffe .lp-recensioni .lp-griglia-larga {
	margin-top: 48px;
}

/*
   ⚠️ **Due recensioni, due colonne larghe.** In una griglia da tre la
   terza cella vuota si legge come «ne manca una». Quando le recensioni
   delle truffe saranno tre, si toglie `lp-coppia` nei blocchi.
*/
.lp-griglia-larga.lp-coppia {
	--lp-colonne: repeat(2, 1fr);
	--lp-gap: 1px;
	background: var(--lp-bordo);
	border: 1px solid var(--lp-bordo);
}

.lp-truffe .lp-recensione {
	gap: 0;
	padding: 32px 30px;
	background: #fff;
	border: 0;
}

.lp-truffe .lp-recensione .lp-stelle {
	color: var(--lp-oro);
	letter-spacing: 0.1em;
}

.lp-truffe .lp-recensione p:not(.lp-stelle):not(.lp-firma):not(.lp-luogo) {
	margin: 18px 0 0;
	font-size: 15.5px;
	color: #22334a;
}

/* ⚠️ La firma in fondo alla card: testi di lunghezza diversa, nomi alla
   stessa altezza. */
.lp-truffe .lp-firma {
	margin: auto 0 0;
	padding-top: 22px;
	font-size: 14.5px;
	color: var(--lp-testo);
}

.lp-truffe .lp-luogo {
	color: #6b7a8f;
}

/* --- Contatti: la sede in un riquadro -------------------------------- */
.lp-truffe .lp-sede-truffe {
	padding: 92px 0;
	background: var(--lp-tenue);
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-sede-truffe .lp-testata {
	margin-bottom: 48px;
}

/*
   ⚠️ Un riquadro solo, bianco con un'ombra: niente bordi né divisori fra
   le colonne, come nel riferimento. Le due colonne sono alte uguali per
   costruzione della griglia; la mappa **riempie** la sua, non la spinge.
*/
.lp-sede-riquadro {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: #fff;
	box-shadow:
		0 1px 2px rgba(20, 38, 63, 0.05),
		0 14px 36px -14px rgba(20, 38, 63, 0.22);
}

.lp-sede-info {
	padding: 44px 40px;
}

.lp .lp-sede-info h3 {
	margin: 0 0 28px;
	font-size: 20px;
}

.lp-sede-voci {
	display: grid;
	gap: 22px;
	margin: 0;
}

/* L'icona a sinistra, etichetta e valori impilati accanto. */
.lp-sede-voce {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
}

.lp-sede-voce::before {
	grid-column: 1;
	grid-row: 1 / span 6;
	margin-top: 2px;
	background-color: var(--lp-accento);
}

.lp-sede-voce dt {
	grid-column: 2;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--lp-testo);
}

.lp-sede-voce dd {
	grid-column: 2;
	margin: 4px 0 0;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--lp-testo-2);
	overflow-wrap: anywhere;
}

.lp-sede-voce dd + dd {
	margin-top: 2px;
}

.lp .lp-sede-voce dd a {
	color: inherit;
}

.lp .lp-sede-voce dd a:hover,
.lp .lp-sede-voce dd a:focus {
	color: var(--lp-accento);
}

/* ⚠️ GP dà a `address` un margine sotto di 1.5em: fra le righe della sede
   e nelle card delle sedi farebbe un buco solo dopo l'indirizzo. */
.lp-sede-voci address,
.lp-sede-card-indirizzo {
	margin: 0;
	font-style: normal;
}

.lp-sede-riquadro .lp-icona-email {
	--lp-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='m4 7 8 6 8-6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lp-sede-riquadro .lp-icona-orari {
	--lp-icona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.lp .lp-sede-nota {
	margin: 30px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--lp-testo-2);
}

.lp .lp-sede-nota a {
	color: var(--lp-accento);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lp .lp-sede-nota a:hover,
.lp .lp-sede-nota a:focus {
	color: var(--lp-accento-scuro);
}

/*
   ⚠️⚠️ **La mappa prende l'altezza della colonna accanto**, invece di
   imporne una: `.lp-mappa` è stesa sulla cella, e segnaposto e iframe la
   riempiono. I 420px generici di `.lp-sede-mappa` qui diventano un minimo,
   per quando le informazioni sono poche. Le regole della separazione non
   si toccano: tutto passa da `.lp-sede-riquadro`.
*/
.lp-sede-riquadro .lp-sede-mappa {
	position: relative;
	min-height: 380px;
}

.lp-sede-riquadro .lp-mappa {
	position: absolute;
	inset: 0;
	height: auto;
	min-height: 0;
}

.lp-sede-riquadro .lp-mappa iframe,
.lp-sede-riquadro .lp-mappa-segnaposto {
	height: 100%;
	min-height: 0;
}

/* --- La fascia finale e le FAQ, che qui vengono dopo ----------------- */
.lp-truffe .lp-cta {
	padding: 88px 0;
}

.lp-truffe .lp-cta .lp-dentro {
	max-width: 820px;
}

.lp-truffe .lp-cta p {
	margin: 18px auto 0;
	line-height: 1.62;
	max-width: 36em;
	font-size: 17.5px;
	color: var(--lp-su-scuro-2);
}

.lp-truffe .lp-cta-bottoni {
	margin-top: 30px;
	align-items: stretch;
}

.lp-truffe .lp-faq {
	padding: 92px 0;
	background: #fff;
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-truffe .lp-faq-griglia {
	max-width: 880px;
}

.lp-truffe .lp-faq-titolo {
	text-align: left;
	margin-bottom: 44px;
}

.lp-truffe .lp-faq-titolo .lp-etichetta {
	margin: 0;
	font-size: 11.5px;
	line-height: 24.8px;
	color: var(--lp-accento);
}

.lp-truffe .lp-faq-titolo h2 {
	margin-top: 14px;
}

.lp-truffe .lp-faq-elenco {
	border-top: 1px solid var(--lp-bordo);
}

.lp-truffe .lp-faq-voce {
	border-bottom-color: var(--lp-bordo);
}

.lp-truffe .lp-faq-voce:hover {
	background: #fcfaf7;
}

.lp-truffe .lp-faq-voce summary {
	padding: 22px 0;
	line-height: 1.55;
}

/* Il «+» del riferimento è a 20px con l'interlinea del testo: è lui a
   dare l'altezza alla riga della domanda. */
.lp-truffe .lp-piu,
.lp-truffe .lp-faq-voce[open] .lp-piu::after {
	font-size: 20px;
	line-height: 1.55;
}

.lp-truffe .lp-faq-voce[open] .lp-piu {
	font-size: 0;
}

.lp-truffe .lp-faq-risposta {
	padding: 0 0 24px;
	max-width: 60em;
	font-size: 15.5px;
	color: var(--lp-testo-2);
}

.lp-truffe .wp-block-details.lp-faq-voce summary::after {
	font-size: 20px;
	line-height: 1.55;
}

.lp.lp-truffe .wp-block-details.lp-faq-voce > :not(summary) {
	padding-left: 0;
	padding-right: 0;
	max-width: 60em;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--lp-testo-2);
}

.lp.lp-truffe .wp-block-details.lp-faq-voce > :last-child {
	padding-bottom: 24px;
}

/* ---------------------------------------------------------------------
   Il riferimento truffe a blocchi, 1:1 (`docs/blocchi-truffe-v2.html`)

   ⚠️⚠️ **Qui la pagina intera è nel contenuto, hero compreso**, e il
   template non stampa il suo: lo capisce da `[lp_form]` nel contenuto
   (`corpo-landing.php`). Le sezioni che v1 aveva già — servizi, fasi,
   fascia scura, chi siamo, professionista, recensioni, contatti, fascia
   finale, FAQ — riusano le stesse classi e le stesse regole misurate.
   Queste sono le regole per ciò che v1 non aveva: l'hero costruito a
   blocchi, «Come visto su», i numeri, i casi di successo e la riga sotto
   i bottoni della fascia finale. Sede, foto e sedi invece **non** sono
   scritte a mano: le stampano `[lp_sede]`, `[lp_foto_sede]` e `[lp_sedi]`
   coi dati della metabox, e usano le regole di v1.
   Misure e colori trascritti da `docs/riferimenti/landing-truffe.html`.

   ⚠️ **Additive, non sostitutive.** Le classi nuove non toccano v1; le
   classi condivise ricevono solo regole su elementi che v1 non ha (un
   `<p>` dove v1 ha un `<div>`), controllato confrontando lo stile
   calcolato di v1 prima e dopo: zero differenze.

   ⚠️ I paragrafi: `:where(.lp) p` dà 18px sotto a ogni `<p>` che non è
   l'ultimo. Ogni `<p>` che qui fa da riga di dato (numero, etichetta,
   firma, indirizzo) ha il margine scritto per nome.
   --------------------------------------------------------------------- */

/* --- L'hero a blocchi ------------------------------------------------ */
.lp-truffe .lp-sez.lp-hero {
	padding: 0;
}

/* ⚠️ La griglia dell'hero e i flex dei link e della fascia finale hanno
   il contenitore interno di Gutenberg fra sé e i figli: `contents` lo
   toglie di mezzo, come per le altre griglie a blocchi. */
.lp-hero-griglia > .wp-block-group__inner-container,
.lp-hero-link > .wp-block-group__inner-container,
.lp-cta-bottoni > .wp-block-group__inner-container {
	display: contents;
}

/* L'evidenziatura sotto «truffa finanziaria»: un'ombra interna, come nel riferimento. */
.lp-truffe .lp-evidenza {
	box-shadow: inset 0 -0.14em #e8d2ce;
}

.lp-truffe p.lp-card-nome,
.lp-truffe p.lp-card-nota {
	margin: 0;
}

.lp-truffe p.lp-card-nota {
	margin-top: 4px;
}

.lp-truffe .lp-hero-link p {
	margin: 0;
}

.lp .lp-hero-bordo a,
.lp .lp-hero-bordo a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 26px;
	border: 1px solid #c9c4ba;
	border-radius: 2px;
	color: var(--lp-testo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
	transition: border-color 0.15s ease;
}

.lp .lp-hero-bordo a:hover,
.lp .lp-hero-bordo a:focus {
	border-color: var(--lp-testo);
	color: var(--lp-testo);
}

.lp .lp-hero-accento a,
.lp .lp-hero-accento a:visited {
	font-size: 15px;
	font-weight: 600;
	color: var(--lp-accento);
}

.lp .lp-hero-accento a:hover,
.lp .lp-hero-accento a:focus {
	color: var(--lp-accento-scuro);
}

/* --- «Come visto su» -------------------------------------------------- */
.lp-truffe .lp-sez.lp-visto {
	padding: 0;
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-visto-riga {
	padding-top: 34px;
	padding-bottom: 34px;
}

.lp-visto-riga > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 48px;
}

.lp-truffe p.lp-visto-etichetta {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8b98a9;
}

.lp-visto-loghi {
	opacity: 0.5;
}

.lp-visto-loghi > .wp-block-group__inner-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 44px;
}

.lp-truffe p.lp-logo {
	margin: 0;
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

/*
   ⚠️ **Il logo vero al posto del nome scritto.** Un blocco immagine
   dentro il gruppo, uno per portale: si può sostituire un nome alla
   volta, man mano che i file arrivano, e i due modi convivono nella
   stessa riga.

   ⚠️ **L'altezza è una per tutti, la larghezza segue.** I loghi hanno
   proporzioni molto diverse — una testata lunga e un simbolo quadrato —
   e senza questa regola uno uscirebbe grande il triplo dell'altro,
   perché il blocco immagine stampa la dimensione del file.

   ⚠️ **In grigio**: la fascia è una nota di servizio, non un carosello
   di marchi, e il contenitore è già al 50% di opacità. Un logo a colori
   lì dentro strillerebbe più del titolo della pagina.
*/
.lp-visto-loghi figure,
.lp-visto-loghi .wp-block-image {
	margin: 0;
	line-height: 0;
}

.lp-visto-loghi img {
	display: block;
	width: auto;
	height: 26px;
	max-width: 170px;
	object-fit: contain;
	filter: grayscale(1);
}

/* --- I numeri --------------------------------------------------------- */
.lp-truffe .lp-sez.lp-numeri {
	padding: 0;
	background: var(--lp-scuro);
	color: #fff;
	border-top: 3px solid var(--lp-accento);
}

.lp-numeri-griglia {
	padding-top: 56px;
	padding-bottom: 56px;
}

.lp-numeri-griglia > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}

.lp-numero {
	border-left: 1px solid rgba(255, 255, 255, 0.16);
	padding-left: 22px;
}

.lp-truffe p.lp-numero-valore {
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

.lp-truffe p.lp-numero-etichetta {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: var(--lp-su-scuro);
}

/* --- I casi di successo ---------------------------------------------- */
.lp-truffe .lp-casi {
	background: var(--lp-tenue);
	border-bottom: 1px solid var(--lp-bordo);
}

.lp-casi .lp-testata {
	margin-bottom: 48px;
}

.lp-casi-griglia {
	margin-top: 0;
}

.lp-caso {
	background: #fff;
	border: 1px solid #e4dfd6;
	border-top: 2px solid var(--lp-scuro);
	padding: 30px;
}

.lp-caso-testa {
	padding-bottom: 16px;
	border-bottom: 1px solid #edeae4;
}

.lp-caso-testa > .wp-block-group__inner-container {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.lp-truffe p.lp-caso-num {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}

.lp-truffe p.lp-caso-tempo {
	margin: 0;
	font-size: 13px;
	color: #6b7a8f;
}

.lp-truffe p.lp-caso-importo {
	margin: 20px 0 8px;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.035em;
	color: var(--lp-accento);
}

.lp-truffe .lp-caso p:not(.lp-caso-num):not(.lp-caso-tempo):not(.lp-caso-importo):not(.lp-caso-cit) {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--lp-testo-2);
}

/* --- Tre recensioni, tre colonne a filo ------------------------------ */
/* Nel riferimento «Recensione Google» sta attaccato al nome. Solo qui:
   v1 ha due recensioni e resta com'è misurata. */
.lp-truffe .lp-tre .lp-luogo {
	margin-top: 0;
}

.lp-griglia-larga.lp-tre {
	--lp-colonne: repeat(3, 1fr);
	--lp-gap: 1px;
	background: var(--lp-bordo);
	border: 1px solid var(--lp-bordo);
}

/* --- La fascia finale: rosso al telefono, e la riga sotto ------------ */
.lp-truffe .lp-cta-bottoni p {
	margin: 0;
	max-width: none;
	font-size: 15.5px;
}

.lp .lp-cta-rosso a,
.lp .lp-cta-rosso a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	border-radius: 2px;
	background: var(--lp-accento);
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.55;
	transition: background 0.15s ease;
}

.lp .lp-cta-rosso a:hover,
.lp .lp-cta-rosso a:focus {
	background: var(--lp-accento-scuro);
	color: #fff;
}

.lp .lp-cta-fantasma a,
.lp .lp-cta-fantasma a:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 30px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 2px;
	color: #fff;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.55;
	transition: border-color 0.15s ease;
}

.lp .lp-cta-fantasma a:hover,
.lp .lp-cta-fantasma a:focus {
	border-color: #fff;
	color: #fff;
}

.lp-cta-garanzie {
	margin-top: 44px;
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lp-cta-garanzie > .wp-block-group__inner-container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 44px;
}

.lp-truffe .lp-cta-garanzie p {
	margin: 0;
	max-width: none;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--lp-su-scuro);
}

/* ---------------------------------------------------------------------
   Il riferimento separazione a blocchi (`docs/blocchi-separazione-catania.html`)

   ⚠️⚠️ **Come la v2 delle truffe: la pagina intera nel contenuto, hero
   compreso**, riconosciuta da `[lp_form]`. Le sezioni riusano le classi e
   le misure della separazione qui sopra; queste sono solo le regole per
   ciò che la pagina da template non aveva — l'hero a blocchi con la foto
   sotto il blu, i volti accanto al voto, la fascia finale a blocchi.
   Misure e colori da `docs/riferimenti/landing-separazione.html`.

   ⚠️ **Additive**: nessuna regola qui cambia la separazione da template,
   tranne la trama a righe dell'hero e il ritratto 3:4, che vengono dal
   riferimento e mancavano a tutte e due.
   --------------------------------------------------------------------- */

/* --- L'hero: la foto sotto il blu, la trama sopra -------------------- */
.lp-separazione .lp-sez.lp-hero {
	padding: 0;
}

/*
   ⚠️ La foto è un blocco immagine e si cambia dall'editor, città per
   città. Sta **sotto** il blu: `opacity` bassa sul fondo scuro della
   sezione, poi la trama a righe e la luce del riferimento sopra, e il
   contenuto sopra tutto. Il testo bianco resta leggibile qualunque foto
   si metta, perché a comandare è il blu.
*/
.lp .lp-hero-sfondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	line-height: 0;
}

.lp .lp-hero-sfondo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0.1;
	filter: grayscale(1);
}

.lp-separazione .lp-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.lp-separazione .lp-hero-griglia {
	z-index: 2;
}

/* La card a blocchi: nome e nota sono paragrafi, e i paragrafi hanno 18px sotto. */
.lp-separazione p.lp-card-nome {
	margin: 0;
}

.lp-separazione p.lp-card-nota {
	margin: 4px 0 0;
}

/* --- I volti accanto al voto ----------------------------------------- */
.lp-separazione .lp-voto-studio > .wp-block-group__inner-container {
	gap: 16px;
}

.lp-separazione .lp-voto-studio .lp-facce-vere img {
	height: 40px;
}

/* --- Il ritratto: 3:4 e largo quanto la colonna, come nel riferimento - */
.lp-separazione .lp-ritratto {
	max-width: 300px;
	aspect-ratio: 4 / 4;
}

/* --- La fascia finale a blocchi -------------------------------------- */
.lp-separazione .lp-cta .lp-cta-bottoni p {
	margin: 0;
	max-width: none;
}

.lp-separazione .lp-cta-rosso a,
.lp-separazione .lp-cta-rosso a:visited,
.lp-separazione .lp-cta-fantasma a,
.lp-separazione .lp-cta-fantasma a:visited {
	font-size: 16px;
	border-radius: 3px;
}

.lp-separazione .lp-cta-fantasma a,
.lp-separazione .lp-cta-fantasma a:visited {
	gap: 10px;
	padding: 15px 26px;
	border-color: rgba(255, 255, 255, 0.35);
}

/* Il telefono col suo simbolo, come il bottone della fascia da template. */
.lp .lp-cta-tel a::before {
	content: '';
	width: 17px;
	height: 17px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--lp-icona-tel) center / contain no-repeat;
	mask: var(--lp-icona-tel) center / contain no-repeat;
	--lp-icona-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M7.7 3.9 5 5.5c-1 .7-1.4 2.1-.8 3.3 1.2 2.4 2.9 4.6 4.8 6.5 1.9 1.9 4.1 3.6 6.5 4.8 1.2.6 2.6.2 3.3-.8l1.6-2.7c.4-.6.2-1.4-.4-1.8l-3-2c-.6-.4-1.3-.3-1.8.2l-1.1 1.2c-1.9-1.1-3.5-2.7-4.6-4.6L10.7 8c.5-.5.6-1.2.2-1.8l-2-3c-.4-.6-1.2-.8-1.8-.4Z' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   L'avviso agli amministratori

   ⚠️ Lo vede solo chi può rimediare, e deve stonare: se somiglia al
   resto della pagina nessuno lo legge.
   --------------------------------------------------------------------- */
.lp-avviso {
	background: #fbecea;
	border-left: 4px solid var(--lp-accento);
	color: #8c2f29;
	padding: 16px 18px;
	font-size: 14px;
}

/* ---------------------------------------------------------------------
   Schermi stretti

   ⚠️ Una sola soglia, a 900px: l'hero, la sede e tutte le griglie
   passano a una colonna insieme. Soglie diverse per sezione producono
   larghezze che non si corrispondono a metà strada, e quello si vede.
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
	.lp {
		--lp-lato: 20px;
	}

	.lp-sezione,
	.lp .lp-sez {
		padding: 64px 0;
	}

	/*
	   ⚠️⚠️ **Su telefono il form viene subito dopo il titolo**, prima dei
	   paragrafi: chi arriva da un annuncio deve avere davanti il modulo,
	   non tre paragrafi da scorrere. È l'ordine del markup; qui basta una
	   colonna sola.
	*/
	.lp-hero-griglia {
		grid-template-columns: 1fr;
		grid-template-areas:
			'titolo'
			'lato'
			'testo';
		grid-template-rows: auto;
		gap: 0;
		padding-top: 52px;
		padding-bottom: 60px;
	}

	.lp-hero-lato {
		margin-top: 28px;
	}

	.lp-hero-testo {
		margin-top: 12px;
	}

	/* ⚠️ Una colonna sola per tutte: si cambiano le variabili, non i
	   selettori. Ripeterli qui è il posto in cui se ne dimentica uno. */
	.lp-due,
	.lp-avvocato .lp-due,
	.lp-griglia,
	.lp-griglia-larga,
	.lp-griglia-larga.lp-una,
	.lp-griglia-passi {
		--lp-colonne: 1fr;
	}

	.lp-due,
	.lp-griglia-passi {
		--lp-gap: 32px;
	}

	.lp-griglia,
	.lp-griglia-larga {
		margin-top: 32px;
	}

	.lp-faq-griglia {
		gap: 32px;
	}

	.lp-avvocato .lp-due {
		--lp-gap: 32px;
	}

	/* In colonna unica il ritratto da 380px starebbe appeso a sinistra. */
	.lp-ritratto {
		margin-left: auto;
		margin-right: auto;
	}

	.lp-sede {
		grid-template-columns: 1fr;
	}

	.lp-sede-testo {
		padding: 64px var(--lp-lato);
	}

	.lp-sede-dentro {
		margin-left: 0;
	}

	.lp-sede-mappa,
	.lp-mappa,
	.lp-mappa iframe,
	.lp-mappa-segnaposto {
		min-height: 320px;
	}

	.lp-card {
		padding: 26px 22px 24px;
	}

	.lp .lp-card .li-row {
		grid-template-columns: 1fr;
	}

	.lp-cta {
		padding: 64px 0;
	}

	/* --- La separazione ----------------------------------------------
	   ⚠️ Come per le truffe: le regole misurate hanno due classi, e la
	   soglia generale ne ha una. */
	.lp-separazione .lp-prima,
	.lp-separazione .lp-recensioni,
	.lp-separazione .lp-cta {
		padding: 64px 0;
	}

	/* ⚠️ Come sulle truffe: la soglia generale dava 64px anche all'hero,
	   sommati al padding della sua griglia. */
	.lp-separazione .lp-hero {
		padding: 0;
	}

	.lp-separazione .lp-intro .lp-due {
		--lp-gap: 32px;
	}

	.lp-separazione .lp-sede-testo {
		padding: 64px var(--lp-lato);
	}

	.lp-separazione .lp-sede-mappa,
	.lp-separazione .lp-mappa,
	.lp-separazione .lp-mappa-segnaposto {
		min-height: 320px;
	}

	.lp-separazione .lp-punti {
		margin-top: 36px;
	}

	/* --- Le truffe ---------------------------------------------------
	   ⚠️ Qui si ripetono le regole delle truffe che hanno due classi: la
	   soglia generale ne ha una, e perderebbe. */
	.lp-truffe .lp-sez,
	.lp-truffe .lp-urgenza,
	.lp-truffe .lp-sede-truffe,
	.lp-truffe .lp-cta,
	.lp-truffe .lp-faq {
		padding: 64px 0;
	}

	/* ⚠️ La soglia generale dà 64px a ogni `.lp-sezione`, hero compreso,
	   e si sommava al padding della griglia: 116px vuoti sopra
	   l'occhiello. L'hero ha già il suo, dentro. */
	.lp-truffe .lp-hero {
		padding: 0;
	}

	.lp-truffe .lp-hero-griglia {
		grid-template-columns: 1fr;
		gap: 0;
		padding-top: 52px;
		padding-bottom: 60px;
	}

	.lp-truffe .lp-punti {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.lp-fasi .lp-due,
	.lp-urgenza .lp-due,
	.lp-studio .lp-due,
	.lp-studio .lp-due:not(:has(.lp-foto-sede)),
	.lp-prof-griglia,
	.lp-prof-colonne,
	.lp-griglia-larga.lp-coppia {
		--lp-colonne: 1fr;
	}

	.lp-fasi .lp-due,
	.lp-urgenza .lp-due,
	.lp-studio .lp-due,
	.lp-prof-griglia,
	.lp-prof-colonne {
		--lp-gap: 32px;
	}

	.lp-testata {
		margin-bottom: 32px;
	}

	.lp-fase {
		grid-template-columns: 44px 1fr;
		gap: 16px;
		padding: 22px 0;
	}

	.lp-fase .lp-num {
		font-size: 26px;
	}

	.lp .lp-sedi-titolo {
		margin-top: 44px;
	}

	.lp-sedi-griglia {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.lp-sede-riquadro {
		grid-template-columns: minmax(0, 1fr);
	}

	.lp-sede-info {
		padding: 30px 22px;
	}

	.lp .lp-sede-info h3 {
		margin-bottom: 24px;
	}

	/* ⚠️ Sotto le informazioni la mappa torna nel flusso: il segnaposto è
	   alto quanto il suo contenuto, l'iframe segue la larghezza. Nessuna
	   altezza fissa, quindi nessun vuoto sotto il pulsante. */
	.lp-sede-riquadro .lp-sede-mappa {
		position: static;
		min-height: 0;
	}

	.lp-sede-riquadro .lp-mappa {
		position: relative;
		inset: auto;
	}

	.lp-sede-riquadro .lp-mappa-segnaposto {
		height: auto;
		padding: 32px 22px;
	}

	.lp-sede-riquadro .lp-mappa iframe {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.lp-truffe .lp-card {
		padding: 0 20px 22px;
	}

	.lp-truffe .lp-card-testa {
		margin: 0 -20px;
		padding: 18px 20px;
	}

	.lp-truffe .lp-recensione {
		padding: 26px 22px;
	}

	.lp-foto-sede-dida {
		flex-wrap: wrap;
	}

	.lp-truffe .lp-card .li-step-extra:not([hidden]) {
		grid-template-columns: 1fr;
	}

	/* --- Il riferimento truffe a blocchi (v2) ------------------------ */
	.lp-numeri-griglia > .wp-block-group__inner-container {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
	}

	.lp-visto-riga > .wp-block-group__inner-container,
	.lp-visto-loghi > .wp-block-group__inner-container {
		gap: 20px 28px;
	}

	/* Con quattro loghi su una riga da 390px, 26px sono troppi. */
	.lp-visto-loghi img {
		height: 20px;
		max-width: 130px;
	}

	.lp-griglia-larga.lp-tre {
		--lp-colonne: 1fr;
	}

	.lp-cta-garanzie > .wp-block-group__inner-container {
		gap: 12px 32px;
	}
}

/* ⚠️ Chi ha chiesto meno animazioni non deve vedere transizioni. */
@media (prefers-reduced-motion: reduce) {
	.lp * {
		transition: none !important;
		animation: none !important;
	}
}