/* Le porte dell'area professionale: stessa cornice e stessa testata della home (home.css),
   a destra la scheda dell'accesso. La scheda è scura apposta: testo bianco su blu notte,
   contrasto ben sopra 7:1 (WCAG 2.2 AAA) anche per il testo piccolo. */
/* Come la fascia delle pagine: il testo della porta non sta mai sul blu chiaro del centro
   (bianco su #3a86d6 = 3,8:1; su #144889 = 9,4:1). Verifica del 3/10/2026. */
.ksm-porta-pagina .ksm-cornice {
	background:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 84px 84px,
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 84px 84px,
		radial-gradient(ellipse 70% 90% at 75% 20%, var(--ksm-blu-3) 0%, var(--ksm-blu-4) 70%, #0b2f5e 100%);
}
.ksm-porta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
	gap: clamp(28px, 5vw, 96px);
	align-items: center;
	padding: clamp(40px, 6vw, 110px) var(--ksm-margine) clamp(48px, 7vw, 120px);
	min-height: min(76vh, 820px);
}
.ksm-porta-sopra { text-transform: uppercase; letter-spacing: .2em; font-size: 14px; font-weight: 600; color: var(--ksm-lime); margin: 0 0 14px; }
.ksm-porta h1 { font-size: clamp(44px, 6vw, 104px); font-weight: 300; line-height: 1; letter-spacing: -.01em; margin: 0 0 22px; }
.ksm-porta-intro { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.5; max-width: 32em; margin: 0; }

.ksm-porta-scheda {
	background: rgba(10, 32, 64, .62);
	border: 1px solid rgba(255, 255, 255, .32);
	border-radius: 26px;
	padding: clamp(24px, 3vw, 44px);
	box-shadow: 0 24px 60px rgba(8, 36, 84, .35);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.ksm-porta-scheda h2 { font-size: clamp(22px, 1.8vw, 30px); font-weight: 400; margin: 0 0 10px; }
.ksm-porta-scheda p { line-height: 1.5; }
.ksm-porta-modulo { display: grid; gap: 12px; margin-top: 10px; }
.ksm-porta-modulo label { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.ksm-campo {
	width: 100%; font: inherit; font-size: 19px; color: var(--ksm-inchiostro);
	background: #fff; border: 2px solid transparent; border-radius: 14px; padding: 14px 18px;
}
.ksm-campo:focus { outline: 3px solid var(--ksm-lime); outline-offset: 2px; }
.ksm-campo-codice { font-size: 30px; letter-spacing: .45em; text-align: center; font-variant-numeric: tabular-nums; }
.ksm-porta-aiuto { font-size: 15px; margin: 0; opacity: .92; }
.ksm-porta-privacy { font-size: 15px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .25); opacity: .92; }
.ksm-porta-modulo .ksm-bottone-lime { justify-self: start; border: 0; cursor: pointer; font-family: inherit; margin-top: 8px; }
.ksm-bottone-testo {
	background: none; border: 0; padding: 6px 0; color: #fff; font: inherit; font-size: 15px;
	text-decoration: underline; text-underline-offset: 4px; cursor: pointer;
}
.ksm-porta-altre { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 18px; }
.ksm-avviso { border-radius: 12px; padding: 12px 16px; margin: 0 0 16px; font-size: 16px; font-weight: 500; background: #fff; }
.ksm-avviso-errore { color: #8a1c1c; border-left: 6px solid #c62828; }
.ksm-avviso-ok { color: #14532d; border-left: 6px solid #2e7d32; }
.ksm-listino { margin: 20px 0; padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .5); }
.ksm-listino h3 { margin: 0 0 6px; font-size: 18px; font-weight: 600; }
.ksm-listino p { margin: 0; }

@media (max-width: 900px) {
	.ksm-porta { grid-template-columns: 1fr; min-height: 0; }
}
@media (max-width: 1100px) {
	/* sotto i 1100 px la testata della home va su due righe: il menu scorre di lato */
	.ksm-porta { padding-top: 32px; }
}