@charset "UTF-8";
/*
 * Eroe con slider a tre punti — portato dalla demo approvata.
 * Nomi dei token riscritti su quelli del tema: nessun valore cromatico è
 * scritto a mano.
 */

.pb-eroe { padding-block: var(--pb-s-6) var(--pb-s-8); }

.pb-fondino {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	background: var(--pb-fondino);
	/* Angolo tagliato in basso a destra: una forma interrotta obbliga la
	   percezione a completarla, e ciò che si completa attivamente si
	   ricorda meglio di un rettangolo. */
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), calc(100% - 64px) 100%, 0 100%);
	min-height: 480px;
	display: grid;
}

.pb-fondino__sfondo { position: absolute; inset: 0; pointer-events: none; }
.pb-fondino__sfondo svg { width: 100%; height: 100%; display: block; }

.pb-slide {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: var(--pb-s-7);
	padding: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
	padding-bottom: clamp(4rem, 3rem + 2vw, 5rem);
	position: relative;
	z-index: 1;
	/* Chiusa: invisibile E non colpibile. Con la sola opacità resterebbe un
	   pannello trasparente che intercetta i clic delle diapositive sotto,
	   e i suoi link resterebbero nel percorso di tabulazione. */
	visibility: hidden;
	opacity: 0;
	transition: opacity 420ms ease, visibility 420ms ease;
}

.pb-slide.e-attiva { visibility: visible; opacity: 1; }

.pb-slide__occhiello {
	display: inline-flex;
	align-items: center;
	gap: var(--pb-s-3);
	margin: 0 0 var(--pb-s-5);
	max-width: none;
	font-size: var(--pb-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--pb-viola-scuro);
}

.pb-slide__occhiello::before {
	content: '';
	width: 28px; height: 2px;
	background: var(--pb-gradiente);
	flex: 0 0 auto;
}

#page-container .pb-slide__titolo {
	font-size: var(--pb-t-3xl);
	margin: 0 0 var(--pb-s-4);
	max-width: 16ch;
}

.pb-slide__testo {
	font-size: var(--pb-t-base);
	line-height: 1.55;
	max-width: 46ch;
	margin: 0 0 var(--pb-s-5);
	color: var(--pb-testo);
}

.pb-slide__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pb-s-4);
	align-items: center;
	margin: 0;
	max-width: none;
}

.pb-slide__grafica { display: grid; place-items: center; }

/* L'altezza del fondino la detta la grafica, non il testo: senza limite
   il pannello arrivava a 584 px e spingeva CTA e punti sotto la piega. */
.pb-slide__grafica svg {
	width: 100%;
	max-width: 400px;
	max-height: min(300px, 34vh);
	height: auto;
}

/* --- Comandi --- */

.pb-comandi {
	position: absolute;
	left: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
	bottom: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--pb-s-4);
}

.pb-punti { display: flex; align-items: center; gap: var(--pb-s-2); }

/* Bersaglio 44x44, pallino visibile più piccolo: si colpisce col pollice
   anche se graficamente resta discreto (legge di Fitts). */
.pb-punto {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	background: none; border: 0; padding: 0; cursor: pointer;
}

.pb-punto::before {
	content: '';
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--pb-bordo-controllo);
	transition: width var(--pb-transizione), background var(--pb-transizione);
}

.pb-punto[aria-current='true']::before {
	width: 34px;
	border-radius: var(--pb-r-tonda);
	background: var(--pb-gradiente);
}

/* WCAG 2.2.2: un contenuto che si muove da solo deve poter essere fermato. */
.pb-pausa {
	width: 44px; height: 44px;
	display: grid; place-items: center;
	font-size: 0.8rem;
	color: var(--pb-nero);
	background: var(--pb-bianco);
	border: 1px solid var(--pb-bordo-controllo);
	border-radius: 50%;
	cursor: pointer;
}

.pb-pausa:hover { border-color: var(--pb-nero); }

@media (max-width: 900px) {
	.pb-slide {
		grid-template-columns: 1fr;
		padding-bottom: calc(clamp(1.5rem, 1rem + 1.8vw, 2.75rem) + 56px);
	}
	.pb-slide__grafica { display: none; }
	.pb-fondino { min-height: 0; clip-path: none; border-radius: 20px; }
}

/* --- Eroe interno, senza slider --- */

.pb-eroe--interno {
	padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem);
	background:
		radial-gradient(70rem 30rem at 12% -20%, var(--pb-cobalto-tenue), transparent 62%),
		var(--pb-bianco);
}

.pb-eroe__interno { max-width: 54rem; }
#page-container .pb-eroe__titolo { margin: 0 0 var(--pb-s-4); }

.pb-eroe__sottotitolo {
	font-size: var(--pb-t-m);
	line-height: 1.55;
	max-width: 46rem;
}

.pb-eroe__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pb-s-3);
	margin-top: var(--pb-s-6);
	max-width: none;
}

/* Landing promozionale: l'unico eroe con fondo pieno, perché è l'unica
   pagina che deve staccare da tutto il resto. */
.pb-eroe--promo {
	background: var(--pb-nero);
	color: var(--pb-bianco);
}

.pb-eroe--promo h1,
.pb-eroe--promo .pb-eroe__sottotitolo { color: var(--pb-bianco); }

.pb-occhiello--promo { color: var(--pb-bianco); }
.pb-occhiello--promo::before { background: var(--pb-gradiente); }

.pb-sconto {
	display: flex;
	align-items: baseline;
	gap: var(--pb-s-3);
	margin-top: var(--pb-s-5);
	max-width: none;
}

.pb-sconto__cifra {
	font-family: var(--pb-font-titoli);
	font-size: var(--pb-t-3xl);
	font-weight: 700;
	line-height: 1;
	background: var(--pb-gradiente);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pb-sconto__testo { font-size: var(--pb-t-m); font-weight: 600; }