/* ===========================================================
   home2.css — Stile dedicato alla nuova home (Pages/home2.ctp)
   Namespace: .h2-* (isolato dal resto del sito, no conflitti)
   Mobile-first: regole base = mobile; media-query salgono.
   Breakpoints:
     base   < 600px  (mobile)
     md   >= 600px  (tablet)
     lg   >= 980px  (desktop)
     xl   >= 1240px (desktop largo)
   ===========================================================  */

/* --- Container globale --- */
.h2-page{
	font-family: inherit;
	color: #1f2937;
	line-height: 1.55;
	box-sizing: border-box;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 14px;
}
.h2-page *,
.h2-page *::before,
.h2-page *::after{
	box-sizing: border-box;
}
.h2-page img{max-width:100%;height:auto;display:block}

/* ===========================================================
   HERO
   =========================================================== */
.h2-hero{
	position: relative;
	background: linear-gradient(135deg, #0b3a66 0%, #0b5394 50%, #1e88e5 100%);
	border-radius: 14px;
	overflow: hidden;
	margin: 12px 0 28px 0;
	padding: 40px 22px 36px 22px;
	color: #fff;
	text-align: center;
}
.h2-hero-bg{
	position: absolute;
	opacity: .18;
	pointer-events: none;
	z-index: 0;
	width: 140px;
	height: auto;
}
.h2-hero-bg-left{ top: 8%; left: -20px; transform: rotate(-12deg); }
.h2-hero-bg-right{ bottom: 8%; right: -20px; transform: rotate(8deg); }

.h2-hero-inner{ position: relative; z-index: 1; }

.h2-hero-title{
	color: #fff !important;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
	border: 0 !important;
	letter-spacing: 1px;
	text-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.h2-hero-title-line2{ display: inline-block; }

.h2-hero-subtitle{
	color: rgba(255,255,255,.92) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.45 !important;
	margin: 0 0 14px 0 !important;
	border: 0 !important;
	padding: 0 !important;
	max-width: 760px;
	text-shadow: none !important;
}
.h2-hero-subtitle br{display:none}

.h2-hero-promo{
	color: #dbe9f7;
	font-size: 14px;
	margin: 0 auto 22px auto;
	max-width: 640px;
	line-height: 1.55;
}
.h2-hero-promo br{display:none}
.h2-hero-promo strong{ color: #fff; font-weight: 700; }

.h2-hero-cta{
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	margin: 0 auto;
	max-width: 320px;
}

/* ===========================================================
   PULSANTI (.h2-btn) — sistema unico, varianti per ruolo
   =========================================================== */
.h2-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	padding: 12px 22px;
	border-radius: 99px;
	border: 2px solid transparent;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none !important;
	text-shadow: none !important;
	cursor: pointer;
	transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.h2-btn:hover{ transform: translateY(-1px); text-decoration: none !important; }
.h2-btn svg{ width: 14px; height: 14px; flex: 0 0 auto; }
.h2-btn-ico{ width: 14px; height: 14px; flex: 0 0 auto; }
/* Primary (blu) */
.h2-btn-primary{
	background: #0D80C0;
	color: #fff !important;
	border-color: #0D80C0;
	box-shadow: 0 2px 8px rgba(13,128,192,.25);
}
.h2-btn-primary:hover{ background: #0a6396; border-color: #0a6396; color: #fff !important; }
/* Secondary (bianco, bordo blu, contrasto su sfondo blu) */
.h2-btn-secondary{
	background: #fff;
	color: #0b3a66 !important;
	border-color: #fff;
}
.h2-btn-secondary:hover{ background: #eaf2fb; color: #0b3a66 !important; border-color: #eaf2fb; }
/* Outline (bianco, bordo blu brand) */
.h2-btn-outline{
	background: #fff;
	color: #0D80C0 !important;
	border-color: #0D80C0;
}
.h2-btn-outline:hover{ background: #0D80C0; color: #fff !important; border-color: #0D80C0; }
.h2-btn-outline:hover .h2-btn-ico{ filter: brightness(0) invert(1); }

/* ===========================================================
   SECTION GENERICA — head con accent bar + pill CTA moderna
   =========================================================== */
.h2-section{ margin: 0 0 36px 0; }
.h2-section-head{
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center; /* mobile: tutto centrato */
	text-align: center;
	margin-bottom: 22px;
	padding-bottom: 16px;
	position: relative;
}
.h2-section-head::after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, #cfe4f3 0%, #cfe4f3 35%, transparent 100%);
}
.h2-section-title{
	color: #0b3a66 !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	padding: 14px 0 0 0 !important; /* mobile: spazio per la bar orizzontale sopra */
	border: 0 !important;
	text-shadow: none !important;
	position: relative;
	letter-spacing: -.2px;
}
.h2-section-title::before{
	content: '';
	position: absolute;
	/* Mobile default: barra orizzontale CENTRATA sopra il titolo */
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	bottom: auto;
	width: 32px;
	height: 4px;
	background: linear-gradient(90deg, #1e88e5 0%, #0b3a66 100%);
	border-radius: 3px;
}
/* Variante centrata (es. "Quiz Discipline Aeronautiche"): no barra a sx, full center */
.h2-section-title-center{
	padding: 14px 0 0 0 !important;
	text-align: center;
	width: 100%;
}
/* La barra dell'accent diventa orizzontale CENTRATA SOPRA il titolo */
.h2-section-title-center::before{
	display: block !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	top: 0 !important;
	bottom: auto !important;
	width: 40px !important;
	height: 4px !important;
	background: linear-gradient(90deg, #1e88e5 0%, #0b3a66 100%) !important;
}

/* Sezione "head" centrata (per la sezione courses con title + subtitle) */
.h2-section-head-center{
	align-items: center !important;
	text-align: center !important;
	gap: 8px !important;
}
.h2-section-sub{
	color: #445262;
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
	max-width: 600px;
}
@media (min-width: 600px){
	.h2-section-sub{ font-size: 15px; max-width: 680px; }
}
@media (min-width: 980px){
	.h2-section-sub{ font-size: 16px; max-width: 720px; }
}

/* Link "Scopri tutti i quiz" come pill chip pieno: sfondo blu + testo bianco */
.h2-section-link{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #fff !important;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none !important;
	padding: 8px 14px 8px 16px;
	border-radius: 99px;
	background: #0D80C0;
	border: 1.5px solid #0D80C0;
	transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
	letter-spacing: .2px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(13,128,192,.18);
}
.h2-section-link:hover{
	color: #fff !important;
	background: #0a6396;
	border-color: #0a6396;
	text-decoration: none !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(13,128,192,.32);
}
.h2-section-link svg{
	width: 11px;
	height: 11px;
	transition: transform .2s ease;
}
.h2-section-link:hover svg{ transform: translateX(3px); }

.h2-ad{ width: 100%; max-width: 100%; min-height: 90px; }

/* ===========================================================
   CARDS (quiz in evidenza + lista tutti)
   Grid responsive:
   - .h2-cards (default): 1 col → 2 col tablet → 3 col desktop (lista discipline)
   - .h2-cards-4 (featured): 1 col → 2 col tablet → 4 col desktop (4 quiz no buco)
   =========================================================== */
.h2-cards{
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	align-items: stretch;
}
.h2-card{
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e3ebf3;
	border-radius: 14px;
	padding: 20px 18px 18px 18px;
	box-shadow: 0 1px 4px rgba(11,58,102,.04);
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
	text-align: center;
}
.h2-card:hover{
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(11,58,102,.10);
	border-color: #cfdcec;
}
.h2-card-title{
	color: #0b3a66 !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	margin: 0 0 12px 0 !important;
	padding: 0 0 10px 0 !important;
	border: 0 !important;
	position: relative;
	text-shadow: none !important;
}
.h2-card-title::after{
	content: '';
	position: absolute;
	bottom: 0; left: 50%; transform: translateX(-50%);
	width: 36px; height: 3px;
	background: #0D80C0;
	border-radius: 2px;
}
.h2-card-image{
	margin: 0 0 14px 0;
}
.h2-card-image img{
	margin: 0 auto;
	border-radius: 10px;
	max-width: 100%;
}
.h2-card-meta{
	color: #445262;
	font-size: 14px;
	margin: 0 0 14px 0;
}
.h2-card-meta strong{ color: #0D80C0; font-weight: 700; }

/* Pillola "N argomenti di esame" — stile identico a /quiz (.qzix-count) */
.h2-card .qzix-count{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	align-self: center;
	margin: 0 auto 14px auto;
	padding: 6px 14px;
	background: #eaf2fb;
	border: 1px solid #cfdcec;
	border-radius: 99px;
	color: #0b3a66;
	font-size: 13px;
	line-height: 1.3;
	font-weight: 500;
	transition: background .12s ease, border-color .12s ease;
}
.h2-card:hover .qzix-count{
	background: #dceaf6;
	border-color: #a3c4e4;
}
.h2-card .qzix-count-ico{
	font-size: 15px;
	line-height: 1;
	display: inline-block;
	filter: none;
}
.h2-card .qzix-count-num{
	font-weight: 800;
	color: #0D80C0;
	font-size: 15px;
	line-height: 1.2;
	letter-spacing: .3px;
}
.h2-card .qzix-count-lbl{
	color: #445262;
	font-size: 12.5px;
	font-weight: 500;
}
.h2-card-cta{
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: auto;
}
.h2-card-cta .h2-btn{
	min-height: 42px;
	padding: 10px 14px;
	font-size: 14px;
}

/* ===========================================================
   SEZIONE APP MOBILE
   =========================================================== */
.h2-app{
	background: linear-gradient(135deg, #f1f6fb 0%, #e6effa 100%);
	border: 1px solid #d6e3f1;
	border-radius: 14px;
	padding: 26px 22px;
}
.h2-app-inner{
	display: flex;
	flex-direction: column-reverse;
	gap: 20px;
	align-items: center;
}
.h2-app-text{ text-align: center; flex: 1 1 auto; }
.h2-app-image{ flex: 0 1 auto; max-width: 280px; }
.h2-app-image img{ margin: 0 auto; }
.h2-app-title{
	font-size: 26px;
	font-weight: 800;
	color: #0b3a66;
	letter-spacing: 1px;
	line-height: 1.15;
	margin: 0 0 12px 0;
}
.h2-app-title span{ color: #0D80C0; }
.h2-app-promo{
	color: #445262;
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 10px 0;
}
.h2-app-promo br{ display: none; }
.h2-app-promo strong{ color: #0b3a66; font-weight: 700; }
.h2-app-stores{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}
.h2-app-stores a{ display: inline-block; }
.h2-app-stores img{ height: 44px; width: auto; }

/* ===========================================================
   SPLIT 2-COL (prezzi + newsletter)
   =========================================================== */
.h2-split{
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
.h2-promo{
	background: #fff;
	border: 1px solid #d6e3f1;
	border-radius: 14px;
	padding: 22px 20px;
	text-align: center;
	box-shadow: 0 1px 4px rgba(11,58,102,.04);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.h2-promo-prezzi{
	background: linear-gradient(135deg, #0b3a66 0%, #0b5394 50%, #1e88e5 100%);
	border-color: transparent;
	color: #fff;
}
.h2-promo-prezzi .h2-promo-title,
.h2-promo-prezzi .h2-promo-text{ color: #fff; }
.h2-promo-prezzi .h2-promo-text strong{ color: #fff; }
.h2-promo-prezzi .h2-btn-primary{ background: #fff; color: #0b3a66 !important; border-color: #fff; }
.h2-promo-prezzi .h2-btn-primary:hover{ background: #eaf2fb; color: #0b3a66 !important; border-color: #eaf2fb; }
.h2-promo-title{
	color: #0b3a66 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	line-height: 1.3 !important;
}
.h2-promo-text{ color: #445262; font-size: 14.5px; line-height: 1.55; margin: 0; }
.h2-promo-text a{ color: inherit; text-decoration: underline; }
.h2-promo-pagamenti{ display: block; }
.h2-promo-pagamenti img{ max-width: 280px; margin: 0 auto; }
.h2-promo .h2-btn{ max-width: 320px; }

/* ===========================================================
   PROMO PORTALE WEB (.h2-portal-promo)
   Sfondo gradient blu come hero pagine interne (.es-hero).
   =========================================================== */
.h2-portal-promo{
	position: relative;
	background: linear-gradient(135deg, #0b3a66 0%, #0b5394 50%, #1e88e5 100%);
	border-radius: 14px;
	padding: 34px 22px;
	overflow: hidden;
	text-align: center;
	color: #fff;
	margin: 0 0 36px 0;
}
.h2-portal-promo::before{
	content: '';
	position: absolute;
	top: -60px;
	right: -40px;
	width: 240px;
	height: 240px;
	background: rgba(255,255,255,.06);
	border-radius: 50%;
	pointer-events: none;
}
.h2-portal-promo::after{
	content: '';
	position: absolute;
	bottom: -80px;
	left: -60px;
	width: 280px;
	height: 280px;
	background: rgba(255,255,255,.05);
	border-radius: 50%;
	pointer-events: none;
}
.h2-portal-inner{
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
}
.h2-portal-eyebrow{
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #dbe9f7;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 99px;
	padding: 5px 12px;
	margin-bottom: 14px;
}
.h2-portal-title{
	color: #fff !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
	border: 0 !important;
	text-shadow: none !important;
}
.h2-portal-text{
	color: #dbe9f7;
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0 0 22px 0;
}
.h2-portal-text strong{ color: #fff; font-weight: 700; }
.h2-portal-cta{
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: center;
	max-width: 320px;
	margin: 0 auto;
}
.h2-portal-cta .h2-btn{ width: 100%; }
/* Pulsante "Light": bianco pieno con testo navy (primario sul gradient) */
.h2-btn-light{
	background: #fff;
	color: #0b3a66 !important;
	border-color: #fff;
	box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.h2-btn-light:hover{
	background: #f1f6fb;
	color: #0b3a66 !important;
	border-color: #f1f6fb;
	box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
/* Pulsante "Ghost": trasparente con bordo bianco (secondario sul gradient) */
.h2-btn-ghost{
	background: transparent;
	color: #fff !important;
	border-color: rgba(255,255,255,.7);
}
.h2-btn-ghost:hover{
	background: rgba(255,255,255,.12);
	color: #fff !important;
	border-color: #fff;
}

@media (min-width: 600px){
	.h2-portal-promo{ padding: 44px 36px; }
	.h2-portal-title{ font-size: 28px !important; }
	.h2-portal-text{ font-size: 16px; }
	.h2-portal-cta{ flex-direction: row; max-width: 100%; justify-content: center; gap: 14px; }
	.h2-portal-cta .h2-btn{ width: auto; min-width: 180px; }
}
@media (min-width: 980px){
	.h2-portal-promo{ padding: 56px 48px; }
	.h2-portal-title{ font-size: 32px !important; }
	.h2-portal-text{ font-size: 17px; max-width: 700px; margin-left: auto; margin-right: auto; }
}

/* === Variante .h2-promo-app: box compatto con store buttons (sostituisce il box "Prezzi") === */
.h2-promo-app .h2-app-stores{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}
.h2-promo-app .h2-app-stores a{ display: inline-block; transition: transform .15s ease; }
.h2-promo-app .h2-app-stores a:hover{ transform: translateY(-2px); }
.h2-promo-app .h2-app-stores img{ height: 44px; width: auto; display: block; }

/* ===========================================================
   SEO TEXT (in fondo)
   =========================================================== */
.h2-seo{
	color: #445262;
	font-size: 14.5px;
	line-height: 1.65;
	margin: 28px 0;
}
.h2-seo h3{
	color: #0b3a66 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	margin: 26px 0 10px 0 !important;
	padding: 0 !important;
	border: 0 !important;
	text-shadow: none !important;
}
.h2-seo h4{
	color: #0b3a66 !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	margin: 22px 0 8px 0 !important;
	padding: 0 !important;
	border: 0 !important;
	text-shadow: none !important;
}
.h2-seo p{ margin: 0 0 12px 0; }
.h2-seo ul{ margin: 0 0 14px 0; padding-left: 22px; }
.h2-seo li{ margin-bottom: 4px; }
.h2-seo a{ color: #0D80C0; text-decoration: underline; }
.h2-seo a:hover{ color: #0a6396; }

/* ===========================================================
   FOOTER APP
   =========================================================== */
.h2-footer-app{
	margin-top: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: center;
}
@media (min-width: 600px){
	.h2-footer-app{ gap: 30px; }
}

/* ===========================================================
   RESPONSIVE — md (tablet) ≥ 600px
   =========================================================== */
@media (min-width: 600px){
	.h2-page{ padding: 0 18px; }

	.h2-hero{ padding: 56px 32px 50px 32px; }
	.h2-hero-bg{ width: 200px; }
	.h2-hero-bg-left{ left: -30px; top: 4%; }
	.h2-hero-bg-right{ right: -30px; bottom: 4%; }
	.h2-hero-title{ font-size: 40px; }
	.h2-hero-subtitle{ font-size: 16px !important; }
	.h2-hero-subtitle br{ display: inline; }
	.h2-hero-promo{ font-size: 15px; }
	.h2-hero-promo br{ display: inline; }
	.h2-hero-cta{ flex-direction: row; max-width: 100%; justify-content: center; }
	.h2-hero-cta .h2-btn{ width: auto; min-width: 180px; }

	.h2-section{ margin: 0 0 48px 0; }
	.h2-section-head{
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		gap: 16px;
	}
	/* Da tablet in su: bar verticale a sinistra (gradient verticale, layout originale) */
	.h2-section-title{
		font-size: 26px !important;
		padding: 0 0 0 18px !important;
	}
	.h2-section-title::before{
		left: 0;
		transform: none;
		top: 4px;
		bottom: 4px;
		width: 6px;
		height: auto;
		background: linear-gradient(180deg, #1e88e5 0%, #0b3a66 100%);
	}
	.h2-section-link{ font-size: 13.5px; padding: 9px 16px 9px 18px; }

	.h2-cards{
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.h2-cards-4{ grid-template-columns: repeat(2, 1fr); }

	.h2-app{ padding: 36px 30px; }
	.h2-app-inner{ flex-direction: row; gap: 30px; }
	.h2-app-text{ text-align: left; }
	.h2-app-title{ font-size: 32px; }
	.h2-app-stores{ justify-content: flex-start; }

	.h2-split{ grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* ===========================================================
   RESPONSIVE — lg (desktop) ≥ 980px
   =========================================================== */
@media (min-width: 980px){
	.h2-page{ padding: 0 24px; }

	.h2-hero{ padding: 68px 40px 60px 40px; border-radius: 18px; }
	.h2-hero-bg{ width: 260px; }
	.h2-hero-title{ font-size: 52px; }
	.h2-hero-subtitle{ font-size: 17px !important; }

	.h2-cards{ grid-template-columns: repeat(3, 1fr); gap: 22px; }
	.h2-cards-4{ grid-template-columns: repeat(4, 1fr); gap: 18px; }
	.h2-card{ padding: 24px 22px 22px 22px; }
	.h2-cards-4 .h2-card{ padding: 20px 16px 16px 16px; }
	.h2-cards-4 .h2-card-title{ font-size: 16px !important; }
	.h2-card-title{ font-size: 18px !important; }

	.h2-app-image{ max-width: 340px; }
	.h2-app-title{ font-size: 36px; }
}

/* ===========================================================
   RESPONSIVE — xl (desktop largo) ≥ 1240px
   =========================================================== */
@media (min-width: 1240px){
	.h2-page{ padding: 0 30px; }
	.h2-hero-title{ font-size: 58px; }
}

/* ===========================================================
   FIX legacy — quando home2.ctp ha ancora .new in fondo (markup
   originale lasciato come fallback), lo nascondiamo del tutto.
   =========================================================== */
.h2-page + .new{ display: none !important; }

/* ===========================================================
   HERO LEGACY (.banner-home dentro .new.h2-hero-keep)

   DESIGN PRINCIPLE: hero STATICO (NO parallax con position:fixed).
   Il parallax originale (fixed top:0) crea conflitti col navbar
   fisso del template (96px) e variabilita' su viewport diversi.
   Approccio robusto: banner sempre nel flusso, padding-top per
   non sovrapporsi al menu, content-wrap arrotondato che sale di
   -40px sull'hero per dare l'effetto "tab" curvo continuo.
   Funziona identico su mobile/tablet/laptop/24"/4K senza bug.
   =========================================================== */

/* Il container .h2-hero-keep occupa tutta la larghezza viewport */
.h2-hero-keep{
	position: relative;
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	margin-top: 0 !important;
	overflow: hidden;
	background: radial-gradient(ellipse at center, rgb(83 150 184) 0%, rgba(0, 82, 150, 1) 100%);
}

/* .banner-home: ANNULLO le regole di nuovo-stile.css (position:fixed sopra
   1500px, height fisse, ecc.) e lo riporto a flow normale con padding-top
   per non finire sotto al navbar fisso del template. */
.h2-hero-keep .banner-home{
	position: relative !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	z-index: auto !important;
	padding-top: 80px !important;    /* navbar ~56px mobile + buffer */
	padding-bottom: 65px !important; /* spazio prima del content-wrap curvo */
	padding-left: 16px !important;
	padding-right: 16px !important;
	background: radial-gradient(ellipse at center, rgb(83 150 184) 0%, rgba(0, 82, 150, 1) 100%) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* Tablet (600-979px): navbar piu' alto, +20px di buffer per il logo */
@media (min-width: 600px) and (max-width: 979px){
	.h2-hero-keep .banner-home{
		padding-top: 120px !important;
		padding-bottom: 85px !important;
	}
}
/* Laptop+ (>= 980px): padding-top per non sovrapporsi al navbar */
@media (min-width: 980px){
	.h2-hero-keep .banner-home{
		padding-top: 90px !important;
		padding-bottom: 95px !important;  /* 95 - 40 overlap = 55px aria visibile */
	}
}
/* Desktop grande (>= 1280px): poco piu' di aria sopra/sotto */
@media (min-width: 1280px){
	.h2-hero-keep .banner-home{
		padding-top: 85px !important;
		padding-bottom: 105px !important; /* 105 - 40 = 65px aria visibile */
	}
}
/* Desktop alto (viewport >= 900px di altezza): piu' aria sotto su monitor grossi */
@media (min-width: 1280px) and (min-height: 900px){
	.h2-hero-keep .banner-home{
		padding-bottom: 135px !important; /* 135 - 40 = 95px aria visibile */
	}
}

/* Content wrap: full-width bianco, si SOVRAPPONE -40px sull'hero con
   border-radius:50px in alto per dare l'effetto "tab" arrotondato. */
.h2-content-wrap{
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 50px 50px 0 0;
	margin-top: -40px;
	padding-top: 50px;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.h2-content-wrap > .h2-page{
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 16px;
}
@media (min-width: 980px){
	.h2-content-wrap > .h2-page{ padding: 0 24px; }
}

/* Su mobile (sotto 600px) il border-radius e' un po' meno marcato */
@media (max-width: 599px){
	.h2-content-wrap{
		border-radius: 30px 30px 0 0;
		margin-top: -25px;
		padding-top: 35px;
	}
}

/* ===========================================================
   SCALA FONT COERENTE PER HOME2
   Mobile-first: la scala cresce ai breakpoint. Override delle regole
   originali di nuovo-stile.css (incluse quelle language-specific che
   cambiano font-size per de/sr/pl/cs) cosi' su mobile e' sempre coerente.
   =========================================================== */

/* === HERO: tipografia coerente — scala armonica e spaziature ritmiche.
   Tutti gli elementi dell'hero seguono la stessa scala mobile-first,
   con pesi/colori scalari per gerarchia visiva pulita. === */
.h2-hero-keep .hero-content h1{
	font-size: 34px !important;
	line-height: 1.15 !important;
	font-weight: 800 !important;
	margin: 0 0 12px 0 !important;
	padding: 0 !important;
	letter-spacing: .5px;
	color: #fff !important;
	text-shadow: 0 2px 4px rgba(0,0,0,.18);
}
.h2-hero-keep .hero-content h1 br{ display: inline; }
.h2-hero-keep .hero-content h2{
	font-size: 15px !important;
	line-height: 1.5 !important;
	font-weight: 500 !important;
	margin: 0 auto 18px auto !important;
	padding: 0 !important;
	color: rgba(255,255,255,.92) !important;
	border: 0 !important;
	text-shadow: none !important;
	max-width: 1100px;
}
.h2-hero-keep .hero-content h2 br{ display: none; }
.h2-hero-keep p.testo-ia-promo{
	font-size: 14px !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
	margin: 0 auto 24px auto !important;
	max-width: 1000px;
	color: rgba(255,255,255,.88);
}
.h2-hero-keep p.testo-ia-promo br{ display: none; }
.h2-hero-keep p.testo-ia-promo strong{ color: #fff; font-weight: 700; }

/* === SEZIONI (Quiz in evidenza, Quiz Discipline...) === */
.h2-section-title{ font-size: 22px !important; }

/* === CARDS === */
.h2-card-title{ font-size: 15.5px !important; }
.h2-card-meta{ font-size: 13.5px; }
.h2-card-cta .h2-btn{ font-size: 13.5px; min-height: 40px; padding: 9px 14px; }

/* === SEZIONE APP MOBILE === */
.h2-app-title{ font-size: 22px; }
.h2-app-promo{ font-size: 13.5px; }

/* === PROMO PREZZI + NEWSLETTER === */
.h2-promo-title{ font-size: 16px !important; }
.h2-promo-text{ font-size: 13.5px; }

/* === SEO TEXT === */
.h2-seo{ font-size: 14px; }
.h2-seo h3{ font-size: 16px !important; }
.h2-seo h4{ font-size: 14.5px !important; }

/* === PULSANTI HERO === */
.h2-hero-keep .tasti-home .scopri-i-nostri-quiz{ font-size: 14px !important; }

/* ===========================================================
   TABLET ≥ 600px — scala leggermente piu' grande
   =========================================================== */
@media (min-width: 600px){
	.h2-hero-keep .hero-content h1{ font-size: 36px !important; margin-bottom: 14px !important; }
	.h2-hero-keep .hero-content h2{ font-size: 16px !important; margin-bottom: 20px !important; }
	.h2-hero-keep .hero-content h2 br{ display: inline; }
	.h2-hero-keep p.testo-ia-promo{ font-size: 14.5px !important; margin-bottom: 26px !important; }
	.h2-hero-keep p.testo-ia-promo br{ display: inline; }
	.h2-section-title{ font-size: 24px !important; }
	.h2-card-title{ font-size: 16.5px !important; }
	.h2-card-meta{ font-size: 14px; }
	.h2-card-cta .h2-btn{ font-size: 14px; min-height: 42px; padding: 10px 16px; }
	.h2-app-title{ font-size: 28px; }
	.h2-app-promo{ font-size: 14.5px; }
	.h2-promo-title{ font-size: 17px !important; }
	.h2-promo-text{ font-size: 14.5px; }
	.h2-seo{ font-size: 14.5px; }
	.h2-seo h3{ font-size: 17px !important; }
	.h2-seo h4{ font-size: 15px !important; }
	.h2-hero-keep .tasti-home .scopri-i-nostri-quiz{ font-size: 15px !important; }
}

/* ===========================================================
   DESKTOP ≥ 980px — scala da laptop
   =========================================================== */
@media (min-width: 980px){
	.h2-hero-keep .hero-content h1{ font-size: 60px !important; letter-spacing: 1px; margin-bottom: 16px !important; }
	.h2-hero-keep .hero-content h2{ font-size: 20px !important; margin-bottom: 24px !important; }
	.h2-hero-keep p.testo-ia-promo{ font-size: 16px !important; margin-bottom: 30px !important; }
	.h2-section-title{ font-size: 26px !important; }
	.h2-card-title{ font-size: 17px !important; }
	.h2-app-title{ font-size: 32px; }
	.h2-promo-title{ font-size: 18px !important; }
	.h2-seo h3{ font-size: 18px !important; }
}

/* ===========================================================
   DESKTOP LARGE ≥ 1280px — scala desktop ariosa
   =========================================================== */
@media (min-width: 1280px){
	.h2-hero-keep .hero-content h1{ font-size: 90px !important; margin-bottom: 20px !important; line-height: 1.05 !important; }
	.h2-hero-keep .hero-content h2{ font-size: 22px !important; margin-bottom: 28px !important; }
	.h2-hero-keep p.testo-ia-promo{ font-size: 17px !important; margin-bottom: 34px !important; }
}

/* ===========================================================
   DESKTOP XL ≥ 1500px — H1 enorme (look originale)
   =========================================================== */
@media (min-width: 1500px){
	.h2-hero-keep .hero-content h1{ font-size: 110px !important; line-height: 1 !important; }
	.h2-hero-keep .hero-content h2{ font-size: 25px !important; }
	.h2-hero-keep p.testo-ia-promo{ font-size: 18px !important; }
}

/* ===========================================================
   AEREI DECORATIVI (drone + aereo) — dimensioni controllate per ogni breakpoint
   Su mobile sono troppo grandi/non si vedono perche' il CSS originale non
   imposta una larghezza specifica sotto i 768px. Qui forzo i valori giusti.
   =========================================================== */
.h2-hero-keep .airplane-left{
	position: absolute !important;
	top: 6% !important;
	left: -4% !important;
	width: 38% !important;
	max-width: 200px !important;
	opacity: .85;
	pointer-events: none;
	z-index: 0;
}
.h2-hero-keep .airplane-right{
	position: absolute !important;
	top: auto !important;
	bottom: 6% !important;
	right: -4% !important;
	width: 32% !important;
	max-width: 180px !important;
	opacity: .85;
	pointer-events: none;
	z-index: 0;
}
@media (min-width: 600px){
	.h2-hero-keep .airplane-left{
		width: 30% !important;
		max-width: 280px !important;
		top: 10% !important;
	}
	.h2-hero-keep .airplane-right{
		width: 26% !important;
		max-width: 220px !important;
		bottom: auto !important;
		top: 55% !important;
	}
}
@media (min-width: 980px){
	.h2-hero-keep .airplane-left{
		width: 30% !important;
		max-width: 360px !important;
	}
	.h2-hero-keep .airplane-right{
		width: 28% !important;
		max-width: 300px !important;
		top: 55% !important;
	}
}
@media (min-width: 1280px){
	.h2-hero-keep .airplane-left{
		width: 32% !important;
		max-width: 460px !important;
		top: 8% !important;
		left: 0 !important;
	}
	.h2-hero-keep .airplane-right{
		width: 30% !important;
		max-width: 400px !important;
		top: 50% !important;
		right: 0 !important;
	}
}

/* ===========================================================
   PULSANTI HERO (.tasti-home > .link-new-bottone)
   Restyle moderno: pillola elegante con hover animato.
   - Primario "Inizia gratis": bianco pieno, testo blu navy, shadow
   - Secondario "Vedi piani":  outline bianco trasparente
   La freccia si sposta a destra in hover (micro-animazione).
   =========================================================== */
.h2-hero-keep .tasti-home{
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 8px;
}
.h2-hero-keep .tasti-home .link-new-bottone{
	display: inline-block;
	text-decoration: none !important;
	width: 100%;
	max-width: 280px;
}
.h2-hero-keep .tasti-home .bottone-scopri-quiz,
.h2-hero-keep .tasti-home .bottone-secondario{
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: auto !important;
	min-height: 44px !important;
	padding: 10px 20px !important;
	border-radius: 99px !important;
	background: transparent;
	border: 2px solid #fff;
	color: #fff;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	letter-spacing: .3px;
	text-shadow: none !important;
	box-shadow: none;
	transition: transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
	box-sizing: border-box;
	width: 100%;
}
.h2-hero-keep .tasti-home .scopri-i-nostri-quiz{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit !important;
	font-weight: 700 !important;
	font-size: 13.5px !important;
	line-height: 1 !important;
	text-transform: uppercase;
	letter-spacing: .6px;
}
.h2-hero-keep .tasti-home img{
	width: 14px;
	height: 14px;
	transition: transform .2s ease;
	filter: brightness(0) invert(1); /* SVG nere/blu → bianche per uniformita' */
}

/* Pulsante PRIMARIO: bianco pieno con testo blu navy (CTA principale) */
.h2-hero-keep .tasti-home .bottone-secondario{
	background: #fff;
	color: #0b3a66;
	border-color: #fff;
	box-shadow: 0 6px 18px rgba(0,0,0,.22);
}
.h2-hero-keep .tasti-home .bottone-secondario .scopri-i-nostri-quiz{ color: #0b3a66 !important; }
.h2-hero-keep .tasti-home .bottone-secondario img{ filter: none; }
.h2-hero-keep .tasti-home .link-new-bottone:first-child:hover .bottone-secondario,
.h2-hero-keep .tasti-home .bottone-secondario:hover{
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0,0,0,.28);
	background: #f1f6fb;
	color: #0b3a66;
}
.h2-hero-keep .tasti-home .link-new-bottone:hover .bottone-secondario img,
.h2-hero-keep .tasti-home .bottone-secondario:hover img{
	transform: translateX(4px);
}

/* Pulsante SECONDARIO: trasparente con bordo bianco. Hover diventa pieno bianco. */
.h2-hero-keep .tasti-home .link-new-bottone:not(:first-child):hover .bottone-scopri-quiz,
.h2-hero-keep .tasti-home .bottone-scopri-quiz:hover{
	transform: translateY(-2px);
	background: #fff;
	color: #0b3a66;
	border-color: #fff;
	box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.h2-hero-keep .tasti-home .bottone-scopri-quiz:hover .scopri-i-nostri-quiz{ color: #0b3a66 !important; }
.h2-hero-keep .tasti-home .bottone-scopri-quiz:hover img{
	filter: brightness(0) saturate(100%) invert(15%) sepia(35%) saturate(2200%) hue-rotate(189deg) brightness(95%) contrast(95%);
	transform: translateX(4px);
}

/* Da tablet in su (≥600px): i due pulsanti affiancati */
@media (min-width: 600px){
	.h2-hero-keep .tasti-home{
		flex-direction: row;
		gap: 16px;
		margin-top: 14px;
	}
	.h2-hero-keep .tasti-home .link-new-bottone{
		width: auto;
		max-width: none;
	}
	.h2-hero-keep .tasti-home .bottone-scopri-quiz,
	.h2-hero-keep .tasti-home .bottone-secondario{
		min-width: 220px;
		min-height: 56px;
		padding: 16px 32px;
		font-size: 16px;
	}
}