/* ==========================================================================
   La Nuova Fattoria PET — stile del sito
   ========================================================================== */

/* Font locali ------------------------------------------------------------ */
@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url("../fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("../fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("../fonts/fredoka-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/nunito-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url("../fonts/nunito-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2"); }

/* Colori e misure -------------------------------------------------------- */
:root {
	--verde: #2e7d4f;
	--verde-scuro: #1c5234;
	--verde-notte: #143d27;
	--verde-chiaro: #e3f1e6;
	--crema: #fff8ec;
	--sabbia: #f7ead2;
	--sabbia-scura: #ecd9b6;
	--arancio: #ee8434;
	--arancio-scuro: #c9611a;
	--giallo: #ffc94a;
	--azzurro: #5fb8cf;
	--azzurro-chiaro: #e2f4f8;
	--rosso: #d83a34;
	--marrone: #3b2a1d;
	--marrone-medio: #6b5443;
	--bianco: #fff;

	/* colori delle illustrazioni */
	--a-pelo: #e9a15c;
	--a-scuro: #9b5a2b;
	--a-chiaro: #fbe3c4;
	--a-occhi: #2b1d14;

	--font-titoli: "Fredoka", "Trebuchet MS", sans-serif;
	--font-testo: "Nunito", "Segoe UI", system-ui, sans-serif;

	--raggio: 22px;
	--raggio-grande: 36px;
	--ombra: 0 10px 30px -12px rgba(59, 42, 29, .28);
	--ombra-forte: 0 22px 50px -18px rgba(59, 42, 29, .4);
	--larghezza: 1200px;
	--sezione: clamp(64px, 9vw, 120px);
}

/* Base ------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--crema);
	color: var(--marrone);
	font-family: var(--font-testo);
	font-size: 1.0625rem;
	line-height: 1.65;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--verde); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--arancio-scuro); }
h1, h2, h3, h4 {
	font-family: var(--font-titoli);
	font-weight: 600;
	line-height: 1.12;
	margin: 0 0 .5em;
	color: var(--verde-notte);
	letter-spacing: -.01em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.3rem; }
h1 em, h2 em { font-style: normal; color: var(--arancio); position: relative; white-space: nowrap; }
h1 em::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .28em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 10c40-8 80-10 120-6s56 4 76-2' fill='none' stroke='%23ffc94a' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
	z-index: -1;
}
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--arancio); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--giallo); color: var(--marrone); }

.screen-reader-text, .campo-trappola {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.salta {
	position: absolute; left: 16px; top: -60px; z-index: 100;
	background: var(--verde-notte); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 800;
}
.salta:focus { top: 12px; color: #fff; }

.contenitore { width: min(100% - 32px, var(--larghezza)); margin-inline: auto; position: relative; }
.contenitore-stretto { max-width: 780px; }
.centrato { text-align: center; }

.icona { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.2em; }

/* Bottoni ---------------------------------------------------------------- */
.bottone {
	--sfondo-b: var(--verde);
	--testo-b: #fff;
	display: inline-flex; align-items: center; gap: .55em;
	padding: .85em 1.5em;
	border: 2px solid var(--sfondo-b);
	border-radius: 999px;
	background: var(--sfondo-b);
	color: var(--testo-b);
	font-family: var(--font-titoli); font-weight: 600; font-size: 1.05rem; line-height: 1.1;
	text-decoration: none; cursor: pointer;
	box-shadow: 0 5px 0 -1px color-mix(in srgb, var(--sfondo-b) 65%, #000);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bottone:hover { color: var(--testo-b); transform: translateY(-2px); box-shadow: 0 7px 0 -1px color-mix(in srgb, var(--sfondo-b) 65%, #000); }
.bottone:active { transform: translateY(3px); box-shadow: 0 2px 0 -1px color-mix(in srgb, var(--sfondo-b) 65%, #000); }
.bottone:hover .icona-zampa { animation: zampetta .5s ease; }
.bottone-giallo { --sfondo-b: var(--giallo); --testo-b: var(--marrone); }
.bottone-azzurro { --sfondo-b: var(--azzurro); --testo-b: #fff; }
.bottone-bordo { background: transparent; --testo-b: var(--verde); box-shadow: none; }
.bottone-bordo:hover { background: var(--verde); --testo-b: #fff; box-shadow: none; }
.bottone-bordo-chiaro { background: transparent; border-color: rgba(255,255,255,.7); --testo-b: #fff; box-shadow: none; }
.bottone-bordo-chiaro:hover { background: rgba(255,255,255,.12); box-shadow: none; }
.bottone-piccolo { padding: .6em 1.1em; font-size: .95rem; }

@keyframes zampetta { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-18deg) scale(1.15); } 60% { transform: rotate(10deg); } }

.occhiello {
	display: inline-flex; align-items: center; gap: .5em;
	margin-bottom: .9em;
	color: var(--arancio-scuro);
	font-family: var(--font-titoli); font-weight: 600; font-size: .95rem;
	text-transform: uppercase; letter-spacing: .08em;
}
.occhiello .icona { width: 1.35em; height: 1.35em; transform: rotate(-20deg); }

/* Barra alta e testata --------------------------------------------------- */
.barra-alta { background: var(--verde-notte); color: #e4efe7; font-size: .9rem; }
.barra-alta-interno { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 42px; }
.barra-alta-motto { margin: 0; display: flex; align-items: center; gap: .5em; font-weight: 600; letter-spacing: .02em; }
.barra-alta-motto .icona { color: var(--giallo); }
.barra-alta-contatti { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; align-items: center; }
.barra-alta-contatti a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; }
.barra-alta-contatti a:hover { color: var(--giallo); }

.testa {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 248, 236, .94);
	border-bottom: 1px solid transparent;
	transition: box-shadow .25s, border-color .25s;
}
.testa::before { content: ""; position: absolute; inset: 0; z-index: -1; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
/* Da collegati, la barra nera di WordPress è fissa in alto: la testata si ferma sotto di lei,
   altrimenti menu e pulsanti finirebbero coperti durante lo scorrimento. Sotto i 600 px la
   barra scorre via con la pagina, quindi la testata torna al bordo. */
.admin-bar .testa { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .testa { top: 0; } }
.testa.scorrendo { box-shadow: 0 8px 24px -16px rgba(59,42,29,.5); border-color: var(--sabbia-scura); }
.testa-interno { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; }
.logo { display: block; flex: none; border-radius: 12px; overflow: hidden; }
.logo img { width: auto; height: 50px; }

.navigazione { display: flex; align-items: center; gap: 22px; }
.navigazione .menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.navigazione .menu a {
	position: relative; display: block;
	padding: .55em .85em;
	color: var(--marrone); text-decoration: none;
	font-family: var(--font-titoli); font-weight: 500; font-size: 1.05rem;
	border-radius: 999px;
	transition: background .2s, color .2s;
}
.navigazione .menu a::after {
	content: ""; position: absolute; left: 50%; bottom: -6px; width: 16px; height: 16px; margin-left: -8px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.5c-2.8 0-5.8 3.1-5.8 5.8 0 2 1.7 3 3.4 2.7 1-.2 1.6-.7 2.4-.7s1.4.5 2.4.7c1.7.3 3.4-.7 3.4-2.7 0-2.7-3-5.8-5.8-5.8z'/%3E%3Cellipse cx='6' cy='9.5' rx='1.9' ry='2.6'/%3E%3Cellipse cx='9.6' cy='5.6' rx='1.9' ry='2.6'/%3E%3Cellipse cx='14.4' cy='5.6' rx='1.9' ry='2.6'/%3E%3Cellipse cx='18' cy='9.5' rx='1.9' ry='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 11.5c-2.8 0-5.8 3.1-5.8 5.8 0 2 1.7 3 3.4 2.7 1-.2 1.6-.7 2.4-.7s1.4.5 2.4.7c1.7.3 3.4-.7 3.4-2.7 0-2.7-3-5.8-5.8-5.8z'/%3E%3Cellipse cx='6' cy='9.5' rx='1.9' ry='2.6'/%3E%3Cellipse cx='9.6' cy='5.6' rx='1.9' ry='2.6'/%3E%3Cellipse cx='14.4' cy='5.6' rx='1.9' ry='2.6'/%3E%3Cellipse cx='18' cy='9.5' rx='1.9' ry='2.6'/%3E%3C/svg%3E") center / contain no-repeat;
	color: var(--arancio);
	opacity: 0; transform: translateY(4px) scale(.5);
	transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.navigazione .menu a:hover { background: var(--sabbia); color: var(--verde-scuro); }
.navigazione .menu a:hover::after,
.navigazione .menu .current-menu-item > a::after,
.navigazione .menu .current_page_item > a::after { opacity: 1; transform: none; }
.navigazione .menu .current-menu-item > a,
.navigazione .menu .current_page_item > a { color: var(--verde); font-weight: 600; }

.menu-apri {
	display: none;
	width: 48px; height: 48px; border-radius: 50%;
	border: 2px solid var(--verde); background: transparent; color: var(--verde);
	align-items: center; justify-content: center; cursor: pointer;
}
.menu-apri .icona { width: 24px; height: 24px; }
.menu-apri .icona-chiudi { display: none; }
.menu-aperto .menu-apri .icona-apri { display: none; }
.menu-aperto .menu-apri .icona-chiudi { display: block; }

/* Onde, impronte e decorazioni ------------------------------------------ */
.onda { position: absolute; left: 0; width: 100%; height: clamp(30px, 5vw, 70px); display: block; pointer-events: none; }
.onda-sotto { bottom: -1px; color: var(--bianco); }
.onda-sopra { top: -1px; transform: rotate(180deg); color: var(--crema); }

.impronte { position: absolute; pointer-events: none; color: var(--verde); opacity: .12; }
.impronte span { position: absolute; width: 34px; height: 34px; animation: passo 6s infinite; animation-delay: calc(var(--i) * .5s); }
.impronte span:nth-child(odd) { transform: rotate(var(--r, 25deg)) translateX(-14px); }
.impronte span:nth-child(even) { transform: rotate(var(--r, 25deg)) translateX(14px); }
.impronte .icona { width: 100%; height: 100%; }
@keyframes passo { 0%, 100% { opacity: .35; } 10%, 60% { opacity: 1; } }

/* scia diagonale: posizioni calcolate sull'indice */
.impronte span { left: calc(var(--i) * 64px); top: calc(var(--i) * -34px); }
.impronte-eroe { left: 2%; bottom: 90px; --r: 62deg; }
.impronte-testata { right: 4%; bottom: 70px; --r: 62deg; }

.animale { display: block; }
.fluttua { position: absolute; color: var(--verde); opacity: .16; animation: fluttua 7s ease-in-out infinite; pointer-events: none; }
.fluttua-pesce { width: 70px; top: 16%; left: 46%; --sfondo: var(--crema); color: var(--azzurro); opacity: .5; }
.fluttua-uccello { width: 64px; top: 9%; right: 6%; color: var(--arancio); opacity: .45; animation-delay: -2s; }
.fluttua-osso { width: 70px; bottom: 22%; left: 44%; color: var(--giallo); opacity: .8; animation-delay: -4s; }
@keyframes fluttua { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } }

/* Eroe (home) ------------------------------------------------------------ */
.eroe {
	position: relative;
	padding: clamp(40px, 7vw, 90px) 0 clamp(90px, 11vw, 150px);
	background:
		radial-gradient(circle at 85% 20%, rgba(255, 201, 74, .35), transparent 38%),
		radial-gradient(circle at 10% 90%, rgba(46, 125, 79, .12), transparent 40%),
		var(--crema);
	overflow: hidden;
}
.eroe-griglia { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.eroe-intro { font-size: 1.15rem; color: var(--marrone-medio); max-width: 36em; }
.eroe-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 30px; }
.eroe-punti { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-weight: 600; font-size: .95rem; color: var(--marrone-medio); }
.eroe-punti li { display: flex; align-items: center; gap: .45em; }
.eroe-punti .icona { color: var(--verde); }

.eroe-foto, .testata-foto { position: relative; padding-top: 70px; }
.foto-macchia {
	position: relative;
	border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	box-shadow: var(--ombra-forte);
	border: 8px solid #fff;
	animation: respira 12s ease-in-out infinite;
}
.foto-macchia img { width: 100%; height: 100%; object-fit: cover; }
/* La foto grande della home ospita tre scatti di forma diversa: cornice più larga
   e angoli meno tondi, così di ognuno si vede quasi tutto. */
.foto-macchia-grande {
	aspect-ratio: 3 / 2;
	border-radius: 30% 34% 28% 32% / 26% 24% 30% 28%;
	animation-name: respira-grande;
}
@keyframes respira-grande {
	0%, 100% { border-radius: 30% 34% 28% 32% / 26% 24% 30% 28%; }
	50% { border-radius: 34% 28% 32% 30% / 30% 28% 24% 26%; }
}
/* Ogni foto della home si vede intera: riempie la cornice una copia sfocata di sé
   stessa, così niente tagli e niente bordi vuoti attorno. */
.foto-macchia .foto-rotante { position: absolute; inset: 0; display: block; background: var(--crema); }
.foto-macchia .foto-rotante::before {
	content: ""; position: absolute; inset: 0;
	background: var(--sfocata) center / cover no-repeat;
	filter: blur(22px) brightness(.96);
	transform: scale(1.12);
}
.foto-macchia .foto-rotante img { position: relative; width: 100%; height: 100%; object-fit: contain; }

/* Più foto che si alternano nella home */
.foto-a-rotazione .foto-rotante {
	position: absolute; inset: 0; opacity: 0; z-index: 1;
	transform: translateX(7%) scale(1.05);
	transition: opacity .9s ease, transform .9s ease;
}
.foto-a-rotazione .foto-rotante.attiva { opacity: 1; z-index: 3; transform: none; }
/* La foto che se ne va scorre verso sinistra mentre la nuova entra da destra. */
.foto-a-rotazione .foto-rotante.uscita { opacity: 0; z-index: 2; transform: translateX(-7%) scale(1.05); }
.foto-pallini { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.foto-pallino {
	width: 12px; height: 12px; padding: 0; border: 2px solid var(--verde); border-radius: 50%;
	background: #fff; cursor: pointer; transition: transform .2s, background .2s;
}
.foto-pallino:hover { transform: scale(1.2); }
.foto-pallino.attivo { background: var(--verde); transform: scale(1.25); }

@keyframes respira {
	0%, 100% { border-radius: 58% 42% 46% 54% / 48% 56% 44% 52%; }
	50% { border-radius: 46% 54% 58% 42% / 56% 44% 52% 48%; }
}
.eroe-foto::before, .testata-foto::before {
	content: ""; position: absolute; inset: 40px -18px -18px 18px;
	border: 3px dashed var(--verde); border-radius: 50%; opacity: .35;
	animation: gira 40s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

.animale-sbuca {
	position: absolute; top: 0; left: 50%; width: clamp(120px, 14vw, 170px);
	transform: translateX(-50%);
	filter: drop-shadow(0 6px 8px rgba(59,42,29,.2));
	z-index: 2;
	animation: sbuca 5s ease-in-out infinite;
	transform-origin: 50% 100%;
}
@keyframes sbuca { 0%, 70%, 100% { transform: translateX(-50%) rotate(0); } 78% { transform: translateX(-50%) rotate(-5deg); } 86% { transform: translateX(-50%) rotate(4deg); } }
.animale-gatto { --a-pelo: #8d8f99; --a-scuro: #5e606a; }
.animale-sbuca-piccolo { width: 110px; top: -76px; left: 70%; }

.etichetta-foto {
	position: absolute; left: -12px; bottom: 30px; z-index: 3;
	display: flex; align-items: center; gap: 12px;
	padding: 12px 20px 12px 12px;
	background: #fff; border-radius: 999px; box-shadow: var(--ombra);
	font-size: .9rem; line-height: 1.3; color: var(--marrone-medio);
	animation: fluttua 8s ease-in-out infinite;
}
.etichetta-foto strong { display: block; color: var(--verde-notte); font-family: var(--font-titoli); font-weight: 600; font-size: 1rem; }
.etichetta-icona { width: 44px; height: 44px; border-radius: 50%; background: var(--arancio); color: #fff; display: grid; place-items: center; }
.etichetta-icona .icona { width: 24px; height: 24px; }

/* Testata pagine interne ------------------------------------------------- */
.testata {
	position: relative;
	padding: clamp(36px, 6vw, 80px) 0 clamp(90px, 10vw, 140px);
	background:
		radial-gradient(circle at 90% 10%, rgba(255, 201, 74, .3), transparent 35%),
		var(--sabbia);
	overflow: hidden;
}
.testata-griglia { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.testata-intro { font-size: 1.15rem; color: var(--marrone-medio); max-width: 34em; margin-bottom: 1.6em; }
.testata-foto .foto-macchia { max-width: 440px; margin-inline: auto; }
.testata-foto::before { inset: 40px 6% -14px 12%; }
.medaglietta-giro {
	position: absolute; right: 6%; bottom: 8%; z-index: 3;
	width: 64px; height: 64px; border-radius: 50%;
	background: var(--rosso); color: #fff; display: grid; place-items: center;
	box-shadow: var(--ombra); border: 4px solid #fff;
	animation: fluttua 6s ease-in-out infinite;
}
.medaglietta-giro .icona { width: 28px; height: 28px; }
.testata-semplice { text-align: left; padding-bottom: clamp(80px, 9vw, 120px); }
.testata-semplice h1 { max-width: 20ch; }
.testata-404 { text-align: center; }
.testata-404 h1, .testata-404 .testata-intro { margin-inline: auto; }
.testata-404 .eroe-azioni { justify-content: center; }
.animale-404 { width: 180px; margin: 0 auto 10px; animation: sbuca 4s ease-in-out infinite; --a-pelo: #e9a15c; }

/* Sezioni ---------------------------------------------------------------- */
.sezione { position: relative; padding: var(--sezione) 0; }
.sezione-bianca { background: var(--bianco); }
.sezione-bianca + .sezione-bianca { padding-top: 0; }
.sezione-verde {
	background: var(--verde-scuro)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 24 24'%3E%3Cg fill='%23ffffff' fill-opacity='.05' transform='rotate(25 12 12) scale(.5) translate(6 6)'%3E%3Cpath d='M12 11.5c-2.8 0-5.8 3.1-5.8 5.8 0 2 1.7 3 3.4 2.7 1-.2 1.6-.7 2.4-.7s1.4.5 2.4.7c1.7.3 3.4-.7 3.4-2.7 0-2.7-3-5.8-5.8-5.8z'/%3E%3Cellipse cx='6' cy='9.5' rx='1.9' ry='2.6'/%3E%3Cellipse cx='9.6' cy='5.6' rx='1.9' ry='2.6'/%3E%3Cellipse cx='14.4' cy='5.6' rx='1.9' ry='2.6'/%3E%3Cellipse cx='18' cy='9.5' rx='1.9' ry='2.6'/%3E%3C/g%3E%3C/svg%3E");
	color: #e9f3ec;
	padding: calc(var(--sezione) + 30px) 0;
}
.sezione-verde h2, .sezione-verde h3 { color: #fff; }
.sezione-verde .occhiello { color: var(--giallo); }
.sezione-verde .titolo-sezione p, .sezione-verde .titolo-sezione p:last-child { color: #cfe3d5; }
.sezione-verde .onda-sopra { color: var(--crema); }
.sezione-verde .onda-sotto { color: var(--crema); }
.sezione-bianca + .sezione-verde .onda-sopra { color: var(--bianco); }

.titolo-sezione { max-width: 720px; margin-bottom: clamp(36px, 5vw, 56px); }
.titolo-sezione.centrato { margin-inline: auto; text-align: center; }
.titolo-sezione p:last-child { color: var(--marrone-medio); font-size: 1.1rem; margin: 0; }

.due-colonne { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.due-colonne-alto { align-items: start; }
.testo-lungo > p { color: var(--marrone-medio); }
.sezione-verde .testo-lungo > p { color: #d6e7dc; }

/* Medagliette (schede a forma di medaglietta per collare) ---------------- */
.medagliette { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.medagliette-4 { grid-template-columns: repeat(4, 1fr); }
.medaglietta {
	position: relative;
	padding: 58px 26px 30px;
	margin-top: 22px;
	background: var(--crema);
	border: 2px solid var(--sabbia-scura);
	border-radius: 40px 40px var(--raggio) var(--raggio);
	text-align: center;
	transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s, border-color .3s;
}
/* anello della medaglietta */
.medaglietta::before {
	content: ""; position: absolute; top: -22px; left: 50%; width: 30px; height: 30px; margin-left: -15px;
	border: 5px solid var(--sabbia-scura); border-radius: 50%; background: transparent;
	transition: border-color .3s;
}
.medaglietta:nth-child(4n+1) { --colore: var(--verde); }
.medaglietta:nth-child(4n+2) { --colore: var(--arancio); }
.medaglietta:nth-child(4n+3) { --colore: var(--rosso); }
.medaglietta:nth-child(4n+4) { --colore: var(--azzurro); }
.medaglietta-icona {
	position: absolute; top: -8px; left: 50%; transform: translate(-50%, 0);
	width: 58px; height: 58px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--colore); color: #fff;
	box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--colore) 60%, #000);
	transition: transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.medaglietta-icona .icona { width: 28px; height: 28px; }
.medaglietta h3 { margin: 10px 0 .45em; font-size: 1.25rem; }
.medaglietta h3 a { color: inherit; text-decoration: none; }
.medaglietta p { margin: 0; color: var(--marrone-medio); font-size: .98rem; }
.medaglietta-vai { display: inline-flex; align-items: center; gap: .4em; margin-top: 16px; color: var(--colore); font-family: var(--font-titoli); font-weight: 600; }
.medaglietta:hover { transform: translateY(-8px) rotate(-1.5deg); box-shadow: var(--ombra-forte); border-color: var(--colore); }
.medaglietta:nth-child(even):hover { transform: translateY(-8px) rotate(1.5deg); }
.medaglietta:hover::before { border-color: var(--colore); }
.medaglietta:hover .medaglietta-icona { transform: translate(-50%, 0) rotate(-12deg) scale(1.08); }
.medaglietta:hover .medaglietta-vai .icona { transform: translateX(4px); }
.medaglietta-vai .icona { transition: transform .2s; }
.collegamento-esteso::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sezione:not(.sezione-bianca) .medaglietta { background: #fff; }

/* Chi siamo: collage, bollini, spunte ------------------------------------ */
.collage { position: relative; min-height: 480px; }
.collage-foto { position: absolute; border: 8px solid #fff; border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra-forte); }
.collage-foto img { width: 100%; height: 100%; object-fit: cover; }
.collage-1 { left: 0; top: 0; width: 76%; aspect-ratio: 4 / 3; transform: rotate(-3deg); }
.collage-2 { right: 0; bottom: 0; width: 50%; aspect-ratio: 1; transform: rotate(4deg); border-radius: 50%; }
.adesivo {
	position: absolute; left: 6%; bottom: 6%;
	width: 120px; height: 120px; border-radius: 50%;
	display: grid; place-items: center; text-align: center;
	font-family: var(--font-titoli); font-weight: 700; font-size: 1.7rem; line-height: 1;
	transform: rotate(-12deg);
	box-shadow: var(--ombra);
}
.adesivo small { display: block; font-size: .78rem; font-weight: 500; margin-top: 4px; }
.adesivo .icona { position: absolute; top: 12px; width: 22px; height: 22px; opacity: .6; }
.adesivo-giallo { background: var(--giallo); color: var(--marrone); outline: 3px dashed var(--giallo); outline-offset: 5px; }

.bollini { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bollini li {
	padding: .35em .9em; border-radius: 999px;
	background: var(--verde-chiaro); color: var(--verde-scuro);
	font-weight: 700; font-size: .88rem;
}
.spunte { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
.spunte li { display: flex; gap: 12px; align-items: flex-start; color: var(--marrone-medio); }
.spunte strong { color: var(--marrone); }
.spunte .icona { width: 26px; height: 26px; padding: 4px; margin-top: 1px; border-radius: 50%; background: var(--verde); color: #fff; stroke-width: 3; }

/* Schede mini (toelettatura in home, diete…) ---------------------------- */
.schede-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 26px 0 32px; }
.scheda-mini {
	display: flex; gap: 14px; align-items: flex-start;
	padding: 18px; border-radius: var(--raggio);
	background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
	transition: background .25s, transform .25s;
}
.scheda-mini:hover { background: rgba(255,255,255,.14); transform: translateY(-3px); }
.scheda-mini h3 { font-size: 1.1rem; margin-bottom: .25em; }
.scheda-mini p { margin: 0; font-size: .93rem; color: #cfe3d5; }
.scheda-mini-icona { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--giallo); color: var(--marrone); transform: rotate(-6deg); }
.scheda-mini-icona .icona { width: 24px; height: 24px; }
.schede-mini-chiare .scheda-mini { background: #fff; border-color: var(--sabbia-scura); box-shadow: 0 4px 14px -10px rgba(59,42,29,.4); }
.schede-mini-chiare .scheda-mini p { color: var(--marrone-medio); }
.schede-mini-chiare .scheda-mini-icona { background: var(--verde-chiaro); color: var(--verde); }
.schede-mini-chiare .scheda-mini:nth-child(2) .scheda-mini-icona { background: #fde6d4; color: var(--arancio-scuro); }
.schede-mini-chiare .scheda-mini:nth-child(3) .scheda-mini-icona { background: #fbdcdb; color: var(--rosso); }
.schede-mini-chiare .scheda-mini:nth-child(4) .scheda-mini-icona { background: var(--azzurro-chiaro); color: #2c8aa3; }

/* Foto con cornice ------------------------------------------------------- */
.foto-cornice { position: relative; }
.foto-cornice > img { border-radius: var(--raggio-grande); border: 8px solid #fff; box-shadow: var(--ombra-forte); width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }
.foto-cornice-inclinata > img { transform: rotate(2.5deg); }
.foto-cornice-destra > img { transform: rotate(-2.5deg); }
.foto-cornice::after {
	content: ""; position: absolute; z-index: -1; inset: 24px -20px -20px 24px;
	border-radius: var(--raggio-grande); background: var(--giallo); transform: rotate(-3deg);
}
.sezione-verde .foto-cornice::after { background: var(--arancio); }
.due-colonne-invertite > :first-child { order: 0; }

.foto-piccola { margin: 24px 0 0; display: flex; align-items: center; gap: 16px; }
.foto-piccola img { width: 110px; border-radius: 16px; border: 5px solid #fff; box-shadow: var(--ombra); transform: rotate(-4deg); }
.foto-piccola figcaption { font-weight: 700; color: var(--marrone-medio); font-size: .95rem; }

/* Lavanderia: bolle ------------------------------------------------------ */
.sezione-lavanderia-home { background: var(--azzurro-chiaro); overflow: hidden; }
.sezione-lavanderia-home .occhiello { color: #2c8aa3; }
.bolle { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bolle span {
	position: absolute; bottom: -80px; border-radius: 50%;
	border: 2px solid rgba(95, 184, 207, .55);
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.1) 45%, transparent 60%);
	animation: bolla 14s linear infinite;
}
.bolle span:nth-child(1) { left: 5%; width: 40px; height: 40px; animation-duration: 12s; }
.bolle span:nth-child(2) { left: 15%; width: 22px; height: 22px; animation-delay: -4s; }
.bolle span:nth-child(3) { left: 28%; width: 60px; height: 60px; animation-delay: -8s; animation-duration: 18s; }
.bolle span:nth-child(4) { left: 42%; width: 18px; height: 18px; animation-delay: -2s; }
.bolle span:nth-child(5) { left: 55%; width: 34px; height: 34px; animation-delay: -10s; }
.bolle span:nth-child(6) { left: 68%; width: 50px; height: 50px; animation-delay: -6s; animation-duration: 16s; }
.bolle span:nth-child(7) { left: 78%; width: 24px; height: 24px; animation-delay: -12s; }
.bolle span:nth-child(8) { left: 88%; width: 44px; height: 44px; animation-delay: -3s; }
.bolle span:nth-child(9) { left: 95%; width: 16px; height: 16px; animation-delay: -7s; }
@keyframes bolla { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(18px, -60vh); } to { transform: translate(-10px, -130vh); opacity: 0; } }

.foto-oblo {
	position: relative; aspect-ratio: 1; max-width: 440px; margin-inline: auto;
	border-radius: 50%; padding: 22px;
	background: linear-gradient(145deg, #fff, #d7e9ee);
	box-shadow: var(--ombra-forte), inset 0 0 0 10px #c3dde5;
}
.foto-oblo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: inset 0 0 20px rgba(0,0,0,.3); }
.foto-oblo::after { content: ""; position: absolute; inset: 22px; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 40%); pointer-events: none; }

.sezione-lavanderia { overflow: hidden; }
.striscione { margin-bottom: clamp(40px, 6vw, 70px); border-radius: var(--raggio-grande); overflow: hidden; box-shadow: var(--ombra-forte); border: 8px solid #fff; transform: rotate(-.8deg); }
.striscione img { width: 100%; }
.riquadro-info { list-style: none; margin: 0; padding: 30px; display: grid; gap: 18px; background: var(--azzurro-chiaro); border-radius: var(--raggio-grande); border: 2px dashed var(--azzurro); position: relative; z-index: 1; }
.riquadro-info li { display: flex; gap: 14px; align-items: flex-start; color: var(--marrone-medio); }
.riquadro-info strong { color: var(--marrone); }
.riquadro-info .icona { width: 42px; height: 42px; padding: 9px; border-radius: 50%; background: #fff; color: #2c8aa3; box-shadow: 0 3px 8px -4px rgba(0,0,0,.25); }

.servizi-doppi { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.servizio-grande { position: relative; padding: 40px; border-radius: var(--raggio-grande); overflow: hidden; }
.servizio-grande h3 { font-size: 1.6rem; }
.servizio-grande p { margin: 0; font-size: 1.05rem; max-width: 30ch; }
.servizio-grande-icona { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; background: #fff; margin-bottom: 20px; box-shadow: var(--ombra); }
.servizio-grande-icona .icona { width: 36px; height: 36px; }
.servizio-grande::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.3); }
.servizio-azzurro { background: var(--azzurro-chiaro); }
.servizio-azzurro .icona { color: #2c8aa3; }
.servizio-giallo { background: #fff1cc; }
.servizio-giallo .icona { color: var(--arancio-scuro); }

.prima-dopo { position: relative; display: block; max-width: 420px; margin-inline: auto; border-radius: var(--raggio-grande); overflow: hidden; border: 8px solid #fff; box-shadow: var(--ombra-forte); transform: rotate(-2deg); transition: transform .3s; }
.prima-dopo:hover { transform: rotate(0) scale(1.02); }
.prima-dopo-etichetta { position: absolute; top: 16px; right: 16px; display: inline-flex; gap: .4em; align-items: center; padding: .4em .9em; border-radius: 999px; background: var(--giallo); color: var(--marrone); font-family: var(--font-titoli); font-weight: 600; }
.titoletto { display: flex; gap: .5em; align-items: center; margin-top: 1.4em; font-size: 1.3rem; }
.titoletto .icona { color: var(--verde); }

/* Recensioni ------------------------------------------------------------- */
.sezione-recensioni { background: var(--crema); overflow: hidden; }
.sezione-recensioni::before {
	content: ""; position: absolute; top: 40px; left: -60px; width: 220px; height: 220px; border-radius: 50%;
	background: rgba(255, 201, 74, .25);
}
.recensioni { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px 28px; }
.recensione {
	position: relative; margin: 0 0 18px;
	padding: 30px 28px 26px;
	background: #fff; border-radius: var(--raggio-grande);
	box-shadow: var(--ombra);
	display: flex; flex-direction: column;
}
/* codina del fumetto */
.recensione::after {
	content: ""; position: absolute; left: 48px; bottom: -18px;
	width: 34px; height: 24px; background: #fff;
	clip-path: polygon(0 0, 100% 0, 18% 100%);
}
.recensione:nth-child(3n+2) { transform: translateY(18px); }
.stelle { display: flex; gap: 3px; color: var(--giallo); margin-bottom: 12px; }
.stelle .icona { fill: var(--giallo); stroke: #e0a91f; width: 20px; height: 20px; }
.recensione blockquote { margin: 0 0 20px; flex: 1; }
.recensione blockquote p { margin: 0; font-size: 1.02rem; }
.recensione blockquote p::before { content: "“"; font-family: var(--font-titoli); font-size: 2.2em; line-height: 0; vertical-align: -.35em; color: var(--arancio); margin-right: .08em; }
.recensione figcaption { display: flex; align-items: center; gap: 12px; }
.recensione figcaption strong { display: block; font-family: var(--font-titoli); font-weight: 600; color: var(--verde-notte); }
.recensione figcaption small { display: block; font-size: .87rem; color: var(--marrone-medio); }
.recensione-avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--verde-chiaro); color: var(--verde); }
.recensione:nth-child(3n+2) .recensione-avatar { background: #fde6d4; color: var(--arancio-scuro); }
.recensione:nth-child(3n+3) .recensione-avatar { background: var(--azzurro-chiaro); color: #2c8aa3; }
.recensione-avatar .icona { width: 22px; height: 22px; }

/* Invito finale ---------------------------------------------------------- */
.sezione-invito { padding-top: calc(var(--sezione) + 50px); }
.sezione-recensioni + .sezione-invito, .sezione-bianca + .sezione-invito { background: inherit; }
.invito {
	position: relative;
	padding: clamp(44px, 6vw, 70px) clamp(24px, 6vw, 80px);
	border-radius: var(--raggio-grande);
	background:
		radial-gradient(circle at 100% 0, rgba(255, 201, 74, .35), transparent 40%),
		linear-gradient(135deg, var(--verde) 0%, var(--verde-scuro) 100%);
	color: #e5f2e9; text-align: center;
	box-shadow: var(--ombra-forte);
}
.invito h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.invito p { max-width: 42em; margin: 0 auto 28px; font-size: 1.1rem; }
.invito-azioni { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.invito-cane, .invito-gatto { position: absolute; top: -92px; width: 130px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); animation: sbuca 5s ease-in-out infinite; transform-origin: 50% 100%; }
.invito-cane { left: 8%; }
.invito-gatto { right: 8%; animation-delay: -2.5s; }
.invito .invito-cane, .invito .invito-gatto { transform: none; }
@keyframes sbuca-semplice { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-5deg); } 90% { transform: rotate(4deg); } }
.invito-cane, .invito-gatto { animation-name: sbuca-semplice; }

/* Galleria e lightbox ---------------------------------------------------- */
.galleria { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.galleria-foto { position: relative; display: block; border-radius: var(--raggio); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sabbia); }
.galleria-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.galleria-foto::after {
	content: ""; position: absolute; inset: 0;
	background: rgba(28, 82, 52, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 11.5c-2.8 0-5.8 3.1-5.8 5.8 0 2 1.7 3 3.4 2.7 1-.2 1.6-.7 2.4-.7s1.4.5 2.4.7c1.7.3 3.4-.7 3.4-2.7 0-2.7-3-5.8-5.8-5.8z'/%3E%3Cellipse cx='6' cy='9.5' rx='1.9' ry='2.6'/%3E%3Cellipse cx='9.6' cy='5.6' rx='1.9' ry='2.6'/%3E%3Cellipse cx='14.4' cy='5.6' rx='1.9' ry='2.6'/%3E%3Cellipse cx='18' cy='9.5' rx='1.9' ry='2.6'/%3E%3C/svg%3E") center / 46px no-repeat;
	opacity: 0; transition: opacity .3s;
}
.galleria-foto:hover img, .galleria-foto:focus-visible img { transform: scale(1.07); }
.galleria-foto:hover::after, .galleria-foto:focus-visible::after { opacity: 1; }
.galleria-quadrata { grid-template-columns: repeat(3, 1fr); }
.galleria-quadrata .galleria-foto { aspect-ratio: 1; }
.galleria-quadrata .galleria-foto:nth-child(odd) { border-radius: var(--raggio-grande) var(--raggio) var(--raggio-grande) var(--raggio); }

.lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(20, 30, 22, .88); opacity: 0; transition: opacity .25s; }
.lightbox.visibile { opacity: 1; }
.lightbox img { max-width: min(1100px, 100%); max-height: 86vh; width: auto; border-radius: var(--raggio); border: 6px solid #fff; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.lightbox button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: var(--verde-scuro); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ombra); }
.lightbox button .icona { width: 24px; height: 24px; }
.lightbox-chiudi { top: 18px; right: 18px; }
.lightbox-prec { left: 18px; top: 50%; transform: translateY(-50%) scaleX(-1); }
.lightbox-succ { right: 18px; top: 50%; transform: translateY(-50%); }

/* Negozio: notizia e marche ---------------------------------------------- */
.due-colonne-notizia { grid-template-columns: 1.2fr .8fr; }
.volantino { display: block; max-width: 340px; margin-inline: auto; border-radius: var(--raggio); overflow: hidden; box-shadow: var(--ombra-forte); transform: rotate(3deg); transition: transform .3s; border: 8px solid #fff; }
.volantino:hover { transform: rotate(0) scale(1.03); }

.sezione-marche { background: var(--sabbia); overflow: hidden; }
.nastro { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.nastro-scorre { list-style: none; margin: 0; padding: 10px 0; display: flex; gap: 22px; width: max-content; animation: nastro 55s linear infinite; }
.nastro:hover .nastro-scorre { animation-play-state: paused; }
.nastro-scorre li { flex: none; width: 170px; height: 100px; padding: 14px 20px; background: #fff; border-radius: var(--raggio); display: grid; place-items: center; box-shadow: 0 4px 14px -8px rgba(59,42,29,.35); }
.nastro-scorre img { max-height: 70px; width: auto; object-fit: contain; filter: grayscale(.2); transition: filter .25s, transform .25s; }
.nastro-scorre li:hover img { filter: none; transform: scale(1.06); }
@keyframes nastro { to { transform: translateX(calc(-50% - 11px)); } }

/* Parafarmacia: passi ---------------------------------------------------- */
.passi { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: passo; position: relative; }
.passi::before { content: ""; position: absolute; top: 58px; left: 16%; right: 16%; border-top: 3px dashed rgba(255,255,255,.3); }
.passi li { position: relative; text-align: center; padding: 30px 24px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--raggio-grande); }
.passi li > .icona { width: 58px; height: 58px; padding: 14px; border-radius: 50%; background: var(--giallo); color: var(--marrone); position: relative; margin-bottom: 14px; }
.passo-numero { position: absolute; top: 18px; left: 50%; margin-left: 18px; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--arancio); color: #fff; font-family: var(--font-titoli); font-weight: 700; box-shadow: 0 0 0 4px var(--verde-scuro); }
.passi p { margin: 0; color: #d6e7dc; }

/* Toelettatura ------------------------------------------------------------ */
.lista-servizi { padding: 34px; border-radius: var(--raggio-grande); background: var(--crema); border: 2px solid var(--sabbia-scura); position: relative; }
.lista-servizi::before { content: ""; position: absolute; top: -18px; right: 30px; width: 70px; height: 36px; background: var(--giallo); border-radius: 6px; transform: rotate(6deg); opacity: .85; }
.lista-servizi h3 { font-size: 1.5rem; }
.lista-servizi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.lista-servizi li { display: flex; gap: 14px; align-items: flex-start; color: var(--marrone-medio); }
.lista-servizi strong { color: var(--marrone); }
.lista-servizi-icona { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--verde); box-shadow: 0 3px 10px -6px rgba(0,0,0,.35); }
.lista-servizi-icona .icona { width: 22px; height: 22px; }

.schede-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: 40px; }
.scheda-foto { position: relative; margin: 0; border-radius: var(--raggio-grande); overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--ombra); }
.scheda-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.scheda-foto:hover img { transform: scale(1.06); }
.scheda-foto figcaption { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(255,255,255,.94); border-radius: 999px; font-family: var(--font-titoli); font-weight: 600; font-size: 1.15rem; color: var(--verde-notte); }
.scheda-foto figcaption span { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--arancio); color: #fff; }

.squadra { display: flex; justify-content: center; gap: clamp(28px, 6vw, 70px); flex-wrap: wrap; }
.tesserino {
	position: relative; margin: 0; width: 280px;
	padding: 40px 20px 24px; background: #fff; color: var(--marrone);
	border-radius: 140px 140px 30px 30px; text-align: center;
	box-shadow: var(--ombra-forte);
	transform: rotate(-3deg); transition: transform .35s cubic-bezier(.3, 1.5, .5, 1);
}
.tesserino-2 { transform: rotate(3deg); }
.tesserino:hover { transform: rotate(0) translateY(-6px); }
.tesserino-foro { position: absolute; top: 14px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--verde-scuro); box-shadow: inset 0 2px 3px rgba(0,0,0,.4); }
.tesserino img { width: 200px; height: 200px; margin: 0 auto 16px; border-radius: 50%; object-fit: cover; border: 6px solid var(--giallo); }
.tesserino figcaption strong { display: block; font-family: var(--font-titoli); font-weight: 600; font-size: 1.4rem; color: var(--verde-notte); }
.tesserino figcaption span { color: var(--arancio-scuro); font-weight: 700; }

/* Contatti --------------------------------------------------------------- */
.recapiti { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.recapito {
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	padding: 26px; border-radius: var(--raggio-grande);
	background: var(--crema); border: 2px solid var(--sabbia-scura);
	color: var(--marrone); text-decoration: none;
	transition: transform .25s, border-color .25s, box-shadow .25s;
}
.recapito:hover { transform: translateY(-5px); border-color: var(--verde); box-shadow: var(--ombra); color: var(--marrone); }
.recapito-icona { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--verde); color: #fff; margin-bottom: 10px; transform: rotate(-6deg); }
.recapito-email .recapito-icona { background: var(--arancio); }
.recapito-indirizzo .recapito-icona { background: var(--rosso); }
.recapito-facebook .recapito-icona { background: #3b5998; }
.recapito.recapito-cellulare .recapito-icona { background: var(--verde-scuro); }
.recapito.recapito-whatsapp .recapito-icona { background: var(--whatsapp); }
.recapito.recapito-whatsapp:hover { border-color: var(--whatsapp); }
.recapito-icona .icona { width: 24px; height: 24px; }
.recapito-etichetta { font-size: .85rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--marrone-medio); }
.recapito strong { font-family: var(--font-titoli); font-weight: 600; font-size: 1.1rem; overflow-wrap: anywhere; }

.modulo-scheda { position: relative; padding: clamp(28px, 4vw, 44px); padding-top: 60px; background: #fff; border-radius: var(--raggio-grande); box-shadow: var(--ombra-forte); margin-top: 60px; }
.modulo-cane { position: absolute; top: -88px; right: 30px; width: 120px; animation: sbuca-semplice 5s ease-in-out infinite; transform-origin: 50% 100%; }
.modulo { display: grid; gap: 16px; margin-top: 10px; }
.modulo-riga { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { margin: 0; display: grid; gap: 6px; }
.campo label { font-weight: 800; font-size: .95rem; }
.campo label span { color: var(--rosso); }
.campo input, .campo select, .campo textarea {
	width: 100%; padding: .8em 1em;
	font: inherit; color: inherit;
	background: var(--crema); border: 2px solid var(--sabbia-scura); border-radius: 16px;
	transition: border-color .2s, background .2s;
}
.campo textarea { resize: vertical; min-height: 130px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--verde); background: #fff; box-shadow: 0 0 0 4px var(--verde-chiaro); }
.campo-spunta { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: .92rem; color: var(--marrone-medio); }
.campo-spunta input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--verde); flex: none; }
.modulo .bottone { justify-self: start; }

.avviso { display: flex; gap: 10px; align-items: flex-start; padding: 14px 18px; border-radius: 16px; font-weight: 700; }
.avviso .icona { width: 24px; height: 24px; flex: none; }
.avviso-ok { background: var(--verde-chiaro); color: var(--verde-scuro); }
.avviso-errore { background: #fbdcdb; color: #9c2520; }

.colonna-mappa { display: grid; gap: 20px; margin-top: 60px; }
.colonna-mappa > .bottone { justify-self: start; }
.mappa { position: relative; aspect-ratio: 1 / 1; border-radius: var(--raggio-grande); overflow: hidden; border: 8px solid #fff; box-shadow: var(--ombra-forte); background: var(--verde-chiaro); }
.mappa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mappa-copertina {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 28px; text-align: center;
	background:
		repeating-linear-gradient(35deg, transparent 0 38px, rgba(46,125,79,.08) 38px 42px),
		repeating-linear-gradient(-55deg, transparent 0 60px, rgba(46,125,79,.08) 60px 66px),
		var(--verde-chiaro);
}
.mappa-copertina > .icona { width: 64px; height: 64px; padding: 14px; border-radius: 50%; background: var(--rosso); color: #fff; box-shadow: var(--ombra); animation: fluttua 4s ease-in-out infinite; }
.mappa-copertina p { margin: 0; color: var(--marrone-medio); }
.mappa-copertina p strong { display: block; font-family: var(--font-titoli); font-weight: 600; font-size: 1.3rem; color: var(--verde-notte); }
.mappa-copertina small { max-width: 30ch; color: var(--marrone-medio); font-size: .8rem; }

.orari { padding: 24px 28px; background: #fff; border-radius: var(--raggio-grande); box-shadow: var(--ombra); }
.orari h3 { display: flex; gap: .5em; align-items: center; font-size: 1.2rem; }
.orari ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

/* Testo articoli e privacy ---------------------------------------------- */
.testo-articolo { font-size: 1.05rem; }
.testo-articolo h2 { font-size: 1.6rem; margin-top: 1.8em; padding-top: .6em; border-top: 2px dashed var(--sabbia-scura); }
.testo-articolo h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.testo-articolo h3 { font-size: 1.2rem; margin-top: 1.5em; }
.testo-articolo ul { padding-left: 0; list-style: none; }
.testo-articolo ul li { position: relative; padding-left: 28px; margin-bottom: .5em; }
.testo-articolo ul li::before { content: ""; position: absolute; left: 0; top: .45em; width: 14px; height: 14px; border-radius: 50%; background: var(--verde-chiaro); border: 3px solid var(--verde); }
.testo-articolo img { border-radius: var(--raggio); }
/* Tabelle nei testi (l'elenco dei cookie): leggibili anche su telefono, dove
   scorrono di lato invece di schiacciare le colonne. */
.testo-articolo .tabella-scorrevole { overflow-x: auto; margin: 1.4em 0; }
.testo-articolo table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 460px; }
.testo-articolo th, .testo-articolo td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--sabbia-scura); }
.testo-articolo th { font-family: var(--font-titoli); font-weight: 600; color: var(--verde-notte); background: var(--crema); border-bottom-width: 2px; }
.testo-articolo tbody tr:nth-child(even) { background: rgba(255, 248, 236, .6); }
.testo-articolo td code { font-size: .88em; word-break: break-word; }
.articolo-copertina { margin: 0 0 30px; }

.notizie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.notizia { background: var(--crema); border-radius: var(--raggio-grande); overflow: hidden; border: 2px solid var(--sabbia-scura); }
.notizia-foto { display: block; aspect-ratio: 4 / 3; background: var(--sabbia); }
.notizia-foto img { width: 100%; height: 100%; object-fit: cover; }
.notizia-segnaposto { display: grid; place-items: center; height: 100%; color: var(--verde); opacity: .35; }
.notizia-segnaposto .icona { width: 70px; height: 70px; }
.notizia-testo { padding: 22px 24px 26px; }
.notizia-testo time { font-size: .85rem; font-weight: 800; color: var(--arancio-scuro); text-transform: uppercase; letter-spacing: .06em; }
.notizia-testo h2 { font-size: 1.35rem; margin: .3em 0 .4em; }
.notizia-testo h2 a { color: inherit; text-decoration: none; }
.nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.nav-links .page-numbers { padding: .5em 1em; border-radius: 999px; background: var(--sabbia); text-decoration: none; font-weight: 800; }
.nav-links .current { background: var(--verde); color: #fff; }

/* News --------------------------------------------------------------------- */
.sezione-news { padding-top: calc(var(--sezione) * .6); }
.sezione-news + .sezione-bianca { padding-top: 0; }
.notizie-1 { grid-template-columns: minmax(0, 720px); justify-content: center; }
.notizie-1 .notizia { display: grid; grid-template-columns: 1fr 1.2fr; }
.notizie-1 .notizia-foto { aspect-ratio: auto; min-height: 100%; }
.notizie-2 { grid-template-columns: repeat(2, 1fr); }
.notizia { display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.notizia:hover { transform: translateY(-4px); box-shadow: var(--ombra); }
.notizia-testo { display: flex; flex-direction: column; flex: 1; }
.notizia-testo h3 { font-size: 1.35rem; margin: .1em 0 .4em; }
.notizia-testo h3 a { color: inherit; text-decoration: none; }
.notizia-testo h3 a:hover { color: var(--verde); }
.notizia-testo > p:not(.notizia-periodo) { color: var(--marrone-medio); font-size: .98rem; }
.notizia-periodo { display: flex; flex-wrap: wrap; align-items: center; gap: .45em; margin: 0 0 .4em; font-size: .85rem; font-weight: 800; color: var(--arancio-scuro); text-transform: uppercase; letter-spacing: .04em; }
.notizia-stato { padding: .15em .7em; border-radius: 999px; background: var(--sabbia); color: var(--marrone-medio); letter-spacing: 0; }
.notizia-conclusa { opacity: .7; }
.notizia-conclusa .notizia-foto img { filter: grayscale(.6); }
.notizia-leggi { margin-top: auto; display: inline-flex; align-items: center; gap: .4em; font-family: var(--font-titoli); font-weight: 600; text-decoration: none; }
.notizia-leggi .icona { transition: transform .2s; }
.notizia:hover .notizia-leggi .icona { transform: translateX(4px); }
.articolo-azioni { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2em; }
.testata-semplice .avviso { display: inline-flex; margin-top: .5em; }

.finestra-news { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(20, 30, 22, .6); opacity: 0; transition: opacity .3s; }
.finestra-news[hidden] { display: none; }
.finestra-news.visibile { opacity: 1; }
.finestra-news-scheda {
	position: relative; width: min(760px, 100%); max-height: calc(100vh - 40px); overflow: auto;
	display: grid; grid-template-columns: 1fr 1.15fr;
	background: var(--crema); border-radius: var(--raggio-grande); box-shadow: 0 30px 70px rgba(0,0,0,.35);
	transform: translateY(20px) scale(.97); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
}
.finestra-news.visibile .finestra-news-scheda { transform: none; }
.finestra-news-scheda:not(:has(.finestra-news-foto)) { grid-template-columns: 1fr; }
.finestra-news-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--raggio-grande) 0 0 var(--raggio-grande); }
.finestra-news-testo { padding: 40px 34px 34px; }
.finestra-news-testo h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.finestra-news-testo > p:not(.occhiello) { color: var(--marrone-medio); }
.finestra-news-azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.finestra-news-chiudi { position: absolute; top: 12px; right: 12px; z-index: 1; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--verde-scuro); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ombra); }
.finestra-news-chiudi .icona { width: 22px; height: 22px; }
.finestra-aperta { overflow: hidden; }

.passi-1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.passi-2 { grid-template-columns: repeat(2, 1fr); }
.passi-4 { grid-template-columns: repeat(4, 1fr); }

/* Piè di pagina ---------------------------------------------------------- */
.piede { position: relative; margin-top: 80px; color: #cfe3d5; }
.piede-prato { position: relative; height: 60px; color: var(--verde-notte); }
.piede-erba { position: absolute; left: 0; bottom: -1px; width: 100%; height: 60px; }
.piede-coniglio, .piede-gatto { position: absolute; bottom: 14px; color: var(--verde-notte); }
.piede-coniglio { left: 12%; width: 54px; animation: saltello 4s ease-in-out infinite; }
.piede-gatto { right: 14%; width: 58px; }
@keyframes saltello { 0%, 80%, 100% { transform: translateY(0); } 86% { transform: translateY(-14px); } 92% { transform: translateY(0); } }
.piede-corpo { background: var(--verde-notte); padding: 50px 0 24px; }
.piede-griglia { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 36px; }
.piede-marchio > img { width: 260px; border-radius: 12px; margin-bottom: 18px; }
.piede-marchio > p { font-size: .95rem; }
.piede h2 { font-size: 1.1rem; margin-bottom: 14px; }
.piede h2 a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: .5em; }
.piede h2 a:hover { color: var(--giallo); }
.piede h2 .icona { color: var(--giallo); }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.piede a { color: #cfe3d5; text-decoration: none; }
.piede a:hover { color: var(--giallo); }
.piede .bottone, .piede .bottone:hover { color: var(--testo-b); }
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
.piede-contatti { margin-bottom: 22px !important; }
.piede-contatti li { display: flex; gap: 10px; align-items: flex-start; }
.piede-contatti .icona { color: var(--giallo); margin-top: 3px; }
.piede-fondo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: .9rem; }
.piede-fondo p { margin: 0; }
.piede-fondo ul { display: flex; gap: 20px; }
.piede-fondo a { display: inline-flex; gap: .4em; align-items: center; }

/* Briciole di pane -------------------------------------------------------- */
/* Sotto il menu dicono dove si è; Google le legge e le mostra sopra il titolo
   del risultato al posto dell'indirizzo. */
.briciole { margin: 0 0 14px; font-size: .88rem; }
.briciole ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.briciole li { display: flex; align-items: center; gap: 6px; color: var(--marrone-medio); }
.briciole li + li::before { content: "›"; color: var(--sabbia-scura); font-weight: 700; }
.briciole a { color: var(--verde); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.briciole a:hover { border-bottom-color: currentColor; }
.briciole [aria-current] { font-weight: 600; }
.testata-semplice .briciole { justify-content: center; }
.testata-semplice .briciole ol { justify-content: center; }

/* Domande frequenti -------------------------------------------------------- */
.sezione-faq .titolo-sezione { margin-bottom: 26px; }
.domande { display: grid; gap: 12px; }
.domanda {
	background: var(--bianco); border: 2px solid var(--sabbia-scura); border-radius: 18px;
	overflow: hidden; transition: border-color .2s, box-shadow .2s;
}
.domanda[open] { border-color: var(--verde); box-shadow: var(--ombra); }
.domanda summary {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 16px 20px; cursor: pointer; list-style: none;
	font-family: var(--font-titoli); font-weight: 600; font-size: 1.05rem; color: var(--verde-notte);
}
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary:hover { background: var(--crema); }
.domanda-freccia { flex: none; width: 22px; height: 22px; color: var(--verde); transform: rotate(90deg); transition: transform .25s; }
.domanda[open] .domanda-freccia { transform: rotate(-90deg); }
.domanda-risposta { padding: 0 20px 18px; color: var(--marrone-medio); }
.domanda-risposta p { margin: 0 0 .6em; }
.domanda-risposta p:last-child { margin-bottom: 0; }

/* Banner dei cookie ------------------------------------------------------ */
/* Sta in un angolo, non copre la pagina: si può leggere il sito anche senza
   rispondere, come chiede il Garante. «Accetta» e «Rifiuta» hanno la stessa
   dimensione e lo stesso peso, nessuno dei due è nascosto o sbiadito. */
.banner-cookie {
	position: fixed; z-index: 70;
	left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom));
	width: min(440px, calc(100vw - 28px));
	background: var(--crema);
	border: 3px solid var(--verde);
	border-radius: 26px;
	box-shadow: 0 18px 40px -14px rgba(20, 61, 39, .55);
	opacity: 0; transform: translateY(20px) scale(.97);
	transition: opacity .35s ease, transform .4s cubic-bezier(.2, .9, .3, 1);
}
.banner-cookie.visibile { opacity: 1; transform: none; }
/* Dentro al banner "hidden" deve vincere: le regole qui sotto danno un display
   esplicito a pannello e pulsanti, e senza questa riga resterebbero visibili. */
.banner-cookie [hidden] { display: none !important; }
.banner-cookie-corpo { position: relative; padding: 22px 22px 18px; max-height: min(78vh, 640px); overflow-y: auto; }
.banner-cookie h2 {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 10px; padding-right: 30px;
	font-size: 1.15rem; color: var(--verde-notte);
}
.banner-cookie h2 .icona { width: 26px; height: 26px; flex: none; color: var(--arancio); }
.banner-cookie h2:focus-visible { outline: 3px solid var(--arancio); outline-offset: 5px; border-radius: 10px; }
.banner-cookie-testo { margin: 0 0 12px; font-size: .95rem; line-height: 1.55; color: var(--marrone-medio); }
.banner-cookie-link { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 14px; font-size: .9rem; font-weight: 700; }
.banner-cookie-link a { color: var(--verde); text-decoration: underline; }
.banner-cookie-link a:hover { color: var(--verde-scuro); }
.banner-cookie-chiudi {
	position: absolute; top: 12px; right: 12px;
	width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
	display: grid; place-items: center;
	background: transparent; color: var(--marrone-medio); cursor: pointer;
	transition: background .2s, color .2s;
}
.banner-cookie-chiudi:hover { background: var(--sabbia); color: var(--verde-notte); }
.banner-cookie-scelte { display: grid; gap: 14px; margin: 0 0 16px; padding-top: 14px; border-top: 2px dashed var(--sabbia-scura); }
.banner-cookie-voce label {
	display: flex; align-items: center; gap: 10px; cursor: pointer;
	font-family: var(--font-titoli); font-weight: 600; color: var(--verde-notte);
}
.banner-cookie-voce input { width: 20px; height: 20px; flex: none; accent-color: var(--verde); cursor: pointer; }
.banner-cookie-voce input:disabled { cursor: default; opacity: .7; }
.banner-cookie-voce p { margin: 5px 0 0 30px; font-size: .88rem; line-height: 1.45; color: var(--marrone-medio); }
.banner-cookie-azioni { display: flex; flex-wrap: wrap; gap: 10px; }
.banner-cookie-azioni .bottone { flex: 1 1 140px; justify-content: center; padding: 11px 16px; font-size: .95rem; }
.banner-cookie-altro {
	flex: 1 1 100%; padding: 6px 2px 0; border: 0; background: none; cursor: pointer;
	font: inherit; font-size: .9rem; font-weight: 700; color: var(--verde); text-decoration: underline;
}
.banner-cookie-altro:hover { color: var(--verde-scuro); }
/* Il link del piè di pagina che riapre il banner: è un pulsante, ma deve
   sembrare uguale agli altri link lì accanto. */
.link-preferenze-cookie {
	padding: 0; border: 0; background: none; cursor: pointer;
	font: inherit; color: inherit; text-decoration: underline;
}
@media (max-width: 520px) {
	.banner-cookie { left: 10px; right: 10px; width: auto; bottom: max(10px, env(safe-area-inset-bottom)); }
	.banner-cookie-corpo { padding: 18px 16px 16px; }
	.banner-cookie-azioni .bottone { flex: 1 1 100%; }
}

/* WhatsApp -------------------------------------------------------------- */
:root { --whatsapp: #25d366; --whatsapp-scuro: #128c4b; }
.barra-whatsapp .icona { color: var(--whatsapp); }
/* La cornetta dentro il fumetto prende il colore dello sfondo: bianca sul verde, verde sul bianco. */
.icona-whatsapp-pieno path + path { fill: var(--wa-interno, #fff); }
.bottone-whatsapp, .whatsapp-fisso, .recapito-whatsapp .recapito-icona { --wa-interno: var(--whatsapp); }
.bottone-whatsapp:hover, .whatsapp-fisso:hover { --wa-interno: var(--whatsapp-scuro); }
.bottone-whatsapp { --sfondo-b: var(--whatsapp); --testo-b: #fff; }
.bottone-whatsapp:hover { --sfondo-b: var(--whatsapp-scuro); }
.piede-contatti .icona-whatsapp-pieno { color: var(--whatsapp); }

.whatsapp-fisso {
	position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 46;
	display: flex; align-items: center; gap: 8px;
	height: 58px; padding: 0 18px 0 14px; border-radius: 999px;
	background: var(--whatsapp); color: #fff; text-decoration: none;
	font-family: var(--font-titoli); font-weight: 600; font-size: 1.05rem;
	box-shadow: 0 0 0 3px #fff, 0 10px 24px -8px rgba(18, 140, 75, .7);
	animation: whatsapp-arriva .6s 1.2s both cubic-bezier(.3, 1.5, .5, 1);
	transition: background .2s, transform .2s;
}
.whatsapp-fisso:hover, .whatsapp-fisso:focus-visible { background: var(--whatsapp-scuro); color: #fff; transform: translateY(-3px); }
.whatsapp-fisso .icona { width: 30px; height: 30px; }
@keyframes whatsapp-arriva { from { opacity: 0; transform: translateY(24px) scale(.7); } to { opacity: 1; transform: none; } }
.menu-aperto .whatsapp-fisso, .finestra-aperta .whatsapp-fisso { opacity: 0; pointer-events: none; }
.con-whatsapp .torna-su { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 74px); }
@media (max-width: 640px) {
	.whatsapp-fisso { width: 56px; height: 56px; padding: 0; justify-content: center; }
	.whatsapp-fisso-testo { display: none; }
	.con-whatsapp .torna-su { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 70px); }
}

/* Pulsante «torna su» -------------------------------------------------- */
.torna-su {
	--avanzamento: 0;
	position: fixed; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 45;
	width: 58px; height: 58px; padding: 0; border: 0; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--verde); color: #fff; cursor: pointer;
	/* Il bordo bianco lo stacca anche dalle fasce verdi della pagina. */
	box-shadow: 0 0 0 3px #fff, 0 10px 24px -8px rgba(20, 61, 39, .7);
	opacity: 0; transform: translateY(18px) scale(.8); pointer-events: none;
	transition: opacity .3s, transform .35s cubic-bezier(.3, 1.5, .5, 1), background .2s;
}
.torna-su.visibile { opacity: 1; transform: none; pointer-events: auto; }
.torna-su:hover { background: var(--verde-scuro); }
.torna-su-anello { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.torna-su-anello circle {
	fill: none; stroke: var(--giallo); stroke-width: 3.5; stroke-linecap: round;
	stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--avanzamento) * 100);
}
.torna-su-freccia { width: 24px; height: 24px; stroke-width: 2.6; transition: transform .25s; }
/* La zampetta spunta sopra il pulsante e saluta. */
.torna-su-zampa {
	position: absolute; top: -12px; right: -6px; width: 26px; height: 26px;
	color: var(--arancio); transform: rotate(20deg) scale(0); transform-origin: 50% 100%;
	transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.torna-su:hover .torna-su-freccia, .torna-su:focus-visible .torna-su-freccia { transform: translateY(-3px); }
.torna-su:hover .torna-su-zampa, .torna-su:focus-visible .torna-su-zampa { transform: rotate(20deg) scale(1); animation: zampetta .6s .15s ease; }
.menu-aperto .torna-su, .finestra-aperta .torna-su { opacity: 0; pointer-events: none; }
@media (max-width: 640px) {
	.torna-su { width: 50px; height: 50px; }
}

/* Comparsa allo scorrimento ---------------------------------------------- */
.js .appare { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .3, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.js .appare.visto { opacity: 1; transform: none; }
.js .recensione.appare.visto:nth-child(3n+2) { transform: translateY(18px); }

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
	.medagliette-4 { grid-template-columns: repeat(2, 1fr); }
	.piede-griglia { grid-template-columns: repeat(3, 1fr); }
	.piede-marchio { grid-column: 1 / -1; }
	.recapiti { grid-template-columns: repeat(2, 1fr); }
	.galleria { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1120px) {
	.menu-apri { display: inline-flex; }
	.navigazione {
		position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); z-index: 60;
		flex-direction: column; align-items: stretch; gap: 20px;
		padding: 100px 24px 30px;
		background: var(--crema); box-shadow: -20px 0 50px -20px rgba(0,0,0,.4);
		transform: translateX(105%); visibility: hidden;
		transition: transform .35s cubic-bezier(.3, 1, .4, 1), visibility 0s .35s;
		overflow-y: auto;
	}
	.menu-aperto .testa { z-index: 60; }
	.menu-aperto .navigazione { transform: none; visibility: visible; transition-delay: 0s; }
	.menu-aperto::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(20, 30, 22, .45); }
	.menu-apri { position: relative; z-index: 70; }
	.navigazione .menu { flex-direction: column; gap: 4px; }
	.navigazione .menu a { font-size: 1.3rem; padding: .6em 1em; }
	.navigazione .menu a::after { left: auto; right: 16px; top: 50%; bottom: auto; margin: -8px 0 0; }
	.navigazione-cta { justify-content: center; }

}

@media (max-width: 960px) {
	.eroe-griglia, .testata-griglia, .due-colonne, .due-colonne-notizia { grid-template-columns: 1fr; }
	.eroe-foto { max-width: 520px; margin-inline: auto; width: 100%; }
	.testata-foto { max-width: 440px; margin-inline: auto; width: 100%; }
	.due-colonne-invertite > :last-child { order: -1; }
	.collage { min-height: 420px; max-width: 560px; }
	.medagliette { grid-template-columns: 1fr 1fr; }
	.passi { grid-template-columns: 1fr; }
	.passi::before { display: none; }
	.schede-foto { grid-template-columns: 1fr 1fr; }
	.notizie { grid-template-columns: 1fr 1fr; }
	.passi-2, .passi-4 { grid-template-columns: 1fr; }
	.fluttua-pesce, .fluttua-osso { display: none; }
	.colonna-mappa { margin-top: 0; }
}

@media (max-width: 640px) {
	body { font-size: 1rem; }
	.barra-alta-motto, .solo-largo { display: none; }
	.barra-alta-interno { justify-content: center; }
	.testa-interno { min-height: 70px; }
	.logo img { height: 40px; }
	.medagliette, .medagliette-4, .schede-mini, .servizi-doppi, .schede-foto, .notizie, .modulo-riga, .recapiti { grid-template-columns: 1fr; }
	.notizie-2, .notizie-1 .notizia, .finestra-news-scheda { grid-template-columns: 1fr; }
	.notizie-1 .notizia-foto { aspect-ratio: 4 / 3; }
	.finestra-news-foto img { border-radius: var(--raggio-grande) var(--raggio-grande) 0 0; max-height: 220px; }
	.finestra-news-testo { padding: 26px 22px 24px; }
	.galleria, .galleria-quadrata { grid-template-columns: 1fr 1fr; gap: 10px; }
	.collage { min-height: 340px; }
	.adesivo { width: 96px; height: 96px; font-size: 1.35rem; }
	.recensione:nth-child(3n+2), .js .recensione.appare.visto:nth-child(3n+2) { transform: none; }
	.invito-cane, .invito-gatto { width: 96px; top: -68px; }
	.invito-cane { left: 4%; }
	.invito-gatto { right: 4%; }
	.etichetta-foto { left: 0; bottom: 10px; }
	.piede-griglia { grid-template-columns: 1fr 1fr; }
	.piede-marchio > img { width: 220px; }
	.eroe-azioni .bottone, .invito-azioni .bottone { flex: 1 1 auto; justify-content: center; }
	.lista-servizi, .riquadro-info { padding: 24px 20px; }
	.servizio-grande { padding: 30px 24px; }
	.animale-sbuca-piccolo { width: 90px; top: -60px; }
	.modulo-cane { width: 96px; top: -70px; }
	.impronte span { width: 26px; height: 26px; }
	.fluttua-uccello { display: none; }
	.occhiello { font-size: .82rem; letter-spacing: .05em; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.js .appare { opacity: 1; transform: none; }
}