/**
 * Asilo Borromeo - stili pubblici
 *
 * Le classi si applicano dal campo "Extra class name" di righe ed elementi
 * WPBakery/Uncode. Colori e font di base arrivano dalle Theme Options
 * (Aspetto > Setup Borromeo); qui solo ciò che Uncode non copre nativamente.
 *
 * Indice
 *  1. Token
 *  2. Tipografia
 *  3. Link "scopri di più"
 *  4. Righe con onda (ug-wave)
 *  5. Nuvole decorative
 *  6. Utility
 *  7. Header / menu
 *  8. Footer
 *  9. Lista contatti (ug_contact_list)
 * 10. Documenti (ug_downloads)
 * 11. Mappa (ug_map)
 * 12. Pulsanti laterali (ug_quick_links)
 * 13. Hero con blob (ug-hero, ug-blob)
 * 14. Foto a forma di blob (ug-blob-img)
 * 15. Card sezione (ug_program_card)
 * 16. Cerchio attività (ug_learning_circle)
 * 17. Lista vantaggi numerata (ug-advantages)
 * 18. Tessere icona (ug-tiles)
 * 19. Box leggibile su foto (ug-glass)
 * 20. Tab "Informazioni sul Centro" (ug-tabs)
 * 21. Card con ombra (ug-card) e lista valori (ug-values)
 * 22. Galleria (ug-gallery)
 * 23. Form Contact Form 7 (ug-form)
 * 24. Testata di pagina (ug-page-head)
 * 25. Card centrate con icona (ug-card--center)
 * 26. Vantaggi con numero grande (ug-advantages--big)
 * 27. Contatori (ug-count)
 * 28. Box sezione didattica (ug-program-box)
 * 29. Liste e tabelle (ug-list-2col, ug-table)
 * 30. Documenti a tessere (ug_downloads layout "tiles")
 * 31. Card informative con foto (ug-info-card)
 * 32. Cosa fare / da evitare (ug-practices)
 * 33. FAQ (vc_accordion "ug-faq")
 * 34. Pagina Contatti (ug-contact-box, ug-map-col)
 * 35. Mappa con consenso, accessibilità, hero mobile
 */

/* ==========================================================================
   1. Token
   ========================================================================== */

:root {
	--ug-blue: #46aadc;
	--ug-orange: #ffaf60;
	--ug-teal: #76beba;
	--ug-indigo: #7192bd;
	--ug-dark: #3b4757;
	--ug-grey: #777777;
	--ug-sky: #eaf5f8;
	--ug-ice: #f0f8fa;
	--ug-white: #ffffff;

	--ug-font-heading: "Poppins", sans-serif;
	--ug-font-body: "Roboto", sans-serif;
	--ug-font-script: Georgia, "Times New Roman", serif;

	--ug-radius: 12px;
	--ug-radius-sm: 8px;
	--ug-shadow: 0 10px 30px rgba(59, 71, 87, 0.08);
}

/* ==========================================================================
   2. Tipografia
   ========================================================================== */

/* Occhiello con trattino a sinistra (mockup: .block-header p) */
.ug-kicker h1,
.ug-kicker h2,
.ug-kicker h3,
.ug-kicker h4,
.ug-kicker h5,
.ug-kicker h6,
.ug-kicker p {
	position: relative;
	padding-left: 50px;
	font-family: var(--ug-font-body);
	font-size: 18px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.5;
	color: var(--ug-grey);
}

.ug-kicker h1::after,
.ug-kicker h2::after,
.ug-kicker h3::after,
.ug-kicker h4::after,
.ug-kicker h5::after,
.ug-kicker h6::after,
.ug-kicker p::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 40px;
	height: 3px;
	margin-top: -1px;
	background: var(--ug-blue);
}

/* Sottotitolo corsivo centrato sopra i titoli di sezione (mockup: .h-sub) */
.ug-script h1,
.ug-script h2,
.ug-script h3,
.ug-script h4,
.ug-script h5,
.ug-script h6,
.ug-script p {
	font-family: var(--ug-font-script);
	font-size: 21px;
	font-style: italic;
	font-weight: 400;
	line-height: 1.28;
	color: var(--ug-blue);
}

/* Testo introduttivo di sezione (mockup: .h-desc) */
.ug-lead p {
	font-size: 17px;
	line-height: 27px;
	color: var(--ug-grey);
}

/* Parola evidenziata nei titoli: <span class="ug-hl">Il Centro</span> */
.ug-hl {
	color: var(--ug-blue);
}

@media (max-width: 959px) {
	.ug-kicker h1, .ug-kicker h2, .ug-kicker h3, .ug-kicker h4, .ug-kicker h5, .ug-kicker h6, .ug-kicker p {
		padding-left: 40px;
		font-size: 16px;
	}
	.ug-kicker h1::after, .ug-kicker h2::after, .ug-kicker h3::after, .ug-kicker h4::after, .ug-kicker h5::after, .ug-kicker h6::after, .ug-kicker p::after {
		width: 30px;
		height: 2px;
	}
	.ug-script h1, .ug-script h2, .ug-script h3, .ug-script h4, .ug-script h5, .ug-script h6, .ug-script p {
		font-size: 18px;
	}
}

@media (max-width: 569px) {
	.ug-script h1, .ug-script h2, .ug-script h3, .ug-script h4, .ug-script h5, .ug-script h6, .ug-script p {
		font-size: 16px;
	}
}

/* ==========================================================================
   3. Link "scopri di più"
   Da applicare a un uncode_button (Extra class: ug-read-more)
   ========================================================================== */

.ug-read-more .btn,
.ug-read-more .btn:not(.btn-custom-typo),
a.ug-read-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font-family: var(--ug-font-heading);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: lowercase;
	color: var(--ug-blue) !important;
}

.ug-read-more .btn::after,
a.ug-read-more::after {
	content: "";
	display: inline-block;
	width: 22px;
	height: 10px;
	background-color: currentColor;
	-webkit-mask: url("../img/arrow.svg") no-repeat center / contain;
	mask: url("../img/arrow.svg") no-repeat center / contain;
	transition: transform 0.3s;
}

.ug-read-more .btn:hover,
a.ug-read-more:hover {
	text-decoration: underline;
}

.ug-read-more .btn:hover::after,
a.ug-read-more:hover::after {
	transform: translateX(4px);
}

/* ==========================================================================
   4. Righe con onda
   Extra class della vc_row: "ug-wave ug-wave--blue" (+ "ug-wave--reverse")
   Lasciare la riga senza colore di sfondo: lo sfondo è l'SVG dell'onda.
   ========================================================================== */

.ug-wave {
	position: relative;
	overflow: hidden;
	/* Respiro tra il bordo ondulato e il contenuto, in aggiunta al padding della riga Uncode */
	padding-top: 40px;
	padding-bottom: 40px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

/* Foto a blob dentro un'onda: più contenuta, per non toccare i bordi */
.ug-wave .ug-blob-img {
	max-width: 440px;
	margin-left: auto;
	margin-right: auto;
}

.ug-wave > .row {
	position: relative;
	z-index: 1;
}

.ug-wave--blue {
	background-image: url("../img/blue-wave.png");
}

.ug-wave--grey {
	background-image: url("../img/gray_wave-1.svg");
}

.ug-wave--pink {
	background-image: url("../img/wave-pink.svg");
}

.ug-wave--video {
	background-image: url("../img/wave-video.png");
}

/* Nuvole bianche che "mordono" i bordi dell'onda */
.ug-wave::before,
.ug-wave::after {
	content: "";
	position: absolute;
	z-index: 1;
	background: url("../img/cloudx2.png") no-repeat center / cover;
	filter: brightness(0) invert(1);
	pointer-events: none;
}

.ug-wave::before {
	top: 0;
	left: 18%;
	width: 407px;
	height: 170px;
	transform: translateY(-55%);
}

.ug-wave::after {
	bottom: 0;
	right: 20%;
	width: 362px;
	height: 150px;
	transform: translateY(60%);
}

.ug-wave--reverse::before {
	left: auto;
	right: 20%;
	transform: translateY(-45%) rotate(-9deg);
}

.ug-wave--reverse::after {
	right: auto;
	left: 18%;
}

.ug-wave--no-clouds::before,
.ug-wave--no-clouds::after {
	display: none;
}

@media (max-width: 1440px) {
	.ug-wave::before { left: 12%; width: 340px; height: 145px; }
	.ug-wave::after { width: 340px; height: 145px; }
	.ug-wave--reverse::before { left: auto; right: 12%; }
	.ug-wave--reverse::after { left: 12%; }
}

@media (max-width: 1199px) {
	.ug-wave { background-size: auto 100%; }
	.ug-wave::before { transform: translateY(-59%) rotate(9deg); }
	.ug-wave::after { width: 300px; height: 125px; transform: translateY(50%); }
}

@media (max-width: 959px) {
	.ug-wave { padding-top: 30px; padding-bottom: 30px; }
	.ug-wave::before { width: 200px; height: 85px; transform: translateY(-59%) rotate(7deg); }
	.ug-wave::after { right: 10%; width: 200px; height: 85px; transform: translateY(35%); }
	.ug-wave--reverse::before { transform: translateY(-59%) rotate(0deg); }
	.ug-wave--reverse::after { transform: translateY(45%); }
}

@media (max-width: 569px) {
	.ug-wave { padding-top: 20px; padding-bottom: 20px; background-position: 15% 0; }
	.ug-wave::before { transform: translateY(-50%) rotate(5deg); }
	.ug-wave::after { transform: translateY(30%); }
}

/* ==========================================================================
   5. Nuvole decorative
   Extra class di una colonna/riga: "ug-cloud ug-cloud--tr" (tr, tl, br, bl)
   ========================================================================== */

.ug-cloud {
	position: relative;
}

.ug-cloud::before {
	content: "";
	position: absolute;
	z-index: 0;
	width: 200px;
	height: 86px;
	background: url("../img/cloud.png") no-repeat center / contain;
	pointer-events: none;
}

.ug-cloud--tr::before { top: -40px; right: -60px; }
.ug-cloud--tl::before { top: -40px; left: -60px; }
.ug-cloud--br::before { bottom: -40px; right: -60px; }
.ug-cloud--bl::before { bottom: -40px; left: -60px; }

@media (max-width: 959px) {
	.ug-cloud::before { display: none; }
}

/* ==========================================================================
   6. Utility
   ========================================================================== */

.ug-radius img,
.ug-radius .uncode-single-media-wrapper,
.ug-radius .t-entry-visual-cont {
	border-radius: var(--ug-radius);
	overflow: hidden;
}

.ug-shadow {
	box-shadow: var(--ug-shadow);
}

/* Reset elenchi dei componenti: niente pallini di Uncode/browser */
.ug-quick__list,
.ug-quick__list > li,
.ug-learn__items,
.ug-learn__items > li,
.ug-footer-links ul,
.ug-footer-links li,
.ug-contact-list ul,
.ug-contact-list li,
.ug-downloads,
.ug-downloads > li,
.ug-values ul,
.ug-values li {
	list-style: none !important;
}

.ug-quick__list > li::marker,
.ug-learn__items > li::marker,
.ug-footer-links li::marker,
.ug-contact-list li::marker,
.ug-downloads > li::marker,
.ug-values li::marker {
	content: none;
}

/* ==========================================================================
   7. Header / menu
   Stile base da Theme Options; qui solo voce attiva e hover in azzurro.
   ========================================================================== */

.menu-light .menu-horizontal .menu-smart > li > a:hover,
.menu-light .menu-horizontal .menu-smart > li.current-menu-item > a,
.menu-light .menu-horizontal .menu-smart > li.current-menu-ancestor > a,
.menu-light .menu-horizontal .menu-smart > li.current_page_item > a {
	color: var(--ug-blue) !important;
}

.menu-light .menu-horizontal .menu-smart ul {
	border-top: 3px solid var(--ug-blue);
}

/* ==========================================================================
   8. Footer
   Content Block "Footer": riga 1 Extra class "ug-footer", riga 2 "ug-footer-bottom"
   ========================================================================== */

.ug-footer {
	position: relative;
	background: var(--ug-white) url("../img/footer-bg.svg") no-repeat center center / cover;
}

/* Il fondo grigio del footer Uncode non deve vedersi sotto l'onda */
.site-footer,
.site-footer .footer-content-block,
.site-footer .footer-content-block-inner,
.ug-footer-bottom,
.ug-footer-bottom > .row {
	background-color: var(--ug-white) !important;
}

.ug-footer h4,
.ug-footer .h4 {
	margin-bottom: 30px;
}

.ug-footer p {
	max-width: 320px;
}

.ug-footer-links ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ug-footer-links li {
	position: relative;
	width: 50%;
	margin: 0 0 15px;
	padding-left: 20px;
}

.ug-footer-links li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--ug-blue);
	border-right: 2px solid var(--ug-blue);
	transform: rotate(45deg);
}

.ug-footer-links a {
	font-size: 15px;
	color: var(--ug-grey);
}

.ug-footer-links a:hover {
	color: var(--ug-blue);
}

.ug-footer-bottom p {
	margin: 0;
	font-size: 14px;
}

.ug-footer-bottom a {
	color: inherit;
}

.ug-footer-bottom a:hover {
	color: var(--ug-blue);
}

@media (max-width: 959px) {
	.ug-footer {
		background-image: url("../img/tablet_footer.svg");
	}
	.ug-footer p {
		max-width: none;
	}
	.ug-footer-links a {
		font-size: 14px;
	}
}

@media (max-width: 569px) {
	.ug-footer {
		background-image: url("../img/mobile_footer.svg");
	}
	.ug-footer h4,
	.ug-footer .h4 {
		margin-bottom: 20px;
	}
}

/* ==========================================================================
   9. Lista contatti
   ========================================================================== */

.ug-contact-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ug-contact-list li {
	margin: 0 0 15px;
	padding: 0;
}

.ug-contact-list li:last-child {
	margin-bottom: 0;
}

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

.ug-contact-list a,
.ug-contact-list p {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	text-decoration: none;
	color: var(--ug-grey);
}

.ug-contact-list a:hover {
	color: var(--ug-blue);
}

.ug-contact-list i {
	flex: 0 0 18px;
	margin-top: 0.3em;
	font-size: 16px;
	text-align: center;
	color: var(--ug-blue);
}

.ug-contact-list--light a,
.ug-contact-list--light p,
.ug-contact-list--light i,
.ug-contact-list--light a:hover {
	color: var(--ug-white);
}

/* ==========================================================================
   10. Documenti scaricabili
   ========================================================================== */

.ug-downloads {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ug-downloads__item {
	display: flex;
	align-items: center;
	gap: 15px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--ug-sky);
}

.ug-downloads__item::before {
	display: none;
}

.ug-downloads__item:last-child {
	border-bottom: 0;
}

.ug-downloads__icon {
	display: flex;
	flex: 0 0 42px;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--ug-radius-sm);
	background: var(--ug-sky);
	font-size: 18px;
	color: var(--ug-blue);
}

.ug-downloads__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.ug-downloads__title {
	font-family: var(--ug-font-heading);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ug-dark);
}

.ug-downloads__note,
.ug-downloads__meta {
	font-size: 13px;
	line-height: 1.5;
	color: var(--ug-grey);
}

.ug-downloads__link {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	font-family: var(--ug-font-heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--ug-blue);
}

.ug-downloads__link:hover {
	text-decoration: underline;
}

/* Icone del font Uncode: niente larghezza fissa/margini, centrate */
.ug-downloads__icon i,
.ug-downloads__link i,
.ug-contact-list i {
	width: auto !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.ug-downloads__icon i::before,
.ug-downloads__link i::before {
	display: block;
	margin: 0 !important;
}

.ug-downloads--cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.ug-downloads--cards .ug-downloads__item {
	padding: 20px;
	border: 0;
	border-radius: var(--ug-radius);
	background: var(--ug-white);
	box-shadow: var(--ug-shadow);
}

@media (max-width: 767px) {
	.ug-downloads--cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 479px) {
	.ug-downloads__item {
		flex-wrap: wrap;
	}
	.ug-downloads__link {
		margin-left: 57px;
	}
}

/* ==========================================================================
   11. Mappa
   ========================================================================== */

.ug-map {
	overflow: hidden;
	border-radius: var(--ug-radius-sm);
	background: var(--ug-sky);
}

.ug-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ==========================================================================
   12. Pulsanti laterali
   ========================================================================== */

.ug-quick {
	--ug-quick-tab-w: 104px;
	--ug-quick-tab-h: 98px;
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 1000;
	transform: translateY(-50%);
}

.ug-quick,
.ug-quick *,
.ug-quick *::before,
.ug-quick *::after {
	box-sizing: border-box;
}

.ug-quick__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ug-quick__item {
	position: relative;
	margin: 0 0 2px;
	padding: 0;
	--ug-quick-color: var(--ug-blue);
}

.ug-quick__item::before {
	display: none;
}

.ug-quick__item--orange { --ug-quick-color: var(--ug-orange); }
.ug-quick__item--teal { --ug-quick-color: var(--ug-teal); }
.ug-quick__item--indigo { --ug-quick-color: var(--ug-indigo); }

.ug-quick__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: var(--ug-quick-tab-w);
	height: var(--ug-quick-tab-h);
	margin: 0;
	padding: 0 6px;
	border: 0;
	border-radius: 9px 0 0 9px;
	background: var(--ug-quick-color);
	box-shadow: 0 6px 12px rgba(3, 109, 136, 0.14);
	font-family: var(--ug-font-heading);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--ug-white) !important;
	cursor: pointer;
	transition: width 0.3s, border-radius 0.3s;
}

.ug-quick__tab:focus-visible {
	outline: 2px solid var(--ug-dark);
	outline-offset: -4px;
}

.ug-quick__icon {
	display: block;
	width: auto;
	margin: 0 !important;
	font-size: 22px;
	line-height: 1;
	text-align: center;
	transition: font-size 0.3s;
}

.ug-quick__icon::before {
	display: block;
	margin: 0;
}

.ug-quick__label {
	transition: opacity 0.2s;
}

.ug-quick__item.is-open .ug-quick__tab {
	border-radius: 0;
}

.ug-quick__panel {
	position: absolute;
	top: 0;
	right: 100%;
	width: 445px;
	padding: 4px;
	border-radius: 9px 0 9px 9px;
	background: var(--ug-quick-color);
	box-shadow: 0 9px 14px rgba(113, 146, 189, 0.5);
	opacity: 0;
	visibility: hidden;
	transform: translateX(10px);
	transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
}

.ug-quick__item.is-open .ug-quick__panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* Posizione verticale calcolata via JS (sotto l'header, dentro la viewport) */
.ug-quick__panel.is-shifted {
	border-radius: 9px;
}

.ug-quick__panel.is-bottom {
	border-radius: 9px 9px 0 9px;
}

.ug-quick__content {
	position: relative;
	max-height: var(--ug-quick-max, calc(100vh - 48px));
	overflow: auto;
	overscroll-behavior: contain;
	padding: 25px 30px;
	border-radius: 7px;
	background: var(--ug-white);
	text-align: left;
}

.ug-quick__panel--flush .ug-quick__content {
	padding: 0;
}

.ug-quick__panel--flush .ug-quick__content > p:empty {
	display: none;
}

.ug-quick__panel--flush .ug-map {
	border-radius: 7px;
}

.ug-quick__title {
	margin: 0 30px 20px 0;
}

.ug-quick__content > *:last-child {
	margin-bottom: 0;
}

.ug-quick__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ug-sky);
	cursor: pointer;
	transition: background-color 0.2s;
}

/* X disegnata in CSS: centrata al pixel, indipendente dal font icone */
.ug-quick__close::before,
.ug-quick__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	border-radius: 1px;
	background: var(--ug-dark);
}

.ug-quick__close::before {
	transform: rotate(45deg);
}

.ug-quick__close::after {
	transform: rotate(-45deg);
}

.ug-quick__close:hover {
	background: var(--ug-quick-color);
}

.ug-quick__close:hover::before,
.ug-quick__close:hover::after {
	background: var(--ug-white);
}

/* Linguette compatte dopo lo scroll */
@media (min-width: 960px) {
	.ug-quick.is-compact:not(:hover):not(.has-open) {
		opacity: 0.75;
	}
	.ug-quick.is-compact:not(:hover):not(.has-open) .ug-quick__tab {
		width: 28px;
		gap: 0;
		padding: 0;
	}
	.ug-quick.is-compact:not(:hover):not(.has-open) .ug-quick__icon {
		width: 100%;
		font-size: 14px;
	}
	.ug-quick.is-compact:not(:hover):not(.has-open) .ug-quick__label {
		display: none;
	}
}

@media (min-width: 960px) and (max-height: 700px) {
	.ug-quick {
		--ug-quick-tab-h: 72px;
	}
	.ug-quick__tab {
		gap: 6px;
	}
	.ug-quick__icon {
		font-size: 18px;
	}
}

/* Mobile: barra fissa in basso */
@media (max-width: 959px) {
	.ug-quick {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		transform: none;
	}
	.ug-quick__list {
		display: flex;
	}
	.ug-quick__item {
		position: static;
		flex: 1 1 0;
		margin: 0;
	}
	.ug-quick__tab {
		width: 100%;
		height: 60px;
		gap: 4px;
		border-radius: 0;
		box-shadow: none;
		font-size: 11px;
	}
	.ug-quick__icon {
		font-size: 18px;
	}
	.ug-quick__panel,
	.ug-quick__panel.is-shifted,
	.ug-quick__panel.is-bottom {
		top: auto !important;
		right: 0;
		bottom: 100%;
		left: 0;
		width: auto;
		max-height: 70vh;
		padding: 4px 4px 0;
		border-radius: 12px 12px 0 0;
		transform: translateY(10px);
	}
	.ug-quick__item.is-open .ug-quick__panel {
		transform: translateY(0);
	}
	.ug-quick__content {
		max-height: calc(70vh - 4px);
		padding: 20px;
		border-radius: 9px 9px 0 0;
	}
	body.ug-has-quick {
		padding-bottom: 60px;
	}
	body.ug-has-quick .footer-scroll-top,
	body.ug-has-quick .scroll-top {
		bottom: 75px !important;
	}
}

@media (max-width: 379px) {
	.ug-quick__label {
		font-size: 10px;
	}
}

/* ==========================================================================
   13. Hero con blob
   Riga: Extra class "ug-hero". Colonna del testo: "ug-blob" + icona
   opzionale "ug-blob--house" o "ug-blob--fun".
   ========================================================================== */

.ug-hero .owl-dots {
	bottom: 60px !important;
}

.ug-blob > .uncol {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 538px;
	max-width: 100%;
	aspect-ratio: 538 / 422;
	margin-left: auto;
	padding: 30px 50px;
	background: url("../img/main-slider-rect.svg") no-repeat center / contain;
	text-align: center;
}

.ug-blob > .uncol > .uncoltable {
	width: 100%;
}

.ug-blob > .uncol::before {
	content: none;
}

.ug-blob--house .uncont::before,
.ug-blob--fun .uncont::before {
	content: "";
	display: block;
	width: 130px;
	height: 90px;
	margin: 0 auto 10px;
	background: no-repeat center / contain;
}

.ug-blob--house .uncont::before {
	background-image: url("../img/icons/hero-house.svg");
}

.ug-blob--fun .uncont::before {
	background-image: url("../img/icons/hero-fun.svg");
}

/* Riga corsiva sopra il titolo del blob */
.ug-blob .ug-script h1,
.ug-blob .ug-script h2,
.ug-blob .ug-script h3,
.ug-blob .ug-script h4,
.ug-blob .ug-script h5,
.ug-blob .ug-script h6,
.ug-blob .ug-script p {
	font-size: 22px;
	color: #333333;
}

@media (max-width: 959px) {
	.ug-blob > .uncol {
		width: 400px;
		padding: 20px 35px;
	}
	.ug-blob--house .uncont::before,
	.ug-blob--fun .uncont::before {
		width: 100px;
		height: 70px;
	}
	.ug-blob .ug-script p,
	.ug-blob .ug-script h6 {
		font-size: 18px;
	}
}

@media (max-width: 569px) {
	.ug-blob > .uncol {
		width: 290px;
		margin-right: auto;
		padding: 15px 25px;
	}
	.ug-blob--house .uncont::before,
	.ug-blob--fun .uncont::before {
		width: 70px;
		height: 48px;
		margin-bottom: 5px;
	}
	.ug-blob .ug-script p,
	.ug-blob .ug-script h6 {
		font-size: 14px;
	}
	.ug-blob .heading-text h1,
	.ug-blob .heading-text h2 {
		font-size: 28px !important;
	}
	.ug-hero .owl-dots {
		bottom: 20px !important;
	}
}

/* ==========================================================================
   14. Foto a forma di blob
   Extra class di un vc_single_image: "ug-blob-img"
   ========================================================================== */

.ug-blob-img img {
	-webkit-mask: url("../img/blob-mask.svg") no-repeat center / contain;
	mask: url("../img/blob-mask.svg") no-repeat center / contain;
	aspect-ratio: 526 / 502;
	object-fit: cover;
}

.ug-blob-img {
	max-width: 526px;
}

/* ==========================================================================
   15. Card sezione
   ========================================================================== */

.ug-program {
	--ug-program-color: var(--ug-orange);
	--ug-program-tint: #ffd1aa;
	display: flex;
	flex-direction: column;
	height: 100%;
	max-width: 450px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: var(--ug-radius);
	background: var(--ug-white);
	box-shadow: 0 14px 22px rgba(42, 135, 158, 0.14);
}

.ug-program--teal { --ug-program-color: var(--ug-teal); --ug-program-tint: #b5d9d7; }
.ug-program--indigo { --ug-program-color: var(--ug-indigo); --ug-program-tint: #9fcfe9; }
.ug-program--blue { --ug-program-color: var(--ug-blue); --ug-program-tint: #9fcfe9; }

.ug-program__top {
	position: relative;
	flex: 1 1 auto;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ug-sky);
}

.ug-program__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ug-program__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 30px 25px;
	overflow: auto;
	background: rgba(255, 255, 255, 0.95);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.ug-program__overlay > * {
	opacity: 0;
	transform: translateY(15px);
	transition: opacity 0.3s 0.15s, transform 0.3s 0.15s;
}

.ug-program:hover .ug-program__overlay,
.ug-program:focus-within .ug-program__overlay {
	opacity: 1;
	visibility: visible;
}

.ug-program:hover .ug-program__overlay > *,
.ug-program:focus-within .ug-program__overlay > * {
	opacity: 1;
	transform: none;
}

.ug-program__text p {
	margin: 0 0 15px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ug-grey);
}

.ug-program__bottom {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 82px;
	padding: 10px 25px;
	background: var(--ug-program-color);
	color: var(--ug-white);
}

.ug-program__title {
	flex: 1 1 auto;
	margin: 0 !important;
	font-family: var(--ug-font-body);
	font-size: 21px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
	color: var(--ug-white) !important;
}

.ug-program__age {
	font-family: var(--ug-font-heading);
	font-size: 62px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: var(--ug-program-tint);
}

.ug-program__unit {
	font-size: 18px;
	line-height: 1;
}

/* Touch: niente hover. Ordine: foto, fascia colorata, testo */
@media (hover: none) {
	.ug-program__top {
		display: contents;
	}
	.ug-program__img {
		order: 1;
		aspect-ratio: 4 / 3;
		height: auto;
	}
	.ug-program__bottom {
		order: 2;
	}
	.ug-program__overlay {
		position: static;
		order: 3;
		padding: 20px 25px;
		background: var(--ug-white);
		opacity: 1;
		visibility: visible;
	}
	.ug-program__overlay > * {
		opacity: 1;
		transform: none;
	}
	.ug-program__overlay:empty {
		display: none;
	}
}

@media (max-width: 379px) {
	.ug-program__title { font-size: 18px !important; }
	.ug-program__age { font-size: 40px; }
	.ug-program__unit { font-size: 14px; }
}

/* ==========================================================================
   16. Cerchio attività
   ========================================================================== */

.ug-learn {
	--ug-item: 124px;
	container-type: inline-size;
	width: 100%;
	max-width: 570px;
	margin: 0 auto;
	padding: 20px 0;
}

.ug-learn__circle {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
}

/* Anello decorativo */
.ug-learn__circle::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 5%;
	border: 5px solid var(--ug-ice);
	border-radius: 50%;
}

.ug-learn__items {
	position: absolute;
	inset: 0;
	z-index: 2;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ug-learn__item {
	--ug-angle: calc(360deg / var(--ug-n) * var(--ug-i) - 90deg);
	--ug-r: calc(50cqw - var(--ug-item) / 2 - 2px);
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ug-item);
	height: var(--ug-item);
	margin: calc(var(--ug-item) / -2) 0 0 calc(var(--ug-item) / -2);
	padding: 0;
	transform: rotate(var(--ug-angle)) translate(var(--ug-r)) rotate(calc(-1 * var(--ug-angle)));
}

.ug-learn__item::before {
	display: none;
}

.ug-learn__btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 8px;
	border: 4px solid var(--ug-white);
	border-radius: 50%;
	background: var(--ug-sky);
	font-family: var(--ug-font-heading);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--ug-dark);
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s;
}

.ug-learn__btn img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.ug-learn__btn:hover,
.ug-learn__btn:focus-visible,
.ug-learn__btn[aria-pressed="true"] {
	border-color: var(--ug-sky);
	background: var(--ug-white);
}

.ug-learn__btn:focus-visible {
	outline: 2px solid var(--ug-blue);
	outline-offset: 2px;
}

.ug-learn__center {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52%;
	height: 56%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.ug-learn__panel {
	display: none;
}

.ug-learn__panel.is-active {
	display: block;
	animation: ug-fade-in 0.3s ease;
}

.ug-learn__title {
	position: relative;
	margin: 0 0 18px !important;
	padding-bottom: 18px;
	font-size: 32px;
}

.ug-learn__title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 41px;
	height: 3px;
	transform: translateX(-50%);
	background: var(--ug-blue);
}

.ug-learn__panel[data-ug-learn-start] .ug-learn__title {
	margin-bottom: 0 !important;
}

.ug-learn__panel p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
}

@keyframes ug-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@container (max-width: 480px) {
	.ug-learn__item { --ug-item: 96px; }
	.ug-learn__btn { font-size: 11px; gap: 3px; }
	.ug-learn__btn img { width: 30px; height: 30px; }
	.ug-learn__title { font-size: 24px; margin-bottom: 10px !important; padding-bottom: 12px; }
	.ug-learn__panel p { font-size: 13px; }
}

@container (max-width: 380px) {
	.ug-learn__item { --ug-item: 74px; }
	.ug-learn__btn { padding: 4px; border-width: 3px; font-size: 9px; }
	.ug-learn__btn img { width: 24px; height: 24px; }
	.ug-learn__center { width: 56%; height: 58%; }
	.ug-learn__title { font-size: 18px; }
	.ug-learn__panel p { font-size: 12px; line-height: 1.4; }
}

/* ==========================================================================
   17. Lista vantaggi numerata
   Riga interna: "ug-advantages"; ogni colonna: "ug-adv"
   ========================================================================== */

.ug-advantages {
	counter-reset: ug-adv;
}

.ug-adv {
	counter-increment: ug-adv;
}

.ug-adv .uncont {
	position: relative;
	isolation: isolate;
	padding-left: 55px;
}

.ug-adv .uncont::before {
	content: counter(ug-adv, decimal-leading-zero) ".";
	position: absolute;
	top: -4px;
	left: 0;
	z-index: 2;
	font-family: var(--ug-font-heading);
	font-size: 32px;
	font-weight: 500;
	line-height: 1;
	color: var(--ug-blue);
}

/* Nuvola chiara dietro le voci dispari */
.ug-adv:nth-child(odd) .uncont::after {
	content: "";
	position: absolute;
	top: -20px;
	left: -15px;
	z-index: -1;
	width: 100%;
	height: 150px;
	background: url("../img/cloudx2.png") no-repeat left top / 100% auto;
	transform: rotateY(180deg);
	opacity: 0.9;
	pointer-events: none;
}

.ug-adv .heading-text > * {
	margin-bottom: 15px !important;
}

/* ==========================================================================
   18. Tessere icona
   Text block con: <div class="ug-tiles"><span class="ug-tile ug-tile--fruits">Frutta</span>...</div>
   Icone disponibili: fruits, vegetables, grains
   ========================================================================== */

.ug-tiles {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

.ug-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	width: 152px;
	min-height: 137px;
	padding: 15px;
	border-radius: 13px;
	background: var(--ug-white);
	box-shadow: 0 10px 22px rgba(42, 158, 121, 0.14);
	font-family: var(--ug-font-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 23px;
	color: var(--ug-dark);
	transition: box-shadow 0.3s;
}

.ug-tile::before {
	content: "";
	width: 58px;
	height: 58px;
	margin-bottom: 15px;
	background: no-repeat center / contain;
}

.ug-tile:hover {
	box-shadow: none;
}

.ug-tile--fruits::before { background-image: url("../img/icons/fruits.png"); }
.ug-tile--vegetables::before { background-image: url("../img/icons/vegetables.png"); }
.ug-tile--grains::before { background-image: url("../img/icons/grains.png"); }

@media (max-width: 1199px) {
	.ug-tile { width: 107px; min-height: 96px; font-size: 14px; }
	.ug-tile::before { width: 40px; height: 40px; margin-bottom: 5px; }
}

/* ==========================================================================
   19. Box leggibile su foto
   Extra class della colonna sopra una foto di sfondo: "ug-glass"
   ========================================================================== */

.ug-glass > .uncol {
	padding: 40px 45px;
	border-radius: var(--ug-radius);
	background: rgba(255, 255, 255, 0.9);
	box-shadow: var(--ug-shadow);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

@media (max-width: 569px) {
	.ug-glass > .uncol {
		padding: 28px 24px;
	}
}

/* ==========================================================================
   20. Tab "Informazioni sul Centro"
   vc_tabs con Extra class "ug-tabs"
   ========================================================================== */

.ug-tabs .nav-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 0;
	margin-bottom: 40px !important;
	border: 0 !important;
}

.ug-tabs .nav-tabs > li {
	position: relative;
	float: none !important;
	margin: 0 !important;
	padding: 0 28px;
	border: 0 !important;
}

.ug-tabs .nav-tabs > li + li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 16px;
	margin-top: -8px;
	background: var(--ug-dark);
	opacity: 0.6;
}

.ug-tabs .nav-tabs > li > a,
.ug-tabs .nav-tabs > li > a span {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: var(--ug-font-heading);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ug-dark) !important;
}

.ug-tabs .nav-tabs > li.active > a,
.ug-tabs .nav-tabs > li.active > a span,
.ug-tabs .nav-tabs > li > a:hover,
.ug-tabs .nav-tabs > li > a:hover span {
	color: var(--ug-blue) !important;
}

.ug-tabs .tab-content,
.ug-tabs .tab-pane {
	border: 0 !important;
	background: none !important;
}

@media (max-width: 767px) {
	.ug-tabs .nav-tabs {
		flex-direction: column;
		align-items: center;
		gap: 14px;
	}
	.ug-tabs .nav-tabs > li + li::before {
		display: none;
	}
}

/* ==========================================================================
   21. Card con ombra e lista valori
   ========================================================================== */

/* Colonna interna: Extra class "ug-card" (si combina con "ug-adv") */
.ug-card > .uncol {
	height: 100%;
	padding: 30px;
	border-radius: var(--ug-radius);
	background: var(--ug-white);
	box-shadow: 0 14px 30px rgba(42, 135, 158, 0.12);
}

.ug-card.ug-adv .uncont::after {
	display: none;
}

/* Text block con Extra class "ug-values": <ul><li><strong>Titolo</strong> testo</li></ul> */
.ug-values ul {
	margin: 20px 0 0;
	padding: 0;
}

.ug-values li {
	position: relative;
	margin: 0 0 16px;
	padding-left: 26px;
}

.ug-values li::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ug-blue);
	box-shadow: 0 0 0 4px var(--ug-sky);
}

.ug-values strong {
	display: block;
	font-family: var(--ug-font-heading);
	font-weight: 500;
	color: var(--ug-dark);
}

/* Persona (team / testimonianze): colonna "ug-person" */
.ug-person .uncont {
	text-align: center;
}

.ug-person img {
	width: 140px !important;
	height: 140px !important;
	margin: 0 auto;
	border: 6px solid var(--ug-sky);
	border-radius: 50%;
	object-fit: cover;
}

.ug-person .ug-role p,
.ug-person p.ug-role {
	margin: 0 0 12px;
	font-family: var(--ug-font-script);
	font-style: italic;
	color: var(--ug-blue);
}

/* ==========================================================================
   22. Galleria
   vc_gallery con Extra class "ug-gallery": angoli arrotondati e crop quadrato
   ========================================================================== */

.ug-gallery .t-entry-visual,
.ug-gallery .t-entry-visual-cont,
.ug-gallery .dummy {
	overflow: hidden;
	border-radius: var(--ug-radius);
}

.ug-gallery .t-entry-visual img {
	transition: transform 0.4s ease;
}

.ug-gallery .tmb:hover .t-entry-visual img {
	transform: scale(1.04);
}

/* ==========================================================================
   23. Form Contact Form 7
   Il template del form è racchiuso in <div class="ug-form">…</div>
   (vedi docs). Campi con sola linea inferiore, griglia a 2 colonne.
   ========================================================================== */

.ug-form {
	--ug-form-accent: var(--ug-quick-color, var(--ug-blue));
	--ug-form-line: #cedde0;
}

.ug-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px 20px;
}

.ug-form__field--full {
	grid-column: 1 / -1;
}

/* Anche dentro colonne centrate i campi restano allineati a sinistra */
.ug-form,
.ug-form input,
.ug-form textarea {
	text-align: left;
}

.ug-form .wpcf7-form-control-wrap {
	display: block;
}

.ug-form__label {
	display: block;
	margin: 10px 0 0;
	font-family: var(--ug-font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	color: var(--ug-grey);
}

.ug-form input[type="text"],
.ug-form input[type="email"],
.ug-form input[type="tel"],
.ug-form input[type="date"],
.ug-form input[type="number"],
.ug-form select,
.ug-form textarea {
	display: block;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 12px 0 10px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--ug-form-line) !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--ug-font-body) !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--ug-dark) !important;
	transition: border-color 0.2s;
}

.ug-form input[type="date"] {
	padding-top: 6px !important;
}

.ug-form textarea {
	height: 70px !important;
	resize: vertical;
}

.ug-form input:focus,
.ug-form select:focus,
.ug-form textarea:focus {
	border-bottom-color: var(--ug-form-accent) !important;
	outline: none;
}

.ug-form ::placeholder {
	color: var(--ug-grey);
	opacity: 1;
}

.ug-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 15px 20px;
	margin-top: 20px;
}

/* Checkbox privacy */
.ug-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.ug-form .wpcf7-acceptance label {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ug-grey);
	cursor: pointer;
}

.ug-form .wpcf7-acceptance input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	flex: 0 0 18px;
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--ug-form-line) !important;
	border-radius: 4px !important;
	background: var(--ug-white) no-repeat center / 11px !important;
	cursor: pointer;
}

.ug-form .wpcf7-acceptance input[type="checkbox"]:checked {
	border-color: var(--ug-form-accent) !important;
	background-color: var(--ug-form-accent) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") !important;
}

.ug-form .wpcf7-acceptance a {
	color: var(--ug-form-accent);
	text-decoration: underline;
}

/* Pulsante invio */
.ug-form input[type="submit"],
.ug-form button[type="submit"] {
	width: auto !important;
	margin: 0 !important;
	padding: 14px 26px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: var(--ug-form-accent) !important;
	box-shadow: 0 6px 12px rgba(3, 109, 136, 0.14) !important;
	font-family: var(--ug-font-heading) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.03em !important;
	text-transform: none !important;
	color: var(--ug-white) !important;
	cursor: pointer;
	transition: filter 0.2s, transform 0.2s;
}

.ug-form input[type="submit"]:hover,
.ug-form button[type="submit"]:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.ug-form input[type="submit"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.ug-form .wpcf7-spinner {
	margin: 0 0 0 10px;
}

/* Messaggi */
.ug-form .wpcf7-not-valid-tip {
	margin-top: 4px;
	font-size: 12px;
}

.ug-form ~ .wpcf7-response-output,
.ug-quick .wpcf7-response-output {
	margin: 15px 0 0 !important;
	padding: 10px 14px !important;
	border-radius: 8px;
	font-size: 13px;
}

/* Testo introduttivo prima del form nel pannello laterale */
.ug-quick .ug-form-intro {
	margin: -8px 0 6px;
	font-size: 14px;
	line-height: 1.5;
}

@media (max-width: 400px) {
	.ug-form__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ==========================================================================
   24. Testata di pagina
   Prima riga della pagina: Extra class "ug-page-head" (H1 centrato).
   Foto di sfondo opzionale con overlay chiaro impostato sulla riga.
   ========================================================================== */

/* Ancore di pagina (es. /info-genitori/#mensa): non finire sotto l'header sticky */
.row-container[id],
.vc_row[id] {
	scroll-margin-top: 120px;
}

.ug-page-head {
	position: relative;
	overflow: hidden;
	background-color: var(--ug-sky);
}

.ug-page-head > .row {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 300px;
}

.ug-page-head h1 {
	margin: 0 !important;
}

/* Nuvola bianca che chiude la testata in basso */
.ug-page-head::after {
	content: "";
	position: absolute;
	z-index: 3;
	bottom: 0;
	right: 18%;
	width: 340px;
	height: 145px;
	background: url("../img/cloudx2.png") no-repeat center / cover;
	filter: brightness(0) invert(1);
	transform: translateY(62%);
	pointer-events: none;
}

.ug-page-head::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: 20px;
	left: 12%;
	width: 200px;
	height: 86px;
	background: url("../img/cloud.png") no-repeat center / contain;
	opacity: 0.8;
	pointer-events: none;
}

@media (max-width: 959px) {
	.ug-page-head > .row { min-height: 240px; }
	.ug-page-head::after { width: 220px; height: 94px; right: 8%; }
	.ug-page-head::before { display: none; }
}

@media (max-width: 569px) {
	.ug-page-head > .row { min-height: 200px; }
}

/* ==========================================================================
   25. Card centrate con icona
   Colonna interna: "ug-card ug-card--center" con un vc_icon (posizione top)
   ========================================================================== */

.ug-card--center > .uncol {
	padding: 60px 35px;
	text-align: center;
}

.ug-card--center .icon-box {
	text-align: center;
}

.ug-card--center .icon-box-icon {
	margin-bottom: 20px !important;
}

@media (max-width: 767px) {
	.ug-card--center > .uncol {
		padding: 35px 22px;
	}
}

/* ==========================================================================
   26. Vantaggi con numero grande e sbiadito sopra il titolo
   Colonna/riga: "ug-advantages ug-advantages--big", colonne "ug-adv"
   ========================================================================== */

.ug-advantages--big .ug-adv .uncont {
	padding: 50px 0 0;
	text-align: center;
}

.ug-advantages--big .ug-adv .uncont *,
.ug-advantages--big .ug-adv .heading-text {
	text-align: center !important;
}

.ug-advantages--big .ug-adv .uncont::before {
	top: 0;
	left: 50%;
	z-index: -1;
	font-size: 110px;
	transform: translateX(-50%);
	opacity: 0.14;
}

.ug-advantages--big .ug-adv .uncont::after {
	display: none;
}

@media (max-width: 767px) {
	.ug-advantages--big .ug-adv .uncont::before {
		font-size: 80px;
	}
}

/* ==========================================================================
   27. Contatori
   Colonne interne con Extra class "ug-count", ognuna con un uncode_counter
   ========================================================================== */

.ug-count > .uncol {
	max-width: 200px;
	min-height: 170px;
	margin: 0 auto;
	padding: 25px 15px;
	border-radius: var(--ug-radius);
	background: var(--ug-white);
	box-shadow: 0 14px 22px rgba(42, 135, 158, 0.14);
	text-align: center;
	transform: rotate(2deg);
}

.ug-count:nth-child(even) > .uncol {
	transform: rotate(-1deg);
}

.ug-count .uncode-counter-wrap,
.ug-count .uncont {
	text-align: center;
}

.ug-count .counter,
.ug-count .counter-value,
.ug-count .uncode-counter {
	position: relative;
	display: inline-block;
	font-family: var(--ug-font-heading);
	font-size: 60px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: var(--ug-blue);
}

/* Nuvoletta dietro il numero */
.ug-count .uncont::before {
	content: "";
	display: block;
	width: 110px;
	height: 60px;
	margin: 0 auto -78px;
	background: url("../img/cloud.png") no-repeat center / contain;
	opacity: 0.5;
}

.ug-count:nth-child(4n+2) .counter,
.ug-count:nth-child(4n+2) .uncode-counter { color: var(--ug-orange); }
.ug-count:nth-child(4n+3) .counter,
.ug-count:nth-child(4n+3) .uncode-counter { color: var(--ug-teal); }
.ug-count:nth-child(4n+4) .counter,
.ug-count:nth-child(4n+4) .uncode-counter { color: var(--ug-indigo); }

.ug-count .counter-text,
.ug-count .counter-text p {
	margin-top: 10px;
	font-family: var(--ug-font-heading);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--ug-dark);
}

/* ==========================================================================
   28. Box sezione didattica
   vc_row_inner: "ug-program-box ug-program-box--orange|teal|indigo"
   Colonna foto: "ug-program-media" con heading "ug-age-badge"
   Nel testo: <span class="ug-watermark" aria-hidden="true">Piccoli</span>
   ========================================================================== */

.ug-program-box {
	--ug-box-color: var(--ug-orange);
	--ug-box-tint: #ffd1aa;
	--ug-box-border: #eaf5f8;
	position: relative;
	margin: 0 0 45px !important;
	padding: 25px !important;
	overflow: hidden;
	border: 4px solid var(--ug-box-border);
	border-radius: var(--ug-radius);
	background: var(--ug-white);
	box-shadow: 0 14px 22px rgba(42, 135, 158, 0.14);
}

.ug-program-box--teal { --ug-box-color: var(--ug-teal); --ug-box-tint: #b5d9d7; --ug-box-border: #ecf5ee; }
.ug-program-box--indigo { --ug-box-color: var(--ug-indigo); --ug-box-tint: #9fcfe9; --ug-box-border: #f1efec; }

.ug-program-media {
	position: relative;
}

.ug-program-media img {
	border-radius: var(--ug-radius);
}

.ug-age-badge {
	position: absolute !important;
	top: 20px;
	left: -10px;
	z-index: 5;
	margin: 0 !important;
}

.ug-age-badge h1,
.ug-age-badge h2,
.ug-age-badge h3,
.ug-age-badge h4,
.ug-age-badge p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 6px 16px;
	border-radius: var(--ug-radius);
	background: var(--ug-box-color);
	box-shadow: 0 14px 22px rgba(42, 135, 158, 0.14);
	font-family: var(--ug-font-body) !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1 !important;
	color: var(--ug-white) !important;
}

.ug-age-badge strong,
.ug-age-badge b {
	font-family: var(--ug-font-heading);
	font-size: 64px;
	font-weight: 600;
	line-height: 1;
	color: var(--ug-box-tint);
}

.ug-watermark {
	position: absolute;
	right: 0;
	bottom: -10px;
	z-index: -1;
	font-family: var(--ug-font-heading);
	font-size: clamp(70px, 9vw, 130px);
	font-weight: 600;
	line-height: 1;
	color: var(--ug-box-border);
	opacity: 0.7;
	pointer-events: none;
	white-space: nowrap;
}

.ug-program-box .uncont {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.ug-program-meta {
	margin: -10px 0 20px;
	font-size: 15px;
}

.ug-program-meta strong {
	color: var(--ug-dark);
}

@media (max-width: 959px) {
	.ug-watermark { font-size: 100px; }
	.ug-age-badge strong, .ug-age-badge b { font-size: 46px; }
}

@media (max-width: 569px) {
	.ug-program-box { padding: 12px !important; }
	.ug-watermark { font-size: 70px; }
}

/* ==========================================================================
   29. Liste e tabelle
   ========================================================================== */

/* Text block "ug-list-2col": lista su due colonne con freccina */
.ug-list-2col ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 30px;
	margin: 0;
	padding: 0;
}

.ug-list-2col li {
	position: relative;
	margin: 0;
	padding-left: 20px;
	list-style: none !important;
}

.ug-list-2col li::marker {
	content: none;
}

.ug-list-2col li::before {
	content: "";
	position: absolute;
	top: 0.55em;
	left: 0;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--ug-blue);
	border-right: 2px solid var(--ug-blue);
	transform: rotate(45deg);
}

@media (max-width: 479px) {
	.ug-list-2col ul {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Text block "ug-table": tabella a righe arrotondate (mockup) */
.ug-table {
	overflow-x: auto;
}

.ug-table table {
	width: 100%;
	min-width: 620px;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 0 5px;
}

.ug-table th,
.ug-table td {
	padding: 15px 20px !important;
	border: 0 !important;
	background: #f8fbfb;
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
	color: var(--ug-grey);
}

.ug-table thead th,
.ug-table thead td {
	background: var(--ug-sky);
	font-weight: 500;
	color: var(--ug-dark);
}

.ug-table tr > *:first-child {
	border-radius: var(--ug-radius) 0 0 var(--ug-radius);
	font-weight: 500;
	color: var(--ug-dark);
}

.ug-table tr > *:last-child {
	border-radius: 0 var(--ug-radius) var(--ug-radius) 0;
}

/* ==========================================================================
   30. Documenti a tessere
   ========================================================================== */

.ug-downloads--tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 30px;
}

.ug-downloads--tiles .ug-downloads__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	text-align: center;
}

.ug-downloads__tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 195px;
	min-height: 170px;
	margin-bottom: 18px;
	border-radius: var(--ug-radius);
	background: var(--ug-white);
	box-shadow: 0 14px 22px rgba(42, 135, 158, 0.14);
}

/* Nuvoletta dietro l'icona */
.ug-downloads__tile::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120px;
	height: 70px;
	background: url("../img/icons/cloud-small.svg") no-repeat center / contain;
	transform: translate(-40%, -30%);
	opacity: 0.9;
}

.ug-downloads__tile img {
	position: relative;
	z-index: 1;
	width: auto;
	height: 75px;
}

.ug-downloads--tiles .ug-downloads__title {
	font-size: 15px;
}

.ug-downloads--tiles .ug-downloads__link {
	margin-top: 4px;
}

@media (max-width: 959px) {
	.ug-downloads--tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 479px) {
	.ug-downloads--tiles {
		gap: 30px 16px;
	}
	.ug-downloads__tile {
		min-height: 130px;
	}
	.ug-downloads__tile img {
		height: 56px;
	}
}

/* ==========================================================================
   31. Card informative con foto
   Colonna interna "ug-info-card": vc_single_image + heading + text block.
   Foto a sinistra, titolo con spunta azzurra, testo a destra.
   ========================================================================== */

.ug-info-card > .uncol {
	height: 100%;
	padding: 30px !important;
	border: 4px solid var(--ug-sky);
	border-radius: var(--ug-radius);
	background: var(--ug-white);
	box-shadow: 0 14px 22px rgba(42, 135, 158, 0.14);
}

.ug-info-card .uncont {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	grid-auto-rows: min-content;
	column-gap: 28px;
	align-items: start;
}

.ug-info-card .uncont > * {
	grid-column: 2;
	margin-top: 0 !important;
}

.ug-info-card .uncont > .uncode-single-media,
.ug-info-card .uncont > .uncode_single_media,
.ug-info-card .uncont > [class*="single-media"] {
	grid-column: 1;
	grid-row: 1 / span 4;
	margin: 0 !important;
}

.ug-info-card .uncont img {
	border-radius: var(--ug-radius-sm);
}

.ug-info-card .heading-text {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px !important;
}

.ug-info-card .heading-text::before {
	content: "";
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	background: var(--ug-blue) url("../img/icons/check-white.svg") no-repeat center / 12px;
}

.ug-info-card .heading-text > * {
	margin: 0 !important;
}

.ug-info-card p {
	margin-bottom: 10px;
}

.ug-info-card p:last-child {
	margin-bottom: 0;
}

@media (max-width: 569px) {
	.ug-info-card > .uncol {
		padding: 20px !important;
	}
	.ug-info-card .uncont {
		grid-template-columns: minmax(0, 1fr);
	}
	.ug-info-card .uncont > * {
		grid-column: 1;
	}
	.ug-info-card .uncont > .uncode-single-media,
	.ug-info-card .uncont > .uncode_single_media,
	.ug-info-card .uncont > [class*="single-media"] {
		grid-row: auto;
		margin-bottom: 18px !important;
	}
}

/* ==========================================================================
   32. Cosa fare / da evitare
   Colonna "ug-practices ug-practices--do" o "ug-practices--dont":
   heading + text block con <ul>
   ========================================================================== */

.ug-practices .uncont {
	position: relative;
	padding-left: 100px;
}

.ug-practices .uncont::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 70px;
	height: 70px;
	border-radius: 8px;
	background: var(--ug-blue) url("../img/icons/check-white.svg") no-repeat center / 22px;
}

.ug-practices--dont .uncont::before {
	background-color: var(--ug-orange);
	background-image: url("../img/icons/close-white.svg");
	background-size: 18px;
}

.ug-practices ul {
	margin: 20px 0 0;
	padding: 0;
}

.ug-practices li {
	position: relative;
	margin: 0 0 15px;
	padding-left: 26px;
	list-style: none !important;
}

.ug-practices li::marker {
	content: none;
}

.ug-practices li::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0;
	width: 12px;
	height: 12px;
	background: url("../img/icons/check.svg") no-repeat center / contain;
}

.ug-practices--dont li::before {
	background-image: url("../img/icons/close.svg");
	width: 10px;
	height: 10px;
}

@media (max-width: 767px) {
	.ug-practices .uncont {
		padding-left: 50px;
	}
	.ug-practices .uncont::before {
		width: 34px;
		height: 34px;
		background-size: 12px;
	}
}

/* ==========================================================================
   33. FAQ
   vc_accordion con Extra class "ug-faq": linea sotto la domanda e +/− azzurro
   ========================================================================== */

.ug-faq .panel {
	margin: 0 0 26px !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.ug-faq .panel-heading {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.ug-faq .panel-title {
	margin: 0 !important;
}

.ug-faq .panel-title > a {
	position: relative;
	display: block;
	padding: 0 34px 15px 0 !important;
	border-bottom: 1px solid #cedde0;
	font-family: var(--ug-font-heading) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--ug-dark) !important;
	transition: color 0.2s, border-color 0.2s;
}

.ug-faq .panel-title > a > i,
.ug-faq .panel-title > a::before {
	display: none !important;
}

/* Segno + che diventa − quando la domanda è aperta */
.ug-faq .panel-title > a::after {
	content: "" !important;
	position: absolute;
	top: 5px;
	right: 6px;
	width: 15px;
	height: 15px;
	border: 0 !important;
	background:
		linear-gradient(var(--ug-blue), var(--ug-blue)) center / 15px 2px no-repeat,
		linear-gradient(var(--ug-blue), var(--ug-blue)) center / 2px 15px no-repeat;
	transform: none !important;
	transition: background-size 0.3s;
}

.ug-faq .panel-title.active > a::after,
.ug-faq .panel-title > a[aria-expanded="true"]::after {
	background-size: 15px 2px, 2px 0;
}

.ug-faq .panel-title.active > a,
.ug-faq .panel-title > a:hover {
	border-bottom-color: var(--ug-blue);
	color: var(--ug-blue) !important;
}

.ug-faq .panel-body {
	padding: 20px 0 6px !important;
	border: 0 !important;
}

.ug-faq .panel-body p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   34. Pagina Contatti
   ========================================================================== */

/* Colonna mappa */
.ug-map-col .ug-map {
	border-radius: var(--ug-radius);
	box-shadow: var(--ug-shadow);
}

/* Box contatti sopra il form */
.ug-contact-box {
	margin: 0 0 30px;
	padding: 24px 28px;
	border-radius: var(--ug-radius);
	background: var(--ug-ice);
}

/* ==========================================================================
   35. Mappa con consenso, accessibilità, hero mobile
   ========================================================================== */

.ug-map--consent {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--ug-sky) url("../img/cloudx2.png") no-repeat center 85% / 60% auto;
	text-align: center;
}

.ug-map__placeholder {
	max-width: 340px;
}

.ug-map__placeholder > i {
	display: block;
	margin: 0 auto 10px !important;
	font-size: 34px;
	color: var(--ug-blue);
}

.ug-map__address {
	margin: 0 0 16px !important;
	font-family: var(--ug-font-heading);
	font-weight: 500;
	color: var(--ug-dark);
}

.ug-map__load {
	padding: 12px 22px;
	border: 0;
	border-radius: 8px;
	background: var(--ug-blue);
	box-shadow: 0 6px 12px rgba(3, 109, 136, 0.14);
	font-family: var(--ug-font-heading);
	font-size: 14px;
	font-weight: 600;
	color: var(--ug-white);
	cursor: pointer;
}

.ug-map__load:hover {
	filter: brightness(1.06);
}

.ug-map__note {
	margin: 14px 0 0 !important;
	font-size: 12px;
	line-height: 1.5;
}

.ug-map__note a {
	color: var(--ug-blue);
	text-decoration: underline;
}

/* Etichette dei form visibili solo agli screen reader */
.ug-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Hero: su tablet/mobile Uncode ignora l'altezza in %, diamo un minimo */
@media (max-width: 959px) {
	.ug-hero .row-inner {
		display: flex !important;
		align-items: center;
		min-height: 560px;
	}
	.ug-hero .row-inner > .wpb_column {
		width: 100%;
	}
}

@media (max-width: 569px) {
	.ug-hero .row-inner {
		min-height: 440px;
	}
}

/* Chi preferisce meno movimento: niente animazioni decorative */
@media (prefers-reduced-motion: reduce) {
	.ug-quick__panel,
	.ug-quick__tab,
	.ug-program__overlay,
	.ug-program__overlay > *,
	.ug-learn__panel.is-active,
	.ug-read-more .btn::after,
	a.ug-read-more::after,
	.ug-gallery .t-entry-visual img {
		transition: none !important;
		animation: none !important;
	}
}