/* ==========================================================================
   Scala di pagina
   Sotto i 768px la pagina usa il progetto mobile (440px) scalato alla larghezza
   dello schermo; da 768px in su usa il progetto desktop (1728px) scalato.
   Cosi il sito riempie sempre lo schermo mantenendo le proporzioni del Figma.
   ========================================================================== */
@media (max-width: 199px) { body { zoom: 0.4545; } }
@media (min-width: 200px) and (max-width: 207px) { body { zoom: 0.4545; } }
@media (min-width: 208px) and (max-width: 215px) { body { zoom: 0.4727; } }
@media (min-width: 216px) and (max-width: 223px) { body { zoom: 0.4909; } }
@media (min-width: 224px) and (max-width: 231px) { body { zoom: 0.5091; } }
@media (min-width: 232px) and (max-width: 239px) { body { zoom: 0.5273; } }
@media (min-width: 240px) and (max-width: 247px) { body { zoom: 0.5455; } }
@media (min-width: 248px) and (max-width: 255px) { body { zoom: 0.5636; } }
@media (min-width: 256px) and (max-width: 263px) { body { zoom: 0.5818; } }
@media (min-width: 264px) and (max-width: 271px) { body { zoom: 0.6; } }
@media (min-width: 272px) and (max-width: 279px) { body { zoom: 0.6182; } }
@media (min-width: 280px) and (max-width: 287px) { body { zoom: 0.6364; } }
@media (min-width: 288px) and (max-width: 295px) { body { zoom: 0.6545; } }
@media (min-width: 296px) and (max-width: 303px) { body { zoom: 0.6727; } }
@media (min-width: 304px) and (max-width: 311px) { body { zoom: 0.6909; } }
@media (min-width: 312px) and (max-width: 319px) { body { zoom: 0.7091; } }
@media (min-width: 320px) and (max-width: 327px) { body { zoom: 0.7273; } }
@media (min-width: 328px) and (max-width: 335px) { body { zoom: 0.7455; } }
@media (min-width: 336px) and (max-width: 343px) { body { zoom: 0.7636; } }
@media (min-width: 344px) and (max-width: 351px) { body { zoom: 0.7818; } }
@media (min-width: 352px) and (max-width: 359px) { body { zoom: 0.8; } }
@media (min-width: 360px) and (max-width: 367px) { body { zoom: 0.8182; } }
@media (min-width: 368px) and (max-width: 375px) { body { zoom: 0.8364; } }
@media (min-width: 376px) and (max-width: 383px) { body { zoom: 0.8545; } }
@media (min-width: 384px) and (max-width: 391px) { body { zoom: 0.8727; } }
@media (min-width: 392px) and (max-width: 399px) { body { zoom: 0.8909; } }
@media (min-width: 400px) and (max-width: 407px) { body { zoom: 0.9091; } }
@media (min-width: 408px) and (max-width: 415px) { body { zoom: 0.9273; } }
@media (min-width: 416px) and (max-width: 423px) { body { zoom: 0.9455; } }
@media (min-width: 424px) and (max-width: 431px) { body { zoom: 0.9636; } }
@media (min-width: 432px) and (max-width: 439px) { body { zoom: 0.9818; } }
@media (min-width: 440px) and (max-width: 447px) { body { zoom: 1.0; } }
@media (min-width: 448px) and (max-width: 455px) { body { zoom: 1.0182; } }
@media (min-width: 456px) and (max-width: 463px) { body { zoom: 1.0364; } }
@media (min-width: 464px) and (max-width: 471px) { body { zoom: 1.0545; } }
@media (min-width: 472px) and (max-width: 479px) { body { zoom: 1.0727; } }
@media (min-width: 480px) and (max-width: 487px) { body { zoom: 1.0909; } }
@media (min-width: 488px) and (max-width: 495px) { body { zoom: 1.1091; } }
@media (min-width: 496px) and (max-width: 503px) { body { zoom: 1.1273; } }
@media (min-width: 504px) and (max-width: 511px) { body { zoom: 1.1455; } }
@media (min-width: 512px) and (max-width: 519px) { body { zoom: 1.1636; } }
@media (min-width: 520px) and (max-width: 527px) { body { zoom: 1.1818; } }
@media (min-width: 528px) and (max-width: 535px) { body { zoom: 1.2; } }
@media (min-width: 536px) and (max-width: 543px) { body { zoom: 1.2182; } }
@media (min-width: 544px) and (max-width: 551px) { body { zoom: 1.2364; } }
@media (min-width: 552px) and (max-width: 559px) { body { zoom: 1.2545; } }
@media (min-width: 560px) and (max-width: 567px) { body { zoom: 1.2727; } }
@media (min-width: 568px) and (max-width: 575px) { body { zoom: 1.2909; } }
@media (min-width: 576px) and (max-width: 583px) { body { zoom: 1.3091; } }
@media (min-width: 584px) and (max-width: 591px) { body { zoom: 1.3273; } }
@media (min-width: 592px) and (max-width: 599px) { body { zoom: 1.3455; } }
@media (min-width: 600px) and (max-width: 607px) { body { zoom: 1.3636; } }
@media (min-width: 608px) and (max-width: 615px) { body { zoom: 1.3818; } }
@media (min-width: 616px) and (max-width: 623px) { body { zoom: 1.4; } }
@media (min-width: 624px) and (max-width: 631px) { body { zoom: 1.4182; } }
@media (min-width: 632px) and (max-width: 639px) { body { zoom: 1.4364; } }
@media (min-width: 640px) and (max-width: 647px) { body { zoom: 1.4545; } }
@media (min-width: 648px) and (max-width: 655px) { body { zoom: 1.4727; } }
@media (min-width: 656px) and (max-width: 663px) { body { zoom: 1.4909; } }
@media (min-width: 664px) and (max-width: 671px) { body { zoom: 1.5091; } }
@media (min-width: 672px) and (max-width: 679px) { body { zoom: 1.5273; } }
@media (min-width: 680px) and (max-width: 687px) { body { zoom: 1.5455; } }
@media (min-width: 688px) and (max-width: 695px) { body { zoom: 1.5636; } }
@media (min-width: 696px) and (max-width: 703px) { body { zoom: 1.5818; } }
@media (min-width: 704px) and (max-width: 711px) { body { zoom: 1.6; } }
@media (min-width: 712px) and (max-width: 719px) { body { zoom: 1.6182; } }
@media (min-width: 720px) and (max-width: 727px) { body { zoom: 1.6364; } }
@media (min-width: 728px) and (max-width: 735px) { body { zoom: 1.6545; } }
@media (min-width: 736px) and (max-width: 743px) { body { zoom: 1.6727; } }
@media (min-width: 744px) and (max-width: 751px) { body { zoom: 1.6909; } }
@media (min-width: 752px) and (max-width: 759px) { body { zoom: 1.7091; } }
@media (min-width: 760px) and (max-width: 767px) { body { zoom: 1.7273; } }
@media (min-width: 768px) and (max-width: 783px) { body { zoom: 0.4444; } }
@media (min-width: 784px) and (max-width: 799px) { body { zoom: 0.4537; } }
@media (min-width: 800px) and (max-width: 815px) { body { zoom: 0.463; } }
@media (min-width: 816px) and (max-width: 831px) { body { zoom: 0.4722; } }
@media (min-width: 832px) and (max-width: 847px) { body { zoom: 0.4815; } }
@media (min-width: 848px) and (max-width: 863px) { body { zoom: 0.4907; } }
@media (min-width: 864px) and (max-width: 879px) { body { zoom: 0.5; } }
@media (min-width: 880px) and (max-width: 895px) { body { zoom: 0.5093; } }
@media (min-width: 896px) and (max-width: 911px) { body { zoom: 0.5185; } }
@media (min-width: 912px) and (max-width: 927px) { body { zoom: 0.5278; } }
@media (min-width: 928px) and (max-width: 943px) { body { zoom: 0.537; } }
@media (min-width: 944px) and (max-width: 959px) { body { zoom: 0.5463; } }
@media (min-width: 960px) and (max-width: 975px) { body { zoom: 0.5556; } }
@media (min-width: 976px) and (max-width: 991px) { body { zoom: 0.5648; } }
@media (min-width: 992px) and (max-width: 1007px) { body { zoom: 0.5741; } }
@media (min-width: 1008px) and (max-width: 1023px) { body { zoom: 0.5833; } }
@media (min-width: 1024px) and (max-width: 1039px) { body { zoom: 0.5926; } }
@media (min-width: 1040px) and (max-width: 1055px) { body { zoom: 0.6019; } }
@media (min-width: 1056px) and (max-width: 1071px) { body { zoom: 0.6111; } }
@media (min-width: 1072px) and (max-width: 1087px) { body { zoom: 0.6204; } }
@media (min-width: 1088px) and (max-width: 1103px) { body { zoom: 0.6296; } }
@media (min-width: 1104px) and (max-width: 1119px) { body { zoom: 0.6389; } }
@media (min-width: 1120px) and (max-width: 1135px) { body { zoom: 0.6481; } }
@media (min-width: 1136px) and (max-width: 1151px) { body { zoom: 0.6574; } }
@media (min-width: 1152px) and (max-width: 1167px) { body { zoom: 0.6667; } }
@media (min-width: 1168px) and (max-width: 1183px) { body { zoom: 0.6759; } }
@media (min-width: 1184px) and (max-width: 1199px) { body { zoom: 0.6852; } }
@media (min-width: 1200px) and (max-width: 1215px) { body { zoom: 0.6944; } }
@media (min-width: 1216px) and (max-width: 1231px) { body { zoom: 0.7037; } }
@media (min-width: 1232px) and (max-width: 1247px) { body { zoom: 0.713; } }
@media (min-width: 1248px) and (max-width: 1263px) { body { zoom: 0.7222; } }
@media (min-width: 1264px) and (max-width: 1279px) { body { zoom: 0.7315; } }
@media (min-width: 1280px) and (max-width: 1295px) { body { zoom: 0.7407; } }
@media (min-width: 1296px) and (max-width: 1311px) { body { zoom: 0.75; } }
@media (min-width: 1312px) and (max-width: 1327px) { body { zoom: 0.7593; } }
@media (min-width: 1328px) and (max-width: 1343px) { body { zoom: 0.7685; } }
@media (min-width: 1344px) and (max-width: 1359px) { body { zoom: 0.7778; } }
@media (min-width: 1360px) and (max-width: 1375px) { body { zoom: 0.787; } }
@media (min-width: 1376px) and (max-width: 1391px) { body { zoom: 0.7963; } }
@media (min-width: 1392px) and (max-width: 1407px) { body { zoom: 0.8056; } }
@media (min-width: 1408px) and (max-width: 1423px) { body { zoom: 0.8148; } }
@media (min-width: 1424px) and (max-width: 1439px) { body { zoom: 0.8241; } }
@media (min-width: 1440px) and (max-width: 1455px) { body { zoom: 0.8333; } }
@media (min-width: 1456px) and (max-width: 1471px) { body { zoom: 0.8426; } }
@media (min-width: 1472px) and (max-width: 1487px) { body { zoom: 0.8519; } }
@media (min-width: 1488px) and (max-width: 1503px) { body { zoom: 0.8611; } }
@media (min-width: 1504px) and (max-width: 1519px) { body { zoom: 0.8704; } }
@media (min-width: 1520px) and (max-width: 1535px) { body { zoom: 0.8796; } }
@media (min-width: 1536px) and (max-width: 1551px) { body { zoom: 0.8889; } }
@media (min-width: 1552px) and (max-width: 1567px) { body { zoom: 0.8981; } }
@media (min-width: 1568px) and (max-width: 1583px) { body { zoom: 0.9074; } }
@media (min-width: 1584px) and (max-width: 1599px) { body { zoom: 0.9167; } }
@media (min-width: 1600px) and (max-width: 1615px) { body { zoom: 0.9259; } }
@media (min-width: 1616px) and (max-width: 1631px) { body { zoom: 0.9352; } }
@media (min-width: 1632px) and (max-width: 1647px) { body { zoom: 0.9444; } }
@media (min-width: 1648px) and (max-width: 1663px) { body { zoom: 0.9537; } }
@media (min-width: 1664px) and (max-width: 1679px) { body { zoom: 0.963; } }
@media (min-width: 1680px) and (max-width: 1695px) { body { zoom: 0.9722; } }
@media (min-width: 1696px) and (max-width: 1711px) { body { zoom: 0.9815; } }
@media (min-width: 1712px) and (max-width: 1727px) { body { zoom: 0.9907; } }

/* ==========================================================================
   Scala di pagina
   La grafica e disegnata a 1728px. Sotto quella larghezza (Mac 1440/1512...)
   riduciamo tutta la pagina in proporzione: nessun contenuto tagliato e i
   margini laterali restano quelli del progetto.
   ========================================================================== */

/* ==========================================================================
   Reset + base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* niente scorrimento laterale: gli elementi che sbordano di proposito
   (foto, caroselli, sfondi) restano tagliati ai bordi dello schermo */
html, body { overflow-x: hidden; max-width: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--pit-navy);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.pit-container {
	max-width: 1484px;
	margin: 0 auto;
	padding: 0 24px;
}

.only-mobile { display: block; }
.only-desktop { display: none; }

.eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 1.56px;
	text-transform: uppercase;
	margin-bottom: 7px;
}
.heading-xl {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 32px;
	line-height: 1.05;
	text-transform: uppercase;
}
.body-text {
	font-size: 16px;
	line-height: 1.6;
}
.body-text--bold { font-weight: 700; }
.body-text strong { font-weight: 700; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 100px;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 1.68px;
	text-transform: uppercase;
	white-space: nowrap;
	border: none;
	cursor: pointer;
}
.btn--white { background: #fff; color: var(--pit-navy); }
.btn--dark { background: var(--pit-navy); color: #fff; }
.btn--sm { padding: 8px 16px; font-size: 11px; }
.btn--icon img { width: 24px; height: 24px; }

@media (min-width: 768px) {
	.btn { font-size: 14px; letter-spacing: 1.96px; padding: 10px 18.04px 10px 20px; min-height: 45px; }
	.btn--icon { padding: 4px 4.4px 4px 18.4px; gap: 10px; }
	.btn--icon img { width: 37.2px; height: 37.2px; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	padding-top: 24px;
	padding-bottom: 16px;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.site-header__logo img { height: 35px; width: auto; }
.site-header__nav { display: none; }
.site-header__nav a {
	color: #fff;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.96px;
	text-transform: uppercase;
	padding: 10px;
}
.site-header__actions { display: none; }
.site-header__cart { position: relative; display: inline-flex; }
.site-header__cart img { width: 19px; height: 19px; }
.site-header__cart-count {
	position: absolute;
	top: -6px;
	right: -8px;
	background: var(--pit-navy);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.site-header__lang { background: none; border: 1px solid #fff; color: #fff; border-radius: 78px; padding: 6px 12px; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.site-header__burger { background: none; border: none; padding: 0; cursor: pointer; }

/* Selettore lingua (menu a tendina) */
.site-header__lang:disabled { opacity: 0.45; cursor: not-allowed; }
.site-header__lang-wrap { position: relative; display: inline-flex; }
.site-header__lang-arrow { transition: transform 0.2s ease; }
.site-header__lang-wrap.is-open .site-header__lang-arrow { transform: rotate(180deg); }
.site-header__lang-menu {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 30;
	display: none;
	flex-direction: column;
	gap: 2px;
	min-width: 100%;
	background: var(--pit-navy);
	border-radius: 12px;
	padding: 6px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.site-header__lang-wrap.is-open .site-header__lang-menu { display: flex; }
/* le voci della lingua sono link veri, non bottoni: valgono per entrambi */
.site-header__lang-menu button,
.site-header__lang-menu a {
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	color: #fff;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.96px;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
	padding: 8px 14px;
	border-radius: 8px;
}
.site-header__lang-menu a { display: block; text-decoration: none; }
.site-header__lang-menu button:hover,
.site-header__lang-menu a:hover { background: rgba(255, 255, 255, 0.12); }
.site-header__lang-menu button.is-active,
.site-header__lang-menu a.is-active { background: #fff; color: var(--pit-navy); }
.site-header__burger img { width: 24px; }

.site-header__mobile-nav {
	display: none;
	flex-direction: column;
	gap: 4px;
	background: var(--pit-navy);
	padding: 16px 24px 24px;
}
.site-header__mobile-nav a {
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 10px 0;
}
/* il bottone Accedi non deve prendere il bianco dei link del menu (restava
   scritta bianca su pillola bianca) e non si allarga per tutta la riga */
.site-header__mobile-nav .btn {
	color: var(--pit-navy);
	align-self: flex-start;
	margin-top: 12px;
	padding: 10px 22px;
	letter-spacing: 1.5px;
}
.site-header__mobile-nav.is-open { display: flex; }
.site-header__mobile-lang { display: flex; gap: 24px; }
.site-header__mobile-lang a { opacity: 0.6; }
.site-header__mobile-lang a.is-active { opacity: 1; text-decoration: underline; }

@media (min-width: 768px) {
	.site-header { padding-top: 50px; padding-bottom: 21px; }
	.site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; }
	.site-header__logo img { height: 62px; }
	.site-header__nav { display: flex; align-items: center; gap: 26.48px; justify-self: center; margin-top: 0.8px; }
	.site-header__nav a { font-size: 18px; line-height: 24.6px; letter-spacing: 2.52px; padding: 10px; }
	.site-header__actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
	.site-header__burger { display: none; }

	.site-header__actions .btn--sm {
		font-size: 14px;
		letter-spacing: 1.96px;
		padding: 10px;
		min-width: 124px;
		height: 39px;
		justify-content: center;
		margin-top: -1px;
	}
	.site-header__cart {
		width: 42.1px;
		height: 39px;
		border: 0.78px solid #fff;
		border-radius: 78px;
		align-items: center;
		justify-content: center;
		margin-top: -1px;
	}
	.site-header__cart img { width: 18.7px; height: 18.7px; }
	.site-header__cart-count {
		top: 3px;
		right: 2.1px;
		width: 13px;
		height: 13px;
		border-radius: 4.67px;
		font-size: 10px;
	}
	.site-header__lang {
		display: inline-flex;
		align-items: center;
		gap: 7.48px;
		border: none;
		border-radius: 0;
		padding: 10px;
		font-size: 18px;
		line-height: 24.6px;
		letter-spacing: 2.52px;
		margin-left: 11px;
		margin-top: 0.8px;
	}
	.site-header__lang-arrow { display: inline-flex; align-items: center; justify-content: center; width: 25px; }
	.site-header__lang svg { width: 8.64px; height: 5.67px; display: block; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: #000; color: #fff; padding: 64px 0 32px; }
.site-footer__inner { display: flex; flex-direction: column; gap: 40px; }
.site-footer__brand img { height: 90px; width: auto; }
.site-footer__col h3 {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	margin-bottom: 11px;
}
.site-footer__col ul { display: flex; flex-direction: column; gap: 2px; }
.site-footer__col a, .site-footer__col li { font-size: 16px; line-height: 1.7; }
.site-footer__social-icons { display: flex; align-items: center; gap: 4px; }
.site-footer__social-icons a { display: inline-flex; line-height: 0; }
.site-footer__ig { position: relative; display: inline-flex; width: 26px; height: 25px; background: #fff; border-radius: 50%; align-items: center; justify-content: center; }
.site-footer__ig img { position: absolute; }
.site-footer__bottom hr { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin-bottom: 24px; }
.site-footer__bottom { display: flex; flex-direction: column; gap: 16px; }
.site-footer__bottom-row { display: flex; flex-direction: column; gap: 16px; }
.site-footer__bottom p { font-size: 14px; }
.site-footer__payments { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.site-footer__paybadge { background: #fff5e6; border-radius: 4px; height: 18px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; }
.site-footer__paybadge img { height: 8px; width: auto; }
.site-footer__paybadge--apple { display: inline-flex; gap: 2px; }
.site-footer__paybadge--secure { background: #fff5e6; color: #000; font-size: 8px; gap: 4px; white-space: nowrap; }

@media (min-width: 768px) {
	.site-footer { padding: 307px 0 61.3px; }
	.site-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: 0; min-height: 169px; }
	.site-footer__col { align-self: stretch; }
	.site-footer__brand { align-self: flex-start; margin-top: 18px; }
	.site-footer__brand img { height: 133px; }
	.site-footer__col:nth-of-type(2) { width: 162px; }
	.site-footer__col:nth-of-type(3) { width: 165px; }
	.site-footer__col:nth-of-type(4) { width: 183px; }
	.site-footer__col:nth-of-type(5) { width: 235px; }
	.site-footer__col h3 { font-size: 24.81px; line-height: 26px; margin-bottom: 11px; }
	.site-footer__col ul { gap: 0; }
	.site-footer__col a, .site-footer__col li { font-size: 24px; line-height: 32.8px; }
	.site-footer__social-icons { gap: 4.2px; }
	.site-footer__social-icons > a > img { height: 25px; width: auto; }
	.site-footer__ig { width: 26px; height: 25px; }
	.site-footer__ig img:nth-child(1) { left: 6px; top: 5.5px; width: 14px; height: 14px; }
	.site-footer__ig img:nth-child(2) { left: 9.23px; top: 8.73px; width: 7.55px; height: 7.55px; }
	.site-footer__ig img:nth-child(3) { left: 16.28px; top: 8.12px; width: 1.09px; height: 1.09px; }

	.site-footer__bottom { gap: 0; }
	.site-footer__bottom hr { border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 75px 0 73px; }
	.site-footer__bottom-row { flex-direction: row; justify-content: space-between; align-items: flex-start; }
	.site-footer__bottom p { font-size: 16px; line-height: 21.9px; }
	.site-footer__payments { gap: 9.15px; }
	.site-footer__paybadge { height: 18.3px; border-radius: 3.8125px; padding: 0; }
	.site-footer__paybadge:nth-child(1) { width: 31.3px; }
	.site-footer__paybadge:nth-child(2) { width: 31.3px; }
	.site-footer__paybadge:nth-child(3) { width: 38.1px; }
	.site-footer__paybadge:nth-child(4) { width: 32.8px; gap: 1px; }
	.site-footer__paybadge:nth-child(5) { width: 32.8px; }
	.site-footer__paybadge:nth-child(6) { width: 92.3px; gap: 1.6px; font-size: 7.64px; line-height: 10.4px; }
	.site-footer__paybadge:nth-child(1) img { height: 5.3px; }
	.site-footer__paybadge:nth-child(2) img { height: 8.4px; }
	.site-footer__paybadge:nth-child(3) img { height: 6.9px; }
	.site-footer__paybadge:nth-child(4) img { height: 8.4px; }
	.site-footer__paybadge:nth-child(5) img { height: 8.4px; }
	.site-footer__paybadge:nth-child(6) img { height: 6.9px; }
}

/* ==========================================================================
   Page hero (pagine interne: Corsi, Chi siamo, Docenti, ecc.)
   ========================================================================== */
.pagehero { position: relative; overflow: hidden; background: var(--pit-navy); color: #fff; padding: 130px 0 48px; }
.pagehero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
/* velo sfumato sopra la foto: trasparente in alto, scuro dove ci sono i testi */
.pagehero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 33, 47, 0.15) 0%, rgba(20, 33, 47, 0.45) 45%, rgba(20, 33, 47, 0.82) 100%); }
.pagehero__content { position: relative; z-index: 1; }
.pagehero__breadcrumb { font-size: 14px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 16px; opacity: 0.85; }
.pagehero__title { font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: 42px; line-height: 1.1; text-transform: uppercase; }

@media (min-width: 768px) {
	.pagehero { min-height: 651px; padding: 453px 0 0; }
	.pagehero__bg { background-size: 100% 100%; background-position: center; }
	/* anche sul desktop, ma piu' leggero: qui la foto e' grande e i testi
	   stanno tutti nella meta' bassa */
	.pagehero__bg::after { display: block; background: linear-gradient(180deg, rgba(20, 33, 47, 0) 0%, rgba(20, 33, 47, 0.12) 40%, rgba(20, 33, 47, 0.62) 100%); }
	.pagehero__breadcrumb { font-size: 16px; line-height: 21.9px; letter-spacing: 2.08px; margin-bottom: 20.1px; opacity: 1; }
	.pagehero__title { font-size: 84px; line-height: 89.6px; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; overflow: hidden; padding-top: 130px; padding-bottom: 60px; }
.hero__bg-desktop { display: none; }
.hero__bg-mobile { position: absolute; inset: 0; z-index: 0; }
.hero__bg-mobile img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg-mobile-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.38); }
.hero__topgrad { position: absolute; top: 0; left: 0; right: 0; height: 200px; background: linear-gradient(180deg, rgba(0,0,0,1.0) 0.0%, rgba(13,13,13,0.95) 5.0%, rgba(26,26,26,0.9) 10.0%, rgba(38,38,38,0.85) 15.0%, rgba(51,51,51,0.8) 20.0%, rgba(64,64,64,0.75) 25.0%, rgba(76,76,76,0.7) 30.0%, rgba(89,89,89,0.65) 35.0%, rgba(102,102,102,0.6) 40.0%, rgba(115,115,115,0.55) 45.0%, rgba(128,128,128,0.5) 50.0%, rgba(140,140,140,0.45) 55.0%, rgba(153,153,153,0.4) 60.0%, rgba(166,166,166,0.35) 65.0%, rgba(178,178,178,0.3) 70.0%, rgba(191,191,191,0.25) 75.0%, rgba(204,204,204,0.2) 80.0%, rgba(217,217,217,0.15) 85.0%, rgba(230,230,230,0.1) 90.0%, rgba(242,242,242,0.05) 95.0%, rgba(255,255,255,0.0) 100.0%); mix-blend-mode: multiply; z-index: 1; }
.hero__content { position: relative; z-index: 2; color: #fff; }
.hero__title {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	font-size: 42px;
	line-height: 1.1;
	text-transform: uppercase;
	margin-bottom: 24px;
}
.hero__subtitle { font-size: 16px; line-height: 1.6; max-width: 400px; margin-bottom: 24px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
.hero__stats { display: flex; flex-direction: column; gap: 16px; max-width: 300px; }
.hero__stat { display: flex; flex-direction: column; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.25); }
.hero__stat strong { font-family: var(--font-heading); font-style: italic; font-size: 14px; text-transform: uppercase; margin-bottom: 2px; }
.hero__stat span { font-size: 12px; }

@media (min-width: 768px) {
	.hero {
		min-height: 950px;
		padding-top: 332px;
		padding-bottom: 97.8px;
		/* taglio diagonale in basso a destra (Figma: notch da x 889 a x 812,6 su 61px) */
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 61px), 51.46% calc(100% - 61px), calc(51.46% - 76.6px) 100%, 0 100%);
	}
	.hero__bg-desktop { display: block; position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
	.hero__bg-mobile { display: none; }
	.hero__topgrad { height: 345px; }
	.hero__title { font-size: 84px; line-height: 89.58px; margin-bottom: 33.84px; }
	.hero__subtitle { font-size: 24px; line-height: 32.78px; max-width: 555px; margin-bottom: 31.65px; }
	.hero__ctas { gap: 20px; margin-bottom: 77px; }
	.hero__stats { flex-direction: row; gap: 32px; max-width: none; margin-left: 53.13%; }
	.hero__stat { flex: 0 0 201px; border-bottom: none; padding-bottom: 0; }
	.hero__stat strong { font-size: 22.16px; line-height: 29.3px; margin-bottom: -0.79px; }
	.hero__stat span { font-size: 19px; line-height: 26px; }
}

/* ==========================================================================
   Section: Un punto di accesso al paddock (intro)
   ========================================================================== */
.section-intro { padding: 64px 0; }
.section-intro__inner { display: flex; flex-direction: column; gap: 32px; }
.section-intro__visual img { width: 100%; max-width: 340px; }
.section-intro__content .body-text { margin: 16px 0 24px; }

@media (min-width: 768px) {
	.section-intro { padding: 120px 0 158px; overflow: hidden; }
	.section-intro__inner { display: block; position: relative; }
	.section-intro__visual { position: absolute; left: -364px; top: 39px; width: 1025px; }
	.section-intro__visual img { width: 1025px; max-width: none; }
	.section-intro__content { width: 705px; margin-left: auto; }
	.section-intro .heading-xl, .section-intro .eyebrow { text-align: left; }
	.section-intro .eyebrow { font-size: 24px; line-height: 32.8px; letter-spacing: 3.12px; margin-bottom: 15px; }
	.section-intro .heading-xl { font-size: 64px; line-height: 67px; }
	.section-intro .body-text { font-size: 24px; line-height: 32.78px; max-width: 708px; margin: 52px 0 34.9px; }
}

/* ==========================================================================
   Section: Corsi
   ========================================================================== */
.section-courses { background: #EDF2F7; padding: 64px 0; }
.section-courses__heading { text-align: center; margin-bottom: 32px; }

.course-carousel { display: flex; align-items: center; gap: 8px; }
/* quando le schede entrano tutte non c'e' niente da scorrere: le frecce
   sparirebbero comunque a vuoto, meglio non farle vedere */
.course-carousel.is-fermo .course-carousel__arrow { display: none !important; }
.course-carousel__dots.is-fermo { display: none !important; }
.course-carousel__arrow {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	display: none;
}
.course-carousel__arrow-bg { width: 100%; height: 100%; }
.course-carousel__arrow-icon { position: absolute; top: 50%; left: 50%; width: 14px; height: auto; }
.course-carousel__arrow-icon--prev { transform: translate(-50%, -50%) rotate(90deg); }
.course-carousel__arrow-icon--next { transform: translate(-50%, -50%) rotate(-90deg); }

.course-cards {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	flex: 1;
	min-width: 0;
}
.course-cards::-webkit-scrollbar { display: none; }
.course-card { scroll-snap-align: start; flex: 0 0 85%; }

.course-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.course-carousel__dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(20, 33, 47, 0.3); padding: 0; cursor: pointer; }
.course-carousel__dot.is-active { background: var(--pit-navy); }

.course-card {
	border-radius: 13px;
	overflow: hidden;
	background: var(--pit-card-gradient);
	color: #fff;
	display: flex;
	flex-direction: column;
}
.course-card__media { position: relative; height: 200px; padding: 20px; }
.course-card__bg-desktop { display: none; }
.course-card__bg-mobile { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.course-card__tags { position: relative; z-index: 1; display: flex; gap: 8px; }
.tag { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 52px; font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }

@media (min-width: 768px) {
	.tag { height: 27.6px; padding: 0 8.91px 0 10.56px; border-radius: 52.8px; font-size: 12.674px; line-height: 17.3px; letter-spacing: 1.65px; }
	.tag--outline { border-width: 0.53px; }
}
.tag--solid { background: var(--pit-navy); }
.tag--outline { border: 1px solid #fff; }
.course-card__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.course-card__icon { height: 24px; width: auto; margin-bottom: 4px; }
.course-card__icon--desktop { display: none; }
.course-card__body h3 { font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: 18px; text-transform: uppercase; }
.course-card__body p { font-size: 13px; line-height: 1.5; }
.course-card__meta { display: flex; gap: 15px; font-weight: 700; font-size: 12px; margin-top: 8px; }
.course-card__footer { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid rgba(255,255,255,0.3); }
.course-card__price { font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: 22px; }

@media (min-width: 768px) {
	.section-courses { padding: 87px 0 59.6px; }
	.section-courses__heading { margin-bottom: 69px; }
	.section-courses .eyebrow { font-size: 24px; line-height: 32.8px; letter-spacing: 3.12px; margin-bottom: 15px; }
	.section-courses .heading-xl { font-size: 64px; line-height: 67px; }

	/* frecce: fuori dalla colonna, sui margini di pagina */
	.course-carousel { position: relative; display: block; }
	.course-carousel__arrow {
		display: block;
		position: absolute;
		top: 296.4px;
		transform: translateY(-50%);
		width: 46.1px;
		height: 46.8px;
		border: 0.75px solid var(--pit-navy);
		border-radius: 50%;
	}
	.course-carousel__arrow--prev { left: -95px; }
	.course-carousel__arrow--next { right: -98.1px; }
	.course-carousel__arrow-bg { display: none; }
	.course-carousel__arrow-icon { width: 9px; }

	.course-cards { gap: 34px; overflow-x: auto; }
	.course-card { flex: 0 0 456px; height: 594px; border-radius: 13.21px; scroll-snap-align: start; }
	.course-card__media { height: 276px; flex: 0 0 276px; padding: 0; border-radius: 13.85px 13.85px 0 0; overflow: hidden; }
	.course-card__tags { height: 69.3px; align-items: center; gap: 8.58px; padding: 0 26.41px; }
	.course-card__bg-desktop { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
	/* ritagli immagine identici al Figma (imageTransform per scheda) */
	.course-card--race-engineering .course-card__bg-desktop { object-position: 50% 70.69%; }
	.course-card--aerodinamica .course-card__bg-desktop { object-position: 50% 61.22%; }
	.course-card--telemetria .course-card__bg-desktop {
		inset: auto;
		top: -202.2px;
		left: 0;
		width: 562px;
		max-width: none;
		height: 998.6px;
		object-fit: fill;
	}

	/* fascia scura angolata in fondo alla foto (Figma "Vector 2") */
	.course-card { position: relative; }
	.course-card::after {
		content: "";
		position: absolute;
		left: 0;
		top: 253px;
		width: 351px;
		height: 46px;
		background: #171717;
		clip-path: polygon(0 0, 318.93px 0, 351px 46px, 0 46px);
		z-index: 1;
		pointer-events: none;
	}
	.course-card__body { position: relative; z-index: 2; }
	.course-card__bg-mobile { display: none; }
	.course-card__icon--desktop { display: block; }
	.course-card__icon--mobile { display: none; }
	.course-card__icon { height: 34.5px; width: auto; align-self: flex-start; margin-bottom: 0; }
	.course-card--aerodinamica .course-card__icon { height: 31px; }
	.course-card__body { flex: 0 0 244px; padding: 0 26.41px; gap: 13.21px; }
	.course-card__body h3 { font-size: 24.81px; line-height: 26px; }
	.course-card__body p { font-size: 17.17px; line-height: 23.5px; }
	.course-card--race-engineering .course-card__body p { max-width: 304px; }
	.course-card--aerodinamica .course-card__body p { max-width: 316px; }
	.course-card__meta { margin-top: 19.5px; gap: 20.47px; font-size: 15.73px; line-height: 21.5px; }
	.course-card__footer { flex: 0 0 68px; padding: 0 26.41px; border-top: 0.66px solid #CCCCCC; }
	.course-card__price { font-size: 32.09px; line-height: 33.6px; }
	.course-card__footer .btn {
		min-height: 39.1px;
		padding: 1.74px 5.1px 1.74px 15.6px;
		gap: 8.69px;
		font-size: 12.17px;
		letter-spacing: 1.7px;
		border-radius: 86.9px;
	}
	.course-card__footer .btn img { width: 32.3px; height: 32.3px; }

	.course-carousel__dots { margin-top: 60px; gap: 6.4px; }
	.course-carousel__dot { width: 15.4px; height: 15.4px; }
}

/* ==========================================================================
   Section: Roadmap (dalle competenze al paddock)
   ========================================================================== */
.section-roadmap {
	background: linear-gradient(-57.09deg, #310F3E -1.05%, #000000 101.5%), linear-gradient(180deg, #FFFFFF 0%, #EFEFEF 100%);
	color: #fff;
	padding: 64px 0;
}
.section-roadmap__inner { display: flex; flex-direction: column; gap: 32px; }
.section-roadmap .body-text { margin-top: 16px; }
.section-roadmap .body-text + .body-text { margin-top: 12px; }
.section-roadmap__visual img { width: 100%; }

@media (min-width: 768px) {
	.section-roadmap {
		padding: 126px 0 0;
		min-height: 964px;
		/* taglio diagonale in basso a sinistra (Figma: notch da x 838 a x 903,6 su 52,8px) */
		clip-path: polygon(0 0, 100% 0, 100% 100%, calc(48.50% + 65.6px) 100%, 48.50% calc(100% - 52.8px), 0 calc(100% - 52.8px));
	}
	.section-roadmap__inner { display: block; position: relative; }
	.section-roadmap__content { width: 649px; }
	.section-roadmap__visual { position: absolute; left: 690px; top: 88px; width: 830px; height: 554px; overflow: hidden; }
	.section-roadmap__visual img { position: absolute; left: -38.8px; top: -51px; width: 1050px; height: 646.4px; max-width: none; }
	.section-roadmap .eyebrow { font-size: 24px; line-height: 32.8px; letter-spacing: 3.12px; margin-bottom: 15px; }
	.section-roadmap .heading-xl { font-size: 64px; line-height: 67px; }
	.section-roadmap .body-text { font-size: 24px; line-height: 32.784px; max-width: 557px; margin-top: 103px; }
	.section-roadmap .body-text + .body-text { margin-top: 65.57px; }
}

/* ==========================================================================
   Section: Lo studio diventa esperienza
   ========================================================================== */
.section-studio { padding: 64px 0; overflow: hidden; }
.section-studio__inner { position: relative; display: flex; flex-direction: column; gap: 32px; }
.section-studio__visual { order: -1; }
.section-studio__features { position: relative; }
.section-studio__features-bg { display: none; }
.section-studio__photo { position: relative; z-index: 1; }
.checklist { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.checklist li { display: flex; align-items: center; gap: 18px; font-size: 15px; }
.checklist img { width: 20px; height: 20px; flex-shrink: 0; }

@media (min-width: 768px) {
	.section-studio { padding: 153px 0 98px; min-height: 769px; }
	.section-studio__inner { display: block; position: relative; }
	.section-studio__content { width: auto; }
	.section-studio .eyebrow { font-size: 24px; line-height: 32.8px; letter-spacing: 3.12px; margin-bottom: 15px; }
	.section-studio .heading-xl { font-size: 64px; line-height: 67px; width: 430px; }
	.section-studio .body-text { position: relative; font-size: 24px; line-height: 32.784px; width: 1000px; max-width: 100%; margin: 215px auto 0; text-align: center; text-wrap: balance; }

	.section-studio__visual { position: absolute; left: 433px; top: 17px; }
	.section-studio__photo { width: 745px; height: 520px; object-fit: cover; mix-blend-mode: multiply; }

	/* riquadro bianco con angolo tagliato (Figma "Rectangle 25") */
	.section-studio__features { position: absolute; left: 1156px; top: 0; width: 385px; height: 252px; }
	.section-studio__features-bg { display: block; position: absolute; inset: 0; width: 385px; height: 252px; transform: scale(-1); }
	.section-studio__features .checklist { position: relative; margin: 0; padding: 39px 0 0 27px; gap: 27.5px; }
	.checklist li { gap: 22px; font-size: 18px; line-height: 24.6px; }
	.checklist li:nth-child(1) img { width: 24px; height: 20px; }
	.checklist li:nth-child(2) img { width: 23px; height: 26px; }
	.checklist li:nth-child(3) img { width: 21px; height: 21px; }
	.checklist li:nth-child(4) img { width: 24px; height: 22px; }
}

/* ==========================================================================
   CTA banner (aziende)
   ========================================================================== */
.cta-banner {
	background: #fff;
	position: relative;
	z-index: 5;
	padding-top: 40px;
	margin-bottom: -60px;
}
.cta-banner__card {
	background: linear-gradient(135deg, var(--pit-violet), var(--pit-magenta) 55%, var(--pit-red));
	color: #fff;
	border-radius: 20px;
	padding: 32px 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-shadow: 0 30px 60px -20px rgba(20, 33, 47, 0.5);
}
.cta-banner .heading-xl { font-size: 32px; }
.cta-banner .body-text { font-size: 16px; max-width: 500px; }

@media (min-width: 768px) {
	/* bianco solo fino a dove comincia il nero del footer, poi trasparente */
	.cta-banner {
		padding-top: 0;
		height: 188px;
		margin-bottom: 0;
		background: #fff;
	}
	.cta-banner > .pit-container { max-width: none; padding: 0; }
	/* Titolo e colonna destra sono due colonne con ritmi verticali diversi
	   (nel Figma il titolo e piu alto della colonna destra): il titolo resta
	   fuori dal flusso, altrimenti spingerebbe giu il bottone. */
	.cta-banner__card {
		display: block;
		position: relative;
		width: 100%;
		max-width: 1595px;
		margin: 0 auto;
		padding: 82px 0 95px;
		border-radius: 18px;
		box-shadow: none;
		background: linear-gradient(94.47deg, #14212F -21.25%, #8900E3 29.72%, #A600AA 71.18%, #FF0000 114.01%);
	}
	.cta-banner .heading-xl {
		position: absolute;
		left: 6.46%;
		top: 82px;
		width: 44%;
		font-size: 64px;
		line-height: 67px;
	}
	.cta-banner .body-text {
		position: relative;
		margin: 14px 0 0 59.44%;
		width: 30.78%;
		max-width: none;
		font-size: 24px;
		line-height: 32.784px;
	}
	.cta-banner .btn { position: relative; margin: 32px 0 0 59.44%; gap: 6px; }
}

/* ==========================================================================
   Responsive helpers
   ========================================================================== */
@media (min-width: 768px) {
	.only-mobile { display: none; }
	.only-desktop { display: block; }
}

/* ==========================================================================
   MOBILE — grafica Figma "Homepage - mobile" (frame 440px)
   ========================================================================== */
@media (max-width: 767px) {
	.pit-container { width: 440px; max-width: none; margin-left: auto; margin-right: auto; padding: 0 38px; }

	/* --- Header --- */
	.site-header { padding-top: 61px; padding-bottom: 0; }
	.site-header__logo img { height: 45px; }
	.site-header__burger img { width: 48px; height: 21px; }

	/* --- Hero --- */
	.hero {
		min-height: 902px;
		padding-top: 293px;
		padding-bottom: 0;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 37px), 75.75% calc(100% - 37px), calc(75.75% - 46.9px) 100%, 0 100%);
	}
	.hero__bg-mobile-scrim { background: rgba(0, 0, 0, 0.38); }
	.hero__topgrad {
		height: 183.8px;
		background: linear-gradient(180deg, rgba(0,0,0,1.0) 0%, rgba(13,13,13,0.95) 5%, rgba(26,26,26,0.9) 10%, rgba(38,38,38,0.85) 15%, rgba(51,51,51,0.8) 20%, rgba(64,64,64,0.75) 25%, rgba(76,76,76,0.7) 30%, rgba(89,89,89,0.65) 35%, rgba(102,102,102,0.6) 40%, rgba(115,115,115,0.55) 45%, rgba(128,128,128,0.5) 50%, rgba(140,140,140,0.45) 55%, rgba(153,153,153,0.4) 60%, rgba(166,166,166,0.35) 65%, rgba(178,178,178,0.3) 70%, rgba(191,191,191,0.25) 75%, rgba(204,204,204,0.2) 80%, rgba(217,217,217,0.15) 85%, rgba(230,230,230,0.1) 90%, rgba(242,242,242,0.05) 95%, rgba(255,255,255,0.0) 100%);
		mix-blend-mode: multiply;
		opacity: 1;
	}
	.hero__title { font-size: 42px; line-height: 45.7px; margin-bottom: 19px; }
	.hero__subtitle { font-size: 16px; line-height: 21.9px; max-width: 290px; margin-bottom: 18px; }
	.hero__ctas { gap: 15.1px; margin-bottom: 152px; }
	.hero__ctas .btn {
		font-size: 10.57px;
		letter-spacing: 1.48px;
		padding: 7.55px 15.1px;
		min-height: 34px;
		border-radius: 75.51px;
	}
	.hero__ctas .btn--icon { padding: 1.51px 2.9px 1.51px 13.9px; gap: 7.55px; }
	.hero__ctas .btn--icon img { width: 28.1px; height: 28.1px; }
	.hero__stats { gap: 20px; max-width: 201px; }
	.hero__stat { padding-bottom: 9px; border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
	.hero__stat strong { font-size: 14px; line-height: 18.1px; margin-bottom: -0.49px; }
	.hero__stat span { font-size: 12px; line-height: 16.4px; }

	/* --- Titoli di sezione (occhiello + titolo) --- */
	.eyebrow { font-size: 12px; line-height: 16.4px; letter-spacing: 1.56px; margin-bottom: 7.5px; }
	.heading-xl { font-size: 32px; line-height: 33.5px; }
	.body-text { font-size: 16px; line-height: 21.9px; }

	/* --- Un punto di accesso al paddock --- */
	.section-intro { padding: 70px 0 212px; overflow: hidden; }
	.section-intro__inner { display: block; position: relative; }
	.section-intro__content .body-text { margin: 30.5px 0 32px; }
	.section-intro__visual { position: absolute; left: -61px; top: 273px; width: 599px; }
	.section-intro__visual img { width: 599px; max-width: none; }
	.section-intro .btn {
		position: relative;
		z-index: 1;
		min-height: 37.9px;
		padding: 1.68px 3.4px 1.68px 13px;
		gap: 8.41px;
		font-size: 12px;
		letter-spacing: 1.68px;
		border-radius: 84.13px;
	}
	.section-intro .btn img { width: 31.3px; height: 31.3px; }

	/* --- Corsi --- */
	.section-courses { padding: 62px 0 36.5px; }
	.section-courses__heading { margin-bottom: 48.5px; }
	/* carosello a tutta larghezza: le schede laterali sbucano da entrambi i lati */
	.course-carousel { margin: 0 -38px; }
	.course-cards {
		gap: 15px;
		padding: 0 51.4px;
		scroll-padding: 0 51.4px;
	}
	.course-card { scroll-snap-align: center; }
	.course-card { flex: 0 0 336.4px; height: 438.2px; border-radius: 9.74px; }
	.course-card__media { height: 203.6px; flex: 0 0 203.6px; padding: 0; border-radius: 10.2px 10.2px 0 0; overflow: hidden; }
	.course-card__tags { height: 51.1px; align-items: center; gap: 6.33px; padding: 0 19.48px; }
	.tag { height: 19.9px; padding: 0 6.5px 0 7.79px; border-radius: 38.95px; font-size: 10px; line-height: 13.7px; letter-spacing: 1.3px; }
	.tag--outline { height: 21.8px; border-width: 0.39px; }
	.course-card__body { flex: 0 0 180px; padding: 0 19.48px; gap: 9.74px; }
	.course-card__icon { height: 25.46px; width: auto; align-self: flex-start; margin-bottom: 0; }

	/* stessa fascia scura angolata del desktop, in scala: la scheda qui e'
	   larga 336,4 invece di 456, cioe' il 73,77% */
	.course-card { position: relative; }
	.course-card::after {
		content: "";
		position: absolute;
		left: 0;
		top: 186.6px;
		width: 258.9px;
		height: 33.9px;
		background: #171717;
		clip-path: polygon(0 0, 235.3px 0, 258.9px 33.9px, 0 33.9px);
		z-index: 1;
		pointer-events: none;
	}
	.course-card__body { position: relative; z-index: 2; }
	.course-card__body h3 { font-size: 20px; line-height: 19.2px; }
	.course-card__body p { font-size: 14px; line-height: 19.1px; }
	.course-card__meta { margin-top: 10.7px; gap: 15.1px; font-size: 14px; line-height: 19.1px; }
	.course-card__footer { flex: 0 0 50.2px; padding: 0 19.48px; border-top: 0.49px solid #CCCCCC; }
	.course-card__price { font-size: 23.67px; line-height: 24.8px; }
	.course-card__footer .btn {
		min-height: 28.8px;
		padding: 1.28px 3.8px 1.28px 9.5px;
		gap: 6.41px;
		font-size: 10px;
		letter-spacing: 1.4px;
		border-radius: 64.11px;
	}
	.course-card__footer .btn img { width: 23.9px; height: 23.9px; }
	.course-carousel__dots { margin-top: 36.8px; gap: 4.3px; }
	.course-carousel__dot { width: 10.5px; height: 10.5px; }

	/* --- Dalle competenze al paddock --- */
	.section-roadmap {
		padding: 58px 0 66px;
		background:
			linear-gradient(-33.71deg, #310F3E 7.46%, #000000 73.68%),
			linear-gradient(180deg, #FFFFFF 41.89%, #EFEFEF 160.11%);
		background-size: 1728px 816px;
		background-position: -762px 0;
		background-repeat: no-repeat;
		clip-path: polygon(0 0, 100% 0, 100% 100%, calc(44.55% + 65.8px) 100%, 44.55% calc(100% - 44.7px), 0 calc(100% - 44.7px));
	}
	.section-roadmap__inner { display: block; position: relative; }
	.section-roadmap .body-text { margin-top: 26.5px; max-width: none; }
	.section-roadmap .body-text + .body-text { margin-top: 21.9px; }
	.section-roadmap__visual { margin: 26px 0 0 -25px; width: 424px; }
	.section-roadmap__visual img { width: 424px; max-width: none; }

	/* --- Lo studio diventa esperienza --- */
	.section-studio { padding: 42px 0 30px; overflow: hidden; }
	.section-studio__inner { display: block; position: relative; }
	.section-studio__visual { position: relative; left: -42px; top: auto; width: 504px; margin-top: 12px; }
	.section-studio__photo { width: 504px; max-width: none; height: 352px; object-fit: cover; mix-blend-mode: multiply; }
	.section-studio .body-text { margin-top: 26.5px; }
	.section-studio__features { position: relative; width: 360px; height: 196px; margin: 8px 0 0 4px; }
	.section-studio__features-bg { display: block; position: absolute; inset: 0; width: 360px; height: 196px; transform: scale(-1); }
	.section-studio__features .checklist { position: relative; margin: 0; padding: 23px 0 0 44px; gap: 22.5px; }
	.checklist li { gap: 18px; font-size: 15px; line-height: 20.5px; }
	.checklist li:nth-child(1) img { width: 20.3px; height: 16.9px; }
	.checklist li:nth-child(2) img { width: 19.4px; height: 22px; }
	.checklist li:nth-child(3) img { width: 17.7px; height: 17.7px; }
	.checklist li:nth-child(4) img { width: 20.3px; height: 18.6px; }

	/* --- Banner aziende --- */
	.cta-banner {
		padding-top: 0;
		height: 63px;
		margin-bottom: 0;
		background: #fff;
	}
	.cta-banner__card {
		display: block;
		position: relative;
		padding: 57px 0 83px;
		border-radius: 18px;
		box-shadow: none;
		background: linear-gradient(126.25deg, #14212F -24.19%, #8900E3 21.76%, #A600AA 59.12%, #FF0000 97.72%);
	}
	/* titolo nel flusso normale: il testo sta sempre 16px sotto l'ultima riga del
	   titolo, cosi il ritmo della card e lo stesso su tutte le pagine */
	.cta-banner .heading-xl { margin-left: 37px; width: 283px; font-size: 32px; line-height: 33.5px; }
	.cta-banner .body-text { position: relative; margin: 16px 0 0 38px; width: 292px; max-width: none; font-size: 16px; line-height: 21.9px; }
	.cta-banner .btn {
		position: relative;
		margin: 33px 0 0 38px;
		min-height: 35px;
		padding: 1.54px 4.4px 1.54px 14px;
		gap: 7.69px;
		font-size: 12px;
		letter-spacing: 1.68px;
		border-radius: 76.95px;
	}
	.cta-banner .btn img { width: 28.6px; height: 28.6px; }

	/* --- Footer --- */
	.site-footer { background: #000; padding: 406px 0 58.7px; }
	.site-footer .pit-container { padding: 0 42px; }
	.site-footer__inner {
		display: grid;
		grid-template-columns: 213px auto;
		row-gap: 58px;
		column-gap: 0;
	}
	.site-footer__brand { grid-column: 1 / -1; }
	.site-footer__brand img { height: 101px; }
	.site-footer__col { width: auto; }
	.site-footer__col:nth-of-type(5) h3 { width: 108px; }
	.site-footer__col h3 { font-size: 20px; line-height: 26px; margin-bottom: 11px; }
	.site-footer__col ul { gap: 0; }
	.site-footer__col a, .site-footer__col li { font-size: 16px; line-height: 21.9px; }
	.site-footer__social-icons { gap: 4.2px; }
	.site-footer__social-icons > a > img { height: 25px; width: auto; }
	.site-footer__ig { width: 26px; height: 25px; }
	.site-footer__ig img:nth-child(1) { left: 6px; top: 5.5px; width: 14px; height: 14px; }
	.site-footer__ig img:nth-child(2) { left: 9.23px; top: 8.73px; width: 7.55px; height: 7.55px; }
	.site-footer__ig img:nth-child(3) { left: 16.28px; top: 8.12px; width: 1.09px; height: 1.09px; }
	.site-footer__bottom { gap: 0; }
	.site-footer__bottom hr { border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 45px 0 38px; }
	.site-footer__bottom-row { flex-direction: column; gap: 17.7px; align-items: stretch; }
	.site-footer__bottom p { font-size: 14px; line-height: 19.1px; margin-left: 6px; }
	.site-footer__payments { gap: 9.15px; justify-content: center; }
	.site-footer__paybadge { height: 18.3px; border-radius: 3.8125px; padding: 0; }
	.site-footer__paybadge:nth-child(1) { width: 31.3px; }
	.site-footer__paybadge:nth-child(2) { width: 31.3px; }
	.site-footer__paybadge:nth-child(3) { width: 38.1px; }
	.site-footer__paybadge:nth-child(4) { width: 32.8px; gap: 1px; }
	.site-footer__paybadge:nth-child(5) { width: 32.8px; }
	.site-footer__paybadge:nth-child(6) { width: 92.3px; gap: 1.6px; font-size: 7.64px; line-height: 10.4px; }
	.site-footer__paybadge:nth-child(1) img { height: 5.3px; }
	.site-footer__paybadge:nth-child(2) img { height: 8.4px; }
	.site-footer__paybadge:nth-child(3) img { height: 6.9px; }
	.site-footer__paybadge:nth-child(4) img { height: 8.4px; }
	.site-footer__paybadge:nth-child(5) img { height: 8.4px; }
	.site-footer__paybadge:nth-child(6) img { height: 6.9px; }
}



/* comandi nativi del video (Safari): li vogliamo a tutta larghezza */
.media-controls,
.media-controls.mac.inline:not(.audio) {
	width: 100% !important;
	height: 100% !important;
}

/* ==========================================================================
   Passaggio del mouse: i pulsanti girano i colori.
   Chiaro diventa scuro e scuro diventa chiaro, senza spostamenti.
   ========================================================================== */

.btn,
.area-btn,
.chip,
.corsi-filtro,
.player__nav-prev,
.player__nav-next,
.player__resource-cta,
.faq-aiuto__btn,
.ct-btn,
.corsi-carousel__arrow,
.course-carousel__arrow-bg,
.course-carousel__arrow-icon {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

/* --- da scuro a chiaro --- */
/* il contorno interno serve perche' su fondo bianco un pulsante bianco
   sparirebbe: si disegna dentro, cosi' il pulsante non cambia misura */
.btn--dark:hover,
.area-btn--dark:hover,
.player__nav-next:hover,
.player__resource-cta:hover,
.faq-aiuto__btn:hover,
.chip.is-active:hover {
	background-color: #fff;
	color: var(--pit-navy);
	border-color: var(--pit-navy);
	box-shadow: inset 0 0 0 1px var(--pit-navy);
}

/* --- da chiaro a scuro --- */
.btn--white:hover,
.area-btn--white:hover,
.area-btn--ghost:hover,
.chip:hover,
.corsi-filtro:hover,
.player__nav-prev:hover,
.ct-btn:hover,
.corsi-carousel__arrow:hover {
	background-color: var(--pit-navy);
	color: #fff;
	border-color: var(--pit-navy);
}

/* i tondini con la freccia dentro ai pulsanti girano anche loro */
.btn--dark:hover img,
.btn--white:hover img,
.area-btn:hover img.area-btn__icona,
.player__nav-next:hover img,
.player__resource-cta:hover img,
.faq-aiuto__btn:hover img {
	filter: invert(1);
}

/* le frecce dei caroselli della home sono due disegni, si girano uguale */
.course-carousel__arrow:hover .course-carousel__arrow-bg,
.course-carousel__arrow:hover .course-carousel__arrow-icon {
	filter: invert(1);
}

/* i pulsanti spenti non reagiscono */
.btn.is-disabled:hover,
.area-btn:disabled:hover,
.player__nav-prev.is-disabled:hover,
.player__nav-next.is-disabled:hover {
	background-color: inherit;
	color: inherit;
}

/* dentro le schede reagisce gia' tutta la scheda: il tasto resta com'e' */
.course-card .btn:hover,
.corsi-cards .btn:hover,
.module-card .btn:hover {
	background-color: inherit;
	color: inherit;
}
.course-card .btn:hover img,
.corsi-cards .btn:hover img,
.module-card .btn:hover img { filter: none; }

/* --- entrata dei contenuti (la classe la mette il JS: senza JS si vede tutto) --- */
.pit-entra {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.pit-entra.is-dentro {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.pit-entra { opacity: 1; transform: none; transition: none; }
}

/* Sfondi delle testate interne (Chi siamo, Docenti, Corsi) su desktop: i file
   sono piu scuri di quello della Home (luminosita media 38 contro 55), quindi
   si riallinea il colore. Da togliere quando saranno caricati i file originali. */
@media (min-width: 768px) {
	.chisiamo-page .pagehero__bg--desktop,
	.docenti-page .pagehero__bg,
	.corsi-page .pagehero__bg--desktop { filter: brightness(1.45) saturate(1.25); }
}

/* foto card caricata da wp-admin (immagine del prodotto): niente ritagli fissi del Figma */
.course-card.course-card--has-img .course-card__bg-desktop,
.course-card.course-card--has-img .course-card__bg-mobile {
	inset: 0; top: 0; left: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%;
}

/* menu a 5 voci: font e spazi calibrati per larghezza, cosi il logo non resta attaccato */
@media (min-width: 768px) and (max-width: 1919px) {
	.site-header__inner { column-gap: 40px; }
	.site-header__nav { gap: 6px; }
	.site-header__nav a { font-size: 16px; letter-spacing: 1.8px; padding: 10px 10px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.site-header__inner { column-gap: 20px; }
	.site-header__logo img { height: 48px; }
	.site-header__nav { gap: 0; }
	.site-header__nav a { font-size: 13px; letter-spacing: 1.2px; padding: 10px 8px; }
}
/* la barra amministratore sposta il sito in basso: la fascia sopra l'header resta scura */
html { background: #0b0a12; }