/*
	Nuovi stili per il Webinar Forever Bambù
	Moderno, professionale e geometrico. Meno "AI".
*/

/* --- Nuova sezione Reveal Animation --- */
#reveal.wrapper {
	padding-top: 0;
}

	#reveal header.major p {
		max-width: 38em;
	}

.reveal-container {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16/9; /* Proporzioni simili alle immagini fornite */
	border-radius: 0.5em;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	cursor: crosshair;
	--x: 50%;
	--y: 50%;
	--r: 0px;
}

	/* Alone luminoso della "torcia" */
	.reveal-container:after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 11;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.35s ease;
		background: radial-gradient(circle var(--r) at var(--x) var(--y), rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(255, 255, 255, 0) 78%);
	}

	.reveal-container.is-active:after {
		opacity: 1;
	}

	/* Suggerimento visivo iniziale */
	.reveal-hint {
		position: absolute;
		z-index: 12;
		bottom: 1.25em;
		left: 50%;
		transform: translateX(-50%);
		background: rgba(4, 59, 34, 0.75);
		color: #ffffff;
		font-size: 0.8em;
		letter-spacing: 0.05em;
		padding: 0.5em 1.25em;
		border-radius: 2em;
		pointer-events: none;
		transition: opacity 0.35s ease;
	}

	.reveal-container.is-active .reveal-hint {
		opacity: 0;
	}

.image-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

	.image-layer img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		pointer-events: none;
	}

	.image-layer.after {
		z-index: 10;
		/* Mask radiale sfumata: la torcia. Il raggio parte da 0 (nascosto) */
		-webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 78%, rgba(0, 0, 0, 0) 100%);
		mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 78%, rgba(0, 0, 0, 0) 100%);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}

	.image-layer.before {
		z-index: 5;
	}

@media screen and (max-width: 980px) {
	.reveal-container {
		aspect-ratio: 4/3;
	}
}

@media screen and (max-width: 736px) {
	.reveal-container {
		aspect-ratio: 1/1;
	}
}

/* --- Miglioramento Estetico: Modern Form Section --- */
#iscrizione.wrapper.form-wrapper-modern {
	background-image: url("images/overlay.png"), linear-gradient(75deg, #043b22 25%, #1e4a30 130%);
	background-color: #043b22;
	color: rgba(255, 255, 255, 0.85);
	padding: 5em 0 5em 0;
}

	#iscrizione.wrapper.form-wrapper-modern header.major {
		text-align: left;
		margin-bottom: 2em;
	}

		#iscrizione.wrapper.form-wrapper-modern header.major h2 {
			color: #ffffff;
			font-family: 'Futura', 'Futura Medium', 'Jost', sans-serif;
			font-weight: 500;
			letter-spacing: -0.005em;
		}

		#iscrizione.wrapper.form-wrapper-modern header.major p {
			color: rgba(255, 255, 255, 0.8);
		}

	.modern-form-card {
		background: #ffffff;
		border-radius: 1em;
		padding: 3em 4em;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
		position: relative;
		overflow: hidden;
	}

	.webinar-form-modern .fields {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -0.75em 0 -0.75em;
	}

		.webinar-form-modern .field {
			flex: 1 1 100%;
			padding: 0 0.75em 1.25em 0.75em;
			position: relative;
		}

		.webinar-form-modern .field.half {
			flex: 1 1 50%;
			max-width: 50%;
		}

		.webinar-form-modern label {
			display: block;
			color: #043b22;
			font-family: 'Futura', 'Futura Medium', 'Jost', sans-serif;
			font-weight: 500;
			font-size: 0.9em;
			letter-spacing: 0.03em;
			text-transform: uppercase;
			margin-bottom: 0.5em;
		}

			.webinar-form-modern label .req {
				color: #aea222;
			}

			.webinar-form-modern label .opt {
				color: rgba(96, 96, 96, 0.6);
				text-transform: none;
				letter-spacing: 0;
				font-weight: 400;
			}

		.webinar-form-modern input[type="text"],
		.webinar-form-modern input[type="email"],
		.webinar-form-modern input[type="tel"] {
			width: 100%;
			background: rgba(4, 59, 34, 0.03);
			border: solid 1px rgba(112, 153, 117, 0.2);
			border-radius: 0.35em;
			color: #606060;
			padding: 0.9em 1em 0.9em 3em;
			font-size: 1em;
			transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
		}

			.webinar-form-modern input::placeholder {
				color: rgba(96, 96, 96, 0.4);
				opacity: 1;
			}

			.webinar-form-modern input[type="text"]:focus,
			.webinar-form-modern input[type="email"]:focus,
			.webinar-form-modern input[type="tel"]:focus {
				background: #fff;
				border-color: #043b22;
				box-shadow: 0 0 0 3px rgba(4, 59, 34, 0.08);
				outline: 0;
			}

			.webinar-form-modern input.error {
				border-color: #e2a08a;
				background: rgba(226, 160, 138, 0.05);
			}

		.webinar-form-modern .input-icon {
			position: absolute;
			left: 1em;
			top: 2.7em;
			color: rgba(4, 59, 34, 0.3);
			font-size: 1.1em;
		}

		.webinar-form-modern .actions {
			margin: 0.5em 0 0 0;
		}

	.button.shine-modern {
		position: relative;
		overflow: hidden;
		transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
		color: #043b22;
		background: white;
		border-color: white;
		font-weight: 600;
	}

		.button.shine-modern:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 24px rgba(174, 162, 34, 0.3);
			background: white;
			border-color: white;
		}

		.button.shine-modern:after {
			content: '';
			position: absolute;
			top: 0;
			left: -120%;
			width: 60%;
			height: 100%;
			background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(4, 59, 34, 0.12) 50%, rgba(255, 255, 255, 0) 100%);
			transform: skewX(-20deg);
			animation: shine-sweep-modern 3.5s ease-in-out infinite;
		}

@keyframes shine-sweep-modern {
	0%, 60% { left: -120%; }
	100% { left: 140%; }
}

	.form-visual {
		position: relative;
		width: 100%;
		border-radius: 1em;
		overflow: hidden;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
	}

		.form-visual:after {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(200deg, rgba(4, 59, 34, 0) 40%, rgba(4, 59, 34, 0.45) 100%);
			pointer-events: none;
		}

		.form-image-modern {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

@media screen and (max-width: 980px) {
	.row.aln-center {
		flex-direction: column;
		gap: 2em;
	}

	.col-8 col-12-narrower,
	.col-4 col-12-narrower {
		flex: 1 1 100%;
		width: 100%;
	}

	.modern-form-card {
		padding: 2.5em 3em;
	}

	.form-visual {
		max-height: 20em;
	}
}

@media screen and (max-width: 736px) {
	.wrapper.form-wrapper-modern {
		padding: 3.5em 0 3.5em 0;
	}

	.modern-form-card {
		padding: 2em 2.5em;
	}

	.webinar-form-modern .field.half {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.webinar-form-modern .input-icon {
		top: 2.5em;
	}
}

/* --- Miglioramento Estetico: Modern Info (Contact) Section --- */
#info.wrapper.info-wrapper-modern {
	background-color: #ededed;
	padding: 4.5em 0 5em 0;
	text-align: center;
}

	#info header.major h2 {
		color: #043b22;
	}

	#info header.major p {
		max-width: 34em;
	}

.info-cards-modern {
	margin-top: -1em;
}

.info-card-modern {
	background: #ffffff;
	border-radius: 1em;
	padding: 2em;
	box-shadow: 0 4px 24px rgba(4, 59, 34, 0.05);
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

	.info-card-modern h3 {
		color: #043b22;
		font-size: 1.35em;
		margin-bottom: 0.5em;
	}

	.info-card-modern p {
		color: #606060;
		font-size: 0.95em;
		line-height: 1.6em;
		margin-bottom: 2em;
	}

	.info-icon {
		display: inline-block;
		font-size: 2.5em;
		color: #043b22;
		margin-bottom: 0.5em;
	}

	.info-card-modern .button.small {
		background: #aea222;
		border-color: #aea222;
		color: #ffffff;
		padding: 0.5em 1.25em 0.5em 1.25em;
		font-size: 0.9em;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		font-weight: 500;
	}

		.info-card-modern .button.small:hover {
			background: white;
			border-color: #aea222;
			color: #aea222;
		}

@media screen and (max-width: 980px) {
	.row.info-cards-modern {
		flex-direction: column;
		gap: 2em;
	}

	.col-4 col-12-narrower {
		flex: 1 1 100%;
		width: 100%;
	}
}

@media screen and (max-width: 736px) {
	.info-card-modern {
		padding: 1.75em;
	}
}
/* ============================================================
   Form webinar — consenso privacy, honeypot, stati invio
   ============================================================ */

/* Honeypot antispam: nascosto a schermo ma non con display:none,
   così i bot che ignorano il CSS lo compilano comunque. */
.webinar-form .hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Checkbox consenso privacy */
.webinar-form .field.form-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	flex: 1 1 100%;
}

	/* NOTA: main.css applica un reset globale `input { appearance: none }`
	   che rende la checkbox nativa invisibile. Qui la ricostruiamo da zero
	   con un riquadro custom e una spunta SVG, coerente con lo sfondo verde. */
	.webinar-form .field.form-consent input[type="checkbox"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		appearance: none;
		flex: 0 0 auto;
		display: block;
		width: 1.35em;
		height: 1.35em;
		min-width: 1.35em;
		margin: 0.1em 0 0 0;
		padding: 0;
		background-color: rgba(255, 255, 255, 0.12);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 78% 78%;
		border: solid 2px rgba(255, 255, 255, 0.55);
		border-radius: 0.25em;
		cursor: pointer;
		transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
	}

		.webinar-form .field.form-consent input[type="checkbox"]:hover {
			border-color: #ffffff;
			background-color: rgba(255, 255, 255, 0.2);
		}

		.webinar-form .field.form-consent input[type="checkbox"]:focus-visible {
			outline: 0;
			box-shadow: 0 0 0 3px rgba(174, 162, 34, 0.5);
		}

		.webinar-form .field.form-consent input[type="checkbox"]:checked {
			background-color: #aea222;
			border-color: #aea222;
			/* spunta bianca */
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E");
		}

		.webinar-form .field.form-consent input[type="checkbox"].error {
			border-color: #e2a08a;
			background-color: rgba(226, 160, 138, 0.18);
			box-shadow: 0 0 0 3px rgba(226, 160, 138, 0.25);
		}

	.webinar-form .field.form-consent label {
		margin: 0;
		font-size: 0.82em;
		line-height: 1.6;
		font-weight: 400;
		text-transform: none;
		letter-spacing: 0;
		color: rgba(255, 255, 255, 0.75);
		cursor: pointer;
	}

		.webinar-form .field.form-consent label a {
			color: #ffffff;
			text-decoration: underline;
		}

		.webinar-form .field.form-consent label .req {
			color: #aea222;
		}

/* Messaggio di esito */
.webinar-form .form-message:empty {
	margin: 0;
	min-height: 0;
}

.webinar-form .form-message.error {
	color: #f0b8a4;
	font-weight: 600;
}

/* Stato invio in corso */
.webinar-form .button.is-loading,
.webinar-form button[disabled] {
	opacity: 0.65;
	cursor: not-allowed;
	pointer-events: none;
}

/* ============================================================
   FIX GLOBALE — nessuno scroll orizzontale
   Si scrolla solo verticalmente: niente aree bianche a destra.
   ============================================================ */

html,
body {
	max-width: 100%;
	overflow-x: hidden;
	overscroll-behavior-x: none;
}

/* NB: nessun overflow su #page-wrapper — clipperebbe la CTA sticky (position: fixed). */
#page-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
}

/* Nessun elemento può sporgere oltre il viewport */
#header-wrapper,
#promo-wrapper,
#footer-wrapper,
.wrapper {
	max-width: 100%;
	overflow-x: hidden;
}

	#header-wrapper {
		position: relative;
		overflow: hidden;
	}

/* L'header torna fluido (prima aveva width: 1706px fissa → scroll a destra) */
#header.container {
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

/* Immagine decorativa hero: contenuta, non genera overflow */
.hero-bg {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 900px;
	max-width: 55%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

	.hero-bg img {
		position: absolute;
		right: -4%;
		bottom: 0;
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: right bottom;
	}

#hero.container {
	position: relative;
	z-index: 1;
}

@media screen and (max-width: 980px) {
	.hero-bg {
		display: none;
	}
}

/* ============================================================
   Footer — 3 colonne: azienda / contatti / note legali
   ============================================================ */

#footer-wrapper {
	padding: 3.5em 0 0 0;
	background-color: #043b22;
	background-image: none;
	border-top: 0;
}

#footer.container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 3em;
	padding: 0 1.5em 3em 1.5em;
	text-align: left;
}

	#footer .footer-col {
		flex: 1 1 0;
		min-width: 0;
	}

	/* Colonna 1 — azienda */
	#footer .footer-company .brand {
		margin: 0 0 1.75em 0;
	}

		#footer .brand img {
			display: block;
			width: 15em;
			max-width: 100%;
			height: auto;
			margin: 0;
			opacity: 1;
		}

	#footer .legal-name {
		margin: 0 0 0.9em 0;
		color: #ffffff;
		font-family: 'Futura', 'Futura Medium', 'Jost', sans-serif;
		font-weight: 500;
		font-size: 1.05em;
		line-height: 1.4;
	}

	#footer address {
		display: block;
		margin: 0;
		font-style: normal;
		font-size: 0.9em;
		line-height: 1.9;
		color: rgba(255, 255, 255, 0.8);
	}

	/* Colonna 2 — social e contatti */
	#footer .footer-contacts {
		text-align: center;
	}

		#footer .footer-contacts ul.icons.inline {
			margin: 0 0 1.4em 0;
			padding: 0;
			display: flex;
			justify-content: center;
			gap: 0.5em;
		}

			#footer .footer-contacts ul.icons.inline li {
				padding: 0;
			}

		#footer .contact-list {
			margin: 0;
			padding: 0;
			list-style: none;
		}

			#footer .contact-list li {
				margin: 0 0 0.45em 0;
				padding: 0;
				border: 0;
				font-size: 1em;
				line-height: 1.6;
			}

				#footer .contact-list li:before {
					display: none;
				}

				#footer .contact-list a {
					color: #ffffff;
					font-weight: 500;
					border-bottom: solid 1px rgba(255, 255, 255, 0);
					transition: border-color 0.2s ease, color 0.2s ease;
				}

					#footer .contact-list a:hover {
						color: #ffffff;
						border-bottom-color: rgba(255, 255, 255, 0.6);
					}

	/* Colonna 3 — note legali */
	#footer .footer-legal {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 1.5em;
		text-align: right;
	}

		#footer .legal-block h4 {
			margin: 0 0 0.5em 0;
			color: rgba(255, 255, 255, 0.55);
			font-family: 'Futura', 'Futura Medium', 'Jost', sans-serif;
			font-weight: 500;
			font-size: 0.75em;
			letter-spacing: 0.14em;
			text-transform: uppercase;
		}

		#footer .legal-links {
			margin: 0;
			padding: 0;
			list-style: none;
		}

			#footer .legal-links li {
				margin: 0;
				padding: 0;
				border: 0;
			}

				#footer .legal-links li:before {
					display: none;
				}

				#footer .legal-links a {
					color: #ffffff;
					font-family: 'Futura', 'Futura Medium', 'Jost', sans-serif;
					font-weight: 500;
					font-size: 0.95em;
					border-bottom: solid 1px rgba(255, 255, 255, 0);
					transition: border-color 0.2s ease;
				}

					#footer .legal-links a:hover {
						border-bottom-color: #ffffff;
					}

/* Barra copyright */
#copyright.container {
	margin: 0;
	padding: 1.35em 1.5em 1.35em 1.5em;
	border-top: solid 1px rgba(255, 255, 255, 0.18);
	text-align: center;
}

	#copyright ul.menu {
		margin: 0;
		padding: 0;
	}

		#copyright li {
			font-size: 0.82em;
			border-left: 0;
			padding: 0;
			color: rgba(255, 255, 255, 0.7);
		}

@media screen and (max-width: 980px) {
	#footer.container {
		flex-wrap: wrap;
		gap: 2.5em;
	}

		#footer .footer-company {
			flex: 1 1 100%;
		}

		#footer .footer-contacts {
			flex: 1 1 55%;
			text-align: left;
		}

			#footer .footer-contacts ul.icons.inline {
				justify-content: flex-start;
			}
}

@media screen and (max-width: 736px) {
	#footer-wrapper {
		padding-top: 2.5em;
	}

	#footer.container {
		flex-direction: column;
		gap: 2em;
		padding-bottom: 2.5em;
	}

		#footer .footer-col {
			flex: 1 1 100%;
			width: 100%;
		}

		#footer .footer-legal {
			align-items: flex-start;
			text-align: left;
			flex-direction: row;
			gap: 3em;
		}

		#footer .brand img {
			width: 13em;
		}
}

/* ============================================================
   Slider testimonianze — "Dicono di noi"
   ============================================================ */

#metodo .container {
	height: auto;
}

.testimonials {
	position: relative;
	max-width: 60em;
	margin: 0 auto;
	padding: 0 4.25em;
	outline: 0;
}

	.t-viewport {
		position: relative;
		overflow: hidden;
		transition: height 0.45s ease;
	}

	.t-track {
		display: flex;
		align-items: stretch;
		margin: 0;
		padding: 0;
		list-style: none;
		transition: transform 0.55s cubic-bezier(0.4, 0.01, 0.2, 1);
		will-change: transform;
	}

	.t-slide {
		flex: 0 0 auto;
		margin: 0;
		padding: 0 0.25em;
		list-style: none;
		opacity: 0.25;
		transition: opacity 0.45s ease;
	}

		.t-slide:before {
			display: none;
		}

		.t-slide.is-active {
			opacity: 1;
		}

		.t-slide .quote {
			max-width: none;
			margin: 0;
			padding: 2em 2.25em;
			background: #ffffff;
			border: solid 1px rgba(4, 59, 34, 0.08);
			border-left: solid 0.25em #aea222;
			border-radius: 0.6em;
			box-shadow: 0 8px 30px rgba(4, 59, 34, 0.07);
			min-height: 13em;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}

			.t-slide .quote p {
				font-size: 1.08em;
				line-height: 1.75em;
				margin-bottom: 1.1em;
			}

			.t-slide .quote .author .name {
				font-size: 1.05em;
			}

/* Frecce */
.t-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 2.9em;
	height: 2.9em;
	padding: 0;
	border: solid 1px rgba(4, 59, 34, 0.18);
	border-radius: 50%;
	background: #ffffff;
	color: #043b22;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(4, 59, 34, 0.12);
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

	.t-nav:hover {
		background: #043b22;
		border-color: #043b22;
		color: #ffffff;
		box-shadow: 0 8px 20px rgba(4, 59, 34, 0.25);
	}

	.t-nav:focus-visible {
		outline: 0;
		box-shadow: 0 0 0 3px rgba(174, 162, 34, 0.45);
	}

	.t-nav:active {
		transform: translateY(-50%) scale(0.94);
	}

	.t-nav .icon:before {
		font-size: 1em;
	}

	.t-nav.t-prev {
		left: 0;
	}

	.t-nav.t-next {
		right: 0;
	}

/* Dots */
.t-dots {
	display: flex;
	justify-content: center;
	gap: 0.6em;
	margin: 1.75em 0 0 0;
	padding: 0;
	list-style: none;
}

	.t-dots li {
		margin: 0;
		padding: 0;
	}

		.t-dots li:before {
			display: none;
		}

	.t-dot {
		width: 0.7em;
		height: 0.7em;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(4, 59, 34, 0.22);
		cursor: pointer;
		transition: background-color 0.25s ease, transform 0.25s ease, width 0.25s ease;
	}

		.t-dot:hover {
			background: rgba(4, 59, 34, 0.45);
		}

		.t-dot.is-active {
			background: #aea222;
			width: 1.9em;
			border-radius: 1em;
		}

		.t-dot:focus-visible {
			outline: 0;
			box-shadow: 0 0 0 3px rgba(174, 162, 34, 0.4);
		}

@media screen and (max-width: 736px) {
	.testimonials {
		padding: 0;
	}

	.t-nav {
		top: auto;
		bottom: -4.5em;
		transform: none;
		width: 2.6em;
		height: 2.6em;
	}

		.t-nav:active {
			transform: scale(0.94);
		}

		.t-nav.t-prev {
			left: 25%;
		}

		.t-nav.t-next {
			right: 25%;
		}

	.t-dots {
		margin-top: 5.5em;
	}

	.t-slide .quote {
		padding: 1.5em 1.5em;
	}
}

/* Nota prezzo — prima era in posizione absolute con left fisso */
.card.price .price-note {
	margin: 1em 0 0 0;
	font-size: 0.8em;
	line-height: 1.5;
	color: rgba(96, 96, 96, 0.85);
	text-align: center;
}

/* ============================================================
   Form — placeholder bianchi per contrasto sul verde scuro
   ============================================================ */

.webinar-form input::placeholder,
.webinar-form textarea::placeholder {
	color: #ffffff;
	opacity: 0.72;
}

.webinar-form input::-webkit-input-placeholder,
.webinar-form textarea::-webkit-input-placeholder {
	color: #ffffff;
	opacity: 0.72;
}

.webinar-form input::-moz-placeholder,
.webinar-form textarea::-moz-placeholder {
	color: #ffffff;
	opacity: 0.72;
}

.webinar-form input:-ms-input-placeholder {
	color: #ffffff;
	opacity: 0.72;
}

/* Il focus schiariva troppo lo sfondo rendendo illeggibile il testo bianco */
.webinar-form input[type="text"]:focus,
.webinar-form input[type="email"]:focus,
.webinar-form input[type="tel"]:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: #ffffff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
	color: #ffffff;
}

/* ============================================================
   Sezione Contattaci — testo a sinistra, bottone sotto
   ============================================================ */

#info.info-wrapper {
	height: auto;
	min-height: 32em;
	padding: 6em 0 6em 0;
	text-align: left;
	display: flex;
	align-items: center;
}

	#info.info-wrapper > .container {
		position: relative;
		z-index: 2;
		column-count: auto;
		float: none;
		top: auto;
		left: auto;
		width: 100%;
	}

	#info .info-inner {
		max-width: 30em;
		text-align: left;
	}

		#info .info-inner header.major {
			text-align: left;
			margin-bottom: 1.75em;
		}

			#info .info-inner header.major h2 {
				text-align: left;
			}

			#info .info-inner header.major h2:after {
				margin-left: 0;
				margin-right: auto;
			}

	#info .info-cta {
		margin: 0;
		text-align: center;
	}

		#info .info-cta .button {
			display: inline-flex;
			align-items: center;
		}

	.info-bg {
		position: absolute;
		right: 0;
		bottom: 0;
		width: 760px;
		max-width: 52%;
		height: 100%;
		z-index: 1;
		pointer-events: none;
	}

		.info-bg img {
			position: absolute;
			right: -3%;
			bottom: 0;
			width: 100%;
			height: 100%;
			object-fit: contain;
			object-position: right bottom;
		}

@media screen and (max-width: 980px) {
	.info-bg {
		opacity: 0.18;
		max-width: 70%;
	}

	#info .info-inner {
		max-width: none;
	}
}

@media screen and (max-width: 736px) {
	#info.info-wrapper {
		padding: 3.5em 0 3.5em 0;
		min-height: 0;
	}
}

/* ============================================================
   FIX ALLINEAMENTO HEADER + COMPATIBILITÀ MOBILE
   (blocco aggiunto in coda: sovrascrive main.css senza modificarlo)
   ============================================================ */

/* --- 1. Causa principale dell'offset ---------------------------------
   main.css applica `header { margin-left: 120px }` a TUTTI gli <header>.
   Risultato: ogni titolo di sezione risulta spostato a destra rispetto
   al contenuto sottostante, e su mobile esce dallo schermo.        */

header {
	margin-left: 0;
	margin-right: 0;
}

/* Header di sezione: perfettamente centrati rispetto al container */
header.major {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

	header.major > h2,
	header.major > p {
		margin-left: auto;
		margin-right: auto;
		float: none;
	}

/* Nessun testo deve essere tagliato o uscire dal riquadro */
h1, h2, h3, h4,
p, li, blockquote,
.button,
.card .amount .figure {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* --- 2. Hero: allineamento coerente di titolo, testo, meta e CTA -----
   main.css usava margin-left:100px sul blocco + left:-140px su header
   e paragrafo per compensare: elementi disallineati fra loro.      */

#hero {
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5em;
	padding-right: 1.5em;
	box-sizing: border-box;
}

	#hero header,
	#hero p,
	#hero ul.meta,
	#hero ul.actions {
		left: auto;
		right: auto;
		margin-left: 0;
		margin-right: 0;
		max-width: 32em;
	}

	#hero header {
		margin-bottom: 1em;
	}

	#hero h1 {
		margin: 0;
		max-width: 100%;
		/* prima: line-height fissa 60px → righe sovrapposte/spaziate a seconda del breakpoint */
		line-height: 1.15;
	}

	#hero p {
		max-width: 32em;
	}

	#hero ul.meta {
		margin-left: -0.35em;
	}

/* --- 3. Sezione "Impostazione del Corso" -----------------------------
   Prima: width:800px fissa + translateX(100px) → fuori schermo su mobile. */

#impostazione .row {
	justify-content: center;
}

#impostazione .box {
	max-width: 54em;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* I <br> manuali spezzano male sotto i 1080px */
@media screen and (max-width: 1080px) {
	#impostazione .box br,
	#hero p br {
		display: none;
	}
}

/* --- 4. Sezione prezzi ------------------------------------------------
   La nota era in position:absolute con translateY(480px): si sovrapponeva
   agli altri elementi appena cambiava l'altezza della card.          */

.card.price {
	height: 100%;
}

	.card.price .price-note {
		position: static;
		transform: none;
		margin: 0.9em 0 0 0;
		padding: 0;
	}

/* --- 5. Sezione form: immagine fluida --------------------------------- */

#iscrizione .form-image img {
	width: 100%;
	height: auto;
	max-height: 40em;
	object-fit: cover;
}

/* --- 6. Sezione Contattaci -------------------------------------------- */

/* Sopra i 1080px il container è a larghezza fissa e centrato come le
   altre sezioni: nessun padding, così il testo è sulla stessa griglia. */
#info.info-wrapper > .container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* ============================================================
   BREAKPOINT — nulla deve essere tagliato o uscire dal viewport
   ============================================================ */

@media screen and (max-width: 1080px) {

	#hero {
		padding-left: 2em;
		padding-right: 2em;
	}

		#hero header,
		#hero p,
		#hero ul.meta,
		#hero ul.actions {
			max-width: 100%;
		}

	#info.info-wrapper > .container {
		padding-left: 2em;
		padding-right: 2em;
	}

	#iscrizione .form-image img {
		max-height: 24em;
	}

}

@media screen and (max-width: 980px) {

	/* L'immagine di sfondo dell'hero è nascosta: il testo può usare tutta la larghezza */
	#hero p,
	#hero ul.actions {
		max-width: 100%;
	}

}

@media screen and (max-width: 736px) {

	#hero {
		padding-left: 20px;
		padding-right: 20px;
	}

		#hero header h1 {
			font-size: 1.85em;
			line-height: 1.2;
		}

		#hero ul.meta li {
			font-size: 0.75em;
			padding: 0.35em 0.9em;
		}

	#info.info-wrapper > .container {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* CTA lunghe: testo su più righe invece che tagliato */
	.button {
		white-space: normal;
		line-height: 1.35em;
		padding-left: 1.2em;
		padding-right: 1.2em;
	}

	.button.big,
	.button.mega {
		font-size: 1em;
	}

	#sticky-cta .pitch .button {
		white-space: normal;
		font-size: 0.9em;
	}

	/* Titoli sezione: nessuna parola tagliata */
	header.major > h2 {
		font-size: 1.5em;
		line-height: 1.25em;
		max-width: 100%;
	}

	header.major > p {
		max-width: 100%;
	}

	/* Promo: il riquadro non deve sforare */
	#promo {
		display: block;
		width: 100%;
		padding: 1.5em 1.25em;
		box-sizing: border-box;
	}

		#promo h2 {
			display: block;
			margin: 0 0 0.75em 0;
			font-size: 1.35em;
			line-height: 1.3em;
		}

		#promo .button {
			display: block;
			width: 100%;
			font-size: 1em;
		}

	/* Box e card: padding ridotto, contenuto sempre leggibile */
	.box,
	.card {
		padding: 1.5em 1.25em;
	}

	.box h3,
	.card h3 {
		font-size: 1.25em;
		line-height: 1.3em;
	}

	/* La CTA sticky in basso non deve coprire il footer */
	#footer-wrapper {
		padding-bottom: 7em;
	}

}

@media screen and (max-width: 480px) {

	#hero header h1 {
		font-size: 1.65em;
	}

	.card .amount .figure {
		font-size: 1.75em;
	}

	#footer .footer-legal {
		flex-direction: column;
		gap: 1.25em;
	}

	.t-nav.t-prev { left: 15%; }
	.t-nav.t-next { right: 15%; }

}

/* --- 7. Larghezza header allineata al resto del sito ------------------
   #header.container era 1400px mentre tutte le altre .container sono
   1200px: il logo risultava spostato a sinistra rispetto ai contenuti. */

#header.container {
	width: 1200px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 1280px) {
	#header.container {
		width: 960px;
	}
}

@media screen and (max-width: 1080px) {
	#header.container {
		width: 100%;
	}
}

/* ============================================================
   FIX 2 — Sezione prezzi: bottoni allineati + nota sotto il bottone
   ============================================================ */

/* Le due card hanno sempre la stessa altezza */
.row > section > .card.price {
	height: 100%;
}

/* La lista dei vantaggi si espande: i due blocchi CTA partono
   dalla stessa quota, quindi i bottoni risultano allineati. */
.card.price ul.checks {
	flex: 1 1 auto;
	margin-bottom: 0;
}

.card.price ul.actions {
	width: 100%;
	margin: 0;
	padding-top: 1.5em;
}

	.card.price ul.actions li {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
	}

		/* Stessa altezza esatta per entrambi i bottoni,
		   anche se il testo va a capo su uno solo dei due. */
		.card.price ul.actions .button {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			min-height: 3.6em;
			padding-top: 0.6em;
			padding-bottom: 0.6em;
			line-height: 1.3em;
			text-align: center;
			white-space: normal;
		}

/* La card "Corporate" riserva lo stesso spazio della nota della card
   "Corso Singolo": così i bottoni restano perfettamente in asse.
   Il testo è invisibile e non viene letto dagli screen reader. */
.card.price.alt:after {
	content: "*Per i partecipanti al webinar sarà riservata un'offerta speciale.";
	display: block;
	margin: 0.9em 0 0 0;
	font-size: 0.8em;
	line-height: 1.5;
	text-align: center;
	visibility: hidden;
	pointer-events: none;
	user-select: none;
}

/* Larghezza card stretta (2 colonne su schermi medi): riservo 2 righe
   di testo su entrambi i bottoni, così restano identici anche se uno
   solo dei due va a capo. */
@media screen and (min-width: 821px) and (max-width: 1280px) {

	.card.price ul.actions .button {
		min-height: 5.2em;
		font-size: 0.95em;
	}

}

/* Sotto gli 821px le card vanno in colonna singola: niente spaziatore. */
@media screen and (max-width: 820px) {

	.card.price.alt:after {
		display: none;
	}

	.row > section > .card.price {
		height: auto;
	}

	.card.price ul.actions .button {
		min-height: 3.4em;
	}

}

/* ============================================================
   FIX 3 — Sezione "Contattaci": blocco bilanciato sul desktop
   ============================================================ */

#info.info-wrapper {
	min-height: 34em;
	padding: 6.5em 0 6.5em 0;
}

	/* Il container era a width:100%: il testo partiva dal bordo dello
	   schermo invece che dalla stessa griglia delle altre sezioni.
	   Ora è largo 1200px e centrato come tutti gli altri. */
	#info.info-wrapper > .container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 1200px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	/* Titolo e bottone in asse con il contenuto delle altre sezioni */
	#info .info-inner {
		flex: 0 1 auto;
		width: 100%;
		max-width: 34em;
		margin-left: 0;
		padding-right: 2em;
		box-sizing: border-box;
	}

		#info .info-inner header.major {
			margin-bottom: 1.75em;
		}

			/* Titolo più presente: riempie la fascia invece di lasciarla vuota */
			#info .info-inner header.major h2 {
				max-width: 100%;
				font-size: 2.6em;
				line-height: 1.2em;
			}

	/* Bottone sullo stesso asse del titolo */
	#info .info-cta {
		text-align: left;
	}

@media screen and (max-width: 1280px) {

	#info.info-wrapper > .container {
		width: 960px;
	}

	#info .info-inner {
		max-width: 30em;
	}

		#info .info-inner header.major h2 {
			font-size: 2.2em;
		}

}

@media screen and (max-width: 1080px) {

	#info.info-wrapper > .container {
		width: 100%;
	}

}

@media screen and (max-width: 980px) {

	#info.info-wrapper {
		min-height: 0;
		padding: 5em 0 5em 0;
	}

		#info.info-wrapper > .container {
			display: block;
		}

		#info .info-inner {
			max-width: 100%;
			margin-left: 0;
			padding-right: 0;
		}

			#info .info-inner header.major h2 {
				font-size: 2em;
			}

}

@media screen and (max-width: 736px) {

	#info .info-inner header.major h2 {
		font-size: 1.6em;
	}

	#info .info-cta .button {
		width: 100%;
		justify-content: center;
	}

}