/* =============================================================================
   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__kicker {
	font-size: clamp(11px, 0.9vw, 13px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cs-oro);
	margin: 0 0 clamp(12px, 1.6vw, 18px);
}

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

.pb-cs__h2 {
	font-size: clamp(24px, 3.4vw, 42px);
	line-height: 1.16;
	margin: 0 0 clamp(14px, 1.8vw, 22px);
	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__lead {
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.6;
	color: var(--cs-muto);
	margin: 0 0 clamp(24px, 3vw, 34px);
	max-width: 56ch;
}

.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(56px, 9vw, 130px);
	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(28px, 4vw, 44px);
}

.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(28px, 4vw, 46px);
}

.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.
   -------------------------------------------------------------------------- */
.pb-map__mondo {
	transform-box: view-box;
}

.pb-map--js .pb-map__mondo {
	transform: scale(3);
}

.pb-map--js.pb-map--vista .pb-map__mondo {
	animation: pb-map-zoom 2.6s cubic-bezier(0.16, 1, 0.30, 1) forwards;
}

@keyframes pb-map-zoom {
	from { transform: scale(3); }
	to   { transform: scale(1); }
}

/* 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. */
	stroke-dasharray: 220;
	stroke-dashoffset: 220;
	animation: pb-map-traccia 2.6s cubic-bezier(0.16, 1, 0.30, 1) forwards;
	animation-delay: var(--pb-ritardo, 0s);
}

/* 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: calc(0.9s + var(--pb-ritardo, 0s));
}

@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;
}

@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.50);
	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;
	}
}

/* -----------------------------------------------------------------------------
   SEZIONI
   -------------------------------------------------------------------------- */
.pb-cs__sez {
	padding-block: clamp(48px, 7vw, 100px);
	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(28px, 4vw, 46px);
	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(20px, 2.6vw, 30px);
	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(28px, 4vw, 46px) 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;
	}
}