/* =============================================================================
   FEC Annunci — TEMI E SKIN DELL'ANNUNCIO
   -----------------------------------------------------------------------------
   COSA C'ERA CHE NON ANDAVA
   Le cinque skin cambiavano solo l'ordine dei blocchi e condividevano lo stesso
   foglio di stile. Una pasticceria e un service audio-luci uscivano identici:
   stesso viola, stessi caratteri, stessa aria. Su un portale che vive di
   riconoscibilità è un difetto grave, non un dettaglio.

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

     fec-tema-*   decide colori, decoro di fondo e carattere dei titoli,
                  in base al mestiere (dolci, musica, avventura...)
     fec-skin-*   decide l'impaginazione: dove sta il titolo, quanto pesa la
                  foto, come si dispongono i pacchetti

   Dieci temi per cinque skin fanno cinquanta 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 MERCEOLOGICO
   ========================================================================== */

.fec-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: #1b1140;
	--t-medio: #4b2e83;
	--t-acc: #ff3d7f;
	--t-luce: #ffc53d;
	--t-carta: #fbf7ff;
	--t-riga: #ddd2ee;
	--t-su-scuro: #ffffff;
	--t-titolo: 800 clamp(1.9rem, 6vw, 3.1rem)/1.05 var(--fec-display);
	--t-trama: none;
	--t-trama-opacita: .06;
}

/* --- Location e spazi: notturno, dorato, teatrale ------------------------ */
.fec-tema-location {
	--t-scuro: #17123a;
	--t-medio: #3d3270;
	--t-acc: #d4a441;
	--t-luce: #f0d894;
	--t-carta: #faf7f0;
	--t-riga: #e3dcc9;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 6a12 12 0 0 1 12 12v36H18V18A12 12 0 0 1 30 6z' fill='none' stroke='%23d4a441' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* --- Food & beverage: caldo, terroso, conviviale ------------------------- */
.fec-tema-food {
	--t-scuro: #3d1f14;
	--t-medio: #8c4a2f;
	--t-acc: #d2691e;
	--t-luce: #f2b880;
	--t-carta: #fdf6ee;
	--t-riga: #ead9c6;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M14 8v14a4 4 0 0 0 8 0V8M18 22v18M34 8c-4 4-4 12 0 16v16' fill='none' stroke='%23d2691e' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Dolci: zucchero, glassa, rosa cipria -------------------------------- */
.fec-tema-dolci {
	--t-scuro: #5c2340;
	--t-medio: #a04b73;
	--t-acc: #e8749f;
	--t-luce: #ffd6e4;
	--t-carta: #fff7fa;
	--t-riga: #f6dbe6;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23e8749f'/%3E%3Ccircle cx='30' cy='22' r='2' fill='%23e8749f'/%3E%3Ccircle cx='18' cy='32' r='2.5' fill='%23e8749f'/%3E%3C/svg%3E");
	--t-trama-opacita: .1;
}

/* --- Intrattenimento: circo, giallo, rosso, energia ---------------------- */
.fec-tema-intrattenimento {
	--t-scuro: #7a1420;
	--t-medio: #c0392b;
	--t-acc: #f5a623;
	--t-luce: #ffe08a;
	--t-carta: #fffaf0;
	--t-riga: #f6e0c8;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M25 6l4.8 9.7 10.7 1.6-7.7 7.5 1.8 10.7L25 30.4l-9.6 5.1 1.8-10.7-7.7-7.5 10.7-1.6z' fill='none' stroke='%23f5a623' stroke-width='1.3'/%3E%3C/svg%3E");
	--t-trama-opacita: .09;
}

/* --- Musica: notte, neon, contrasto forte -------------------------------- */
.fec-tema-musica {
	--t-scuro: #0d0d17;
	--t-medio: #2b1e5c;
	--t-acc: #00e5c0;
	--t-luce: #7b5cff;
	--t-carta: #f4f3fb;
	--t-riga: #d7d3ea;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cpath d='M0 20h6v-8h4v16h4V8h4v24h4V14h4v12h4v-6h4v10h4V4h4v32h4V16h4v8h6' fill='none' stroke='%2300e5c0' stroke-width='1.4'/%3E%3C/svg%3E");
	--t-trama-opacita: .12;
}

/* --- Foto e video: grigio, ottone, precisione ---------------------------- */
.fec-tema-memoria {
	--t-scuro: #23262b;
	--t-medio: #4a5158;
	--t-acc: #b8860b;
	--t-luce: #e8d9a8;
	--t-carta: #f7f7f5;
	--t-riga: #dedcd6;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Ccircle cx='22' cy='22' r='13' fill='none' stroke='%23b8860b' stroke-width='1.2'/%3E%3Cpath d='M22 9v26M9 22h26M13 13l18 18M31 13L13 31' stroke='%23b8860b' stroke-width='.7'/%3E%3C/svg%3E");
	--t-trama-opacita: .07;
}

/* --- Allestimenti: pastello, coriandoli, leggerezza ---------------------- */
.fec-tema-allestimento {
	--t-scuro: #3f2a6b;
	--t-medio: #7a5bc4;
	--t-acc: #ff6fb5;
	--t-luce: #9be7ff;
	--t-carta: #fbf9ff;
	--t-riga: #e4dcf7;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect x='6' y='8' width='5' height='9' rx='1' fill='%23ff6fb5' transform='rotate(24 8 12)'/%3E%3Crect x='34' y='16' width='5' height='9' rx='1' fill='%239be7ff' transform='rotate(-32 36 20)'/%3E%3Crect x='18' y='36' width='5' height='9' rx='1' fill='%237a5bc4' transform='rotate(12 20 40)'/%3E%3C/svg%3E");
	--t-trama-opacita: .14;
}

/* --- Esperienze e avventura: bosco, arancio, movimento ------------------- */
.fec-tema-esperienze {
	--t-scuro: #14331f;
	--t-medio: #2f6b45;
	--t-acc: #f2711c;
	--t-luce: #a8d5a2;
	--t-carta: #f6faf4;
	--t-riga: #d5e6d3;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Cpath d='M26 6l-9 15h5l-7 12h22l-7-12h5z' fill='none' stroke='%232f6b45' stroke-width='1.3'/%3E%3Cpath d='M26 33v10' stroke='%232f6b45' stroke-width='1.3'/%3E%3C/svg%3E");
}

/* --- Servizi e logistica: blu notte, argento, ordine --------------------- */
.fec-tema-servizi {
	--t-scuro: #12233d;
	--t-medio: #2c4a72;
	--t-acc: #4aa3df;
	--t-luce: #b8d8ef;
	--t-carta: #f5f8fb;
	--t-riga: #d5e2ee;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%234aa3df' stroke-width='.8'/%3E%3Ccircle cx='20' cy='20' r='3' fill='none' stroke='%234aa3df' stroke-width='.8'/%3E%3C/svg%3E");
	--t-trama-opacita: .08;
}

/* --- Beauty e persona: prugna, oro rosa, morbidezza ---------------------- */
.fec-tema-persona {
	--t-scuro: #4a1f3d;
	--t-medio: #8c4a72;
	--t-acc: #e0a3a3;
	--t-luce: #f6d9d0;
	--t-carta: #fdf7f6;
	--t-riga: #f0dcd8;
	--t-trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 8c6 6 6 14 0 20-6-6-6-14 0-20zM8 23c6-6 14-6 20 0-6 6-14 6-20 0z' fill='none' stroke='%23e0a3a3' stroke-width='1.2'/%3E%3C/svg%3E");
	--t-trama-opacita: .12;
}

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

.fec-annuncio {
	position: relative;
	background: var(--t-carta, #fbf7ff);
	padding-bottom: 2rem;
}

/* La trama di fondo: dietro tutto, appena percepibile. Serve a dare carattere
   alla pagina anche quando l'inserzionista non ha caricato una sola foto. */
.fec-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;
}
.fec-annuncio > * { position: relative; z-index: 1; }

.fec-annuncio h1,
.fec-annuncio h2,
.fec-annuncio h3 { color: var(--t-scuro, #1b1140); }
.fec-annuncio .fec-eyebrow { color: var(--t-medio, #4b2e83); }

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

.fec-annuncio .fec-badge { background: var(--t-luce, #ffc53d); color: var(--t-scuro, #1b1140); }
.fec-annuncio .fec-badge--prezzo { background: var(--t-scuro, #1b1140); color: var(--t-luce, #ffc53d); }
.fec-annuncio .fec-btn--primario { background: var(--t-acc, #ff3d7f); color: #fff; }
.fec-annuncio .fec-btn--primario:hover { filter: brightness(.92); }
.fec-annuncio .fec-btn--ghost { border-color: var(--t-riga, #ddd2ee); color: var(--t-medio, #4b2e83); }
.fec-annuncio .fec-tag { background: var(--t-luce, #ffc53d); color: var(--t-scuro, #1b1140); }
.fec-annuncio .fec-incluso li::before { color: var(--t-acc, #ff3d7f); }
.fec-annuncio .fec-lista-servizi li::before { color: var(--t-acc, #ff3d7f); }
.fec-annuncio .fec-passi li::before { background: var(--t-acc, #ff3d7f); color: #fff; }
.fec-annuncio .fec-tabella th { color: var(--t-medio, #4b2e83); }
.fec-annuncio .fec-tabella td,
.fec-annuncio .fec-tabella th { border-bottom-color: var(--t-riga, #ddd2ee); }
.fec-annuncio .fec-pacchetto { border-color: var(--t-riga, #ddd2ee); }
.fec-annuncio .fec-prezzo { color: var(--t-scuro, #1b1140); }
.fec-annuncio .fec-punto {
	background: #fff;
	border-color: var(--t-riga, #ddd2ee);
	border-left: 3px solid var(--t-acc, #ff3d7f);
}
.fec-annuncio .fec-faq__item { border-bottom-color: var(--t-riga, #ddd2ee); }
.fec-annuncio .fec-cta-finale {
	background: var(--t-scuro, #1b1140);
	border: 0;
	color: var(--t-su-scuro, #ffffff);
}
.fec-annuncio .fec-cta-finale h2 { color: var(--t-su-scuro, #ffffff); }
.fec-annuncio .fec-cta-finale h2::before { background: var(--t-luce, #ffc53d); }

/* =============================================================================
   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.
   ========================================================================== */

.fec-annuncio .fec-hero {
	position: relative;
	margin: 0 0 2.5rem;
	padding: 0;
	border-radius: 0;
	overflow: hidden;
}
.fec-annuncio .fec-copertina {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: 0;
	z-index: 0;
}
.fec-annuncio .fec-copertina img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fec-annuncio .fec-hero__testo {
	position: relative;
	z-index: 2;
	padding: 3.5rem 1.5rem 2rem;
}

/* La velatura, generata dai colori del tema. */
.fec-annuncio .fec-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, #1b1140) 35%, transparent) 0%,
		color-mix(in srgb, var(--t-scuro, #1b1140) 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. */
.fec-annuncio .fec-hero--senza-foto { background: var(--t-scuro, #1b1140); }
.fec-annuncio .fec-hero--senza-foto::after { display: none; }

.fec-annuncio .fec-hero .fec-eyebrow { color: var(--t-luce, #ffc53d); }
.fec-annuncio .fec-hero .fec-titolo {
	font: var(--t-titolo);
	color: #fff;
	letter-spacing: -.03em;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
	max-width: 20ch;
}
.fec-annuncio .fec-hero .fec-sottotitolo { color: rgba(255, 255, 255, .88); max-width: 46ch; }
.fec-annuncio .fec-hero .fec-badge { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(4px); }
.fec-annuncio .fec-hero .fec-badge--prezzo { background: var(--t-luce, #ffc53d); color: var(--t-scuro, #1b1140); }
.fec-annuncio .fec-hero .fec-btn--ghost { border-color: rgba(255, 255, 255, .5); color: #fff; }
.fec-annuncio .fec-logo {
	position: relative;
	z-index: 2;
	margin-bottom: 1rem;
}
.fec-annuncio .fec-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 ------------------------------------------- */
.fec-skin-vetrina .fec-hero { min-height: 62vh; display: flex; align-items: flex-end; }
.fec-skin-vetrina .fec-hero__testo { padding: 4rem 1.75rem 2.5rem; width: 100%; }
.fec-skin-vetrina .fec-hero .fec-titolo { font-size: clamp(2.1rem, 7vw, 3.6rem); }
.fec-skin-vetrina .fec-griglia-foto { grid-template-columns: repeat(2, 1fr); gap: .35rem; }
.fec-skin-vetrina .fec-foto:first-child { grid-column: span 2; }
.fec-skin-vetrina .fec-foto:first-child img { aspect-ratio: 16/9; }

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

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

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

/* --- ESSENZIALE — nessuna foto in testa, solo tipografia ----------------- */
.fec-skin-essenziale .fec-hero { min-height: 0; background: none; }
.fec-skin-essenziale .fec-hero::after { display: none; }
.fec-skin-essenziale .fec-copertina { position: static; margin-top: 1.5rem; border-radius: var(--fec-r, 14px); }
.fec-skin-essenziale .fec-copertina img { aspect-ratio: 21/9; }
.fec-skin-essenziale .fec-hero__testo {
	padding: 2.5rem 0 0;
	border-bottom: 3px solid var(--t-scuro, #1b1140);
	padding-bottom: 1.5rem;
}
.fec-skin-essenziale .fec-hero .fec-titolo { color: var(--t-scuro, #1b1140); text-shadow: none; max-width: 26ch; }
.fec-skin-essenziale .fec-hero .fec-eyebrow { color: var(--t-medio, #4b2e83); }
.fec-skin-essenziale .fec-hero .fec-sottotitolo { color: var(--fec-tenue, #6b5f8c); }
.fec-skin-essenziale .fec-hero .fec-badge { background: var(--t-luce, #ffc53d); color: var(--t-scuro, #1b1140); backdrop-filter: none; }
.fec-skin-essenziale .fec-hero .fec-btn--ghost { border-color: var(--t-riga, #ddd2ee); color: var(--t-medio, #4b2e83); }
.fec-skin-essenziale .fec-sezione { border-bottom: 1px solid var(--t-riga, #ddd2ee); padding-bottom: 1.5rem; }
.fec-skin-essenziale .fec-sezione:last-child { border-bottom: 0; }
.fec-skin-essenziale .fec-testo { font-size: 1.08rem; line-height: 1.7; }

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

@media (min-width: 780px) {
	.fec-annuncio .fec-hero__testo { padding-inline: 3rem; }
	.fec-skin-vetrina .fec-hero__testo { padding: 5rem 3rem 3rem; }
	.fec-skin-vetrina .fec-griglia-foto { grid-template-columns: repeat(4, 1fr); }
	.fec-skin-vetrina .fec-foto:first-child { grid-column: span 2; grid-row: span 2; }
	.fec-skin-portfolio .fec-griglia-foto { column-count: 3; }
	.fec-skin-listino .fec-griglia-pacchetti { grid-template-columns: repeat(3, 1fr); }
	.fec-skin-essenziale .fec-hero__testo { padding-inline: 0; }
	.fec-skin-essenziale { max-width: 46rem; 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.
   ========================================================================== */

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

@media (prefers-reduced-motion: reduce) {
	.fec-annuncio .fec-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.
   ========================================================================== */

.fec-copertina--generica img {
	filter: saturate(.55) contrast(.92);
}
.fec-copertina--generica::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--t-medio, #4b2e83);
	mix-blend-mode: color;
	opacity: .45;
}
.fec-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: fondo viola-magenta con palloncini,
   triangoli, cerchi, zigzag e coriandoli. È il momento in cui il visitatore
   decide di chiamare: deve sembrare l'invito a una festa, non un modulo.
   I quattro pulsanti hanno ciascuno un colore pieno e fisso — rosa, verde
   WhatsApp, giallo sole, azzurro cielo — uguale per tutti i temi, così chi
   ha già usato il portale li riconosce a colpo d'occhio su qualsiasi annuncio.
   ========================================================================== */

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

/* --- Il fondo festoso --------------------------------------------------- */
.fec-cta-fissa,
.fec-annuncio .fec-cta-finale {
	background-color: #4a1789;
	background-image:
		url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='120'%3E%3Cg%20opacity='.82'%3E%3Cellipse%20cx='22'%20cy='34'%20rx='10'%20ry='12.2'%20fill='%23ffc53d'/%3E%3Cellipse%20cx='18.5'%20cy='29.1'%20rx='2.2'%20ry='3.8'%20fill='%23fff'%20fill-opacity='.45'/%3E%3Cpath%20d='M20%2049.2h4l-2-3.5z'%20fill='%23ffc53d'/%3E%3Cpath%20d='M22%2049.2c-4%206%204%2010-1%2018'%20fill='none'%20stroke='%23fff'%20stroke-opacity='.55'%20stroke-width='1'/%3E%3Cellipse%20cx='118'%20cy='62'%20rx='12'%20ry='14.6'%20fill='%23ff3d7f'/%3E%3Cellipse%20cx='113.8'%20cy='56.1'%20rx='2.6'%20ry='4.6'%20fill='%23fff'%20fill-opacity='.45'/%3E%3Cpath%20d='M116%2079.6h4l-2-3.5z'%20fill='%23ff3d7f'/%3E%3Cpath%20d='M118%2079.6c-4%206%204%2010-1%2018'%20fill='none'%20stroke='%23fff'%20stroke-opacity='.55'%20stroke-width='1'/%3E%3Cellipse%20cx='190'%20cy='24'%20rx='8'%20ry='9.8'%20fill='%232ec5ff'/%3E%3Cellipse%20cx='187.2'%20cy='20.1'%20rx='1.8'%20ry='3.0'%20fill='%23fff'%20fill-opacity='.45'/%3E%3Cpath%20d='M188%2036.8h4l-2-3.5z'%20fill='%232ec5ff'/%3E%3Cpath%20d='M190%2036.8c-4%206%204%2010-1%2018'%20fill='none'%20stroke='%23fff'%20stroke-opacity='.55'%20stroke-width='1'/%3E%3Cellipse%20cx='160'%20cy='86'%20rx='7'%20ry='8.5'%20fill='%2312b886'/%3E%3Cellipse%20cx='157.6'%20cy='82.6'%20rx='1.5'%20ry='2.7'%20fill='%23fff'%20fill-opacity='.45'/%3E%3Cpath%20d='M158%2097.5h4l-2-3.5z'%20fill='%2312b886'/%3E%3Cpath%20d='M160%2097.5c-4%206%204%2010-1%2018'%20fill='none'%20stroke='%23fff'%20stroke-opacity='.55'%20stroke-width='1'/%3E%3Cpath%20d='M62%2014l9%2015H53z'%20fill='none'%20stroke='%232ec5ff'%20stroke-width='2'%20stroke-linejoin='round'/%3E%3Ccircle%20cx='70'%20cy='92'%20r='7'%20fill='none'%20stroke='%23ffc53d'%20stroke-width='2.2'/%3E%3Cpath%20d='M4%20104l6-7%206%207%206-7%206%207'%20fill='none'%20stroke='%23ff3d7f'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3Crect%20x='150'%20y='8'%20width='7'%20height='7'%20rx='1.5'%20fill='%2312b886'%20transform='rotate(25%20153%2011)'/%3E%3Crect%20x='92'%20y='14'%20width='6'%20height='6'%20rx='1'%20fill='%23ff8a3d'%20transform='rotate(-20%2095%2017)'/%3E%3Ccircle%20cx='44'%20cy='64'%20r='3'%20fill='%23ff8a3d'/%3E%3Ccircle%20cx='206'%20cy='104'%20r='3.2'%20fill='%23ffc53d'/%3E%3Ccircle%20cx='96'%20cy='108'%20r='2.4'%20fill='%232ec5ff'/%3E%3Cpath%20d='M190%2058l3%206%206%201-4.5%204%201%206-5.5-3-5.5%203%201-6-4.5-4%206-1z'%20fill='%23ffc53d'%20fill-opacity='.9'/%3E%3C/g%3E%3C/svg%3E"),
		linear-gradient(115deg, #2b1070 0%, #5b1a9a 48%, #a51d7c 100%);
	background-size: 220px 120px, auto;
	background-repeat: repeat, no-repeat;
	background-position: 0 0, 0 0;
}
.fec-annuncio .fec-cta-finale {
	border: 0;
	color: #fff;
	box-shadow: 0 14px 34px rgba(43, 16, 112, .25);
}
.fec-annuncio .fec-cta-finale h2 {
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

/* --- I quattro pulsanti: tutti pieni, tutti vivaci ---------------------- */
.fec-cta-fissa .fec-btn,
.fec-annuncio .fec-cta-finale .fec-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;
}
.fec-cta-fissa .fec-btn:hover,
.fec-annuncio .fec-cta-finale .fec-btn:hover {
	transform: translateY(-1px);
	filter: brightness(1.07) saturate(1.1);
}
.fec-cta-fissa .fec-btn:active,
.fec-annuncio .fec-cta-finale .fec-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: rosa confetto, il colore del portale. */
.fec-cta-fissa .fec-btn--primario,
.fec-annuncio .fec-cta-finale .fec-btn--primario {
	background: #ff3d7f;
	color: #fff;
}
/* WhatsApp: il suo verde, che tutti riconoscono. */
.fec-cta-fissa .fec-btn--wa,
.fec-annuncio .fec-cta-finale .fec-btn--wa {
	background: #25d366;
	color: #06331a;
}
/* Chiedi un preventivo: giallo sole. */
.fec-cta-fissa .fec-btn--ghost:not(.fec-btn--festa),
.fec-annuncio .fec-cta-finale .fec-btn--ghost:not(.fec-btn--festa) {
	background: #ffc53d;
	color: #3b2400;
}
/* Aggiungi alla mia Festa: azzurro cielo… */
.fec-cta-fissa .fec-btn--festa,
.fec-annuncio .fec-cta-finale .fec-btn--festa {
	background: #2ec5ff;
	color: #062a4f;
}
/* …che diventa verde menta quando il fornitore è già nella lista. */
.fec-cta-fissa .fec-btn--festa.is-on,
.fec-annuncio .fec-cta-finale .fec-btn--festa.is-on {
	background: #12b886;
	color: #fff;
}

/* --- La barra fissa ----------------------------------------------------- */
.fec-cta-fissa {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 940;
	padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0px));
	box-shadow: 0 -6px 24px rgba(27, 17, 64, .3);
	/* Parte fuori campo e sale: comparire di colpo a metà lettura distrae. */
	transform: translateY(110%);
	transition: transform .22s ease;
}
.fec-cta-fissa.is-on { transform: translateY(0); }

.fec-cta-fissa__interno {
	display: flex;
	align-items: center;
	gap: .75rem;
	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. */
.fec-cta-fissa__nome {
	display: none;
	margin: 0;
	padding: .5rem 1rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 2px 10px rgba(27, 17, 64, .18);
	color: #2b1070;
	font-weight: 800;
	font-size: .95rem;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fec-cta-fissa .fec-cta {
	display: flex;
	flex-wrap: nowrap;
	gap: .45rem;
	margin: 0;
	flex: 1;
	min-width: 0;
}
.fec-cta-fissa .fec-btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	padding: .55em .8em;
	font-size: .9rem;
	justify-content: center;
	white-space: nowrap;
}

/* Il pulsante della lista festa si sposta sopra la barra, altrimenti le finisce
   addosso proprio mentre si cerca di premerlo. */
body.fec-cta-fissa-visibile .fec-badge-festa {
	bottom: calc(5.6rem + env(safe-area-inset-bottom, 0px));
}

/* --- 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) {
	.fec-cta-fissa {
		padding: .4rem .4rem calc(.4rem + env(safe-area-inset-bottom, 0px));
	}
	.fec-cta-fissa .fec-cta { gap: .3rem; }
	.fec-cta-fissa .fec-btn {
		flex-direction: column;
		gap: .2rem;
		min-height: 54px;
		padding: .4rem .2rem .35rem;
		border-radius: 12px;
		font-size: .68rem;
		line-height: 1.12;
		letter-spacing: -.005em;
		white-space: normal;
		text-align: center;
		overflow-wrap: anywhere;
	}
	.fec-cta-fissa .fec-btn .fec-ico {
		width: 17px;
		height: 17px;
		margin: 0;
	}
	.fec-cta-fissa .fec-btn > span { display: block; }

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

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

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

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