/**
 * Pagine pubbliche del progetto.
 *
 * Le pagine sostituiscono il tema, quindi qui si parte dal documento nudo — non
 * si può contare su nessun reset, e ogni colore va dichiarato.
 *
 * ## La revisione grafica di agosto 2026
 *
 * Un colore solo, l'arancio del marchio, e quattro grigi. Non è un
 * restringimento estetico: prima corallo e oro facevano cinque mestieri in due
 * (azione, evidenza, scadenza, categoria, stato) e nessuno sapeva più cosa
 * volesse dire una cosa arancione. Adesso il colore vuol dire **qui si tocca**,
 * e basta; evidenza, urgenza e stato si fanno con peso, fondo e posizione.
 *
 * Due conseguenze da non perdere per strada:
 *
 * - **Il testo sopra l'arancio è nero, mai bianco.** Bianco su `#fe9903` sta a
 *   2.2:1: illeggibile al sole, che è il caso d'uso vero di questo sito. Nero
 *   sta a 9.1:1.
 * - **Il colore della categoria resta un dato**, scelto dall'amministratore in
 *   console. Per questo non fa più da fondo a niente: è un pallino e basta, e
 *   qualunque tinta ci mettano non litiga con la pagina.
 */

/* ── Il carattere del marchio ─────────────────────────────────────────
 *
 * Atkinson Hyperlegible, licenza SIL OFL, ospitato sul nostro dominio: nessuna
 * richiesta a terze parti, quindi il vincolo «niente font remoto» regge.
 *
 * Quattro file e non due: il sottoinsieme «latin» non ha č š ž đ, e questo sito
 * si legge anche in sloveno e croato. `unicode-range` fa scaricare il secondo
 * file solo a chi quei segni li incontra davvero.
 */

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/font/atkinson-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/font/atkinson-regular-ext.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/font/atkinson-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	src: url("/font/atkinson-bold-ext.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.advtr-pubblico-pagina {
	margin: 0;
	padding: 0;
	background: #0c0e0b;
}

.ap-ingresso {
	--ap-scuro: #0c0e0b;
	--ap-scuro-alto: #262626;
	--ap-chiaro: #ffffff;
	--ap-tenue: #a8a8a8;
	--ap-fondo: #e6e6e6;
	--ap-grigio: #5f5f5f;

	/* L'arancio ha due mestieri, e questo è il secondo.
	   `--ap-azione` è il bottone: vuol dire «qui si tocca». `--ap-marchio` è
	   l'identità — il logo, l'occhiello, la parola accesa nel titolo — cioè
	   l'arancio che si guarda e non si preme. Stesso valore, perché il colore
	   del moodboard è uno solo; due nomi, perché i ruoli sono due e chi legge
	   la regola deve sapere quale dei due sta guardando.
	   Non è il ritorno di `--ap-oro`: quello era il nome di un colore che non
	   esiste più (l'oro), e non diceva niente su cosa facesse. */
	--ap-marchio: #fe9903;

	--ap-azione: #fe9903;
	--ap-azione-testo: #0c0e0b;
	--ap-azione-premuta: #d97f00;
	--ap-fuoco: #fe9903;
	--ap-raggio: 12px;

	--ap-brand: "Atkinson Hyperlegible", Verdana, "DejaVu Sans", Tahoma, sans-serif;
	--ap-serif: var(--ap-brand);
	--ap-sans: var(--ap-brand);

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* Nero con un alone del colore del marchio dietro al titolo. Il gradiente
	   blu di prima era un secondo colore che non voleva dire niente. */
	background:
		radial-gradient( 60% 40% at 50% 22%, rgba( 254, 153, 3, 0.22 ) 0%, rgba( 254, 153, 3, 0 ) 70% ),
		radial-gradient( 120% 90% at 50% 0%, #262626 0%, #0c0e0b 62% );
	color: var(--ap-chiaro);
	font-family: var(--ap-sans);
	line-height: 1.6;
}

.ap-ingresso *,
.ap-ingresso *::before,
.ap-ingresso *::after {
	box-sizing: inherit;
}

/* ── Barra di navigazione ────────────────────────────────────────── */

/* La barra è identica sull'ingresso e sulle pagine interne. Prima
   sull'ingresso era trasparente e sulle interne piena: erano le uniche due
   schermate del sito e sembravano di due siti diversi. Renderla piena su
   entrambe è il singolo intervento che più le cuce, e costa una riga. */

.ap-nav {
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 14px 40px;
	background: var(--ap-scuro);
	flex-wrap: wrap;
}

.ap-marchio {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}

/* Il logo è bianco su fondo scuro: nella navbar e nel piè di pagina va bene
   così com'è. L'altezza fissa (e la larghezza automatica) evita che il
   marchio salti quando l'immagine finisce di caricare. */
/* Il marchio non si ridisegna: si colora. Il file arancio è un'immagine vera
   (`assets/img/logo-arancio.png`, generata dal bianco tenendo il canale alpha)
   e non una maschera CSS: una maschera non arriva ovunque, e un logo che
   sparisce non è un dettaglio. */

.ap-logo {
	display: block;
	height: 44px;
	width: auto;
	flex: none;
}

.ap-logo-pie {
	height: 40px;
}

.ap-nav-voci {
	display: flex;
	gap: 24px;
	margin-left: auto;
	flex-wrap: wrap;
}

/* La barra è nera su tutte e due le pelli, quindi le sue voci hanno un colore
   loro e non ereditano da nessuno: è esattamente ereditando che erano
   diventate illeggibili. */

.ap-nav-voce {
	color: #d8d8d8;
	text-decoration: none;
	font-size: 15px;
}

.ap-nav-voce:hover {
	color: #fff;
}

.ap-nav-voce:focus-visible {
	outline: 3px solid var(--ap-fuoco);
	outline-offset: 4px;
	border-radius: 4px;
}

.ap-nav-voce.attiva {
	color: var(--ap-marchio);
}

/* ── Eroe ────────────────────────────────────────────────────────── */

.ap-eroe {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px 72px;
	text-align: center;
}

.ap-occhiello {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ap-marchio);
}

.ap-titolo {
	margin: 0;
	font-family: var(--ap-serif);
	font-size: clamp( 34px, 6vw, 58px );
	font-weight: 700;
	line-height: 1.1;
	color: #fff;
}

.ap-titolo em {
	font-style: normal;
	color: var(--ap-marchio);
}

.ap-sottotitolo {
	margin: 14px 0 0;
	font-size: 16px;
	color: var(--ap-tenue);
	max-width: 520px;
}

/* ── Ricerca ─────────────────────────────────────────────────────── */

/* Ricerca e mappa: sul telefono una sotto l'altra, da 900px in su affiancate.
   Sul telefono la verticale è tutto, e il campo di ricerca da solo occupava la
   riga che serve al bottone della mappa. */

.ap-ricerca {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 640px;
	margin: 28px 0 0;
}

.ap-cerca {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 56px;
	padding: 0 8px 0 18px;
	background: #fff;
	border-radius: var(--ap-raggio);
	box-shadow: var(--ap-ombra, 0 10px 28px rgba( 0, 0, 0, 0.28 ));
}

/* Il bottone «Cerca» è rientrato nel campo. Resta un bottone vero: 44px di
   bersaglio, raggiungibile col tabulatore, con il suo nome per chi non vede
   la lente. */

.ap-cerca-lente {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--ap-raggio);
	background: transparent;
	color: #0c0e0b;
	cursor: pointer;
}

.ap-cerca-lente:hover {
	background: #f2f2f2;
}

.ap-cerca-lente:focus-visible {
	outline: 3px solid var(--ap-fuoco);
	outline-offset: 2px;
}

@media ( min-width: 900px ) {

	.ap-ricerca {
		flex-direction: row;
		align-items: stretch;
		max-width: 860px;
	}

	.ap-cerca {
		flex: 1;
	}

	.ap-tutto {
		flex: 0 0 320px;
	}
}

.ap-cerca input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	padding: 10px 0;
	font: inherit;
	font-size: 15px;
	color: var(--ap-scuro);
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
}

.ap-cerca input[type="search"]::placeholder {
	color: #8b98a5;
}

.ap-oppure {
	margin: 26px 0 14px;
	font-size: 13px;
	color: var(--ap-tenue);
}

/* ── Schede d'intenzione ─────────────────────────────────────────── */

.ap-intenzioni {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) );
	gap: 14px;
	width: 100%;
	max-width: 880px;
}

.ap-carta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 20px 14px 18px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.10 );
	color: var(--ap-chiaro);
	text-decoration: none;
	transition: background 0.15s ease;
}

/* La carta si accende, non si solleva: la consegna toglie il sollevamento
   dalle carte in elenco (§4.4, «nessun sollevamento»), e qui costava anche un
   difetto suo — `.ap-carta` non aveva la guardia `prefers-reduced-motion` che
   la carta dello striscione aveva, quindi si muoveva anche a chi il movimento
   l'aveva disattivato. Senza spostamento la guardia non serve più: quello che
   resta è un cambio di colore.

   L'inversione su bianco invece rimane: qui il fondo è la pelle scura
   dell'ingresso, e su nero il contorno che si scurisce non si vedrebbe. */

.ap-carta:hover,
.ap-carta:focus-visible {
	background: #fff;
	color: var(--ap-scuro);
	border-color: #fff;
}

.ap-carta-icona {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 4px;
	border-radius: 11px;
	background: rgba( 255, 255, 255, 0.10 );
	font-size: 21px;
	line-height: 1;
}

/* Sulla carta accesa il riquadro dell'icona era avorio `#f3f0e9`, la
   superficie della pelle di prima: contro il bianco della carta si vedeva
   eccome, color crema in mezzo a una tavolozza di grigi neutri. */

.ap-carta:hover .ap-carta-icona,
.ap-carta:focus-visible .ap-carta-icona {
	background: var(--ap-fondo);
}

.ap-carta-titolo {
	font-weight: 700;
	font-size: 15px;
}

/* Contenitore di titolo e descrizione: serve al layout a riga del telefono. */

.ap-carta-testo {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ap-carta-dett {
	font-size: 12px;
	color: var(--ap-tenue);
	line-height: 1.35;
}

/* Il testo tenue della carta è `--ap-tenue` (#a8a8a8): giusto sul fondo
   scuro, illeggibile appena la carta diventa bianca — 1.9:1. Serviva un
   grigio da superficie chiara, e al posto di prenderlo dalla tavolozza era
   stato scritto a mano un grigio-azzurro. `--ap-grigio` su bianco sta a
   7.0:1, un gradino meglio di quello che sostituisce. */

.ap-carta:hover .ap-carta-dett,
.ap-carta:focus-visible .ap-carta-dett {
	color: var(--ap-grigio);
}

/* Era un link grigio in fondo alla pagina: la cosa più importante del sito era
   la meno visibile. Ora è il bottone principale, e resta l'unico pieno arancio
   della schermata — se ce ne fossero due, non sarebbe principale nessuno. */

.ap-tutto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 60px;
	font-size: 18px;
	text-align: center;
}

.ap-tutto-nota {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--ap-tenue);
}


/* La spilla della fascia oraria: dice perché quella scheda è finita in cima.
   Un ordine che cambia da solo, senza una ragione visibile, sembra un errore. */

.ap-carta {
	position: relative;
}

.ap-carta.e-adesso {
	border-color: rgba( 254, 153, 3, 0.45 );
}

.ap-carta-adesso {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var(--ap-marchio);
	color: var(--ap-scuro);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.6;
}

/* ── Striscione offerte ──────────────────────────────────────────────
 *
 * Una fila che scorre in orizzontale. Sul telefono si trascina col dito e
 * basta — nessun copione, nessuna freccia da centrare col pollice; le frecce
 * compaiono solo dove c'è un mouse. Niente scorrimento automatico: sposta le
 * cose sotto il dito mentre le si legge, ed è la prima cosa che infastidisce
 * su uno schermo piccolo.
 *
 * Lo `scroll-snap` fa il lavoro che di solito si chiede a una libreria: le
 * carte si fermano allineate da sole.
 */

.ap-coupon {
	width: 100%;
	max-width: 880px;
	margin: 40px 0 0;
	text-align: left;
}

.ap-coupon-testa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.ap-coupon-testa h2 {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ap-marchio);
}

.ap-coupon-frecce {
	display: none;
	gap: 6px;
}

/* Le frecce servono a chi ha un mouse. Su uno schermo che si tocca c'è già il
   dito, e due bersagli da 30px in cima alla fila sarebbero solo ingombro. */

@media ( hover: hover ) {

	/* `:not([hidden])` non e' pignoleria: senza, questa regola vincerebbe sul
	   `display: none` che il browser dà agli elementi nascosti, e le frecce
	   resterebbero visibili anche quando il copione le spegne perché non c'è
	   niente da scorrere. */
	.ap-coupon-frecce:not( [hidden] ) {
		display: flex;
	}
}

.ap-coupon-freccia {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: 999px;
	background: rgba( 255, 255, 255, 0.06 );
	color: var(--ap-chiaro);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.ap-coupon-freccia:hover {
	background: #fff;
	color: var(--ap-scuro);
}

.ap-coupon-freccia[disabled] {
	opacity: 0.35;
	cursor: default;
}

.ap-coupon-pista {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0 0 6px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.ap-coupon-pista::-webkit-scrollbar {
	display: none;
}

.ap-coupon-carta {
	flex: 0 0 236px;
	scroll-snap-align: start;
}

.ap-coupon-carta > a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 14px;
	border-radius: 12px;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.10 );
	color: var(--ap-chiaro);
	text-decoration: none;
	transition: background 0.15s ease, transform 0.15s ease;
}

.ap-coupon-carta > a:hover,
.ap-coupon-carta > a:focus-visible {
	background: #fff;
	color: var(--ap-scuro);
	border-color: #fff;
	transform: translateY( -2px );
}

.ap-coupon-alto {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.ap-coupon-logo {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	object-fit: cover;
}

.ap-coupon-locale {
	overflow: hidden;
	font-size: 12px;
	color: var(--ap-tenue);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ap-coupon-carta > a:hover .ap-coupon-locale,
.ap-coupon-carta > a:focus-visible .ap-coupon-locale {
	color: var(--ap-grigio);
}

.ap-coupon-titolo {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
}

.ap-coupon-testo {
	font-size: 12px;
	line-height: 1.4;
	color: var(--ap-tenue);
}

.ap-coupon-carta > a:hover .ap-coupon-testo,
.ap-coupon-carta > a:focus-visible .ap-coupon-testo {
	color: var(--ap-grigio);
}

.ap-coupon-scadenza {
	margin-top: auto;
	padding-top: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ap-marchio);
}

@media ( prefers-reduced-motion: reduce ) {

	.ap-coupon-carta > a {
		transition: none;
	}

	.ap-coupon-carta > a:hover,
	.ap-coupon-carta > a:focus-visible {
		transform: none;
	}
}

/* ── Bottoni ─────────────────────────────────────────────────────── */

.ap-btn {
	display: inline-block;
	padding: 12px 22px;
	border: 1.5px solid currentColor;
	border-radius: var(--ap-raggio);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

/* Il fuoco da tastiera si vede, e si vede uguale ovunque: è l'unico modo in
   cui una parte dei visitatori sa dove si trova. */

.ap-btn:focus-visible,
.ap-carta:focus-visible,
.ap-coupon-carta > a:focus-visible {
	outline: 3px solid var(--ap-fuoco);
	outline-offset: 3px;
}

/* L'unico pieno arancio per schermata. Il testo sopra è nero: bianco su
   #fe9903 sta a 2.2:1 e in pieno sole non si legge — ed è il caso d'uso vero
   di questo sito, non un'ipotesi di laboratorio. */

.ap-btn-primario {
	border-color: var(--ap-azione);
	background: var(--ap-azione);
	color: var(--ap-azione-testo);
}

.ap-btn-primario:hover {
	border-color: var(--ap-azione-premuta);
	background: var(--ap-azione-premuta);
	color: var(--ap-azione-testo);
}

.ap-btn-primario:active {
	transform: translateY( 1px );
}

.ap-btn-primario[disabled] {
	border-color: var(--ap-disattivo-fondo, #e6e6e6);
	background: var(--ap-disattivo-fondo, #e6e6e6);
	color: var(--ap-disattivo-testo, #a8a8a8);
	cursor: not-allowed;
}

/* Etichetta riservata ai lettori di schermo. */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

@media (max-width: 700px) {

	.ap-nav {
		padding: 16px 20px;
		gap: 14px;
	}

	/* Sul telefono la navbar manda le voci a capo: il marchio si restringe
	   perché il logo non si mangi metà della prima riga. */
	.ap-logo {
		height: 42px;
	}

	.ap-logo-pie {
		height: 34px;
	}

	.ap-nav-voci {
		order: 3;
		width: 100%;
		margin-left: 0;
		justify-content: center;
	}

	.ap-eroe {
		padding: 28px 18px 56px;
	}
}

/* ══ Pagine interne ═══════════════════════════════════════════════ */
/* Barra scura in cima, contenuto su avorio: le schermate 06 e 07.   */

.ap-sito {
	--ap-scuro: #0c0e0b;
	--ap-scuro-alto: #262626;
	/* Verde, blu, corallo e oro sono usciti del tutto: erano i nomi della
	   tavolozza di prima, tenuti in vita a puntare sui valori nuovi. «Verde»
	   voleva dire grigio scuro e «oro» voleva dire arancio — finché un nome
	   mente così, una regola non si può leggere per capire se è giusta.
	   L'arancio dell'identità (il marchio nella barra) ha un nome suo, che
	   deve stare anche qui: la barra di navigazione è la stessa delle due
	   pelli, e senza questa riga la voce attiva resterebbe senza colore sulle
	   pagine interne. */
	--ap-marchio: #fe9903;
	--ap-fondo: #e6e6e6;
	--ap-carta: #ffffff;
	--ap-bordo: #d8d8d8;
	--ap-testo: #0c0e0b;
	/* Un gradino più scuro di quanto dicesse la consegna: #6b6b6b su bianco va
	   bene (5.1:1) ma sul grigio del fondo pagina scende a 4.27, appena sotto
	   la soglia — ed è il colore di tutti i testi secondari del sito. */
	--ap-grigio: #5f5f5f;
	--ap-tenue: #a8a8a8;

	/* Un significato per ogni token, e uno solo. */
	--ap-azione: #fe9903;          /* il bottone principale, e nient'altro */
	--ap-azione-testo: #0c0e0b;    /* sopra l'arancio si scrive in nero */
	--ap-azione-premuta: #d97f00;
	--ap-evidenza-fondo: #fff3e0;  /* offerta, coupon, «in evidenza» */
	--ap-evidenza-bordo: #fe9903;
	--ap-urgenza: #0c0e0b;         /* la scadenza è nera grassa: era corallo e sembrava un errore */
	--ap-disattivo-fondo: #e6e6e6;
	--ap-disattivo-testo: #a8a8a8;
	--ap-fuoco: #fe9903;
	--ap-vuoto-fondo: repeating-linear-gradient( 135deg, #e6e6e6 0 10px, #dcdcdc 10px 20px );

	--ap-raggio: 12px;
	--ap-raggio-grande: 20px;
	--ap-ombra: 0 1px 2px rgba( 12, 14, 11, 0.06 ), 0 10px 28px rgba( 12, 14, 11, 0.08 );

	--ap-brand: "Atkinson Hyperlegible", Verdana, "DejaVu Sans", Tahoma, sans-serif;
	--ap-serif: var(--ap-brand);
	--ap-sans: var(--ap-brand);

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--ap-fondo);
	color: var(--ap-testo);
	font-family: var(--ap-sans);
	font-size: 15px;
	line-height: 1.6;
}

.ap-sito *,
.ap-sito *::before,
.ap-sito *::after {
	box-sizing: inherit;
}

.ap-sito .ap-nav {
	background: var(--ap-scuro);
}

.ap-contenuto {
	flex: 1;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 34px 28px 56px;
}

.ap-pagina-titolo {
	margin: 0 0 22px;
	font-family: var(--ap-serif);
	font-size: clamp( 26px, 4vw, 38px );
	font-weight: 700;
	line-height: 1.15;
	color: var(--ap-testo);
}

.ap-sito h2,
.ap-sito h3 {
	font-family: var(--ap-serif);
	color: var(--ap-testo);
}

/* ATTENZIONE, e qui c'è una storia. Questa regola era `.ap-sito a`, cioè
   «tutti i link delle pagine interne», e comprendeva anche la barra in alto, il
   piè di pagina e i bottoni — che stanno dentro `.ap-sito` come tutto il resto.
   Con (0,1,1) batteva `.ap-btn-primario` (0,1,0), quindi ogni bottone si
   ritrovava il colore dei link e ogni volta si aggiungeva una toppa più
   specifica: nel file ce n'erano tre, e la terza annotava «terza volta che ci
   si casca».
   
   La quarta volta è stata la barra nera: i link dell'intestazione sono
   diventati grigio scuro su fondo nero, 1.3:1, cioè invisibili.
   
   Adesso il colore dei link vale dove servono davvero — dentro il contenuto —
   e il guscio (barra, piede, bottoni) dichiara i propri. Le toppe qui sotto
   restano ma non servono più a puntellare niente. */

.ap-contenuto a,
.ap-contenuto-scheda a {
	color: var(--ap-testo);
}

/* ── Filtri della mappa ──────────────────────────────────────────── */

.ap-sito .advtr-map-filtri {
	gap: 8px;
	margin-bottom: 14px;
}

.ap-sito .advtr-filtro-btn {
	background: var(--ap-carta);
	color: var(--ap-testo);
	border: 1px solid var(--ap-bordo);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 13.5px;
	font-weight: 600;
}

.ap-sito .advtr-filtro-btn:hover {
	border-color: var(--ap-scuro);
}

.ap-sito .advtr-filtro-btn.attivo {
	background: var(--ap-scuro);
	border-color: var(--ap-scuro);
	color: #fff;
}

.ap-sito .advtr-map {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--ap-bordo);
}

/* ── Offerte, eventi: contenitori a scheda ───────────────────────── */

.ap-sito .advtr-offerta,
.ap-sito .advtr-evento,
.ap-sito .advtr-grande-evento,
.ap-sito .advtr-scheda-box,
.ap-sito .advtr-scheda-sez {
	background: var(--ap-carta);
	border: 1px solid var(--ap-bordo);
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 16px;
}

.ap-sito .advtr-offerta-codice,
.ap-sito .advtr-coupon-codice {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 8px;
	background: var(--ap-scuro);
	color: #fff;
	font-family: var(--ap-serif);
	letter-spacing: 0.14em;
	font-weight: 700;
}

/* ── Scheda attività ─────────────────────────────────────────────── */

/* «Novità» racconta un fatto, e i fatti stanno scuri. Prima erano due regole:
   la prima dipingeva d'arancio anche `.advtr-badge-evidenza`, che nel markup
   non esiste più, e la seconda la disfaceva subito dopo. */

.ap-sito .advtr-badge-novita {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	background: var(--ap-scuro);
	color: #fff;
}

.ap-sito .advtr-servizi {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ap-sito .advtr-servizi li {
	padding: 5px 12px;
	border: 1px solid var(--ap-bordo);
	border-radius: 999px;
	font-size: 13px;
	background: var(--ap-fondo);
}

.ap-sito .advtr-galleria {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	gap: 12px;
}

.ap-sito .advtr-galleria img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

/* ── Piè di pagina ───────────────────────────────────────────────── */

.ap-pie {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 20px 28px;
	background: var(--ap-scuro);
	color: var(--ap-tenue);
	font-size: 13px;
}

.ap-pie-marchio {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ap-serif);
	font-weight: 700;
	color: #fff;
}

.ap-pie-voci {
	display: flex;
	gap: 18px;
	margin-left: auto;
}

.ap-pie-voci a {
	color: var(--ap-tenue);
	text-decoration: none;
}

.ap-pie-voci a:hover {
	color: #fff;
}

@media (max-width: 700px) {

	.ap-contenuto {
		padding: 22px 16px 40px;
	}

	.ap-pie-voci {
		margin-left: 0;
	}
}

/* ══ Esplora la mappa (schermata 06) ══════════════════════════════ */

/* Quarta tavolozza, quella della mappa. Stessi valori delle altre: le pagine
   sono componenti separati per storia, non per scelta, e un giorno andranno
   unificati — intanto almeno dicono la stessa cosa.

   `--ae-verde`, `--ae-corallo` e `--ae-oro` non ci sono più. Erano i nomi
   della tavolozza di prima, rimasti in piedi dopo la revisione di agosto a
   puntare sui valori nuovi: «verde» voleva dire grigio scuro, «corallo» e
   «oro» volevano dire tutti e due arancio. Finché un nome mente così, una
   regola non si può leggere per capire se è giusta — e infatti non lo era in
   tre punti su dieci. Ogni uso è passato al nome che dice cosa fa.

   L'avviso di vicinanza è nell'elenco dei selettori perché vive FUORI da
   `.ae-esplora` (è `position: fixed`, e nel template sta dopo la chiusura del
   contenitore). Prendeva `var(--ae-scuro, #1b2a3a)` e il token non risolveva
   mai: il riquadro era del blu ardesia di ripiego, un colore che nella
   tavolozza non esiste più da agosto. Stesso inciampo della schermata di
   accesso della console — un token che non risolve non eredita, sparisce. */

.ae-esplora,
.ae-vicino {
	--ae-scuro: #0c0e0b;
	--ae-carta: #ffffff;
	--ae-bordo: #d8d8d8;
	--ae-fondo: #e6e6e6;
	--ae-grigio: #5f5f5f;
	--ae-azione: #fe9903;
	--ae-azione-testo: #0c0e0b;
}

.ae-esplora {
	box-sizing: border-box;
}

.ae-esplora *,
.ae-esplora *::before,
.ae-esplora *::after {
	box-sizing: inherit;
}

/* ── Barra strumenti ─────────────────────────────────────────────── */

.ae-barra {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ae-cerca {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 280px;
	min-width: 0;
	padding: 8px 14px;
	background: var(--ae-carta);
	border: 1px solid var(--ae-bordo);
	border-radius: 999px;
}

.ae-cerca input[type="search"] {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: var(--ae-scuro);
	-webkit-appearance: none;
	appearance: none;
}

.ae-cerca-azzera {
	color: var(--ae-grigio);
	text-decoration: none;
	font-size: 18px;
	line-height: 1;
	padding: 0 2px;
}

.ae-chip {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.ae-chip-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 15px;
	border: 1px solid var(--ae-bordo);
	border-radius: 999px;
	background: var(--ae-carta);
	color: var(--ae-scuro);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.ae-chip-btn:hover {
	border-color: var(--ae-scuro);
}

/* Il filtro selezionato è nero, non arancio: l'arancio è l'azione, e un filtro
   acceso è uno stato. Se fossero dello stesso colore, «Tutti» sembrerebbe un
   bottone da premere quanto «Esplora la mappa». */

.ae-chip-btn.attivo {
	background: var(--ae-scuro);
	border-color: var(--ae-scuro);
	color: #fff;
}

/* Il pulsante porta il colore della sua categoria: e' lo stesso dei punti
   sulla mappa, ed e' cosi' che si capisce quale simbolo appartiene a cosa.
   --ae-cat lo mette il template, letto dalla categoria. */
.ae-chip-icona {
	width: 1em;
	height: 1em;
	flex: none;
	color: var(--ae-cat, currentColor);
}

/* Attivo il pulsante e' del colore della categoria: l'icona deve staccare. */
.ae-chip-cat.attivo .ae-chip-icona {
	color: #fff;
}

.ae-chip-punto {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ae-cat, var(--ae-scuro));
	box-shadow: 0 0 0 1px rgba( 12, 14, 11, 0.15 );
	flex: none;
}

.ae-chip-cat:hover {
	border-color: var(--ae-cat, var(--ae-scuro));
}

.ae-chip-cat.attivo {
	background: var(--ae-cat, var(--ae-scuro));
	border-color: var(--ae-cat, var(--ae-scuro));
}

/* Attivo il pallino sparirebbe nel fondo del suo stesso colore. */
.ae-chip-cat.attivo .ae-chip-punto {
	background: #fff;
	box-shadow: none;
}

/* «Offerte» acceso era arancio, e cioè uguale al bottone dell'azione: la
   regola scritta quindici righe più su — «il filtro selezionato è nero, non
   arancio» — era già stata violata senza che nessuno lo vedesse. Non è stata
   una scelta: era `--ae-corallo`, un colore a sé, finché la revisione non gli
   ha messo dentro l'arancio. Adesso la riga non serve più: `.ae-chip-btn.attivo`
   lo fa nero come tutti gli altri filtri generici, e le categorie restano le
   sole a portare un colore proprio. */

/* ── Corpo: lista + mappa ────────────────────────────────────────── */

.ae-corpo {
	display: grid;
	grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

.ae-lista {
	background: var(--ae-carta);
	border: 1px solid var(--ae-bordo);
	border-radius: 12px;
	overflow: hidden;
}

.ae-lista-testa {
	padding: 16px 18px 10px;
	border-bottom: 1px solid var(--ae-bordo);
}

.ae-lista-titolo {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.ae-lista-conta {
	margin: 2px 0 0;
	font-size: 12px;
	color: var(--ae-grigio);
}

.ae-lista-corpo {
	max-height: 600px;
	overflow-y: auto;
	padding: 10px;
}

/* ── Scheda risultato ────────────────────────────────────────────── */

/* La riga della lista. Su un telefono si scorre per trovare, non per leggere:
   ogni riga che si accorcia è un locale in più visibile senza scorrere. */

.ae-card {
	display: flex;
	align-items: center;
	margin-bottom: 6px;
	border: 1px solid var(--ae-bordo);
	border-radius: var(--ap-raggio, 12px);
	background: var(--ae-carta);
}

/* Il link prende tutta la riga tranne l'angolo della puntina, e resta un link
   vero: si apre in una scheda nuova col tasto centrale, se ne copia
   l'indirizzo, chi legge con la voce lo sente annunciare come link. Il
   riempimento sta qui e non sulla riga, altrimenti l'area premibile finisce
   dentro il bordo e restano dodici pixel morti tutto attorno. */

.ae-card-link {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	padding: 12px;
	text-decoration: none;
	color: inherit;
}

/* Il bordo si scurisce e basta: niente sollevamento, niente fondo grigio.
   Una regola gemella della tavolozza vecchia era rimasta più in basso nel
   file — stessa specificità, dichiarata dopo — e vinceva lei: il bordo
   restava grigio e la riga si riempiva. Stesso inciampo dei due `:hover` dei
   bottoni della console, vedi diario §9. */
.ae-card:hover {
	border-color: var(--ae-scuro);
}

/* Il fuoco si disegna attorno alla riga intera anche se a prenderlo è il link
   dentro: il bordo che si illumina deve essere quello che si vede. */

.ae-card:has( .ae-card-link:focus-visible ) {
	outline: 3px solid var(--ap-fuoco, #fe9903);
	outline-offset: 2px;
}

/* ── La puntina ──────────────────────────────────────────────────────
 *
 * «Fammi vedere dove sta»: porta la mappa sul locale della riga senza
 * lasciare la pagina. È l'unica altra cosa premibile della riga, quindi ha
 * bisogno di un'area sua da 44px — la misura del dito — e di stare FUORI dal
 * link, perché un bottone dentro un <a> non è markup valido.
 *
 * Sta in inchiostro tenue dentro un contorno sottile: si vede che è un
 * comando, ma non compete con il nome del locale — la riga è già piena di
 * roba che chiede attenzione (nome, categoria, via, due pillole). L'arancio
 * arriva solo al passaggio del mouse e al fuoco, cioè quando si sta per
 * premerla. Il primo tentativo era l'emoji 📍 scolorita e mezza trasparente:
 * non si vedeva affatto, che è lo stesso difetto da cui si era partiti.
 */

.ae-card-puntina {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: 6px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	border-color: var(--ae-bordo);
	background: var(--ae-carta);
	color: var(--ae-grigio);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.ae-card-puntina-icona {
	display: block;
	pointer-events: none;
}

.ae-card-puntina:hover {
	border-color: var(--ae-azione);
	background: var(--ap-azione-velo, #fff3e0);
	color: var(--ae-scuro);
}

.ae-card-puntina:focus-visible {
	outline: 3px solid var(--ap-fuoco, #fe9903);
	outline-offset: 2px;
	color: var(--ae-scuro);
}

.ae-card-puntina:active {
	transform: translateY(1px);
}

/* Sul telefono la mappa sta sotto l'elenco: qui la puntina non è una
   comodità, è l'unico modo di far vedere dove sta un locale senza uscire
   dalla pagina. Un filo più grande, così il pollice la prende. */

@media (max-width: 860px) {

	.ae-card-puntina {
		width: 48px;
		height: 48px;
		font-size: 18px;
	}
}

/* L'unico uso decorativo dell'arancio della lista, e voluto: il taglio
   colorato sul fianco sinistro è il segno che la consegna dà al contenuto di
   un abbonato (la carta dell'offerta, §4.3; l'evento di un partner, §5-ter).
   Qui marca la riga di chi paga l'evidenza, ed è lo stesso gesto. */

.ae-card.evidenza {
	border-color: var(--ae-azione);
	box-shadow: inset 3px 0 0 var(--ae-azione);
}

/* Senza foto non si mette un rettangolo grigio pieno, che sembra un errore di
   caricamento: si mette una trama neutra, che si legge come «qui ci andrà
   un'immagine». È il caso più frequente, non l'eccezione. */

.ae-card-img {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background: var(--ap-vuoto-fondo, repeating-linear-gradient( 135deg, #e6e6e6 0 10px, #dcdcdc 10px 20px ));
	background-size: cover;
	background-position: center;
}

.ae-card-img.tipo-poi {
	background-color: #b9cdbf;
}

.ae-card-testo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ae-card-nome {
	font-weight: 700;
	font-size: 16px;
	line-height: 1.25;
}

/* La categoria non è più colorata: il suo colore è un dato che decide
   l'amministratore, e usarlo per il testo faceva litigare la pagina con
   qualunque tinta scegliesse. Resta il pallino, e basta. */

.ae-card-cat {
	overflow: hidden;
	font-size: 13px;
	font-weight: 400;
	color: var(--ae-grigio);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ae-card-ind {
	font-size: 12px;
	color: var(--ae-grigio);
}

.ae-card-badge {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.ae-pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #fff;
}

/* Le pillole della lista. «In evidenza» e «Coupon» sono arancio pieno, quindi
   il testo è nero: erano bianche su arancio, 2.15:1 a dieci pixel — la
   dimensione più piccola sulla pagina, con il contrasto peggiore. «Novità» è
   grigio scuro con testo bianco: non è una promessa commerciale, è un fatto. */

.ae-pill.oro,
.ae-pill.corallo {
	background: var(--ae-azione);
	color: var(--ae-azione-testo);
}

/* La classe si chiama ancora `verde` — i nomi delle classi non si toccano,
   sono nel markup — ma il verde non c'è più da agosto: «Novità» racconta un
   fatto, e i fatti stanno scuri. */

.ae-pill.verde {
	background: var(--ae-scuro);
	color: #fff;
}

/* ── Quando non c'è niente da mostrare ────────────────────────────────
 *
 * Su questo sito lo stato vuoto non è l'eccezione: gli eventi sono pochi
 * all'anno, le offerte vanno e vengono, e per la maggior parte del tempo
 * quelle pagine sono così. Quindi è una schermata, non un messaggio d'errore:
 * niente bordo tratteggiato, niente icona triste, niente scuse. Una riga che
 * spiega e una porta che si apre. */

.advtr-vuoto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 36px 20px;
	text-align: center;
}

.advtr-vuoto-testo {
	margin: 0;
	max-width: 34ch;
	font-size: 17px;
	line-height: 1.45;
	color: var(--ap-grigio, #5f5f5f);
}

.advtr-vuoto-btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 22px;
	border: 1.5px solid var(--ap-testo, #0c0e0b);
	border-radius: var(--ap-raggio, 12px);
	color: var(--ap-testo, #0c0e0b);
	font-weight: 700;
	text-decoration: none;
}

.advtr-vuoto-btn:hover {
	background: var(--ap-testo, #0c0e0b);
	color: #fff;
}

.advtr-vuoto-btn:focus-visible {
	outline: 3px solid var(--ap-fuoco, #fe9903);
	outline-offset: 3px;
}

.ae-vuoto {
	margin: 0;
	padding: 26px 14px;
	text-align: center;
	color: var(--ae-grigio);
	font-size: 13.5px;
}

/* ── Mappa ───────────────────────────────────────────────────────── */

.ae-mappa .advtr-map {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--ae-bordo);
}

/* Marker sotto il puntatore nella lista. */

.advtr-marker.evidenziato,
.leaflet-marker-icon.evidenziato .advtr-marker {
	transform: scale( 1.45 );
	z-index: 500;
}

@media (max-width: 860px) {

	.ae-corpo {
		grid-template-columns: 1fr;
	}

	.ae-lista-corpo {
		max-height: 340px;
	}
}

/* ══ Scheda attività (schermata 07) ═══════════════════════════════ */

.as-scheda {
	/* La scheda attività ha una tavolozza sua perché nasce come componente a
	   sé, incorporabile anche fuori dalle pagine del guscio. I nomi restano,
	   i valori sono quelli della revisione: una sola casa, tre porte. */
	--as-scuro: #0c0e0b;
	--as-verde: #262626;
	--as-corallo: #fe9903;
	--as-oro: #fe9903;
	--as-carta: #ffffff;
	--as-bordo: #d8d8d8;
	--as-fondo: #e6e6e6;
	--as-grigio: #5f5f5f;
	--as-azione: #fe9903;
	--as-azione-testo: #0c0e0b;
	/* L'arancio quando NON si tocca: le stelle di un voto si guardano.
	   Stesso valore, nome diverso — vedi `--ap-marchio`. */
	--as-marchio: #fe9903;
	--as-azione-premuta: #d97f00;
	--as-evidenza-fondo: #fff3e0;
	--as-serif: "Atkinson Hyperlegible", Verdana, "DejaVu Sans", Tahoma, sans-serif;

	box-sizing: border-box;
	background: var(--as-carta);
	border: 1px solid var(--as-bordo);
	border-radius: var(--ap-raggio-grande, 20px);
	overflow: hidden;
}

.as-scheda *,
.as-scheda *::before,
.as-scheda *::after {
	box-sizing: inherit;
}

/* ── Intestazione ────────────────────────────────────────────────── */

/* ── Testata della scheda ─────────────────────────────────────────────
 *
 * Prima erano un logo quadrato, un titolo e due bottoni su una riga: dignitosa
 * e anonima, con il problema che il valore della pagina — è la scheda che il
 * cliente paga — non si vedeva nei primi due secondi.
 *
 * Adesso è una fascia a tutta larghezza, e ha tre facce perché tre sono i casi
 * veri. Quella senza foto non è un ripiego: è la più frequente oggi, e per
 * questo è disegnata quanto le altre.
 */

/* L'altezza dipende da cosa c'è dentro, e non è un dettaglio.
   
   Con una foto: 320 e non 200. A 200 la foto dell'esercente era una striscia,
   e da una striscia non si capisce che posto sia — mentre questa è la prima
   cosa che vede chi ha appena inquadrato un codice QR sul bancone di un
   albergo. Se non trattiene lì, il resto della pagina non lo legge nessuno.
   
   Senza foto: 240, perché non c'è niente da guardare. Fatta alta uguale,
   restava una fascia di nero vuoto in mezzo — provato, e sembrava un errore
   di caricamento. Lo spazio si dà a quello che ha qualcosa da metterci. */

.as-eroe {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 240px;
	padding: 22px;
	background: var(--as-scuro) center / cover no-repeat;
	overflow: hidden;
}

.as-eroe.con-foto {
	min-height: 320px;
}

/* La velatura serve a leggere il titolo sopra qualunque foto: una foto chiara
   con testo bianco sopra è illeggibile, e la foto la carica l'esercente.
   
   Adesso vela anche in alto, e non per gusto: lassù ci sono «Torna alla mappa»
   e le pillole, che prima galleggiavano sul chiaro contando sul proprio fondo
   semitrasparente. In mezzo resta limpida — è lì che la foto si vede. */

.as-eroe.con-foto::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba( 12, 14, 11, 0.6 ) 0%,
		rgba( 12, 14, 11, 0 ) 32%,
		rgba( 12, 14, 11, 0 ) 44%,
		rgba( 12, 14, 11, 0.92 ) 100%
	);
}

.as-eroe > * {
	position: relative;
}

/* ── La via d'uscita ──────────────────────────────────────────────────
 *
 * Fuori dal flusso, in alto a sinistra: l'angolo è libero in tutti e tre i
 * casi della testata (la pillola sta a destra, il logo e le iniziali pure), e
 * così non costa una riga di altezza a una pagina che sul telefono si scorre
 * già parecchio.
 *
 * Pillola scura e non bianca: bianca competerebbe con «Chiama», che è già una
 * pillola bianca lì sotto. Questa è una via d'uscita, non un'azione — deve
 * essere trovabile, non desiderabile. Il fondo semitrasparente serve alla
 * testata con foto: la velatura del gradiente copre solo la metà bassa, e
 * l'esercente può aver caricato un muro bianco al sole.
 */

/* Il selettore porta anche la testata, e non per bellezza: `.ap-contenuto a`
   dà il colore del testo a ogni link del guscio, e con una classe e un
   elemento batte una classe sola. Con `.as-indietro` da solo il testo usciva
   nero sopra una pillola nera — invisibile, e nel modo peggiore: la pillola
   si vedeva, quindi sembrava un bottone rotto e non un bottone mancante.
   È la terza volta che questa regola ruba un colore: c'è un commento che lo
   racconta anche sotto `.ap-sito .ap-btn-primario`. */

.as-eroe .as-indietro {
	position: absolute;
	z-index: 1;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 40px;
	padding: 0 15px;
	border: 1px solid rgba( 255, 255, 255, 0.28 );
	border-radius: 999px;
	background: rgba( 12, 14, 11, 0.62 );
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}

.as-indietro-freccia {
	font-size: 15px;
}

.as-indietro:hover {
	background: var(--as-scuro);
	border-color: #fff;
	color: #fff;
}

.as-indietro:focus-visible {
	outline: 3px solid var(--as-azione);
	outline-offset: 2px;
}

.as-indietro:active {
	transform: translateY( 1px );
}

/* Sul telefono il dito vuole i 44px, e la pillola si stringe: la testata è
   larga quanto lo schermo e a destra c'è già «In evidenza». */

@media ( max-width: 560px ) {

	.as-indietro {
		top: 12px;
		left: 12px;
		min-height: 44px;
		padding: 0 14px;
	}
}

.as-eroe-badge {
	position: absolute;
	top: 16px;
	right: 16px;
	margin: 0;
	display: flex;
	gap: 6px;
}

/* Le iniziali al posto della foto: tagliate dal bordo, come un timbro. Nessun
   riquadro grigio e nessuna scritta di scuse.
   
   Stanno a metà altezza e non in basso: in basso a destra ci sono i due
   bottoni, e le lettere finivano sotto «Ottieni indicazioni». Lo `z-index: 0`
   è la cintura: se un giorno qualcosa si sposta, sotto ci vanno le lettere,
   non il bottone. */

.as-eroe-sigla {
	position: absolute;
	z-index: 0;
	right: -10px;
	top: 50%;
	transform: translateY( -50% );
	font-size: clamp( 96px, 11vw, 128px );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--as-azione);
	opacity: 0.9;
	pointer-events: none;
}

/* ── Il piede della testata ───────────────────────────────────────────
 *
 * Marchio e nome sulla stessa riga, appoggiati in basso. Il logo prima stava
 * in mezzo a destra e solo quando NON c'era la foto: cioè spariva proprio nel
 * caso in cui serve, perché una testata con addosso la foto di un piatto
 * potrebbe essere di chiunque.
 *
 * `align-items: flex-end` e non `center`: il marchio si allinea alla riga di
 * base del nome, e con un titolo su due righe non scivola a mezz'aria.
 */

.as-eroe-fondo {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	max-width: 64%;
}

/* Piastrella bianca e non logo nudo: i loghi degli esercenti sono quasi tutti
   scuri su fondo trasparente, e sopra una foto notturna sparivano. Il fondo
   bianco è la sola cosa che li fa vedere tutti. */

.as-eroe-marchio {
	flex: none;
	display: grid;
	place-items: center;
	width: 86px;
	height: 86px;
	padding: 9px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 8px 24px rgba( 12, 14, 11, 0.4 );
}

.as-eroe-marchio img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Sopra una foto la velatura non basta da sola: la foto la carica l'esercente
   e può essere un muro bianco al sole. L'ombra è l'assicurazione, e su fondo
   scuro non si vede nemmeno. */

.as-eroe-testo {
	max-width: 62%;
	text-shadow: 0 1px 3px rgba( 12, 14, 11, 0.6 );
}

.as-eroe-cat {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--as-azione);
}

.as-logo {
	flex: none;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border-radius: 16px;
	background: var(--as-fondo);
	border: 1px solid var(--as-bordo);
	overflow: hidden;
}

.as-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.as-logo-icona {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-size: 34px;
	line-height: 1;
	background: var(--as-fondo);
}

.as-logo-sigla {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--as-verde);
	color: #fff;
	font-family: var(--as-serif);
	font-size: 28px;
	font-weight: 700;
}

.as-intestazione-testo {
	flex: 1 1 240px;
	min-width: 0;
	padding-bottom: 2px;
}

.as-titolo {
	margin: 0;
	font-family: var(--as-serif);
	font-size: clamp( 26px, 3.4vw, 34px );
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
	text-wrap: balance;
}

.as-meta {
	margin: 4px 0 0;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	font-size: 13px;
}

/* ── I profili social ─────────────────────────────────────────────────
 *
 * Pastiglie tonde sopra la foto: fondo scuro velato e bordo chiaro, perché
 * sotto ci può essere qualunque cosa. Sono icone senza etichetta — quattro
 * parole in fila ruberebbero la riga al nome — e il nome della rete resta per
 * chi legge con la voce, nello `screen-reader-text`.
 *
 * Diventano arancioni al passaggio e non prima: l'arancione qui dentro è già
 * di «Ottieni indicazioni», che è l'azione per cui la scheda esiste. Quattro
 * pastiglie arancioni accanto gliela toglierebbero.
 *
 * Il selettore porta `.ap-sito`: `.ap-sito a` colora i link del guscio con
 * (0,1,1) e batterebbe una classe sola. È la quarta volta — vedi
 * `.as-eroe .as-indietro`.
 */

.as-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.ap-sito .as-social a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba( 255, 255, 255, 0.34 );
	border-radius: 999px;
	background: rgba( 12, 14, 11, 0.55 );
	color: #fff;
	text-decoration: none;
}

.ap-sito .as-social a:hover,
.ap-sito .as-social a:focus-visible {
	background: var(--as-azione);
	border-color: var(--as-azione);
	color: var(--as-azione-testo);
}

.as-social a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
}

.as-social-ico {
	pointer-events: none;
}

.as-cat {
	color: var(--as-verde);
	font-weight: 700;
}

/* Il voto accanto al titolo, sulla testata scura. Le stelle e il numero, e
   quante recensioni: chi guarda una scheda decide in due secondi, e questo è
   il dato che decide. */

.as-voto {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	color: #fff;
}

.as-voto-quante {
	font-weight: 400;
	opacity: 0.75;
}

/* ── Le stelle ────────────────────────────────────────────────────────
 *
 * Due strati sovrapposti: sotto le stelle spente, sopra le stesse accese e
 * tagliate alla percentuale del voto. Così 4,3 si vede per quello che è —
 * arrotondando si perdeva proprio la differenza fra un posto buono e uno
 * molto buono.
 *
 * `1ch` di larghezza per stella non è un numero magico: le due file devono
 * combaciare al pixel, e l'unico modo perché lo facciano in qualunque font è
 * che siano lo stesso testo con la stessa spaziatura.
 */

.as-stelle {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	line-height: 1;
	letter-spacing: 1px;
}

.as-stelle-vuote {
	color: rgba( 255, 255, 255, 0.3 );
}

.as-stelle-piene {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: var(--as-marchio);
}

/* Nel riquadro delle recensioni il fondo è chiaro: le stelle spente devono
   vedersi contro il bianco, non contro il nero della testata. */

.advtr-recensioni-sez .as-stelle-vuote {
	color: var(--as-bordo);
}

/* Sul desktop le azioni stanno nella testata, in basso a destra sopra la foto.
   Sul telefono escono di lì e si incollano in fondo allo schermo: vedi più giù,
   nel blocco del telefono. */

.as-azioni {
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: flex;

	/* Senza, i pulsanti si stirano all'altezza del piu' alto (stretch e' il
	   valore iniziale in flex) e uno di 40px accanto a uno sbagliato ne
	   diventava alto 79. */
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

/* Il prefisso .ap-sito non e' un vezzo: `.ap-sito a` colora i link del sito e
   con (0,1,1) batte `.as-btn-primario` (0,1,0). Senza prefisso il colore
   dichiarato qui sotto non arriva mai a destinazione e i pulsanti restano del
   verde dei link — su fondo corallo faceva 1.82 di contrasto. */
.ap-sito .as-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 14px;
	line-height: 1.2;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid var(--as-bordo);
}

.ap-sito .as-btn-neutro {
	background: var(--as-carta);
	color: var(--as-scuro);
}

/* Il bottone che porta a destinazione — «Ottieni indicazioni» — è l'azione
   principale della scheda, quindi è l'unico pieno arancio. Testo nero: la
   regola vale qui come altrove, e qui più che altrove, perché è il bottone che
   si preme in strada guardando lo schermo di sbieco. */

.ap-sito .as-btn-primario {
	background: var(--as-azione);
	border-color: var(--as-azione);
	color: var(--as-azione-testo);
}

.ap-sito .as-btn-primario:hover {
	background: #d97f00;
	border-color: #d97f00;
	color: var(--as-azione-testo);
}

/* Rete di sicurezza per le emoji rimaste nei template: WordPress le trasforma
   in <img> e su questo sito il CSS di core che le ridimensiona non arriva,
   quindi si presenterebbero a dimensione naturale. */
.ap-sito img.emoji {
	width: 1em;
	height: 1em;
	vertical-align: -0.1em;
}

.as-btn-ico {
	flex: none;
}

.as-btn-primario:hover {
	background: var(--as-azione-premuta, #d97f00);
	color: var(--as-azione-testo);
}

.as-badge {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 6px 0 0;
}

.as-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

.as-pill.oro {
	background: var(--as-azione);
	color: var(--as-azione-testo);
}

.as-pill.verde {
	background: var(--as-verde);
}

/* ── La striscia dei fatti ────────────────────────────────────────────
 *
 * Il problema che risolve: la colonna della descrizione restava vuota perché
 * la descrizione è corta, e sarà quasi sempre corta — l'esercente ha altro da
 * fare che scrivere di sé. Quindi lo spazio lo riempiono i dati che ci sono
 * comunque: se apre adesso, quanto dista, quanto si spende, di che tipo è.
 *
 * Ogni riquadro compare solo se il suo dato esiste. Una striscia con dentro
 * dei trattini è peggio di una striscia più corta.
 */

.as-fatti {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 132px, 1fr ) );
	gap: 8px;
	margin: 0;
	padding: 16px 20px 0;
	list-style: none;
}

/* `display: flex` su una classe batte il `display: none` che il browser dà
   agli elementi con `hidden`: senza questa riga, il riquadro della distanza —
   che nasce nascosto e compare solo se sappiamo dov'è chi guarda — resta lì
   come una casella vuota. Già successo una volta con le frecce dello
   striscione: quando si dichiara un display, si dichiara anche il nascosto. */

.as-fatto[hidden] {
	display: none;
}

.as-fatto {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	border: 1px solid var(--as-bordo);
	border-radius: var(--ap-raggio, 12px);
	background: var(--as-carta);
}

.as-fatto-forte {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--as-scuro);
}

.as-fatto-tenue {
	font-size: 12.5px;
	color: var(--as-grigio);
}

/* Aperto e chiuso non si distinguono per colore: la tavolozza ne ha uno solo,
   e sarebbe quello dell'azione. Si distinguono per peso e per una barretta a
   sinistra — che si vede anche a chi i colori non li separa. */

.as-fatto.e-aperto {
	border-left: 4px solid var(--as-azione);
}

.as-fatto.e-chiuso .as-fatto-forte {
	color: var(--as-grigio);
}

/* ── Corpo a due colonne ─────────────────────────────────────────── */

.as-corpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 330px);
	gap: 26px;
	padding: 6px 26px 30px;
}

.as-sez {
	margin-bottom: 26px;
}

.as-sez h2,
.as-info h2,
.as-offerta-titolo {
	font-family: var(--as-serif);
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--as-scuro);
}

.as-testo {
	color: #3b4856;
}

.as-servizi {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.as-servizi li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border: 1px solid var(--as-bordo);
	border-radius: 999px;
	background: var(--as-carta);
	font-size: 13px;
}

.as-servizi li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--as-verde);
	flex: none;
}

.as-galleria {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 140px, 1fr ) );
	gap: 10px;
}

.as-galleria img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

/* ── Riquadro offerta ────────────────────────────────────────────── */

/* L'offerta è l'unico blocco con un bordo colorato in tutto il sito: è ciò per
   cui l'esercente paga, e va trovata senza cercarla. Bordo pieno a sinistra
   invece del tratteggio: il tratteggio sembrava un segnaposto da riempire. */

.as-offerta {
	padding: 16px 18px;
	margin-bottom: 16px;
	border: 1px solid var(--as-bordo);
	border-left: 4px solid var(--as-azione);
	border-radius: var(--ap-raggio, 12px);
	background: var(--as-evidenza-fondo);
}

.as-offerta-occhiello {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	/* Non arancione: arancione su fondo crema sta sotto 2.5:1, e questa è una
	   riga piccola in maiuscoletto — la combinazione peggiore. Il blocco si
	   riconosce già dal bordo e dal fondo, non serve colorare anche il testo. */
	color: var(--as-scuro);
}

.as-offerta-scade {
	margin: 0 0 10px;
	font-size: 12.5px;
	color: var(--as-grigio);
}

/* La scadenza era arancione e sembrava un avviso di errore. È un fatto, non un
   allarme: si dice col grassetto. */

.as-offerta-scade span {
	font-weight: 700;
	color: var(--as-scuro);
	font-variant-numeric: tabular-nums;
}

.as-offerta-testo {
	margin: 0 0 12px;
	font-size: 13px;
	color: #3b4856;
}

/* Le foto dell'offerta: al massimo tre, dentro la colonna stretta del
   riquadro. Si aprono nel lightbox come quelle della galleria — stesso
   contenitore `data-advtr-galleria`, nessun codice in più. */
.as-offerta-foto {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 64px, 1fr ) );
	gap: 6px;
	margin: 0 0 12px;
}

.as-offerta-foto img {
	display: block;
	width: 100%;
	height: 68px;
	object-fit: cover;
	border-radius: 8px;
}

.as-offerta-foto a:focus-visible {
	outline: 3px solid var(--ap-fuoco, #fe9903);
	outline-offset: 2px;
	border-radius: 8px;
}

.as-coupon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 16px 12px;
	border-radius: 10px;
	background: var(--as-scuro);
	color: #fff;
	text-align: center;
}

.as-coupon-eti {
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #93a3b5;
}

.as-coupon-codice {
	font-family: var(--as-serif);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.18em;
}

.as-coupon-nota {
	font-size: 11px;
	color: #93a3b5;
}

/* ── Riquadro informazioni ───────────────────────────────────────── */

.as-info {
	padding: 16px 18px;
	margin-bottom: 16px;
	border: 1px solid var(--as-bordo);
	border-radius: 12px;
	background: var(--as-carta);
}

.as-info-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
}

.as-info-lista li {
	display: flex;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--as-bordo);
}

.as-info-lista li:last-child {
	border-bottom: 0;
}

.as-ico {
	flex: none;
	width: 20px;
	text-align: center;
}

.as-orari {
	display: flex;
	flex-direction: column;
}

.as-recensione {
	display: inline-block;
	margin-top: 10px;
	font-size: 13px;
}

.as-scheda .advtr-scheda-map {
	height: 190px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--as-bordo);
}

@media (max-width: 860px) {

	.as-corpo {
		grid-template-columns: 1fr;
		padding: 6px 18px 26px;
	}

	.as-intestazione {
		padding: 0 18px 16px;
	}
}

/* ══ Telefono ═════════════════════════════════════════════════════ */
/* Sotto i 560px non basta impilare: alcune scelte vanno cambiate.   */

@media (max-width: 560px) {

	/* Ingresso: una scheda per riga. Due colonne da 165px spezzano le
	   descrizioni su quattro righe e diventano illeggibili. */

	/* La fila arriva ai bordi dello schermo: la carta tagliata a destra è
	   quello che dice «si scorre», senza doverlo scrivere. */

	.ap-coupon-pista {
		margin: 0 -18px;
		padding: 0 18px 6px;
	}

	.ap-coupon-carta {
		flex-basis: 78%;
		max-width: 260px;
	}

	/* Sei righe alte una sotto l'altra volevano dire scorrere per vedere la
	   sesta. Tre per due, quadrate, e ci stanno tutte insieme sopra la piega:
	   ~420px di scorrimento in meno, e la scelta si fa con un colpo d'occhio
	   invece che con il pollice. */

	.ap-intenzioni {
		grid-template-columns: repeat( 3, 1fr );
		gap: 8px;
	}

	.ap-carta {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 8px;
		aspect-ratio: 1;
		padding: 10px 6px;
	}

	.ap-carta-icona {
		margin-bottom: 0;
		width: 40px;
		height: 40px;
		font-size: 19px;
	}

	.ap-carta-titolo {
		font-size: 14px;
		line-height: 1.2;
	}

	/* La sottodicitura («Ristoranti, trattorie, street food») in una cella
	   quadrata non ci sta, e nessuno la legge: chi cerca da mangiare capisce
	   «Mangiare» da solo. Resta nel documento per chi naviga con lo schermo
	   letto ad alta voce, dove non costa spazio. */

	.ap-carta-dett {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.ap-carta-testo {
		min-width: 0;
	}

	/* Il campo resta su una riga sola anche qui: il bottone «Cerca» non è più
	   un bottone largo che schiaccia il campo, è la lente da 44px dentro. La
	   vecchia regola lo mandava a capo e faceva una scatola alta il doppio. */

	.ap-cerca {
		padding: 0 6px 0 14px;
	}

	.ap-titolo {
		font-size: 30px;
	}

	.ap-eroe {
		justify-content: flex-start;
		padding-top: 24px;
	}

	/* Barra della mappa: i chip scorrono in orizzontale invece di
	   impilarsi su quattro righe e spingere giù la mappa. */

	.ae-chip {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 2px;
		margin: 0 -16px;
		padding-left: 16px;
		padding-right: 16px;
	}

	.ae-chip::-webkit-scrollbar {
		display: none;
	}

	.ae-chip-btn {
		flex: none;
		padding: 11px 16px;
	}

	.ae-cerca {
		flex: 1 1 100%;
		padding: 11px 14px;
	}

	/* La mappa non deve occupare tutto lo schermo: l'elenco sotto deve
	   restare intuibile senza scorrere alla cieca. */

	.ae-mappa .advtr-map,
	.advtr-map[style*="height"] {
		height: 52vh !important;
		min-height: 260px;
	}

	.ae-lista-corpo {
		max-height: none;
	}

	/* ── Scheda attività sul telefono ────────────────────────────────
	 *
	 * Le due azioni — chiamare e farsi portare lì — sono il motivo per cui
	 * questa pagina esiste. Restavano in cima e sparivano appena si scorreva:
	 * chi legge gli orari o la descrizione doveva tornare su per premerle.
	 *
	 * Qui escono dal flusso e si incollano in fondo allo schermo. Due
	 * attenzioni che non si vedono ma contano:
	 *
	 * - `env(safe-area-inset-bottom)`: sugli iPhone senza tasto c'è una
	 *   barretta in fondo che si mangerebbe metà bottone;
	 * - a destra restano 64px liberi e la barra passa SOTTO il selettore
	 *   della lingua (che è di terze parti, sta fisso in quell'angolo e ha uno
	 *   z-index altissimo): senza, coprirebbe «Ottieni indicazioni».
	 */

	.as-eroe {
		min-height: 200px;
		padding: 16px;
	}

	.as-eroe.con-foto {
		min-height: 260px;
	}

	/* In colonna e non in riga: a 390px la piastrella si portava via 76px di
	   riga, e «Osteria di Prova Grafica» andava a capo in mezzo al nome. Su un
	   telefono il nome è la cosa che si legge per prima — la larghezza è sua. */

	.as-eroe-fondo {
		flex-direction: column;
		align-items: flex-start;
		max-width: 100%;
		gap: 10px;
	}

	.as-eroe-marchio {
		width: 64px;
		height: 64px;
		padding: 7px;
		border-radius: 14px;
	}

	/* 44px perché qui si tocca col pollice, e sono link piccoli e vicini. */

	.ap-sito .as-social a {
		width: 44px;
		height: 44px;
	}

	.as-eroe-testo {
		max-width: 100%;
	}

	.as-eroe-sigla {
		top: auto;
		bottom: -14px;
		transform: none;
		font-size: 76px;
	}

	.as-azioni {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 800;
		gap: 10px;
		padding: 12px 16px;
		padding-bottom: calc( 12px + env( safe-area-inset-bottom, 0px ) );
		background: var(--as-carta);
		box-shadow: 0 -6px 24px rgba( 12, 14, 11, 0.14 );
		flex-wrap: nowrap;
	}

	.as-azioni .as-btn {
		flex: 1;
		min-height: 52px;
		text-align: center;
	}

	/* «Ottieni indicazioni» è più largo di «Chiama»: è quello che si preme
	   camminando, e il pollice non mira. */

	.as-azioni .as-btn-primario {
		flex: 1.4;
	}

	/* Lo spazio perché la barra non copra la fine della pagina. */

	.ap-contenuto-scheda {
		padding-bottom: calc( 84px + env( safe-area-inset-bottom, 0px ) );
	}

	/* Il selettore della lingua è di terze parti e sta fisso in basso a destra:
	   sulla scheda finiva sopra «Ottieni indicazioni», cioè sopra il bottone
	   per cui esiste la pagina. Qui sale di quanto è alta la barra.
	   
	   `:has()` regge dal 2022 su tutti i browser dei telefoni; se un giorno
	   trovassimo un caso che non lo capisce, il rimedio è la vecchia via —
	   togliere spazio a destra alla barra — ed è peggio: fa un bottone
	   asimmetrico su ogni scheda per un browser che quasi nessuno usa. */

	body:has( .as-azioni ) .gtranslate_wrapper > div {
		bottom: calc( 84px + env( safe-area-inset-bottom, 0px ) ) !important;
	}

	.as-corpo {
		padding: 4px 16px 24px;
		gap: 18px;
	}

	.as-galleria {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.as-scheda .advtr-scheda-map {
		height: 220px;
	}

	.ap-contenuto {
		padding: 20px 16px 36px;
	}

	.ap-nav {
		padding: 14px 16px;
	}

	.ap-pie {
		padding: 18px 16px;
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ap-pie-voci {
		margin-left: 0;
	}
}

/* ── Avviso di vicinanza ─────────────────────────────────────────── */

.ae-chip-prossimita.attivo {
	background: var(--ae-scuro);
	border-color: var(--ae-scuro);
	color: #fff;
}

/* Restava dai tempi in cui `.ap-sito a` rubava il colore ai bottoni. Ora la
   regola dei link non arriva più fin qui, ma la dichiarazione resta: dice a
   voce alta che sopra l'arancio si scrive in nero, ed è la cosa che nel giro di
   qualche mese qualcuno rimetterà bianca senza pensarci. */

.ap-sito .ap-btn-primario {
	color: var(--ap-azione-testo);
}

.ae-vicino {
	position: fixed;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 900;
	width: min(560px, calc(100vw - 24px));
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 44px 14px 16px;
	background: var(--ae-scuro);
	color: #fff;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(12, 14, 11, 0.35);
}

.ae-vicino[hidden] {
	display: none;
}

.ae-vicino-testo {
	flex: 1;
	min-width: 0;
}

.ae-vicino-occhiello {
	margin: 0;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0.75;
}

.ae-vicino-titolo {
	margin: 2px 0 0;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ae-vicino-offerta {
	margin: 2px 0 0;
	font-size: 13px;
	opacity: 0.85;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ae-vicino-chiudi {
	position: absolute;
	top: 8px;
	right: 10px;
	border: 0;
	background: none;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
}

@media (max-width: 600px) {

	.ae-vicino {
		flex-wrap: wrap;
	}

	.ae-vicino .ap-btn {
		width: 100%;
		text-align: center;
	}
}

/* La nota sugli orari: quello che la tabella non sa dire. Tenue, perché è un
   di più — l'orario vero sta nelle righe sopra. */

.as-orari-nota {
	color: var(--as-grigio);
	font-style: italic;
}

/* «Si riceve solo su appuntamento» non è una nota: è la condizione per
   entrare, e quando c'è anche una tabella deve leggersi prima di quella. Sta
   in grassetto e in inchiostro pieno — non in arancio, che qui vorrebbe dire
   «premi». */

.as-orari-appuntamento {
	font-weight: 700;
	color: var(--as-scuro);
}

/* ── «Altri posti a due passi» ────────────────────────────────────────
 *
 * Chiude la scheda con un'uscita invece che con il piede della pagina. Tre
 * carte che scorrono col dito, come lo striscione della home: stesso gesto,
 * nessuna freccia da imparare. */

.as-vicini {
	padding: 4px 20px 24px;
}

.as-vicini h2 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--as-grigio);
}

.as-vicini-pista {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0 0 4px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.as-vicini-pista::-webkit-scrollbar {
	display: none;
}

.as-vicini-pista > li {
	flex: 0 0 200px;
	scroll-snap-align: start;
}

.as-vicini-pista a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 14px;
	border: 1px solid var(--as-bordo);
	border-radius: var(--ap-raggio, 12px);
	background: var(--as-carta);
	text-decoration: none;
}

.as-vicini-pista a:hover {
	border-color: var(--as-scuro);
}

.as-vicini-pista a:focus-visible {
	outline: 3px solid var(--ap-fuoco, #fe9903);
	outline-offset: 2px;
}

.as-vicini-nome {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--as-scuro);
}

.as-vicini-dett {
	font-size: 12.5px;
	color: var(--as-grigio);
}

/* ══ Pagina Offerte ═══════════════════════════════════════════════════
 *
 * Una scaletta, non un elenco: «scade oggi» in evidenza, il resto in ordine.
 * Solo il primo gruppo è marcato — evidenziare tutto è non evidenziare niente,
 * ed era il difetto della versione con il conto alla rovescia rosso su ogni
 * riga.
 */

.ap-off-filtri {
	display: flex;
	gap: 8px;
	margin: 0 0 18px;
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.ap-off-filtri::-webkit-scrollbar {
	display: none;
}

.ap-off-chip {
	flex: none;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid var(--ap-bordo);
	border-radius: 999px;
	background: var(--ap-carta);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--ap-testo);
	white-space: nowrap;
	cursor: pointer;
}

/* Il filtro acceso è nero, non arancio: l'arancio è l'azione, e un filtro
   selezionato è uno stato. */

.ap-off-chip.e-attivo {
	background: var(--ap-scuro);
	border-color: var(--ap-scuro);
	color: #fff;
}

.ap-off-chip:focus-visible {
	outline: 3px solid var(--ap-fuoco);
	outline-offset: 2px;
}

.ap-off-gruppo {
	margin: 0 0 22px;
}

.ap-off-gruppo-tit {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ap-grigio);
}

/* Il gruppo che scade oggi: fondo tenue e barra a sinistra. È l'unico. */

.ap-off-gruppo.e-urgente {
	padding: 14px 14px 4px;
	border-left: 4px solid var(--ap-evidenza-bordo);
	border-radius: var(--ap-raggio);
	background: var(--ap-evidenza-fondo);
}

.ap-off-gruppo.e-urgente .ap-off-gruppo-tit {
	color: var(--ap-testo);
}

.ap-off-lista {
	display: grid;
	gap: 8px;
}

.ap-off-riga {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--ap-bordo);
	border-radius: var(--ap-raggio);
	background: var(--ap-carta);
	color: inherit;
	text-decoration: none;
}

.ap-off-riga:hover {
	border-color: var(--ap-scuro);
}

.ap-off-riga:focus-visible {
	outline: 3px solid var(--ap-fuoco);
	outline-offset: 2px;
}

/* Scaduta mentre si guardava la pagina: resta dov'è, spenta e non cliccabile.
   Non sparisce sotto il dito di chi la stava per premere. */

.ap-off-riga.e-scaduta {
	opacity: 0.5;
	pointer-events: none;
}

.ap-off-foto {
	flex: none;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 10px;
	background: var(--ap-vuoto-fondo);
	overflow: hidden;
}

.ap-off-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Senza foto: le iniziali su fondo scuro, come la testata della scheda. Un
   solo modo di dire «qui l'immagine non c'è», in tutto il sito. */

.ap-off-foto.e-sigla {
	background: var(--ap-scuro);
	color: var(--ap-azione);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.ap-off-testo {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ap-off-titolo {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ap-testo);
}

.ap-off-sotto {
	overflow: hidden;
	font-size: 13px;
	color: var(--ap-grigio);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La scadenza è una parola, non un numero che corre. Quella di oggi è nera e
   grassa; le altre restano tenui: se fossero tutte in evidenza, «oggi» non
   vorrebbe dire niente. */

.ap-off-scade {
	font-size: 13px;
	color: var(--ap-grigio);
}

.ap-off-scade.e-urgente {
	font-weight: 700;
	color: var(--ap-urgenza);
}

/* L'unica pubblicità del sito, ed è la nostra. */

.ap-off-partner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 6px;
	/* L'angolo in basso a destra è occupato in ogni pagina dal selettore della
	   lingua: senza questo spazio l'ultima riga ci finisce sotto. */
	margin-bottom: 64px;
	padding: 18px;
	/* Spazio a destra: questo riquadro è quasi sempre l'ultima cosa della
	   pagina, e in basso a destra c'è il selettore della lingua — fisso, di
	   terze parti, in ogni schermata. Senza, il bottone ci finisce sotto. */
	padding-right: 78px;
	border: 1px dashed var(--ap-bordo);
	border-radius: var(--ap-raggio);
}

.ap-off-partner p {
	margin: 0;
	font-size: 15px;
	color: var(--ap-testo);
}

.ap-off-partner.e-larga {
	justify-content: center;
	text-align: center;
}

@media ( min-width: 760px ) {

	.ap-off-lista {
		grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) );
	}
}

/* ══ Pagina Eventi ════════════════════════════════════════════════════
 *
 * In una città di questa misura il vuoto è lo stato normale di questa pagina,
 * non un errore: gli eventi sono pochi all'anno. Per questo lo stato vuoto è
 * disegnato quanto la lista — vedi `.ap-ev-citta` — e la pagina non si apre mai
 * su una frase di scuse.
 *
 * L'altra idea è che chi propone conta quanto cosa è: l'evento di un partner ha
 * il bordo arancio, la pillola e il bottone verso la sua scheda; la
 * segnalazione di città non ha niente di tutto questo, perché non c'è una
 * scheda dove mandare chi legge.
 */

.ap-ev-filtri {
	display: flex;
	gap: 8px;
	margin: 0 0 18px;
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.ap-ev-filtri::-webkit-scrollbar {
	display: none;
}

.ap-ev-gruppo {
	margin: 0 0 22px;
}

.ap-ev-gruppo-tit {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ap-grigio);
}

.ap-ev-gruppo-tit.e-oggi {
	color: var(--ap-testo);
}

.ap-ev {
	display: flex;
	gap: 14px;
	margin-bottom: 10px;
	padding: 14px;
	border: 1px solid var(--ap-bordo);
	border-radius: var(--ap-raggio);
	background: var(--ap-carta);
}

/* L'evento di un partner: bordo arancio a sinistra. È l'unico bordo colorato
   della pagina — se ce l'avessero tutti non distinguerebbe niente. */

.ap-ev.e-partner {
	border-left: 4px solid var(--ap-evidenza-bordo);
}

/* Finito da poco: resta in cima, spento e non premibile. Chi arriva tardi deve
   capire di essere arrivato tardi, non che non ci fosse niente. */

.ap-ev.e-concluso {
	opacity: 0.5;
}

/* La tessera con la data: si trova il giorno scorrendo, senza leggere. */

.ap-ev-data {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: var(--ap-fondo);
	line-height: 1;
}

.ap-ev-data.e-oggi {
	background: var(--ap-scuro);
}

/* Il mese è arancio solo sulla tessera di oggi, che è nera: sul grigio delle
   altre giornate l'arancio sta a 1.72:1, cioè non si legge — ed è una scritta
   da dieci pixel, la più piccola della pagina. Il colore serviva a far
   risaltare oggi, e su oggi resta. */

.ap-ev-data-mese {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	/* Non il grigio dei testi secondari: su questa tessera dà 4.27:1, appena
	   sotto la soglia, e sono dieci pixel in maiuscoletto. Un gradino più
	   scuro, dalla stessa tavolozza. */
	color: var(--ap-scuro-alto);
}

.ap-ev-data.e-oggi .ap-ev-data-mese {
	color: var(--ap-azione);
}

.ap-ev-data-giorno {
	margin-top: 3px;
	font-size: 24px;
	font-weight: 700;
	color: var(--ap-testo);
}

.ap-ev-data.e-oggi .ap-ev-data-giorno {
	color: #fff;
}

.ap-ev-corpo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.ap-ev-pillola {
	align-self: flex-start;
	padding: 2px 8px;
	border: 1px solid var(--ap-evidenza-bordo);
	border-radius: 999px;
	background: var(--ap-evidenza-fondo);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ap-testo);
}

.ap-ev-titolo {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ap-testo);
}

.ap-ev-fatti,
.ap-ev-quando {
	margin: 0;
	font-size: 13.5px;
	color: var(--ap-grigio);
}

/* «In corso» non è un colore che lampeggia: è nero grassetto. */

.ap-ev-fatti.e-incorso {
	font-weight: 700;
	color: var(--ap-testo);
}

.ap-ev-autore {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 2px;
}

.ap-ev-autore-eti {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ap-grigio);
}

.ap-ev-autore-riga {
	display: flex;
	align-items: center;
	gap: 8px;
}

.ap-ev-autore-sigla {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--ap-fondo);
}

.ap-ev-autore-sigla.e-vuota {
	background: var(--ap-scuro);
	color: var(--ap-azione);
	font-size: 14px;
	font-weight: 700;
}

.ap-ev-autore-sigla img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ap-ev-autore-nome {
	font-size: 15px;
	color: var(--ap-testo);
}

/* Il nome del partner è un link e si vede che lo è; quello della città no,
   perché non porta da nessuna parte. */

.ap-ev-autore-nome.e-link {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.ap-ev-ingresso {
	margin: 2px 0 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ap-testo);
}

.ap-ev-vai {
	align-self: flex-start;
	margin-top: 6px;
}

/* Lo stato vuoto: la città è aperta comunque. */

.ap-ev-citta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 12px;
	padding: 20px;
	border-radius: var(--ap-raggio);
	background: var(--ap-carta);
	border: 1px solid var(--ap-bordo);
}

.ap-ev-citta-testo {
	margin: 0;
	font-size: 16px;
	color: var(--ap-testo);
}

@media ( min-width: 760px ) {

	.ap-ev-data {
		width: 72px;
		height: 72px;
	}

	.ap-ev-data-giorno {
		font-size: 34px;
	}

	.ap-ev-titolo {
		font-size: 23px;
	}
}