/* =============================================================================
   BBO Annunci — TEMI E SKIN DELL'ANNUNCIO
   -----------------------------------------------------------------------------
   COSA C'ERA CHE NON ANDAVA
   Le skin da sole cambiano solo l'ordine dei blocchi: un coworking creativo
   e una sala riunioni formale uscirebbero identici.

   COME È FATTO ORA
   Due assi indipendenti, che si combinano:

     bbo-tema-*   decide colori, decoro di fondo e carattere dei titoli,
                  in base al gruppo del tipo di spazio (lavoro, riunioni, impresa, speciali)
     bbo-skin-*   decide l'impaginazione: dove sta il titolo, quanto pesa la
                  foto, come si dispongono i pacchetti

   Quattro temi per cinque skin fanno venti combinazioni realmente diverse.

   I DECORI SONO DISEGNATI, NON FOTOGRAFATI
   I motivi di fondo sono SVG scritti dentro il foglio di stile: non pesano
   nulla, non richiedono una richiesta al server, restano nitidi a ogni
   ingrandimento e non hanno licenze da rispettare. Le fotografie restano
   quelle che carica l'inserzionista, dove servono davvero.
   ========================================================================== */

/* =============================================================================
   1. TEMI PER GRUPPO DI SPAZI
   ========================================================================== */

.bbo-annuncio {
	/* Valori di ripiego: se un gruppo non fosse riconosciuto, la pagina resta
	   coerente col resto del portale invece di perdere il colore. */
	--t-scuro: var(--bbo-ink, #163543);
	--t-medio: var(--bbo-primario, #1f78b4);
	--t-acc: var(--bbo-accento, #d14a18);
	--t-luce: var(--bbo-oro, #e8a33d);
	--t-carta: var(--bbo-carta, #f5f8fa);
	--t-riga: var(--bbo-bordo, #d7e2e8);
	--t-su-scuro: #ffffff;
	--t-titolo: 800 clamp(calc(1.9 * var(--bbo-u, 16px)), 6vw, calc(3.1 * var(--bbo-u, 16px)))/1.05 var(--bbo-display);
	--t-trama: none;
	--t-trama-opacita: .06;
}

/* --- Postazioni e uffici: il verde del marchio, ordinato e tranquillo ---- */
.bbo-tema-lavoro {
	--t-scuro: var(--bbo-ink, #163543);
	--t-medio: var(--bbo-primario, #1f78b4);
	--t-acc: var(--bbo-accento, #d14a18);
	--t-luce: var(--bbo-oro, #e8a33d);
	--t-carta: var(--bbo-carta, #f5f8fa);
	--t-riga: var(--bbo-bordo, #d7e2e8);
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='14' cy='14' r='1.4' fill='%232f4b3a'/%3E%3C/svg%3E");
}

/* --- Riunioni e formazione: blu notte e oro, formale -------------------- */
.bbo-tema-riunioni {
	--t-scuro: #18233a;
	--t-medio: #2c3e63;
	--t-acc: var(--bbo-oro, #e8a33d);
	--t-luce: #eed9a6;
	--t-carta: #f6f6f2;
	--t-riga: #dcdde3;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 39.5h40' stroke='%232c3e63' stroke-width='1'/%3E%3C/svg%3E");
}

/* --- Servizi per le imprese: grafite e verde acqua, essenziale ---------- */
.bbo-tema-impresa {
	--t-scuro: #1e2427;
	--t-medio: #33484d;
	--t-acc: #2f8f8a;
	--t-luce: #bfe0dc;
	--t-carta: #f4f6f5;
	--t-riga: #d9e0df;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M36 0H0v36' fill='none' stroke='%2333484d' stroke-width='.8'/%3E%3C/svg%3E");
}

/* --- Spazi speciali (coliving, laboratori, studi creativi): terracotta e
       fiori, il lato più allegro del marchio -------------------------------- */
.bbo-tema-speciali {
	--t-scuro: #3a2420;
	--t-medio: #7a4a3a;
	--t-acc: var(--bbo-accento, #d14a18);
	--t-luce: #f1c9a5;
	--t-carta: #fbf5ef;
	--t-riga: #ecdccd;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%237a4a3a' stroke-width='1.1'%3E%3Ccircle cx='28' cy='22' r='4'/%3E%3Ccircle cx='22' cy='28' r='4'/%3E%3Ccircle cx='34' cy='28' r='4'/%3E%3Ccircle cx='28' cy='34' r='4'/%3E%3C/g%3E%3C/svg%3E");
}

/* =============================================================================
   2. ELEMENTI COMUNI, VESTITI DAL TEMA
   ========================================================================== */

.bbo-annuncio {
	position: relative;
	background: var(--t-carta, var(--bbo-carta, #f5f8fa));
	padding-bottom: calc(2 * var(--bbo-u, 16px));
}

/* La trama di fondo: dietro tutto, appena percepibile. Serve a dare carattere
   alla pagina anche quando l'inserzionista non ha caricato una sola foto. */
.bbo-annuncio::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--t-trama, none);
	opacity: var(--t-trama-opacita, .06);
	pointer-events: none;
	z-index: 0;
}
.bbo-annuncio > * { position: relative; z-index: 1; }

.bbo-annuncio h1,
.bbo-annuncio h2,
.bbo-annuncio h3 { color: var(--t-scuro, var(--bbo-ink, #163543)); }
.bbo-annuncio .bbo-eyebrow { color: var(--t-medio, var(--bbo-primario, #1f78b4)); }

/* Titoli di sezione con il segno del tema. */
.bbo-annuncio .bbo-sezione > h2 {
	display: flex;
	align-items: center;
	gap: calc(.6 * var(--bbo-u, 16px));
}
.bbo-annuncio .bbo-sezione > h2::before {
	content: "";
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--t-acc, var(--bbo-accento, #d14a18));
	flex: 0 0 auto;
}

.bbo-annuncio .bbo-badge { background: var(--t-luce, var(--bbo-oro, #e8a33d)); color: var(--t-scuro, var(--bbo-ink, #163543)); }
.bbo-annuncio .bbo-badge--prezzo { background: var(--t-scuro, var(--bbo-ink, #163543)); color: var(--t-luce, var(--bbo-oro, #e8a33d)); }
.bbo-annuncio .bbo-btn--primario { background: var(--t-acc, var(--bbo-accento, #d14a18)); color: #fff; }
.bbo-annuncio .bbo-btn--primario:hover { filter: brightness(.92); }
.bbo-annuncio .bbo-btn--ghost { border-color: var(--t-riga, var(--bbo-bordo, #d7e2e8)); color: var(--t-medio, var(--bbo-primario, #1f78b4)); }
.bbo-annuncio .bbo-tag { background: #fff; border: 1px solid var(--t-riga, var(--bbo-bordo, #d7e2e8)); color: var(--t-medio, var(--bbo-primario, #1f78b4)); text-decoration: none; border-radius: 999px; font-size: calc(.8 * var(--bbo-u, 16px)); padding: .35em .8em; }
.bbo-annuncio .bbo-incluso li::before { color: var(--t-acc, var(--bbo-accento, #d14a18)); }
.bbo-annuncio .bbo-lista-servizi li::before { color: var(--t-acc, var(--bbo-accento, #d14a18)); }
.bbo-annuncio .bbo-passi li::before { background: var(--t-acc, var(--bbo-accento, #d14a18)); color: #fff; }
.bbo-annuncio .bbo-tabella th { color: var(--t-medio, var(--bbo-primario, #1f78b4)); }
.bbo-annuncio .bbo-tabella td,
.bbo-annuncio .bbo-tabella th { border-bottom-color: var(--t-riga, var(--bbo-bordo, #d7e2e8)); }
.bbo-annuncio .bbo-pacchetto { border-color: var(--t-riga, var(--bbo-bordo, #d7e2e8)); }
.bbo-annuncio .bbo-prezzo { color: var(--t-scuro, var(--bbo-ink, #163543)); }
.bbo-annuncio .bbo-punto {
	background: #fff;
	border-color: var(--t-riga, var(--bbo-bordo, #d7e2e8));
	border-left: 3px solid var(--t-acc, var(--bbo-accento, #d14a18));
}
.bbo-annuncio .bbo-faq__item { border-bottom-color: var(--t-riga, var(--bbo-bordo, #d7e2e8)); }
.bbo-annuncio .bbo-cta-finale {
	background: var(--t-scuro, var(--bbo-ink, #163543));
	border: 0;
	color: var(--t-su-scuro, #ffffff);
}
.bbo-annuncio .bbo-cta-finale h2 { color: var(--t-su-scuro, #ffffff); }
.bbo-annuncio .bbo-cta-finale h2::before { background: var(--t-luce, var(--bbo-oro, #e8a33d)); }

/* =============================================================================
   3. IL FRONTESPIZIO
   -----------------------------------------------------------------------------
   La fotografia di copertina diventa fondo, non riquadro. Sotto una velatura
   che nasce dal colore del tema: così il titolo resta leggibile su qualunque
   foto, comprese quelle sovraesposte che i telefoni producono in interni.
   ========================================================================== */

.bbo-annuncio .bbo-hero {
	position: relative;
	margin: 0 0 calc(2.5 * var(--bbo-u, 16px));
	padding: 0;
	border-radius: 0;
	overflow: hidden;
}
.bbo-annuncio .bbo-copertina {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
	z-index: 0;
}
.bbo-annuncio .bbo-copertina img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bbo-annuncio .bbo-hero__testo {
	position: relative;
	z-index: 2;
	padding: calc(3.5 * var(--bbo-u, 16px)) calc(1.5 * var(--bbo-u, 16px)) calc(2 * var(--bbo-u, 16px));
}

/* La velatura, generata dai colori del tema. */
.bbo-annuncio .bbo-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Prima la versione neutra, che funziona ovunque e sopravvive a qualunque
	   minificatore: se resta solo questa il titolo è comunque leggibile. */
	background: linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, .82));
	/* Poi la stessa velatura tinta col colore del tema, dove è supportata. */
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--t-scuro, var(--bbo-ink, #163543)) 35%, transparent) 0%,
		color-mix(in srgb, var(--t-scuro, var(--bbo-ink, #163543)) 88%, transparent) 100%
	);
}

/* Senza copertina non c'è nulla da velare: fondo pieno del tema.
   La classe arriva dal PHP invece che da :has(), perché i minificatori CSS di
   alcuni plugin di ottimizzazione scartano le regole con selettori che non
   sanno interpretare, e con loro sparirebbe lo sfondo del frontespizio. */
.bbo-annuncio .bbo-hero--senza-foto { background: var(--t-scuro, var(--bbo-ink, #163543)); }
.bbo-annuncio .bbo-hero--senza-foto::after { display: none; }

.bbo-annuncio .bbo-hero .bbo-eyebrow { color: var(--t-luce, var(--bbo-oro, #e8a33d)); }
.bbo-annuncio .bbo-hero .bbo-titolo {
	font: var(--t-titolo);
	color: #fff;
	letter-spacing: -.03em;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
	max-width: 20ch;
}
.bbo-annuncio .bbo-hero .bbo-sottotitolo { color: rgba(255, 255, 255, .88); max-width: 46ch; }
.bbo-annuncio .bbo-hero .bbo-badge { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(4px); }
.bbo-annuncio .bbo-hero .bbo-badge--prezzo { background: var(--t-luce, var(--bbo-oro, #e8a33d)); color: var(--t-scuro, var(--bbo-ink, #163543)); }
.bbo-annuncio .bbo-hero .bbo-btn--ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.bbo-annuncio .bbo-logo {
	position: relative;
	z-index: 2;
	margin-bottom: var(--bbo-u, 16px);
}
.bbo-annuncio .bbo-logo img {
	width: 84px;
	height: 84px;
	border: 3px solid #fff;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}

/* =============================================================================
   4. LE CINQUE SKIN: IMPAGINAZIONI DAVVERO DIVERSE
   ========================================================================== */

/* --- VETRINA — la foto comanda ------------------------------------------- */
.bbo-skin-vetrina .bbo-hero { min-height: 62vh; display: flex; align-items: flex-end; }
.bbo-skin-vetrina .bbo-hero__testo { padding: calc(4 * var(--bbo-u, 16px)) calc(1.75 * var(--bbo-u, 16px)) calc(2.5 * var(--bbo-u, 16px)); width: 100%; }
.bbo-skin-vetrina .bbo-hero .bbo-titolo { font-size: clamp(calc(2.1 * var(--bbo-u, 16px)), 7vw, calc(3.6 * var(--bbo-u, 16px))); }
.bbo-skin-vetrina .bbo-griglia-foto { grid-template-columns: repeat(2, 1fr); gap: calc(.35 * var(--bbo-u, 16px)); }
.bbo-skin-vetrina .bbo-foto:first-child { grid-column: span 2; }
.bbo-skin-vetrina .bbo-foto:first-child img { aspect-ratio: 16/9; }

/* --- LISTINO — il prezzo comanda ----------------------------------------- */
.bbo-skin-listino .bbo-hero { min-height: 34vh; }
.bbo-skin-listino .bbo-hero__testo { padding: calc(2.5 * var(--bbo-u, 16px)) calc(1.5 * var(--bbo-u, 16px)) calc(1.75 * var(--bbo-u, 16px)); }
.bbo-skin-listino .bbo-hero .bbo-titolo { font-size: clamp(calc(1.7 * var(--bbo-u, 16px)), 5vw, calc(2.6 * var(--bbo-u, 16px))); }
.bbo-skin-listino .bbo-pacchetti { margin-top: calc(-2 * var(--bbo-u, 16px)); }
.bbo-skin-listino .bbo-griglia-pacchetti { gap: calc(.5 * var(--bbo-u, 16px)); }
.bbo-skin-listino .bbo-pacchetto {
	border: 0;
	border-top: 4px solid var(--t-acc, var(--bbo-accento, #d14a18));
	border-radius: 0;
	background: #fff;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}
.bbo-skin-listino .bbo-prezzo {
	font-size: clamp(calc(2 * var(--bbo-u, 16px)), 7vw, calc(2.8 * var(--bbo-u, 16px)));
	color: var(--t-acc, var(--bbo-accento, #d14a18));
	line-height: 1;
}
.bbo-skin-listino .bbo-tabella { font-size: calc(.95 * var(--bbo-u, 16px)); }
.bbo-skin-listino .bbo-tabella tr:nth-child(even) td { background: var(--t-carta, var(--bbo-carta, #f5f8fa)); }

/* --- ESPERIENZA — il racconto comanda ------------------------------------ */
.bbo-skin-esperienza .bbo-hero { min-height: 48vh; }
.bbo-skin-esperienza .bbo-come { position: relative; padding-left: calc(1.5 * var(--bbo-u, 16px)); }
/* Una linea verticale unisce i passi: si legge come un percorso, non come
   un elenco puntato. */
.bbo-skin-esperienza .bbo-passi { gap: calc(1.5 * var(--bbo-u, 16px)); }
.bbo-skin-esperienza .bbo-passi::before {
	content: "";
	position: absolute;
	left: calc(2.45 * var(--bbo-u, 16px));
	top: calc(3.5 * var(--bbo-u, 16px));
	bottom: var(--bbo-u, 16px);
	width: 2px;
	background: linear-gradient(var(--t-acc, var(--bbo-accento, #d14a18)), transparent);
}
.bbo-skin-esperienza .bbo-passi li { padding-left: calc(3.2 * var(--bbo-u, 16px)); }
.bbo-skin-esperienza .bbo-passi li::before {
	width: calc(2.4 * var(--bbo-u, 16px));
	height: calc(2.4 * var(--bbo-u, 16px));
	font-size: var(--bbo-u, 16px);
	box-shadow: 0 0 0 5px var(--t-carta, var(--bbo-carta, #f5f8fa));
}
.bbo-skin-esperienza .bbo-intro .bbo-lead {
	font-size: calc(1.3 * var(--bbo-u, 16px));
	line-height: 1.5;
	color: var(--t-medio, var(--bbo-primario, #1f78b4));
	border-left: 4px solid var(--t-acc, var(--bbo-accento, #d14a18));
	padding-left: var(--bbo-u, 16px);
}

/* --- PORTFOLIO — le immagini comandano, il testo accompagna --------------- */
.bbo-skin-portfolio .bbo-hero { min-height: 40vh; }
.bbo-skin-portfolio .bbo-hero .bbo-titolo { font-size: clamp(calc(1.8 * var(--bbo-u, 16px)), 5.5vw, calc(2.9 * var(--bbo-u, 16px))); }
.bbo-skin-portfolio .bbo-galleria { margin-inline: calc(-1 * var(--bbo-sp, var(--bbo-u, 16px))); }
.bbo-skin-portfolio .bbo-galleria > h2 { padding-inline: var(--bbo-sp, var(--bbo-u, 16px)); }
/* Colonne a incastro: le foto mantengono le proprie proporzioni invece di
   essere tutte ritagliate in quadrati identici. */
.bbo-skin-portfolio .bbo-griglia-foto {
	display: block;
	column-count: 2;
	column-gap: calc(.3 * var(--bbo-u, 16px));
}
.bbo-skin-portfolio .bbo-foto {
	display: block;
	break-inside: avoid;
	margin-bottom: calc(.3 * var(--bbo-u, 16px));
}
.bbo-skin-portfolio .bbo-foto img { aspect-ratio: auto; height: auto; border-radius: 0; }
.bbo-skin-portfolio .bbo-intro { max-width: 62ch; margin-inline: auto; }
.bbo-skin-portfolio .bbo-testo { font-size: calc(1.05 * var(--bbo-u, 16px)); line-height: 1.75; }

/* --- ESSENZIALE — nessuna foto in testa, solo tipografia ----------------- */
.bbo-skin-essenziale .bbo-hero { min-height: 0; background: none; }
.bbo-skin-essenziale .bbo-hero::after { display: none; }
.bbo-skin-essenziale .bbo-copertina { position: static; margin-top: calc(1.5 * var(--bbo-u, 16px)); border-radius: var(--bbo-r, 14px); }
.bbo-skin-essenziale .bbo-copertina img { aspect-ratio: 21/9; }
.bbo-skin-essenziale .bbo-hero__testo {
	padding: calc(2.5 * var(--bbo-u, 16px)) 0 0;
	border-bottom: 3px solid var(--t-scuro, var(--bbo-ink, #163543));
	padding-bottom: calc(1.5 * var(--bbo-u, 16px));
}
.bbo-skin-essenziale .bbo-hero .bbo-titolo { color: var(--t-scuro, var(--bbo-ink, #163543)); text-shadow: none; max-width: 26ch; }
.bbo-skin-essenziale .bbo-hero .bbo-eyebrow { color: var(--t-medio, var(--bbo-primario, #1f78b4)); }
.bbo-skin-essenziale .bbo-hero .bbo-sottotitolo { color: var(--bbo-tenue, #5c6d76); }
.bbo-skin-essenziale .bbo-hero .bbo-badge { background: var(--t-luce, var(--bbo-oro, #e8a33d)); color: var(--t-scuro, var(--bbo-ink, #163543)); backdrop-filter: none; }
.bbo-skin-essenziale .bbo-hero .bbo-btn--ghost { border-color: var(--t-riga, var(--bbo-bordo, #d7e2e8)); color: var(--t-medio, var(--bbo-primario, #1f78b4)); }
.bbo-skin-essenziale .bbo-sezione { border-bottom: 1px solid var(--t-riga, var(--bbo-bordo, #d7e2e8)); padding-bottom: calc(1.5 * var(--bbo-u, 16px)); }
.bbo-skin-essenziale .bbo-sezione:last-child { border-bottom: 0; }
.bbo-skin-essenziale .bbo-testo { font-size: calc(1.08 * var(--bbo-u, 16px)); line-height: 1.7; }

/* =============================================================================
   5. SCHERMI LARGHI
   ========================================================================== */

@media (min-width: 780px) {
	.bbo-annuncio .bbo-hero__testo { padding-inline: calc(3 * var(--bbo-u, 16px)); }
	.bbo-skin-vetrina .bbo-hero__testo { padding: calc(5 * var(--bbo-u, 16px)) calc(3 * var(--bbo-u, 16px)) calc(3 * var(--bbo-u, 16px)); }
	.bbo-skin-vetrina .bbo-griglia-foto { grid-template-columns: repeat(4, 1fr); }
	.bbo-skin-vetrina .bbo-foto:first-child { grid-column: span 2; grid-row: span 2; }
	.bbo-skin-portfolio .bbo-griglia-foto { column-count: 3; }
	.bbo-skin-listino .bbo-griglia-pacchetti { grid-template-columns: repeat(3, 1fr); }
	.bbo-skin-essenziale .bbo-hero__testo { padding-inline: 0; }
	.bbo-skin-essenziale { max-width: calc(46 * var(--bbo-u, 16px)); margin-inline: auto; }
}

/* =============================================================================
   6. ANTEPRIMA NEL MODULO
   Le vetrine dei layout mostrano l'annuncio vero, rimpicciolito: la trama di
   fondo a quella scala diventa rumore e va tolta.
   ========================================================================== */

.bbo-tpl__scorri .bbo-annuncio::before { display: none; }
.bbo-tpl__scorri .bbo-annuncio { padding-bottom: 0; }
.bbo-tpl__scorri .bbo-hero { min-height: 240px; }

@media (prefers-reduced-motion: reduce) {
	.bbo-annuncio .bbo-btn--primario:hover { filter: none; }
}

/* =============================================================================
   7. COPERTINA GENERICA
   Quando l'inserzionista non ha ancora caricato una foto usiamo quella della
   categoria. È un ripiego, e si vede che lo è: piu' desaturata e virata verso
   il colore del tema, cosi' non si confonde con una fotografia vera del
   locale. Nessun testo alternativo: e' decorazione, non informazione, e uno
   screen reader non ha nulla da guadagnarci.
   ========================================================================== */

.bbo-copertina--generica img {
	filter: saturate(.55) contrast(.92);
}
.bbo-copertina--generica::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--t-medio, var(--bbo-primario, #1f78b4));
	mix-blend-mode: color;
	opacity: .45;
}
.bbo-copertina--generica { position: absolute; inset: 0; }

/* =============================================================================
   8. PULSANTI DI CONTATTO: BLOCCO SOTTO I PACCHETTI E BARRA FISSA
   -----------------------------------------------------------------------------
   I pulsanti stanno in pagina subito sotto i pacchetti, dove si decide. Da lì
   in poi li tiene a portata una barra fissa, che compare quando quel blocco
   esce dallo schermo e sparisce quando rientra.

   Blocco e barra hanno lo stesso vestito: il verde del marchio con un
   rametto disegnato a filo, sobrio ma caldo. È il momento in cui il
   visitatore decide di scrivere: deve sembrare un invito a passare, non un
   modulo. I pulsanti hanno colori fissi (accento del marchio, verde
   WhatsApp, bianco), uguali in tutti i temi.
   ========================================================================== */

/* Il contenitore della barra serve solo a portare la classe .bbo-annuncio:
   non deve occupare spazio né disegnare la trama di fondo dell'annuncio. */
.bbo-annuncio--fissa {
	padding: 0;
	background: none;
}
.bbo-annuncio--fissa::before { display: none; }

/* --- Il fondo: verde del marchio con un rametto disegnato a filo ---------- */
.bbo-cta-fissa,
.bbo-annuncio .bbo-cta-finale {
	background-color: var(--bbo-primario, #1f78b4);
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M20 110C40 80 50 50 90 30'/%3E%3Cpath d='M45 78c-10-6-14-16-10-24 9 3 13 13 10 24zM62 58c-2-11 3-20 12-22 2 9-4 18-12 22zM70 50c10-4 20-1 24 7-9 4-19 1-24-7z'/%3E%3Ccircle cx='128' cy='86' r='6'/%3E%3Ccircle cx='120' cy='94' r='6'/%3E%3Ccircle cx='136' cy='94' r='6'/%3E%3Ccircle cx='128' cy='102' r='6'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(135deg, var(--bbo-primario, #1f78b4) 0%, color-mix(in srgb, var(--bbo-primario) 80%, #000) 100%);
	background-size: 160px 120px, auto;
	background-repeat: repeat, no-repeat;
}
.bbo-annuncio .bbo-cta-finale {
	border: 0;
	color: #fff;
	box-shadow: 0 14px 34px color-mix(in srgb, var(--bbo-primario) 25%, transparent);
}
.bbo-annuncio .bbo-cta-finale h2 {
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* --- I quattro pulsanti: tutti pieni, tutti vivaci ---------------------- */
.bbo-cta-fissa .bbo-btn,
.bbo-annuncio .bbo-cta-finale .bbo-btn {
	border: 0;
	font-weight: 800;
	/* Effetto «adesivo»: un bordino d'ombra sotto, come i bottoni di un
	   gioco, che li stacca dal fondo decorato. */
	box-shadow: 0 3px 0 rgba(0, 0, 0, .28), 0 8px 18px rgba(0, 0, 0, .2);
	transition: transform .12s ease, filter .15s ease, box-shadow .12s ease;
}
.bbo-cta-fissa .bbo-btn:hover,
.bbo-annuncio .bbo-cta-finale .bbo-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.07) saturate(1.1);
}
.bbo-cta-fissa .bbo-btn:active,
.bbo-annuncio .bbo-cta-finale .bbo-btn:active {
	transform: translateY(2px);
	box-shadow: 0 1px 0 rgba(0, 0, 0, .28), 0 3px 8px rgba(0, 0, 0, .2);
}

/* Chiama ora: l'accento del marchio. */
.bbo-cta-fissa .bbo-btn--primario,
.bbo-annuncio .bbo-cta-finale .bbo-btn--primario {
	background: var(--bbo-accento, #d14a18);
	color: #fff;
}
/* WhatsApp: il suo verde, che tutti riconoscono. */
.bbo-cta-fissa .bbo-btn--wa,
.bbo-annuncio .bbo-cta-finale .bbo-btn--wa {
	background: #25d366;
	color: color-mix(in srgb, var(--bbo-verde) 60%, #000);
}



/* --- La barra fissa ----------------------------------------------------- */
.bbo-cta-fissa {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 940;
	padding: calc(.55 * var(--bbo-u, 16px)) calc(.75 * var(--bbo-u, 16px)) calc(calc(.55 * var(--bbo-u, 16px)) + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -6px 24px color-mix(in srgb, var(--bbo-ink) 30%, transparent);
	/* Parte fuori campo e sale: comparire di colpo a metà lettura distrae. */
	transform: translateY(110%);
	transition: transform .22s ease;
}
.bbo-cta-fissa.is-on { transform: translateY(0); }

.bbo-cta-fissa__interno {
	display: flex;
	align-items: center;
	gap: calc(.75 * var(--bbo-u, 16px));
	max-width: 1100px;
	margin: 0 auto;
}
/* Il nome dell'attività sta su un'etichetta bianca velata: direttamente sul
   fondo a palloncini si perdeva tra le decorazioni. */
.bbo-cta-fissa__nome {
	display: none;
	margin: 0;
	padding: calc(.5 * var(--bbo-u, 16px)) var(--bbo-u, 16px);
	border-radius: 999px;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 10px color-mix(in srgb, var(--bbo-ink) 18%, transparent);
	color: color-mix(in srgb, var(--bbo-primario) 78%, #000);
	font-weight: 800;
	font-size: calc(.95 * var(--bbo-u, 16px));
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bbo-cta-fissa .bbo-cta {
	display: flex;
	flex-wrap: nowrap;
	gap: calc(.45 * var(--bbo-u, 16px));
	margin: 0;
	flex: 1;
	min-width: 0;
}
.bbo-cta-fissa .bbo-btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	padding: .55em .8em;
	font-size: calc(.9 * var(--bbo-u, 16px));
	justify-content: center;
	white-space: nowrap;
}


/* --- Telefono -------------------------------------------------------------
   Tutte e quattro le etichette restano leggibili: i pulsanti diventano
   tessere con l'icona sopra e il testo sotto, su due righe se serve, come la
   barra di un'app. Quattro colonne uguali, carattere più piccolo ma pieno. */
@media (max-width: 640px) {
	.bbo-cta-fissa {
		padding: calc(.4 * var(--bbo-u, 16px)) calc(.4 * var(--bbo-u, 16px)) calc(calc(.4 * var(--bbo-u, 16px)) + env(safe-area-inset-bottom, 0px));
	}
	.bbo-cta-fissa .bbo-cta { gap: calc(.3 * var(--bbo-u, 16px)); }
	.bbo-cta-fissa .bbo-btn {
		flex-direction: column;
		gap: calc(.2 * var(--bbo-u, 16px));
		min-height: 54px;
		padding: calc(.4 * var(--bbo-u, 16px)) calc(.2 * var(--bbo-u, 16px)) calc(.35 * var(--bbo-u, 16px));
		border-radius: 12px;
		font-size: calc(.68 * var(--bbo-u, 16px));
		line-height: 1.12;
		letter-spacing: -.005em;
		white-space: normal;
		text-align: center;
		overflow-wrap: anywhere;
	}
	.bbo-cta-fissa .bbo-btn .bbo-ico {
		width: 17px;
		height: 17px;
		margin: 0;
	}
	.bbo-cta-fissa .bbo-btn > span { display: block; }

	/* Nel blocco in pagina c'è più spazio: griglia due per due, testo
	   intero su una riga quando ci sta. */
	.bbo-annuncio .bbo-cta-finale .bbo-cta {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: calc(.5 * var(--bbo-u, 16px));
	}
	.bbo-annuncio .bbo-cta-finale .bbo-btn {
		min-height: 46px;
		padding: .55em .6em;
		border-radius: 14px;
		font-size: calc(.84 * var(--bbo-u, 16px));
		line-height: 1.15;
		white-space: normal;
		text-align: center;
	}
}
@media (max-width: 360px) {
	.bbo-cta-fissa .bbo-btn { font-size: calc(.63 * var(--bbo-u, 16px)); min-height: 52px; }
	.bbo-cta-fissa .bbo-btn .bbo-ico { width: 15px; height: 15px; }
}

/* --- Tablet: barra a tutta larghezza, testo un filo più piccolo --------- */
@media (min-width: 641px) and (max-width: 899px) {
	.bbo-cta-fissa .bbo-btn { font-size: calc(.84 * var(--bbo-u, 16px)); padding-inline: .6em; }
}

/* --- Computer: pillola flottante centrata, staccata dal fondo ----------- */
@media (min-width: 900px) {
	.bbo-cta-fissa {
		left: 50%;
		right: auto;
		bottom: var(--bbo-u, 16px);
		width: min(1060px, calc(100vw - calc(3 * var(--bbo-u, 16px))));
		transform: translate(-50%, 200%);
		padding: calc(.65 * var(--bbo-u, 16px)) calc(.8 * var(--bbo-u, 16px));
		border: 2px solid rgba(255, 255, 255, .22);
		border-radius: 999px;
		box-shadow: 0 12px 36px color-mix(in srgb, var(--bbo-primario) 38%, transparent);
	}
	.bbo-cta-fissa.is-on { transform: translate(-50%, 0); }
	.bbo-cta-fissa__nome { display: block; flex: 0 1 auto; max-width: 26ch; min-width: 0; }
	.bbo-cta-fissa .bbo-cta { flex: 0 1 auto; margin-left: auto; }
	.bbo-cta-fissa .bbo-btn { flex: 0 0 auto; }
}

/* Su carta non ha senso, e non deve coprire l'ultima riga di testo. */
@media print {
	.bbo-cta-fissa { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.bbo-cta-fissa,
	.bbo-cta-fissa .bbo-btn,
	.bbo-annuncio .bbo-cta-finale .bbo-btn { transition: none; }
}