.sezione {
	text-align: center;
/*	overflow: hidden;  previene il margin collapsing */
	padding-top: 0px;
	padding-bottom: 100px;
}

.footer {
	background-color: #a55850; 
	background-color: #3c6e71;
	color: #FFFFFF;
	text-align: center;
	padding: 1rem;
}

.footer-logo {
	padding: 0px;
	margin: -140px auto 0px auto;
	width: 100%;
	text-align: center;
}

.footer-logo img {
	width: 150px;
	cursor: pointer;
}

.footer-copy {
	font-size: 0.9rem;
	font-weight: bold;
	padding: 60px 20px 50px 20px;
}

footer i:hover {
	color: #ffffff;
}

.footer-icon {
	font-size: 32px;
	margin: 12px;
	color: #222;
	width: 36px;
}

/* === FONT === */
	h1, h2, h3, .titolo, .sottotitolo-sezione, .quote, .citazione blockquote {
		font-family: "Special Elite", system-ui;
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	.font-b, body {
		font-family: "Raleway", sans-serif;
		font-optical-sizing: auto;
		font-weight: 400;
		font-style: normal;
		font-display: swap;		
	}

	.font-c {
		font-family: "Cal Sans", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}
/* === FONT === FINE */

/* === COLORI === */
		main .color2 {
			background-color: #9eadb480;
			background-color: #CCD5AE80;
			background-color: #ffffff80;
		}

		main .color3 {
			background-color: #f0eded80;
			background-color: #E9EDC980;
			background-color: #d4a37380;
			background-color: #ffffff80;
		}

		main .color4 {
			background-color: #fadcd680;
			background-color: #FEFAE080;
			background-color: #e4e2d580;
		}

		main .color5 {
			background-color: #e5cb8c80;
			background-color: #FAEDCD80;
			background-color: #ffffff80;
		}

		main .color6 {
			background-color: #f7f6f680;
			background-color: #9eadb480;
			background-color: #ffffff;
		}
		
		main .color7 {
			background-color: #f7f6f680;
			background-color: #e4e2d580;
		}		

		main .color7, .custom-list li::before, .citazione i, .icona { 
			color: #a55850;
			color: #0b9695;
			color: #3c6e71;
		}
		
/* === COLORI === FINE */

/* === TITOLI === */
	h1 {
		font-size: 4rem;
		font-weight: bold;
		margin: 4rem 0rem 0rem 0rem;
	}
	
	h2 {
		font-size: 2rem;
		font-weight: bold;
		padding: 0px 20px 20px 20px;
		margin: 0px;
		line-height: 1.2;
	}

	h3 {
		font-size: 1.66rem;
		margin: 40px 0px 20px 0px;
		font-weight: 600;
		color: #3c6e71;
	}

	.sottotitolo-sezione {
		font-size: 1.66rem;
		font-weight: bold;
		padding: 0px 20px;
		line-height: 1.2;
		max-width: 720px;
	}
/* === TITOLI === FINE */
.titolo {
	width: 50%;
	display: block;
}

.sfondo {
    height: 50vh; /* metà schermo, se vuoi */
	min-height: 220px;
	height: calc((100vh - 80px) / 2);
    display: flex; /* attiva Flexbox */
    flex-direction: column; /* impila titolo e sottotitolo */
    justify-content: center; /* centra verticalmente */
    align-items: center; /* centra orizzontalmente */
    text-align: center; /* centra il testo */
    background-size: cover;
    background-position: center;
    color: #ffffff;
	text-shadow:
		0 1px 2px rgba(0,0,0,0.75),
		0 4px 10px rgba(0,0,0,0.5),
		0 0 1px rgba(0,0,0,0.8);	
	background-blend-mode: overlay;
}

.sfondo_void {
    justify-content: center; /* centra verticalmente */
    align-items: center; /* centra orizzontalmente */
    text-align: center; /* centra il testo */
	padding: 60px 0px 40px 0px;
    color: #333333;
}

/* === SEZIONI === */
	.spacer {
		position: relative;
		top: -80px; /* Compensa l'altezza della header sticky */
		height: 0px; 
		visibility: hidden;
	}

	.sezione .testo {
		text-align: left;
		padding: 1rem 2rem 0px 2rem;
		max-width: 720px;
		line-height: 1.6;
		font-size: 1rem;
		color: #222;
		margin: 0 auto;
	}
	
	.splash {
		border: 0.6rem solid #f0f0f0;
		box-shadow: 10px 10px 30px rgba(0,0,0,0.4);
		width: 33%;
		box-sizing: border-box;
		transform: rotate(4deg);
		float: right;
		margin: 0px 40px 10px 40px;
		display: block;
	}
	img.splash, img.foto {
		transition: transform 0.4s ease, box-shadow 0.4s ease;
	}

	img.splash:hover, img.foto:hover {
		transform: scale(1.05);
		box-shadow: 0 10px 10px rgba(0,0,0,0.12);
	}

	.sezione .testo .foto {
		width: 50%;
		float: right; 
		margin: 0px 0px 20px 20px;
	}
/* === SEZIONI === FINE */

/* === ELENCHI PUNTATI === */
	.custom-list {
		list-style: none; /* Rimuove i pallini standard */
		padding-left: 1.2em;
	}

	.custom-list li {
		position: relative;
		margin-bottom: 0.5em;
		padding-left: 1em;
	}

	.custom-list li::before {
		content: '✪'; /* Carattere Unicode per la stellina */
		position: absolute;
		left: -10px;
/*		top: 0; 
		width: 0.6em;
		height: 0.6em; */
		display: inline-block;
		font-size: 1.5rem;
		top: -6px;	
	}
/* === ELENCHI PUNTATI === FINE */

/* === CITAZIONI === */
	.quote {
		opacity: 0;
		position: absolute;
		transition: opacity 1s ease-in-out;
		font-size: 24px;
	}

	.quote.active {
		opacity: 1;
		position: relative;
	}

	.quote .autore {
		font-size: 1rem;
		text-align: right;
		font-weight: bold;
	}

	.quote .autore::before {
		content: "-  ";
		content: "│ ";
		content: "— ";
	}

	.quote .autore::after {
		content: "  -";
		content: "";
	}

	.citazione {
		width: 100%;
		display: flex;
/*		align-items: center; */
		align-items: flex-start;
		justify-content: center;
		box-sizing: border-box;
		text-align: center;
		flex-wrap: nowrap;
		margin-top: 80px;
		border-radius: 1rem;
		box-shadow: 0 10px 10px rgba(0,0,0,0.1);
		/*10px 10px 30px */
		background-color: #f9f9f9;
		padding: 0;
	}

	.citazione blockquote {
		flex: 1;
		min-width: 0;
		width: 100%;
		word-wrap: break-word;
		font-size: 1rem;
		padding: 0.5rem 1rem;
		margin: 0;
	}
	
	.citazione i { 
		font-size: 3rem;
		margin: 0;
		padding: 0.5rem 1rem;
	}
	

/* === CITAZIONI === FINE */

/* === SEZIONE CONTATTI === */
	.trasporti {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		max-width: 720px;
		margin: 0 2rem;
	}

	.trasporto {
		display: flex;
		align-items: flex-start;
	/*	gap: 1rem; */
		background-color: #f9f9f9;
		padding: 1rem;
		border-radius: 1rem;
		box-shadow: 0 10px 10px rgba(0,0,0,0.1);
	}

	.trasporto i {
		font-size: 40px;
		width: 40px;	
		padding: 12px;
	}

	.riga a {
		display: inline-flex; /* ← cambia da flex a inline-flex */
		align-items: center;
		padding: 0px;
		text-decoration: none;
		color: #016797;
	}

	.riga a:hover {
		color: #a55850;
		color: #0b9695;
	}

	.riga i {
		flex-shrink: 0;
		padding: 0px;
		margin: 4px 12px;
	}
/* === SEZIONE CONTATTI === FINE */

/* === PRIVACY === */
	#privacy {
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: 99;
		display: none;
	}

	#privacy div {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: rgba(255, 255, 255, .96);
		color: #000;
		font-size: 14px;
		cursor: pointer;
		width: 90%;
		padding: 40px;
		max-width: min(75vw, 480px);
		box-shadow: 8px 8px 32px rgba(0, 0, 0, 0.6);
		border-radius: 16px;
		line-height: 1.33;
	}

	#privacy span {
		position: absolute;
		top: 0px;
		right: 16px;
		font-size: 40px;
	}

	.ico_privacy, .ico_privacy:hover  {
		color: #CA8F41; 
		font-size: 32px; 
		vertical-align: middle;
		margin-right: 4px;
	}

	#privacy strong {
		font-size: 18px;
		font-weight: 600;
	}
/* === PRIVACY === FINE */

/* === MEDIA QUERIES: TABLET === */
@media (max-width: 768px) {
	nav ul {
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
	}

	.dropdown-menu {
		position: static;
		box-shadow: none;
	}

	.vertical-split {
		padding: 2rem 1rem;
	}

	.sfondo {
		background-blend-mode: overlay;
	}
	
	.splash {
		display: none;
	 }

	#privacy_div {
		padding: 1.5rem;
		font-size: 1rem;
	}

	.sezione .testo {
		max-width: 620px;
	}
	
	.titolo {
		width: 90%;
	}
}

/* === MEDIA QUERIES: TABLET & MOBILE === */
@media (max-width: 500px) {

	.sezione .testo .foto {
		width: 100%;
		margin: 40px 0px 40px 0px;
	}
	
	.testo {
		font-size: 16px!important;
		sfont-size: 28px;
	}

	h1 {
		font-size: 3rem;
	}
	
	.vertical-split .titolo h2 {
		font-size: 1.25rem!important;
	}
}
