/* ==========================================================================
   S.R. Termotecnica — tema 4.0 «stile Apple»
   Richieste dell'utente (24/09/2026): «ho detto stravolgilo. stile apple. stravolgi lo stile»; «mi raccomando: il blu,
   il giallo e l'omino sono l'identità dell'azienda»; «professionale… graficamente pulito… senza appesantire l'occhio».
   Linguaggio: fondo grigio chiarissimo (non bianco: «il bianco stanca gli occhi»), titoli grandi e stretti, centrati;
   tessere bianche molto arrotondate, senza bordi; barra in cima sottile e traslucida; fasce bianche e una fascia blu notte
   che si alternano; pulsanti a pillola e link con la freccetta ›.
   Identità: il blu e l'azzurro del logo (pulsanti, link, titoli sfumati, tessera dell'omino in ogni testata), il giallo
   (esagoni con le icone, condizioni della home, dettagli sul blu), l'omino (tessera in testata, icona del percorso).
   Font: titoli in Inter Tight (SIL OFL 1.1, assets/fonts/OFL-inter-tight.txt, ospitato nel tema); testo nel font di sistema
   (su Mac e iPhone è il San Francisco di Apple, su Windows Segoe UI): niente altro da scaricare.
   ========================================================================== */

@font-face {
	font-family: "Inter Tight";
	src: url(../fonts/inter-tight-latin-wght-normal.woff2) format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

:root {
	/* identità: i colori del logo (campionati da assets/img/logo.png) e il giallo del sito di prima (#FFED00) */
	--azzurro: #0088CB;        /* omino e scritta del logo */
	--blu: #005089;            /* blu scuro del logo */
	--indaco: #2B3990;         /* motto del logo */
	--blu-vivo: #0069AD;       /* pulsanti e link: tra l'azzurro e il blu del logo; 5,8:1 sul bianco, 4,7:1 sopra la filigrana */
	--giallo: #FFED00;
	--ghiaccio: #E3F0F9;       /* azzurro chiarissimo */
	--sfumato: linear-gradient(100deg, var(--blu) 0%, var(--azzurro) 100%);
	--tessera-blu: linear-gradient(155deg, #10A0E6 0%, var(--azzurro) 28%, var(--blu) 78%, #003E6B 100%);
	/* l'omino del logo, grande e fermo sullo sfondo di ogni pagina: azzurro del logo, molto trasparente */
	--filigrana: rgba(0, 136, 203, .11);   /* «leggermente meno trasparente» (utente, 24/09/2026): prima .075 */
	/* neutri, come i siti Apple */
	--fondo: #F5F5F7;
	--bianco: #FFFFFF;
	--ink: #1D1D1F;
	--testo: #333336;          /* testo dei paragrafi: più scuro del grigio Apple, perché «le scritte importanti… si perdono» (utente, 24/09/2026) */
	--muted: #636368;          /* 4,8:1 anche sopra la filigrana dell'omino */
	--filo: #D2D2D7;
	--filo-chiaro: #E8E8ED;
	/* fascia scura: il blu del logo portato quasi al nero */
	--notte: #05213A;
	--notte-2: #0C3052;
	--su-notte: rgba(255, 255, 255, .72);
	/* funzioni */
	--wa: #25D366;
	--wa-testo: #062A17;
	--errore: #B42318;
	--ok: #1E6B3A;
	/* font */
	--titoli: "Inter Tight", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--corpo: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/* misure */
	--wrap: 1440px;            /* a tutta pagina (utente, 24/09/2026): griglie e sezioni fino a 1440 px */
	--stretto: 980px;
	--pad: clamp(16px, 2.4vw, 32px);
	--sez: clamp(56px, 6.5vw, 96px);
	--bordo: 12px;             /* margine dei riquadri a tutta pagina, come le tessere dei siti Apple */
	--barra: 60px;             /* altezza della barra in cima */
	--fila: 58px;              /* altezza della fila delle icone dei servizi, fissa sotto la barra */
	--cima: calc(var(--barra) + var(--fila));
	--r-grande: 28px;
	--r: 20px;
	--r-piccolo: 12px;
	--ombra: 0 4px 24px rgba(0, 0, 0, .07);
	--ombra-su: 0 18px 44px rgba(0, 0, 0, .13);
	--curva: cubic-bezier(.25, .1, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--giallo); color: var(--ink); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cima) + 16px); }
body {
	margin: 0;
	font-family: var(--corpo);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -.01em;
	color: var(--ink);
	background: var(--fondo);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* L'omino del logo come grande filigrana ferma al centro dello schermo, dietro a tutto il contenuto: si vede sul fondo e
   resta lì mentre la pagina scorre (utente, 24/09/2026: «l'ometto stilizzato che rimane fermo nel mezzo della pagina…
   leggermente visibile… abbastanza grosso sullo sfondo… del colore del logo ma abbastanza in trasparenza»).
   Disegno: assets/img/filigrana-omino.svg (strumenti/prepara-filigrana.py). Le tessere bianche e la fascia scura lo coprono. */
body::before {
	content: ""; position: fixed; left: 50%; top: 50%; z-index: -1; pointer-events: none;
	width: min(92vw, 1080px); aspect-ratio: 187.3 / 147.68; transform: translate(-50%, -44%);
	background: var(--filigrana);
	-webkit-mask: url("../img/filigrana-omino.svg") no-repeat center / contain; mask: url("../img/filigrana-omino.svg") no-repeat center / contain;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 3px; border-radius: 6px; }
.sez-scura :focus-visible, .menu-mobile :focus-visible { outline-color: var(--giallo); }
.nascosto, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--blu-vivo); color: #fff; font-weight: 600; }
.salta:focus { top: 12px; }
.wrap { max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding-inline: var(--pad); }
.nw { white-space: nowrap; }
.ancora { position: relative; top: -16px; }

h1, h2, h3 { margin: 0; font-family: var(--titoli); color: inherit; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.6vw, 80px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; overflow-wrap: break-word; hyphens: manual; }
h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 700; line-height: 1.07; letter-spacing: -.032em; }
h3 { font-size: 21px; font-weight: 650; line-height: 1.24; letter-spacing: -.018em; }
/* titoli e cifre con la sfumatura del logo, dal blu all'azzurro (come i titoli sfumati dei siti Apple) */
.sfumato { color: var(--blu); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.sfumato { background: var(--sfumato); -webkit-background-clip: text; background-clip: text; color: transparent; }
}

/* Icone ed esagoni: l'esagono giallo con l'icona blu è il segno dell'azienda (come l'esagono della tessera dell'omino) */
.i { width: 22px; height: 22px; flex: none; }
.esa {
	display: inline-grid; place-items: center; flex: none;
	width: 52px; height: 58px; background: var(--giallo); color: var(--blu);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.esa .i { width: 24px; height: 24px; }
.esa-piccolo { width: 40px; height: 46px; }
.esa-piccolo .i { width: 20px; height: 20px; }
.esa-grande { width: 96px; height: 108px; }
.esa-grande .i { width: 42px; height: 42px; }
/* icona dell'omino (tessera blu arrotondata come un'icona di app, omino bianco): percorso in fondo alla pagina */
.omino-icona { position: relative; display: inline-block; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--tessera-blu); vertical-align: middle; }
.omino-icona::before {
	content: ""; position: absolute; inset: 5px 3px 5px; background: #fff;
	-webkit-mask: url("../img/filigrana-omino.svg") no-repeat center / contain; mask: url("../img/filigrana-omino.svg") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   Pulsanti e link
   -------------------------------------------------------------------------- */
.pill {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	min-height: 48px; padding: 0 24px; border: 0; border-radius: 999px;
	font-family: inherit; font-weight: 500; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; text-align: center;
	cursor: pointer; transition: background-color .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva), box-shadow .25s var(--curva);
}
.pill .i { width: 20px; height: 20px; }
.pill.small, .pill.piccola { min-height: 34px; padding: 0 16px; font-size: 14px; gap: 7px; }
.pill.piccola .i { width: 16px; height: 16px; }
.pill.pieno { width: 100%; }
.pill.blu { background: var(--blu-vivo); color: #fff; }
.pill.blu:hover { background: var(--blu); }
.pill.bianca { background: #fff; color: var(--blu); }
.pill.bianca:hover { background: var(--giallo); }
.pill.vuota { border: 1px solid rgba(255, 255, 255, .5); color: #fff; }
.pill.vuota:hover { border-color: #fff; }
.pill.bordo { border: 1px solid var(--blu-vivo); color: var(--blu-vivo); background: transparent; }
.pill.bordo:hover { background: var(--blu-vivo); color: #fff; }
.pill.bordo .i.wa { color: #12A150; transition: color .25s; }
.pill.bordo:hover .i.wa { color: #fff; }
.pill.wa { background: var(--wa); color: var(--wa-testo); }
.pill.wa:hover { background: #1FBE5A; }
/* link con la freccetta › */
.vai { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--blu-vivo); font-size: 17px; font-weight: 500; white-space: nowrap; }
.vai:hover { text-decoration: underline; text-underline-offset: 3px; }
.vai .i { width: 17px; height: 17px; margin-top: 1px; transition: transform .25s var(--curva); }
.vai:hover .i { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   Blocco in cima (traslucido, sempre visibile mentre si scorre): barra con la reperibilità, fila dei servizi; menu mobile
   -------------------------------------------------------------------------- */
.hd-barra {
	position: sticky; top: 0; z-index: 40;
	background: rgba(245, 245, 247, .82); border-bottom: 1px solid transparent;
	-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
	transition: border-color .3s, background-color .3s;
}
.hd-barra.scorre { background: rgba(250, 250, 252, .86); border-bottom-color: rgba(0, 0, 0, .08); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .hd-barra { background: var(--fondo); } }
.hd { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--barra); }
/* barra simmetrica (utente, 24/09/2026: «rendila simmetrica e più carina»): due gruppi di peso simile, allineati ai bordi.
   A sinistra logo, Dove siamo, Orari, Contatti; a destra reperibilità, WhatsApp, Preventivo gratuito. */
.hd-sinistra { display: flex; align-items: center; gap: 22px; min-width: 0; }
/* «Dove siamo» (Google Maps) e «Orari» accanto al logo (utente, 24/09/2026) */
.hd-info { display: flex; align-items: center; gap: 18px; }
.hd-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14px; font-weight: 500; color: rgba(29, 29, 31, .8); cursor: pointer; white-space: nowrap; transition: color .2s; }
.hd-link:hover { color: var(--blu-vivo); }
.hd-link .i { width: 18px; height: 18px; color: var(--blu-vivo); }
.hd-orari { position: relative; }
.hd-orari summary { list-style: none; }
.hd-orari summary::-webkit-details-marker { display: none; }
.hd-orari[open] summary { color: var(--blu); }
.hd-orari-pannello { position: absolute; left: -12px; top: calc(100% + 10px); z-index: 45; width: max-content; min-width: 300px; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .96); box-shadow: 0 16px 40px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .05); }
.hd-orari-titolo { margin: 0 0 8px; font-family: var(--titoli); font-size: 16px; font-weight: 650; letter-spacing: -.01em; color: var(--ink); }
.hd-orari-pannello dl { margin: 0; }
.hd-orari-pannello dl div { display: flex; justify-content: space-between; gap: 24px; padding: 6px 0; border-top: 1px solid var(--filo-chiaro); font-size: 14px; }
.hd-orari-pannello dt { color: var(--testo); }
.hd-orari-pannello dd { margin: 0; font-weight: 600; color: var(--ink); }
.hd-orari-sede { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.hd-destra { display: flex; align-items: center; gap: 20px; min-width: 0; }
.hd .logo { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.hd .logo img { height: 40px; width: auto; }
.nav { flex: none; display: flex; } /* in cima resta solo Contatti: i servizi sono nella fila delle icone */
.nav-voci { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }
/* voce attiva: blu e in grassetto */
.nav-voci a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; font-size: 14px; font-weight: 500; color: rgba(29, 29, 31, .8); }
.nav-voci a:hover { color: var(--blu-vivo); }
.nav-voci a[aria-current="page"], .nav-voci .current-menu-item > a { color: var(--blu); font-weight: 600; }
.hd-azioni { display: flex; align-items: center; gap: 10px; flex: none; }
.hd-wa .i.wa { color: var(--wa-testo); }
.tondo { display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
.tondo:hover { background: rgba(0, 0, 0, .05); }

/* Nastro sotto la barra: la reperibilità, sul blu del logo con il giallo (era la barretta blu in cima) */
/* La reperibilità a destra, prima dei pulsanti: testo su due righe con un puntino giallo che pulsa piano, come un segnale
   «sempre attivi» (utente, 24/09/2026: «sposta reperibili a destra… più carina»; prima era una pillola blu al centro) */
.hd-reperibili { display: flex; align-items: center; gap: 10px; margin: 0; white-space: nowrap; }
.rep-testo { display: grid; line-height: 1.15; }
.rep-testo strong { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; color: var(--blu); }
.rep-coda { font-size: 12px; color: var(--muted); }
.rep-punto { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--giallo); box-shadow: 0 0 0 1.5px var(--blu); }
.rep-punto::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(255, 214, 0, .85); animation: sr-segnale 2.4s ease-out infinite; }
@keyframes sr-segnale {
	0% { box-shadow: 0 0 0 0 rgba(255, 214, 0, .85); }
	70%, 100% { box-shadow: 0 0 0 9px rgba(255, 214, 0, 0); }
}

/* Menu mobile a tutto schermo, blu notte come la fascia scura */
.menu-mobile { position: fixed; inset: 0; z-index: 60; overflow-y: auto; padding-bottom: 32px; background: var(--notte); color: #fff; }
.menu-mobile[hidden] { display: none; }
.menu-testa { display: flex; align-items: center; justify-content: space-between; height: var(--barra); }
.menu-titolo { font-size: 14px; font-weight: 600; color: var(--su-notte); }
.menu-mobile .tondo { display: grid; background: rgba(255, 255, 255, .1); color: #fff; }
.menu-voci { list-style: none; margin: 12px 0 0; padding: 0; }
/* i servizi nel menu del telefono: due colonne, icone gialle sul blu notte */
.menu-voci a { display: block; padding: 10px 0; font-family: var(--titoli); font-size: 30px; font-weight: 650; line-height: 1.2; letter-spacing: -.025em; }
.menu-voci.secondarie { margin-top: 20px; }
.menu-voci.secondarie a { padding: 8px 0; font-family: var(--corpo); font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--su-notte); }
.menu-voci a[aria-current="page"], .menu-voci .current-menu-item > a { color: var(--giallo); }
.menu-contatti { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.menu-contatti-titolo { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--su-notte); }
.menu-contatti p:not(.menu-contatti-titolo) { margin: 10px 0 0; color: var(--su-notte); font-size: 15px; line-height: 1.7; }
.menu-mappa { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.menu-mappa .i { width: 18px; height: 18px; color: var(--giallo); }

/* Fila delle icone dei servizi (come la fila dei prodotti in cima alle pagine Apple) */
.servizi-nav { border-top: 1px solid rgba(0, 0, 0, .05); }
.servizi-nav ul { display: flex; justify-content: center; gap: 2px; height: var(--fila); margin: 0 auto; padding-block: 0; list-style: none; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
/* Col dito la fila scorre SEMPRE di lato, anche mentre la pagina è ancora in movimento (utente, 27/09/2026: «lo scroll
   orizzontale si blocca se la pagina sta scorrendo… sembra bloccato»): un tocco sulla fila vale solo per lo scorrimento
   orizzontale, quindi il browser non lo prende per uno scorrimento della pagina; e a fine corsa non trascina la pagina. */
.servizi-nav ul { touch-action: pan-x; overscroll-behavior-x: contain; scroll-behavior: auto; }
/* Con JavaScript (tema 4.1.6) lo scorrimento di lato col dito lo fa tema.js, anche durante l'inerzia della pagina:
   al browser resta quello verticale, così trascinando in su o in giù sulla fila si muove la pagina. */
.servizi-nav ul.dito { touch-action: pan-y pinch-zoom; }
.servizi-nav ul::-webkit-scrollbar { display: none; }
.servizi-nav li { flex: none; }
.servizi-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 88px; height: 100%; padding: 0 10px; font-size: 11.5px; line-height: 1.2; letter-spacing: 0; text-align: center; white-space: nowrap; color: var(--ink); }
.servizi-nav .i { width: 24px; height: 24px; color: var(--blu-vivo); transition: transform .3s var(--curva); }
.servizi-nav a:hover { color: var(--blu-vivo); }
.servizi-nav a:hover .i { transform: translateY(-2px); }
.servizi-nav a[aria-current="page"] { font-weight: 600; color: var(--blu); }
/* la voce della pagina attuale: il simbolo diventa giallo, con un filo blu che lo fa leggere sul chiaro, e pulsa piano con un
   alone della sua stessa forma (utente, 24/09/2026: «il pallino sotto i simboli cambialo… fai diventare il simbolo giallo
   leggermente pulsante… non pacchiano, una pulsazione della forma del simbolo»); con «riduci movimento» resta fermo */
.servizi-nav a[aria-current="page"] .i {
	color: var(--giallo);
	filter: drop-shadow(0 0 .7px rgba(0, 62, 107, .95)) drop-shadow(0 0 .7px rgba(0, 62, 107, .95));
	animation: sr-pulsa 2.8s ease-in-out infinite;
}
@keyframes sr-pulsa {
	0%, 100% { transform: scale(1); filter: drop-shadow(0 0 .7px rgba(0, 62, 107, .95)) drop-shadow(0 0 .7px rgba(0, 62, 107, .95)) drop-shadow(0 0 0 rgba(255, 214, 0, 0)); }
	50% { transform: scale(1.08); filter: drop-shadow(0 0 .7px rgba(0, 62, 107, .95)) drop-shadow(0 0 .7px rgba(0, 62, 107, .95)) drop-shadow(0 0 6px rgba(255, 214, 0, .9)); }
}

/* --------------------------------------------------------------------------
   Testata (parts/testata.php): titolo centrato, poi foto + tessera blu con l'omino, alte uguali in tutte le pagine
   -------------------------------------------------------------------------- */
.eroe-sez { padding: clamp(40px, 5.5vw, 80px) 0 clamp(48px, 6vw, 88px); }
.eroe { max-width: calc(var(--stretto) + var(--pad) * 2); text-align: center; }
.occhiello { margin: 0 0 14px; font-family: var(--titoli); font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: var(--blu); }
.eroe h1.eroe-lungo { font-size: clamp(36px, 4.6vw, 64px); }
.eroe-sez-home h1 { font-size: clamp(44px, 6.8vw, 96px); letter-spacing: -.034em; }
.eroe h1 .kicker { display: block; margin-bottom: 16px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.3; letter-spacing: -.012em; color: var(--blu); }
.eroe-sotto { max-width: 720px; margin: 22px auto 0; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.38; letter-spacing: -.012em; color: var(--testo); }
.eroe .azioni { display: none; flex-wrap: wrap; justify-content: center; gap: 12px 14px; margin-top: 34px; } /* sul computer i pulsanti sono nella barra in cima */
/* la foto vera della pagina, sotto il titolo: larga al massimo un quarto più del file (--max, da sr_figura), perché resti
   nitida; alta uguale in tutte le pagine che ce l'hanno */
.eroe-visivo { max-width: 1760px; margin: clamp(40px, 5vw, 64px) auto 0; padding-inline: var(--bordo); }
.eroe-foto { position: relative; width: min(100%, calc(var(--max, 1200px) * 1.25)); height: clamp(320px, 36vw, 600px); margin: 0 auto; overflow: hidden; border-radius: var(--r-grande); background: var(--filo-chiaro); }
.eroe-foto picture, .eroe-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.eroe-foto figcaption { position: absolute; inset: auto 0 0; padding: 48px 24px 16px; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .42)); color: #fff; font-size: 13px; line-height: 1.4; text-align: left; }
/* senza foto la testata è solo testo, con più aria: dietro si vede la filigrana dell'omino */
.eroe-sez-testo { padding: clamp(56px, 7.5vw, 120px) 0 clamp(64px, 8vw, 128px); }

/* home: le condizioni sotto la foto, in cerchi gialli con l'icona blu */
.promesse { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 48px; margin: clamp(32px, 4vw, 48px) auto 0; list-style: none; }
.promesse li { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 600; color: var(--ink); }
.promessa-icona { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--giallo); color: var(--blu); }
.promessa-icona .i { width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   Sezioni: grigio chiaro, bianco, blu notte che si alternano
   -------------------------------------------------------------------------- */
.sez { padding-block: var(--sez); }
.sez-bianca { background: rgba(255, 255, 255, .62); }
.sez-scura { background: var(--notte); color: #F5F5F7; }
/* due sezioni di fila sullo stesso fondo non sommano gli spazi */
.sez:not(.sez-bianca):not(.sez-scura) + .sez:not(.sez-bianca):not(.sez-scura), .sez-bianca + .sez-bianca { padding-top: 0; }
.eroe-sez + .sez:not(.sez-bianca):not(.sez-scura) { padding-top: calc(var(--sez) * .3); }
/* titolo di sezione centrato, con la frase sotto in grigio e il link › */
.testa-sez { max-width: 860px; margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; }
.testa-sez p { margin: 16px auto 0; max-width: 720px; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.42; color: var(--testo); }
.testa-sez .vai { margin-top: 12px; }
.sez > .wrap > h2 { margin-bottom: clamp(32px, 4vw, 56px); text-align: center; }
/* sezioni di supporto (da sapere, marchi, altri servizi): titolo più piccolo */
.sez-sapere h2, .sez-loghi h2, .sez-schede-indice h2, .sez-schede-correlati h2, .sez-lista h2 { font-size: clamp(28px, 2.8vw, 40px); }
.sez-scura .vai { color: var(--giallo); }
.sez-scura .testa-sez p { color: var(--su-notte); }

/* Testo dell'articolo, con eventuale foto o numero di fianco */
.corpo-art { display: grid; grid-template-columns: minmax(0, 740px); justify-content: center; }
.corpo-art.con-aside { grid-template-columns: minmax(0, 680px) minmax(0, 380px); column-gap: clamp(40px, 6vw, 96px); align-items: start; }
/* La colonna di fianco al testo scende con la pagina (solo sul computer); si ferma sotto la barra in cima e, se è più alta
   dello schermo, scorre finché se ne vede il fondo (utente, 24/09/2026: «viene giù tagliata»). tema.js scrive --aside-alt. */
.art-aside { position: sticky; top: min(calc(var(--cima) + 24px), calc(100vh - var(--aside-alt, 0px) - 24px)); display: grid; gap: 16px; }
.prosa { font-size: 18px; line-height: 1.62; color: var(--testo); }
.prosa > * { margin: 0; }
.prosa > * + * { margin-top: 1.05em; }
.prosa-art > p:first-of-type:not(.avviso), .prosa-art > .avviso:first-child + p { font-family: var(--titoli); font-size: clamp(21px, 1.8vw, 25px); line-height: 1.38; font-weight: 600; letter-spacing: -.018em; color: var(--ink); }
.prosa h2 { margin-top: 1.7em; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.025em; color: var(--ink); }
.prosa h3 { margin-top: 1.5em; font-size: 22px; color: var(--ink); }
.prosa h4 { margin-top: 1.4em; font-family: var(--titoli); font-size: 19px; font-weight: 650; color: var(--blu); }
.prosa strong { color: var(--ink); font-weight: 600; }
.prosa a { color: var(--blu-vivo); text-decoration: underline; text-underline-offset: 3px; }
.prosa ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.prosa ul:has(> li:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.prosa ul > li { position: relative; padding-left: 32px; }
.prosa ul > li::before { content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 999px; background: var(--ghiaccio) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230069AD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.prosa ol { padding-left: 1.3em; }
.prosa ol li + li { margin-top: .4em; }
.prosa li::marker { color: var(--blu-vivo); }
.prosa blockquote { margin: 1.4em 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--giallo); color: var(--ink); font-family: var(--titoli); font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.prosa .bottone a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 999px; background: var(--blu-vivo); color: #fff; font-weight: 500; text-decoration: none; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 16px; }
.prosa th, .prosa td { padding: 10px 12px; border-bottom: 1px solid var(--filo); text-align: left; }
.avviso { margin: 0 0 1.4em; padding: 16px 20px; border-radius: 14px; background: #FFF6D1; color: #574108; font-size: 15px; line-height: 1.55; }
.avviso a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.art-figura { margin: 0; max-width: var(--max, 400px); }
.art-figura img, .figura-piccola img { width: 100%; border-radius: var(--r); }
.art-figura img { object-fit: cover; }
.art-figura figcaption, .figura-piccola figcaption, .edit-foto figcaption, .gal-foto figcaption { padding-top: 10px; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* scheda del preventivo nella colonna che accompagna la lettura degli articoli */
.art-info { display: grid; gap: 14px; justify-items: start; padding: 24px; border-radius: var(--r); background: var(--bianco); box-shadow: var(--ombra); }
.art-info-titolo { margin: 0; font-family: var(--titoli); font-size: 20px; line-height: 1.25; font-weight: 650; letter-spacing: -.018em; color: var(--ink); }
.art-info ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.art-info li { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.4; color: var(--testo); }
.art-info strong { color: var(--ink); font-weight: 600; }
.art-info .vai { min-height: 32px; font-size: 16px; }
/* schermi bassi (portatili piccoli): la scheda si accorcia perché la colonna stia tutta sotto il blocco in cima */
@media (min-width: 981px) and (max-height: 700px) { .art-info li:nth-child(n+3) { display: none; } }

/* Blocco editoriale: foto grande arrotondata e testo */
.edit { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: clamp(40px, 6vw, 96px); align-items: center; }
.edit-destra { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.edit-media { grid-column: 1; grid-row: 1; display: grid; gap: 16px; justify-items: end; }
.edit-testo { grid-column: 2; grid-row: 1; }
.edit-destra .edit-media { grid-column: 2; justify-items: start; }
.edit-destra .edit-testo { grid-column: 1; }
.edit:not(:has(.edit-media)) { grid-template-columns: minmax(0, 760px); justify-content: center; }
.edit:not(:has(.edit-media)) .edit-testo { grid-column: 1; }
.edit-foto { margin: 0; width: 100%; max-width: var(--max, 100%); }
.edit-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-grande); }
.edit-testo h2 { font-size: clamp(32px, 3.6vw, 52px); }
.edit-testo .edit-sotto { margin-top: 14px; font-family: var(--titoli); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.32; font-weight: 600; letter-spacing: -.015em; color: var(--blu); }
.edit-testo p { margin: 16px 0 0; font-size: 18px; line-height: 1.62; color: var(--testo); }
.edit-testo p a { color: var(--blu-vivo); text-decoration: underline; text-underline-offset: 3px; }
.edit-testo .vai { margin-top: 18px; }
.figura-piccola { margin: 0; max-width: min(var(--max, 355px), 100%); }
.colonne-riga { grid-column: 1 / -1; margin-top: 16px; font-size: 24px; text-align: center; }

/* Numeri: cifre grandi con la sfumatura del logo */
.numeri-riga { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 28px; margin: 28px 0 4px; }
.numeri-riga strong { display: block; font-family: var(--titoli); font-size: clamp(30px, 2.8vw, 42px); line-height: 1.05; letter-spacing: -.035em; font-weight: 700; color: var(--blu); }
.numeri-riga span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--testo); }
.numeri-riga small { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.numeri-riga strong, .numero-grande strong, .passo-n, .gancio p { background: var(--sfumato); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.numeri-grandi { margin: 0; gap: 16px; }
.numeri-grandi > div { padding: 32px 28px; border-radius: var(--r); background: var(--bianco); text-align: center; }
.numeri-grandi strong { font-size: clamp(34px, 3.3vw, 50px); text-wrap: balance; }
.numeri-grandi span { font-size: 16px; color: var(--testo); }
.numero-grande strong { display: block; font-family: var(--titoli); font-size: clamp(56px, 6vw, 84px); line-height: 1; letter-spacing: -.045em; font-weight: 700; color: var(--blu); }
.numero-grande span { display: block; margin-top: 12px; font-size: 18px; line-height: 1.45; color: var(--ink); }
.numero-grande small { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.numero-grande > div { padding: 28px; border-radius: var(--r); background: var(--bianco); }

/* Cosa comprende ed elenchi con spunte */
.spunte { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 48px; max-width: 1000px; }
.spunte li { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.5; }
.spunte .i { width: 24px; height: 24px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--ghiaccio); color: var(--blu-vivo); }
.spunte-titoli b { color: var(--ink); font-weight: 600; }
.spunte-titoli li { color: var(--testo); font-size: 17px; }
.spunte-riga { grid-column: 1 / -1; margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--filo); }
.spunte-riga h3 { font-size: 24px; color: var(--ink); }

/* Frase-gancio: una frase grande al centro, con la sfumatura del logo */
.sez-gancio .wrap { text-align: center; }
.gancio { margin: 0 auto; max-width: 960px; }
.gancio p { margin: 0; font-family: var(--titoli); font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -.032em; color: var(--blu); }
/* frasi lunghe (più di 110 caratteri): più piccole, perché restino una frase e non un muro di testo */
.gancio-lungo { max-width: 880px; }
.gancio-lungo p { font-size: clamp(24px, 2.5vw, 36px); line-height: 1.2; letter-spacing: -.025em; }

/* Passaggi: tessere bianche con il numero grande */
.passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.passi li { padding: 32px 28px 34px; border-radius: var(--r); background: var(--bianco); }
.passo-n { display: block; margin-bottom: 18px; font-family: var(--titoli); font-size: 52px; line-height: 1; letter-spacing: -.04em; font-weight: 700; color: var(--blu); }
.passi p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--testo); }

/* Colonne con icona: tessere grigio chiaro sulla fascia bianca, esagono giallo con l'icona blu */
.colonne { display: grid; gap: 16px; }
.colonne-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.colonne-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.colonne-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.colonna { padding: 32px 28px 34px; border-radius: var(--r); background: var(--fondo); }
.sez:not(.sez-bianca) .colonna { background: var(--bianco); }
.colonna h3 { margin-top: 22px; }
.colonna p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--testo); }

/* Da sapere: sezione di supporto, righe leggere */
.sapere { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 40px; }
.sapere-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sapere-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-inline: auto; }
.sapere-1 { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.sapere li { display: flex; gap: 16px; align-items: flex-start; padding: 24px 0 0; border-top: 1px solid var(--filo); }
.sapere .esa, .lista-comp .esa { width: 40px; height: 46px; background: var(--ghiaccio); color: var(--blu-vivo); }
.sapere .esa .i, .lista-comp .esa .i { width: 20px; height: 20px; }
.sapere h3 { font-size: 19px; }
.sapere p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--testo); }
.sapere .vai { margin-top: 2px; font-size: 16px; }

/* Testimonianze sulla fascia blu notte */
.sez-citazioni h2 { color: #fff; }
.sez-citazioni .testa-sez { margin-bottom: clamp(28px, 3.5vw, 48px); }
.cit-grande { max-width: 920px; margin: 0 auto; text-align: center; }
.cit-grande blockquote { margin: 0; }
.cit-grande blockquote::before { content: "“"; display: block; height: 56px; font-family: Georgia, "Times New Roman", serif; font-size: 112px; line-height: 1; color: var(--giallo); }
.cit-grande p { margin: 0; font-family: var(--titoli); font-size: clamp(24px, 2.5vw, 34px); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; color: #fff; }
.cit-grande figcaption { margin-top: 20px; font-size: 17px; font-weight: 500; color: var(--su-notte); }
.cit-brevi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.cit-brevi figure { margin: 0; padding: 28px; border-radius: var(--r); background: var(--notte-2); }
.cit-brevi blockquote { margin: 0; }
.cit-brevi p { margin: 0; font-family: var(--titoli); font-size: 21px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: #fff; }
.cit-brevi figcaption { margin-top: 14px; font-size: 14px; color: var(--su-notte); }

/* Loghi dei marchi: tessere grigio chiaro sulla fascia bianca */
.sez-loghi .wrap { text-align: center; }
.sez-loghi .wrap > h2 { margin-bottom: 16px; }
.loghi-testo { margin: 0 auto 36px; max-width: 64ch; font-size: 19px; line-height: 1.45; color: var(--testo); }
.loghi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.loghi li { display: grid; place-items: center; width: 176px; height: 96px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--filo-chiaro); }
.loghi-piccolo li { width: 150px; height: 80px; }
.loghi img { width: auto; height: auto; max-width: 124px; max-height: 48px; object-fit: contain; } /* a colori, come gli originali (utente, 24/09/2026: «i loghi a colori come gli originali»); mai più grandi del file (PNG 160×100 al massimo) */
.loghi img[src*="immergas"] { max-height: 30px; }
.logo-testo { font-size: 20px; font-weight: 700; color: #4B5763; letter-spacing: .02em; }
.loghi-sotto { margin: 36px auto 0; max-width: 72ch; font-size: 16px; line-height: 1.7; color: var(--testo); }
.marche-elenco { list-style: none; margin: 12px auto 0; padding: 0; max-width: 840px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; font-size: 15px; color: var(--testo); }
.marche-elenco li + li::before { content: "·"; margin: 0 10px; color: var(--filo); }
.sez-loghi .vai { margin-top: 16px; }

/* Schede con foto: tessere bianche arrotondate che si sollevano al passaggio del mouse */
.schede { display: grid; gap: 20px; }
.schede-normale, .schede-correlati { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.schede-grande { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 981px) {
	.schede-normale:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.scheda { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--bianco); transition: box-shadow .35s var(--curva), transform .35s var(--curva); }
.sez-bianca .scheda { background: var(--fondo); }
.scheda:hover { box-shadow: var(--ombra-su); transform: translateY(-4px); }
.scheda-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--filo-chiaro); }
.scheda-grande .scheda-foto { aspect-ratio: 16 / 10; }
.scheda-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--curva); }
.scheda:hover .scheda-foto img { transform: scale(1.04); }
.scheda-vuota { display: grid; place-items: center; height: 100%; background: var(--tessera-blu); }
.scheda-testo { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 22px 24px 24px; }
.scheda-testo b { font-family: var(--titoli); font-size: 21px; font-weight: 650; line-height: 1.24; letter-spacing: -.018em; }
.scheda-grande .scheda-testo b { font-size: 26px; }
.scheda-testo small { font-size: 15.5px; line-height: 1.5; color: var(--testo); }
.scheda-grande .scheda-testo small { font-size: 17px; }
.scheda-testo .data, .nov-testo .data { font-size: 13px; color: var(--muted); }
.scheda-vai { display: inline-flex; align-items: center; gap: 2px; margin-top: auto; padding-top: 8px; color: var(--blu-vivo); font-size: 16px; font-weight: 500; }
.scheda-vai .i { width: 16px; height: 16px; transition: transform .25s var(--curva); }
.scheda:hover .scheda-vai .i, .nov-grande:hover .scheda-vai .i, .blog-grande:hover .scheda-vai .i { transform: translateX(2px); }
/* Indice di tutti i servizi (pagine servizio) */
.schede-indice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.indice-voce { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 16px; background: var(--bianco); transition: box-shadow .3s var(--curva); }
.indice-voce:hover { box-shadow: var(--ombra); }
.indice-mini { display: grid; place-items: center; width: 52px; height: 52px; overflow: hidden; border-radius: 12px; background: var(--fondo); }
.indice-mini picture, .indice-mini img { width: 100%; height: 100%; object-fit: cover; }
.indice-voce b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.indice-voce .i { width: 16px; height: 16px; color: var(--blu-vivo); transition: transform .25s var(--curva); }
.indice-voce:hover b { color: var(--blu-vivo); }
.indice-voce.corrente { box-shadow: inset 0 0 0 2px var(--blu-vivo); }
.indice-voce.corrente b { color: var(--blu); }
.indice-voce:hover .i { transform: translateX(2px); }

/* Elenco compatto (Cosa facciamo anche) */
.lista-comp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.lista-comp li { display: flex; gap: 18px; align-items: flex-start; padding: 28px; border-radius: var(--r); background: var(--bianco); }
.lista-comp h3 { font-size: 19px; }
.lista-comp p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--testo); }
.lista-comp .vai { font-size: 16px; }

/* Galleria a mosaico */
.galleria { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
.gal-foto { margin: 0; display: flex; flex-direction: column; }
.gal-foto picture { flex: 1; min-height: 0; }
.gal-foto img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.galleria > .gal-foto:first-child { grid-row: span 2; }
.galleria > .gal-foto:first-child img { aspect-ratio: auto; min-height: 100%; }

/* Fascia fotografica a tutta larghezza */
.fascia-foto { margin: 0; }
.fascia-foto picture { max-width: 1736px; margin: 0 auto; }
.fascia-foto img { width: 100%; max-height: 560px; object-fit: cover; object-position: center 35%; }
.fascia-foto figcaption { padding-top: 12px; font-size: 13px; color: var(--muted); text-align: center; }

/* Novità: una in evidenza, le altre in tessere */
.novita { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.nov-grande { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r); background: var(--bianco); transition: box-shadow .35s var(--curva); }
.nov-grande:hover { box-shadow: var(--ombra-su); }
.nov-grande .nov-foto { border-radius: 0; }
.nov-grande .nov-testo { padding: 26px 28px 28px; }
.blog-grande { display: grid; overflow: hidden; border-radius: var(--r-grande); background: var(--bianco); transition: box-shadow .35s var(--curva); }
.blog-grande:hover { box-shadow: var(--ombra-su); }
.nov-foto { display: block; overflow: hidden; background: var(--filo-chiaro); }
.nov-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--curva); }
.nov-grande:hover .nov-foto img, .blog-grande:hover .nov-foto img { transform: scale(1.03); }
.nov-testo { display: flex; flex-direction: column; gap: 10px; }
.nov-testo b { font-family: var(--titoli); font-size: 26px; font-weight: 650; line-height: 1.2; letter-spacing: -.022em; }
.nov-testo small { font-size: 16px; line-height: 1.55; color: var(--testo); }
.nov-lista, .risultati { list-style: none; margin: 0; padding: 0; }
.nov-lista { display: grid; gap: 16px; }
.nov-lista a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; height: 100%; padding: 14px; border-radius: var(--r); background: var(--bianco); transition: box-shadow .3s var(--curva); }
.nov-lista a:hover { box-shadow: var(--ombra); }
.risultati a { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px; margin-top: 12px; border-radius: var(--r); background: var(--bianco); }
.nov-mini { display: grid; place-items: center; width: 104px; height: 104px; overflow: hidden; border-radius: 14px; background: var(--fondo); }
.nov-mini picture, .nov-mini img { width: 100%; height: 100%; object-fit: cover; }
.nov-lista b, .risultati b { display: block; font-family: var(--titoli); font-size: 19px; font-weight: 650; line-height: 1.25; letter-spacing: -.015em; }
.nov-lista small, .risultati small { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--testo); }
.nov-lista a:hover b, .risultati a:hover b { color: var(--blu-vivo); }
.blog-grande { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; margin-bottom: 20px; }
.blog-grande .nov-foto img { aspect-ratio: 4 / 3; }
.blog-grande .nov-testo { padding: 32px clamp(24px, 4vw, 56px); }
.blog-grande .nov-testo b { font-size: clamp(26px, 2.6vw, 36px); }

/* Invito all'azione: tessera bianca centrata */
.cta-riga { max-width: 980px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 64px); border-radius: var(--r-grande); background: var(--bianco); text-align: center; }
.cta-riga p { margin: 0 auto; max-width: 30em; font-family: var(--titoli); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.28; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.cta-riga p strong { color: var(--blu); }
.cta-riga .pill { margin-top: 24px; }

/* Ricerca e 404 */
.cerca { display: flex; gap: 10px; max-width: 560px; margin: 8px auto 0; }
.cerca input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 13px 20px; border: 1px solid var(--filo); border-radius: 999px; background: var(--bianco); }
.cerca input:focus { outline: 3px solid rgba(0, 105, 173, .35); outline-offset: 0; border-color: var(--blu-vivo); }
.vuoto { text-align: center; }
.vuoto p { margin: 0 0 24px; font-size: 21px; color: var(--testo); }
.vuoto a { color: var(--blu-vivo); text-decoration: underline; }
.risultati { margin-top: 32px; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px; }
.nav-links .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; background: var(--bianco); font-weight: 600; }
.nav-links .current { background: var(--blu-vivo); color: #fff; }

/* --------------------------------------------------------------------------
   Chiusura «Come possiamo aiutarti?» e pagina Contatti
   -------------------------------------------------------------------------- */
.chiusura-testa { margin-bottom: clamp(36px, 4.5vw, 60px); }
.chiusura-testa .chiusura-frase { margin-top: 14px; }
.chiusura-frase strong { color: var(--blu); font-weight: 600; }
.chiusura-griglia { max-width: 1240px; margin-inline: auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "info modulo" "recapiti modulo"; column-gap: clamp(32px, 5vw, 72px); align-items: start; }
.chiusura-info { grid-area: info; }
.chiusura-recapiti { grid-area: recapiti; }
.chiusura-modulo { grid-area: modulo; }
.chiusura-griglia.senza-modulo { grid-template-areas: "info recapiti"; max-width: 980px; margin-inline: auto; }
.chiusura-griglia.senza-modulo .pill { margin-top: 20px; }
.chiusura-info h2 { font-size: clamp(28px, 3vw, 40px); }
.chiusura-info .chiusura-frase { margin: 12px 0 0; font-size: 17px; color: var(--testo); }
.chiusura-7 { margin: 0; font-size: 17px; line-height: 1.45; color: var(--testo); }
.chiusura-7 strong { display: block; margin-bottom: 2px; font-family: var(--titoli); font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.022em; color: var(--blu); }
.contatti-pagina .chiusura-7 { margin-top: 24px; }
.recapiti-righe { list-style: none; margin: 24px 0 0; padding: 0; }
.recapiti-righe a { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filo-chiaro); font-family: var(--titoli); font-size: 21px; font-weight: 650; letter-spacing: -.015em; transition: color .2s; }
.recapiti-righe li:first-child a { border-top: 1px solid var(--filo-chiaro); }
.recapiti-righe a:hover { color: var(--blu-vivo); }
.recapiti-righe .i { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--ghiaccio); color: var(--blu-vivo); }
.recapiti-righe .i.wa { background: #E3F8EA; color: #12A150; }
.recapiti-righe small { display: block; font-family: var(--corpo); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
.orari-righe { margin: 20px 0 0; }
.orari-righe div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 8px 0; font-size: 15px; }
.orari-righe dt { color: var(--muted); }
.orari-righe dd { margin: 0; font-weight: 600; }
.promesse-riga { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: 600; color: var(--blu); }
.promesse-riga li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 8px; border-radius: 999px; background: var(--fondo); }
.promesse-riga .i { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--giallo); color: var(--blu); }
.chiusura-invito { margin: 0 0 18px; color: var(--testo); }
.chiusura-griglia.senza-modulo .chiusura-invito { margin-top: 16px; }
.chiusura-modulo .modulo { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-grande); background: var(--fondo); }
.contatti-pagina .chiusura-modulo .modulo { background: var(--bianco); box-shadow: var(--ombra); }
.chiusura-social { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--filo-chiaro); }
.chiusura-social p { margin: 0 0 10px; font-size: 16px; color: var(--testo); }
.chiusura-social strong { color: var(--ink); }
.chiusura-social a { display: inline-flex; align-items: center; gap: 8px; margin-right: 18px; min-height: 44px; font-weight: 600; color: var(--blu-vivo); }

/* Selettore «Preventivo | Chatbot» sopra il modulo (inc/chatbot.php, tema.js). Richiesta dell'utente del 24/09/2026:
   «un selettore sui preventivi che di default è sui preventivi, se selezionato il chatbot che risponde alle domande».
   Controllo a due segmenti come quelli dei siti Apple; la scelta attiva è bianca, col testo blu. Compare solo con JavaScript. */
.scelta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0 0 22px; padding: 3px; border-radius: 999px; background: rgba(118, 118, 128, .12); }
.scelta[hidden] { display: none; }
.scelta button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px;
	border: 0; border-radius: 999px; background: transparent; color: var(--testo);
	font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color .25s, color .25s, box-shadow .25s;
}
.scelta button .i { width: 18px; height: 18px; flex: none; }
.scelta button:hover { color: var(--blu-vivo); }
.scelta button[aria-selected="true"] { background: #fff; color: var(--blu); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
.scelta button:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 2px; }
.scelta-pannello[hidden] { display: none; }
.chatbot-carica, .chatbot-riserva { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.chatbot-riserva { color: var(--testo); }

/* Chatbot AI Engine incorporato nel riquadro del modulo: il vestito poggia sul tema «messages» del plugin, con i colori del sito.
   Lo stesso metodo del sito di Homing Pisa (verificato lì sul markup vero del plugin): si parte dal contenitore che lo shortcode
   stampa, e :not(#_) vale come un id, così queste regole battono le variabili che il plugin mette sull'id del chatbot e le sue
   regole a sole classi; !important solo dove ce l'ha il plugin. */
.chatbot { --chat-altezza: 340px; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-chat {
	--mwai-fontFamily: inherit;
	--mwai-fontSize: 16px;
	--mwai-fontColor: var(--testo);
	--mwai-spacing: 12px;
	--mwai-borderRadius: 14px;
	--mwai-borderColor: var(--filo);
	--mwai-backgroundPrimaryColor: var(--bianco);
	--mwai-backgroundSecondaryColor: #fff;
	--mwai-backgroundHeaderColor: var(--blu);
	--mwai-headerColor: #fff;
	--mwai-headerButtonsColor: #fff;
	--mwai-aiAvatarBackgroundColor: var(--blu);
	--mwai-userAvatarBackgroundColor: var(--azzurro);
	--mwai-maxHeight: var(--chat-altezza);
	position: static; display: block; width: 100%; max-width: none; margin: 0; padding: 0;
	background: transparent; border: 0; border-radius: 0; box-shadow: none;
	color: var(--testo); font-size: 16px; line-height: 1.5;
}
.chatbot .mwai-chatbot-container:not(#_) .mwai-chat, .chatbot .mwai-chatbot-container:not(#_) .mwai-chat * { font-family: inherit; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-window-box { position: static; width: auto; max-width: none; height: auto; max-height: none; margin: 0; padding: 0; background: transparent; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-header,
.chatbot .mwai-chatbot-container:not(#_) .mwai-trigger { display: none !important; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-body { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--testo); }
/* la conversazione: un riquadro bianco che scorre dentro di sé */
.chatbot .mwai-chatbot-container:not(#_) .mwai-conversation {
	display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
	height: var(--chat-altezza) !important; max-height: none !important; overflow-y: auto; overscroll-behavior: contain;
	margin: 0; padding: 18px; background: var(--bianco); border: 0; border-radius: 18px; box-shadow: none;
}
.contatti-pagina .chatbot .mwai-chatbot-container:not(#_) .mwai-conversation { background: var(--fondo); }
/* le bolle, come nei messaggi: grigia per l'assistente, blu per chi scrive; niente nomi, avatar e tasti sotto la bolla */
.chatbot .mwai-chatbot-container:not(#_) .mwai-reply {
	display: block; max-width: 88%; margin: 0; padding: 10px 15px;
	background: #E9E9EB; border: 0; border-radius: 18px 18px 18px 6px; box-shadow: none;
	color: var(--ink); font-size: 16px; line-height: 1.45; text-align: left;
}
.chatbot .mwai-chatbot-container:not(#_) .mwai-reply.mwai-user { align-self: flex-end; background: var(--blu-vivo); border-radius: 18px 18px 6px 18px; color: #fff; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-reply .mwai-name,
.chatbot .mwai-chatbot-container:not(#_) .mwai-reply .mwai-reply-actions,
.chatbot .mwai-chatbot-container:not(#_) .mwai-reply::before,
.chatbot .mwai-chatbot-container:not(#_) .mwai-reply::after { display: none !important; content: none !important; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-reply > div:not(.mwai-reply-actions),
.chatbot .mwai-chatbot-container:not(#_) .mwai-reply .mwai-text { display: block; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; color: inherit; font-size: inherit; line-height: inherit; }
/* il testo in markdown dell'assistente: titoletti e grassetti restano del corpo della bolla, non dei titoli della pagina */
.chatbot .mwai-chatbot-container:not(#_) .mwai-text :is(p, ul, ol, pre, blockquote) { margin: 0; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-text :is(p, ul, ol, pre, blockquote) + :is(p, ul, ol, pre, blockquote) { margin-top: 8px; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-text :is(ul, ol) { padding-left: 1.2em; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-text li + li { margin-top: 3px; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-text :is(h1, h2, h3, h4, h5, h6) { margin: 10px 0 2px; font-family: inherit; font-size: 1em; font-weight: 700; line-height: 1.4; letter-spacing: 0; text-transform: none; color: inherit; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-text :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-text :is(h1, h2, h3, h4, h5, h6)::before { content: none; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-text a { color: var(--blu-vivo); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-reply.mwai-user .mwai-text a { color: #fff; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: .92em; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-text :is(th, td) { padding: 4px 8px; border: 1px solid var(--filo); text-align: left; }
/* campo e tasto: la pillola bianca col bordo dei campi del modulo e un tondo blu con la freccia; 16 px nel campo (iOS non ingrandisce) */
.chatbot .mwai-chatbot-container:not(#_) .mwai-input { display: flex; flex-direction: row; align-items: flex-end; gap: 10px; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-text { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; overflow: hidden; background: #fff; border: 1px solid #86868B; border-radius: 24px; box-shadow: none; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-text:focus-within { outline: 3px solid rgba(0, 105, 173, .35); outline-offset: 0; border-color: var(--blu-vivo); }
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-text textarea {
	display: block; flex: 1 1 auto; width: 100%; min-height: 46px; max-height: 150px; margin: 0; padding: 12px 18px;
	background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: none; resize: none;
	color: var(--ink); font-size: 16px; font-weight: 400; line-height: 22px;
}
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-text textarea::placeholder { color: #6E6E73; opacity: 1; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-submit {
	position: relative; inset: auto; display: grid; place-items: center; flex: none; /* il plugin lo mette in assoluto con un bottom calcolato: qui sta in riga col campo */
	width: 48px !important; height: 48px !important; min-width: 48px !important; min-height: 48px !important; margin: 0 !important; padding: 0;
	background: var(--blu-vivo); border: 0; border-radius: 50%; box-shadow: none; color: #fff; transform: none !important;
	font-size: 0; line-height: 0; cursor: pointer;
}
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-submit > * { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-submit::before {
	content: ""; width: 22px; height: 22px; background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-submit:not(.mwai-busy)::before { animation: none !important; transform: none !important; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-submit.mwai-busy::before { box-sizing: border-box; width: 20px; height: 20px; border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; background: none; -webkit-mask: none; mask: none; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-submit:hover { background: var(--blu); }
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-submit:disabled { opacity: 1; background: var(--blu-vivo); cursor: default; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-input-submit:focus-visible { outline: 3px solid var(--azzurro); outline-offset: 2px; }
/* l'avviso sotto il campo (assistente automatico, dati personali, privacy): piccolo e grigio, il link sottolineato */
.chatbot .mwai-chatbot-container:not(#_) .mwai-compliance { margin: 10px 0 0; padding: 0; background: none; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: left; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-compliance a { color: var(--blu-vivo); text-decoration: underline; }
.chatbot .mwai-chatbot-container:not(#_) .mwai-footer { margin: 0; padding: 0; background: none; border: 0; }
@media (max-width: 767px) { .chatbot { --chat-altezza: min(52vh, 380px); } }
@media (prefers-reduced-motion: reduce) { .chatbot .mwai-chatbot-container:not(#_) .mwai-input-submit.mwai-busy::before { animation: none !important; } }
.nota-modulo { margin: 0; }
.dove h2 { margin-bottom: 32px; text-align: center; }
.mappa { position: relative; min-height: 420px; overflow: hidden; border-radius: var(--r-grande); background: var(--bianco); }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mappa-riserva { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px); min-height: 420px; background: var(--bianco); }
.mappa-riserva img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.mappa-riserva > div { padding: 32px 40px 32px 0; }
.mappa-riserva p { margin: 0 0 14px; color: var(--testo); }
.mappa-riserva p strong { font-family: var(--titoli); font-size: 24px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.mappa-riserva a:not(.pill) { color: var(--blu-vivo); text-decoration: underline; }
/* Dopo il consenso iubenda carica la mappa: la riserva sparisce. */
.mappa:has(iframe:not([src="about:blank"])) .mappa-riserva { display: none; }

/* --------------------------------------------------------------------------
   Contact Form 7 (modulo 1298, stessa configurazione di oggi: righe .row / colonne .col-md-*)
   -------------------------------------------------------------------------- */
.wpcf7 form { display: grid; gap: 18px; }
.wpcf7 p { margin: 0; }
.wpcf7 .hidden-fields-container { display: none; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wpcf7 .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wpcf7 .row:has(.col-md-12) { grid-template-columns: 1fr; }
.wpcf7 .row[style] { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start !important; text-align: left !important; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea {
	width: 100%; font: inherit; font-size: 17px; font-weight: 400; color: var(--ink);
	background: #fff; border: 1px solid #86868B; border-radius: 12px; padding: 14px 16px;
	transition: border-color .2s, box-shadow .2s;
}
.wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: #6E6E73; opacity: 1; }
.wpcf7 textarea { height: 140px; min-height: 120px; resize: vertical; }
.wpcf7 .etichetta { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.nota-obbligatori { margin: 0; font-size: 14px; color: var(--muted); }
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: 0; border-color: var(--blu-vivo); box-shadow: 0 0 0 4px rgba(0, 105, 173, .25); }
/* Codice di verifica: etichetta, immagine e campo uno sotto l'altro; la privacy si allinea al campo */
.wpcf7 .col-md-6:has(.wpcf7-captchar) > p { display: grid; gap: 8px; justify-items: start; }
.wpcf7 .col-md-6:has(.wpcf7-captchar) .etichetta { margin: 0; }
.wpcf7-captchac { border-radius: 6px; border: 1px solid var(--filo); height: 40px; width: auto; }
.wpcf7 .col-md-6:has(.wpcf7-captchar) .wpcf7-form-control-wrap { width: 100%; }
.wpcf7 .row:has(.wpcf7-captchar) { align-items: end; }
.wpcf7 .row[style] br { display: none; }
.wpcf7-acceptance .wpcf7-list-item { margin: 0; }
.wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 12px; color: var(--muted); font-size: 15px; }
.wpcf7-acceptance input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blu-vivo); flex: none; }
.wpcf7-acceptance a { color: var(--blu-vivo); text-decoration: underline; }
.wpcf7-submit { min-height: 52px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--blu-vivo); color: #fff; font-family: inherit; font-weight: 500; font-size: 17px; line-height: 1.2; cursor: pointer; transition: background-color .25s; }
.wpcf7-submit:hover { background: var(--blu); }
.wpcf7-submit:disabled { opacity: .6; cursor: not-allowed; }
.wpcf7-spinner { display: none; width: 22px; height: 22px; margin-left: 14px; border: 3px solid var(--filo); border-top-color: var(--blu-vivo); border-radius: 50%; vertical-align: middle; }
.wpcf7 form.submitting .wpcf7-spinner { display: inline-block; animation: sr-giro .8s linear infinite; }
.wpcf7 form.submitting .wpcf7-submit { opacity: .6; pointer-events: none; }
@keyframes sr-giro { to { transform: rotate(360deg); } }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--errore); font-size: 14px; font-weight: 600; }
.wpcf7 .wpcf7-form-control.wpcf7-not-valid { border-color: var(--errore); border-width: 2px; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--filo); font-weight: 600; }
.wpcf7 form.sent .wpcf7-response-output { border-color: #9ACFAE; background: #EFF7F1; color: var(--ok); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: #F1B3AC; background: #FDF3F2; color: var(--errore); }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
/* Badge nascosto: al suo posto la dicitura reCAPTCHA sotto il modulo (sr_modulo), come chiede Google. */
.grecaptcha-badge { visibility: hidden; }
.nota-recaptcha { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.nota-recaptcha a { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Piè di pagina chiaro, testo piccolo, come i siti Apple
   -------------------------------------------------------------------------- */
.ft { padding: 8px 0 28px; background: var(--fondo); color: var(--muted); font-size: 13px; line-height: 1.5; letter-spacing: 0; }
.ft .briciole { padding: 16px 0; border-bottom: 1px solid var(--filo); }
.briciole ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.briciole li { display: inline-flex; align-items: center; }
.briciole li + li::before { content: ""; width: 7px; height: 7px; margin: 0 12px 0 9px; border-top: 1.5px solid #86868B; border-right: 1.5px solid #86868B; transform: rotate(45deg); }
.briciole a { color: var(--testo); }
.briciole a:hover { color: var(--blu-vivo); text-decoration: underline; }
.briciole [aria-current] { color: var(--muted); }
.briciole-casa { display: inline-flex; min-height: 32px; align-items: center; }
.ft .cols { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; padding: 32px 0 28px; border-bottom: 1px solid var(--filo); }
.ft-logo { height: 38px; width: auto; }
.ft-marchio p { margin: 14px 0 0; max-width: 34ch; }
.ft h2 { margin: 0 0 10px; font-family: var(--corpo); font-size: 13px; line-height: 1.4; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.ft ul { margin: 0; padding: 0; list-style: none; }
.ft li + li { margin-top: 6px; }
.ft a { color: var(--testo); }
.ft a:hover { color: var(--blu-vivo); text-decoration: underline; }
.ft .legale { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; padding-top: 18px; }
.link-legali { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.ft .legale a { text-decoration: none; }
.ft .legale a:hover { text-decoration: underline; }

.dock { display: none; }
.dock .bot { display: none; }
/* Chat a tutto schermo (telefono), dal tasto dell'assistente nella fascia in basso: sr_chat_schermo() in inc/chatbot.php.
   tema.js ne adatta altezza e posizione alla parte visibile dello schermo (anche con la tastiera aperta). */
.chat-schermo { position: fixed; top: 0; left: 0; right: 0; z-index: 70; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--fondo); }
.chat-schermo[hidden] { display: none; }
.chat-schermo-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: calc(8px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); background: #fff; border-bottom: 1px solid var(--filo); }
.chat-schermo-titolo { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--ink); outline: none; }
.chat-schermo-sotto { margin: 1px 0 0; font-size: 13px; line-height: 1.35; color: var(--muted); }
.chiudi-chat { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--fondo); color: var(--ink); cursor: pointer; }
.chiudi-chat .i { width: 22px; height: 22px; }
.chiudi-chat:focus-visible { outline: 3px solid var(--blu-vivo); outline-offset: 2px; }
.chat-schermo-corpo { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 12px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.chat-schermo .chatbot .mwai-chatbot-container:not(#_) .mwai-conversation { background: #fff; }
html.chat-aperta, html.chat-aperta body { overflow: hidden; }
html.chat-aperta .dock { display: none !important; }

/* --------------------------------------------------------------------------
   Banner dei cookie (iubenda), discreto — richiesta dell'utente del 24/09/2026
   Stesso widget e stesse impostazioni di iubenda: testo, pulsanti e consenso non cambiano,
   cambia solo l'aspetto. Come chiede il Garante il banner resta visibile al primo accesso,
   con «Accetta» e «Rifiuta» uguali e il link alla cookie policy.
   iubenda scrive le sue regole con un id e !important: le nostre ripetono l'id
   (o aggiungono :not(#_)) per contare di più.
   -------------------------------------------------------------------------- */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-container {
	width: 400px !important; max-width: calc(100vw - 32px) !important; margin: 0 auto 16px 16px !important;
	background: rgba(255, 255, 255, .96) !important; border-radius: 18px !important;
	box-shadow: 0 12px 36px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .06) !important; overflow: hidden !important;
}
#iubenda-cs-banner#iubenda-cs-banner [class^="iub"], #iubenda-cs-banner#iubenda-cs-banner [class*=" iub"] { font-family: inherit !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-rationale { width: auto !important; margin: 0 !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-rationale::before { display: none !important; }
/* iubenda scrive colore e misura del testo dentro l'elemento .iubenda-cs-content: si cambiano sul livello sotto */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-banner-content { padding: 16px 18px 12px !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; color: var(--muted) !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-banner-content div:first-child { margin-top: 0 !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-banner-content strong { color: var(--testo) !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-banner-content a { color: var(--blu-vivo) !important; text-underline-offset: 2px; }
/* Pulsanti: «Scopri di più e personalizza» come link, «Rifiuta» e «Accetta» uguali e piccoli */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group { flex-direction: row !important; align-items: center !important; column-gap: 8px !important; row-gap: 6px; margin: 0 18px 12px !important; color: inherit !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group-custom { order: 1 !important; margin: 0 auto 0 0 !important; align-self: center !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group-consent { order: 2 !important; margin: 0 0 0 auto !important; align-self: center !important; column-gap: 6px !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button {
	flex: none !important; width: auto !important; min-width: 86px !important; height: 34px !important; margin: 0 !important; padding: 0 16px !important;
	border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 34px !important;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn,
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn { background: var(--blu-vivo) !important; color: #fff !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-accept-btn:hover,
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-reject-btn:hover { background: var(--blu) !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn {
	min-width: 0 !important; padding: 0 !important; background: none !important; color: var(--muted) !important; font-weight: 500 !important;
	text-decoration: underline !important; text-underline-offset: 3px;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button:focus-visible { outline: 3px solid var(--azzurro) !important; outline-offset: 2px !important; }
/* Marchio iubenda: resta (fa parte del servizio), piccolo e in fondo alla scheda */
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-brand-badge-outer { order: 3 !important; height: auto !important; float: none !important; margin: -4px 18px 10px auto !important; }
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-brand-badge {
	margin: 0 !important; padding: 0 18px 0 0 !important; border: 0 !important; box-shadow: none !important;
	background-color: transparent !important; background-size: 14px !important; background-position: right center !important;
	font-size: 10.5px !important; color: var(--muted) !important; opacity: .75;
}
#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-brand-badge > span { border-right: 0 !important; padding-right: 4px !important; }
/* Dopo la scelta: il pulsante per cambiare le preferenze diventa un cerchietto tenue */
.iubenda-tp-btn:not(#_)[data-tp-float] {
	width: 32px !important; min-width: 32px !important; height: 32px !important; line-height: 32px !important; margin: 14px !important;
	border-radius: 50% !important; background-size: 32px 32px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .14) !important;
	opacity: .8; transition: opacity .2s;
}
.iubenda-tp-btn:not(#_)[data-tp-float]:hover, .iubenda-tp-btn:not(#_)[data-tp-float]:focus-visible { opacity: 1; }
@media (max-width: 980px) {
	/* Scheda in basso al centro, larga quanto la barra WhatsApp / Chiama (che resta sotto finché non si sceglie) */
	#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-container { width: calc(100% - 20px) !important; max-width: 560px !important; margin: 0 auto calc(10px + env(safe-area-inset-bottom)) !important; }
	/* Su telefono e tablet il cerchietto si toglierebbe spazio con la barra: le preferenze
	   restano sempre raggiungibili dal link «Preferenze cookie» del piè di pagina */
	.iubenda-tp-btn:not(#_)[data-tp-float] { display: none !important; }
}
@media (max-width: 639px) {
	/* Telefono: tutto il testo resta visibile. iubenda non registra la scelta finché il testo del banner
	   non è stato letto fino in fondo: se il testo scorresse, «Rifiuta» e «Accetta» vorrebbero due tocchi. */
	#iubenda-cs-banner#iubenda-cs-banner .iubenda-banner-content { padding: 12px 14px 8px !important; font-size: 12px !important; line-height: 1.45 !important; }
	/* link a sinistra, «Rifiuta» e «Accetta» a destra; se non c'è posto i pulsanti vanno sotto */
	#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group { flex-wrap: wrap !important; margin: 0 14px 8px !important; row-gap: 8px; }
	#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button { min-width: 72px !important; padding: 0 12px !important; font-size: 12.5px !important; }
	#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-opt-group button.iubenda-cs-customize-btn { min-width: 0 !important; padding: 0 !important; font-size: 12px !important; }
	#iubenda-cs-banner#iubenda-cs-banner .iubenda-cs-brand-badge-outer { margin: -2px 14px 8px auto !important; }
}

/* --------------------------------------------------------------------------
   Comparsa morbida delle sezioni mentre si scorre (come i siti Apple). Solo con JavaScript (tema.js aggiunge
   html.anima e segna gli elementi); senza JavaScript, con «riduci movimento» e in stampa tutto è subito visibile.
   La testata non si anima: è il primo contenuto della pagina.
   -------------------------------------------------------------------------- */
html.anima [data-rivela] { opacity: 0; transform: translateY(32px); transition: opacity .9s var(--curva), transform .9s var(--curva); transition-delay: var(--ritardo, 0s); }
html.anima [data-rivela].visto { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
/* la barra resta in equilibrio anche quando lo spazio cala: sotto i 1071 px a sinistra restano le sole icone
   (i nomi restano per i lettori di schermo e nel suggerimento al passaggio del mouse) */
@media (max-width: 1360px) {
	.hd-destra { gap: 14px; }
}
@media (max-width: 1070px) {
	.hd, .hd-destra { column-gap: 16px; }
	.hd-sinistra { gap: 14px; }
	.hd-info, .nav-voci { gap: 6px; }
	.hd-link > span:not(.nascosto) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.hd-link { justify-content: center; min-width: 36px; }
	.hd-link .i { width: 20px; height: 20px; }
}
@media (max-width: 1080px) {
	.passi:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.colonne-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ft .cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ft-marchio { grid-column: 1 / -1; }
	.servizi-nav ul { justify-content: flex-start; }
}
@media (max-width: 980px) {
	:root { --barra: 56px; --fila: 56px; }
	.nav, .hd-wa, .hd-cta, .hd-info { display: none; } /* sul telefono indirizzo (con Google Maps) e orari sono nel menu */
	.hd-destra { gap: 8px; }
	.hd .logo img { height: 36px; }
	.tondo { display: grid; }
	.chiusura-griglia, .novita, .blog-grande, .corpo-art.con-aside { grid-template-columns: minmax(0, 1fr); }
	.eroe-foto { height: clamp(260px, 44vw, 400px); }
	.art-aside { position: static; }
	.eroe .azioni { display: flex; } /* su tablet e telefono la barra in cima non ha i pulsanti: qui resta il preventivo */
	.edit, .edit-destra { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.edit-testo, .edit-destra .edit-testo { grid-column: 1; grid-row: auto; }
	.edit-media, .edit-destra .edit-media { grid-column: 1; grid-row: auto; justify-items: stretch; }
	.edit-media:has(.figura-piccola) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; }
	.edit-foto:not(.is-piccola) { max-width: none; }
	.edit-foto:not(.is-piccola) img { aspect-ratio: 16 / 10; }
	.schede-normale:has(> :nth-child(4):last-child), .schede-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sapere-3 { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
	.corpo-art.con-aside { row-gap: clamp(32px, 5vw, 48px); }
	.corpo-art.con-aside .art-aside { grid-template-columns: minmax(0, 1fr); }
	.corpo-art.con-aside .art-aside:has(.numero-grande):has(.art-figura) { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
	.chiusura-griglia, .chiusura-griglia.senza-modulo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "modulo" "recapiti"; row-gap: 32px; }
	.mappa-riserva { grid-template-columns: minmax(0, 1fr); }
	.mappa-riserva img { min-height: 0; max-height: 360px; aspect-ratio: 3 / 2; object-position: 50% 40%; }
	.mappa-riserva > div { padding: 0 24px 28px; }
	.ft .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* Pulsanti fissi WhatsApp + Chiama: da tablet in giù (sopra i 980 px c'è WhatsApp nella barra in cima).
	   Qui ciò che è comune; il telefono ha la fascia bianca in basso, il tablet i pulsanti compatti a destra (più sotto). */
	.dock { display: flex; gap: 8px; position: fixed; z-index: 50; }
	.dock a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
	.dock .wa-btn { background: var(--wa); color: var(--wa-testo); }
	.dock .wa-btn:active { background: #1FBE5A; }
	.dock .i { width: 22px; height: 22px; flex: none; }
	.menu-aperto .dock { display: none; }
	/* Mentre si scrive nel modulo la barra si toglie di mezzo (tastiera aperta) */
	html:has(.wpcf7 :is(input, textarea):focus) .dock { display: none; }
}
/* Computer (mouse): non si può chiamare direttamente. Il numero resta da leggere ovunque,
   ma non è un pulsante né un collegamento; nei pulsanti fissi in basso (finestra stretta) resta solo WhatsApp. */
@media (hover: hover) and (pointer: fine) {
	a[href^="tel:"] { pointer-events: none; cursor: text; }
	.dock .call { display: none; }
}
/* Telefono (fino a 767 px): fascia bianca attaccata al bordo in basso dello schermo, con WhatsApp e Chiama affiancati
   e larghi uguali, come su Homing Pisa (utente, 27/09/2026: «in basso proprio sul limite inferiore dello schermo insieme
   al tasto … chiama», «come quella di homingpisa, una fascia bassa con i due tasti e lo sfondo bianco»). Sull'iPhone
   la fascia arriva fino al bordo e i pulsanti restano sopra la linea di sistema (safe-area). Nella fascia la scritta è
   «WhatsApp»: «Scrivici su» resta per i lettori di schermo. Col mouse (finestra stretta) c'è solo WhatsApp, a tutta larghezza. */
@media (max-width: 767px) {
	html { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
	.ft { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
	.dock {
		left: 0; right: 0; bottom: 0;
		padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
		background: rgba(255, 255, 255, .97); border-top: 1px solid var(--filo); box-shadow: 0 -2px 12px rgba(0, 0, 0, .05);
	}
	.dock a { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 6px 14px; font-size: 16px; }
	.dock .call { background: var(--blu-vivo); color: #fff; }
	.dock .call:active { background: #005A94; }
	/* il tasto dell'assistente, tondo, a destra di Chiama (utente, 27/09/2026: «il simbolo del bot va a destra di chiama») */
	.dock .bot:not([hidden]) { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--notte); color: #fff; cursor: pointer; }
	.dock .bot:active { background: var(--blu); }
	.dock .bot:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
	/* sui telefoni più stretti i due pulsanti con la scritta stringono un po' per lasciare posto al tondo */
	.dock { container: dock / inline-size; }
	@container dock (max-width: 374px) {
		.dock a { gap: 6px; padding-inline: 8px; font-size: 15px; }
	}
	.dock .lungo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.dock a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
}
/* Col mouse, sotto i 768 px, nella fascia c'è solo WhatsApp: la scritta resta intera, «Scrivici su WhatsApp» */
@media (max-width: 767px) and (hover: hover) and (pointer: fine) {
	.dock .lungo { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
/* Tablet e computer con la finestra stretta (768–980 px): i pulsanti restano compatti in basso a destra, larghi quanto
   la scritta (revisione del 24/09/2026: «il tastone WhatsApp così largo in basso non è bello»). */
@media (min-width: 768px) and (max-width: 980px) {
	html { scroll-padding-bottom: 100px; }
	.ft { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
	.dock { right: calc(24px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); gap: 10px; }
	.dock a { min-height: 52px; padding: 0 24px; font-size: 17px; }
	.dock .wa-btn { gap: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .2); }
	.dock .call { min-width: 52px; padding: 0 20px; background: rgba(255, 255, 255, .9); color: var(--blu-vivo); box-shadow: 0 10px 28px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .06); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
	.dock .i { width: 24px; height: 24px; }
	.dock a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px var(--ink); }
}

@media (max-width: 767px) {
	:root { --r-grande: 22px; --r: 18px; }
	.hd .logo img { height: 26px; }
	.hd { column-gap: 8px; }
	:root { --barra: 52px; --fila: 54px; }
	.servizi-nav ul { gap: 0; }
	.servizi-nav a { min-width: 72px; padding: 0 8px; gap: 4px; font-size: 11px; }
	.servizi-nav .i { width: 22px; height: 22px; }
	/* la reperibilità resta nella barra, accanto al menu */
	.hd-destra { gap: 10px; }
	.hd-reperibili { gap: 8px; }
	.rep-testo strong { font-size: 12px; }
	.rep-coda { font-size: 11px; }
	.rep-punto { width: 8px; height: 8px; }
	.eroe-sez { padding-top: 32px; }
	.eroe .azioni .pill.blu { width: 100%; }
	/* sul telefono una sola immagine: la foto, oppure la tessera blu con l'omino se la pagina non ha foto */
	.eroe-visivo { margin-top: 32px; }
	.eroe-foto { height: 240px; }
	.eroe-foto figcaption { display: none; }
	.promesse { flex-direction: column; align-items: flex-start; gap: 12px; max-width: 320px; }
	.promesse li { font-size: 16px; }
	.promessa-icona { width: 38px; height: 38px; }
	.testa-sez p { font-size: 18px; }
	.prosa ul:has(> li:nth-child(5)) { grid-template-columns: minmax(0, 1fr); }
	.prosa { font-size: 17px; }
	.numeri-riga { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.numeri-grandi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.numeri-grandi > div { padding: 22px 16px; }
	.numeri-grandi strong { font-size: 34px; }
	.spunte, .colonne-2, .colonne-3, .colonne-4, .sapere-1, .sapere-2, .sapere-3, .lista-comp, .passi, .passi:has(> li:nth-child(4):last-child) { grid-template-columns: minmax(0, 1fr); }
	.colonna, .passi li { padding: 26px 22px; }
	.passo-n { font-size: 40px; margin-bottom: 12px; }
	.lista-comp li { padding: 22px; }
	.edit-media:has(.figura-piccola) { grid-template-columns: minmax(0, 1fr); }
	.schede-normale > :last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
	.blog-altre { grid-template-columns: minmax(0, 1fr); }
	.blog-altre .scheda { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
	.blog-altre .scheda-foto { aspect-ratio: 1; height: 100%; }
	.blog-altre .scheda-testo small { display: block; }
	.schede-indice { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.corpo-art.con-aside .art-aside { grid-template-columns: minmax(0, 1fr); }
	.schede-grande { grid-template-columns: minmax(0, 1fr); }
	/* Su telefono le schede stanno in due colonne, con foto e titolo: la pagina si accorcia della metà */
	.schede-normale, .schede-normale:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.schede-normale .scheda-testo { padding: 14px 14px 16px; gap: 4px; }
	.schede-normale .scheda-testo b { font-size: 17px; }
	.schede-normale .scheda-testo small, .schede-normale .scheda-vai, .schede-normale .data { display: none; }
	/* Correlati: una fila da scorrere col dito, senza JavaScript */
	.schede-correlati { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
	.schede-correlati .scheda { scroll-snap-align: start; }
	.galleria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.galleria > .gal-foto:first-child { grid-column: 1 / -1; grid-row: auto; }
	.galleria > .gal-foto:first-child img { aspect-ratio: 4 / 3; }
	.loghi { gap: 8px; }
	.loghi li, .loghi-piccolo li { width: calc((100% - 16px) / 3); height: 64px; border-radius: 14px; }
	.loghi img { max-height: 30px; max-width: 78%; }
	.nov-lista a, .risultati a { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 12px; }
	.nov-mini { width: 84px; height: 84px; }
	.nov-grande .nov-testo { padding: 20px 20px 22px; }
	.nov-testo b { font-size: 22px; }
	.cta-riga { text-align: left; }
	.cta-riga .pill { width: 100%; }
	.chiusura-modulo .modulo { padding: 20px 16px; }
	.recapiti-righe a { font-size: 19px; }
	.wpcf7 .row { grid-template-columns: 1fr; }
	.ft .cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.ft .legale { flex-direction: column; }
}
/* telefoni molto stretti: «Reperibili» e «7 giorni su 7» su due righe, senza «anche nei festivi» */
@media (max-width: 374px) {
	.rep-testo strong { width: 6.6em; white-space: normal; }
	.rep-coda { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	html.anima [data-rivela] { opacity: 1; transform: none; }
}
@media print {
	.hd-reperibili, .hd-info, .servizi-nav, .hd-azioni, .hd .nav, .tondo, .dock, .menu-mobile, .chiusura-modulo, .eroe .azioni, .eroe-visivo, .promesse { display: none !important; }
	.hd-barra { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
	/* Banner dei cookie e pulsante delle preferenze non servono su carta (coprirebbero il testo) */
	#iubenda-cs-banner#iubenda-cs-banner, .iubenda-tp-btn:not(#_) { display: none !important; }
	html.anima [data-rivela] { opacity: 1 !important; transform: none !important; }
	body, .sez-bianca, .sez-scura, .ft { background: none !important; color: #000 !important; }
	/* su carta gli spazi dello schermo sprecherebbero fogli: sezioni e tessere più compatte */
	.sez { padding-block: 20px !important; }
	.eroe-sez { padding: 8px 0 16px !important; }
	.eroe-sez-home h1, .eroe h1 { font-size: 34px !important; }
	.testa-sez, .sez > .wrap > h2 { margin-bottom: 14px !important; }
	.colonna, .passi li, .lista-comp li, .numeri-grandi > div, .cta-riga { padding: 10px 0 !important; }
	.cit-brevi figure { padding: 10px 12px !important; }
	.colonna h3 { margin-top: 8px; }
	/* Su carta il fondo scuro non c'è: i testi pensati per stargli sopra (chiari o semitrasparenti) diventano neri */
	.sez-scura *, .menu-mobile * { color: #000 !important; border-color: #C6D2DC !important; }
	.cit-brevi figure { background: none !important; border: 1px solid #C6D2DC; }
	/* Titoli e cifre sfumati: su carta in blu pieno */
	.sfumato, .numeri-riga strong, .numero-grande strong, .passo-n, .gancio p { background: none !important; color: var(--blu) !important; }
	/* I pulsanti blu (testo bianco) senza sfondo sparirebbero: in stampa hanno bordo e testo nero */
	.pill.blu, .prosa .bottone a { background: none !important; color: #000 !important; border: 1px solid #C6D2DC !important; }
	/* Il foglio è stretto come un telefono: la fila da scorrere col dito tornerebbe tagliata, in stampa è una griglia */
	.schede-correlati { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
	/* Schede, foto e citazioni intere; un titolo non resta da solo in fondo alla pagina */
	.scheda, figure, blockquote, .indice-voce, .recapiti-righe li { break-inside: avoid; }
	h2, h3, .testa-sez { break-after: avoid; }
}