/*
 * Pattern Gutenberg "Banda verde con mascotte" (categoria "Sala
 * Smaltimenti"): fascia di chiusura a tutta larghezza su
 * `var(--color-green)` con titolo, testo centrato, mascotte e pulsante
 * di contatto (stile del pulsante: `.pattern-servizio__cta`, già
 * definito in pattern-servizio.css).
 *
 * La mascotte è composta da tre immagini sovrapposte (cerchio bianco,
 * figura, dettaglio) posizionate in percentuale dentro un riquadro che
 * riproduce le proporzioni del Figma (nodo 2029:265).
 */
.pattern-banda-verde {
	padding: 4rem max(2rem, calc(50vw - 765px));
	text-align: center;
	background: var(--color-green);
	color: var(--color-white);
}

.pattern-banda-verde__titolo {
	margin: 0 0 2rem;
	font-family: var(--font-titles);
	font-size: clamp(2rem, 3.125vw, 3.75rem);
	font-weight: 900;
	line-height: 1.3;
	text-transform: capitalize;
	color: var(--color-white);
}

.pattern-banda-verde__titolo em {
	font-weight: 500;
	text-transform: lowercase;
}

.pattern-banda-verde__testo {
	max-width: 1549px;
	margin: 0 auto 2rem;
	color: var(--color-white);
}

.pattern-banda-verde__mascotte {
	position: relative;
	width: min(397px, 80vw);
	aspect-ratio: 396.8 / 392.6;
	margin: 0 auto 2rem;
}

.pattern-banda-verde__mascotte img {
	position: absolute;
	display: block;
}

.pattern-banda-verde__mascotte-sfondo {
	top: 12.1%;
	left: 9.58%;
	width: 85.94%;
	height: 83.04%;
}

.pattern-banda-verde__mascotte-figura {
	top: 8.14%;
	left: 7.89%;
	width: 84.22%;
	height: 83.72%;
	transform: rotate(12.37deg);
}

.pattern-banda-verde__mascotte-dettaglio {
	top: 78.39%;
	left: 47.87%;
	width: 3%;
	height: 1.4%;
	transform: rotate(12.37deg);
}

@media (width <= 767px) {
	.pattern-banda-verde {
		padding: 2rem 1rem;
	}
}