/* ==========================================================================
   Area riservata — Figma "Area riservata - profilo studente" (232-1381)
   ========================================================================== */

.area-page { position: relative; }
.area-page::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background: var(--pit-navy);
	z-index: 0;
}
.area-grid { position: relative; }

.area-user { display: flex; align-items: center; }
.area-user__avatar { flex: 0 0 auto; display: block; border-radius: 50%; overflow: hidden; background: #D9D9D9; }
.area-user__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.area-user__name {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--pit-navy);
	margin: 0;
}
.area-user__role { text-transform: uppercase; color: var(--pit-navy); margin: 0; }

.area-panel { position: relative; background: #EDF2F7; }
.area-menu__title {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--pit-navy);
	margin: 0;
}
.area-menu ul { list-style: none; margin: 0; padding: 0; }
.area-menu a { display: flex; align-items: center; text-decoration: none; color: var(--pit-navy); }
.area-menu__icon { flex: 0 0 auto; }
.area-menu li.is-active a { font-weight: 600; }
.area-menu__sep,
.area-panel__sep { border: 0; border-top: 0.66px solid #868686; height: 0; }
.area-support { color: var(--pit-navy); margin: 0; }
.area-esci {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--pit-navy);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.18s ease;
}
.area-esci:hover,
.area-esci:focus-visible { color: #731C1C; }
.area-esci__icona { flex: 0 0 auto; }
.area-navbar { display: none; }
.area-side__chiudi { display: none; }
@media (max-width: 767px) { .area-navbar { display: block; } .area-side__chiudi { display: block; } }

.area-title {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--pit-navy);
	margin: 0;
}
.area-intro { color: var(--pit-navy); margin: 0; }

.area-stat,
.area-card,
.area-table { border: 1px solid #868686; border-radius: 10px; box-sizing: border-box; }
.area-stat { display: flex; flex-direction: column; }
.area-stat__label {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--pit-navy);
	margin: 0;
}
.area-stat__value {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	color: var(--pit-navy);
	margin: 0;
}

.area-card { display: flex; flex-direction: column; justify-content: flex-start; position: relative; overflow: hidden; }
.area-card__title {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}
.area-card__sub { margin: 0; }
/* Figma "Frame 343": foto della vettura ritagliata come nel progetto, con sopra
   la sfumatura dal nero trasparente al navy */
.area-card--corso {
	color: #fff;
	background-color: #14212F;
	background-image:
		linear-gradient(270deg, rgba(0, 0, 0, 0.3) 0%, #14212F 53%),
		url("../images/desktop/area/card-corso.jpg");
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 100%, 350.2px 592.8px;
	background-position: 0 0, 217.8px -287.8px;
}
.area-card--corso .area-card__title,
.area-card--corso .area-card__sub,
.area-card--corso .area-card__percent { color: #fff; }
/* Figma "Frame 344": trama a puntini al 47% con sopra l'alone bianco */
.area-card--cv {
	color: var(--pit-navy);
	background-color: #fff;
	background-image:
		radial-gradient(136.8px 220.1px at 81.1% 69.2%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0) 58%),
		url("../images/desktop/area/card-cv.png");
	background-repeat: no-repeat, no-repeat;
	background-size: 100% 100%, 442px 426px;
	background-position: 0 0, 220.8px -97px;
}
.area-card--cv::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.53);
	pointer-events: none;
}
.area-card--cv > * { position: relative; z-index: 1; }
.area-card--cv .area-card__title,
.area-card--cv .area-card__sub { color: var(--pit-navy); }

.area-progress { width: 100%; border-radius: 91.5px; background: rgba(255, 255, 255, 0.24); overflow: hidden; }
/* nel Figma la barra va dal rosso al viola, da sinistra a destra */
.area-progress__fill { display: block; height: 100%; border-radius: 91.5px; background: linear-gradient(90deg, #F0001C 0%, #A600AA 100%); }
.area-card__percent { margin: 0; text-align: right; }

/* sono sia <a> sia <button>: qui si azzerano bordo e sfondo di sistema,
   altrimenti il browser disegna il suo contorno chiaro attorno alla pillola */
.area-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border: 0;
	border-radius: 86.9px;
	font-family: var(--font-body);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
	background-clip: padding-box;
}
.area-btn:focus-visible { outline: 2px solid #8900E3; outline-offset: 2px; }
.area-btn > span { white-space: nowrap; }
/* dentro le schede il tasto non si allarga a tutta la colonna */
.area-card .area-btn { align-self: flex-start; }
.area-btn--white { background: #fff; color: var(--pit-navy); }
.area-btn--dark { background: var(--pit-navy); color: #fff; }
.area-btn--ghost { border: 1px solid var(--pit-navy); background: transparent; color: var(--pit-navy); justify-content: center; }
.area-btn img { flex: 0 0 auto; display: block; }
.area-card__actions { display: flex; align-items: center; }

.area-section-title {
	font-family: var(--font-heading);
	font-style: italic;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--pit-navy);
	margin: 0;
}
.area-table { display: flex; flex-direction: column; }
.area-table__row { display: grid; align-items: center; color: var(--pit-navy); }
.area-table__row--head { font-weight: 700; }
.area-table__go { color: var(--pit-navy); text-decoration: none; font-family: var(--font-heading); font-style: italic; font-weight: 700; text-align: right; }

/* ==========================================================================
   DESKTOP — base 1728
   ========================================================================== */
@media (min-width: 768px) {
	.area-page { padding-top: 151px; }
	.area-page::before { height: 151px; }

	.area-grid {
		display: grid;
		grid-template-columns: 563px 1165px;
		width: 1728px;
		margin: 0 auto;
		align-items: stretch;
	}
	.area-side { display: flex; flex-direction: column; }
	/* riga grigia sotto all'intestazione (Figma Line 17): nel progetto passa
	   dietro al pannello grigio, quindi si vede solo da dove il pannello finisce */
	.area-grid::after {
		content: "";
		position: absolute;
		left: 563px;
		right: 0;
		top: 222px;
		height: 0;
		/* 0,66 px di #868686 su bianco: il browser non disegna mezzi pixel,
		   quindi si usa il colore che ne risulta */
		border-top: 1px solid #B3B3B3;
	}

	/* --- colonna sinistra --- */
	.area-user { margin-top: 79px; padding-left: 52px; height: 140px; gap: 47px; }
	.area-user__avatar { width: 140px; height: 140px; }
	.area-user__name { font-size: 34px; line-height: 50px; white-space: nowrap; }
	.area-user__role { font-size: 20.165px; line-height: 50px; }

	/* pannello grigio: parte a 373 e arriva al footer, con lo scalino in alto */
	/* il pannello arriva fino al footer; il blocco Supporto sta in fondo, alla
	   stessa quota in cui finisce la tabella "I miei corsi" */
	.area-panel {
		margin-top: 3px;
		width: 563px;
		min-height: 1085px;
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		padding: 76px 0 60px;
		clip-path: polygon(0 37.33px, 171px 37.33px, 197.1px 0, 100% 0, 100% 100%, 0 100%);
	}
	.area-menu { padding: 0 50px 0 62px; }
	.area-menu__title { font-size: 34px; line-height: 46px; }
	.area-menu ul { display: flex; flex-direction: column; gap: 45px; margin-top: 45px; }
	.area-menu a { gap: 22px; font-size: 24px; line-height: 32.784px; }
	.area-menu__sep { margin: 45px 0; }
	.area-menu ul + .area-menu__sep { margin-top: 45px; }
	.area-panel__sep { margin: 45px 50px 0 62px; margin-top: auto; }
	.area-support { margin: 19px 50px 0 62px; font-size: 24px; line-height: 32.784px; }
	/* sta in fondo al menu, sotto all'ultima voce, con lo stesso passo delle altre */
	.area-menu .area-esci { margin-top: 45px; font-size: 24px; line-height: 32.784px; gap: 22px; }
	.area-menu .area-esci__icona { width: 22px; height: 22px; }

	/* --- colonna destra --- */
	.area-main { padding: 0 70px 60px 68px; }
	.area-title { margin-top: 96px; font-size: 64px; line-height: 67px; }
	/* riquadro alto 88 come nel Figma: cosi' quello che viene dopo resta in quota */
	.area-intro { margin-top: 99px; width: 608px; height: 88px; font-size: 24px; line-height: 32.784px; }

	.area-stats { display: grid; grid-template-columns: 274px 274px 191px 231px; gap: 20px; margin-top: 35px; }
	.area-stat { height: 179px; padding: 30px; gap: 7px; }
	.area-stat__label { font-size: 24.81px; line-height: 25.97px; }
	.area-stat__value { font-size: 64px; line-height: 61px; margin-top: 7px; }

	.area-cards { display: grid; grid-template-columns: 568px 442px; gap: 17px; margin-top: 25px; }
	.area-cards--altri { grid-template-columns: 568px; margin-top: 17px; }
	/* misure interne del Figma (nodo 232-1494): titolo 324, sottotitolo 510x63,
	   barra a 15 dal sottotitolo, tasto a 41 dal blocco di testo */
	.area-card { height: 271px; padding: 30px 30px 17px; }
	/* dentro un riquadro alto fisso i blocchi non devono schiacciarsi */
	.area-card > * { flex-shrink: 0; }
	.area-card__title { font-size: 24.81px; line-height: 25.97px; }
	.area-card--corso .area-card__title { width: 324px; height: 45px; }
	.area-card__sub { margin-top: 15px; font-size: 18px; line-height: 24.588px; }
	.area-card--corso .area-card__sub { width: 510px; height: 63px; }
	.area-card--cv .area-card__title { width: 324px; height: 45px; }
	.area-card--cv .area-card__sub { width: 289px; height: 50px; }
	.area-card__percent { position: absolute; right: 30px; top: 144px; margin: 0; font-size: 12px; line-height: 16.392px; }
	.area-progress { width: 510px; height: 4.2px; margin-top: 15px; }
	/* Figma 232-1503: pillola 202x40, testo a 16 in una casella da 149,
	   tondo 32,3 a 4,7 dal bordo destro */
	.area-card--corso .area-btn { margin-top: 41px; width: 202px; min-width: 0; height: 40px; padding: 0 4.7px 0 16px; font-size: 12.17px; line-height: 16.62px; letter-spacing: 1.7px; }
	.area-card--corso .area-btn { gap: 0; }
	.area-card--corso .area-btn > span { width: 149px; flex: 0 0 149px; }
	.area-card--cv .area-card__actions { margin-top: 73px; }
	.area-card--corso .area-btn img { width: 32.3px; height: 32.3px; }
	.area-card__actions { gap: 18px; }
	.area-btn--dark { min-width: 139px; width: auto; height: 40px; padding: 0 3.9px 0 16px; font-size: 12.17px; line-height: 16.62px; letter-spacing: 1.7px; }
	.area-btn--dark img { width: 32.3px; height: 32.3px; }
	.area-btn--ghost { min-width: 177px; width: auto; height: 40px; padding: 0 20px; font-size: 12.17px; line-height: 16.62px; letter-spacing: 1.7px; }

	.area-section-title { margin-top: 84px; font-size: 24.81px; line-height: 25.97px; }
	.area-table { width: 1027px; margin-top: 25px; padding: 20px; gap: 19px; }
	.area-table__row { grid-template-columns: 354px 226px 206px 176px 25px; min-height: 60px; font-size: 18px; line-height: 24.588px; border-bottom: 1px solid #868686; }
	.area-table__row--head { min-height: 62px; font-size: 24px; line-height: 32.784px; }
	.area-table__row:last-child { border-bottom: 0; }
	.area-table__row--vuota { grid-template-columns: 1fr; }
	.area-table__go { font-size: 20px; line-height: 25.97px; }

	.area-page ~ .site-footer { padding-top: 96px; }
}

/* ==========================================================================
   MOBILE — base 440, Figma 232-6712
   ========================================================================== */
@media (max-width: 767px) {
	.area-page { padding-top: 127px; }
	.area-page::before { height: 127px; }
	.area-grid { display: flex; flex-direction: column; padding: 0 37px; }

	/* --- pannello del menu (Figma "Sidebar mobile - area riservata", 232-7105):
	   si apre dal tasto a righe in alto a destra e copre la pagina fino alla
	   barra dei tasti in basso --- */
	.area-side {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 78px;
		z-index: 50;
		/* la parte in alto e' un blocco pieno, non un velo sopra alla pagina:
		   nel progetto il logo e il tasto del menu spariscono del tutto.
		   I colori sono presi dalla grafica, riga per riga. */
		background: linear-gradient(
			180deg,
			#14212F 0,
			#14212F 108px,
			rgb(22, 34, 49) 112px,
			rgb(32, 44, 58) 120px,
			rgb(40, 51, 65) 125px,
			rgb(50, 60, 74) 130px,
			rgb(62, 72, 85) 140px,
			rgb(67, 77, 89) 155px,
			rgb(67, 77, 89) 100%
		);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.22s ease, visibility 0.22s ease;
	}
	body.pit-area-menu .area-side { opacity: 1; visibility: visible; }
	body.pit-area-menu { overflow: hidden; }

	/* tasto per chiudere, dove sta il tasto a righe della pagina */
	.area-side__chiudi {
		position: absolute;
		left: 357px;
		/* sopra al nome: alla quota del tasto a righe finirebbe sulla scritta */
		top: 8px;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		cursor: pointer;
		z-index: 2;
	}
	.area-side__chiudi span {
		position: absolute;
		left: 9px;
		top: 20.5px;
		width: 26px;
		height: 3px;
		border-radius: 2px;
		background: #D9D9D9;
		transition: background 0.18s ease;
	}
	.area-side__chiudi span:first-child { transform: rotate(45deg); }
	.area-side__chiudi span:last-child { transform: rotate(-45deg); }
	.area-side__chiudi:hover span,
	.area-side__chiudi:focus-visible span { background: #fff; }
	.area-side__chiudi:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }

	.area-side .area-user {
		position: absolute;
		left: 40.6px;
		top: 61px;
		height: 109.4px;
		margin: 0;
		padding: 0;
		gap: 36.8px;
	}
	.area-side .area-user__avatar { width: 109.4px; height: 109.4px; }
	.area-side .area-user__name { color: #fff; font-size: 26.572px; line-height: 28.9px; }
	.area-side .area-user__role { color: #fff; font-size: 15.76px; line-height: 40px; margin-top: 4.7px; }

	/* pannello chiaro con lo scalino in alto a sinistra */
	.area-side .area-panel {
		position: absolute;
		left: 0;
		right: 0;
		top: 172.8px;
		bottom: 0;
		width: auto;
		min-height: 0;
		margin: 0;
		padding: 59.4px 37px 40px 48.5px;
		overflow-y: auto;
		clip-path: polygon(167.44px 0, 100% 0, 100% 100%, 0 100%, 0 21.24px, 133.6px 21.24px);
	}
	.area-side .area-menu { padding: 0; }
	.area-side .area-menu__title { font-size: 26.572px; line-height: 36px; }
	.area-side .area-menu ul { display: flex; flex-direction: column; gap: 35.5px; margin-top: 35.1px; }
	.area-side .area-menu__sep ~ ul { margin-top: 34.4px; }
	.area-side .area-menu a { gap: 0; font-size: 18.757px; line-height: 25.62px; }
	.area-side .area-menu__sep { margin: 35.7px 0 0; }
	.area-side .area-menu__sep + .area-menu__title { margin-top: 34.1px; }
	.area-side .area-panel__sep,
	.area-side .area-support { display: none; }
	/* allineata alle voci del menu: icona piu' spazio danno sempre 34,3 */
	.area-side .area-esci { margin-top: 35.5px; gap: 0; font-size: 18.757px; line-height: 25.62px; }
	.area-side .area-esci__icona { width: 17.2px; height: 17.2px; margin-right: 17.1px; }

	/* icona + spazio danno sempre 34,3: cosi' le scritte partono tutte da 82,8 */
	.area-side .area-menu__icon--griglia { width: 17.2px; height: 17.2px; margin-right: 17.1px; }
	.area-side .area-menu__icon--libro { width: 21.9px; height: 16.4px; margin-right: 12.4px; }
	.area-side .area-menu__icon--spunta { width: 20.3px; height: 19.5px; margin-right: 14px; }
	.area-side .area-menu__icon--candidato { width: 21.9px; height: 13.3px; margin-right: 12.4px; }
	.area-side .area-menu__icon--ordini { width: 18px; height: 18px; margin-right: 16.3px; }
	.area-side .area-menu__icon--persona { width: 15.65px; height: 15.65px; margin-right: 18.65px; }
	.area-side .area-menu__icon--cerca { width: 19.6px; height: 19.6px; margin-right: 14.7px; }
	.area-side .area-menu__icon--lista { width: 16.4px; height: 14.9px; margin-right: 17.9px; }
	.area-side .area-menu__icon--lucchetto { width: 15.65px; height: 21.1px; margin-right: 18.65px; }
	.area-side .area-menu__icon--azienda { width: 17.2px; height: 19.6px; margin-right: 17.1px; }
	.area-side .area-menu__icon--fattura { width: 17.2px; height: 19.6px; margin-right: 17.1px; }
	.area-side .area-menu__icon--crediti { width: 18.8px; height: 18.8px; margin-right: 15.5px; }
	.area-side .area-menu__icon--docente { width: 21.9px; height: 18px; margin-right: 12.4px; }
	/* nel Figma fra la tabella e il footer nero restano 43 px di bianco */
	.area-main { padding-bottom: 43px; }

	/* riga grigia sotto all'introduzione */
	.area-grid::after {
		content: "";
		position: absolute;
		left: -43px;
		right: -43px;
		top: 194.7px;
		height: 0;
		border-top: 0.38px solid #868686;
	}

	.area-title { margin: 53px 0 0 1px; font-size: 32px; line-height: 38.373px; width: 304px; }
	/* riquadro alto 43 come nel Figma, cosi' quello che segue resta in quota */
	.area-intro { margin: 17.7px 0 0 1px; width: 318px; height: 43px; font-size: 16px; line-height: 21.856px; }

	.area-stats { display: grid; grid-template-columns: 172px 174px; gap: 19px; margin: 84.3px 0 0 1px; }
	.area-stat { min-height: 115px; height: auto; padding: 19.085px; gap: 12px; border-width: 0.636px; border-radius: 6.362px; }
	.area-stat__label { font-size: 16px; line-height: 16.52px; }
	.area-stat__value { font-size: 42px; line-height: 38.806px; margin-top: 12px; }

	.area-cards { display: flex; flex-direction: column; gap: 31px; margin-top: 32px; }
	.area-card { height: auto; padding: 19.33px; border-radius: 6.444px; border-width: 0.644px; }
	/* stesso ritaglio del Figma, ricalcolato sulle misure della scheda mobile */
	.area-card--corso {
		min-height: 201px;
		background-size: 100% 100%, 225.7px 439.7px;
		background-position: 0 0, 140.4px -213.5px;
	}
	.area-card--cv {
		min-height: 224.4px;
		padding: 24.84px;
		border-radius: 8.28px;
		border-width: 0.828px;
		background-size: 100% 100%, 366px 352.8px;
		background-position: 0 0, 182.8px -80.3px;
	}
	.area-card__title { font-size: 20px; line-height: 21.5px; }
	.area-card--corso .area-card__title { width: 209px; height: 29px; }
	.area-card--cv .area-card__title { width: 268.3px; height: 43px; }
	.area-card__sub { margin-top: 19px; font-size: 12px; line-height: 16.392px; }
	.area-card--corso .area-card__sub { width: 328.6px; height: 40.6px; }
	.area-card--cv .area-card__sub { width: 193px; height: 32px; margin-top: 12.42px; }
	.area-card__percent { position: absolute; right: 19.33px; top: 91.8px; margin: 0; font-size: 9px; line-height: 12.294px; }
	.area-progress { width: 328.6px; height: 2.7px; margin-top: 19px; }
	.area-card--corso .area-btn { margin-top: 19px; min-width: 164px; width: auto; height: 33px; padding: 0 3.1px 0 11.7px; font-size: 10px; line-height: 13.66px; letter-spacing: 1.4px; }
	.area-card--corso .area-btn img { width: 26.8px; height: 26.8px; }
	.area-card--cv .area-card__actions { flex-direction: row; align-items: center; gap: 14.9px; margin-top: 63.6px; }
	.area-btn--dark { min-width: 115.1px; width: auto; height: 33.1px; padding: 0 3.1px 0 12.3px; font-size: 10px; line-height: 13.66px; letter-spacing: 1.4px; }
	.area-btn--dark img { width: 26.8px; height: 26.8px; }
	.area-btn--ghost { min-width: 146.6px; width: auto; height: 33.1px; padding: 0 15px; font-size: 10px; line-height: 13.66px; letter-spacing: 1.4px; }

	.area-section-title { margin: 24.6px 0 0; font-size: 20px; line-height: 27.362px; }
	/* 0,431 px di #868686: a schermo diventa questo grigio chiaro */
	/* nel Figma sotto all'ultima riga non c'e' imbottitura: la tabella e' alta 137 */
	.area-table { width: 365px; margin-top: 16.9px; padding: 8.62px 8.62px 0.5px; gap: 8.19px; border-radius: 4.31px; border: 1px solid #CBCBCB; }
	/* riga: nome e stato incolonnati nella prima colonna, poi progresso, azione
	   e la freccia, come nel Figma mobile */
	/* 8 px passati dalla colonna Progresso a quella Azione: "Richiedi attestato"
	   aveva solo 7 px di margine e su Safari andava a capo */
	.area-table__row {
		grid-template-columns: 152.6px 91.4px 89.2px 15.5px;
		grid-template-rows: auto auto;
		align-items: center;
		min-height: 42.4px;
		font-size: 9px;
		line-height: 12.294px;
		border-bottom: 1px solid #CBCBCB;
		padding: 0;
	}
	.area-table__row:not(.area-table__row--head) > :nth-child(1) { grid-area: 1 / 1; align-self: end; }
	.area-table__row:not(.area-table__row--head) > :nth-child(2) { grid-area: 2 / 1; align-self: start; }
	.area-table__row:not(.area-table__row--head) > :nth-child(2)::before { content: "Stato: "; font-weight: 700; }
	.area-table__row:not(.area-table__row--head) > :nth-child(3) { grid-area: 1 / 2 / 3 / 3; }
	.area-table__row:not(.area-table__row--head) > :nth-child(4) { grid-area: 1 / 3 / 3 / 4; white-space: nowrap; }
	.area-table__row:not(.area-table__row--head) > :nth-child(4) .area-link { white-space: nowrap; }
	.area-table__row:not(.area-table__row--head) > :nth-child(5) { grid-area: 1 / 4 / 3 / 5; }

	/* le intestazioni stanno in alto nella riga, non centrate */
	.area-table__row--head { display: grid; grid-template-columns: 152.6px 91.4px 89.2px; grid-template-rows: auto; min-height: 26.7px; align-items: start; font-size: 12px; line-height: 16.392px; font-weight: 700; }
	.area-table__row--head span:nth-child(2),
	.area-table__row--head span:nth-child(5) { display: none; }
	.area-table__row:last-child { border-bottom: 0; }
	.area-table__row--vuota { grid-template-columns: 1fr; grid-template-rows: auto; }
	.area-table__go { font-size: 8.5px; line-height: 11.19px; }

	.area-avviso { margin-top: 20px; font-size: 14px; }
	.area-modulo { margin-top: 28px; }
	.area-form { gap: 12px; }
	.area-form--profilo { grid-template-columns: 1fr; }
	.area-btn--largo { min-width: 180px; height: 40px; }

	.area-page ~ .site-footer { padding-top: 77px; padding-bottom: 110px; }

	/* --- barra dei tasti in basso (Figma 232-6904) --- */
	.area-navbar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 78px;
		background: #fff;
		box-shadow: 0 -1px 20px rgba(0, 0, 0, 0.25);
		z-index: 60;
	}
	.area-navbar__voce {
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--pit-navy);
		text-decoration: none;
	}
	.area-navbar__voce .area-menu__icon { display: block; }
	.area-navbar__voce--1 { left: 45px; }
	.area-navbar__voce--1 .area-menu__icon { width: 20px; height: 20px; }
	.area-navbar__voce--2 { left: 112px; }
	.area-navbar__voce--2 .area-menu__icon { width: 28px; height: 21px; }
	.area-navbar__voce--3 { left: 217px; }
	.area-navbar__voce--4 { left: 321px; }
	.area-navbar__voce--4 .area-menu__icon { width: 26px; height: 25px; }
	.area-navbar__voce--5 { left: 391px; }
	.area-navbar__voce--5 .area-menu__icon { width: 28px; height: 17px; }

	/* il tondo centrale sporge di 11 px sopra la barra */
	.area-navbar__voce--centro { top: 30px; }
	.area-navbar__cerchio {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 82px;
		height: 82px;
		border-radius: 50%;
		background: var(--pit-navy);
		border: 7px solid #fff;
		box-sizing: border-box;
		color: #fff;
	}
	.area-navbar__cerchio .area-menu__icon { width: 22px; height: 22px; }
}

/* ==========================================================================
   Effetti al passaggio del mouse
   ========================================================================== */
.area-btn { transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; }
.area-btn:hover { transform: translateY(-1px); }
.area-btn--white:hover { background: var(--pit-navy); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
/* al passaggio del mouse il tondo diventa bianco: si cambia proprio l'icona,
   perche' invertendo i colori verrebbe color crema invece che bianco */
.area-btn img.area-btn__icona--hover { display: none; }
.area-btn--white:hover img.area-btn__icona { display: none; }
.area-btn--white:hover img.area-btn__icona--hover { display: block; }
/* Questa riga litigava con la regola generale di style.css, che sul passaggio del
   mouse fa diventare bianchi i bottoni scuri: lo sfondo restava scuro ma il testo
   diventava scuro anche lui, quindi spariva. Qui si tiene solo l'ombra e si lascia
   fare il cambio colore alla regola generale. */
.area-btn--dark:hover { box-shadow: 0 6px 18px rgba(20, 33, 47, 0.28); }
.area-btn--ghost:hover { background: var(--pit-navy); color: #fff; }
.area-btn:active { transform: translateY(0); }

.area-menu a { transition: color 0.2s ease, transform 0.2s ease; }
/* rosso scuro del marchio, quello del riquadro Pass Paddock */
.area-menu a:hover { color: #731C1C; transform: translateX(3px); }
.area-menu a:hover .area-menu__icon { color: #731C1C; }

.area-stat { transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease; }
.area-stat:hover { border-color: var(--pit-navy); box-shadow: 0 8px 24px rgba(20, 33, 47, 0.12); transform: translateY(-2px); }

.area-card { transition: box-shadow 0.25s ease, transform 0.25s ease; }
.area-card:hover { box-shadow: 0 12px 32px rgba(20, 33, 47, 0.16); transform: translateY(-2px); }

/* sulle righe della tabella non c'e' nessun effetto al passaggio del mouse */

.area-link { color: var(--pit-navy); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s ease; }
.area-link:hover { border-bottom-color: var(--pit-navy); }
.area-inline-form { display: inline; }

.area-support a,
.area-card__sub a { color: inherit; }

/* ==========================================================================
   Pannelli Curriculum e Profilo
   ========================================================================== */
.area-avviso { margin-top: 24px; padding: 12px 16px; border-radius: 10px; background: #EDF2F7; color: var(--pit-navy); font-size: 16px; }
.area-modulo { margin-top: 40px; }
.area-modulo .area-section-title { margin-top: 0; }
.area-form { display: grid; gap: 16px; margin-top: 20px; max-width: 700px; }
.area-form--profilo { grid-template-columns: 1fr 1fr; }
.area-form__largo { grid-column: 1 / -1; }
.area-form label { display: flex; flex-direction: column; gap: 6px; color: var(--pit-navy); font-size: 15px; }
.area-form input[type="text"],
.area-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #868686;
	border-radius: 8px;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--pit-navy);
	background: #fff;
	box-sizing: border-box;
}
.area-form input[type="text"]:focus,
.area-form textarea:focus { outline: none; border-color: var(--pit-navy); box-shadow: 0 0 0 3px rgba(20, 33, 47, 0.1); }
.area-form__file { border: 1px dashed #868686; border-radius: 10px; padding: 16px; }
.area-btn--largo { width: auto; min-width: 220px; justify-content: center; padding: 0 24px; height: 44px; grid-column: 1 / -1; justify-self: start; }

/* ==========================================================================
   Inglese: le parole sono piu' lunghe dell'italiano
   ========================================================================== */
@media (min-width: 768px) {
	/* le quattro colonne erano fisse (274/274/191/231) come nel Figma italiano:
	   "CERTIFICATES" e "ACTIVE COURSES" non ci stanno, quindi in inglese si
	   dividono lo stesso spazio in parti uguali e l'etichetta e' un filo piu' piccola */
	body.lingua-en .area-stats { grid-template-columns: repeat(4, 1fr); }
	body.lingua-en .area-stat__label { font-size: 20px; line-height: 23px; }

	/* il bottone della scheda corso era largo 202px col testo bloccato a 149:
	   "BROWSE THE COURSES" finiva sotto la freccia. In inglese si allarga da solo. */
	body.lingua-en .area-card--corso .area-btn { width: auto; min-width: 202px; }
	body.lingua-en .area-card--corso .area-btn > span { width: auto; flex: 0 1 auto; padding-right: 12px; }
}