/**
 * LA BARRA IN ALTO.
 *
 * ---------------------------------------------------------------------
 * TUTTO QUELLO CHE NASCONDE STA SOTTO A `html.fpe-barra-viva`, e quella
 * classe la mette il browser SOLO dopo aver costruito la barra nuova e
 * aver verificato che sia alta davvero.
 *
 * E' il pezzo piu' delicato di tutto il plugin: nascondere la
 * navigazione di un sito e non metterne un'altra vuol dire un sito senza
 * navigazione, e uno se ne accorge solo quando non trova piu' niente.
 * Legando le due cose a una classe sola, il caso «nascosta ma non
 * rifatta» non puo' proprio succedere.
 */

/* ===================================================================== *
 * LA BARRA
 * ===================================================================== */

.fpe-barra {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 9990;
	/* la vecchia era alta quattrocento pixel. Questa settanta, e
	   cinquanta quando si scorre. */
	--alta: 70px;
	background: rgba( 5, 11, 24, .82 );
	border-bottom: 1px solid rgba( 255, 255, 255, .1 );
	/* il vetro: si vede che sotto la pagina scorre, senza che il testo
	   della barra diventi illeggibile */
	-webkit-backdrop-filter: blur( 14px ) saturate( 140% );
	backdrop-filter: blur( 14px ) saturate( 140% );
	transition: background .25s ease, box-shadow .25s ease;
}
.fpe-barra.e-piccola {
	--alta: 50px;
	background: rgba( 5, 11, 24, .94 );
	box-shadow: 0 6px 24px rgba( 0, 0, 0, .34 );
}

/* se sei collegato a WordPress, in cima c'e' la sua barra nera */
body.admin-bar .fpe-barra { top: 32px; }
@media screen and ( max-width: 782px ) {
	body.admin-bar .fpe-barra { top: 46px; }
}

.fpe-barra-dentro {
	display: flex;
	align-items: center;
	gap: 14px;
	height: var( --alta );
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 16px;
	transition: height .25s cubic-bezier( .22, 1, .36, 1 );
}

/* LO SPAZIO IN CIMA ALLA PAGINA. La barra sta sopra a tutto, quindi il
   contenuto ci finirebbe sotto. L'altezza vera la misura il browser e la
   scrive in `--fpe-barra-alta`: indovinarla qui vorrebbe dire sbagliarla
   il giorno che la barra va a capo. */
html.fpe-barra-viva body { padding-top: var( --fpe-barra-alta, 70px ); }

/* --- il nome del sito ------------------------------------------------ */

.fpe-barra-casa {
	display: flex; align-items: center; gap: 8px;
	flex: 0 0 auto;
	text-decoration: none;
}
.fpe-barra-casa img { display: block; height: 30px; width: auto; }
.fpe-barra.fpe-barra .fpe-barra-nome {
	font-size: 1.02rem; font-weight: 900; letter-spacing: -.01em;
	color: #f8fafc;
	white-space: nowrap;
}
.fpe-barra.e-piccola .fpe-barra-nome { font-size: .94rem; }
.fpe-barra.e-piccola .fpe-barra-casa img { height: 24px; }

/* ===================================================================== *
 * LE MATERIE — la cosa per cui uno e' venuto
 * ===================================================================== */

.fpe-barra-materie {
	display: flex; align-items: center; gap: 4px;
	flex: 1 1 auto;
	min-width: 0;
	/* se non ci stanno, si scorrono di lato invece di andare a capo e
	   far crescere la barra */
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	/* LA SFUMATURA IN FONDO dice che ce n'e' ancora. Senza, sul telefono
	   si vede una materia e mezza e sembra che siano quelle: nessuno
	   prova a scorrere una cosa che sembra finita. E' una maschera, non
	   un elemento in piu'. */
	-webkit-mask-image: linear-gradient( to right, #000 calc( 100% - 26px ), transparent );
	mask-image: linear-gradient( to right, #000 calc( 100% - 26px ), transparent );
}
.fpe-barra-materie::-webkit-scrollbar { display: none; }
/* se ci stanno tutte, niente sfumatura: sfumare qualcosa che e' intero
   fa sembrare che manchi qualcosa */
@media ( min-width: 1060px ) {
	.fpe-barra-materie { -webkit-mask-image: none; mask-image: none; }
}
.fpe-barra .fpe-barra-mat { scroll-snap-align: start; }

.fpe-barra.fpe-barra .fpe-barra-mat {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex; align-items: center;
	height: 38px; padding: 0 14px;
	border-radius: 10px;
	text-decoration: none;
	white-space: nowrap;
	/* GRANDE E CHIARO: «piu' chiaro, piu' visibile, bello grande il
	   testo». Novecento di peso e quasi un rem: in una barra da settanta
	   pixel e' il massimo che si legge senza schiacciare tutto. */
	font-size: .98rem; font-weight: 800; letter-spacing: .01em;
	color: #e2e8f0;
	transition: color .2s, background .2s;
}
/* la riga di colore sotto, che si allunga passandoci sopra: il colore
   della materia si vede sempre, e il movimento e' una larghezza di una
   riga sola — niente che rifaccia l'impaginazione */
.fpe-barra .fpe-barra-mat::after {
	content: '';
	position: absolute;
	left: 14px; right: 14px; bottom: 5px;
	height: 3px; border-radius: 999px;
	background: var( --tinta, #38bdf8 );
	transform: scaleX( .34 );
	transform-origin: left center;
	transition: transform .3s cubic-bezier( .22, 1, .36, 1 );
}
.fpe-barra.fpe-barra .fpe-barra-mat:hover,
.fpe-barra.fpe-barra .fpe-barra-mat:focus-visible { color: #fff; background: rgba( 255, 255, 255, .07 ); }
.fpe-barra .fpe-barra-mat:hover::after,
.fpe-barra .fpe-barra-mat:focus-visible::after { transform: scaleX( 1 ); }
.fpe-barra .fpe-barra-mat:focus-visible { outline: 2px solid var( --tinta ); outline-offset: 2px; }

/* ===================================================================== *
 * A DESTRA: studenti, ricerca, tutto
 * ===================================================================== */

.fpe-barra-destra { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.fpe-barra.fpe-barra .fpe-barra-studenti, .fpe-barra.fpe-barra .fpe-barra-docenti {
	display: inline-flex; align-items: center;
	height: 38px; padding: 0 15px;
	border-radius: 999px;
	text-decoration: none; white-space: nowrap;
	font-size: .88rem; font-weight: 900;
	color: #06111f;
	background: linear-gradient( 100deg, #38bdf8, #c084fc );
	transition: transform .2s cubic-bezier( .22, 1.2, .36, 1 );
}
.fpe-barra.fpe-barra .fpe-barra-studenti:hover, .fpe-barra.fpe-barra .fpe-barra-docenti:hover { transform: translateY( -2px ); }

/* --- il pulsante «Corso personalizzato» ------------------------------- */
.fpe-barra.fpe-barra .fpe-barra-corso {
	display: inline-flex; align-items: center;
	height: 38px; padding: 0 15px;
	border-radius: 999px; border: 1px solid rgba( 34, 211, 238, .7 );
	background: rgba( 11, 20, 48, .85); color: #e0f2fe;
	font: inherit; font-size: .88rem; font-weight: 900; white-space: nowrap; cursor: pointer;
	transition: transform .2s cubic-bezier( .22, 1.2, .36, 1 ), box-shadow .2s;
}
.fpe-barra.fpe-barra .fpe-barra-corso:hover { transform: translateY( -2px ); box-shadow: 0 0 14px rgba( 34, 211, 238, .45 ); }

/* la finestra: vapore magico, come il gatto */
.fpe-corso-sfondo {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba( 2, 6, 16, .72 );
	animation: fpe-corso-sfuma .3s ease both;
}
@keyframes fpe-corso-sfuma { from { opacity: 0; } to { opacity: 1; } }
.fpe-corso {
	position: relative; overflow: hidden;
	width: min( 460px, 100% ); max-height: calc( 100dvh - 32px ); overflow-y: auto;
	padding: 26px 22px 30px; border-radius: 26px;
	background: radial-gradient( 120% 90% at 20% 0, #14225a, #0a1026 65% );
	border: 1.5px solid #22d3ee; color: #f1f5f9;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, .7 ), 0 0 30px rgba( 34, 211, 238, .25 );
	animation: fpe-corso-sale .45s cubic-bezier( .22, 1.3, .36, 1 ) both;
}
@keyframes fpe-corso-sale { from { opacity: 0; transform: translateY( 20px ) scale( .92 ); } to { opacity: 1; transform: none; } }
.fpe-corso-vapore {
	position: absolute; left: -10%; right: -10%; bottom: -34px; height: 90px; pointer-events: none;
	background: radial-gradient( 40px 30px at 12% 60%, rgba( 56, 189, 248, .55 ), transparent ), radial-gradient( 54px 36px at 36% 70%, rgba( 29, 78, 216, .6 ), transparent ), radial-gradient( 60px 38px at 62% 66%, rgba( 56, 189, 248, .5 ), transparent ), radial-gradient( 46px 32px at 88% 62%, rgba( 99, 102, 241, .55 ), transparent );
	animation: fpe-corso-respira 6s ease-in-out infinite;
}
@keyframes fpe-corso-respira { 0%, 100% { transform: translateX( -6px ); opacity: .8; } 50% { transform: translateX( 6px ); opacity: 1; } }
.fpe-corso-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba( 255, 255, 255, .08 ); color: #e0f2fe; font-size: 1rem; cursor: pointer; }
.fpe-corso-titolo { margin: 0 40px 6px 0; font-size: 1.5rem; line-height: 1.15; color: #fff; }
.fpe-corso-dice { margin: 0 0 18px; color: #bae6fd; opacity: .9; }
.fpe-corso a.fpe-corso-test {
	display: flex; align-items: center; justify-content: center; min-height: 54px;
	border-radius: 999px; text-decoration: none; font-weight: 900; font-size: 1.05rem;
	color: #06111f; background: linear-gradient( 100deg, #38bdf8, #c084fc );
	box-shadow: 0 0 22px rgba( 56, 189, 248, .45 );
}
.fpe-corso-oppure { margin: 20px 0 10px; font-size: .9rem; color: #94a3b8; }
.fpe-corso-livelli { position: relative; display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 8px; }
.fpe-corso .fpe-corso-livello {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	padding: 12px 6px; border-radius: 16px; cursor: pointer; font: inherit;
	color: #e0f2fe; background: rgba( 255, 255, 255, .06 ); border: 1px solid rgba( 34, 211, 238, .4 );
}
.fpe-corso .fpe-corso-livello:hover { background: rgba( 56, 189, 248, .18 ); }
.fpe-corso .fpe-corso-livello { min-width: 0; padding-left: 4px; padding-right: 4px; }
.fpe-corso .fpe-corso-livello strong { max-width: 100%; font-size: .88rem; text-align: center; }
.fpe-corso .fpe-corso-livello small { opacity: .75; }
@media ( max-width: 440px ) {
	.fpe-corso-livelli { grid-template-columns: 1fr; }
	.fpe-corso .fpe-corso-livello { flex-direction: row; justify-content: space-between; padding: 14px 18px; }
	.fpe-corso .fpe-corso-livello strong { font-size: 1rem; }
}
@media ( prefers-reduced-motion: reduce ) { .fpe-corso-sfondo, .fpe-corso, .fpe-corso-vapore { animation: none; } }

/* --- la ricerca che si apre ------------------------------------------ */

.fpe-barra-cerca {
	display: flex; align-items: center;
	overflow: hidden;
	/* chiusa e' larga zero: non e' nascosta, e' larga zero, cosi'
	   l'apertura e' un'animazione di larghezza su un elemento piccolo e
	   non un elemento che compare di colpo */
	width: 0;
	transition: width .28s cubic-bezier( .22, 1, .36, 1 );
}
.fpe-barra-cerca.e-aperta { width: clamp( 150px, 26vw, 260px ); }

.fpe-barra .fpe-barra-campo {
	width: 100%;
	height: 38px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid rgba( 255, 255, 255, .22 );
	background: rgba( 255, 255, 255, .07 );
	color: #f1f5f9;
	font: inherit; font-size: .92rem;
}
.fpe-barra .fpe-barra-campo::placeholder { color: rgba( 226, 232, 240, .55 ); }
.fpe-barra .fpe-barra-campo:focus { outline: 2px solid var( --fpe-accent, #38bdf8 ); outline-offset: 1px; }

.fpe-barra .fpe-barra-lente,
.fpe-barra .fpe-barra-tutto {
	display: inline-flex; align-items: center; gap: 7px;
	height: 40px; min-width: 40px; padding: 0 12px;
	border-radius: 10px;
	border: 1px solid rgba( 255, 255, 255, .18 );
	background: rgba( 255, 255, 255, .06 );
	color: #e2e8f0;
	font: inherit; font-size: .88rem; font-weight: 800;
	cursor: pointer;
	transition: background .2s, transform .2s cubic-bezier( .22, 1.2, .36, 1 );
}
.fpe-barra .fpe-barra-lente { justify-content: center; padding: 0; font-size: 1rem; }
.fpe-barra .fpe-barra-lente:hover,
.fpe-barra .fpe-barra-tutto:hover { background: rgba( 255, 255, 255, .13 ); transform: translateY( -1px ); }
.fpe-barra .fpe-barra-lente:focus-visible,
.fpe-barra .fpe-barra-tutto:focus-visible { outline: 2px solid var( --fpe-accent, #38bdf8 ); outline-offset: 2px; }

/* le tre righine del menu, disegnate senza immagini */
.fpe-barra-righe {
	position: relative;
	display: inline-block; width: 16px; height: 2px;
	background: currentColor; border-radius: 2px;
}
.fpe-barra-righe::before,
.fpe-barra-righe::after {
	content: ''; position: absolute; left: 0;
	width: 16px; height: 2px; background: currentColor; border-radius: 2px;
	transition: transform .25s cubic-bezier( .22, 1, .36, 1 );
}
.fpe-barra-righe::before { top: -5px; }
.fpe-barra-righe::after  { top: 5px; }
/* aperto diventa una croce: dice «adesso questo chiude» */
.fpe-barra.e-aperto .fpe-barra-righe { background: transparent; }
.fpe-barra.e-aperto .fpe-barra-righe::before { transform: translateY( 5px ) rotate( 45deg ); }
.fpe-barra.e-aperto .fpe-barra-righe::after  { transform: translateY( -5px ) rotate( -45deg ); }

/* ===================================================================== *
 * IL PANNELLO «TUTTO»
 * ===================================================================== */

.fpe-barra-pannello {
	max-height: min( 70vh, 560px );
	overflow-y: auto;
	border-top: 1px solid rgba( 255, 255, 255, .1 );
	background: rgba( 5, 11, 24, .97 );
	animation: fpe-barra-scende .24s cubic-bezier( .22, 1, .36, 1 );
}
@keyframes fpe-barra-scende {
	from { opacity: 0; transform: translateY( -8px ); }
	to   { opacity: 1; transform: none; }
}

.fpe-barra-lista {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 230px, 1fr ) );
	gap: 4px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 16px 20px;
}

.fpe-barra.fpe-barra .fpe-barra-voce {
	display: flex; align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 10px;
	text-decoration: none;
	font-size: .95rem; font-weight: 700;
	color: #e2e8f0;
	transition: background .18s, transform .18s cubic-bezier( .22, 1.2, .36, 1 );
}
.fpe-barra.fpe-barra .fpe-barra-voce:hover {
	background: rgba( 255, 255, 255, .09 );
	transform: translateX( 3px );
}
/* le voci di secondo livello restano riconoscibili senza fare un menu a
   due piani dentro a un pannello */
.fpe-barra.fpe-barra .fpe-barra-voce.e-sotto {
	padding-left: 28px;
	font-weight: 600;
	color: var( --fpe-dim, #cbd5e1 );
}

/* ===================================================================== *
 * QUELLO CHE VA VIA
 * ---------------------------------------------------------------------
 * Tutto sotto a `html.fpe-barra-viva`, cioe' solo quando la barra nuova
 * c'e' davvero (vedi il commento in cima).
 *
 * I nomi sono quelli del tema newsup, piu' quelli generici che usano
 * quasi tutti i temi: se un giorno il tema cambia, la barra del vecchio
 * resta visibile — brutto, ma non rotto, e si vede subito.
 * ===================================================================== */

html.fpe-barra-viva .mg-nav-widget-area-back,
html.fpe-barra-viva .mg-nav-widget-area,
html.fpe-barra-viva .navbar-wp,
html.fpe-barra-viva .navbar-header,
html.fpe-barra-viva #header,
html.fpe-barra-viva .site-header,
html.fpe-barra-viva .mg-headwidget,
html.fpe-barra-viva .mg-nav-widget-area-back + .navbar { display: none !important; }

/* la fascia bianca che restava sotto alla testata */
html.fpe-barra-viva .mg-header,
html.fpe-barra-viva .header-widget { display: none !important; }

/* ===================================================================== *
 * DAL TELEFONO
 * ---------------------------------------------------------------------
 * Sul telefono non ci stanno nome + quattro materie + tre pulsanti. La
 * regola e': restano le MATERIE e il pannello «Tutto». Il nome del sito
 * diventa piu' piccolo, la scritta «Studenti» diventa il solo tocco, e
 * la parola «Tutto» sparisce lasciando le tre righine.
 *
 * Non spariscono le materie: sono la ragione per cui la barra esiste.
 * ===================================================================== */

@media ( max-width: 900px ) {
	.fpe-barra.fpe-barra .fpe-barra-corso { padding: 0 12px; font-size: 0; }
	.fpe-barra.fpe-barra .fpe-barra-corso::before { content: '✨'; font-size: 1.05rem; }
	.fpe-barra.fpe-barra .fpe-barra-studenti, .fpe-barra.fpe-barra .fpe-barra-docenti { padding: 0 12px; font-size: 0; gap: 0; }
	/* resta il cappello: si riconosce, e non prende mezza barra */
	.fpe-barra.fpe-barra .fpe-barra-studenti::before { content: '🎓'; font-size: 1.05rem; }
	.fpe-barra.fpe-barra .fpe-barra-docenti::before { content: '👩‍🏫'; font-size: 1.05rem; }
	.fpe-barra .fpe-barra-tutto-testo { display: none; }
	.fpe-barra .fpe-barra-tutto { min-width: 40px; padding: 0 11px; }
}

@media ( max-width: 640px ) {
	.fpe-barra { --alta: 58px; }
	.fpe-barra.e-piccola { --alta: 48px; }
	.fpe-barra-dentro { gap: 6px; padding: 0 8px; }

	/* IL NOME DEL SITO DIVENTA UNA CASETTA.
	   Su trecentonovanta pixel, «FP English.TOP» si mangiava meta' barra
	   e restava in vista una materia sola. Il nome del sito e' scritto
	   nella linguetta del browser e in mezzo alla pagina; le materie sono
	   la ragione per cui la barra esiste. Chi vince e' ovvio.
	   La casetta porta a casa esattamente come il nome. */
	.fpe-barra.fpe-barra .fpe-barra-nome { font-size: 0; }
	.fpe-barra.fpe-barra .fpe-barra-nome::before { content: '🏠'; font-size: 1.15rem; }
	.fpe-barra-casa { padding: 0 2px; }
	.fpe-barra.fpe-barra .fpe-barra-mat { height: 34px; padding: 0 10px; font-size: .9rem; }
	.fpe-barra .fpe-barra-mat::after { left: 10px; right: 10px; }
	/* la ricerca aperta si prende tutta la barra: cercare e' una cosa
	   sola per volta */
	.fpe-barra-cerca.e-aperta {
		position: absolute;
		left: 10px; right: 10px;
		width: auto;
		z-index: 2;
	}
	.fpe-barra-lista { grid-template-columns: 1fr; padding: 10px 10px 16px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.fpe-barra, .fpe-barra-dentro, .fpe-barra-cerca,
	.fpe-barra .fpe-barra-mat, .fpe-barra .fpe-barra-mat::after,
	.fpe-barra .fpe-barra-voce, .fpe-barra-righe::before, .fpe-barra-righe::after { transition: none; }
	.fpe-barra-pannello { animation: none; }
}

/* ===================================================================== *
 * SE QUALCUNO STAMPA LA PAGINA
 * ===================================================================== */
@media print {
	.fpe-barra { display: none; }
	html.fpe-barra-viva body { padding-top: 0; }
}

/* pulsanti a vetro / bolla magica anche nella finestra «Corso personalizzato» (come il gatto) */
.fpe-corso a.fpe-corso-test, .fpe-corso .fpe-corso-livello {
	position: relative; overflow: hidden; isolation: isolate;
	color: #fff; text-shadow: 0 1px 3px rgba( 2, 8, 24, .55 );
	border: 1.5px solid rgba( 186, 230, 253, .55 );
	-webkit-backdrop-filter: blur( 10px ) saturate( 1.4 ); backdrop-filter: blur( 10px ) saturate( 1.4 );
	background: linear-gradient( 160deg, rgba( 125, 211, 252, .38 ), rgba( 56, 189, 248, .14 ) 45%, rgba( 129, 140, 248, .3 ) );
	box-shadow: inset 0 2px 1px rgba( 255, 255, 255, .45 ), inset 0 -10px 22px rgba( 30, 58, 138, .35 ), 0 8px 24px rgba( 2, 8, 24, .5 ), 0 0 18px rgba( 56, 189, 248, .3 );
}
.fpe-corso a.fpe-corso-test::before, .fpe-corso .fpe-corso-livello::before {
	content: ''; position: absolute; z-index: -1; pointer-events: none; left: 6%; right: 6%; top: 3px; height: 46%;
	border-radius:50% 50% 50% 50% / 90% 90% 60% 60%;
	background: linear-gradient( 180deg, rgba( 255, 255, 255, .5 ), rgba( 255, 255, 255, .04 ) );
}
.fpe-corso a.fpe-corso-test { background: linear-gradient( 160deg, rgba( 56, 189, 248, .6 ), rgba( 129, 140, 248, .22 ) 50%, rgba( 192, 132, 252, .55 ) ); }
.fpe-corso .fpe-corso-livello small { color: #e0f2fe; opacity: .9; }

/* «Studenti delle Superiori» e «Docenti»: in massima vista, di vetro, piu' grandi (4.51.3) */
.fpe-barra.fpe-barra .fpe-barra-studenti, .fpe-barra.fpe-barra .fpe-barra-docenti {
	position: relative; overflow: hidden; isolation: isolate; height: 42px; padding: 0 18px; font-size: .95rem;
	color: #fff; text-shadow: 0 1px 3px rgba( 2, 8, 24, .6 );
	border: 1.5px solid rgba( 186, 230, 253, .6 );
	background: linear-gradient( 160deg, rgba( 34, 211, 238, .6 ), rgba( 56, 189, 248, .22 ) 50%, rgba( 129, 140, 248, .45 ) );
	box-shadow: inset 0 2px 1px rgba( 255, 255, 255, .45 ), inset 0 -8px 16px rgba( 30, 58, 138, .4 ), 0 0 18px rgba( 56, 189, 248, .5 );
}
.fpe-barra.fpe-barra .fpe-barra-docenti {
	background: linear-gradient( 160deg, rgba( 192, 132, 252, .62 ), rgba( 129, 140, 248, .22 ) 50%, rgba( 99, 102, 241, .45 ) );
	box-shadow: inset 0 2px 1px rgba( 255, 255, 255, .45 ), inset 0 -8px 16px rgba( 76, 29, 149, .45 ), 0 0 18px rgba( 192, 132, 252, .5 );
}
.fpe-barra .fpe-barra-studenti::after, .fpe-barra .fpe-barra-docenti::after {
	content: ''; position: absolute; z-index: -1; pointer-events: none; left: 10%; right: 10%; top: 3px; height: 44%;
	border-radius: 50% 50% 50% 50% / 90% 90% 60% 60%; background: linear-gradient( 180deg, rgba( 255, 255, 255, .5 ), rgba( 255, 255, 255, .04 ) );
}
@media ( max-width: 900px ) {
	.fpe-barra.fpe-barra .fpe-barra-studenti, .fpe-barra.fpe-barra .fpe-barra-docenti { height: 40px; padding: 0 11px; font-size: 0; }
}

/* ===================================================================== *
 * 4.74 — LA BARRA NUOVA: solo pulsanti, blu e verde acqua.
 * Il titolo grande e la frase sono nella testata sotto (solo homepage).
 * Tutto leggero: nessuna immagine, nessuna libreria; le animazioni si
 * fermano da sole per chi ha chiesto meno movimento.
 * ===================================================================== */
.fpe-barra.fpe-b2 { --alta: 46px; background: rgba( 8, 18, 34, .88 ); border-bottom: 0; }
.fpe-barra.fpe-b2.e-piccola { --alta: 40px; }
.fpe-barra.fpe-b2::after {
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
	background: linear-gradient( 90deg, #2f8cff, #2dd4bf, #3ec6ff, #2f8cff ); background-size: 300% 100%;
	animation: fpe-b2-scorri 8s linear infinite;
}
@keyframes fpe-b2-scorri { to { background-position: 300% 0; } }
.fpe-b2 .fpe-b2-dentro { display: flex; align-items: center; justify-content: center; gap: 8px; height: var( --alta ); max-width: 1240px; margin: 0 auto; padding: 0 12px; }

.fpe-b2 .fpe-b2-p {
	display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 34px; padding: 0 15px;
	border-radius: 999px; border: 1px solid rgba( 255, 255, 255, .14 ); background: rgba( 255, 255, 255, .07 );
	color: #eaf6ff; font-weight: 800; font-size: 14px; line-height: 1; font-family: inherit; text-decoration: none; white-space: nowrap; cursor: pointer;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.fpe-b2 .fpe-b2-p:hover { transform: translateY( -1px ); filter: brightness( 1.12 ); color: #fff; }
.fpe-b2 .fpe-b2-i { font-size: 16px; line-height: 1; }
.fpe-b2 .fpe-b2-stu { background: linear-gradient( 90deg, #1670d8, #2f9bff ); border-color: rgba( 140, 200, 255, .55 ); box-shadow: 0 0 16px rgba( 47, 140, 255, .4 ); font-size: 15px; height: 36px; }
.fpe-b2 .fpe-b2-doc { background: linear-gradient( 90deg, #0f8f9a, #2dd4bf ); color: #03262a; border-color: rgba( 159, 240, 226, .5 ); }
.fpe-b2 .fpe-b2-doc:hover { color: #03262a; }
.fpe-b2 .fpe-b2-gat { background: linear-gradient( 90deg, #1ab3a2, #5eead4 ); color: #03262a; box-shadow: 0 0 16px rgba( 45, 212, 191, .55 ); animation: fpe-b2-dondola 3s ease-in-out infinite; }
.fpe-b2 .fpe-b2-gat:hover { color: #03262a; }
@keyframes fpe-b2-dondola { 50% { transform: translateY( -2px ); } }
.fpe-b2 .e-mio { box-shadow: 0 0 0 2px rgba( 255, 255, 255, .55 ), 0 0 20px rgba( 62, 198, 255, .7 ); }
.fpe-b2 .fpe-b2-ico {
	width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto; padding: 0;
	border: 1px solid rgba( 255, 255, 255, .14 ); background: rgba( 255, 255, 255, .07 ); color: #eaf6ff; font-size: 16px; cursor: pointer;
}
.fpe-b2 .fpe-b2-casa { padding: 0 11px; }

/* la ricerca che si apre sotto la barra */
.fpe-b2 .fpe-b2-cerca { display: none; gap: 8px; max-width: 640px; margin: 0 auto; padding: 8px 12px 10px; }
.fpe-b2 .fpe-b2-cerca.e-aperta { display: flex; }
.fpe-b2 .fpe-b2-campo { flex: 1; min-width: 0; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba( 62, 198, 255, .55 ); background: rgba( 62, 198, 255, .1 ); color: #eaf6ff; font-size: 16px; }
.fpe-b2 .fpe-b2-vai { height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: #3ec6ff; color: #04202e; font-weight: 800; cursor: pointer; }
.fpe-b2 .fpe-barra-pannello { top: 100%; }

/* ---- la testata in homepage ---------------------------------------- */
.fpe-b2-testata { position: relative; z-index: 1; text-align: center; padding: 14px 12px 6px; background: radial-gradient( 900px 320px at 50% -10%, rgba( 18, 58, 99, .9 ), transparent 65% ); }
.fpe-b2-titolo { margin: 0; font-size: clamp( 28px, 4.6vw, 42px ); line-height: 1.1; font-weight: 900; text-transform: uppercase; color: #dff3ff; text-shadow: 0 0 24px rgba( 62, 198, 255, .55 ), 0 0 4px rgba( 255, 255, 255, .3 ); }
.fpe-b2-slogan { margin: 5px 0 0; letter-spacing: .14em; text-transform: uppercase; color: #9dbad0; font-size: clamp( 10px, 1.3vw, 13px ); font-weight: 700; }
.fpe-b2-scatola { max-width: 1100px; margin: 10px auto 0; text-align: left; }

.fpe-b2-nov { position: relative; display: flex; overflow: hidden; border-radius: 12px; border: 1px solid rgba( 62, 198, 255, .35 ); background: linear-gradient( 90deg, #0b2a4d, #0e4a6b, #0b2a4d ); box-shadow: 0 0 20px rgba( 45, 212, 191, .2 ); }
.fpe-b2-nov::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( 110deg, transparent 35%, rgba( 255, 255, 255, .22 ) 50%, transparent 65% ); transform: translateX( -100% ); animation: fpe-b2-luce 4.5s ease-in-out infinite; }
@keyframes fpe-b2-luce { 60%, 100% { transform: translateX( 100% ); } }
.fpe-b2-nov-e { flex: none; position: relative; z-index: 3; padding: 9px 14px; font-weight: 900; letter-spacing: .08em; font-size: 13px; color: #fff; background: linear-gradient( 90deg, #1670d8, #2dd4bf ); animation: fpe-b2-pulsa 1.8s ease-in-out infinite; }
@keyframes fpe-b2-pulsa { 50% { filter: brightness( 1.3 ); } }
.fpe-b2-nov-fin { flex: 1; min-width: 0; overflow: hidden; }
.fpe-b2-nov-nastro { display: inline-flex; white-space: nowrap; padding: 9px 0; animation: fpe-b2-corri var( --fpe-b2-durata, 40s ) linear infinite; }
.fpe-b2-nov:hover .fpe-b2-nov-nastro, .fpe-b2-nov:focus-within .fpe-b2-nov-nastro { animation-play-state: paused; }
@keyframes fpe-b2-corri { to { transform: translateX( -50% ); } }
.fpe-b2-nov-v { display: inline-block; padding: 0 22px 0 0; color: #dff3ff; font-weight: 700; font-size: 14px; text-decoration: none; }
.fpe-b2-nov-v:hover { color: #fff; text-decoration: underline; }
.fpe-b2-nov-v i { font-style: normal; color: #2dd4bf; margin-right: 6px; }
.fpe-b2-nov-v em { font-style: normal; color: #7fe9da; }

.fpe-b2-me { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 9px 12px; border-radius: 14px; border: 1px solid rgba( 45, 212, 191, .45 ); background: linear-gradient( 120deg, rgba( 45, 212, 191, .14 ), rgba( 47, 140, 255, .12 ) ); }
.fpe-b2-me.e-nuovo { border-style: dashed; border-color: rgba( 62, 198, 255, .55 ); }
.fpe-b2-liv { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #03262a; background: conic-gradient( from 200deg, #2dd4bf, #3ec6ff, #2f8cff, #2dd4bf ); box-shadow: 0 0 14px rgba( 45, 212, 191, .5 ); }
.fpe-b2-me-testo { flex: 1; min-width: 0; color: #eaf6ff; }
.fpe-b2-me-testo strong { display: block; font-size: 15px; font-weight: 800; }
.fpe-b2-dis { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.fpe-b2-bd { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; background: rgba( 255, 255, 255, .1 ); color: #eaf6ff; }
.fpe-b2-bd.g { background: rgba( 45, 212, 191, .2 ); color: #8ff0e2; }
.fpe-b2-az { display: flex; align-items: center; gap: 8px; flex: none; }
.fpe-b2-cta { display: inline-block; padding: 10px 16px; border-radius: 12px; border: 0; background: #3ec6ff; color: #04202e; font-weight: 800; font-size: 13px; line-height: 1; font-family: inherit; text-decoration: none; cursor: pointer; letter-spacing: .02em; box-shadow: 0 0 18px rgba( 62, 198, 255, .45 ); }
.fpe-b2-cta:hover { color: #04202e; filter: brightness( 1.1 ); }
.fpe-b2-me.e-nuovo .fpe-b2-cta { animation: fpe-b2-pulsa 1.8s ease-in-out infinite; }
.fpe-b2-cambia { background: none; border: 0; color: #9dd8f0; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 4px; }

.fpe-b2-carte { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 8px; margin-top: 8px; }
.fpe-b2-carta { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; border: 1px solid rgba( 255, 255, 255, .12 ); background: linear-gradient( 160deg, rgba( 255, 255, 255, .08 ), rgba( 255, 255, 255, .02 ) ); color: #eaf6ff; text-decoration: none; transition: transform .22s ease, box-shadow .22s ease; }
.fpe-b2-carta::before { content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var( --k ); filter: blur( 28px ); opacity: .5; }
.fpe-b2-carta:hover { transform: translateY( -3px ); box-shadow: 0 10px 26px -10px var( --k ); color: #fff; }
.fpe-b2-carta-i { position: relative; font-size: 24px; }
.fpe-b2-carta-n { position: relative; font-weight: 900; letter-spacing: .04em; font-size: 15px; }

/* ---- telefono: tutta la testata nel 30% in alto dello schermo ---------- */
@media ( max-width: 760px ) {
	.fpe-barra.fpe-b2 { --alta: 42px; }
	.fpe-barra.fpe-b2.e-piccola { --alta: 38px; }
	.fpe-b2 .fpe-b2-dentro { gap: 4px; padding: 0 6px; }
	.fpe-b2 .fpe-b2-p { flex: 1 1 0; min-width: 0; justify-content: center; height: 30px; padding: 0 6px; font-size: 11px; gap: 3px; }
	.fpe-b2 .fpe-b2-stu { font-size: 11px; height: 30px; }
	.fpe-b2 .fpe-b2-i { font-size: 13px; }
	.fpe-b2 .fpe-b2-lungo, .fpe-b2 .fpe-b2-dove { display: none; }
	.fpe-b2 .fpe-b2-casa { flex: 0 0 auto; padding: 0 9px; }
	.fpe-b2 .fpe-b2-ico { width: 28px; height: 28px; font-size: 14px; }
	.fpe-b2-testata { padding: 5px 8px 2px; }
	.fpe-b2-titolo { font-size: 20px; }
	.fpe-b2-slogan { font-size: 8.5px; letter-spacing: .1em; margin-top: 1px; }
	.fpe-b2-scatola { margin-top: 5px; }
	.fpe-b2-nov { border-radius: 9px; }
	.fpe-b2-nov-e { padding: 6px 9px; font-size: 11px; }
	.fpe-b2-nov-nastro { padding: 6px 0; }
	.fpe-b2-nov-v { font-size: 11.5px; padding-right: 16px; }
	.fpe-b2-me { gap: 8px; margin-top: 5px; padding: 5px 8px; border-radius: 11px; }
	.fpe-b2-liv { width: 30px; height: 30px; font-size: 11px; }
	.fpe-b2-me-testo strong { font-size: 11.5px; line-height: 1.2; }
	.fpe-b2-dis { margin-top: 2px; gap: 3px; }
	.fpe-b2-bd { font-size: 9.5px; padding: 1px 6px; }
	.fpe-b2-bd:nth-child(n+3) { display: none; }
	.fpe-b2-cta { padding: 7px 9px; font-size: 10.5px; border-radius: 10px; }
	.fpe-b2-cambia { font-size: 10px; padding: 2px; }
	.fpe-b2-carte { gap: 4px; margin-top: 5px; }
	.fpe-b2-carta { flex-direction: column; gap: 1px; padding: 5px 2px; text-align: center; justify-content: center; border-radius: 10px; }
	.fpe-b2-carta-i { font-size: 18px; }
	.fpe-b2-carta-n { font-size: 8.5px; letter-spacing: .02em; }
}
@media ( prefers-reduced-motion: reduce ) {
	.fpe-barra.fpe-b2::after, .fpe-b2-nov::before, .fpe-b2-nov-e, .fpe-b2 .fpe-b2-gat, .fpe-b2-me.e-nuovo .fpe-b2-cta { animation: none; }
	.fpe-b2-nov-nastro { animation: none; overflow-x: auto; }
}

/* 4.74.1 — il solito VETRO sui pulsanti della barra (stessa ricetta di prima, solo blu e verde acqua) */
.fpe-b2 .fpe-b2-p, .fpe-b2 .fpe-b2-ico { position: relative; overflow: hidden; isolation: isolate; text-shadow: 0 1px 3px rgba( 2, 8, 24, .55 );
	-webkit-backdrop-filter: blur( 10px ) saturate( 1.4 ); backdrop-filter: blur( 10px ) saturate( 1.4 );
	border: 1.5px solid rgba( 186, 230, 253, .55 ); color: #fff;
	background: linear-gradient( 160deg, rgba( 125, 211, 252, .32 ), rgba( 56, 189, 248, .1 ) 50%, rgba( 45, 212, 191, .22 ) );
	box-shadow: inset 0 2px 1px rgba( 255, 255, 255, .45 ), inset 0 -8px 16px rgba( 30, 58, 138, .35 ), 0 0 14px rgba( 56, 189, 248, .3 ); }
.fpe-b2 .fpe-b2-p::after, .fpe-b2 .fpe-b2-ico::after { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 10%; right: 10%; top: 2px; height: 44%;
	border-radius: 50% 50% 50% 50% / 90% 90% 60% 60%; background: linear-gradient( 180deg, rgba( 255, 255, 255, .5 ), rgba( 255, 255, 255, .04 ) ); }
.fpe-b2 .fpe-b2-stu { background: linear-gradient( 160deg, rgba( 34, 140, 255, .7 ), rgba( 56, 189, 248, .22 ) 50%, rgba( 47, 100, 230, .5 ) ); box-shadow: inset 0 2px 1px rgba( 255, 255, 255, .45 ), inset 0 -8px 16px rgba( 30, 58, 138, .45 ), 0 0 18px rgba( 56, 189, 248, .55 ); }
.fpe-b2 .fpe-b2-doc { color: #fff; background: linear-gradient( 160deg, rgba( 20, 184, 166, .7 ), rgba( 45, 212, 191, .22 ) 50%, rgba( 14, 116, 144, .5 ) ); box-shadow: inset 0 2px 1px rgba( 255, 255, 255, .45 ), inset 0 -8px 16px rgba( 6, 78, 90, .45 ), 0 0 18px rgba( 45, 212, 191, .5 ); }
.fpe-b2 .fpe-b2-doc:hover, .fpe-b2 .fpe-b2-gat:hover { color: #fff; }
.fpe-b2 .fpe-b2-gat { color: #fff; background: linear-gradient( 160deg, rgba( 94, 234, 212, .7 ), rgba( 45, 212, 191, .24 ) 50%, rgba( 56, 189, 248, .5 ) ); box-shadow: inset 0 2px 1px rgba( 255, 255, 255, .5 ), inset 0 -8px 16px rgba( 6, 78, 90, .4 ), 0 0 20px rgba( 94, 234, 212, .6 ); }

/* 4.74.2 — VETRO realistico: poco colore, bordo di luce sottile, riflesso lieve, niente bolle ne' salti */
.fpe-b2 .fpe-b2-p, .fpe-b2 .fpe-b2-ico {
	--tinta: 255, 255, 255; --vivo: .0;
	font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 1px rgba( 0, 0, 0, .35 );
	-webkit-backdrop-filter: blur( 16px ) saturate( 1.7 ) brightness( 1.08 ); backdrop-filter: blur( 16px ) saturate( 1.7 ) brightness( 1.08 );
	border: 1px solid rgba( 255, 255, 255, .2 );
	background:
		linear-gradient( 180deg, rgba( 255, 255, 255, .20 ) 0%, rgba( 255, 255, 255, .05 ) 48%, rgba( 255, 255, 255, .02 ) 52%, rgba( 255, 255, 255, .08 ) 100% ),
		rgba( var( --tinta ), .16 );
	box-shadow:
		inset 0 1px 0 rgba( 255, 255, 255, .55 ),
		inset 0 -1px 0 rgba( 0, 0, 0, .28 ),
		inset 0 0 14px rgba( 255, 255, 255, .05 ),
		0 6px 18px rgba( 0, 0, 0, .35 ),
		0 0 14px rgba( var( --tinta ), var( --vivo ) );
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
	animation: none;
}
/* il riflesso: una lastra sottile sulla meta' alta, non una bolla */
.fpe-b2 .fpe-b2-p::after, .fpe-b2 .fpe-b2-ico::after {
	content: ''; position: absolute; z-index: -1; pointer-events: none; inset: 1px 1px 50% 1px; left: 1px; right: 1px; top: 1px; height: auto;
	border-radius: inherit; border-bottom-left-radius: 60% 40%; border-bottom-right-radius: 60% 40%;
	background: linear-gradient( 180deg, rgba( 255, 255, 255, .22 ), rgba( 255, 255, 255, 0 ) );
}
/* una luce che passa, solo quando ci si arriva sopra */
.fpe-b2 .fpe-b2-p::before { content: ''; position: absolute; z-index: -1; pointer-events: none; top: 0; bottom: 0; width: 40%; left: -60%;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, .35 ), transparent ); transform: skewX( -18deg ); transition: left .6s ease; }
.fpe-b2 .fpe-b2-p:hover::before { left: 120%; }
.fpe-b2 .fpe-b2-p:hover { transform: translateY( -1px ); filter: none; box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .7 ), inset 0 -1px 0 rgba( 0, 0, 0, .28 ), 0 10px 22px rgba( 0, 0, 0, .4 ), 0 0 18px rgba( var( --tinta ), calc( var( --vivo ) + .15 ) ); }

.fpe-b2 .fpe-b2-dove { --tinta: 160, 215, 255; --vivo: .10; }
.fpe-b2 .fpe-b2-stu  { --tinta: 47, 140, 255;  --vivo: .45; background-color: transparent; border-color: rgba( 170, 215, 255, .5 ); color: #fff; }
.fpe-b2 .fpe-b2-doc  { --tinta: 20, 184, 166;  --vivo: .28; color: #fff; border-color: rgba( 160, 240, 228, .4 ); }
.fpe-b2 .fpe-b2-gat  { --tinta: 56, 225, 205;  --vivo: .34; color: #fff; border-color: rgba( 170, 245, 232, .45 ); animation: none; }
.fpe-b2 .fpe-b2-stu { background: linear-gradient( 180deg, rgba( 255, 255, 255, .22 ) 0%, rgba( 255, 255, 255, .05 ) 48%, rgba( 255, 255, 255, .02 ) 52%, rgba( 255, 255, 255, .08 ) 100% ), rgba( 47, 140, 255, .42 ); }
.fpe-b2 .fpe-b2-doc { background: linear-gradient( 180deg, rgba( 255, 255, 255, .2 ) 0%, rgba( 255, 255, 255, .05 ) 48%, rgba( 255, 255, 255, .02 ) 52%, rgba( 255, 255, 255, .08 ) 100% ), rgba( 20, 184, 166, .34 ); }
.fpe-b2 .fpe-b2-gat { background: linear-gradient( 180deg, rgba( 255, 255, 255, .22 ) 0%, rgba( 255, 255, 255, .05 ) 48%, rgba( 255, 255, 255, .02 ) 52%, rgba( 255, 255, 255, .08 ) 100% ), rgba( 56, 225, 205, .34 ); }
.fpe-b2 .fpe-b2-e-mio, .fpe-b2 .e-mio { box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .6 ), 0 0 0 1px rgba( 255, 255, 255, .45 ), 0 0 20px rgba( 120, 210, 255, .55 ); }
@media ( prefers-reduced-motion: reduce ) { .fpe-b2 .fpe-b2-p::before { display: none; } }


/* 4.74.4 — l'altro menu va via, e un po' di luce */
html.fpe-barra-viva .fpe-b2-via { display: none !important; }
body.admin-bar .fpe-barra.fpe-b2 { top: 0; }          /* la posizione la misura il programma */

/* scintille: solo opacita' e scala, tre-quattro elementi in tutta la barra */
.fpe-b2 .fpe-b2-sc { position: absolute; z-index: 2; pointer-events: none; font-size: 9px; line-height: 1; color: #fff; opacity: 0; text-shadow: 0 0 6px rgba( 180, 235, 255, .95 ); animation: fpe-b2-brilla 3.6s ease-in-out infinite; }
.fpe-b2 .fpe-b2-sc1 { top: 4px; right: 12px; }
.fpe-b2 .fpe-b2-sc2 { bottom: 5px; left: 14px; animation-delay: 1.2s; font-size: 7px; }
.fpe-b2 .fpe-b2-sc3 { top: 6px; left: 38%; animation-delay: 2.3s; font-size: 8px; }
.fpe-b2 .fpe-b2-doc .fpe-b2-sc1 { animation-delay: .6s; }
.fpe-b2 .fpe-b2-gat .fpe-b2-sc1 { animation-delay: 1.8s; }
@keyframes fpe-b2-brilla { 0%, 55%, 100% { opacity: 0; transform: scale( .4 ) rotate( 0deg ); } 70% { opacity: 1; transform: scale( 1.15 ) rotate( 45deg ); } 85% { opacity: .2; transform: scale( .7 ) rotate( 90deg ); } }

/* un lampo di luce che attraversa tutta la barra ogni tanto */
.fpe-barra.fpe-b2 .fpe-b2-dentro::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
	background: linear-gradient( 100deg, transparent 0, transparent 42%, rgba( 140, 225, 255, .13 ) 50%, transparent 58%, transparent 100% ); background-size: 300% 100%; background-position: 150% 0; animation: fpe-b2-lampo 9s ease-in-out infinite; }
.fpe-barra.fpe-b2 .fpe-b2-dentro { position: relative; }
@keyframes fpe-b2-lampo { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.fpe-b2 .fpe-b2-p, .fpe-b2 .fpe-b2-ico { z-index: 1; }

/* la linea in fondo respira di luce, e il titolo della testata brilla piano */
.fpe-barra.fpe-b2::after { box-shadow: 0 0 10px rgba( 62, 198, 255, .6 ); }
.fpe-b2-titolo { animation: fpe-b2-alone 5s ease-in-out infinite alternate; }
@keyframes fpe-b2-alone { from { text-shadow: 0 0 18px rgba( 62, 198, 255, .4 ), 0 0 3px rgba( 255, 255, 255, .25 ); } to { text-shadow: 0 0 30px rgba( 62, 198, 255, .75 ), 0 0 5px rgba( 255, 255, 255, .4 ); } }

/* massima leggerezza: fermo se la scheda e' nascosta o la barra e' rimpicciolita; fermo con "meno movimento" */
.fpe-barra.fpe-b2.e-piccola .fpe-b2-dentro::before, .fpe-barra.fpe-b2.e-piccola .fpe-b2-sc { animation-play-state: paused; }
@media ( max-width: 760px ) { .fpe-b2 .fpe-b2-sc3 { display: none; } }
@media ( prefers-reduced-motion: reduce ) { .fpe-b2 .fpe-b2-sc, .fpe-barra.fpe-b2 .fpe-b2-dentro::before, .fpe-b2-titolo { animation: none; } }
.fpe-b2-cta2 { background: rgba( 255, 255, 255, .14 ); color: #fff; box-shadow: none; border: 1px solid rgba( 255, 255, 255, .3 ); }

/* 4.76.2 — la barra in alto resta FISSA (non si rimpicciolisce piu') e i pulsanti hanno lo stesso vetro delle schede GRAMMAR/SPEAKING; piu' grandi su computer */
.fpe-barra.fpe-b2.e-piccola { --alta: 46px; }
.fpe-b2 .fpe-b2-p, .fpe-b2 .fpe-b2-ico, .fpe-b2 .fpe-b2-stu, .fpe-b2 .fpe-b2-doc, .fpe-b2 .fpe-b2-gat, .fpe-b2 .fpe-b2-dove {
	border: 1px solid rgba( 255, 255, 255, .24 ); color: #fff;
	background: linear-gradient( 160deg, rgba( 255, 255, 255, .16 ), rgba( 255, 255, 255, .04 ) );
	-webkit-backdrop-filter: blur( 12px ) saturate( 1.5 ); backdrop-filter: blur( 12px ) saturate( 1.5 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .35 ), 0 4px 14px rgba( 0, 0, 0, .28 );
}
.fpe-b2 .fpe-b2-stu { background: linear-gradient( 160deg, rgba( 255, 255, 255, .16 ), rgba( 47, 140, 255, .12 ) ); border-color: rgba( 160, 210, 255, .45 ); }
.fpe-b2 .fpe-b2-doc, .fpe-b2 .fpe-b2-gat { background: linear-gradient( 160deg, rgba( 255, 255, 255, .16 ), rgba( 45, 212, 191, .12 ) ); border-color: rgba( 160, 245, 232, .42 ); }
.fpe-b2 .fpe-b2-p::after, .fpe-b2 .fpe-b2-ico::after { opacity: .5; }
@media ( min-width: 761px ) {
	.fpe-barra.fpe-b2, .fpe-barra.fpe-b2.e-piccola { --alta: 58px; }
	.fpe-b2 .fpe-b2-dentro { gap: 12px; max-width: 1400px; }
	.fpe-b2 .fpe-b2-p { height: 42px; padding: 0 22px; font-size: 16px; gap: 8px; }
	.fpe-b2 .fpe-b2-i { font-size: 19px; }
	.fpe-b2 .fpe-b2-ico { width: 42px; height: 42px; font-size: 18px; }
}

/* 4.77.1 — PIU' LEGGERO, STESSO ASPETTO.
   Il vetro vero (backdrop-filter) obbliga il telefono a ricalcolare la sfocatura di tutto quello che sta dietro
   a ogni fotogramma: con lo sfondo animato dietro, sette pulsanti in vetro uno dentro l'altro erano la spesa piu' grossa.
   Il vetro adesso e' DISEGNATO (sfumatura + bordo di luce + riflesso): si vede uguale, non costa niente. */
.fpe-barra, .fpe-barra.fpe-b2, .fpe-b2 *, .fpe-b2-testata, .fpe-b2-testata * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.fpe-barra.fpe-b2 { background: rgba( 8, 18, 34, .95 ); }
.fpe-b2 .fpe-b2-p, .fpe-b2 .fpe-b2-ico, .fpe-b2 .fpe-b2-dove { background-color: rgba( 20, 40, 66, .55 ); }
/* i pulsanti tornano dove stavano: barra bassa come prima, pulsanti un po' piu' grandi del vecchio */
@media ( min-width: 761px ) {
	.fpe-barra.fpe-b2, .fpe-barra.fpe-b2.e-piccola { --alta: 46px; }
	.fpe-b2 .fpe-b2-p { height: 38px; padding: 0 20px; font-size: 15.5px; }
	.fpe-b2 .fpe-b2-ico { width: 38px; height: 38px; }
}

/* ===================================================================== *
 * FUORI DALLA HOMEPAGE: solo «Homepage» e «Cerca», grandi, in cima, che NON seguono
 * ===================================================================== */
.fpe-b2-mini { position: relative; z-index: 50; background: rgba( 5, 11, 24, .94 ); border-bottom: 1px solid rgba( 255, 255, 255, .1 ); }
.fpe-b2-mini-dentro { display: flex; align-items: center; gap: 12px; max-width: 1240px; margin: 0 auto; padding: 8px 16px; }
.fpe-b2-mini-p {
	display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 22px;
	border-radius: 99px; border: 1px solid rgba( 34, 211, 238, .55 );
	background: linear-gradient( 90deg, #1d4ed8, #0e7490 ); color: #fff !important;
	font-family: inherit; font-weight: 700; font-size: 1.15rem; line-height: 1.2; text-decoration: none !important; cursor: pointer;
}
.fpe-b2-mini-p:hover, .fpe-b2-mini-p:focus-visible { filter: brightness( 1.12 ); outline: 2px solid #67e8f9; outline-offset: 2px; }

.fpe-b2.fpe-b2-mini .fpe-b2-cerca.e-aperta { display: flex; }

/* 4.85 — FP MAPS TOP, SYNTAX LAB, FP GAMEBOOK TOP accanto a «Studenti».
   Stesso vetro disegnato delle altre pastiglie (nessuna sfocatura vera: costerebbe sul telefono),
   una sfumatura di colore a testa. Nessuna animazione nuova: restano le due scintille gia' presenti. */
.fpe-b2 .fpe-b2-ex { --tinta: 45, 212, 191; color: #fff; text-decoration: none; border: 1px solid rgba( 255, 255, 255, .26 );
	background: linear-gradient( 160deg, rgba( 255, 255, 255, .16 ), rgba( var( --tinta ), .2 ) ), rgba( 20, 40, 66, .55 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .35 ), 0 4px 14px rgba( 0, 0, 0, .28 ); }
.fpe-b2 .fpe-b2-ex:hover, .fpe-b2 .fpe-b2-ex:focus-visible { color: #fff; box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .45 ), 0 0 0 1px rgba( var( --tinta ), .8 ), 0 4px 14px rgba( 0, 0, 0, .28 ); }
.fpe-b2 .fpe-b2-ex-maps { --tinta: 20, 184, 166; }
.fpe-b2 .fpe-b2-ex-syntax { --tinta: 167, 139, 250; }
.fpe-b2 .fpe-b2-ex-gamebook { --tinta: 245, 158, 11; }
.fpe-b2 .fpe-b2-ex-tea { --tinta: 225, 29, 72; }
/* sotto i 1380 px non c'e' posto per i nomi (misurato: a 1280 la riga e' larga 1420): solo l'icona, tonda come la lente */
@media ( max-width: 1380px ) {
	.fpe-b2 .fpe-b2-ex { flex: 0 0 auto; width: 34px; min-width: 34px; padding: 0; gap: 0; }
	.fpe-b2 .fpe-b2-ex .fpe-b2-t { display: none; }
	.fpe-b2 .fpe-b2-ex .fpe-b2-i { font-size: 16px; }
}
@media ( max-width: 760px ) {
	.fpe-b2 .fpe-b2-ex { width: 30px; min-width: 30px; }
	.fpe-b2 .fpe-b2-ex .fpe-b2-i { font-size: 14px; }
}
@media ( min-width: 761px ) and ( max-width: 1380px ) {
	.fpe-b2 .fpe-b2-ex { height: 38px; width: 40px; min-width: 40px; }
}
/* tablet: la riga era gia' piu' larga dello schermo (a 800 px usciva da tutte e due le parti): via 'Dove sei', spazi stretti */
@media ( min-width: 761px ) and ( max-width: 1100px ) {
	.fpe-b2 .fpe-b2-dove { display: none; }
	.fpe-b2 .fpe-b2-dentro { gap: 5px; padding: 0 6px; }
	.fpe-b2 .fpe-b2-p { padding-left: 9px; padding-right: 9px; }
}

/* ======================================================================
   4.87 — I PIANETI sotto le schede (galassia, maps, syntax lab, gamebook)
   frap, 10 ottobre, guardando il demo: «per la homepage pianeti va benissimo». Quattro sfere che
   fluttuano piano, ognuna con il suo piccolo effetto. LEGGERO: si animano solo transform e opacity,
   le luci sono ombre fisse (mai animate) e gradienti; con prefers-reduced-motion sta tutto fermo.
   ====================================================================== */
.fpe-b2-pianeti { display: flex; justify-content: center; gap: clamp( 10px, 3vw, 34px ); margin: 18px 0 4px; }
.fpe-b2-pia { position: relative; flex: none; width: clamp( 74px, 8.5vw, 104px ); text-align: center; text-decoration: none; color: #eaf6ff; font-weight: 900; font-size: 12px; letter-spacing: .06em; text-shadow: 0 1px 4px #000, 0 0 3px #000; }
.fpe-b2-pia:hover, .fpe-b2-pia:focus-visible { color: #fff; }
.fpe-b2-pia-s { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%; font-size: clamp( 28px, 3.6vw, 42px ); line-height: 1;
	background: radial-gradient( circle at 32% 28%, rgba( 255, 255, 255, .27 ), transparent 40% ), radial-gradient( circle, color-mix( in srgb, var( --k ) 70%, #000 ), #050a14 78% );
	box-shadow: 0 0 0 1px rgba( 255, 255, 255, .13 ) inset, 0 0 26px -4px var( --k );
	animation: fpe-b2-pia-flo 5s ease-in-out infinite; transition: transform .25s ease; }
.fpe-b2-pia:nth-child(2) .fpe-b2-pia-s { animation-delay: -1.2s; } .fpe-b2-pia:nth-child(3) .fpe-b2-pia-s { animation-delay: -2.4s; } .fpe-b2-pia:nth-child(4) .fpe-b2-pia-s { animation-delay: -3.6s; }
.fpe-b2-pia:hover .fpe-b2-pia-s { transform: scale( 1.08 ); }
.fpe-b2-pia-s::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px dashed rgba( 255, 255, 255, .22 ); transform: rotate( -20deg ) scaleY( .35 ); pointer-events: none; }
.fpe-b2-pia-n { display: block; margin-top: 8px; white-space: nowrap; }
.fpe-b2-pia-galassia .fpe-b2-pia-s { box-shadow: 0 0 0 1px rgba( 255, 255, 255, .2 ) inset, 0 0 40px -2px var( --k ); }
@keyframes fpe-b2-pia-flo { 50% { transform: translateY( -6px ); } }
@media ( max-width: 760px ) {
	.fpe-b2-pianeti { gap: 2.5%; margin: 10px 0 2px; }
	.fpe-b2-pia { flex: 0 1 auto; min-width: 0; width: 17%; max-width: 62px; font-size: 8px; letter-spacing: .01em; }
	.fpe-b2-pia-n { white-space: normal; line-height: 1.1; }
	.fpe-b2-pia-s { font-size: 24px; }
	.fpe-b2-pia-s::after { inset: -4px; }
	.fpe-b2-pia-n { margin-top: 5px; }
}
@media ( prefers-reduced-motion: reduce ) { .fpe-b2-pia-s { animation: none; } }

/* ======================================================================
   4.87 — BARRA IN ALTO SUL TELEFONO: si vedono TUTTI i bottoni
   frap, 10 ottobre: «da mobile devono vedersi tutti i bottoni; nel caso riduci il testo; inizia con
   Superiori, Docenti e Guida». Prima «Da dove parto?» spariva sul telefono. Adesso l'ordine e':
   Studenti · Docenti · Guida · 🧭 (solo icona) · 🔍 · ☰, con il testo un po' piu' piccolo.
   ====================================================================== */
@media ( max-width: 760px ) {
	.fpe-b2 .fpe-b2-stu { order: 1; } .fpe-b2 .fpe-b2-doc { order: 2; } .fpe-b2 .fpe-b2-gat { order: 3; }
	.fpe-b2 .fpe-b2-dove { order: 4; display: inline-flex; flex: 0 0 30px; width: 30px; min-width: 30px; padding: 0; gap: 0; }
	.fpe-b2 .fpe-b2-dove .fpe-b2-t { display: none; }
	.fpe-b2 .fpe-b2-dove .fpe-b2-i { font-size: 15px; }
	.fpe-b2 .fpe-b2-lente { order: 5; } .fpe-b2 .fpe-b2-tutto { order: 6; }
	.fpe-b2 .fpe-b2-p { font-size: 10.5px; padding: 0 5px; gap: 2px; }
	.fpe-b2 .fpe-b2-stu, .fpe-b2 .fpe-b2-doc, .fpe-b2 .fpe-b2-gat { font-size: 10.5px; }
}
@media ( max-width: 380px ) {
	.fpe-b2 .fpe-b2-p { font-size: 9.5px; padding: 0 3px; }
	.fpe-b2 .fpe-b2-stu .fpe-b2-i, .fpe-b2 .fpe-b2-doc .fpe-b2-i, .fpe-b2 .fpe-b2-gat .fpe-b2-i { font-size: 11px; }
	.fpe-b2 .fpe-b2-dove, .fpe-b2 .fpe-b2-ico { width: 26px; min-width: 26px; flex-basis: 26px; }
}


/* ================= 4.88 · titolo con effetti, bottoni di vetro, novita' a una notizia ================= */
.fpe-b2-titolo { position: relative; display: inline-block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fpe-b2-l { display: inline-block; animation: fpe-b2-onda 7s ease-in-out infinite; animation-delay: calc( var( --i ) * 80ms ); will-change: transform; }
@keyframes fpe-b2-onda {
	0%, 14%, 100% { transform: translateY( 0 ); text-shadow: none; }
	6% { transform: translateY( -4px ); color: #fff; text-shadow: 0 0 12px rgba( 125, 233, 255, .95 ); }
}
.fpe-b2-sciame { position: absolute; left: 0; right: 0; bottom: 60%; height: 0; pointer-events: none; }
.fpe-b2-sc-p { position: absolute; left: var( --x ); bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: #bff3ff; box-shadow: 0 0 6px 1px rgba( 125, 233, 255, .9 ); opacity: 0; animation: fpe-b2-sale var( --w, 3s ) ease-out infinite; animation-delay: var( --d, 0s ); }
@keyframes fpe-b2-sale { 0% { opacity: 0; transform: translateY( 0 ) scale( .6 ); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY( -26px ) scale( 1.1 ); } }
.fpe-b2-stella { position: fixed; z-index: 100000; pointer-events: none; font-size: 15px; line-height: 1; color: #fde68a; text-shadow: 0 0 8px rgba( 253, 224, 71, .9 ); }
.fpe-barra.fpe-b2.e-piccola .fpe-b2-l, .fpe-barra.fpe-b2.e-piccola .fpe-b2-sc-p { animation-play-state: paused; }
@media ( max-width: 760px ) { .fpe-b2-sc-p:nth-child( n + 6 ) { display: none; } }
@media ( prefers-reduced-motion: reduce ) { .fpe-b2-l, .fpe-b2-sc-p { animation: none; } .fpe-b2-sciame { display: none; } }

/* vetro luminoso */
.fpe-b2 .fpe-b2-p, .fpe-b2 .fpe-b2-ico {
	position: relative; overflow: hidden;
	border: 1px solid rgba( 255, 255, 255, .26 );
	background: linear-gradient( 180deg, rgba( 255, 255, 255, .22 ), rgba( 255, 255, 255, .06 ) 48%, rgba( 45, 212, 191, .14 ) );
	color: #f1faff; text-shadow: 0 1px 2px rgba( 0, 0, 0, .35 );
	box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .5 ), inset 0 -6px 10px -6px rgba( 62, 198, 255, .35 ), 0 4px 14px -4px rgba( 0, 0, 0, .6 );
	-webkit-backdrop-filter: blur( 3px ); backdrop-filter: blur( 3px );
}
.fpe-b2 .fpe-b2-p::after, .fpe-b2 .fpe-b2-ico::after {
	content: ''; position: absolute; left: 8%; right: 8%; top: 1px; height: 46%; border-radius: 999px 999px 60% 60%;
	background: linear-gradient( 180deg, rgba( 255, 255, 255, .38 ), rgba( 255, 255, 255, 0 ) ); pointer-events: none;
}
.fpe-b2 .fpe-b2-stu { background: linear-gradient( 180deg, rgba( 255, 255, 255, .3 ), rgba( 255, 255, 255, .06 ) 45%, rgba( 22, 112, 216, .55 ) ); border-color: rgba( 160, 215, 255, .6 ); color: #fff; }
.fpe-b2 .fpe-b2-doc { background: linear-gradient( 180deg, rgba( 255, 255, 255, .3 ), rgba( 255, 255, 255, .06 ) 45%, rgba( 15, 143, 154, .55 ) ); border-color: rgba( 159, 240, 226, .6 ); color: #fff; }
.fpe-b2 .fpe-b2-gat { background: linear-gradient( 180deg, rgba( 255, 255, 255, .3 ), rgba( 255, 255, 255, .06 ) 45%, rgba( 26, 179, 162, .55 ) ); color: #fff; }
.fpe-b2 .fpe-b2-doc:hover, .fpe-b2 .fpe-b2-gat:hover { color: #fff; }
.fpe-b2 .fpe-b2-p:hover, .fpe-b2 .fpe-b2-ico:hover { box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .6 ), 0 0 0 1px #3ec6ff, 0 0 16px rgba( 62, 198, 255, .55 ), 0 4px 14px -4px rgba( 0, 0, 0, .6 ); }
.fpe-b2 .fpe-b2-ico { overflow: hidden; }

/* la striscia a una notizia: solo telefono */
.fpe-b2-nov-uno { display: none; }
@media ( max-width: 760px ) {
	.fpe-b2-nov { flex-direction: column; }
	.fpe-b2-nov-fin { display: none; }
	.fpe-b2-nov-e { align-self: flex-start; border-radius: 0 0 9px 0; padding: 4px 10px; font-size: 10.5px; }
	.fpe-b2-nov-uno { display: block; padding: 6px 12px 8px; min-height: 52px; }
	.fpe-b2-nov-u { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: #eaf8ff; font-weight: 700; font-size: 14px; line-height: 1.3; text-decoration: none; transition: opacity .22s, transform .22s; }
	.fpe-b2-nov-u.e-giu { opacity: 0; transform: translateY( 4px ); }
	.fpe-b2-nov-u em { font-style: normal; color: #7fe9da; }
	.fpe-b2-nov-punti { display: flex; justify-content: center; gap: 2px; margin-top: 2px; }
	.fpe-b2-nov-pt { width: 22px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
	.fpe-b2-nov-pt::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba( 255, 255, 255, .4 ); }
	.fpe-b2-nov-pt.e-su::before { background: #2dd4bf; box-shadow: 0 0 6px #2dd4bf; width: 8px; height: 8px; margin: -4px 0 0 -4px; }
}
@media ( prefers-reduced-motion: reduce ) { .fpe-b2-nov-u { transition: none; } }

/* ---------- 4.101: ANTEPRIMA dei pianeti (pop up a vetro con clip) ---------- */
.fpe-an { position: fixed; z-index: 100000; box-sizing: border-box; overflow: hidden; color: #f1f5f9;
	border: 1.5px solid var(--k,#38bdf8); border-radius: 18px; background: rgba(11,18,38,.72);
	-webkit-backdrop-filter: blur( 16px ) saturate( 1.4 ); backdrop-filter: blur( 16px ) saturate( 1.4 );
	box-shadow: 0 18px 50px -10px rgba(0,0,0,.65), 0 0 28px -8px var(--k,#38bdf8), inset 0 1px 0 rgba(255,255,255,.3);
	opacity: 0; transform: translateY( 8px ) scale( .96 ); pointer-events: none; transition: opacity .18s ease, transform .22s ease; }
.fpe-an.fpe-an-su { opacity: 1; transform: none; pointer-events: auto; }
.fpe-an-m { position: relative; aspect-ratio: 9 / 11; background: #0b1020; overflow: hidden; }
.fpe-an-m img, .fpe-an-m video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fpe-an-m video { opacity: 0; transition: opacity .3s; }
.fpe-an-m.fpe-an-play video { opacity: 1; }
.fpe-an-big { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 64px; }
.fpe-an-b { padding: 11px 14px 14px; }
.fpe-an-b h3 { margin: 0 0 4px; font-size: 1.02rem; color: #fff; line-height: 1.2; }
.fpe-an-b p { margin: 0 0 10px; font-size: .86rem; line-height: 1.35; color: #cbd5e1; }
.fpe-an-go { display: block; text-align: center; padding: 10px; border-radius: 12px; background: var(--k,#38bdf8); color: #0b1226 !important; font-weight: 900; text-decoration: none !important; }
.fpe-an-x { position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.4);
	background: rgba(0,0,0,.5); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; }
@media ( prefers-reduced-motion: reduce ) { .fpe-an { transition: none; transform: none; } }

/* 4.101.1 (frap, 17 ott): su telefono la barra NOVITÀ in alto non c'è piu' (resta sul computer) */
@media ( max-width: 760px ) { .fpe-b2-nov, .fpe-b2-nov-uno, .fpe-b2-nov-fin { display: none !important; } }

/* 4.101.3 (frap, 17 ott): sul telefono i pianeti restano della forma di prima (stessa grandezza) ma vanno a capo:
   5 per riga, quindi al massimo il doppio dello spazio di prima, mai di piu' */
@media ( max-width: 760px ) {
	.fpe-b2-pianeti { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 2%; margin: 10px 0 2px; }
	.fpe-b2-pia { flex: 0 0 auto; width: 17%; max-width: 62px; font-size: 8px; letter-spacing: .01em; }
	.fpe-b2-pia-s { font-size: 24px; }
	.fpe-b2-pia-n { margin-top: 4px; }
}

/* =====================================================================
   4.101.5 (frap, 17 ott) — emoji dietro titoli e ricerca; su telefono scritte e bottoni piu' grandi
   ===================================================================== */
.fpe-b2-testata { z-index: 60; }
.fpc-eroe { position: relative; z-index: 60; }
@media ( max-width: 760px ) {
	.fpe-b2 .fpe-b2-p { font-size: 11px; }
	.fpe-b2 .fpe-b2-stu, .fpe-b2 .fpe-b2-doc, .fpe-b2 .fpe-b2-gat { font-size: 11px; }
	.fpe-b2-slogan { font-size: 10px; }
	.fpe-b2-pia { font-size: 9px; letter-spacing: 0; }
	/* la homepage disegnata da FP Home Manager: titoli e riquadri un po' piu' grandi, stessa impaginazione (il browser scala tutto in proporzione) */
	.fp-hero-grid, .fp-section { zoom: 1.1; }
}
@media ( max-width: 380px ) {
	.fpe-b2 .fpe-b2-p, .fpe-b2 .fpe-b2-stu, .fpe-b2 .fpe-b2-doc, .fpe-b2 .fpe-b2-gat { font-size: 10.5px; }
	.fp-hero-grid, .fp-section { zoom: 1.05; }
}