/* =========================================================
   Ristorante All'Amo — landing, thank you page e cookie policy
   Stesso sistema della home (assets/css/style.css):
   verde-acqua (il giorno, il Pranzo) / notte (la sera, la Cena).
   Arancio = la luce della lampada in tavola: solo su fondi scuri o come segno grafico.
   Font unico: DK Lemon Yellow Sun (tutto maiuscolo, solo Regular).
   Se cambia un colore o una misura in style.css, va cambiato anche qui.
   ========================================================= */

@font-face {
	font-family: "DK Lemon Yellow Sun";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/fontsito.woff2") format("woff2");
}

:root {
	/* colori del sito */
	--teal: #2997AA;
	--teal-deep: #1c6e7d;
	--orange: #F5895A;
	--night: #181823;
	--night-2: #0F172A;
	--aqua: #CAE6E8;
	--white: #FFFFFF;
	--ink: #181823;
	--ink-soft: #454F5E;
	--line: rgba(24, 24, 35, .14);
	--line-light: rgba(255, 255, 255, .28);

	--font: "DK Lemon Yellow Sun", "Arial Narrow", "Roboto Condensed", sans-serif;
	/* solo per i testi lunghi della cookie policy, dove il maiuscolo stanca */
	--font-testo: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* scala tipografica della home (il font è condensato e tutto maiuscolo: corpi generosi) */
	--step--1: clamp(1.02rem, .98rem + .2vw, 1.12rem);
	--step-0: clamp(1.22rem, 1.14rem + .4vw, 1.4rem);
	--step-1: clamp(1.45rem, 1.3rem + .75vw, 1.85rem);
	--step-2: clamp(2rem, 1.62rem + 1.9vw, 3.1rem);
	--step-3: clamp(2.6rem, 1.9rem + 3.4vw, 4.9rem);
	--step-4: clamp(3rem, 1.7rem + 5.6vw, 7.2rem);

	--contenitore: 1280px;
	--margine: clamp(20px, 4.5vw, 56px);
	--sezione: clamp(88px, 11vw, 176px);
	--testata: 76px;
	--raggio: 4px;
	--esce: cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 1024px) {
	:root {
		--testata: 92px;
	}
}

/* ---------------------------------------------------------- base */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	font-synthesis: none;
	scroll-behavior: smooth;
	scroll-padding-top: var(--testata);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--step-0);
	line-height: 1.42;
	letter-spacing: .015em;
	color: var(--ink);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	font-family: var(--font);
	font-weight: 400;
	line-height: 1;
	letter-spacing: .005em;
	margin: 0;
	text-wrap: balance;
}

h2 {
	font-size: var(--step-3);
	line-height: .96;
	color: var(--teal-deep);
}

h3 {
	font-size: var(--step-1);
	line-height: 1.12;
}

p,
ul,
ol,
dl,
address,
figure {
	margin: 0;
}

p {
	text-wrap: pretty;
}

address {
	font-style: normal;
}

img,
picture {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

[tabindex="-1"]:focus {
	outline: none;
}

[hidden] {
	display: none !important;
}

.sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.salta {
	position: fixed;
	left: 12px;
	top: -100px;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--night);
	color: var(--white);
	border-radius: var(--raggio);
}

.salta:focus {
	top: 12px;
}

.contenitore {
	width: 100%;
	max-width: calc(var(--contenitore) + 2 * var(--margine));
	margin-inline: auto;
	padding-inline: var(--margine);
}

/* link nel testo: filetto sotto, come nel footer della home */
main p a:not([class]),
main li a:not([class]),
main address a:not([class]),
.modulo__alternative a {
	border-bottom: 1px solid currentColor;
	transition: color .2s ease, border-color .2s ease;
}

/* ---------------------------------------------------------- sezioni e capitoli colore */

.sezione {
	position: relative;
	padding-block: var(--sezione);
}

/* il giorno: verde-acqua chiaro, come "Specialità" */
.sezione--chiara,
.offerta {
	background: var(--aqua);
}

/* la sera: notte, titoli arancio, come "Prenota il tuo tavolo" */
.sezione--scura,
.prenota,
.info-pratiche {
	background: var(--night);
	color: var(--white);
}

.sezione--scura h2,
.prenota h2,
.info-pratiche h2 {
	color: var(--orange);
}

/* il racconto: verde-acqua pieno, come "Il ristorante" */
.racconto {
	background: var(--teal);
	color: var(--white);
}

/* occhiello: come il kicker della home, con il trattino arancio */
.occhiello {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 1.1em;
	font-family: var(--font);
	font-size: var(--step--1);
	line-height: 1.2;
	letter-spacing: .12em;
	color: var(--ink);
}

.occhiello::before {
	content: "";
	flex: 0 0 auto;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--orange);
}

.sezione--scura .occhiello,
.prenota .occhiello,
.info-pratiche .occhiello {
	color: rgba(255, 255, 255, .86);
}

.testa-sezione {
	max-width: 46rem;
	margin-bottom: clamp(40px, 6vw, 72px);
}

.testa-sezione h2 {
	margin-bottom: .35em;
}

.testa-sezione p:not(.occhiello) {
	font-size: var(--step-1);
	line-height: 1.3;
	color: var(--ink-soft);
	max-width: 38rem;
}

.prenota .testa-sezione p:not(.occhiello) {
	color: rgba(255, 255, 255, .86);
}

/* segnaposto delle pagine non ancora pubblicate */
.segnaposto {
	outline: 2px dashed currentColor;
	outline-offset: 2px;
	background: rgba(245, 137, 90, .18);
	padding: 0 .25em;
}

/* ---------------------------------------------------------- pulsanti e link */

.pulsante {
	--p-sfondo: transparent;
	--p-testo: currentColor;
	--p-bordo: currentColor;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: .55em 1.35em .5em;
	font-family: var(--font);
	font-size: var(--step-0);
	line-height: 1;
	letter-spacing: .06em;
	text-align: center;
	color: var(--p-testo);
	background: var(--p-sfondo);
	border: 2px solid var(--p-bordo);
	border-radius: var(--raggio);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s var(--esce);
	-webkit-tap-highlight-color: transparent;
}

.pulsante:active {
	transform: translateY(1px);
}

.pulsante--accento {
	--p-sfondo: var(--orange);
	--p-testo: var(--ink);
	--p-bordo: var(--orange);
}

.pulsante--accento:hover,
.pulsante--accento:focus-visible {
	--p-sfondo: var(--white);
}

.pulsante--scuro {
	--p-sfondo: var(--ink);
	--p-testo: var(--white);
	--p-bordo: var(--ink);
}

.pulsante--scuro:hover,
.pulsante--scuro:focus-visible {
	--p-sfondo: var(--teal-deep);
	--p-bordo: var(--teal-deep);
}

.pulsante--chiaro {
	--p-testo: var(--ink);
	--p-bordo: var(--ink);
}

.pulsante--chiaro:hover,
.pulsante--chiaro:focus-visible {
	--p-sfondo: var(--ink);
	--p-testo: var(--white);
}

/* sui fondi notte: arancio pieno e bordo bianco, come nella sezione "Prenota" della home */
.prenota .pulsante--scuro,
.sezione--scura .pulsante--scuro {
	--p-sfondo: var(--orange);
	--p-testo: var(--ink);
	--p-bordo: var(--orange);
}

.prenota .pulsante--scuro:hover,
.prenota .pulsante--scuro:focus-visible,
.sezione--scura .pulsante--scuro:hover,
.sezione--scura .pulsante--scuro:focus-visible {
	--p-sfondo: var(--white);
	--p-bordo: var(--white);
}

.prenota .pulsante--chiaro,
.sezione--scura .pulsante--chiaro {
	--p-testo: var(--white);
	--p-bordo: rgba(255, 255, 255, .7);
}

.prenota .pulsante--chiaro:hover,
.prenota .pulsante--chiaro:focus-visible,
.sezione--scura .pulsante--chiaro:hover,
.sezione--scura .pulsante--chiaro:focus-visible {
	--p-sfondo: var(--white);
	--p-testo: var(--ink);
	--p-bordo: var(--white);
}

.link-freccia {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding-bottom: 2px;
	border-bottom: 2px solid currentColor;
	transition: gap .25s var(--esce), color .2s ease;
}

.link-freccia::after {
	content: "";
	width: .5em;
	height: .5em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg) translate(-1px, 1px);
}

.link-freccia:hover,
.link-freccia:focus-visible {
	gap: .8em;
}

/* ---------------------------------------------------------- testata: come l'header bianco della home */

.testata {
	position: sticky;
	top: 0;
	z-index: 100;
	height: var(--testata);
	background: var(--white);
	color: var(--ink);
	box-shadow: 0 1px 0 var(--line);
}

.testata__interno {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.testata__logo {
	display: block;
	width: calc(var(--testata) * 1.06);
}

.testata__logo img {
	width: 100%;
	height: auto;
}

.testata__azioni {
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 36px);
}

.testata__tel {
	position: relative;
	padding-block: 8px;
	font-size: var(--step--1);
	letter-spacing: .08em;
}

.testata__tel::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: var(--orange);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s var(--esce);
}

.testata__tel:hover::after,
.testata__tel:focus-visible::after {
	transform: scaleX(1);
}

.testata .pulsante {
	min-height: 44px;
	font-size: var(--step--1);
	padding-inline: 1.1em;
}

.testata .pulsante--accento:hover,
.testata .pulsante--accento:focus-visible {
	--p-bordo: var(--ink);
}

@media (max-width: 479px) {
	.testata__tel {
		display: none;
	}
}

/* ---------------------------------------------------------- apertura: foto piena con velatura, come l'hero della home */

.apertura {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(calc(100vh - var(--testata)), 900px);
	min-height: min(calc(100svh - var(--testata)), 900px);
	background: var(--night);
	color: var(--white);
	overflow: hidden;
}

.apertura__foto {
	position: absolute;
	inset: 0;
}

.apertura__foto picture,
.apertura__foto img {
	width: 100%;
	height: 100%;
}

.apertura__foto img {
	object-fit: cover;
	object-position: 50% 55%;
}

/* foto con il soggetto in alto (calice e spiaggia): taglio più alto */
.apertura__foto--alto img {
	object-position: 50% 28%;
}

.apertura__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(24, 24, 35, .45) 0%, rgba(24, 24, 35, 0) 22%),
		linear-gradient(to top, rgba(24, 24, 35, .94) 0%, rgba(24, 24, 35, .76) 44%, rgba(24, 24, 35, .2) 80%);
}

.apertura__testo {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: calc(var(--contenitore) + 2 * var(--margine));
	margin-inline: auto;
	padding: clamp(110px, 20vh, 220px) var(--margine) clamp(36px, 6vh, 72px);
}

.apertura .occhiello {
	gap: 16px;
	margin-bottom: 1.2rem;
	font-size: var(--step-0);
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .92);
}

.apertura .occhiello::before {
	width: 42px;
	height: 2px;
}

.apertura h1 {
	max-width: 17ch;
	margin-bottom: .32em;
	font-size: var(--step-4);
	line-height: .9;
	color: var(--white);
}

.apertura__sotto {
	max-width: 30ch;
	margin-bottom: 1.2rem;
	font-size: var(--step-1);
	line-height: 1.25;
	color: rgba(255, 255, 255, .92);
}

.apertura__riga {
	margin-bottom: 1.6rem;
	font-size: var(--step--1);
	letter-spacing: .14em;
	color: rgba(255, 255, 255, .78);
}

/* ---------------------------------------------------------- l'offerta in tre righe */

.tre-righe {
	border-bottom: 1px solid var(--line);
}

.tre-righe__riga {
	display: grid;
	gap: 6px 32px;
	padding-block: 24px;
	border-top: 1px solid var(--line);
}

.tre-righe dt {
	padding-top: .35em;
	font-size: var(--step--1);
	letter-spacing: .12em;
	color: var(--teal-deep);
}

.tre-righe dd {
	margin: 0;
	font-size: var(--step-1);
	line-height: 1.2;
	color: var(--ink);
}

.maiuscola::first-letter {
	text-transform: uppercase;
}

@media (min-width: 760px) {
	.tre-righe__riga {
		grid-template-columns: 11rem minmax(0, 1fr);
	}
}

.vantaggi {
	display: grid;
	gap: 6px;
	padding: 0;
}

.vantaggi li {
	list-style: none;
}

.vantaggi strong {
	font-weight: 400;
	color: var(--teal-deep);
}

.offerta__pesci {
	width: min(320px, 70%);
	margin: 40px auto 0;
}

/* ---------------------------------------------------------- le proposte (landing con più promo) */

.proposte {
	display: grid;
	gap: clamp(48px, 6vw, 64px) clamp(32px, 4vw, 56px);
}

/* colonna flessibile: "quando" e link si allineano in fondo tra le tre proposte */
.proposta {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.proposta__etichetta {
	font-size: var(--step--1);
	letter-spacing: .12em;
	color: var(--teal-deep);
}

/* titolo con il trattino arancio, come i titoli del menù della home */
.proposta h3 {
	font-size: var(--step-2);
	line-height: 1;
	color: var(--ink);
}

.proposta h3::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: .32em;
	border-radius: 2px;
	background: var(--orange);
}

.proposta__prezzo {
	font-size: var(--step-1);
	line-height: 1.15;
	color: var(--teal-deep);
}

.proposta p {
	line-height: 1.32;
	color: var(--ink-soft);
}

.proposta .proposta__prezzo {
	color: var(--teal-deep);
}

.proposta__quando {
	margin-top: auto;
	font-size: var(--step--1);
	letter-spacing: .1em;
}

.proposta .proposta__quando {
	color: var(--ink);
}

.proposta .link-freccia {
	align-self: flex-start;
}

@media (min-width: 900px) {
	.proposte {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------- racconto */

.racconto__griglia {
	display: grid;
	gap: clamp(40px, 6vw, 88px);
	align-items: center;
}

.racconto__foto picture {
	overflow: hidden;
	border-radius: var(--raggio);
}

.racconto__foto img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.racconto__foto figcaption {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	font-size: var(--step--1);
	letter-spacing: .06em;
	color: var(--ink);
}

.racconto__foto figcaption::before {
	content: "";
	width: 18px;
	height: 2px;
	background: var(--orange);
}

/* testo piccolo su verde-acqua: blu notte, come nella home */
.racconto .occhiello {
	color: var(--ink);
}

/* bianco su verde-acqua: solo testo grande */
.racconto__testo p:not(.occhiello) {
	max-width: 22ch;
	font-size: var(--step-2);
	line-height: 1.05;
	color: var(--white);
}

.racconto__testo p + p {
	margin-top: .7em;
}

@media (min-width: 900px) {
	.racconto__griglia {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}
}

/* ---------------------------------------------------------- la carta: piatti scelti dal menù (generati da menu.json) */

.carta {
	display: grid;
	gap: clamp(48px, 5vw, 64px) clamp(32px, 5vw, 80px);
}

.carta__portata {
	font-size: var(--step-2);
	line-height: 1;
	color: var(--ink);
}

.carta__portata::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin-top: .32em;
	border-radius: 2px;
	background: var(--orange);
}

.carta__lista {
	margin-top: 14px;
	padding: 0;
}

.carta__voce {
	list-style: none;
	padding-block: 22px;
	border-bottom: 1px solid var(--line);
}

.carta__riga {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 28px;
}

.carta__nome {
	font-size: var(--step-1);
	line-height: 1.12;
	color: var(--ink);
}

.carta__prezzo {
	flex: 0 0 auto;
	font-size: var(--step-1);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.carta__descrizione {
	max-width: 36rem;
	margin-top: .3em;
	line-height: 1.3;
	color: var(--ink-soft);
}

.carta__link {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 36px;
	margin-top: clamp(32px, 4vw, 48px);
}

@media (min-width: 900px) {
	.carta {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------- form */

.prenota__colonna {
	max-width: 50rem;
}

.prenota__blocco {
	scroll-margin-top: calc(var(--testata) + 24px);
}

.prenota__blocco + .prenota__blocco {
	margin-top: clamp(56px, 7vw, 88px);
}

.prenota__blocco h3 {
	margin-bottom: .5em;
	font-size: var(--step-2);
	color: var(--orange);
}

.prenota__blocco p {
	line-height: 1.32;
	color: rgba(255, 255, 255, .86);
}

.modulo {
	margin-top: 24px;
	padding-top: 28px;
	border-top: 1px solid var(--line-light);
}

/* il form Pienissimo è un'app a schermo pieno: non più alto della finestra, così "Continua" resta visibile */
.modulo iframe {
	display: block;
	width: 100%;
	height: min(var(--altezza-modulo, 760px), calc(100vh - var(--testata) - 32px));
	height: min(var(--altezza-modulo, 760px), calc(100svh - var(--testata) - 32px));
	border: 0;
	border-radius: var(--raggio);
	background: var(--white);
}

/* finché il form non si disegna l'iframe è trasparente e si legge la scritta sotto */
.modulo--carica {
	position: relative;
}

.modulo--carica::before {
	content: "Caricamento del modulo\2026";
	position: absolute;
	top: 96px;
	left: 0;
	right: 0;
	text-align: center;
	color: rgba(255, 255, 255, .7);
}

.modulo--carica iframe {
	position: relative;
	background: transparent;
}

.modulo__avviso,
.modulo--contatti {
	display: grid;
	gap: 18px;
	justify-items: start;
}

.modulo__testo {
	max-width: 36rem;
	line-height: 1.32;
}

.modulo__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.modulo__alternative {
	margin-top: 20px;
	font-size: var(--step--1);
	color: rgba(255, 255, 255, .86);
}

/* ---------------------------------------------------------- info pratiche: continua la notte della sezione prenota */

.info-pratiche {
	padding-top: 0;
}

.info {
	display: grid;
	gap: 48px;
	padding-top: 40px;
	border-top: 1px solid var(--line-light);
}

.info__titolo {
	margin-bottom: 1em;
	font-size: var(--step-1);
	color: var(--orange);
}

.info address,
.info p {
	margin-bottom: 1em;
	line-height: 1.35;
}

.info a:not([class]) {
	border-bottom: 1px solid rgba(255, 255, 255, .4);
	transition: border-color .2s ease, color .2s ease;
}

.info a:hover,
.info a:focus-visible {
	color: var(--orange);
	border-color: var(--orange);
}

.orari {
	width: 100%;
	max-width: 24rem;
	border-collapse: collapse;
}

.orari th,
.orari td {
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	vertical-align: top;
	font-weight: 400;
	line-height: 1.3;
	text-align: left;
}

.orari th {
	color: rgba(255, 255, 255, .82);
}

.orari td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.orari .is-chiuso th,
.orari .is-chiuso td {
	color: rgba(255, 255, 255, .56);
}

@media (min-width: 900px) {
	.info {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: clamp(40px, 5vw, 80px);
	}
}

/* ---------------------------------------------------------- condizioni */

.condizioni {
	padding-block: var(--sezione);
}

.condizioni h2 {
	font-size: var(--step-2);
}

.condizioni__lista {
	max-width: 52rem;
	padding: 0;
	border-top: 1px solid var(--line);
	font-size: var(--step--1);
	line-height: 1.4;
	color: var(--ink-soft);
}

.condizioni__lista li {
	list-style: none;
	padding-block: 14px;
	border-bottom: 1px solid var(--line);
}

/* ---------------------------------------------------------- thank you page */

.grazie {
	padding-block: clamp(64px, 10vw, 140px);
	background: var(--aqua);
}

.grazie__box {
	max-width: 44rem;
}

.grazie__pesci {
	width: 180px;
	margin-bottom: 28px;
}

.grazie h1 {
	margin-bottom: .35em;
	font-size: var(--step-3);
	line-height: .96;
	color: var(--teal-deep);
}

.grazie__testo {
	margin-bottom: 1.4em;
	font-size: var(--step-1);
	line-height: 1.3;
	color: var(--ink);
}

.grazie__prossimo {
	margin-bottom: 28px;
}

.grazie__prossimo .pulsante--accento:hover,
.grazie__prossimo .pulsante--accento:focus-visible {
	--p-bordo: var(--ink);
}

.grazie__dove {
	display: grid;
	gap: 10px;
	margin-bottom: 28px;
	padding-block: 20px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	line-height: 1.35;
	color: var(--ink-soft);
}

.grazie__dove strong {
	font-weight: 400;
	color: var(--ink);
}

.grazie__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ---------------------------------------------------------- cookie policy: titoli nel font del sito, testo leggibile */

.documento {
	padding-block: clamp(56px, 8vw, 112px);
}

.documento__testo {
	max-width: 46rem;
	font-family: var(--font-testo);
	font-size: 1.0625rem;
	line-height: 1.6;
	letter-spacing: normal;
	color: var(--ink-soft);
}

.documento h1 {
	margin-bottom: .4em;
	font-size: var(--step-3);
	line-height: .96;
	color: var(--teal-deep);
}

.documento h2 {
	margin: 2em 0 .5em;
	font-size: var(--step-1);
	line-height: 1.1;
	color: var(--ink);
}

.documento p,
.documento ul {
	margin-bottom: 1em;
}

.documento ul {
	padding-left: 1.2em;
}

.documento a {
	border-bottom: 1px solid currentColor;
}

.tabella-scorre {
	overflow-x: auto;
	margin-bottom: 1.2em;
}

.tabella-cookie {
	border-collapse: collapse;
	width: 100%;
	min-width: 36rem;
	font-size: .9375rem;
}

.tabella-cookie th,
.tabella-cookie td {
	padding: 10px 12px 10px 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.tabella-cookie th {
	font-weight: 600;
	color: var(--ink);
}

/* ---------------------------------------------------------- piè di pagina: come il footer della home */

.piede {
	background: var(--night-2);
	color: rgba(255, 255, 255, .86);
	padding-block: clamp(64px, 8vw, 104px) 32px;
	font-size: var(--step--1);
}

.piede__griglia {
	display: grid;
	gap: 40px;
}

.piede__marchio img {
	width: 130px;
	margin-bottom: 18px;
}

.piede__titolo {
	margin-bottom: .8em;
	font-size: var(--step-0);
	color: var(--orange);
}

.piede p {
	margin-bottom: .9em;
	line-height: 1.4;
}

.piede__link {
	display: grid;
	gap: 8px;
	justify-items: start;
	margin-top: 4px;
	padding: 0;
}

.piede__link li {
	list-style: none;
}

.piede a,
.piede__preferenze {
	border-bottom: 1px solid rgba(255, 255, 255, .35);
	transition: border-color .2s ease, color .2s ease;
}

.piede a:hover,
.piede a:focus-visible,
.piede__preferenze:hover,
.piede__preferenze:focus-visible {
	color: var(--orange);
	border-bottom-color: var(--orange);
}

.piede__legale {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	font-size: 1rem;
	color: rgba(255, 255, 255, .7);
}

.piede__legale p {
	margin-bottom: .6em;
}

.piede__preferenze {
	padding: 0;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	background: none;
	cursor: pointer;
}

@media (min-width: 720px) {
	.piede__griglia {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.piede__griglia {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
	}
}

/* ---------------------------------------------------------- whatsapp: lo stesso pulsante fisso della home */

.whatsapp-float {
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 90;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #25D366;
	box-shadow: 0 6px 20px rgba(15, 23, 42, .28);
	transition: transform .25s var(--esce);
}

.whatsapp-float svg {
	width: 28px;
	height: 28px;
	fill: var(--white);
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
	transform: scale(1.08);
}

/* ---------------------------------------------------------- comparsa sotto la piega (solo con JS, mai sull'apertura) */

@media (prefers-reduced-motion: no-preference) {
	.rivela-on [data-rivela] {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity .7s ease, transform .7s var(--esce);
	}

	.rivela-on [data-rivela].is-visibile {
		opacity: 1;
		transform: none;
	}
}