/* Arcobaleno Multiservizi — colori presi dalla divisa: blu tuta, nebbia del trattamento, rosso delle cuffie. */
:root {
	--tuta: #0B3139;
	--tuta-2: #0F434D;
	--inchiostro: #03262C;
	--inchiostro-rgb: 3, 38, 44;
	--nebbia: #F2F5F3;
	--carta: #FFFFFF;
	/* L'accento ha due ruoli distinti: fondo di un pulsante e testo su bianco.
	   Con un giallo il secondo non funziona, quindi sono due variabili separate. */
	--azione: #CEEB53;
	--azione-scuro: #BCD944;
	--su-azione: #0A2A30;
	--richiamo: #116B62;
	--segnale: var(--azione);
	--segnale-scuro: var(--azione-scuro);
	--grigio: #4F5D6C;
	--linea: #E1E7E3;
	--acqua: #2E8F7C;
	--acqua-tenue: #ECF5F2;
	--wa: #1D7248;
	/* Rosso d'emergenza: vive solo nella barra fissa del telefono. */
	--emergenza: #C8372A;
	/* Freccetta in giu' per i menu a tendina della scheda. */
	/* Altezza della barra fissa in fondo su telefono. Vale zero dove la
	   barra non compare, cosi' chi deve lasciarle spazio fa un calcolo
	   solo invece di due regole diverse. */
	--barra-h: 0px;
	--freccia-giu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230B3139' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M0 7h20M14 1l6 6-6 6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	/* theme.json fissa questi tre sui titoli e sui blocchi: li riallineo alla tavolozza. */
	--wp--preset--color--tuta: #0B3139;
	--wp--preset--color--inchiostro: #03262C;
	--wp--preset--color--nebbia: #F2F5F3;
	--arcobaleno: linear-gradient(90deg, #D8362B 0%, #EE8A2A 20%, #F3CF3A 38%, #4FA84A 58%, #2F7BC2 78%, #6A4FA3 100%);
	--titoli: Archivo, "Arial Narrow", Arial, sans-serif;
	--gutter: 20px;
	--largo: 1180px;
	--r-piccolo: 10px;
	--r-medio: 16px;
	--r-grande: 24px;
	--ombra: 0 1px 2px rgba(20, 32, 47, .05), 0 8px 24px rgba(20, 32, 47, .07);
	--ombra-alta: 0 2px 6px rgba(20, 32, 47, .08), 0 18px 44px rgba(20, 32, 47, .12);
	/* Il respiro fra una fascia e l'altra: un valore solo, cambiato in un
	   posto solo. Le fasce compatte (recensioni, barra richiesta) non lo
	   usano a posta. */
	--spazio-sez: 76px;
}
@media (max-width: 600px) {
	:root { --spazio-sez: 56px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
body { background: var(--carta); color: var(--inchiostro); -webkit-font-smoothing: antialiased; }
body.admin-bar { scroll-padding-top: 130px; }
img { max-width: 100%; height: auto; }
a { color: var(--tuta); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
	outline: 3px solid #2F7BC2; outline-offset: 2px;
}
h1, h2, h3 { text-wrap: balance; font-stretch: 112%; }
h1 { font-weight: 800; letter-spacing: -.015em; }
h2 { font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.01em; }
h3 { font-weight: 700; font-size: 21px; }
p { text-wrap: pretty; }

/* ---------- impaginazione di base ---------- */
.principale { margin: 0; }
.contenuto > * { margin-block: 0 !important; max-width: none !important; }
.sez { padding: var(--spazio-sez) var(--gutter); }
.sez > * { max-width: var(--largo); margin-inline: auto; }
.sez > * + * { margin-block-start: 22px; }
/* I fondi si alternano: due fasce uguali di fila si saldano in un blocco
   solo e il lettore non capisce piu' dove finisce un argomento. Queste due
   erano bianche in mezzo ad altre bianche. */
.sez-segnali { background: var(--nebbia); }
.sez-zona { background: var(--nebbia); }
.sez-testo { padding: 64px var(--gutter); }
.sez-testo > * { max-width: 720px; margin-inline: auto; }
.occhiello { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--grigio); }
.intro { font-size: 19px; color: var(--grigio); max-width: 62ch; }
/* I blocchi più stretti del contenitore restano allineati a sinistra con il resto della sezione. */
.sez > .intro, .sez > .comuni { margin-left: max(0px, calc((100% - var(--largo)) / 2)); margin-right: auto; }

.dentro-largo { max-width: var(--largo); margin-inline: auto; }

/* ---------- testata ---------- */
/* WordPress avvolge la testata in un <div> alto quanto lei: lo sticky va messo
   su quel contenitore, altrimenti non ha spazio in cui scorrere e sparisce subito.
   Su quel <div> non si puo' mettere una classe (WordPress la scarta), quindi lo
   prendo per quello che contiene; la seconda riga e' la rete di sicurezza. */
.wp-block-template-part:has(> .testata),
.wp-site-blocks > .wp-block-template-part:first-child { position: sticky; top: 0; z-index: 50; }
.testata { background: var(--carta); box-shadow: 0 1px 0 rgba(20, 32, 47, .06); }
.admin-bar .testata { top: 32px; }
.testata::after { content: ""; display: block; height: 4px; background: var(--arcobaleno); }
.testata-in { max-width: 1280px; margin: 0 auto; padding: 10px var(--gutter); display: flex; align-items: center; gap: 24px; }
.marchio { flex: none; display: flex; align-items: center; min-height: 48px; line-height: 0; }
.marchio img { width: 170px; }
.menu-esteso { margin-left: auto; }
.menu-esteso > ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.menu-esteso a, .menu-esteso > ul > li > span, .menu-breve nav a {
	text-decoration: none; font-weight: 600; color: var(--inchiostro); font-size: 15.5px; }
/* Una voce di menu non va a capo: spezzata in due righe trascinava la
   freccetta sotto al testo, ed era quello a far sembrare rotta la barra. */
.menu-esteso > ul > li > a, .menu-esteso > ul > li > span { white-space: nowrap; }
.menu-esteso > ul > li { position: relative; }
.menu-esteso > ul > li > a, .menu-esteso > ul > li > span { display: block; padding-block: 12px; cursor: pointer; }
.menu-esteso > ul > li > a:hover, .menu-esteso > ul > li:hover > span { color: var(--tuta); }
/* La voce con figli ha una freccetta e si apre al passaggio o col tasto di tabulazione. */
.menu-esteso .con-sotto > a::after, .menu-esteso .con-sotto > span::after {
	content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; vertical-align: 2px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); opacity: .6; }
.menu-esteso .con-sotto > ul {
	position: absolute; left: -16px; top: 100%; z-index: 60; list-style: none; margin: 0; padding: 8px 0;
	min-width: 258px; background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-medio);
	box-shadow: var(--ombra-alta); opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .14s, transform .14s, visibility .14s; }
.menu-esteso .con-sotto:hover > ul, .menu-esteso .con-sotto:focus-within > ul {
	opacity: 1; visibility: visible; transform: none; }
.menu-esteso .con-sotto > ul a { display: block; padding: 9px 18px; font-weight: 500; font-size: 15.5px; }
.menu-esteso .con-sotto > ul a:hover { background: var(--nebbia); color: var(--tuta); }

.testata-tel span { font: 600 12px/1.3 var(--wp--preset--font-family--testo); letter-spacing: .06em; text-transform: uppercase; color: var(--grigio); }
.menu-breve { display: none; position: relative; }
.menu-breve summary { list-style: none; cursor: pointer; font-weight: 700; padding: 10px 14px; min-height: 48px; display: flex; align-items: center; border: 2px solid var(--tuta); border-radius: var(--r-piccolo); color: var(--tuta); }
.menu-breve summary::-webkit-details-marker { display: none; }
.menu-breve nav { position: absolute; right: 0; top: calc(100% + 12px); background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-medio); box-shadow: var(--ombra-alta); display: flex; flex-direction: column; min-width: 230px; overflow: hidden; }
.menu-breve nav ul { list-style: none; margin: 0; padding: 0; }
.menu-breve nav a, .menu-breve nav > ul > li > span { display: block; padding: 13px 18px; border-top: 1px solid var(--linea); }
.menu-breve nav > ul > li:first-child > a, .menu-breve nav > ul > li:first-child > span { border-top: 0; }
.menu-breve nav > ul > li > span { font-weight: 700; color: var(--tuta); font-size: 13px;
	letter-spacing: .07em; text-transform: uppercase; padding-block: 11px; background: var(--nebbia); }
.menu-breve nav .con-sotto > ul a { padding-left: 30px; font-weight: 500; }

/* Misurato a intervalli di 5px: con sei voci il menu disteso chiede 1000px.
   Era 1170 finche' c'era anche "Aziende e condomini", che da sola pesava 150
   pixel: scioglierla ha restituito 170px di respiro, cioe' i portatili. */
@media (max-width: 999px) {
	/*
	 * Il pannello ha venti voci: misurato, su uno schermo da 851 px veniva
	 * alto 1130, con 347 px sotto il bordo e la barra di Chiama/WhatsApp a
	 * coprirne altri 58. Le ultime voci non si raggiungevano, e il dito
	 * sopra il pannello scorreva la pagina dietro invece del menu.
	 * Quindi: si limita all'altezza utile e scorre lui. overscroll-behavior
	 * impedisce che, arrivato in fondo, lo scorrimento passi alla pagina.
	 */
	.menu-breve nav {
		max-height: calc(100vh - 92px - var(--barra-h));
		max-height: calc(100dvh - 92px - var(--barra-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.menu-esteso { display: none; }
	.testata-tel { margin-left: auto; }
	.menu-breve { display: block; }
}
@media (max-width: 600px) {
	.admin-bar .testata { top: 0; }
	.testata-in { gap: 12px; padding-block: 8px; }
	.marchio img { width: 128px; }
	.testata-tel { font-size: 18px; }
	.testata-tel span { font-size: 12px; letter-spacing: .03em; }
	.menu-breve summary { padding: 8px 10px; }
}
@media (max-width: 380px) {
	.testata-tel span { display: none; }
}

/* ---------- pulsanti ---------- */
.bottone, .wp-block-button__link {
	display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 24px;
	border-radius: var(--r-piccolo); border: 2px solid transparent; text-decoration: none; cursor: pointer;
	font: 700 18px/1.2 var(--titoli); font-stretch: 106%;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.bottone-pieno, .wp-block-button.chiama .wp-block-button__link { box-shadow: 0 6px 16px rgba(200, 55, 42, .28); }
.bottone:hover, .wp-block-button__link:hover { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .bottone, .wp-block-button__link { transition: none; } .bottone:hover, .wp-block-button__link:hover { transform: none; } }
.bottone-pieno, .wp-block-button.chiama .wp-block-button__link { background: var(--azione); color: var(--su-azione); }
.bottone-pieno:hover, .wp-block-button.chiama .wp-block-button__link:hover { background: var(--segnale-scuro); }
.bottone-wa, .wp-block-button.wa .wp-block-button__link { background: var(--wa); color: #fff; }
.bottone-scuro { background: var(--tuta); color: #fff; }
.bottone-scuro:hover { background: var(--inchiostro); }
/* La freccia nasce dal pulsante: non e' un carattere, cosi' non la legge chi usa uno screen reader. */
.bottone.con-freccia::after { content: ""; width: 17px; height: 10px; margin-left: 10px; flex: none;
	background: currentColor; -webkit-mask: var(--freccia) center / contain no-repeat; mask: var(--freccia) center / contain no-repeat; }
.bottone-wa:hover, .wp-block-button.wa .wp-block-button__link:hover { background: #155C39; }
.wp-block-button.bordo .wp-block-button__link { background: transparent; color: var(--tuta); border-color: var(--tuta); }
.wp-block-buttons { gap: 12px; }

/* ---------- hero della home ---------- */
.hero { position: relative; background: var(--nebbia); padding: 16px var(--gutter); min-height: 600px; display: flex; align-items: center; overflow: hidden; }
.hero > .hero-foto { position: absolute; inset: 16px; margin: 0; max-width: none; border-radius: var(--r-grande); overflow: hidden; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.hero::before { content: ""; position: absolute; inset: 16px; z-index: 1; border-radius: var(--r-grande); background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .92) 34%, rgba(255, 255, 255, .4) 54%, rgba(255, 255, 255, 0) 66%); }
.hero-testo { position: relative; z-index: 2; width: 100%; max-width: var(--largo); margin: 0 auto; padding-block: 72px; }
.hero-testo > * { max-width: 560px; }
.hero-testo > * + * { margin-block-start: 20px; }
.hero h1 { font-size: clamp(38px, 5.2vw, 64px); color: var(--tuta); }
/* Seconda frase del titolo: va a capo da sola, come nelle testate dei servizi. */
.hero h1 em { display: block; font-style: normal; color: var(--richiamo); }
.hero .intro { color: var(--inchiostro); font-size: 20px; }
.hero .wp-block-buttons { margin-block-start: 30px; }

@media (max-width: 800px) {
	/*
	 * Come le testate dei servizi: fotografia a tutta larghezza, sotto una
	 * fascia piena con il testo sopra. Il riquadro arrotondato staccato dal
	 * fondo chiaro faceva una testata diversa da quella di tutte le altre
	 * pagine, e piu' debole -- rientrata di 12px per lato perdeva larghezza
	 * proprio dove ce n'e' meno.
	 */
	.hero { display: block; padding: 0 var(--gutter) 44px; min-height: 0; background: var(--inchiostro); }
	.hero::before { display: none; }
	/* Il margine della sezione lo tiene la sezione, non il testo: piu'
	   avanti nel foglio c'e' una regola piu' forte che azzera il padding
	   destro di .hero-testo, e la scheda finiva a filo del bordo. La
	   fotografia esce dal margine con i margini negativi, come la striscia
	   dei lavori. */
	.hero > .hero-foto { position: static; inset: auto; height: 260px; border-radius: 0;
		margin-inline: calc(var(--gutter) * -1); }
	/* Niente inquadratura diversa per il telefono: il soggetto della
	   fotografia sta al centro, quindi il 52% della regola da scrivania va
	   bene anche nella fascia 366x240 e il logo resta visibile. La regola
	   che c'era qui era tarata sulla fotografia vecchia e non si applicava
	   piu': stesso peso di quella da scrivania, che pero' viene dopo nel
	   foglio e vince (le media query non pesano). */
	.hero-testo { padding: 40px 0 0; }
	.hero h1 { font-size: clamp(32px, 9vw, 42px); color: #fff; }
	.hero h1 em { color: var(--azione); }
	.hero .intro { font-size: 18px; color: #C2D0E0; }
}

/* ---------- hero delle pagine interne ---------- */
.hero-pagina { background: var(--nebbia); padding: 56px var(--gutter); }
.hero-pagina > .wp-block-columns { max-width: var(--largo); margin: 0 auto; gap: 48px; align-items: center; }
.hero-pagina h1 { font-size: clamp(34px, 4.6vw, 56px); }
.hero-pagina .wp-block-column > * + * { margin-block-start: 18px; }
.hero-pagina figure { margin: 0; }
.hero-pagina figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-medio); box-shadow: var(--ombra); }
.briciole { font-size: 14px; color: var(--grigio); }
.briciole a { color: var(--grigio); }

/* ---------- la frase da completare ---------- */
/* Un pannello solo: fondo e angoli stanno sulla sezione, non sui figli. */
.sez-richiesta { background: var(--tuta); color: #fff; border-radius: var(--r-grande); box-shadow: var(--ombra); margin-inline: var(--gutter); padding: 38px 40px 40px; }
.sez-richiesta > * { max-width: calc(var(--largo) - 80px); margin-inline: auto; }
@media (max-width: 600px) { .sez-richiesta { margin-inline: 12px; padding: 26px 22px 28px; } }
.sez-richiesta .occhiello { color: #B9C7D6; }
.richiesta { display: flex; flex-direction: column; gap: 22px; }
.richiesta-frase { margin: 0; font: 700 clamp(24px, 3.3vw, 40px)/1.45 var(--titoli); font-stretch: 104%; }
.richiesta-frase label { cursor: pointer; }
/* Il pezzo tiene insieme preposizione e campo: se non ci sta, scendono
   insieme alla riga dopo invece di lasciare la "a" appesa in cima. */
.richiesta-pezzo { white-space: nowrap; }
.richiesta-campo { display: inline-block; position: relative; max-width: 100%; white-space: normal; }
.richiesta-campo select {
	appearance: none; -webkit-appearance: none; max-width: 100%;
	font: inherit; font-stretch: inherit; color: #fff; background: transparent; cursor: pointer;
	border: 0; border-bottom: 3px solid var(--azione); border-radius: 0; padding: 0 .78em 2px 2px;
}
.richiesta-campo::after { content: ""; position: absolute; right: .14em; top: 50%; width: .42em; height: .42em; border-right: 3px solid var(--azione); border-bottom: 3px solid var(--azione); transform: translateY(-75%) rotate(45deg); pointer-events: none; }
.richiesta-campo select option { color: var(--inchiostro); background: #fff; font-size: 17px; }
.richiesta-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
/* Niente flex qui: serviva solo ad arrivare ai 48px del bersaglio, ma in un
   contenitore flex lo spazio in coda al testo viene scartato e "oppure chiama
   il" finiva attaccato al numero. Con inline-block e il riempimento sopra e
   sotto l altezza c e lo stesso e il testo resta testo. */
.richiesta-tel { color: #fff; font-size: 18px; display: inline-block; padding-block: 10px; }
.richiesta-tel strong { font-family: var(--titoli); font-size: 22px; }
.richiesta-nota { margin: 0; color: #B9C7D6; font-size: 15px; }

/* ---------- listino dei servizi ---------- */
.listino .wp-block-list { list-style: none; padding: 0; margin-block-start: 32px; border-bottom: 1px solid var(--linea); }
.listino .wp-block-list li { display: grid; grid-template-columns: minmax(200px, 330px) 1fr; gap: 6px 32px; padding: 20px 16px; margin-inline: -16px; border-top: 1px solid var(--linea); border-radius: var(--r-medio); align-items: baseline; transition: background-color .15s ease; }
.listino .wp-block-list li:hover { background: var(--acqua-tenue); }
.listino .wp-block-list li strong { font: 800 22px/1.2 var(--titoli); font-stretch: 110%; color: var(--tuta); }
.listino .wp-block-list li strong a { text-decoration-thickness: 2px; }
.listino .wp-block-list li strong a::after { content: " →"; }
.listino .wp-block-list li span { color: var(--grigio); }
@media (max-width: 700px) { .listino .wp-block-list li { grid-template-columns: 1fr; } }

/* ---------- come lavoriamo ---------- */
.passi { background: var(--carta); }
.passi > * { max-width: var(--largo); margin-inline: auto; }
@media (max-width: 600px) { .passi { margin: 0 12px; padding-inline: 20px; } }
.passi ol { list-style: none; counter-reset: passo; padding: 0; margin-block-start: 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.passi ol li { counter-increment: passo; background: var(--nebbia); border: 1px solid var(--linea); border-radius: var(--r-medio); padding: 20px 20px 22px; color: var(--grigio); }
.passi ol li::before { content: counter(passo); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--acqua-tenue); font: 800 22px/1 var(--titoli); color: var(--richiamo); margin-bottom: 14px; }
.passi ol li strong { display: block; font: 800 20px/1.2 var(--titoli); font-stretch: 108%; color: var(--inchiostro); margin-bottom: 6px; }
@media (max-width: 900px) { .passi ol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .passi ol { grid-template-columns: 1fr; } }

/* ---------- chi viene da te ---------- */
.chi > .wp-block-columns { gap: 56px; align-items: center; }
.chi figure { margin: 0; }
.chi figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-medio); box-shadow: var(--ombra); }
.chi .wp-block-column > * + * { margin-block-start: 18px; }
.chi .wp-block-list { padding-left: 20px; }
.chi .wp-block-list li + li { margin-top: 6px; }

/* ---------- recensioni ---------- */
.recensioni { background: var(--nebbia); border-radius: var(--r-grande); margin: 0 var(--gutter); padding-inline: 40px; }
@media (max-width: 600px) { .recensioni { margin: 0 12px; padding-inline: 20px; } }
.recensioni > .wp-block-columns { gap: 40px; margin-block-start: 36px; }
.recensioni .wp-block-quote { margin: 0; padding: 24px 24px 22px; border: 0; background: var(--carta); border-radius: var(--r-medio); box-shadow: var(--ombra); }
.recensioni .wp-block-quote p { font-size: 18px; line-height: 1.55; }
.recensioni .wp-block-quote cite { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); font-style: normal; font-weight: 700; font-size: 15px; color: var(--tuta); }
.recensioni .fonte { font-size: 14px; color: var(--grigio); }

/* ---------- zona ---------- */
.zona .comuni { font: 700 clamp(22px, 2.6vw, 30px)/1.6 var(--titoli); font-stretch: 104%; color: var(--tuta); max-width: 980px; }
.zona .comuni a { color: var(--richiamo); text-decoration-thickness: 2px; }

/* ---------- testi lunghi delle pagine interne ---------- */
.sez-testo h2 { margin-block-start: 40px; }
.sez-testo h3 { margin-block-start: 28px; }
.sez-testo .wp-block-list li + li { margin-top: 6px; }
.tre-colonne > .wp-block-columns { gap: 36px; margin-block-start: 28px; }
.tre-colonne .wp-block-column { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-medio); padding: 22px 22px 24px; }
.tre-colonne h3 { color: var(--tuta); }
.tre-colonne .wp-block-column > * + * { margin-block-start: 10px; }
.tre-colonne p { color: var(--grigio); }

/* ---------- contatti e modulo ---------- */
.contatti { background: var(--carta); }
.contatti > .wp-block-columns { gap: 56px; margin-block-start: 28px; }
.recapiti { list-style: none; padding: 0; margin: 0; }
.recapiti { background: var(--acqua-tenue); border-radius: var(--r-medio); padding: 6px 22px; }
.recapiti li { padding: 16px 0; border-top: 1px solid rgba(46, 143, 124, .18); }
.recapiti li:first-child { border-top: 0; }
.recapiti small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--grigio); }
.recapiti a, .recapiti b { font: 800 22px/1.3 var(--titoli); font-stretch: 106%; color: var(--tuta); }
.recapiti .email a { font-size: 18px; word-break: break-word; }
.modulo { display: flex; flex-direction: column; gap: 16px; }
.modulo p { margin: 0; }
.modulo-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .modulo-riga { grid-template-columns: 1fr; } }
.modulo label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.modulo label span { font-weight: 400; color: var(--grigio); }
.modulo input[type=text], .modulo input[type=tel], .modulo input[type=email], .modulo textarea {
	width: 100%; font: inherit; color: var(--inchiostro); background: var(--carta);
	border: 1.5px solid #B4C0CB; border-radius: var(--r-piccolo); padding: 13px 15px; min-height: 52px;
}
.modulo input:focus, .modulo textarea:focus { border-color: var(--acqua); box-shadow: 0 0 0 3px rgba(46, 143, 124, .14); }
.modulo-privacy { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--grigio); }
.modulo-privacy input { width: 24px; height: 24px; flex: none; margin-top: 1px; accent-color: var(--tuta); }
.modulo-privacy label { font-weight: 400; margin: 0; }
.modulo-trappola { position: absolute; left: -9999px; }
.modulo .bottone { width: 100%; justify-content: center; }
.modulo-esito { background: var(--acqua-tenue); border-left: 4px solid var(--acqua); border-radius: var(--r-piccolo); padding: 15px 18px; margin-bottom: 18px; }
.modulo-errore { background: #F8E4E1; border-color: #C8372A; }

/* ---------- piede ---------- */
.piede { background: var(--inchiostro); color: #C9D3DD; padding: 48px var(--gutter) 40px; font-size: 15px; }
.piede-in { max-width: var(--largo); margin: 0 auto; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; }
.piede p { margin: 0; line-height: 1.8; }
.piede a { color: #fff; }
.piede-nome { font: 800 19px/1.3 var(--titoli); color: #fff; margin-bottom: 6px !important; }
.piede-in { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
.piede-capo { font: 700 12px/1.3 var(--titoli); letter-spacing: .09em; text-transform: uppercase;
	color: var(--azione); margin: 0 0 12px; }
.piede-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.piede-in ul a { font-size: 15px; }
.piede-recapiti { margin-block-start: 14px; }
.piede-comuni { max-width: var(--largo); margin: 28px auto 0; padding-block-start: 20px;
	border-block-start: 1px solid rgba(255, 255, 255, .14); font-size: 14px; color: #93A7BF; }
/* I due comuni che hanno una pagina. Sul fondo scuro il grigio-azzurro del
   piede non basta a dire "qui si clicca": si schiariscono e si sottolineano.
   #C2D0E0 sull'inchiostro fa 10,2:1, molto oltre il minimo. */
.piede-comuni a { color: #C2D0E0; text-decoration-color: rgba(255, 255, 255, .4);
	text-underline-offset: 3px; }
.piede-comuni a:hover, .piede-comuni a:focus-visible { color: #fff; text-decoration-color: currentColor; }
@media (max-width: 1000px) { .piede-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .piede-in { grid-template-columns: minmax(0, 1fr); } }

/* ---------- barra di contatto fissa su telefono ---------- */
.barra-contatto { display: none; }
@media (max-width: 800px) {
	:root { --barra-h: 58px; }
	.barra-contatto {
		/* Meta' e meta': a distinguerli bastano il rosso contro il verde e le icone. */
		display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
		padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--inchiostro);
	}
	.barra-contatto a { color: #fff; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 58px; text-decoration: none; font: 800 19px/1 var(--titoli); font-stretch: 106%; }
	.barra-contatto svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
	/* Rosso contro il verde di WhatsApp: le due azioni si distinguono a colpo d'occhio.
	   Le icone restano la riserva per chi non distingue rosso e verde. */
	.barra-chiama { background: var(--emergenza); }
	.barra-wa { background: var(--wa); }
	body { padding-bottom: 58px; }
}

@media (max-width: 600px) {
	.hero-pagina { padding-block: 36px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ========== PAGINA SERVIZIO ========== */

/* ---------- testata: il telefono vince, la foto è la seconda strada ---------- */
.azioni-servizio { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin-block-start: 22px; }
.tel-grande {
	display: flex; flex-direction: column; justify-content: center; gap: 2px;
	background: var(--azione); color: var(--su-azione); text-decoration: none;
	padding: 14px 26px; border-radius: var(--r-medio); box-shadow: var(--ombra);
}
.tel-grande:hover { background: var(--segnale-scuro); }
.tel-grande small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.tel-grande strong { font: 800 27px/1 var(--titoli); font-stretch: 108%; letter-spacing: -.01em; }
.wa-foto {
	display: flex; align-items: center; gap: 10px;
	background: var(--carta); color: var(--inchiostro); text-decoration: none;
	border: 2px solid var(--wa); border-radius: var(--r-medio); padding: 12px 20px;
	font-weight: 600; line-height: 1.25;
}
.wa-foto:hover { background: #F2F9F5; }
.wa-foto svg { flex: none; fill: var(--wa); }

/* le garanzie stanno in testata, non nelle domande frequenti */
.garanzie { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin-block-start: 20px; }
.garanzie li {
	display: flex; align-items: center; gap: 7px;
	background: var(--carta); border: 1px solid var(--linea); border-radius: 999px;
	padding: 7px 14px 7px 11px; font-size: 14.5px; font-weight: 600; color: var(--tuta);
}
.garanzie li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acqua); flex: none; }

/* ---------- scheda di riconoscimento: il foglio che il tecnico ti mostrerebbe ---------- */
.scheda-segni { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-medio); overflow: hidden; margin-block-start: 28px; box-shadow: var(--ombra); }
.scheda-segni .riga-testa {
	display: grid; grid-template-columns: 92px 1fr 1fr; gap: 0 24px;
	padding: 12px 22px; background: var(--tuta); color: #fff;
	font: 700 12px/1.2 var(--titoli); letter-spacing: .1em; text-transform: uppercase;
}
.scheda-segni .riga { display: grid; grid-template-columns: 92px 1fr 1fr; gap: 6px 24px; padding: 20px 22px; border-top: 1px solid var(--linea); align-items: start; }
.scheda-segni .riga:first-of-type { border-top: 0; }
.scheda-segni figure { margin: 0; }
.scheda-segni figure img { width: 92px; height: 92px; object-fit: cover; border-radius: var(--r-piccolo); background: var(--nebbia); display: block; }
.scheda-segni .vuota { width: 92px; height: 92px; border-radius: var(--r-piccolo); background: var(--nebbia); display: grid; place-items: center; font-size: 11px; color: var(--grigio); text-align: center; padding: 6px; }
.scheda-segni h3 { color: var(--tuta); margin: 0 0 4px; font-size: 19px; }
.scheda-segni p { margin: 0; color: var(--grigio); font-size: 16px; }
.scheda-segni .dove { color: var(--inchiostro); }
.scheda-segni .dove strong { display: none; font: 700 12px/1.4 var(--titoli); letter-spacing: .09em; text-transform: uppercase; color: var(--grigio); margin-bottom: 3px; }
@media (max-width: 760px) {
	.scheda-segni .riga-testa { display: none; }
	.scheda-segni .riga { grid-template-columns: 72px 1fr; gap: 4px 16px; padding: 18px; }
	.scheda-segni figure img, .scheda-segni .vuota { width: 72px; height: 72px; }
	.scheda-segni .dove { grid-column: 2; margin-top: 8px; }
	.scheda-segni .dove strong { display: block; }
}

/* ---------- la fascia della foto: sta dove nasce il dubbio ---------- */
.foto-wa {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
	background: var(--acqua-tenue); border: 1px solid rgba(46, 143, 124, .25); border-radius: var(--r-medio);
	padding: 22px 26px; margin-block-start: 24px;
}
.foto-wa p { margin: 0; max-width: 54ch; }
.foto-wa strong { display: block; font: 800 21px/1.25 var(--titoli); color: var(--tuta); margin-bottom: 3px; }
.foto-wa .bottone-wa { flex: none; }

/* ---------- quanto costa ---------- */
.costo .fascia { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 26px; }
.costo .fascia > div { flex: 1 1 240px; background: var(--nebbia); border-radius: var(--r-medio); padding: 20px 22px; }
.costo .fascia dt { font: 700 13px/1.3 var(--titoli); letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.costo .fascia dd { margin: 6px 0 0; font: 800 28px/1 var(--titoli); font-stretch: 108%; color: var(--tuta); }
/* La spiegazione ha una classe sua: "dd span" colpiva anche il segnaposto attorno al prezzo.
   E proprieta' separate, perche' una scorciatoia font con dentro una variabile mancante annulla tutto. */
.costo .fascia .spiega {
	display: block; margin-top: 9px;
	font-family: 'Public Sans', system-ui, sans-serif; font-size: 15px; font-weight: 400;
	line-height: 1.45; font-stretch: normal; letter-spacing: 0; color: var(--grigio);
}
.costo .nota { font-size: 15px; color: var(--grigio); margin-block-start: 18px; }

/* ---------- domande frequenti ---------- */
.domande { margin-block-start: 26px; border-top: 1px solid var(--linea); }
.domande details { border-bottom: 1px solid var(--linea); }
.domande summary {
	cursor: pointer; list-style: none; padding: 18px 44px 18px 0; position: relative;
	font: 700 19px/1.35 var(--titoli); color: var(--tuta);
}
.domande summary::-webkit-details-marker { display: none; }
.domande summary::after {
	content: ""; position: absolute; right: 12px; top: 50%; width: 11px; height: 11px;
	border-right: 2.5px solid var(--grigio); border-bottom: 2.5px solid var(--grigio);
	transform: translateY(-70%) rotate(45deg); transition: transform .15s ease;
}
.domande details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.domande summary:hover { color: var(--richiamo); }
.domande .risposta { padding: 0 0 20px; color: var(--grigio); max-width: 68ch; }
.domande .risposta > * + * { margin-block-start: 12px; }

/* ---------- segnaposto da sostituire con le risposte del cliente ---------- */
.daconfermare { border-bottom: 1px dotted currentColor; }

/* ---------- testata servizio su due colonne ---------- */
.testata-servizio { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; max-width: var(--largo); margin-inline: auto; }
.testata-servizio .foto { margin: 0; }
@media (max-width: 900px) { .testata-servizio { grid-template-columns: 1fr; gap: 28px; } .testata-servizio .foto { order: -1; } }

/* Il viraggio tiene insieme fotografie di provenienza diversa.
   Sulle foto di riconoscimento non si usa: lì il dettaglio deve restare leggibile. */
.foto-tinta { background: var(--tuta); border-radius: var(--r-medio); overflow: hidden; line-height: 0; box-shadow: var(--ombra); }
.foto-tinta img { width: 100%; display: block; filter: grayscale(1) contrast(1.08); mix-blend-mode: screen; opacity: .93; }

/* ---------- striscia di prova ---------- */
.prove { background: var(--tuta); color: #fff; }
.prove .dentro { max-width: var(--largo); margin-inline: auto; padding: 26px var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.prove .voce strong { display: block; font: 800 30px/1 var(--titoli); font-stretch: 108%; }
.prove .voce span { display: block; margin-top: 5px; font-size: 14.5px; color: #C6D4E4; }
.prove .stelle { color: #F3CF3A; letter-spacing: 2px; font-size: 19px; }
@media (max-width: 820px) { .prove .dentro { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* ---------- una recensione in evidenza, vicino alla testata ---------- */
.dice { max-width: 860px; margin-inline: auto; }
.dice blockquote { margin: 0; border: 0; padding: 0; }
.dice blockquote p { font: 500 23px/1.45 var(--titoli); font-stretch: 104%; color: var(--tuta); text-wrap: pretty; }
.dice cite { display: block; margin-top: 12px; font-style: normal; font-size: 15px; color: var(--grigio); }
.dice .filo { height: 4px; width: 92px; background: var(--arcobaleno); border-radius: 2px; margin-bottom: 20px; }

/* ---------- cosa comprende l'intervento ---------- */
.comprende > .wp-block-columns { gap: 48px; align-items: center; }
.elenco-spunte { list-style: none; padding: 0; margin: 0; }
.elenco-spunte li { position: relative; padding: 13px 0 13px 34px; border-top: 1px solid var(--linea); }
.elenco-spunte li:first-child { border-top: 0; }
.elenco-spunte li::before {
	content: ""; position: absolute; left: 2px; top: 19px; width: 13px; height: 8px;
	border-left: 2.5px solid var(--acqua); border-bottom: 2.5px solid var(--acqua); transform: rotate(-45deg);
}
.elenco-spunte strong { display: block; color: var(--tuta); }
.elenco-spunte span { color: var(--grigio); font-size: 16px; }

/* ---------- sezione a tutta larghezza con foto di sfondo ---------- */
.sez-foto { position: relative; isolation: isolate; color: #fff; padding: 110px var(--gutter); overflow: hidden; }
.sez-foto::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: var(--sfondo); background-size: cover; background-position: center;
	filter: grayscale(1) contrast(1.05);
}
.sez-foto::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(20,32,47,.93) 0%, rgba(20,32,47,.76) 58%, rgba(20,32,47,.55) 100%); }
.sez-foto > * { max-width: var(--largo); margin-inline: auto; }
.sez-foto h2 { color: #fff; max-width: 18ch; }
.sez-foto p { color: #D7E2EE; max-width: 54ch; }
.sez-foto .occhiello { color: #9FB6CE; }
@media (max-width: 600px) { .sez-foto { padding-block: 72px; } }

/* ---------- ritmo: sezioni su fondo nebbia ---------- */
.fondo-nebbia { background: var(--nebbia); }
.riga-arcobaleno { height: 4px; background: var(--arcobaleno); border: 0; margin: 0; }

/* ---------- scheda riassuntiva nella testata, al posto della foto ---------- */
.scheda-breve { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-medio); box-shadow: var(--ombra); overflow: hidden; }
.scheda-breve .capo { background: var(--tuta); color: #fff; padding: 13px 22px; font: 700 12px/1.2 var(--titoli); letter-spacing: .1em; text-transform: uppercase; }
.scheda-breve dl { margin: 0; padding: 4px 22px 18px; }
.scheda-breve div { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--linea); align-items: baseline; }
.scheda-breve div:first-child { border-top: 0; }
.scheda-breve dt { font: 700 12px/1.3 var(--titoli); letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.scheda-breve dd { margin: 0; font-weight: 600; color: var(--tuta); }
.scheda-breve dd small { display: block; font-weight: 400; font-size: 14px; color: var(--grigio); margin-top: 2px; }

/* ---------- i segni disegnati: una chiave di riconoscimento, non una foto finta ---------- */
.marca { width: 92px; height: 92px; border-radius: var(--r-piccolo); background: var(--nebbia); display: block; flex: none; }
.marca svg { width: 100%; height: 100%; display: block; }
.marca .tratto { fill: none; stroke: var(--tuta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.marca .pieno { fill: var(--tuta); }
.marca .tenue { fill: none; stroke: var(--tuta); stroke-width: 2; opacity: .35; }
.marca .misura { fill: var(--grigio); font: 600 8.5px/1 var(--titoli); letter-spacing: .04em; }
@media (max-width: 760px) { .marca { width: 72px; height: 72px; } }

/* il segnaposto giallo non si legge sul fondo scuro */
.prove .daconfermare, .sez-tinta .daconfermare { border-bottom-color: rgba(255, 255, 255, .45); }

/* ---------- fascia a tutta larghezza senza fotografia ---------- */
.sez-tinta { background: var(--inchiostro); color: #fff; padding: 96px var(--gutter); position: relative; }
/* I figli stretti si allineano alla colonna, non al centro della sezione. */
.sez-tinta > * { margin-left: max(0px, calc((100% - var(--largo)) / 2)); margin-right: auto; }
.sez-tinta h2 { color: #fff; max-width: 20ch; }
.sez-tinta p { color: #C6D4E4; max-width: 60ch; }
.sez-tinta .occhiello { color: #8FA8C4; }
.sez-tinta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--arcobaleno); }
@media (max-width: 600px) { .sez-tinta { padding-block: 64px; } }

/* ---------- chiusura: due azioni sole, le stesse della testata ---------- */
.chiusura { background: var(--nebbia); text-align: center; }
.chiusura > * { max-width: 640px; margin-inline: auto; }
.chiusura h2 { font-size: clamp(26px, 3vw, 34px); }
.chiusura .azioni-servizio { justify-content: center; margin-block-start: 26px; }
.chiusura .nota { font-size: 15px; color: var(--grigio); margin-block-start: 18px; }

/* ================= IMPIANTO A DUE COLONNE =================
   Il ritmo del mockup: testo da una parte, un oggetto dall'altra, che si alternano.
   Tutte le sezioni servizio nascono da qui. */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: var(--largo); margin-inline: auto; }
.duo-testo { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
.duo-oggetto { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
.duo > * { min-width: 0; }
.duo .prima { order: -1; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 30px; } .duo .prima { order: 0; } }

.duo h2 { margin-block-end: 14px; }
.duo .intro { margin-block-end: 0; }

/* ---------- pannello bianco, l'oggetto ricorrente ---------- */
.pannello { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-medio); box-shadow: var(--ombra-alta); padding: 28px 30px 30px; }
.pannello .capo { display: flex; align-items: center; gap: 10px; font: 700 12px/1.2 var(--titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--grigio); margin: 0 0 18px; }
.pannello .capo .bollo { width: 26px; height: 26px; border-radius: 50%; background: var(--acqua-tenue); display: grid; place-items: center; color: var(--richiamo); font-size: 13px; }

/* ---------- elenco con la spunta ---------- */
.spunte { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.spunte li { position: relative; padding-left: 36px; line-height: 1.55; }
.spunte li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--acqua-tenue); }
.spunte li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 9px; height: 5px; border-left: 2px solid var(--acqua); border-bottom: 2px solid var(--acqua); transform: rotate(-45deg); }
/* Da confermare, dentro un elenco: la sottolineatura tratteggiata sotto una riga
   intera sembra un errore di ortografia. Segno la spunta invece del testo: resta
   vuota e tratteggiata finche' la voce non e' confermata. */
.spunte li.daconfermare { border-bottom: 0; }
.spunte li.daconfermare::before { background: transparent; border: 1.5px dashed rgba(79, 93, 108, .4); }
.spunte li.daconfermare::after { opacity: .3; }
.spunte.chiara li { color: #D7E2EE; }
.spunte.chiara li::before { background: rgba(255, 255, 255, .1); }
.spunte.chiara li::after { border-color: #5FD3A8; }

/* ---------- testata su due metà, la foto arriva al bordo ---------- */
.testata-doppia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--inchiostro); color: #fff; }
.testata-doppia .testo { padding: 68px var(--gutter) 68px max(var(--gutter), calc((100vw - var(--largo)) / 2)); display: flex; flex-direction: column; justify-content: center; }
.testata-doppia .occhiello { color: #93A7BF; margin: 0 0 16px; }
.testata-doppia h1 { color: #fff; font-size: clamp(32px, 4vw, 50px); margin: 0; }
.testata-doppia h1 em { font-style: normal; color: var(--azione); display: block; }
.testata-doppia .intro { color: #C2D0E0; margin: 18px 0 0; max-width: 46ch; }
.testata-doppia .foto { position: relative; background: var(--tuta-2); min-height: 420px; }
.testata-doppia .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.testata-doppia .foto .manca { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; color: #A9BBD0; font-size: 14px; padding: 24px; }
.testata-doppia .manca strong { display: block; font: 700 13px/1.3 var(--titoli); letter-spacing: .09em; text-transform: uppercase; }
/* Le briciole vivono dentro la testata scura, sopra il sovratitolo: stesso
   grigio spento, cosi' orientano senza rubare l'occhio al titolo. Questa
   regola sta prima della media query qui sotto, non dopo: scritta dopo,
   sovrascriverebbe in silenzio quello che la media query imposta. */
.briciole { margin: 0 0 16px; font-size: 13px; }
.briciole ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.briciole li { display: flex; align-items: center; gap: 8px; color: #93A7BF; min-height: 24px; }
.briciole li + li::before { content: "\203A"; color: #5E7489; }
.briciole a { color: #93A7BF; text-decoration: none; border-bottom: 1px solid transparent; display: inline-flex; align-items: center; min-height: 24px; }
.briciole a:hover, .briciole a:focus-visible { color: #fff; border-bottom-color: var(--azione); }
.briciole [aria-current] { color: #C2D0E0; }
@media (max-width: 900px) {
	.testata-doppia { grid-template-columns: 1fr; }
	.testata-doppia .foto { min-height: 260px; order: -1; }
	.testata-doppia .testo { padding: 44px var(--gutter); }
}

/* ---------- i tre richiami sotto i pulsanti ---------- */
.richiami { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 30px; padding: 0; margin: 30px 0 0; }
.richiami li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 14px; color: #C2D0E0; max-width: 24ch; }
.richiami strong { display: block; color: #fff; font-weight: 600; }
.richiami .segno { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; }
.richiami .segno svg { width: 15px; height: 15px; fill: none; stroke: var(--azione); stroke-width: 1.9; }

/* ---------- quattro schede con la foto in alto ---------- */
/* auto-fit: tre schede riempiono la riga come quattro, senza buchi */
.schede-foto { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; margin-block-start: 34px; }
.schede-foto article { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-medio); overflow: hidden; box-shadow: var(--ombra); }
.schede-foto .figura { position: relative; aspect-ratio: 4 / 3; background: var(--nebbia); display: grid; place-content: center; }
.schede-foto .figura img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.schede-foto .figura .manca { font-size: 12px; color: var(--grigio); text-align: center; padding: 10px; }
.schede-foto .bollo { position: absolute; left: 18px; bottom: -19px; width: 38px; height: 38px; border-radius: 50%; background: var(--tuta); display: grid; place-items: center; box-shadow: var(--ombra); }
.schede-foto .bollo svg { width: 19px; height: 19px; }
.schede-foto .testo { padding: 30px 20px 22px; }
.schede-foto h3 { font-size: 18px; margin: 0 0 7px; }
.schede-foto p { margin: 0; color: var(--grigio); font-size: 15px; line-height: 1.5; }
/* ---------- monitoraggio continuativo ---------- */
.sez-monitoraggio { background: var(--carta); }
.sez-monitoraggio > * { max-width: var(--largo); margin-inline: auto; }

/* Testo e fotografia affiancati: sotto, a tutta larghezza, la foto da sola
   aggiungeva 790px di altezza. Qui si appoggia all'altezza del titolo. */
.monit-capo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 48px; align-items: center; }
.monit-capo h2 { margin: 10px 0 0; }
.monit-capo .sommario { margin: 18px 0 0; color: var(--grigio); font-size: 16.5px; line-height: 1.6; }
.monit-capo .sommario strong { color: var(--tuta); }
.monit-foto { margin: 0; border-radius: var(--r-medio); overflow: hidden; line-height: 0; box-shadow: var(--ombra); }
.monit-foto img { width: 100%; height: auto; display: block; }
.monit-foto .manca { display: grid; align-content: center; gap: 8px; aspect-ratio: 2 / 1; padding: 26px;
	border: 2px dashed var(--linea); border-radius: var(--r-medio); text-align: center;
	color: var(--grigio); font-size: 13.5px; line-height: 1.55; }
.monit-foto .manca strong { font: 700 12px/1.3 var(--titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--richiamo); }

.monit-carte { margin-block-start: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.monit-carte article { background: var(--nebbia); border: 1px solid var(--linea); border-radius: var(--r-medio);
	padding: 28px 30px 30px; box-shadow: var(--ombra); display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 22px; }
.monit-carte .segno { border-inline-end: 1px solid var(--linea); padding-inline-end: 22px; }
.monit-carte .segno svg { width: 36px; height: 36px; fill: none; stroke: var(--tuta); stroke-width: 1.5;
	stroke-linecap: round; stroke-linejoin: round; }
.monit-carte h3 { margin: 0; font-size: 22px; color: var(--tuta); }
.monit-carte .sotto { margin: 5px 0 0; color: var(--grigio); font-size: 15.5px; }
.monit-carte .bollino { display: flex; align-items: center; gap: 9px; margin: 16px 0 0; padding: 10px 14px;
	background: var(--acqua-tenue); border-radius: var(--r-piccolo); color: var(--richiamo);
	font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.monit-carte .bollino svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.monit-carte .spunte { margin-block-start: 18px; gap: 11px; }
.monit-carte .spunte li { font-size: 15px; }

.monit-fondo { margin-block-start: 20px; background: var(--inchiostro); color: #fff; border-radius: var(--r-medio);
	padding: 28px 32px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 32px; align-items: center; }
.monit-fondo h3 { margin: 0; color: #fff; font-size: clamp(21px, 2.3vw, 27px); }
.monit-fondo p { margin: 6px 0 0; color: #B9C8DA; font-size: 16px; }
.monit-fondo .azione { display: grid; justify-items: center; gap: 8px; }
.monit-fondo .azione span { color: #93A7BF; font-size: 12.5px; }

@media (max-width: 900px) {
	.monit-capo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.monit-carte { grid-template-columns: minmax(0, 1fr); }
	.monit-fondo { grid-template-columns: minmax(0, 1fr); padding: 26px var(--gutter) 28px; }
	.monit-fondo .azione { justify-items: stretch; }
	/* Il selettore di questa riga si era perso in una modifica precedente, e la
	   graffa in piu' rompeva il foglio da qui in giu'. */
	/* Era 9,5px: sotto i 12 su un telefono non si legge, e questa riga dice
	   a chi e' rivolto il pulsante. Si allarga il riquadro invece di
	   rimpicciolire il testo. */
	.monit-fondo .azione span { font-size: 12.5px; line-height: 1.3; text-align: center; }
}

/* Il titolo di questa sezione e' una domanda lunga: gli serve piu' colonna. */
.segnali-capo { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); }
/* Sta dopo la media query generale di .duo, quindi la sua va ripetuta qui. */
@media (max-width: 900px) { .segnali-capo { grid-template-columns: minmax(0, 1fr); } }

/* Chiusura della sezione segnali: la frase che riporta al contatto e il pulsante. */
.segnali-coda { max-width: var(--largo); margin: 30px auto 0; display: flex; flex-wrap: wrap;
	align-items: center; justify-content: space-between; gap: 18px 32px;
	padding-block-start: 26px; border-block-start: 1px solid var(--linea); }
.segnali-coda p { margin: 0; color: var(--grigio); font-size: 16.5px; line-height: 1.55; max-width: 62ch; }
.segnali-coda .bottone { flex: none; }
@media (max-width: 620px) { .segnali-coda { gap: 16px; } .segnali-coda .bottone { width: 100%; justify-content: center; } }

@media (max-width: 1000px) { .schede-foto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .schede-foto { grid-template-columns: 1fr; } }

/* ---------- metodo: foto a sinistra, quattro passi numerati ---------- */
.metodo { background: var(--inchiostro); color: #fff; display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, 1fr); align-items: stretch; }
.metodo .foto { position: relative; background: var(--tuta-2); min-height: 340px; }
.metodo .foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Quando la fotografia e' quella della testata riusata qui sotto, il
   fuoco sale: la testata e' larga, questo riquadro e' alto, e prendendo
   la porzione alta si vede un'altra cosa invece della stessa due volte. */
.metodo .foto-eco img { object-position: center 32%; }
.metodo .foto .manca { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #A9BBD0; font-size: 13px; padding: 20px; }
.metodo .corpo { padding: 64px var(--gutter) 64px 56px; max-width: calc(var(--largo) * .78); }
.metodo h2 { color: #fff; margin: 0 0 10px; }
.metodo .occhiello { color: var(--azione); margin: 0 0 14px; }
.metodo .intro { color: #B9C8DA; margin: 0; }
.numerati { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-block-start: 34px; }
.numerati article { border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-medio); padding: 20px 18px 22px; }
.numerati .cifra { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--azione); color: var(--azione); display: grid; place-items: center; font: 700 15px/1 var(--titoli); margin-bottom: 14px; }
.numerati h3 { color: #fff; font-size: 16px; margin: 0 0 6px; }
.numerati p { margin: 0; color: #A9BBD0; font-size: 14px; line-height: 1.5; }
@media (max-width: 1000px) { .metodo { grid-template-columns: 1fr; } .metodo .foto { min-height: 220px; } .metodo .corpo { padding: 48px var(--gutter); max-width: none; } .numerati { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .numerati { grid-template-columns: 1fr; } }

/* ---------- quattro voci con icona, due per due ---------- */
.icone-quattro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 30px; }
.icone-quattro div { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; }
.icone-quattro svg { width: 30px; height: 30px; fill: none; stroke: var(--tuta); stroke-width: 1.6; }
.icone-quattro strong { display: block; color: var(--tuta); font-size: 15.5px; }
.icone-quattro span { color: var(--grigio); font-size: 14.5px; }
@media (max-width: 560px) { .icone-quattro { grid-template-columns: 1fr; } }

/* ---------- risultati: fondo scuro con foto e pannello scuro ---------- */
.risultati { position: relative; isolation: isolate; background: var(--inchiostro); color: #fff; padding: 88px var(--gutter); overflow: hidden; }
.risultati::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--tuta-2); }
.risultati .sfondo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.risultati::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14,23,38,.95) 0%, rgba(14,23,38,.82) 55%, rgba(14,23,38,.7) 100%); }
.risultati h2 { color: #fff; }
.risultati .intro { color: #C2D0E0; }
.risultati .pannello-scuro { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-medio); padding: 26px 28px; }

/* ---------- prezzi dentro un pannello ---------- */
.prezzi-tre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.prezzi-tre dt { font: 700 12px/1.3 var(--titoli); letter-spacing: .07em; text-transform: uppercase; color: var(--grigio); }
.prezzi-tre dd { margin: 7px 0 0; }
.prezzi-tre .cifra { display: block; font: 800 25px/1 var(--titoli); font-stretch: 108%; color: var(--tuta); }
.prezzi-tre .nota { display: block; margin-top: 9px; font-size: 14px; line-height: 1.55; color: var(--grigio); }
@media (max-width: 620px) { .prezzi-tre { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- zona: foto, testo, mappa ---------- */
/* ---------- dove interveniamo: mappa a sinistra, elenco a destra ---------- */
.zona-due { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
	align-items: stretch; max-width: var(--largo); margin-inline: auto;
	background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-medio);
	overflow: hidden; box-shadow: var(--ombra); }
/* La mappa si vede intera: ritagliandola per riempire il pannello si perdevano
   Legnano e la didascalia. Le fasce sopra e sotto prendono il fondo della mappa. */
.zona-due .mappa { background: #F1F1E8; border-inline-end: 1px solid var(--linea);
	line-height: 0; display: flex; align-items: center; }
/* Il <picture> e' il figlio vero del contenitore, non l'<img>: senza una
   larghezza sua collassa a zero, perche' l'immagine dentro chiede il 100%
   di un genitore che a sua volta aspetta l'immagine. */
.zona-due .mappa picture { display: block; width: 100%; }
.zona-due .mappa img { width: 100%; height: auto; display: block; }
.zona-due .mappa .manca { display: grid; place-content: center; min-height: 320px; color: var(--grigio); font-size: 14px; }
.zona-due .corpo { padding: 40px 42px 38px; display: flex; flex-direction: column; justify-content: center; }
/* A 38px "in un territorio piu' ampio." non entra nei 493 della colonna e
   si spezza, lasciando "ampio." da solo su una terza riga. Il titolo scende
   a 34: due righe come nel disegno, e la differenza di corpo non si nota. */
.zona-due h2 { margin: 10px 0 0; font-size: clamp(27px, 2.6vw, 34px); }
.zona-due .intro { margin: 14px 0 0; color: var(--grigio); max-width: 42ch; }
/* Il richiamo per chi sta appena fuori. Una zona di lavoro non finisce su
   una linea netta, e un comune non nominato non vuol dire "non ci veniamo":
   senza questa frase chi non si trova nell'elenco chiude la pagina. */
.zona-due .zona-fuori { display: flex; align-items: center; gap: 16px;
	margin: 26px 0 0; padding: 16px 20px;
	background: var(--acqua-tenue); border-radius: var(--r-piccolo, 12px); }
.zona-due .zona-fuori svg { flex: none; color: var(--acqua); }
.zona-due .zona-fuori span { padding-inline-start: 16px; border-inline-start: 1px solid #CFE4DD;
	font-size: 15px; line-height: 1.4; color: var(--grigio); }
.zona-due .zona-fuori strong { display: block; color: var(--tuta); font-family: var(--titoli);
	font-size: 16.5px; font-stretch: 104%; }
.zona-due .zona-azione { display: flex; align-items: center; gap: 20px; margin-block-start: 22px; flex-wrap: wrap; }
.zona-due .sede { margin: 26px 0 0; padding-block-start: 18px; border-block-start: 1px solid var(--linea);
	font-size: 15px; color: var(--grigio); }
.zona-due .sede strong { display: block; color: var(--tuta); font-family: var(--titoli); }

/* La mappa: solo punti ed etichette. Niente strade, confini o aree inventate. */
.mappa-comuni { width: 100%; height: auto; display: block; font-family: var(--wp--preset--font-family--testo); }
.mappa-comuni .fondo { fill: var(--nebbia); }
.mappa-comuni .trama { opacity: .5; }
.mappa-comuni #arco-punti circle { fill: var(--linea); }
.mappa-comuni text { fill: var(--tuta); font-size: 20px; }
.mappa-comuni .punto { fill: var(--tuta); }
.mappa-comuni .pin { fill: var(--tuta); }
.mappa-comuni .pin-occhio { fill: var(--carta); }
.mappa-comuni .capoluogo { font-weight: 800; font-size: 22px; }
.mappa-comuni .nota { fill: var(--grigio); font-size: 17px; }
.mappa-comuni .piede { font-size: 15px; }
.mappa-comuni .bussola text { fill: var(--grigio); font-size: 18px; }
.mappa-comuni .bussola path { fill: var(--grigio); }

@media (max-width: 980px) {
	.zona-due { grid-template-columns: minmax(0, 1fr); }
	/* L'a capo scritto a mano nel titolo era tarato su "e in tre province".
	   Con "cinque" la seconda riga non ci sta e si spezza in "e in cinque /
	   province", che e' un taglio brutto. Sul telefono si toglie l'a capo
	   forzato e si lascia decidere al bilanciamento, che e' gia' attivo su
	   tutti i titoli. Su schermo largo la riga resta dov'era. */
	.zona-due h2 br { display: none; }
	/*
	 * Impilando, la mappa va subito sotto il titolo e prima dell'elenco:
	 * risponde a "venite anche da me?" prima che uno si metta a leggere
	 * trenta nomi di comuni. In fondo a tutto, dov'era, non la guardava
	 * nessuno.
	 *
	 * La scatola del testo sparisce (display: contents) e i suoi pezzi
	 * diventano righe della stessa griglia della mappa: solo cosi' si puo'
	 * infilare la mappa in mezzo al testo senza spostarla nel codice, che
	 * romperebbe le due colonne su schermo largo. Il padding che teneva il
	 * testo staccato dai bordi se ne va con la scatola, quindi si rimette
	 * sui pezzi.
	 */
	.zona-due .corpo { display: contents; }
	.zona-due .corpo > * { padding-inline: var(--gutter); }
	.zona-due .occhiello { padding-block-start: 32px; }
	.zona-due .sede { padding-block-end: 30px; }

	.zona-due .occhiello, .zona-due h2, .zona-due .intro { order: 1; }
	/* La fascia con la cartina ha un filo sopra e sotto: appoggiata al testo
	   quel filo sembra una sottolineatura della frase invece del bordo di
	   un'immagine. Lo spazio sopra la stacca dall'elenco delle province.
	   Nessun limite di larghezza: con la cartina verticale serviva a non farla
	   diventare altissima, ma lasciava 15px di fondo scoperto per lato --
	   due bande chiare ai bordi. Quella orizzontale puo' riempire. */
	.zona-due .mappa { order: 2; min-height: 0; aspect-ratio: auto;
		margin-block-start: 24px;
		border-inline-end: 0;
		border-block: 1px solid var(--linea); }
	.zona-due .zona-fuori, .zona-due .zona-azione, .zona-due .sede { order: 3; }
	/* Il richiamo non e' un paragrafo: e' una scatola colorata. Prendendo il
	   padding dei fratelli il fondo acqua arrivava a toccare la cornice del
	   pannello e sembrava una fascia, non un riquadro. Qui si scambiano i due:
	   il gutter passa al margine, l'imbottitura torna dentro la scatola. */
	.zona-due .zona-fuori { margin: 26px var(--gutter) 0; padding: 14px 16px; gap: 13px; }
	.zona-due .zona-fuori span { padding-inline-start: 13px; }
}

/* ---------- chiusura su due colonne ---------- */
.chiusura-duo { background: var(--nebbia); color: var(--inchiostro); padding: 58px var(--gutter);
	border-block-start: 2px solid var(--linea); }
.chiusura-duo .dentro { max-width: var(--largo); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }
.chiusura-duo h2 { color: var(--tuta); margin: 0 0 8px; font-size: clamp(24px, 2.6vw, 32px); }
.chiusura-duo p { color: var(--grigio); margin: 0; max-width: 46ch; }
@media (max-width: 900px) { .chiusura-duo .dentro { grid-template-columns: 1fr; gap: 26px; } }

/* Fascia finale con il modulo: chi vuole telefona, chi non vuole lascia il numero. */
.chiusura-duo.con-modulo .dentro { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 48px; align-items: start; }
.chiusura-duo.con-modulo .parola .azioni-servizio { margin-top: 26px; }
.modulo-scatola { background: #fff; color: var(--inchiostro); border: 1px solid var(--linea);
	border-radius: var(--r-medio); padding: 24px 24px 26px; box-shadow: var(--ombra); }
.modulo-scatola .capo { font: 700 12.5px/1.3 var(--titoli); letter-spacing: .09em; text-transform: uppercase; color: var(--grigio); margin: 0 0 15px; }
.modulo-scatola p { color: inherit; max-width: none; }
.modulo-scatola .modulo { gap: 14px; }
.modulo-scatola .modulo-privacy { font-size: 14px; line-height: 1.55; }
@media (max-width: 900px) { .chiusura-duo.con-modulo .dentro { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
/* il pulsante della foto, quando sta su fondo scuro */
.wa-foto.su-scuro { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.wa-foto.su-scuro:hover { background: rgba(255,255,255,.08); }
.wa-foto.su-scuro svg { fill: #fff; }

/* ---------- foto con la didascalia scritta sopra ---------- */
.foto-didascalia { position: relative; margin: 0; border-radius: var(--r-medio); overflow: hidden; background: var(--nebbia); min-height: 330px; box-shadow: var(--ombra); }
.foto-didascalia img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto-didascalia .manca { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--grigio); font-size: 13px; padding: 26px; }
.foto-didascalia .manca strong { display: block; font: 700 12px/1.4 var(--titoli); letter-spacing: .09em; text-transform: uppercase; margin-bottom: 6px; }
/* velo scuro in basso: la didascalia deve reggere su qualsiasi fotografia */
.foto-didascalia::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(to top, rgba(var(--inchiostro-rgb), .72), rgba(var(--inchiostro-rgb), 0)); pointer-events: none; }
.foto-didascalia:has(.manca)::after { display: none; }
.foto-didascalia figcaption { z-index: 2; position: absolute; left: 26px; right: 26px; bottom: 24px; color: #fff; font: 400 21px/1.35 Georgia, 'Times New Roman', serif; font-style: italic; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.foto-didascalia:has(.manca) figcaption { color: var(--tuta); text-shadow: none; }

.manca-sfondo { max-width: var(--largo); margin: 34px auto 0; font-size: 13px; color: #8FA8C4; border-top: 1px dashed rgba(255,255,255,.2); padding-top: 14px; }

/* credito per le fotografie a licenza libera */
.credito { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 5px 10px; background: rgba(14,23,38,.55); color: #fff; font-size: 10.5px; letter-spacing: .02em; }

/* ---------- la foto sfuma dentro al fondo scuro, niente bordo netto ---------- */
.testata-doppia .foto::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, rgb(var(--inchiostro-rgb)) 0%, rgba(var(--inchiostro-rgb), .72) 14%, rgba(var(--inchiostro-rgb), .18) 42%, rgba(var(--inchiostro-rgb), 0) 62%),
		linear-gradient(0deg, rgba(var(--inchiostro-rgb), .45) 0%, rgba(var(--inchiostro-rgb), 0) 38%);
}
.metodo .foto::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(270deg, rgb(var(--inchiostro-rgb)) 0%, rgba(var(--inchiostro-rgb), .55) 22%, rgba(var(--inchiostro-rgb), 0) 68%);
}
@media (max-width: 900px) {
	/* sul telefono la foto sta sopra al testo: la sfumatura gira in verticale */
	.testata-doppia .foto::after {
		background: linear-gradient(180deg, rgba(var(--inchiostro-rgb), .25) 0%, rgba(var(--inchiostro-rgb), 0) 30%, rgba(var(--inchiostro-rgb), .9) 100%);
	}
}
@media (max-width: 1000px) {
	.metodo .foto::after {
		background: linear-gradient(180deg, rgba(var(--inchiostro-rgb), 0) 40%, rgb(var(--inchiostro-rgb)) 100%);
	}
}

/* ---------- "un ambiente sicuro": il pannello scavalca la fotografia ---------- */
/* Tutto quello che vale solo da 900px in su sta qui sopra: le regole per il
   telefono vengono dopo, altrimenti la specificita' le ribalta in silenzio. */
.sez-sicuro { padding-block: var(--spazio-sez); }
.sez-sicuro .duo { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; align-items: start; }
.sez-sicuro .testo { position: relative; z-index: 2; padding-top: 18px; }
.sez-sicuro .testo h2 { max-width: 12ch; }
.sez-sicuro .testo .intro { max-width: 40ch; }
.sez-sicuro .pannello { width: calc(100% + 104px); margin-top: 34px; }
/* la didascalia sta a destra: a sinistra la copre il pannello */
.sez-sicuro .foto-didascalia { min-height: 540px; }
.sez-sicuro .foto-didascalia figcaption { left: auto; right: 28px; bottom: 26px; max-width: 54%; text-align: right; }

@media (max-width: 900px) {
	/* una colonna sola: in due, a 390px, il titolo si spezzava parola per parola */
	.sez-sicuro .duo { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.sez-sicuro .testo h2 { max-width: none; }
	.sez-sicuro .testo .intro { max-width: none; }
	.sez-sicuro .pannello { width: 100%; }
	.sez-sicuro .foto-didascalia { min-height: 280px; }
	.sez-sicuro .foto-didascalia figcaption { max-width: 70%; }
}

/* Senza fotografia: titolo a sinistra, testo e spunte a destra. Queste regole
   stanno dopo la media query qui sopra, quindi la loro va ripetuta in fondo. */
.sez-sicuro.senza-foto .duo { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 48px; align-items: start; }
.sez-sicuro.senza-foto .testo { padding-top: 6px; }
.sez-sicuro.senza-foto .pannello { width: 100%; margin-top: 22px; }
@media (max-width: 900px) {
	.sez-sicuro.senza-foto .duo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.sez-sicuro.senza-foto .testo { padding-top: 0; }
}

/* Fotografia a sinistra: due colonne pulite, senza il pannello che la scavalca.
   Su telefono il testo resta prima, la foto scende sotto. */
.sez-sicuro.foto-prima .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; }
.sez-sicuro.foto-prima .testo { padding-top: 0; }
.sez-sicuro.foto-prima .pannello { width: 100%; margin-top: 22px; }
.sez-sicuro.foto-prima .foto-didascalia { order: -1; min-height: 430px; }
@media (max-width: 900px) {
	.sez-sicuro.foto-prima .duo { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.sez-sicuro.foto-prima .foto-didascalia { order: 0; min-height: 230px; }
}

/* ---------- pulsanti a pillola, come nel mockup ---------- */
.tel-grande {
	flex-direction: row; align-items: center; gap: 13px;
	border-radius: 999px; padding: 11px 13px 11px 12px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.tel-grande .tondo { width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, .14); display: grid; place-items: center; flex: none; }
.tel-grande .tondo svg { width: 19px; height: 19px; fill: currentColor; }
.tel-grande .etichette { display: flex; flex-direction: column; gap: 1px; padding-right: 4px; }
.tel-grande .etichette small { font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .72; }
.tel-grande .etichette strong { font: 800 22px/1 var(--titoli); font-stretch: 108%; letter-spacing: -.01em; }
.tel-grande .freccia { width: 30px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .14); display: grid; place-items: center; flex: none; }
.tel-grande .freccia svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wa-foto { border-radius: 999px; padding: 13px 24px 13px 20px; }
.barra-chiama, .barra-wa { font-size: 18px; }
@media (max-width: 420px) {
	.tel-grande .etichette strong { font-size: 19px; }
	.tel-grande .freccia { display: none; }
}

/* ---------- il numero in testata è un pulsante, non un collegamento ---------- */
.testata-tel {
	margin-left: auto; display: flex; align-items: center; gap: 10px;
	background: var(--azione); color: var(--su-azione); text-decoration: none;
	border-radius: 999px; padding: 7px 18px 7px 8px; flex: none; min-height: 48px; min-width: 48px; justify-content: center; box-sizing: border-box;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .12);
}
.testata-tel:hover { background: var(--azione-scuro); }
.testata-tel .tondo { width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .14); display: grid; place-items: center; flex: none; }
.testata-tel .tondo svg { width: 16px; height: 16px; fill: currentColor; }
.testata-tel .dentro { display: flex; flex-direction: column; line-height: 1.1; }
.testata-tel strong { font: 800 19px/1.1 var(--titoli); font-stretch: 106%; letter-spacing: -.01em; }
.testata-tel small { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .72; }
@media (max-width: 1000px) { .testata-tel { padding-right: 14px; } .testata-tel small { display: none; } }
@media (max-width: 560px) { .testata-tel .dentro { display: none; } .testata-tel { padding: 7px; } }

/* ---------- la foto su WhatsApp, spiegata in tre passaggi ---------- */
.sez-foto-wa { padding: var(--spazio-sez) 0; }
.foto-wa-blocco { background: var(--nebbia); color: var(--inchiostro); border: 2px solid var(--linea);
	border-radius: var(--r-grande); margin-inline: var(--gutter); padding: 38px 44px; }
.foto-wa-blocco > .dentro { max-width: calc(var(--largo) - 92px); margin-inline: auto; }
.foto-wa-blocco h2 { color: var(--tuta); margin: 0 0 10px; }
.foto-wa-blocco .intro { color: var(--grigio); margin: 0; max-width: 56ch; }
.foto-wa-passi { list-style: none; counter-reset: fw; padding: 0; margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.foto-wa-passi li { counter-increment: fw; position: relative; padding-top: 42px; color: var(--grigio); font-size: 15.5px; line-height: 1.5; }
.foto-wa-passi li::before {
	content: counter(fw); position: absolute; top: 0; left: 0;
	width: 30px; height: 30px; border-radius: 50%; background: var(--azione); color: var(--su-azione);
	display: grid; place-items: center; font: 800 15px/1 var(--titoli);
}
.foto-wa-passi strong { display: block; color: var(--tuta); margin-bottom: 4px; }
.foto-wa-blocco .azioni-servizio { margin-top: 26px; }
/* Con l'illustrazione la sezione andava in colonna e diventava alta 1000px:
   affiancandole il testo scende sotto i 500. */
.foto-wa-blocco > .dentro.con-guida { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; align-items: center; }
.foto-wa-blocco > .dentro.con-guida .guida-foto { margin: 0; }
@media (max-width: 940px) {
	.foto-wa-blocco > .dentro.con-guida { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 760px) {
	.foto-wa-blocco { padding: 30px 24px 32px; margin-inline: 12px; }
	.foto-wa-passi { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- banda larga in apertura della sezione dei segni ---------- */
.apertura-segnali { max-width: var(--largo); margin: 32px auto 0; border-radius: var(--r-medio); overflow: hidden; line-height: 0; box-shadow: var(--ombra); }
.apertura-segnali img { width: 100%; height: auto; display: block; }
.riconoscere .schede-foto, .sez .schede-foto { margin-block-start: 24px; }

/* ---------- striscia di prova subito sotto la testata ---------- */
.striscia-prova { background: var(--nebbia); padding: 26px var(--gutter); }
.striscia-prova .dentro { max-width: var(--largo); margin-inline: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 38px; align-items: center; }
.striscia-prova .voto { display: grid; gap: 2px; padding-right: 38px; border-right: 1px solid var(--linea); }
.striscia-prova .stelle { margin: 0; font-size: 19px; letter-spacing: 3px; line-height: 1; }
.striscia-prova .numero { margin: 0; display: flex; flex-direction: column; }
.striscia-prova .numero strong { font: 800 20px/1.2 var(--titoli); color: var(--tuta); }
.striscia-prova .numero span { font-size: 13.5px; color: var(--grigio); }
.striscia-prova blockquote { margin: 0; border: 0; padding: 0; }
.striscia-prova blockquote p { margin: 0; color: var(--tuta); font-size: 16.5px; line-height: 1.5; max-width: 72ch; }
.striscia-prova cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--grigio); }
@media (max-width: 820px) {
	.striscia-prova .dentro { grid-template-columns: 1fr; gap: 16px; }
	.striscia-prova .voto { padding-right: 0; padding-bottom: 14px; border-right: 0; border-bottom: 1px solid var(--linea); grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
}

/* il disegno al posto della foto, dentro la scheda di un segno */
.schede-foto .figura .marca.grande { width: 100%; height: 100%; border-radius: 0; background: var(--nebbia); display: grid; place-items: center; }
.schede-foto .figura .marca.grande svg { width: 56%; height: 56%; }

/* l'illustrazione dei tre passaggi */
/* Niente fondo bianco: serviva alla vecchia illustrazione, che era opaca e
   stava su una scheda scura. La resa di adesso ha il fondo trasparente, e
   appoggia da sola sul colore della scheda. */
.guida-foto { margin: 30px 0 0; line-height: 0; }
.guida-foto img { width: 100%; height: auto; display: block; }

/* ---------- da cosa dipende il prezzo, quando le cifre non si danno ---------- */
.prezzi-fattori { margin: 0; display: grid; gap: 18px; }
.prezzi-fattori .fattore { display: grid; gap: 4px; padding-bottom: 18px; border-bottom: 1px solid var(--linea); }
.prezzi-fattori .fattore:last-child { padding-bottom: 0; border-bottom: 0; }
.prezzi-fattori dt { display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: center; font: 700 16.5px/1.3 var(--titoli); color: var(--tuta); }
.prezzi-fattori .cifra-ord { width: 26px; height: 26px; border-radius: 50%; background: var(--acqua-tenue); color: var(--richiamo); display: grid; place-items: center; font-size: 13px; }
.prezzi-fattori dd { margin: 0 0 0 37px; }
.prezzi-fattori .nota { font-size: 15px; line-height: 1.55; color: var(--grigio); }
.pannello .coda { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 15px; color: var(--grigio); }

/* ---------- chi siamo ---------- */
.chi-apre > * { max-width: var(--largo); margin-inline: auto; }
.chi-foto { margin: 34px auto 0; border-radius: var(--r-medio); overflow: hidden; line-height: 0; box-shadow: var(--ombra); }
.chi-foto img { width: 100%; height: auto; display: block; }
/*
 * Misurato: a 1440 e a 1280 la fotografia veniva 1180 x 787, mentre il blocco
 * di testo sopra e' alto 213. Quattro volte il testo: apriva la pagina con
 * un muro di immagine. Limitata a 880, che col rapporto 2:1 del ritaglio fa
 * 440 -- il doppio del testo, che e' la proporzione giusta per una fotografia
 * di appoggio. Serve piu' specificita' di .chi-apre > *, che impone --largo.
 * Su telefono resta a tutta larghezza: li' il problema non c'e' mai stato.
 */
@media (min-width: 760px) {
	.chi-apre .chi-foto { max-width: 880px; }
}
.chi-foto.manca { display: grid; place-content: center; gap: 8px; text-align: center; aspect-ratio: 3 / 2;
	border: 2px dashed var(--linea); color: var(--grigio); font-size: 14px; line-height: 1.55; }
.chi-foto.manca strong { font: 700 12px/1.3 var(--titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--richiamo); }
.chi-due { margin-block-start: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 52px; }
.chi-due > div { padding-block-start: 22px; border-block-start: 2px solid var(--tuta); }
.chi-due .capo { margin: 0 0 6px; font: 700 12px/1.3 var(--titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--richiamo); }
.chi-due h3 { margin: 0 0 12px; font-size: 21px; color: var(--tuta); }
.chi-due p { margin: 0 0 14px; color: var(--grigio); font-size: 15.5px; line-height: 1.6; }
.chi-due p strong { color: var(--tuta); }
/*
 * Tolto il riquadro dei requisiti, nella griglia resta un blocco solo: in due
 * colonne sarebbe rimasto mezzo vuoto, e un vuoto cosi' si legge come un
 * difetto. Con un figlio solo la colonna si stringe a 560, che e' la larghezza
 * giusta per tre righe di indirizzo.
 */
.chi-due:has(> div:only-child) { grid-template-columns: minmax(0, 560px); }

.requisiti { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.requisiti li { position: relative; padding-left: 34px; }
.requisiti li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px;
	border-radius: 50%; background: var(--acqua-tenue); }
.requisiti li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 9px; height: 5px;
	border-left: 2px solid var(--acqua); border-bottom: 2px solid var(--acqua); transform: rotate(-45deg); }
.requisiti li.daconfermare { border-bottom: 0; }
.requisiti li.daconfermare::before { background: transparent; border: 1.5px dashed rgba(79, 93, 108, .4); }
.requisiti li.daconfermare::after { opacity: .3; }
.requisiti strong { display: block; color: var(--tuta); font-size: 15.5px; }
.requisiti span { display: block; margin-top: 2px; color: var(--grigio); font-size: 14.5px; line-height: 1.55; }
/* Il blocco del titolare: ritratto verticale stretto a sinistra, non una
   fotografia a tutta larghezza. Una faccia grande quanto una facciata mette
   in imbarazzo; grande quanto una persona rassicura. La regola stretta sta
   qui, prima della media query in fondo, non dopo. */
.chi-persona { margin: 44px auto 0; display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
	gap: 28px 36px; align-items: center; padding-block-start: 28px; border-block-start: 2px solid var(--tuta); }
.chi-persona figure { margin: 0; border-radius: var(--r-medio); overflow: hidden; line-height: 0; box-shadow: var(--ombra); }
.chi-persona figure img { width: 100%; height: auto; display: block; }
.chi-persona .ritratto.manca { display: grid; place-content: center; gap: 8px; text-align: center; aspect-ratio: 4 / 5;
	border: 2px dashed var(--linea); border-radius: var(--r-medio); color: var(--grigio); font-size: 13px; line-height: 1.5; padding: 20px; }
.chi-persona .ritratto.manca strong { font: 700 12px/1.3 var(--titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--richiamo); }
.chi-persona .capo { margin: 0 0 6px; font: 700 12px/1.3 var(--titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--richiamo); }
.chi-persona h3 { margin: 0; font-size: 26px; color: var(--tuta); }
.chi-persona .ruolo { margin: 2px 0 14px; color: var(--grigio); font-size: 15px; }
.chi-persona p { margin: 0 0 16px; color: var(--grigio); font-size: 15.5px; line-height: 1.6; max-width: 56ch; }
.chi-persona p:last-child { margin-bottom: 0; }

/* ---------- contatti ---------- */
.contatti-apre > * { max-width: var(--largo); margin-inline: auto; }
.contatti-tre { margin-block-start: 34px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.contatti-tre .via { display: block; background: var(--carta); border: 1px solid var(--linea);
	border-radius: var(--r-medio); padding: 26px 28px 28px; box-shadow: var(--ombra); text-decoration: none; }
.contatti-tre .via:hover { border-color: var(--tuta); }
.contatti-tre .segno { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
	background: var(--acqua-tenue); margin-bottom: 14px; }
.contatti-tre .segno svg { width: 22px; height: 22px; fill: var(--acqua); }
.contatti-tre strong { display: block; font: 700 12px/1.3 var(--titoli); letter-spacing: .1em;
	text-transform: uppercase; color: var(--richiamo); }
.contatti-tre .valore { display: block; margin: 5px 0 8px; font: 800 20px/1.25 var(--titoli); color: var(--tuta); word-break: break-word; }
.contatti-tre .nota { display: block; color: var(--grigio); font-size: 14.5px; line-height: 1.5; }
.contatti-due { margin-block-start: 24px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; align-items: start; }
.contatti-sede { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r-medio);
	padding: 26px 28px 28px; box-shadow: var(--ombra); }
.contatti-sede .capo { margin: 0 0 6px; font: 700 12px/1.3 var(--titoli); letter-spacing: .1em;
	text-transform: uppercase; color: var(--richiamo); }
.contatti-sede h3 { margin: 0 0 10px; font-size: 20px; color: var(--tuta); }
.contatti-sede p { margin: 0 0 12px; color: var(--grigio); font-size: 15.5px; line-height: 1.6; }
.contatti-sede figure { margin: 16px 0 0; border-radius: var(--r-piccolo); overflow: hidden; line-height: 0; }
.contatti-sede figure img { width: 100%; height: auto; display: block; }
.contatti-sede .comuni-riga { margin-block-start: 14px; font-size: 14px; }

@media (max-width: 900px) {
	.chi-due { grid-template-columns: minmax(0, 1fr); }
	.chi-persona { grid-template-columns: minmax(0, 1fr); justify-items: start; }
	.chi-persona figure, .chi-persona .ritratto.manca { max-width: 260px; }
	.contatti-tre { grid-template-columns: minmax(0, 1fr); }
	.contatti-due { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- comparsa allo scorrimento e microinterazioni ---------- */
/*
 * Lo stato nascosto vale solo sotto html.anim, e quella classe la mette uno
 * script. Senza JS, o con le animazioni ridotte nelle preferenze di sistema,
 * la regola non si applica mai e la pagina e' semplicemente visibile: e' il
 * motivo per cui l'opacita' a zero non sta nel foglio base.
 *
 * Si animano solo opacita' e trasformazione: sono le due proprieta' che il
 * browser compone senza rifare il calcolo del layout, quindi la comparsa non
 * sposta niente e non peggiora lo spostamento cumulativo del contenuto.
 */
html.anim [data-entra] {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity .55s cubic-bezier(.22, .61, .36, 1), transform .55s cubic-bezier(.22, .61, .36, 1);
	transition-delay: var(--ritardo, 0ms);
	will-change: opacity, transform;
}
html.anim [data-entra].vista { opacity: 1; transform: none; will-change: auto; }

/* Le schede si sollevano appena: 3px e un'ombra piu' alta bastano a dire
   "si puo' toccare". Solo dove c'e' un puntatore vero: su un telefono il
   passaggio del mouse non esiste e lo stato resterebbe appiccicato. */
@media (hover: hover) and (pointer: fine) {
	.schede-foto article,
	.monit-carte article,
	.contatti-tre .via,
	.chi-persona figure {
		transition: transform .25s cubic-bezier(.22, .61, .36, 1), box-shadow .25s ease;
	}
	.schede-foto article:hover,
	.monit-carte article:hover,
	.contatti-tre .via:hover,
	.chi-persona figure:hover {
		transform: translateY(-3px);
		box-shadow: var(--ombra-alta);
	}
	/* La freccia del pulsante telefono avanza di tre pixel: il verso del
	   gesto prima del gesto. */
	.tel-grande .freccia { transition: transform .22s cubic-bezier(.22, .61, .36, 1); }
	.tel-grande:hover .freccia { transform: translateX(3px); }
	/* Nell'elenco servizi la freccia dopo il titolo fa la stessa cosa. */
	.listino .wp-block-list li strong a::after { display: inline-block; transition: transform .22s ease; }
	.listino .wp-block-list li:hover strong a::after { transform: translateX(3px); }
}

/* Chi ha chiesto meno movimento non ne riceve: niente comparse, niente
   sollevamenti, niente frecce che scorrono. Il sito resta tutto leggibile. */
@media (prefers-reduced-motion: reduce) {
	html.anim [data-entra] { opacity: 1; transform: none; transition: none; }
	.schede-foto article, .monit-carte article, .contatti-tre .via, .chi-persona figure,
	.tel-grande .freccia, .listino .wp-block-list li strong a::after { transition: none; }
	.schede-foto article:hover, .monit-carte article:hover, .contatti-tre .via:hover,
	.chi-persona figure:hover { transform: none; }
	.tel-grande:hover .freccia, .listino .wp-block-list li:hover strong a::after { transform: none; }
}

/* ---------- alcuni lavori ---------- */
/* La pagina e' fatta di blocchi nativi perche' la galleria la deve poter
   aggiornare Ruben dal pannello. Qui il blocco galleria di WordPress viene
   solo rivestito: griglia, angoli, ombra e didascalia a sinistra. */
.lavori-sez > * { max-width: var(--largo); margin-inline: auto; }
/*
 * margin-block e non la forma abbreviata: "margin: 0 0 14px" azzera anche i
 * margini orizzontali, e con essi il "margin-inline: auto" che .lavori-sez > *
 * usa per centrare. Il titolo finiva a sinistra mentre la griglia sotto restava
 * centrata, con 110px di scarto fra i due.
 */
.lavori-sez .occhiello { margin-block: 0 10px; }
.lavori-sez h2 { margin-block: 0 14px; }
.lavori-sez .intro { margin-block: 0 34px; max-width: 62ch; color: var(--grigio); }
.lavori-griglia { --wp--style--unstable-gallery-gap: 22px; gap: 22px; }
.lavori-griglia figure.wp-block-image {
	border: 1px solid var(--linea); border-radius: var(--r-medio); overflow: hidden;
	background: var(--carta); box-shadow: var(--ombra);
}
.lavori-griglia figure.wp-block-image img {
	display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
}
/* Il blocco galleria di WordPress stampa la didascalia SOPRA la fotografia,
   bianca su una sfumatura scura. Qui la riportiamo sotto, dentro la scheda:
   una riga che spiega il lavoro si legge, una scritta sull immagine no. */
.lavori-griglia.has-nested-images figure.wp-block-image figcaption {
	position: static; padding: 12px 16px 14px; margin: 0; text-align: left;
	font-size: 14.5px; line-height: 1.5; color: var(--grigio);
	background: none; background-image: none; max-height: none; overflow: visible;
	flex-grow: 0; width: auto; inset: auto; color: var(--grigio);
}
/* Tre per riga: senza una base esplicita il blocco ne metteva due. */
.lavori-griglia.has-nested-images figure.wp-block-image {
	flex-grow: 0; flex-basis: calc(33.333% - 15px); display: flex; flex-direction: column;
}
@media (max-width: 860px) { .lavori-griglia.has-nested-images figure.wp-block-image { flex-basis: calc(50% - 8px); } }
@media (max-width: 560px) { .lavori-griglia.has-nested-images figure.wp-block-image { flex-basis: 100%; } }
@media (max-width: 900px) { .lavori-griglia { --wp--style--unstable-gallery-gap: 16px; gap: 16px; } }
@media (hover: hover) and (pointer: fine) {
	.lavori-griglia figure.wp-block-image { transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease; }
	.lavori-griglia figure.wp-block-image:hover { transform: translateY(-3px); box-shadow: var(--ombra-alta); }
}
@media (prefers-reduced-motion: reduce) {
	.lavori-griglia figure.wp-block-image { transition: none; }
	.lavori-griglia figure.wp-block-image:hover { transform: none; }
}

/* ---------- check-up: WhatsApp davanti, telefono di spalla ---------- */
/*
 * Nella sezione del check-up il testo chiede una fotografia. Avere li' il
 * pulsante "Chiama" piu' grosso di quello di WhatsApp chiedeva una cosa e ne
 * offriva un'altra: il lime, che e' il colore dell'azione, passa a WhatsApp.
 * L'ordine cambia anche nel documento, non solo a video, cosi' chi naviga da
 * tastiera o con uno screen reader incontra prima l'azione che gli chiediamo.
 */
/* L'ordine lo decide gia' il PHP: qui serviva solo a invertire a video, e
   quando i due pulsanti andavano a capo mandava il telefono SOPRA. */
.azioni-servizio.wa-primo { align-items: center; }
.azioni-servizio.wa-primo .wa-foto {
	background: var(--azione); color: var(--su-azione); border-color: var(--azione);
	box-shadow: var(--ombra);
}
.azioni-servizio.wa-primo .wa-foto:hover { background: var(--azione-scuro); border-color: var(--azione-scuro); }
.azioni-servizio.wa-primo .wa-foto svg { fill: var(--su-azione); }
.azioni-servizio.wa-primo .wa-foto small { opacity: .78; }
/* il telefono arretra: resta leggibile e cliccabile, ma non chiama l'occhio */
.azioni-servizio.wa-primo .tel-grande {
	background: transparent; color: var(--tuta); border: 2px solid var(--linea); box-shadow: none;
}
.azioni-servizio.wa-primo .tel-grande:hover { background: var(--nebbia); border-color: var(--tuta); }
.azioni-servizio.wa-primo .tel-grande .tondo,
.azioni-servizio.wa-primo .tel-grande .freccia { background: var(--nebbia); }
.azioni-servizio.wa-primo .tel-grande strong { font-size: 22px; }

/* L'illustrazione del check-up e' verticale: l'altezza si tiene a bada, se no
   la sezione cresce di duecento pixel per una figura sola. */
.guida-foto img { max-height: 400px; width: auto; margin-inline: auto; }
@media (max-width: 940px) { .guida-foto img { max-height: 320px; } }

/* ---------- monitoraggio con la fotografia in semisfondo ---------- */
/*
 * Variante di pagina, non il modo normale. La fotografia sta dietro al testo
 * e sopra c'e' un velo: non e' un effetto, e' quello che tiene il contrasto
 * del testo bianco sopra la soglia. Il velo e' piu' fitto a sinistra, dove
 * stanno le parole, e si apre a destra dove sta il tecnico: cosi' la foto si
 * vede e il testo resta leggibile senza compromessi a meta'.
 */
.sez-monitoraggio.con-sfondo { position: relative; background: var(--inchiostro); isolation: isolate; }
.sez-monitoraggio.con-sfondo::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background-image: var(--sfondo); background-size: cover; background-position: 72% center;
}
.sez-monitoraggio.con-sfondo::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(var(--inchiostro-rgb), .94) 0%, rgba(var(--inchiostro-rgb), .88) 42%, rgba(var(--inchiostro-rgb), .58) 100%),
		linear-gradient(0deg, rgba(var(--inchiostro-rgb), .55), rgba(var(--inchiostro-rgb), .55));
}
/* La misura corta va al testo, non al blocco: stringendo il blocco questo
   si centrava e il titolo finiva rientrato rispetto alla scheda sotto. */
.sez-monitoraggio.con-sfondo .monit-capo.solo-testo { grid-template-columns: minmax(0, 1fr); }
.sez-monitoraggio.con-sfondo .monit-capo.solo-testo .testo { max-width: 62ch; }
.sez-monitoraggio.con-sfondo .occhiello { color: var(--azione); }
.sez-monitoraggio.con-sfondo h2 { color: #fff; }
.sez-monitoraggio.con-sfondo .sommario { color: #D7E2EE; }
.sez-monitoraggio.con-sfondo .sommario strong { color: #fff; }
/* Una scheda sola non si stira per tutta la riga: resta della sua misura. */
.sez-monitoraggio.con-sfondo .monit-carte { grid-template-columns: minmax(0, 560px); margin-block-start: 28px; }
@media (max-width: 760px) {
	.sez-monitoraggio.con-sfondo::before { background-position: 64% center; }
	.sez-monitoraggio.con-sfondo::after {
		background: linear-gradient(0deg, rgba(var(--inchiostro-rgb), .92), rgba(var(--inchiostro-rgb), .92));
	}
}
/* Su fondo fotografico la fascia finale non ha piu' bisogno del suo scuro:
   sarebbe una scatola dentro una scatola. Resta un filo e un velo appena. */
.sez-monitoraggio.con-sfondo .monit-fondo {
	/* Scurisce, non schiarisce: col velo bianco la parte chiara della
	   fotografia passava sotto e la riga piccola scendeva a 3,85:1. */
	background: rgba(var(--inchiostro-rgb), .62);
	border: 1px solid rgba(255, 255, 255, .16);
	backdrop-filter: blur(3px);
}
/* Su telefono la frase si legge su tre righe: a quel corpo le sottolineature
   arrivavano a toccare la riga sotto. */
@media (max-width: 600px) {
	.richiesta-frase { line-height: 1.7; font-size: 23px; }
	.richiesta { gap: 18px; }
}
/* Nel piede il titolo di una colonna senza figli e' il collegamento stesso. */
.piede-capo a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.piede-capo a:hover { color: var(--azione); }

/* Fascia del metodo senza fotografia: il testo prende tutta la larghezza e si
   centra come le altre sezioni, invece di restare schiacciato a destra. */
.metodo.senza-foto { grid-template-columns: minmax(0, 1fr); }
.metodo.senza-foto .corpo {
	max-width: var(--largo); margin-inline: auto;
	padding: var(--spazio-sez) var(--gutter);
}
/* ATTENZIONE: qui dentro i margini verticali si scrivono con margin-block,
   mai con l'abbreviazione "margin: X 0 0". L'abbreviazione azzera anche i
   margini laterali, cioe' proprio l'auto che centra il blocco dentro --largo,
   e il titolo finisce incollato al bordo mentre l'occhiello resta centrato.
   E' lo stesso errore gia' fatto una volta su questo foglio.

   La sezione "chi viene da te" ha perso la colonna con la fotografia: era il
   secondo ritaglio dello stesso scatto della testata.
   Qui NON si usa "> * { max-width; margin-inline: auto }": con quella tecnica
   ogni figlio diventa una scatola centrata per conto suo, e un paragrafo piu'
   stretto si centra invece di allinearsi al titolo. Si imbottisce la sezione e
   i figli restano a filo, come in tutte le altre. */
.sez.chi { padding-inline: max(var(--gutter), calc((100% - var(--largo)) / 2)); }
.sez.chi h2 { margin-block: 10px 0; }
.sez.chi .intro { margin-block: 16px 0; max-width: 62ch; }
/* Stessa spunta del resto del sito, disegnata con due pseudo-elementi: il
   tondo e il segno. Avevo scritto una maschera con una variabile inventata. */
ul.wp-block-list.spunte-home { margin-block: 22px 0; margin-inline: 0; padding-inline-start: 0; list-style: none; display: grid; gap: 13px; max-width: 72ch; }
.spunte-home li { position: relative; padding-left: 36px; color: var(--grigio); line-height: 1.55; }
.spunte-home li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--acqua-tenue); }
.spunte-home li::after { content: ""; position: absolute; left: 7px; top: 8px; width: 9px; height: 5px; border-left: 2px solid var(--richiamo); border-bottom: 2px solid var(--richiamo); transform: rotate(-45deg); }

/* ---------- testata della home: fotografia a fondo pieno ---------- */
/*
 * La fotografia sta sotto tutto, a tutta larghezza, col testo a sinistra e
 * la scheda a destra. Perche' funzioni la fotografia dev'essere composta
 * per questo riquadro, non ritagliata a forza dopo. Le zone misurate su
 * una finestra da 1440:
 *
 *      0 ---- 45% ---- 68% ---- 89% ---- 100%
 *      |  testo   | si vede  | scheda |  si vede
 *
 * Quindi: meta' sinistra chiara e sgombra, soggetto fra il 45 e il 68,
 * destra libera di essere piena perche' la copre la scheda.
 */
.hero:has(.scheda-richiesta) { min-height: 660px; }

/*
 * La velatura serve solo dove stanno le parole. Misurato il 22/10: con la
 * sfumatura vecchia, che arrivava al 58% e restava al 12% fino in fondo, il
 * blu della tuta passava da R23 G76 B127 a un grigio R191 G197 B206. Questa
 * si spegne al 54%, prima della fascia che si vede.
 */
.hero:has(.scheda-richiesta)::before {
	/* Caduta ripida e non lunga: deve coprire fino alla fine del testo (45%)
	   e spegnersi prima della toppa col logo, che comincia li' accanto. */
	background: linear-gradient(90deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.88) 32%, rgba(255,255,255,.74) 44%, rgba(255,255,255,.18) 50%, rgba(255,255,255,0) 54%);
}

/*
 * Il 52% non e' a occhio. La toppa col logo sta fra il 46,9% e il 62,9%
 * del file; il riquadro mostra 1408 dei 1706 px dell'immagine scalata,
 * quindi restano 298 px di scorrimento. Fra la fine del testo (634) e
 * l'inizio della scheda (929) ci sono 295 px, e il logo ne occupa 273:
 * centrato in quella finestra cade al 52%. Un pixel in piu' e la scheda
 * se ne mangia un pezzo -- col 6% di prima ne copriva 126.
 */
.hero:has(.scheda-richiesta) .hero-foto img { object-position: 52% center; }

/*
 * L'occhiello della home. Sopra gli 800px sta sulla fotografia velata di
 * scuro e lo schiarisce la regola in fondo al foglio; sotto, la fascia e'
 * piena come nelle testate dei servizi e prende il loro stesso azzurro
 * spento: 6,5:1 sul fondo inchiostro, dove ne bastano 4,5 a quel corpo.
 * Il grigio di prima andava bene sul chiaro e qui sarebbe sparito.
 */
.hero .occhiello { color: #93A7BF; }

/*
 * La scheda esce dal flusso invece di stare in una griglia. Con la griglia
 * ogni pezzo di testo diventava una riga, le righe si allungavano e la
 * testata arrivava a 1300 pixel con il titolo finito sotto la scheda.
 */
.hero:has(.scheda-richiesta) .hero-testo { position: relative; padding-right: 420px; }
.hero:has(.scheda-richiesta) .hero-testo > :not(.scheda-richiesta) { max-width: 520px; }
.hero:has(.scheda-richiesta) .scheda-richiesta {
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	width: 360px; margin: 0;
}

@media (max-width: 1000px) {
	/* Sotto i mille pixel la scheda torna nel flusso, sotto il testo. */
	.hero:has(.scheda-richiesta) .hero-testo { padding-right: 0; }
	.hero:has(.scheda-richiesta) .scheda-richiesta {
		position: static; transform: none; width: 100%; max-width: 420px; margin-block-start: 28px;
	}
	.hero:has(.scheda-richiesta)::before { background: rgba(255,255,255,.93); }
}

.scheda-richiesta {
	background: var(--carta); border-radius: var(--r-medio); box-shadow: var(--ombra-alta);
	padding: 26px 26px 22px; display: grid; gap: 14px; margin: 0;
	border-top: 4px solid var(--azione);
}
.scheda-capo { margin: 0; font: 700 13px/1.3 var(--titoli); letter-spacing: .09em; text-transform: uppercase; color: var(--richiamo); }
.scheda-campo { margin: 0; display: grid; gap: 6px; }
.scheda-campo label { font: 600 14px/1.3 var(--wp--preset--font-family--testo); color: var(--tuta); }
.scheda-campo select {
	width: 100%; font: 500 16px/1.3 var(--wp--preset--font-family--testo); color: var(--inchiostro);
	background: #fff; border: 1.5px solid var(--linea); border-radius: var(--r-piccolo);
	padding: 11px 36px 11px 12px; min-height: 48px; cursor: pointer;
	appearance: none; -webkit-appearance: none;
	background-image: var(--freccia-giu); background-repeat: no-repeat;
	background-position: right 12px center; background-size: 12px;
}
.scheda-campo select:focus-visible { border-color: var(--acqua); outline: 2px solid var(--acqua); outline-offset: 1px; }

/* I due riquadri casa/azienda: il radio sta sotto, si clicca l'etichetta. */
.scheda-chi { border: 0; padding: 0; margin: 0; }
/* Niente float: schiacciava i due riquadri a larghezza zero. Una legenda
   dentro un fieldset va trattata come un blocco normale. */
.scheda-chi legend { font: 600 14px/1.3 var(--wp--preset--font-family--testo); color: var(--tuta); padding: 0 0 6px; display: block; width: 100%; }
.scheda-chi .scelte { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scheda-chi label {
	position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer;
	padding: 14px 8px 12px; border: 1.5px solid var(--linea); border-radius: var(--r-piccolo);
	background: #fff; transition: border-color .15s ease, background-color .15s ease;
}
/* Il radio resta nel documento ma invisibile: cosi' la tastiera e gli screen
   reader lo trovano, e il riquadro intero fa da bersaglio. */
.scheda-chi input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; }
.scheda-chi .segno svg { width: 26px; height: 26px; fill: none; stroke: var(--tuta); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.scheda-chi .nome { font: 600 14.5px/1.2 var(--wp--preset--font-family--testo); color: var(--tuta); }
.scheda-chi label:has(input:checked) { border-color: var(--tuta); border-width: 2px; background: var(--nebbia); padding: 13px 7px 11px; }
.scheda-chi label:has(input:focus-visible) { outline: 2px solid var(--acqua); outline-offset: 2px; }
.scheda-chi label:hover { border-color: var(--tuta); }

.scheda-invia { width: 100%; justify-content: center; font-size: 17px; }
.scheda-invia svg { fill: #fff; }
/* Riempimento e non flex: in un contenitore flex lo spazio in coda al testo
   viene scartato e "oppure chiama il" si attacca al numero. */
.scheda-tel { display: block; text-align: center; font-size: 15px; color: var(--grigio); text-decoration: none; padding-block: 13px; }
.scheda-tel strong { color: var(--tuta); font-family: var(--titoli); font-size: 17px; }
.scheda-tel:hover strong { color: var(--richiamo); }
.scheda-nota { margin: 0; text-align: center; font-size: 13px; color: var(--grigio); }

/* ---------------------------------------------------------------------- */
/* Griglia degli infestanti e dei servizi, in home.                        */
/*                                                                         */
/* Riquadri e non righe: si cerca una parola, e la si trova prima con      */
/* l'occhio che leggendo otto righe dall'alto. Il collegamento e' tutto il */
/* riquadro, non il nome: su telefono un bersaglio grande si centra.       */
.griglia-servizi .riquadri {
	list-style: none; padding: 0;
	display: grid; gap: 14px;
	grid-template-columns: repeat(4, 1fr);
	margin-block-start: 30px;
}
.griglia-servizi .riquadri-larghi { grid-template-columns: repeat(5, 1fr); }
.griglia-servizi .riquadri li { margin: 0; }

.griglia-servizi .riquadri a {
	display: flex; flex-direction: column; gap: 12px;
	min-height: 128px; height: 100%; padding: 18px 16px;
	border: 1px solid var(--linea); border-radius: var(--r-medio);
	background: #fff; color: var(--tuta); text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.griglia-servizi .riquadri .segno { display: block; }
.griglia-servizi .riquadri svg {
	width: 34px; height: 34px; display: block;
	fill: none; stroke: var(--acqua); stroke-width: 1.5;
	stroke-linecap: round; stroke-linejoin: round;
	transition: stroke .18s ease;
}
.griglia-servizi .riquadri .nome {
	font: 700 16px/1.25 var(--titoli); font-stretch: 105%;
	margin-block-start: auto;
}
.griglia-servizi .riquadri .nome small { display: block; font-weight: 400; font-size: 13.5px; color: var(--grigio); margin-block-start: 3px; }

.griglia-servizi .riquadri a:hover,
.griglia-servizi .riquadri a:focus-visible {
	border-color: var(--acqua);
	box-shadow: 0 6px 20px rgba(11, 49, 57, .09);
	transform: translateY(-2px);
}

/* Il riquadro della fotografia non e' una pagina ma un messaggio: si stacca
   dagli altri col fondo tenue, non con un colore pieno che griderebbe. */
.griglia-servizi .riquadro-foto a { background: var(--acqua-tenue); border-style: dashed; }

.griglia-servizi .griglia-capo { margin-block-start: 44px; }

@media (prefers-reduced-motion: reduce) {
	.griglia-servizi .riquadri a { transition: none; }
	.griglia-servizi .riquadri a:hover { transform: none; }
}

@media (max-width: 1000px) {
	.griglia-servizi .riquadri,
	.griglia-servizi .riquadri-larghi { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
	.griglia-servizi .riquadri,
	.griglia-servizi .riquadri-larghi { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.griglia-servizi .riquadri a { min-height: 112px; padding: 15px 13px; }
	.griglia-servizi .riquadri svg { width: 30px; height: 30px; }
	.griglia-servizi .riquadri .nome { font-size: 15px; }
}

/* ---------------------------------------------------------------------- */
/* Zanzare: le malattie. Due schede affiancate e una nota sotto.           */
/*                                                                         */
/* Fondo tenue e non pieno: Tony aveva gia' bocciato le fasce a colore     */
/* pieno una dietro l'altra, e questa cade fra due fasce chiare.           */
.sez-malattie { background: var(--acqua-tenue); }

/* Testo e fotografia affiancati: la zanzara si vede, ma nessuna parola le
   passa sopra, quindi niente velature e niente contrasto da misurare. */
.sez-malattie > .malattie-capo {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
	gap: 44px; align-items: center;
}
.malattie-dire > * + * { margin-block-start: 16px; }
.malattie-dire .occhiello, .malattie-dire h2, .malattie-dire .intro { max-width: none; }
.malattie-foto { margin: 0; }
.malattie-foto img {
	width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--r-medio); display: block; box-shadow: var(--ombra);
}
.malattie-foto figcaption { margin-block-start: 8px; font-size: 12.5px; color: var(--grigio); }

@media (max-width: 860px) {
	.sez-malattie > .malattie-capo { grid-template-columns: 1fr; gap: 24px; }
}
.malattie-carte { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-block-start: 30px; }
.malattia-carta {
	background: #fff; border: 1px solid var(--linea); border-radius: var(--r-medio);
	padding: 22px 22px 18px;
}
.malattia-carta h3 { font: 800 21px/1.2 var(--titoli); font-stretch: 110%; color: var(--tuta); margin: 0; }
.malattia-carta .latino { font-style: italic; color: var(--grigio); font-size: 14.5px; margin: 2px 0 0; }
.malattia-carta .abitudini { margin: 12px 0 0; }

/* La riga finale e' quella che si ricorda: sta staccata, con un filetto    */
/* sopra, e i nomi dei virus in evidenza.                                   */
.malattia-carta .porta { margin: 16px 0 0; padding-block-start: 14px; border-top: 1px solid var(--linea); }
.malattia-carta .porta span { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.malattia-carta .porta strong { display: block; margin-block-start: 4px; font: 800 18px/1.3 var(--titoli); font-stretch: 105%; color: var(--acqua); }

/* Allineata a sinistra, non centrata: dentro .sez ogni figlio ha gia'
   margin-inline:auto, e un max-width piu' stretto lo centrerebbe. E' lo
   stesso trucco usato da .sez > .intro -- ci sono gia' cascato una volta. */
.sez-malattie > .malattie-nota {
	margin-block-start: 26px; max-width: 760px;
	margin-left: max(0px, calc((100% - var(--largo)) / 2)); margin-right: auto;
}
.malattie-nota h3 { font: 800 20px/1.25 var(--titoli); font-stretch: 110%; color: var(--tuta); margin: 0 0 10px; }
.malattie-nota p + p { margin-block-start: 12px; }

@media (max-width: 760px) {
	.malattie-carte { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------- */
/* Sanificazione: la nebulizzazione. Fotografia a sinistra, testo a destra. */
/*                                                                         */
/* La fotografia sta a sinistra e non a destra perche' sulla stessa pagina  */
/* la fascia "Cosa comprende l'intervento" ha gia' l'immagine a destra: due */
/* fasce di fila con lo stesso impianto sembrano un modello ripetuto.       */
.sez-nebbia {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px; align-items: center;
	max-width: calc(var(--largo) + 2 * var(--gutter));
	margin-inline: auto;
}
.sez-nebbia.senza-foto { display: block; }
.nebbia-foto { margin: 0; }
.nebbia-foto img {
	width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--r-grande); display: block; box-shadow: var(--ombra);
}
.nebbia-testo > * + * { margin-block-start: 16px; }
.nebbia-testo .intro { color: var(--inchiostro); }

.nebbia-voci { list-style: none; padding: 0; margin-block-start: 22px; }
.nebbia-voci li { margin: 0; padding-block: 14px; border-top: 1px solid var(--linea); }
.nebbia-voci li:last-child { border-bottom: 1px solid var(--linea); }
.nebbia-voci h3 { font: 800 17px/1.3 var(--titoli); font-stretch: 105%; color: var(--tuta); margin: 0 0 4px; }
.nebbia-voci p { margin: 0; font-size: 15.5px; color: var(--grigio); }

/* L'ultima riga e' la piu' importante per non impegnare l'azienda su un
   prodotto: sta staccata e in corpo piccolo, come una nota a margine. */
.nebbia-nota { font-size: 15px; color: var(--grigio); margin-block-start: 18px; }

@media (max-width: 900px) {
	.sez-nebbia { grid-template-columns: 1fr; gap: 26px; }
	.nebbia-foto { order: -1; }
}

/* ---------- blog: elenco degli articoli ---------- */
/*
 * /blog/ e' una pagina statica, l'elenco lo monta il pattern blog-elenco.
 * Lista e non griglia: quasi nessun articolo ha l'immagine in evidenza, e una
 * griglia di riquadri vuoti e' peggio di una lista pulita. Chi ce l'ha mostra
 * la miniatura e passa a due colonne; gli altri restano a tutta larghezza.
 */
.sez-articoli { padding-block-start: 0; }
.elenco-articoli { list-style: none; margin: 0 auto; padding: 0; max-width: var(--largo); display: grid; gap: 0; }
.elenco-articoli .articolo { padding-block: 26px; border-block-start: 1px solid var(--linea); }
.elenco-articoli .articolo:first-child { border-block-start: 0; padding-block-start: 8px; }
.articolo.con-foto { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; align-items: start; }
.articolo-foto { display: block; line-height: 0; border-radius: var(--r-piccolo); overflow: hidden; background: var(--nebbia); }
.articolo-foto img { width: 100%; height: 120px; object-fit: cover; display: block; }
.articolo-testo { min-width: 0; }
.articolo-testo h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.25; color: var(--tuta); }
.articolo-testo h2 a { color: inherit; text-decoration: none; }
.articolo-testo h2 a:hover { color: var(--richiamo); text-decoration: underline; text-underline-offset: 3px; }
.articolo-testo p { margin: 0; color: var(--grigio); font-size: 16.5px; line-height: 1.6; max-width: 68ch; }
.articolo-data { margin-block-start: 10px !important; font: 600 12.5px/1.3 var(--titoli); letter-spacing: .07em;
	text-transform: uppercase; color: var(--grigio); }

@media (max-width: 700px) {
	/* La miniatura in colonna stretta diventa un francobollo: meglio sopra,
	   a tutta larghezza, o niente. */
	.articolo.con-foto { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.articolo-foto img { height: 160px; }
	.articolo-testo h2 { font-size: 21px; }
}

/* ---------- blog: il singolo articolo ---------- */
.articolo-singolo .wp-block-post-title { margin-block: 6px 0; }
.articolo-singolo .articolo-data { margin-block-start: 14px !important; }
.articolo-singolo .articolo-copertina { margin-block-start: 28px; }
.articolo-singolo .articolo-copertina img { width: 100%; height: auto; display: block;
	border-radius: var(--r-medio); box-shadow: var(--ombra); }
/* La categoria fa da occhiello, ma resta un collegamento: niente sottolineatura
   finche' non ci passi sopra, altrimenti sembra un errore di stile. */
.articolo-singolo .wp-block-post-terms a { color: inherit; text-decoration: none; }
.articolo-singolo .wp-block-post-terms a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- rimando all'articolo del blog ---------- */
/*
 * Chiude l'elenco delle domande frequenti. Deve leggersi come un'offerta e non
 * come un bottone: chi e' arrivato in fondo alle domande sta ancora decidendo,
 * e un richiamo gridato lo manderebbe via. Filetto sopra per staccarlo
 * dall'ultima domanda, etichetta piccola, titolo dell'articolo in evidenza.
 */
.approfondisci { margin: 22px 0 0 !important; padding-block-start: 20px; border-block-start: 1px solid var(--linea); }
.approfondisci a { display: inline-flex; flex-direction: column; gap: 3px; text-decoration: none;
	color: var(--tuta); font-family: var(--titoli); font-size: 18px; line-height: 1.35; }
.approfondisci .eti { font: 700 11.5px/1.3 var(--titoli); letter-spacing: .1em; text-transform: uppercase; color: var(--richiamo); }
.approfondisci a::after { content: " →"; color: var(--richiamo); }
.approfondisci a:hover { color: var(--richiamo); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- collegamenti dentro il testo degli articoli ---------- */
/*
 * Nel corpo degli articoli i collegamenti avevano lo stesso colore del testo
 * (--tuta) con una sottolineatura sottile: non si distinguevano. Un rimando a
 * una pagina di servizio e' la ragione per cui l'articolo esiste, quindi deve
 * vedersi.
 *
 * Colore --richiamo e non l'accento del sito: il lime su bianco fa 1,34:1 di
 * contrasto, cioe' illeggibile. Il --richiamo fa 6,36:1 ed e' gia' il colore
 * che il sito usa per gli occhielli e per "Approfondisci", quindi la coerenza
 * c'e' lo stesso. Misurato, non scelto a occhio.
 *
 * Solo dentro il contenuto: nel menu e nel piede i collegamenti restano come
 * sono, altrimenti diventerebbe tutto verde.
 */
/*
 * ATTENZIONE: qui c'era anche .entry-content, ed era sbagliato. WordPress
 * mette quella classe sul contenuto di *qualunque* post type, pagine comprese:
 * la regola si e' presa addosso i pulsanti della testata di tutte le pagine,
 * sottolineandoli e colorando di verde scuro quello di WhatsApp, che sta su
 * fondo scuro. Si aggancia solo a .articolo-singolo, che esiste soltanto nel
 * modello degli articoli.
 */
.articolo-singolo .wp-block-post-content a:not([class]) {
	color: var(--richiamo);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--richiamo) 38%, transparent);
}
.articolo-singolo .wp-block-post-content a:not([class]):hover {
	text-decoration-color: var(--richiamo);
}

/* ---------- il video ---------- */
/*
 * Facciata: locandina + tasto play, l'iframe arriva al clic. Il riquadro tiene
 * il rapporto 16:9 da subito, cosi' quando l'iframe entra la pagina non salta.
 */
.sez-video { background: var(--nebbia); }
.video-duo { max-width: var(--largo); margin-inline: auto; display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.video-dire { min-width: 0; }
.video-dire h2 { margin: 6px 0 12px; }
.video-dire .intro { margin: 0; }

.video-facciata { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-medio);
	overflow: hidden; background: var(--tuta); box-shadow: var(--ombra); }
.video-facciata iframe,
.video-facciata video { width: 100%; height: 100%; border: 0; display: block; background: var(--inchiostro); }
.video-avvia { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0;
	background: none; cursor: pointer; display: block; }
.video-avvia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 76px; height: 54px; border-radius: 12px; background: rgba(var(--inchiostro-rgb), .78);
	color: #fff; display: grid; place-items: center; transition: background .15s ease, transform .15s ease; }
.video-play svg { width: 54px; height: 38px; }
.video-avvia:hover .video-play { background: var(--emergenza); transform: translate(-50%, -50%) scale(1.06); }
@media (prefers-reduced-motion: reduce) { .video-play { transition: none; } .video-avvia:hover .video-play { transform: translate(-50%, -50%); } }

/* La nota sul consenso sta sotto il riquadro, fuori dal flusso: non deve
   rubare spazio alla locandina ma deve esserci prima del clic. */
.video-nota { position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
	padding: 8px 12px; background: rgba(var(--inchiostro-rgb), .74); color: #fff;
	font-size: 12.5px; line-height: 1.4; text-align: center; }
.video-facciata.acceso .video-nota { display: none; }

@media (max-width: 860px) {
	.video-duo { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* ---------- recensioni: stelline e punteggio ---------- */
/*
 * Due ori, perche' nessuno funziona su entrambi i fondi: misurato, un oro
 * leggibile sul bianco (serve 3:1 per un elemento grafico) risulta troppo
 * scuro sulla fascia --tuta, e viceversa. Quello vecchio, #F3B600 su nebbia,
 * stava a 1,66:1: praticamente invisibile.
 *   --oro        #A87400  -> 4,07:1 su bianco, 3,71:1 su nebbia
 *   --oro-acceso #F3CF3A  -> 9,12:1 sulla fascia scura
 * Le stelle vuote restano grigie: devono leggersi come "non assegnate", non
 * come stelle spente per un difetto.
 */
:root { --oro: #A87400; --oro-acceso: #F3CF3A; --oro-vuota: #C3CBD2; }

.stelle { display: inline-flex; gap: 2px; line-height: 1; }
.stelle .stella { color: var(--oro-vuota); font-size: 18px; }
.stelle .stella.piena { color: var(--oro); }
.prove .stelle .stella.piena, .sez-tinta .stelle .stella.piena { color: var(--oro-acceso); }
.prove .stelle .stella, .sez-tinta .stelle .stella { color: rgba(255, 255, 255, .34); }
.striscia-prova .stelle { color: inherit; }

.recensioni-capo { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: end; justify-content: space-between; }
.recensioni-capo h2 { margin: 6px 0 0; }
.voto-sintesi { display: flex; align-items: center; gap: 14px; margin: 0; }
.voto-sintesi > strong { font-family: var(--titoli); font-size: 44px; line-height: 1; color: var(--tuta); }
.voto-dettaglio { display: flex; flex-direction: column; gap: 5px; }
.voto-dettaglio .stelle .stella { font-size: 21px; }
.voto-dettaglio small { font-size: 13.5px; color: var(--grigio); }

.recensioni-carte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-block-start: 34px; }
.recensione { margin: 0; padding: 22px 24px 20px; border: 0; background: var(--carta);
	border-radius: var(--r-medio); box-shadow: var(--ombra); }
.recensione .stelle { margin-block-end: 12px; }
.recensione p { margin: 0; font-size: 17px; line-height: 1.55; }
.recensione cite { display: block; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea);
	font-style: normal; font-weight: 700; font-size: 15px; color: var(--tuta); }

/*
 * Da 900px in giu' le recensioni diventano una striscia da scorrere col dito,
 * come i lavori. Una sotto l'altra occupavano piu' di due schermate di tre
 * riquadri uguali: chi scorreva per arrivare alla sezione dopo se li leggeva
 * tutti e tre per forza. Di fianco se ne vede una, la seconda si affaccia, e
 * si scorre solo se interessa.
 *
 * Il margine negativo pareggia il padding del pannello grigio: la scheda
 * tagliata arriva al suo bordo invece di fermarsi prima. Il padding sopra e
 * sotto lascia respirare l'ombra, che altrimenti verrebbe tagliata dallo
 * scorrimento.
 */
@media (max-width: 900px) {
	.recensioni-carte {
		display: flex; gap: 14px;
		overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
		margin-inline: -40px; padding: 3px 40px 14px;
		scroll-padding-left: 40px;
		scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
	}
	.recensioni-carte .recensione { flex: 0 0 min(84%, 320px); scroll-snap-align: start; }
	/* Le schede sono alte quanto la piu' alta, e il nome va in fondo:
	   lo spazio in piu' resta dentro la scheda bianca invece di aprire
	   un buco grigio sotto le recensioni corte. */
	.recensioni-carte .recensione { display: flex; flex-direction: column; }
	.recensioni-carte .recensione cite { margin-top: auto; padding-top: 16px; }
	.recensioni-carte:focus-visible { outline: 2px solid var(--richiamo); outline-offset: 3px; }
	.recensioni-carte::-webkit-scrollbar { height: 6px; }
	.recensioni-carte::-webkit-scrollbar-track { background: transparent; }
	.recensioni-carte::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 3px; }
}
@media (max-width: 560px) { .voto-sintesi > strong { font-size: 36px; } }


/* ---------- lavori: striscia in home, griglia nella pagina ---------- */
.sez-lavori { overflow: hidden; }
.lavori-capo { max-width: var(--largo); margin-inline: auto; display: flex; flex-wrap: wrap;
	gap: 14px 32px; align-items: end; justify-content: space-between; }
.lavori-capo h2 { margin: 6px 0 0; }
.lavori-tutti { margin: 0; }

/* --- la scheda, uguale nelle due forme --- */
.lavoro { margin: 0; }
.lavoro-foto { display: block; position: relative; width: 100%; padding: 0; border: 0;
	background: var(--nebbia); border-radius: var(--r-medio) var(--r-medio) 0 0;
	overflow: hidden; cursor: zoom-in; line-height: 0; }
.lavoro-foto img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block;
	transition: transform .35s ease; }
.lavoro-foto:hover img { transform: scale(1.035); }
.lavoro-lente { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px;
	border-radius: 50%; background: rgba(var(--inchiostro-rgb), .72); display: grid; place-items: center;
	opacity: 0; transition: opacity .2s ease; }
.lavoro-foto:hover .lavoro-lente, .lavoro-foto:focus-visible .lavoro-lente { opacity: 1; }
.lavoro-lente svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }

.lavoro-dire { margin: 0 !important; padding: 13px 16px 15px; background: var(--carta);
	border-radius: 0 0 var(--r-medio) var(--r-medio); }
.lavoro-dire a { text-decoration: none; }
.lavoro-dire strong { display: block; font-family: var(--titoli); font-size: 17px; line-height: 1.3; color: var(--tuta); }
.lavoro-dire a:hover strong { color: var(--richiamo); text-decoration: underline; text-underline-offset: 3px; }
.lavoro-dire small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--grigio); }
.lavoro { border-radius: var(--r-medio); box-shadow: var(--ombra); overflow: hidden; background: var(--carta); }

@media (prefers-reduced-motion: reduce) {
	.lavoro-foto img, .lavoro-lente { transition: none; }
	.lavoro-foto:hover img { transform: none; }
}

/* --- in home: striscia scorrevole --- */
/*
 * Niente JavaScript: scorrimento nativo con aggancio. Le schede stanno poco
 * sotto il terzo, cosi' se ne vedono tre e un pezzo della quarta -- ed e' quel
 * pezzo tagliato a far capire che ce n'e' altre, meglio di una freccia.
 */
.lavori-striscia {
	list-style: none; margin: 30px 0 0; padding-block: 0 12px;
	display: flex; gap: 22px;
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-left: max(var(--gutter), calc((100% - var(--largo)) / 2));
	padding-right: var(--gutter);
	scroll-padding-left: max(var(--gutter), calc((100% - var(--largo)) / 2));
	scrollbar-width: thin; scrollbar-color: var(--linea) transparent;
}
.lavori-striscia:focus-visible { outline: 2px solid var(--richiamo); outline-offset: 3px; }
.lavori-striscia::-webkit-scrollbar { height: 6px; }
.lavori-striscia::-webkit-scrollbar-track { background: transparent; }
.lavori-striscia::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 3px; }

/*
 * Niente sfumatura sul bordo destro.
 *
 * Ce n'era una, bianca, larga 90px: serviva a far sfumare la scheda tagliata
 * invece di amputarla. Aveva senso quando la striscia stava anche su schermo
 * largo. Da quando sopra i 1000px diventa una griglia, la sfumatura vive solo
 * sul telefono -- dove la scheda dopo si affaccia per 60-90px e la sfumatura
 * se la mangiava tutta: al posto del bordo di una fotografia restava una
 * macchia bianca sul lato destro. Cioe' il difetto che doveva evitare.
 *
 * Il taglio netto non e' un errore di impaginazione: col dito si scorre, e la
 * scheda mezza fuori e' l'invito a farlo.
 */
.sez-lavori:not(.lavori-pagina) { position: relative; }
/* 365 e non 390: il contenuto e' largo 1180, tre schede da 365 piu' due
   spazi da 22 fanno 1139, quindi della quarta restano 171px -- che cadono
   tutti dentro la sfumatura. Con 390 ne restavano 260 e si leggeva il testo
   troncato a meta' parola, che e' la cosa che faceva brutto. */
.lavori-striscia .lavoro { flex: 0 0 clamp(250px, 30%, 365px); scroll-snap-align: start; }
@media (max-width: 700px) {
	.lavori-striscia { gap: 14px; }
	.lavori-striscia .lavoro { flex: 0 0 82%; }
}

/* --- nella pagina: griglia, tutte in vista --- */
.lavori-pagina { padding-block-start: 0; }
.lavori-griglia { list-style: none; margin: 8px auto 0; padding: 0; max-width: var(--largo);
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; }
@media (max-width: 980px) { .lavori-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .lavori-griglia { grid-template-columns: minmax(0, 1fr); gap: 18px; } }

/* --- l'ingrandimento --- */
.lavoro-grande { max-width: min(1100px, 94vw); max-height: 92vh; width: auto; padding: 0;
	border: 0; border-radius: var(--r-medio); background: var(--carta); overflow: visible; }
.lavoro-grande::backdrop { background: rgba(var(--inchiostro-rgb), .82); }
.lavoro-grande img { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain;
	border-radius: var(--r-medio) var(--r-medio) 0 0; background: var(--inchiostro); }
.lavoro-grande-dida { margin: 0; padding: 14px 20px 16px; font-size: 15px; line-height: 1.5; color: var(--grigio); }
/* Il tasto stava fuori dal riquadro, a -14px: con il dialogo appoggiato in
   cima alla finestra finiva tagliato dal bordo dello schermo. Ora sta dentro,
   sopra la fotografia, con il fondo scuro per staccare da qualunque immagine. */
.lavoro-chiudi { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
	border: 0; border-radius: 50%; background: rgba(var(--inchiostro-rgb), .66); color: #fff;
	font-size: 26px; line-height: 1; cursor: pointer; z-index: 2;
	display: grid; place-items: center; padding: 0 0 3px; }
.lavoro-chiudi:hover { background: var(--emergenza); }

/*
 * Da 1000px in su la striscia smette di essere una striscia.
 *
 * Il taglio sul bordo destro e' il linguaggio del telefono, dove si scorre col
 * dito e una scheda mezza fuori e' un invito. Su uno schermo largo, dove non si
 * scorre con il dito, lo stesso taglio si legge come un difetto -- e non c'e'
 * sfumatura che lo salvi davvero. Quindi su desktop diventa una griglia tre per
 * due: tutti e sei i lavori in vista, niente da scorrere, niente di tagliato.
 * Sotto i 1000px torna striscia, dove quel comportamento e' quello giusto.
 */
@media (min-width: 1000px) {
	.lavori-striscia {
		display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 26px 24px; overflow: visible;
		max-width: var(--largo); margin-inline: auto;
		padding-left: 0; padding-right: 0; padding-block-end: 0;
		scroll-snap-type: none;
	}
	.lavori-striscia .lavoro { flex: initial; }
}

/* ---------------------------------------------------------------------- */
/* Schede video nella striscia dei lavori.                                 */
/*                                                                         */
/* La lente compare al passaggio del mouse perche' l'ingrandimento e' una   */
/* cortesia: se non la vedi non perdi niente. Il triangolo no, sta sempre   */
/* in vista -- su un telefono il passaggio del mouse non esiste, e una      */
/* scheda che e' un filmato deve dirlo prima che uno la tocchi.             */
/* ---------------------------------------------------------------------- */
.lavoro-play { position: absolute; inset: 0; margin: auto;
	width: 58px; height: 58px; border-radius: 50%;
	background: rgba(var(--inchiostro-rgb), .62);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .9);
	display: grid; place-items: center;
	transition: background .2s ease, transform .2s ease; }
.lavoro-play svg { width: 34px; height: 34px; fill: #fff; stroke: none;
	/* il triangolo ha il peso ottico a sinistra: si sposta di un pelo */
	margin-left: 2px; }
.lavoro-foto:hover .lavoro-play, .lavoro-foto:focus-visible .lavoro-play {
	background: var(--richiamo); transform: scale(1.06); }

/* La locandina di un video si scurisce un filo, cosi' il triangolo bianco
   stacca anche sopra un cielo chiaro o una parete bianca. */
.lavoro-ha-video img { filter: brightness(.88); }
.lavoro-ha-video:hover img { filter: brightness(.95); }

/* Il filmato dentro il riquadro grande: rapporto fisso, altrimenti l'iframe
   nasce alto zero e il dialogo collassa. */
.lavoro-grande-video { width: min(1100px, 94vw); aspect-ratio: 16 / 9; max-height: 78vh;
	background: var(--inchiostro); border-radius: var(--r-medio) var(--r-medio) 0 0;
	overflow: hidden; }
.lavoro-grande-video iframe,
.lavoro-grande-video video { display: block; width: 100%; height: 100%; border: 0; background: var(--inchiostro); }

@media (prefers-reduced-motion: reduce) {
	.lavoro-play { transition: none; }
	.lavoro-foto:hover .lavoro-play { transform: none; }
}

/* Il punteggio delle recensioni porta alla scheda Google. Resta un numero
   grosso, non diventa un link azzurro: la sottolineatura comparirebbe sotto
   il "4,7" e sembrerebbe un refuso. Si sottolinea solo la riga piccola. */
.voto-link { display: inline-flex; align-items: center; gap: 14px;
	text-decoration: none; color: inherit; border-radius: var(--r-piccolo, 8px); }
.voto-link small { text-decoration: underline; text-decoration-color: transparent;
	text-underline-offset: 3px; transition: text-decoration-color .18s ease, color .18s ease; }
.voto-link:hover small, .voto-link:focus-visible small {
	color: var(--tuta); text-decoration-color: currentColor; }
.voto-link:focus-visible { outline: 3px solid var(--richiamo); outline-offset: 4px; }

/* ---------------------------------------------------------------------- */
/* Griglia dei servizi su fondo scuro.                                     */
/*                                                                         */
/* Le schede sono bianche: su fondo bianco galleggiano, e a reggerle resta */
/* solo un bordo grigio chiaro. Sul verde petrolio invece si staccano da   */
/* sole, e la fila di riquadri diventa la cosa che si vede per prima.      */
/*                                                                         */
/* Non basta cambiare lo sfondo: occhiello, titolo e introduzione sono     */
/* scuri e sparirebbero. Il grigio chiaro e' lo stesso del piede del sito, */
/* che e' una coppia gia' collaudata.                                      */
/* ---------------------------------------------------------------------- */
.griglia-servizi.su-scuro { background: var(--tuta); color: #fff; }
.griglia-servizi.su-scuro h2 { color: #fff; }
.griglia-servizi.su-scuro .occhiello,
.griglia-servizi.su-scuro .intro { color: #C9D3DD; }

/* L'ombra di prima era un grigio-blu quasi nero: su fondo scuro non si
   vede. Qui serve il contrario, un alone chiaro. */
.griglia-servizi.su-scuro .riquadri a:hover,
.griglia-servizi.su-scuro .riquadri a:focus-visible {
	border-color: var(--azione);
	box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
}
.griglia-servizi.su-scuro .riquadri a:focus-visible { outline: 3px solid var(--azione); outline-offset: 3px; }

/* La scheda "Non sai cos'e'" era tenue su bianco per stare in secondo
   piano. Su fondo scuro un verde pallido sembra invece una scheda spenta:
   si tiene il bordo tratteggiato, ma pieno come le altre. */
.griglia-servizi.su-scuro .riquadro-foto a { background: var(--acqua-tenue); border-color: var(--acqua); }

/* ---------------------------------------------------------------------- */
/* Hero della home: velo scuro invece che chiaro.                          */
/*                                                                         */
/* Il velo bianco funzionava sulla fotografia chiara di prima. Su una       */
/* scena notturna no: il bianco sopra lo scuro non fa bianco, fa un grigio  */
/* sporco, e spegne la fotografia proprio dove dovrebbe respirare.          */
/* Scurendo invece la luce calda della cucina resta, e la home si allinea   */
/* alle testate dei servizi, che sono gia' tutte su verde petrolio.         */
/*                                                                         */
/* Tutto dentro la media query: sotto gli 800px il velo non c'e' proprio    */
/* (la fotografia diventa una fascia a se') e il testo sta su fondo chiaro. */
/* Senza questo limite su telefono verrebbe bianco su bianco.               */
/* ---------------------------------------------------------------------- */
@media (min-width: 801px) {
	/* Il selettore e' quello con :has, non il semplice .hero::before: la
	   regola piu' su ha due classi e vince per specificita'. Quella era
	   tarata sulla fotografia di prima -- doveva spegnersi prima della
	   toppa col logo sulla giacca del tecnico -- e con questa immagine
	   non ha piu' niente da proteggere. */
	.hero:has(.scheda-richiesta)::before,
	.hero::before {
		background: linear-gradient(90deg,
			rgba(3, 38, 44, .94) 0%,
			rgba(3, 38, 44, .90) 36%,
			rgba(3, 38, 44, .45) 56%,
			rgba(3, 38, 44, 0) 72%);
	}
	.hero .occhiello { color: #fff; }
	.hero h1 { color: #fff; }
	/* Il lime e' il colore dell'azione in tutto il sito: la seconda riga del
	   titolo e' un invito, quindi prende lo stesso colore dei pulsanti. */
	.hero h1 em { color: var(--azione); }
	.hero .intro { color: #C9D3DD; }
}

/* ---------------------------------------------------------------------- */
/* Alone arcobaleno al passaggio del mouse.                                */
/*                                                                         */
/* Richiama la riga sotto il menu', che e' il segno dell'azienda. Sta su    */
/* una cosa sola di proposito: il lime vuol dire "qui si clicca" in tutto   */
/* il sito, e se anche l'arcobaleno volesse dire quello nessuno dei due     */
/* direbbe piu' niente. Qui e' una firma, non un segnale.                   */
/*                                                                         */
/* L'alone e' un riquadro sfumato dietro la scheda: una box-shadow non puo' */
/* avere un gradiente, quindi si usa uno pseudo-elemento col filtro blur.   */
/* ---------------------------------------------------------------------- */
.griglia-servizi.su-scuro .riquadri li { position: relative; }
.griglia-servizi.su-scuro .riquadri li::before {
	content: ""; position: absolute; inset: -5px;
	border-radius: calc(var(--r-medio) + 5px);
	background: var(--arcobaleno);
	filter: blur(11px);
	opacity: 0; transition: opacity .22s ease;
	z-index: 0; pointer-events: none;
}
.griglia-servizi.su-scuro .riquadri li:hover::before,
.griglia-servizi.su-scuro .riquadri li:focus-within::before { opacity: .9; }
/* La scheda sta sopra l'alone, se no il blu lo coprirebbe */
.griglia-servizi.su-scuro .riquadri a { position: relative; z-index: 1; }

/* L'alone basta da solo: il bordo lime e l'ombra nera di prima gli
   lavorerebbero contro, quindi su questa sezione si tolgono. */
.griglia-servizi.su-scuro .riquadri a:hover,
.griglia-servizi.su-scuro .riquadri a:focus-visible {
	border-color: var(--linea);
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	.griglia-servizi.su-scuro .riquadri li::before { transition: none; }
}

/* ---------------------------------------------------------------------- */
/* Fascia finale del monitoraggio su fondo fotografico: bianca piena.      */
/*                                                                         */
/* Era un velo scuro traslucido e si confondeva con l'overlay della        */
/* sezione: due scuri sovrapposti non fanno un riquadro, fanno una macchia.*/
/*                                                                         */
/* Il motivo per cui non era bianca stava nel commento di prima: con un    */
/* bianco *traslucido* la parte chiara della fotografia passava sotto e la */
/* riga piccola scendeva a 3,85:1. Con un bianco *pieno* quel problema non */
/* esiste -- sotto non passa niente -- e la fascia diventa gemella della   */
/* scheda del piano di monitoraggio, che sta appena sopra.                 */
/* ---------------------------------------------------------------------- */
.sez-monitoraggio.con-sfondo .monit-fondo {
	background: var(--carta);
	border: 1px solid var(--linea);
	box-shadow: var(--ombra);
	backdrop-filter: none;
	color: var(--tuta);
}
.sez-monitoraggio.con-sfondo .monit-fondo h3 { color: var(--tuta); }
.sez-monitoraggio.con-sfondo .monit-fondo p { color: var(--grigio); }
.sez-monitoraggio.con-sfondo .monit-fondo .azione span { color: var(--grigio); }

/* ---------------------------------------------------------------------- */
/* Bersagli da toccare, sul telefono.                                      */
/*                                                                         */
/* I link del piede erano alti 17px: meno della meta' dei 44 che servono a  */
/* un dito. Si allarga la zona sensibile con l'imbottitura, non il corpo    */
/* del testo -- l'elenco resta compatto all'occhio e diventa toccabile.     */
/* Lo stesso per le briciole in cima, che erano a 24px.                     */
/* ---------------------------------------------------------------------- */
@media (max-width: 860px) {
	.piede-in a,
	.piede-colonna a {
		display: inline-block;
		padding-block: 12px;
		/* l'imbottitura verticale non sposta le righe vicine se si
		   compensa il margine: l'elenco resta della stessa altezza */
		margin-block: -6px;
	}
	.briciole a,
	.briciole span {
		display: inline-block;
		padding-block: 10px;
		margin-block: -8px;
	}
}

/* I recapiti nel piede sono dentro un paragrafo, quindi la regola di sopra
   non li prendeva: il numero di telefono nel piede e' proprio una delle cose
   che si tocca piu' spesso da un telefono. */
@media (max-width: 860px) {
	.piede-recapiti a {
		display: inline-block;
		padding-block: 11px;
		margin-block: -7px;
	}

	/* La casella di spunta: il bersaglio vero e' l'etichetta, che e' lunga
	   tre righe e si tocca benissimo. Ma la casella in se' resta un bersaglio,
	   e a 24px e' piccola per un pollice. */
	.modulo-privacy input[type="checkbox"] {
		width: 26px; height: 26px;
		margin-block: 9px;
		flex: none;
	}

	/* Le briciole erano a 42px: due pixel sotto la soglia, ed e' un peccato
	   fermarsi li'. */
	.briciole a,
	.briciole span { padding-block: 12px; margin-block: -10px; }
}

/* I recapiti grossi nella fascia contatti, e l'elenco dei comuni, sono link
   in linea: a 20-24px di altezza sono bersagli piccoli per un pollice.
   Su un elemento in linea l'imbottitura verticale allarga la zona sensibile
   ma non alza la riga, quindi si guadagnano i 44px senza spostare nulla.
   Esclusi i pulsanti, che hanno gia' la loro misura e sono flex. */
@media (max-width: 860px) {
	a[href^="tel:"]:not([class*="bottone"]):not([class*="tel"]),
	a[href^="mailto:"]:not([class*="bottone"]),
	.comuni a {
		padding-block: 12px;
	}
}

/* ---------------------------------------------------------------------- */
/* Secondo filmato su una pagina: impaginato a specchio.                   */
/*                                                                         */
/* Due riquadri identici uno sotto l'altro si leggono come un errore di    */
/* impaginazione. Invertendo le colonne diventano due cose distinte, e     */
/* l'occhio capisce che il secondo non e' una ripetizione del primo.       */
/*                                                                         */
/* Su telefono le colonne diventano una sola e l'ordine torna naturale:    */
/* prima il testo, poi il filmato, come nella prima fascia.                */
/* ---------------------------------------------------------------------- */
@media (min-width: 901px) {
	.video-duo-specchiato { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
	.video-duo-specchiato .video-dire { order: 2; }
	.video-duo-specchiato .video-facciata { order: 1; }
}

/* La seconda fascia non ripete lo spazio sopra: le due sono una cosa sola,
   non due sezioni lontane. */
.sez-video-pari { padding-block-start: 0; }

/* ---------- alternanza delle fasce ---------- */
/* Due fasce uguali di fila si saldano in un blocco solo e il lettore non
   capisce piu' dove finisce un argomento. Dove il colore giusto dipende da
   cosa viene prima -- perche' il mix di sezioni cambia da pagina a pagina --
   si dichiara qui, in funzione del vicino, invece di fissarlo sulla classe. */

/* La fascia del video sta sempre dopo "metodo", che e' scura: bianca lascia
   la nebbia a "dove interveniamo" subito sotto. Le due fasce video di
   lavori in quota restano uguali fra loro: hanno padding zero in mezzo
   perche' sono una cosa sola. */
.sez-video { background: var(--carta); }

/* Su chi-siamo "dove interveniamo" e' l'ultima prima della chiusura. */
.sez-zona + .chiusura-duo { background: var(--carta); }

/* Su disinfestazione-busto-arsizio mancano i segnali in mezzo. */
.sez-sicuro + .sez-foto-wa { background: var(--nebbia); }

/* Sanificazione: la fascia della termonebulizzazione viene subito dopo
   "cosa comprende", e trascina anche quella dopo. */
.sez-sicuro + .sez-nebbia { background: var(--nebbia); }
.sez-nebbia + .sez-segnali { background: var(--carta); }

/* Legnano non ha le fasce dei servizi: "come lavoriamo" ci finisce in mezzo
   a due bianche. Qui torna un pannello nebbia, e le sue schede tornano
   bianche per restare staccate. */
.sez-testo + .passi { background: var(--nebbia); }
.sez-testo + .passi ol li { background: var(--carta); }

@media (max-width: 700px) {
	/* Da telefono la striscia esce dal margine della sezione e prende tutta
	   la larghezza: la prima scheda resta in linea col titolo sopra e quella
	   tagliata arriva davvero al bordo, invece di fermarsi 20px prima
	   lasciando una striscia bianca. */
	.lavori-striscia { margin-inline: calc(var(--gutter) * -1); }

	/* Cinque schede su due colonne: l'ultima resta spaiata. Invece di
	   lasciarle accanto un buco grande quanto lei, si allarga su entrambe. */
	.griglia-servizi .riquadri li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
	/* Da telefono i due pannelli diventano fasce a tutta larghezza. Rientrati
	   di 12px sprecavano larghezza e, con i loro 20px di padding, mettevano il
	   contenuto a 32px dal bordo: una linea diversa da quella di tutto il
	   resto della pagina, che sta a 20. Scorrendo si notava. */
	.passi { margin-inline: 0; padding-inline: var(--gutter); }
	.recensioni { margin-inline: 0; border-radius: 0; padding-inline: var(--gutter); }
	.recensioni-carte {
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		scroll-padding-left: var(--gutter);
	}
}

/* ---------- menu del telefono: foglio che sale dal basso ---------- */

.apri-menu {
	display: none; align-items: center; gap: 9px;
	font: 700 15px/1 var(--titoli); letter-spacing: .01em;
	color: var(--tuta); background: var(--carta);
	border: 1.5px solid var(--tuta); border-radius: var(--r-piccolo);
	padding: 11px 15px; min-height: 44px; cursor: pointer;
}
.apri-menu-segno { display: grid; gap: 3.5px; width: 17px; }
.apri-menu-segno span { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.apri-menu[aria-expanded="true"] { background: var(--tuta); color: var(--carta); }

.menu-foglio {
	width: 100%; max-width: 100%; max-height: 76svh;
	margin: 0 0 0 auto; padding: 0; border: 0;
	position: fixed; inset: auto 0 0 0;
	background: var(--carta);
	border-radius: var(--r-grande) var(--r-grande) 0 0;
	box-shadow: 0 -10px 40px rgba(3, 38, 44, .22);
	overflow: hidden;
}
.menu-foglio::backdrop { background: rgba(3, 38, 44, .45); backdrop-filter: blur(2px); }
.menu-foglio[open] { animation: foglio-sale .22s ease-out; }
@keyframes foglio-sale { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-foglio[open] { animation: none; } }

.foglio-dentro {
	max-height: 76svh; overflow-y: auto; overscroll-behavior: contain;
	padding: 0 var(--gutter) calc(22px + env(safe-area-inset-bottom));
}

/* La maniglia e' il tasto di chiusura: e' il primo gesto che si prova.
   Resta appiccicata in cima mentre il resto scorre. */
.foglio-chiudi {
	position: sticky; top: 0; z-index: 2;
	display: grid; place-items: center;
	width: 100%; min-height: 44px; padding: 0; margin: 0 0 4px;
	border: 0; background: var(--carta); cursor: pointer;
}
.foglio-maniglia { display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--linea); }
.foglio-chiudi:hover .foglio-maniglia,
.foglio-chiudi:focus-visible .foglio-maniglia { background: var(--grigio); }

.foglio-capo {
	margin: 14px 0 10px; font: 700 12px/1.2 var(--titoli);
	letter-spacing: .09em; text-transform: uppercase; color: var(--grigio);
}
.foglio-capo:first-of-type { margin-top: 2px; }

/* I riquadri: gli stessi della griglia, ma su fondo chiaro invece che scuro. */
.riquadri-foglio {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px;
}
.riquadri-foglio li { margin: 0; }
.riquadri-foglio a {
	display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
	min-height: 86px; padding: 12px 12px 13px;
	background: var(--nebbia); border: 1px solid var(--linea);
	border-radius: var(--r-medio); text-decoration: none; color: var(--inchiostro);
}
.riquadri-foglio svg { width: 26px; height: 26px; fill: none; stroke: var(--richiamo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.riquadri-foglio .nome { font: 700 14.5px/1.25 var(--titoli); font-stretch: 104%; }
/* Sette infestanti su due colonne: l'ultimo resta spaiato. Come nella
   griglia della home, si allarga invece di lasciare un buco accanto. */
.riquadri-foglio li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.riquadri-foglio a:hover,
.riquadri-foglio a:focus-visible { background: var(--acqua-tenue); border-color: var(--acqua); }

.foglio-altro { margin-block-start: 18px; border-top: 1px solid var(--linea); padding-block-start: 6px; }
.foglio-altro ul { list-style: none; margin: 0; padding: 0; }
.foglio-altro a {
	display: block; padding: 13px 2px; min-height: 44px;
	font: 700 16.5px/1.3 var(--titoli); color: var(--tuta); text-decoration: none;
	border-bottom: 1px solid var(--linea);
}
.foglio-altro li:last-child a { border-bottom: 0; }
.foglio-altro a:hover, .foglio-altro a:focus-visible { color: var(--richiamo); }

.foglio-tel {
	display: flex; align-items: center; gap: 11px;
	margin-block-start: 14px; padding: 13px 16px; min-height: 44px;
	background: var(--tuta); color: #fff; border-radius: var(--r-medio); text-decoration: none;
}
.foglio-tel svg { fill: currentColor; flex: 0 0 auto; }
.foglio-tel strong { display: block; font: 800 17px/1.2 var(--titoli); }
.foglio-tel small { display: block; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: #B9C7D6; }

/* Il foglio e il suo tasto vivono solo dove prima c'era la tendina. */
@media (max-width: 999px) {
	.apri-menu { display: inline-flex; }
}
@media (min-width: 1000px) {
	.menu-foglio { display: none; }
}

/* Mentre il foglio e' aperto la pagina sotto non scorre: altrimenti si
   scorre quella invece dell'elenco e sembra che il menu non risponda. */
body.foglio-aperto { overflow: hidden; }

/* ---------- il banner del consenso ---------- */
/* Compare solo quando ci sono i codici di misurazione: con quelli vuoti
   questo pezzo di pagina non viene nemmeno scritto.

   Sta in fondo e non copre niente di importante. Sul telefono si tiene sopra
   la barra fissa di chiamata e WhatsApp, che deve restare raggiungibile: chi
   vuole solo telefonare non deve prima rispondere a una domanda sui cookie. */
.consenso {
	position: fixed; z-index: 60;
	left: 0; right: 0;
	bottom: calc(var(--barra-h) + env(safe-area-inset-bottom, 0px));
	padding: 12px max(14px, env(safe-area-inset-right, 0px)) 12px max(14px, env(safe-area-inset-left, 0px));
	pointer-events: none;
}
.consenso-dentro {
	pointer-events: auto;
	max-width: var(--largo); margin-inline: auto;
	display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px;
	background: var(--carta); color: var(--tuta);
	border: 1px solid var(--linea); border-radius: var(--r-medio);
	box-shadow: 0 10px 30px rgba(3, 38, 44, .16);
	padding: 16px 20px;
}
.consenso-testo { flex: 1 1 320px; min-width: 0; }
.consenso-testo p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--grigio); }
.consenso-capo { margin-bottom: 3px !important; color: var(--tuta) !important; font-size: 15px !important; }
.consenso-testo a { color: var(--richiamo); }
.consenso-tasti { display: flex; gap: 10px; flex: 0 0 auto; }
.consenso-tasti .bottone { padding-block: 11px; font-size: 15px; }
/* Il rifiuto deve essere visibile e cliccabile quanto l'accettazione:
   nasconderlo o sbiadirlo e' quello che fa dire che il consenso non e'
   libero -- oltre a essere scorretto con chi legge. */
.consenso-no {
	background: var(--nebbia); color: var(--tuta);
	border: 1px solid var(--linea);
}
.consenso-no:hover { background: #E7ECE9; }
/* La X. Su schermo largo sta in fondo alla riga, staccata dai due tasti da
   un filo verticale: si legge come "chiudi questa fascia" e non si confonde
   con una terza scelta. Sul telefono i tasti prendono tutta la larghezza,
   quindi la X si sposta in alto a destra, dove il Garante la indica e dove
   il pollice la trova senza cercarla. 44 punti: e' la misura minima perche'
   un bersaglio isolato si possa centrare al primo colpo. */
.consenso-x {
	flex: 0 0 auto; width: 44px; height: 44px;
	display: grid; place-items: center;
	padding: 0; background: none; border: 0;
	border-inline-start: 1px solid var(--linea);
	border-start-start-radius: 0; cursor: pointer;
	color: var(--grigio);
}
.consenso-x:hover { color: var(--tuta); }
.consenso-x:focus-visible { outline: 2px solid var(--richiamo); outline-offset: 2px; }

@media (max-width: 620px) {
	.consenso-dentro { padding: 14px 16px; position: relative; }
	.consenso-tasti { width: 100%; }
	.consenso-tasti .bottone { flex: 1; justify-content: center; }
	/* Fuori dal flusso, se no finirebbe su una riga tutta sua sotto i tasti. */
	.consenso-x { position: absolute; top: 4px; inset-inline-end: 4px; border-inline-start: 0; }
	/* Il testo si ferma prima della X, se no le prime righe ci passano sotto. */
	.consenso-testo { padding-inline-end: 38px; }
}

/* ---------- informativa: la tabella dei cookie ---------- */
/* Su telefono una tabella di quattro colonne non ci sta: invece di
   rimpicciolire il testo fino a non leggersi, si lascia scorrere di lato
   dentro il suo contenitore -- la pagina sotto non si muove. */
.tabella-cookie { width: 100%; border-collapse: collapse; margin-block: 18px; font-size: 15px; }
.tabella-cookie th, .tabella-cookie td {
	text-align: start; vertical-align: top;
	padding: 10px 14px 10px 0; border-block-end: 1px solid var(--linea);
}
.tabella-cookie th { font-family: var(--titoli); font-size: 13.5px; color: var(--tuta); white-space: nowrap; }
.tabella-cookie td { color: var(--grigio); }
.tabella-cookie code {
	font-size: 13.5px; background: var(--nebbia); padding: 2px 6px;
	border-radius: 5px; color: var(--tuta);
}
.tabella-cookie td:last-child { white-space: nowrap; }
@media (max-width: 720px) {
	.tabella-cookie { display: block; overflow-x: auto; }
	.tabella-cookie td:last-child { white-space: normal; }
}

/* Un pulsante che deve sembrare un collegamento: riapre la finestrella del
   consenso. E' un pulsante e non un link perche' non porta da nessuna parte
   -- chi naviga da tastiera o con un lettore di schermo deve sentirselo
   annunciare per quello che fa. */
.collegamento-finto {
	background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
	color: var(--richiamo); text-decoration: underline; text-underline-offset: 3px;
}
.collegamento-finto:hover { text-decoration-thickness: 2px; }
.piede .collegamento-finto { color: inherit; text-decoration: none; }
.piede .collegamento-finto:hover { text-decoration: underline; }