/* =============================================================================
   PROBAR - CHI SIAMO
   -----------------------------------------------------------------------------
   Nero e oro, niente immagini obbligatorie, niente JavaScript.

   TIPOGRAFIA FLUIDA. Tutte le misure che contano usano clamp(), quindi la
   pagina non ha "salti" ai breakpoint: cresce con continuita' da 320px fino
   agli schermi 4K. Il terzo valore di ogni clamp e' il tetto: senza quello,
   su un ultrawide il titolo diventerebbe un manifesto.

   CLS ZERO. Non c'e' nessun elemento che entra in pagina dopo il primo
   disegno: niente immagini senza dimensioni, niente contenuto iniettato,
   niente font che spostano il testo (si eredita quello del tema, gia'
   caricato). L'unico movimento e' l'apertura dei <details>, che parte da un
   gesto dell'utente e quindi non conta come spostamento inatteso.

   ACCESSIBILITA'. Il contrasto del testo secondario e' rgba(255,255,255,.72)
   su #0a0a0a, che supera 4.5:1. L'oro #FFCE53 su nero e' oltre 10:1. Il
   focus da tastiera resta sempre visibile (vedi in fondo).
   ============================================================================= */

.pb-cs {
	/* Gli stessi valori del resto del tema: l'oro e i neri vengono da
	   css/account-ui.css, qui si ripetono per rendere la pagina autonoma
	   anche se un domani cambia l'ordine di caricamento dei fogli. */
	--cs-oro: #FFCE53;
	--cs-oro-tenue: rgba(255, 206, 83, 0.20);
	--cs-fondo: #0a0a0a;
	--cs-pannello: #101010;
	--cs-testo: #ffffff;
	--cs-muto: rgba(255, 255, 255, 0.72);
	--cs-linea: rgba(255, 255, 255, 0.10);
	--cs-ease: cubic-bezier(0.16, 1, 0.30, 1);

	background: var(--cs-fondo);
	color: var(--cs-testo);
	display: block;
}

/* Contenitore: cresce con la finestra ma si ferma a 1180px. Sul 4K il testo
   resta leggibile invece di stendersi per tutto lo schermo. */
.pb-cs__wrap {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 48px);
}

.pb-cs__wrap--stretto {
	max-width: 760px;
}

/* -----------------------------------------------------------------------------
   TIPOGRAFIA
   -------------------------------------------------------------------------- */
.pb-cs .pb-cs__kicker {
	font-size: clamp(11px, 0.9vw, 13px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cs-oro);
	margin: 0 0 clamp(10px, 1.1vw, 14px);
}

.pb-cs .pb-cs__h1 {
	font-size: clamp(30px, 5.2vw, 62px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 clamp(14px, 1.6vw, 22px);
	max-width: 20ch;
}

.pb-cs .pb-cs__h2 {
	/* La specificita' serve: Astra scrive i margini dei titoli con
	   .entry-content h2, che batteva la classe sola e dava 29 px invece
	   dei 22 scritti qui. Misurato il 3 settembre 2026. */
	font-size: clamp(24px, 3.4vw, 42px);
	line-height: 1.16;
	margin: 0 0 clamp(12px, 1.4vw, 18px);
	max-width: 24ch;
}

.pb-cs__h2--centro {
	margin-inline: auto;
	text-align: center;
	max-width: 20ch;
}

.pb-cs__h3 {
	font-size: clamp(18px, 1.9vw, 24px);
	line-height: 1.25;
	margin: 0;
}

.pb-cs__h4 {
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.3;
	margin: 0 0 6px;
}

.pb-cs .pb-cs__lead {
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.6;
	color: var(--cs-muto);
	margin: 0 0 clamp(18px, 2.2vw, 26px);
	max-width: 56ch;
}

.pb-cs .pb-cs__testo {
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.75;
	color: var(--cs-muto);
	margin: 0 0 1.1em;
	max-width: 66ch;
}

/* -----------------------------------------------------------------------------
   HERO
   Il fondo e' un alone dorato disegnato in CSS: nessun file da scaricare,
   quindi non entra nel calcolo dell'LCP e non puo' spostare niente.
   -------------------------------------------------------------------------- */
.pb-cs__hero {
	position: relative;
	padding-block: clamp(48px, 6.5vw, 92px);
	background-color: var(--cs-fondo);
	background-image:
		radial-gradient(120% 80% at 50% 0%, rgba(255, 206, 83, 0.10) 0%, rgba(255, 206, 83, 0) 60%);
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--cs-linea);
}

.pb-cs__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: clamp(20px, 2.8vw, 32px);
}

.pb-cs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px; /* bersaglio comodo anche col pollice */
	padding: 12px clamp(18px, 2.2vw, 28px);
	border-radius: 999px;
	font-size: clamp(14px, 1.1vw, 16px);
	text-decoration: none;
	transition: background-color 0.3s var(--cs-ease), border-color 0.3s var(--cs-ease), color 0.3s var(--cs-ease);
}

.pb-cs__btn--oro {
	background: var(--cs-oro);
	color: #0a0a0a;
	border: 1px solid var(--cs-oro);
	font-weight: 600;
}

.pb-cs__btn--oro:hover,
.pb-cs__btn--oro:focus-visible {
	background: #ffd979;
	color: #0a0a0a;
}

.pb-cs__btn--linea {
	background: transparent;
	color: var(--cs-testo);
	border: 1px solid var(--cs-linea);
}

.pb-cs__btn--linea:hover,
.pb-cs__btn--linea:focus-visible {
	border-color: var(--cs-oro);
	color: var(--cs-oro);
}

/* I tre fatti: anno, anni di attivita', citta'. Sono anche il boccone piu'
   facile da estrarre per un motore generativo che deve rispondere "chi e'". */
.pb-cs__fatti {
	list-style: none;
	margin: 0;
	padding: clamp(20px, 2.5vw, 28px) 0 0;
	border-top: 1px solid var(--cs-linea);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: clamp(16px, 2.4vw, 32px);
	max-width: 640px;
}

.pb-cs__fatti li {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pb-cs__fatti strong {
	font-size: clamp(22px, 2.6vw, 32px);
	color: var(--cs-oro);
	line-height: 1;
	font-weight: 600;
}

.pb-cs__fatti span {
	font-size: clamp(12px, 1vw, 14px);
	color: var(--cs-muto);
}

/* =============================================================================
   LA CARTA DELLE ROTTE
   -----------------------------------------------------------------------------
   Reticolo di meridiani e paralleli, archi che partono da Roma, un punto su
   ogni paese servito. Tutto in un solo SVG generato dal server: nessuna
   libreria, nessuna immagine, e il file non pesa perche' sono linee.

   Le animazioni sono le uniche della pagina e sono tutte CSS, quindi girano
   sul compositor e non impegnano il filo principale: non toccano l'INP.
   ============================================================================= */
.pb-map {
	margin-top: clamp(20px, 2.6vw, 32px);
}

.pb-map__tela {
	position: relative;
	border: 1px solid var(--cs-linea);
	border-radius: 16px;
	background:
		radial-gradient(60% 90% at 50% 40%, rgba(255, 206, 83, 0.05) 0%, rgba(255, 206, 83, 0) 70%),
		#080808;
	padding: clamp(10px, 1.6vw, 20px);
	overflow: hidden;
}

.pb-map__svg {
	display: block;
	width: 100%;
	height: auto; /* il viewBox 2:1 riserva l'altezza: nessuno spostamento */
}

/* -----------------------------------------------------------------------------
   LA CAMERA - lo zoom dall'Italia all'Europa
   Tutta la carta vive in un <g> il cui perno di trasformazione e' Roma.
   Con JavaScript attivo la carta parte stretta sull'Italia (scale 3) e,
   quando la sezione entra nello schermo, si allarga fino all'Europa con la
   stessa curva "burrosa" del resto del tema. E' un transform: gira sul
   compositor, non tocca il layout, CLS zero per costruzione.
   SENZA JavaScript la classe pb-map--js non viene mai scritta e la carta
   sta ferma sull'Europa intera: nessuno resta bloccato a meta' zoom.
   -------------------------------------------------------------------------- */
/* Dal 3 settembre 2026 lo zoom non e' piu' qui: e' un animateTransform SVG
   dentro la carta (v. inc/abm-chi-siamo-mappa.php), col perno su Roma per
   costruzione. Il transform-origin CSS puntava 5.600 px fuori dalla tela. */

/* LE TERRE. Contorno in oro, dichiarato: e' la carta stessa a essere il
   pezzo di lusso quieto. Il riempimento resta un velo, cosi' i punti degli
   ordini, che sono il soggetto, tengono il primo piano. */
.pb-map__terre polygon {
	fill: rgba(255, 206, 83, 0.05);
	stroke: rgba(255, 206, 83, 0.40);
	stroke-width: 1;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* Il reticolo resta un'ombra: deve dare la scala, non attirare lo sguardo.
   vector-effect: non-scaling-stroke e' la chiave di tutta la carta: il
   viewBox ritaglia l'Europa e ingrandisce di oltre cinque volte, quindi una
   linea da 1 unita' diventerebbe un tratto grosso. Con questa proprieta' lo
   spessore si misura in pixel di schermo e resta sottile a qualunque zoom. */
.pb-map__reticolo line {
	stroke: rgba(255, 255, 255, 0.07);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* Le rotte si disegnano da sole all'apertura, poi restano. */
.pb-map__rotta {
	fill: none;
	stroke: rgba(255, 206, 83, 0.45);
	stroke-width: 1.1;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	/* La lunghezza va commisurata al riquadro europeo: gli archi ora sono
	   lunghi decine di unita', non centinaia. */
	/* pathLength="1" sul path: il tratteggio vale 1 = tutta la rotta,
	   corta o lunga che sia. Con 220 px fissi le rotte lunghe si spezzavano. */
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	animation: pb-map-traccia 1.3s cubic-bezier(0.16, 1, 0.30, 1) forwards;
	animation-delay: var(--pb-ritardo, 0s);
}

/* Con JavaScript lo spessore NON e' piu' in pixel di schermo: con
   vector-effect: non-scaling-stroke il browser misura anche il tratteggio
   in pixel e ignora pathLength, quindi le rotte uscivano come linee
   punteggiate da un pixel e l'animazione non disegnava niente. Lo spessore
   in unita' della carta lo calcola il JavaScript dalla larghezza vera del
   riquadro (1,1 px), e lo ricalcola se la finestra cambia. */
.pb-map--js .pb-map__rotta {
	vector-effect: none;
}

/* La testa luminosa che corre lungo la rotta: la muove un animateMotion
   SVG, qui c'e' solo il colore. */
.pb-map__testa {
	fill: #fff3c4;
}

/* Con JavaScript, le rotte aspettano che la carta sia visibile e che lo
   zoom sia partito: si disegnano DURANTE l'allargamento della camera, con
   un piccolo anticipo l'una sull'altra. Senza JavaScript vale la regola
   base qui sopra: si disegnano al caricamento. */
.pb-map--js .pb-map__rotta {
	animation-play-state: paused;
}

.pb-map--js.pb-map--vista .pb-map__rotta {
	animation-play-state: running;
	animation-delay: var(--pb-ritardo, 0s);
}

/* I PUNTI si accendono quando la loro rotta tocca terra (il ritardo lo
   scrive il PHP dalla distanza), non tutti insieme all'apertura. */
.pb-map--js .pb-map__punto {
	opacity: 0;
	animation: pb-map-posa 0.6s ease-out forwards;
	animation-delay: var(--pb-ritardo, 0s);
	animation-play-state: paused;
}

.pb-map--js.pb-map--vista .pb-map__punto {
	animation-play-state: running;
}

/* LA LEGENDA entra per ultima, a rotte finite, come un titolo di coda. */
.pb-map--js .pb-map__legenda {
	opacity: 0;
	animation: pb-map-posa 0.8s ease-out forwards;
	animation-delay: 4.2s;
	animation-play-state: paused;
}

.pb-map--js.pb-map--vista .pb-map__legenda {
	animation-play-state: running;
}

@keyframes pb-map-traccia {
	to { stroke-dashoffset: 0; }
}

.pb-map__nucleo {
	fill: var(--cs-oro);
}

/* L'alone respira: lento, mai due punti in fase, cosi' sembra vivo e non
   una luce intermittente. */
.pb-map__alone {
	transform-box: fill-box;
	transform-origin: center;
	animation: pb-map-respiro 3.4s ease-in-out infinite;
	animation-delay: var(--pb-ritardo, 0s);
}

@keyframes pb-map-respiro {
	0%, 100% { opacity: 0.30; transform: scale(0.72); }
	50%      { opacity: 0.85; transform: scale(1); }
}

/* ROMA: il marker di Google riletto nel nostro stile. Goccia dorata piena e
   dentro la spunta PROBAR, non il pallino bianco di serie. */
.pb-map__goccia {
	fill: var(--cs-oro);
}

.pb-map__spunta {
	fill: none;
	stroke: #0a0a0a;
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

/* Solo opacita': nessuna proprieta' di trasformazione, o il browser
   rielabora l'attributo transform del gruppo e sposta il marker. */
.pb-map__casa {
	animation: pb-map-posa 0.9s cubic-bezier(0.16, 1, 0.30, 1) both;
}

/* Con JavaScript Roma si posa quando la camera si e' fermata, non durante
   lo zoom, dove il marker usciva tre volte piu' grande. */
.pb-map--js .pb-map__casa {
	animation-play-state: paused;
}

.pb-map--js.pb-map--vista .pb-map__casa {
	animation-play-state: running;
	animation-delay: 2.3s;
}

@keyframes pb-map-posa {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* -----------------------------------------------------------------------------
   I CONTATORI - stessa voce dei numeri delle monete: cifra grande in oro,
   etichetta sottile sotto.
   -------------------------------------------------------------------------- */
.pb-map__conti {
	list-style: none;
	margin: clamp(22px, 3vw, 34px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(16px, 2.4vw, 32px);
}

.pb-map__conto {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: clamp(14px, 1.6vw, 20px);
	border-left: 1px solid var(--cs-oro-tenue);
}

.pb-map__numero {
	font-size: clamp(28px, 3.4vw, 46px);
	line-height: 1;
	font-weight: 600;
	color: var(--cs-oro);
	/* Cifre di larghezza fissa: mentre il contatore sale il testo sotto non
	   balla avanti e indietro. */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

.pb-map__etichetta {
	font-size: clamp(12px, 1vw, 14px);
	color: var(--cs-muto);
	letter-spacing: 0.04em;
}

/* La nota sotto la carta: presente ma discreta, come una didascalia. */
.pb-map__nota {
	margin: clamp(14px, 1.8vw, 20px) 0 0;
	font-size: clamp(11px, 0.92vw, 13px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
	max-width: 70ch;
}

/* -----------------------------------------------------------------------------
   LEGENDA - le prime destinazioni scritte in chiaro
   -------------------------------------------------------------------------- */
.pb-map__legenda {
	list-style: none;
	margin: clamp(18px, 2.4vw, 26px) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px clamp(16px, 2vw, 26px);
	font-size: clamp(12px, 1vw, 14px);
	color: var(--cs-muto);
}

.pb-map__legenda li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.pb-map__legenda b {
	color: var(--cs-testo);
	font-weight: 600;
}

.pb-map__pallino {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cs-oro);
	flex: 0 0 7px;
}

/* Chi ha chiesto meno movimento: niente zoom, rotte gia' disegnate,
   aloni fermi. La carta arriva direttamente nel suo stato finale. */
@media (prefers-reduced-motion: reduce) {
	.pb-map__mondo,
	.pb-map--js .pb-map__mondo,
	.pb-map--js.pb-map--vista .pb-map__mondo {
		transform: none;
		animation: none;
	}

	.pb-map__rotta {
		stroke-dashoffset: 0;
		animation: none;
	}

	.pb-map__alone,
	.pb-map__casa {
		animation: none;
		opacity: 0.55;
	}

	.pb-map__punto,
	.pb-map__legenda,
	.pb-map--js .pb-map__punto,
	.pb-map--js .pb-map__legenda {
		animation: none;
		opacity: 1;
	}

	.pb-map__testa {
		display: none;
	}
}

/* -----------------------------------------------------------------------------
   SEZIONI
   -------------------------------------------------------------------------- */
.pb-cs__sez {
	/* 3 settembre 2026: era clamp(48px, 7vw, 100px), cioe' 200 px di vuoto
	   fra il testo di una sezione e il titolo della successiva su un
	   desktop. Ora 64 px per lato a 1280 e 72 al massimo: la pagina
	   respira senza far perdere il filo. */
	padding-block: clamp(40px, 5vw, 72px);
	border-bottom: 1px solid var(--cs-linea);
}

.pb-cs__sez--pilastri,
.pb-cs__sez--showroom {
	background: #080808;
}

/* -----------------------------------------------------------------------------
   PILASTRI - accordion nativo
   <details>/<summary> fanno tutto da soli: apertura, chiusura, tastiera,
   lettori di schermo. Qui si toglie solo il triangolino di sistema e si
   disegna un segno piu' che ruota.
   -------------------------------------------------------------------------- */
.pb-cs__accordion {
	margin-top: clamp(20px, 2.6vw, 32px);
	border-top: 1px solid var(--cs-linea);
}

.pb-cs__voce {
	border-bottom: 1px solid var(--cs-linea);
}

.pb-cs__voce-testa {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: clamp(14px, 2vw, 26px);
	padding-block: clamp(16px, 2vw, 24px);
	cursor: pointer;
	list-style: none;
	transition: color 0.3s var(--cs-ease);
}

/* Il triangolino nativo: va tolto sia in WebKit sia negli altri motori. */
.pb-cs__voce-testa::-webkit-details-marker {
	display: none;
}

.pb-cs__voce-testa::marker {
	content: "";
}

.pb-cs__voce-num {
	font-size: clamp(12px, 1vw, 14px);
	letter-spacing: 0.12em;
	color: var(--cs-oro);
	opacity: 0.85;
}

.pb-cs__voce-titoli {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0; /* senza questo il testo lungo allarga la griglia */
}

.pb-cs__voce-sommario {
	font-size: clamp(13px, 1.1vw, 15px);
	color: var(--cs-muto);
	line-height: 1.5;
}

/* Il segno piu' disegnato con due pseudo-elementi: nessuna immagine, nessun
   font di icone da scaricare. */
.pb-cs__voce-segno {
	position: relative;
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
}

.pb-cs__voce-segno::before,
.pb-cs__voce-segno::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--cs-oro);
	transition: transform 0.35s var(--cs-ease), opacity 0.35s var(--cs-ease);
}

.pb-cs__voce-segno::before {
	width: 20px;
	height: 1px;
}

.pb-cs__voce-segno::after {
	width: 1px;
	height: 20px;
}

.pb-cs__voce[open] .pb-cs__voce-segno::after {
	transform: rotate(90deg);
	opacity: 0;
}

.pb-cs__voce-corpo {
	padding: 0 0 clamp(22px, 3vw, 32px);
	/* Allineato al testo, non al numero: la colonna del numero piu' il gap. */
	padding-left: clamp(34px, 4.5vw, 60px);
}

.pb-cs__voce-corpo p {
	margin: 0;
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.75;
	color: var(--cs-muto);
	max-width: 68ch;
}

.pb-cs__voce-testa:hover .pb-cs__h3 {
	color: var(--cs-oro);
}

/* -----------------------------------------------------------------------------
   LE CINQUE PROVE
   auto-fit + minmax: da una colonna sul telefono fino a cinque sul desktop,
   senza scrivere un solo media query.
   -------------------------------------------------------------------------- */
.pb-cs__prove {
	list-style: none;
	margin: clamp(20px, 2.6vw, 32px) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: clamp(16px, 2vw, 24px);
}

.pb-cs__prova {
	background: var(--cs-pannello);
	border: 1px solid var(--cs-linea);
	border-radius: 14px;
	padding: clamp(20px, 2.2vw, 28px);
	transition: border-color 0.3s var(--cs-ease);
}

.pb-cs__prova:hover {
	border-color: var(--cs-oro-tenue);
}

.pb-cs__prova-num {
	display: block;
	font-size: clamp(11px, 0.9vw, 13px);
	letter-spacing: 0.16em;
	color: var(--cs-oro);
	margin-bottom: 12px;
}

.pb-cs__prova p {
	margin: 0;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 1.65;
	color: var(--cs-muto);
}

/* -----------------------------------------------------------------------------
   SHOWROOM
   -------------------------------------------------------------------------- */
.pb-cs__showroom {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}

@media (min-width: 900px) {
	.pb-cs__showroom {
		grid-template-columns: 1.1fr 0.9fr;
	}
}

.pb-cs__scheda {
	font-style: normal;
	background: var(--cs-pannello);
	border: 1px solid var(--cs-linea);
	border-radius: 16px;
	padding: clamp(22px, 2.4vw, 32px);
}

.pb-cs__riga {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-block: clamp(12px, 1.4vw, 16px);
	border-bottom: 1px solid var(--cs-linea);
}

.pb-cs__riga:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.pb-cs__riga:first-child {
	padding-top: 0;
}

.pb-cs__etichetta {
	font-size: clamp(10px, 0.85vw, 12px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cs-oro);
}

.pb-cs__valore {
	font-size: clamp(14px, 1.15vw, 16px);
	line-height: 1.6;
	color: var(--cs-testo);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.pb-cs__link {
	text-decoration: none;
	transition: color 0.3s var(--cs-ease);
}

.pb-cs__link:hover,
.pb-cs__link:focus-visible {
	color: var(--cs-oro);
}

.pb-cs__orario b {
	font-weight: 600;
	margin-left: 6px;
}

/* -----------------------------------------------------------------------------
   FOCUS DA TASTIERA
   Chi naviga con il tab deve sempre sapere dove si trova. Si usa
   :focus-visible per non disegnare l'anello a chi clicca col mouse.
   -------------------------------------------------------------------------- */
.pb-cs a:focus-visible,
.pb-cs summary:focus-visible {
	outline: 2px solid var(--cs-oro);
	outline-offset: 3px;
	border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   CHI HA CHIESTO MENO ANIMAZIONI
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pb-cs *,
	.pb-cs *::before,
	.pb-cs *::after {
		transition-duration: 0.01ms !important;
	}
}


/* -----------------------------------------------------------------------------
   L'INGRESSO DELLE SEZIONI (3 settembre 2026)
   Ogni sezione entra con una dissolvenza corta e uno spostamento di 14 px
   quando arriva nello schermo: il lettore capisce dove sta e il testo non
   e' tutto li' dall'inizio. La classe pb-cs--js la scrive uno script inline
   in testa alla pagina, prima del primo disegno, cosi' non c'e' nessun
   lampo; senza JavaScript o con "riduci animazioni" tutto e' visibile da
   subito. Solo opacita' e transform: compositor, niente layout.
   -------------------------------------------------------------------------- */
.pb-cs--js .pb-cs__sez > .pb-cs__wrap {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s var(--cs-ease), transform 0.7s var(--cs-ease);
}

.pb-cs--js .pb-cs__sez.pb-cs__sez--vista > .pb-cs__wrap {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.pb-cs--js .pb-cs__sez > .pb-cs__wrap {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* -----------------------------------------------------------------------------
   TELEFONO: caratteri da lettura e vuoti piu' stretti (3 settembre 2026)
   Misurato a 375 px: il testo corrente stava a 15 px, i riquadri delle prove
   a 13, il sommario della fisarmonica a 13, il kicker a 11. Lo standard di
   lettura sul telefono e' 16 px per il testo e non meno di 14 per il
   secondario. Fra le voci della fisarmonica c'erano 39 px, fra le carte
   delle prove 58, fra il pulsante e i dati dello showroom 71.
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.pb-cs__sez {
		padding-block: 32px;
	}

	.pb-cs__hero {
		padding-block: 40px;
	}

	.pb-cs .pb-cs__testo,
	.pb-cs__voce-corpo p {
		font-size: 16px;
		line-height: 1.7;
	}

	.pb-cs .pb-cs__lead {
		font-size: 17px;
	}

	.pb-cs .pb-cs__kicker {
		font-size: 12px;
	}

	.pb-cs__h4 {
		font-size: 16px;
	}

	.pb-cs__voce-sommario,
	.pb-cs__prova p {
		font-size: 14px;
	}

	.pb-map__etichetta,
	.pb-map__legenda,
	.pb-map__nota,
	.pb-cs__etichetta {
		font-size: 13px;
	}

	.pb-cs__btn {
		font-size: 15px;
	}

	.pb-cs__accordion,
	.pb-cs__prove {
		margin-top: 14px;
	}

	.pb-cs__voce-testa {
		padding-block: 12px;
	}

	.pb-cs__prove {
		gap: 12px;
	}

	.pb-cs__prova {
		padding: 16px;
	}

	.pb-cs__showroom {
		gap: 16px;
	}

	.pb-cs__cta-row {
		margin-bottom: 12px;
	}

	.pb-cs__voce-corpo {
		padding-bottom: 10px;
	}
}

/* -----------------------------------------------------------------------------
   DATI DEL VENDITORE (9 novembre 2026)
   Il contenuto della pagina, se c'e', in fondo: sui siti esteri ragione sociale,
   REA, capitale e amministratore. Stesso registro del resto: testo muto, oro
   solo nei titoli e nei filetti.
   -------------------------------------------------------------------------- */
.pb-cs__sez--dati {
	padding-block: clamp(36px, 5vw, 64px);
	border-top: 1px solid var(--cs-linea);
}

.pb-cs .pb-cs__dati h2 {
	font-size: clamp(13px, 1vw, 15px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cs-oro);
	margin: 0 0 1em;
}

.pb-cs .pb-cs__dati p,
.pb-cs .pb-cs__dati li {
	font-size: clamp(14px, 1.05vw, 15px);
	line-height: 1.7;
	color: var(--cs-muto);
	max-width: 72ch;
}

.pb-cs .pb-cs__dati ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 6px 32px;
}

.pb-cs .pb-cs__dati strong {
	color: var(--cs-testo);
	font-weight: 600;
}

.pb-cs .pb-cs__dati a {
	color: var(--cs-oro);
}

/* 9/11/2026: il tema mette text-transform: capitalize sugli h3. Nelle altre lingue
   (polacco, tedesco, francese...) i titoli si scrivono con la sola prima maiuscola:
   "Selekcja i testy", non "Selekcja I Testy". L'italiano resta com'era. */
html:not([lang^="it"]) .pb-cs .pb-cs__h3 {
	text-transform: none;
}