/* =============================================================================
   Pico Mosaici - pagina dell'informativa privacy (/privacy.html)   Fase 6d, 29/10/2026
   Pagina sobria, condivisa da Kit e Maestro: fondo crema, titoli in Abril Fatface
   color vino (il colore comune ai due siti), una fila di tessere nei colori dei Kit.
   Nessuna libreria, nessuno script. Caratteri da pico-fonts.css.
   ============================================================================= */

:root {
	--pv-fondo: #f7f3ec;
	--pv-foglio: #fffdf9;
	--pv-testo: #2e2724;
	--pv-tenue: #6b605a;
	--pv-vino: #351915;
	--pv-giallo: #ffc300;
	--pv-verde: #41b681;
	--pv-arancio: #ff3c00;
	--pv-oro: #b78c00;
	--pv-link: #8a5a00;
	--pv-bordo: rgba(53, 25, 21, 0.12);
	color-scheme: light;
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--pv-fondo);
	color: var(--pv-testo);
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.7;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--pv-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--pv-vino);
	text-decoration-thickness: 2px;
}

a:focus-visible {
	outline: 3px solid var(--pv-giallo);
	outline-offset: 3px;
	border-radius: 3px;
}

/* --- "Vai al testo" per chi usa la tastiera ------------------------------- */
.pv-salta {
	position: absolute;
	left: 16px;
	top: -60px;
	padding: 8px 14px;
	background: var(--pv-vino);
	color: #fff;
	border-radius: 6px;
	z-index: 10;
}

.pv-salta:focus {
	top: 12px;
	color: #fff;
}

/* --- Testata ---------------------------------------------------------------- */
.pv-testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	max-width: 52rem;
	margin: 0 auto;
	padding: 20px 16px 14px;
}

.pv-marchio {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--pv-vino);
	text-decoration: none;
	font-family: "Abril Fatface", Georgia, serif;
	font-size: 1.35rem;
	line-height: 1;
}

.pv-marchio:hover {
	color: var(--pv-vino);
}

.pv-marchio img {
	width: 52px;
	height: auto;
}

.pv-nav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.pv-nav a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid var(--pv-bordo);
	border-radius: 999px;
	color: var(--pv-vino);
	text-decoration: none;
	font-size: 0.9rem;
	line-height: 1.4;
	background: var(--pv-foglio);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pv-nav a:hover {
	background: var(--pv-giallo);
	border-color: var(--pv-giallo);
	color: var(--pv-vino);
}

/* --- Fila di tessere (solo decorazione) -------------------------------------- */
.pv-tessere {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 6px 16px 22px;
}

.pv-tessere span {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--pv-giallo);
	transform: rotate(-4deg);
}

.pv-tessere span:nth-child(4n + 2) {
	background: var(--pv-verde);
	transform: rotate(5deg);
}

.pv-tessere span:nth-child(4n + 3) {
	background: var(--pv-arancio);
	transform: rotate(-2deg);
}

.pv-tessere span:nth-child(4n + 4) {
	background: var(--pv-oro);
	transform: rotate(3deg);
}

/* --- Foglio con il testo ------------------------------------------------------ */
.pv-foglio {
	max-width: 52rem;
	margin: 0 auto;
	padding: 36px 20px 40px;
	background: var(--pv-foglio);
	border: 1px solid var(--pv-bordo);
	border-radius: 14px;
	box-shadow: 0 18px 50px rgba(53, 25, 21, 0.07);
}

@media (min-width: 640px) {
	.pv-foglio {
		padding: 52px 56px 48px;
	}
}

@media (max-width: 52rem) {
	.pv-foglio {
		margin: 0 16px;
	}
}

.pv-occhiello {
	margin: 0 0 6px;
	color: var(--pv-oro);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

h1 {
	margin: 0;
	color: var(--pv-vino);
	font-family: "Abril Fatface", Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
	line-height: 1.15;
}

.pv-norma {
	margin: 10px 0 28px;
	color: var(--pv-tenue);
	font-size: 0.92rem;
}

.pv-breve {
	margin: 0 0 36px;
	padding: 16px 20px;
	background: #f3f9f5;
	border-left: 5px solid var(--pv-verde);
	border-radius: 0 10px 10px 0;
}

section {
	margin-top: 34px;
}

h2 {
	position: relative;
	margin: 0 0 12px;
	padding-left: 26px;
	color: var(--pv-vino);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.4;
}

/* Ogni titolo ha la sua tessera, a rotazione nei colori dei Kit */
h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 13px;
	height: 13px;
	border-radius: 3px;
	background: var(--pv-giallo);
	transform: rotate(-6deg);
}

section:nth-of-type(4n + 2) h2::before {
	background: var(--pv-verde);
	transform: rotate(5deg);
}

section:nth-of-type(4n + 3) h2::before {
	background: var(--pv-arancio);
}

section:nth-of-type(4n + 4) h2::before {
	background: var(--pv-oro);
	transform: rotate(4deg);
}

h3 {
	margin: 20px 0 6px;
	color: var(--pv-testo);
	font-size: 1rem;
	font-weight: 700;
}

p {
	margin: 0 0 12px;
}

ul {
	margin: 0 0 12px;
	padding-left: 1.2em;
}

li {
	margin-bottom: 6px;
}

li::marker {
	color: var(--pv-oro);
}

strong {
	font-weight: 700;
}

.pv-data {
	margin: 40px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--pv-bordo);
	color: var(--pv-tenue);
	font-size: 0.9rem;
}

/* --- Piede ---------------------------------------------------------------------- */
.pv-piede {
	max-width: 52rem;
	margin: 0 auto;
	padding: 28px 16px 40px;
	text-align: center;
	color: var(--pv-tenue);
	font-size: 0.85rem;
}

.pv-piede p {
	margin: 0 0 6px;
}

.pv-piede span {
	margin: 0 8px;
}

/* --- Movimento ridotto e stampa ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.pv-nav a {
		transition: none;
	}
}

@media print {
	body {
		background: #fff;
	}
	.pv-nav,
	.pv-tessere,
	.pv-salta {
		display: none;
	}
	.pv-foglio {
		border: 0;
		box-shadow: none;
		padding: 0;
		margin: 0;
	}
	a {
		color: inherit;
	}
}