/* ══ Il riquadro della newsletter ═══════════════════════════════════════
   ⚠️ SU TELEFONO NON COPRE LO SCHERMO: sale dal basso e lascia vedere la
   pagina sotto. Per il cliente, che non deve sentirsi preso in trappola,
   e per Google, che penalizza le finestre che coprono il contenuto sui
   telefoni ("intrusive interstitial"). Su schermo grande è una finestra
   al centro, dove quella regola non vale.

   ⚠️ GLI ANGOLI SONO VIVI E IL TASTO È #12303f, come il richiamo della
   consulenza e come il resto del sito. Arrotondato e nero, il riquadro
   sembrava arrivare da un'altra parte: il momento in cui si chiede un
   indirizzo è il peggiore in cui non sembrare sé stessi.             */

.pm-nl { position: fixed; inset: 0; z-index: 99990; }
.pm-nl[hidden] { display: none; }

.pm-nl__velo {
	position: absolute;
	inset: 0;
	background: rgba(20, 18, 16, .45);
	opacity: 0;
	transition: opacity .25s ease;
}
.pm-nl--su .pm-nl__velo { opacity: 1; }

.pm-nl__box {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -46%);
	width: min(460px, calc(100vw - 32px));
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #e7e2db;
	padding: 0 0 26px;
	box-shadow: 0 24px 60px rgba(28, 24, 20, .22);
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	font-family: Poppins, Inter, "Trebuchet MS", sans-serif;
	text-align: center;
}
.pm-nl--su .pm-nl__box { opacity: 1; transform: translate(-50%, -50%); }

.pm-nl__x {
	position: absolute;
	top: 6px; right: 10px;
	border: 0; background: none;
	font-size: 24px; line-height: 1;
	color: #b3aca3; cursor: pointer;
	padding: 6px 8px;
	z-index: 2;
}
.pm-nl__x:hover { color: #1c1c1c; }

/* ── la fascia color crema in alto: logo e occhiello ─────────────────── */
.pm-nl__testata {
	background: #f6f4f1;
	border-bottom: 1px solid #ece7e0;
	padding: 24px 24px 18px;
}
.pm-nl__logo { margin-bottom: 14px; }
/* ⚠️ multiply: il PNG del logo ha il fondo bianco, e sulla fascia color
   crema si vedrebbe come un rettangolo incollato sopra. */
.pm-nl__logo img { height: 26px; width: auto; display: block; margin: 0 auto; mix-blend-mode: multiply; }

.pm-nl__occhiello {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #a8a39c;
}

.pm-nl__titolo {
	margin: 26px 28px 20px;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: .2px;
	color: #1c1c1c;
}
/* ⚠️ la cifra in risalto, ma senza gridare: è la ragione per cui si legge
   il resto della frase. */
.pm-nl__cifra {
	font-weight: 700;
	color: #12303f;
	white-space: nowrap;
}

.pm-nl__form { padding: 0 28px; }

.pm-nl__campo input {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 14px;
	border: 1px solid #d8d2c8;
	border-radius: 0;
	font-size: 15px;
	text-align: center;
	background: #fff;
	color: #1c1c1c;
}
.pm-nl__campo input::placeholder { color: #a8a39c; }
.pm-nl__campo input:focus { outline: 2px solid #12303f; outline-offset: 1px; }

.pm-nl__consenso {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	margin: 14px 0 16px;
	text-align: left;
	/* ⚠️ PIÙ PICCOLO DEL RESTO, ma non illeggibile. Sotto gli 11px la frase
	   del consenso smette di essere «chiara e comprensibile» come la norma
	   chiede, e un consenso che non si legge non è un consenso. Il grigio
	   resta sopra 4.5:1 sul bianco. */
	font-size: 11px;
	line-height: 1.45;
	color: #6b6b6b;
	cursor: pointer;
}
.pm-nl__consenso input { margin-top: 1px; flex: 0 0 auto; }
.pm-nl__consenso a { color: #1c1c1c; }

.pm-nl__btn {
	width: 100%;
	padding: 15px 16px;
	border: 0;
	background: #12303f;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	border-radius: 0;
	cursor: pointer;
	transition: background .18s ease;
}
.pm-nl__btn:hover { background: #1c5f8a; }
.pm-nl__btn:disabled { opacity: .55; cursor: default; }

.pm-nl__esito {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #25603f;
	/* vuoto non occupa posto: con una riserva fissa, fra il tasto e «No
	   grazie» restava un buco che sembrava un errore di impaginazione */
	min-height: 0;
}
.pm-nl__esito:empty { margin: 0; }

.pm-nl__no {
	display: block;
	margin: 14px auto 0;
	border: 0; background: none;
	font-size: 11.5px;
	letter-spacing: .3px;
	color: #a8a39c;
	text-decoration: underline;
	cursor: pointer;
}
.pm-nl__no:hover { color: #1c1c1c; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ── telefono: foglio dal basso, la pagina resta visibile ─────────────── */
@media (max-width: 600px) {
	.pm-nl__velo { background: rgba(20, 18, 16, .3); }
	.pm-nl__box {
		top: auto;
		bottom: 0;
		left: 0;
		transform: translate(0, 100%);
		width: 100%;
		max-width: none;
		border: 0;
		border-top: 1px solid #e7e2db;
		padding-bottom: 20px;
	}
	.pm-nl--su .pm-nl__box { transform: translate(0, 0); }
	/* ⚠️ SUL TELEFONO SI STRINGE TUTTO, e non è gusto: il foglio deve
	   restare sotto la metà dello schermo, se no è una finestra che copre
	   il contenuto e Google la penalizza. Misurato: 46%. Chi tocca queste
	   righe rimisuri — il banco .mjs stampa la percentuale. */
	/* ⚠️ sul telefono logo e occhiello stanno sulla stessa riga: in colonna
	   si mangiano da soli venticinque punti di altezza, e sono proprio
	   quelli che fanno passare il foglio sopra la metà dello schermo. */
	.pm-nl__testata {
		padding: 11px 16px;
		display: flex; align-items: center; justify-content: center; gap: 12px;
	}
	.pm-nl__logo { margin-bottom: 0; }
	.pm-nl__logo img { height: 18px; }
	.pm-nl__occhiello { font-size: 9px; letter-spacing: 2px; }
	.pm-nl__titolo { margin: 13px 18px 11px; font-size: 16.5px; line-height: 1.35; }
	.pm-nl__form { padding: 0 18px; }
	/* ⚠️⚠️ SEDICI PIXEL, E NON È GUSTO (15/10). Sotto i 16 Safari su iPhone
	   INGRANDISCE la pagina da solo appena si tocca la casella: il foglio
	   salta mezzo fuori schermo mentre si sta scrivendo l'indirizzo, e chi
	   si stava iscrivendo chiude. Era a 14,5. */
	.pm-nl__campo input { padding: 11px 12px; font-size: 16px; }
	.pm-nl__consenso { margin: 10px 0 12px; font-size: 10.5px; line-height: 1.4; }
	.pm-nl__btn { padding: 13px 14px; }
	.pm-nl__esito { font-size: 12px; min-height: 0; }
	.pm-nl__no { margin-top: 10px; }
	.pm-nl__x { top: 2px; right: 6px; font-size: 22px; }
}

/* ── ⚠️⚠️ I TELEFONI BASSI (15/10) ───────────────────────────────────────
 *
 * Il foglio ha dentro sempre le stesse cose, quindi la sua altezza non
 * cambia col telefono: cambia la QUOTA di schermo che si prende. Misurato
 * il 15/10 su tre telefoni: 37% su un iPhone 14 (844 di altezza), 47% su
 * un iPhone SE (667), e 55% su un Android piccolo (640) — cioè sopra la
 * soglia, su quello più diffuso fra chi ha un telefono vecchio.
 *
 * La misura scritta nel documento, «44%», era presa su UN telefono solo.
 * Qui si stringe dove serve, e il banco adesso misura tutti e tre.
 */
@media (max-width: 600px) and (max-height: 700px) {
	.pm-nl__box { padding-bottom: 12px; }
	.pm-nl__testata { padding: 8px 16px; }
	.pm-nl__logo img { height: 15px; }
	.pm-nl__titolo { margin: 8px 16px 7px; font-size: 15.5px; line-height: 1.3; }
	.pm-nl__consenso { margin: 6px 0 8px; line-height: 1.3; }
	/* ⚠️⚠️ IL TASTO NON SI STRINGE. La prima stesura di questo blocco gli
	   aveva tolto due pixel di imbottitura per parte, e il tasto era sceso
	   a 36: un dito non lo prende, e si guadagnavano quattro pixel sul
	   foglio rinunciando all'unica cosa che il foglio deve far fare. I
	   pixel si tolgono dai margini, non dai bersagli. */
	.pm-nl__btn { padding: 13px 14px; }
	.pm-nl__esito { min-height: 0; margin: 2px 0 0; }
	.pm-nl__no { margin-top: 5px; }
}

/* ⚠️ chi ha chiesto meno animazioni non le deve subire */
@media (prefers-reduced-motion: reduce) {
	.pm-nl__velo, .pm-nl__box { transition: none; }
}