@charset "UTF-8";
/*
 * Design system Publilia
 * ======================
 * Direzione approvata il 2026-07-26: registro editoriale, bianco ovunque,
 * cobalto + viola acceso + nero. Nessun fondo nero: il nero è la CTA, i
 * titoli e i bordi, mai la superficie.
 *
 * Il gradiente cobalto→viola è la firma grafica e compare sempre allo
 * stesso angolo (100deg): filo sotto la testata, sottolineature, cerchio
 * della freccia, barra in cima alle schede, numeri.
 *
 * PERCHÉ QUESTE SCELTE — principi applicati, non decorazione
 * ----------------------------------------------------------
 * Sono documentati per esteso in docs/persuasione.md. In sintesi:
 *
 * · Von Restorff (effetto isolamento): un solo elemento nero pieno per
 *   schermata — la CTA. Ciò che è unico in un campo omogeneo viene
 *   ricordato. Se le CTA fossero due, nessuna delle due risalterebbe.
 * · Legge di Fitts: bersagli da 44-52 px e CTA a pillola. Il tempo per
 *   colpire un bersaglio cresce quando l'area cala; su telefono il
 *   pollice non ha la precisione del mouse.
 * · Legge di Hick: massimo 8 voci per griglia. Ogni scelta in più allunga
 *   il tempo di decisione in modo logaritmico, e sopra una certa soglia
 *   la decisione non si prende affatto.
 * · Gestalt, prossimità e regione comune: la griglia a filo di 1 px
 *   raggruppa senza ombre. Il bordo condiviso dice «questi sono una
 *   famiglia» meglio di qualsiasi spaziatura.
 * · Effetto posizione seriale: prova sociale e testimonianze in fondo
 *   alla home, dove la memoria dell'ultimo elemento è più forte.
 * · Elaborazione fluente: contrasto alto e misura di riga 66 caratteri.
 *   Ciò che si legge senza sforzo viene giudicato più vero — è un bias
 *   documentato, e l'unico modo onesto di sfruttarlo è scrivere chiaro.
 *
 * Contrasti: 19 coppie misurate, 19 passano WCAG 2.1 AA.
 */

/* ============================================================
   1. Token
   ============================================================ */

:root {
	/* --- Identità --- */
	--pb-cobalto: #0b44ce;
	--pb-cobalto-scuro: #082f94;
	--pb-cobalto-tenue: #eef1fe;
	--pb-viola: #8a24ff;
	--pb-viola-scuro: #6a12c9;
	--pb-viola-tenue: #f5edff;

	/* La firma. Un solo angolo, sempre lo stesso. */
	--pb-gradiente: linear-gradient(100deg, var(--pb-cobalto) 0%, var(--pb-viola) 100%);

	/* --- Superfici e testo --- */
	--pb-nero: #0b0b12;
	--pb-bianco: #ffffff;
	--pb-fondino: #f4f5f9;
	--pb-testo: #3c3c4a;
	--pb-testo-tenue: #6a6a78;
	--pb-bordo: #e3e5ec;
	--pb-bordo-controllo: #767683; /* WCAG 1.4.11 chiede 3:1 sui controlli */

	/* --- Semantico --- */
	--pb-verde: #0e7c66;
	--pb-rosso: #b3261e;

	/*
	 * Alias di compatibilità.
	 * I template scritti prima del cambio di direzione usano questi nomi.
	 * Rimapparli qui cambia l'aspetto di tutto il sito senza toccare una
	 * riga di PHP — e senza lasciare in giro due sistemi di colore.
	 */
	--pb-blu: var(--pb-cobalto);
	--pb-blu-scuro: var(--pb-cobalto-scuro);
	--pb-blu-tenue: var(--pb-cobalto-tenue);
	--pb-blu-luce: var(--pb-cobalto);
	--pb-inchiostro: var(--pb-nero);
	--pb-inchiostro-2: #16161f;
	--pb-carta: var(--pb-bianco);
	--pb-ambra: var(--pb-nero);       /* la CTA non è più ambra: è nera */
	--pb-ambra-scuro: var(--pb-cobalto-scuro);

	/* --- Tipografia --- */
	--pb-font-titoli: 'Archivo', 'Segoe UI', system-ui, sans-serif;
	--pb-font-testo: 'Inter', 'Segoe UI', system-ui, sans-serif;

	--pb-t-xs: 0.75rem;
	--pb-t-s: 0.9375rem;
	--pb-t-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
	--pb-t-m: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--pb-t-l: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
	--pb-t-xl: clamp(1.875rem, 1.5rem + 1.6vw, 3rem);
	--pb-t-2xl: clamp(2.125rem, 1.6rem + 2.2vw, 3.5rem);
	--pb-t-3xl: clamp(2.25rem, 1.4rem + 3.2vw, 4rem);

	/* --- Spazio --- */
	--pb-s-1: 0.25rem;
	--pb-s-2: 0.5rem;
	--pb-s-3: 0.75rem;
	--pb-s-4: 1rem;
	--pb-s-5: 1.5rem;
	--pb-s-6: 2rem;
	--pb-s-7: 3rem;
	--pb-s-8: 4.5rem;
	--pb-s-9: 7rem;
	--pb-sezione: clamp(3.5rem, 2.2rem + 5vw, 7rem);

	/* --- Forma --- */
	--pb-r-s: 4px;
	--pb-r-m: 8px;
	--pb-r-l: 20px;
	--pb-r-tonda: 999px;

	--pb-ombra-1: 0 1px 2px rgba(11, 11, 18, 0.05);
	--pb-ombra-2: 0 4px 10px -3px rgba(11, 11, 18, 0.08);
	--pb-ombra-3: 0 14px 28px -10px rgba(11, 11, 18, 0.14);

	/* 66 caratteri: l'intervallo in cui l'occhio ritrova l'inizio della
	   riga successiva senza rileggere quella appena finita. */
	--pb-misura: 66ch;

	--pb-larghezza: 1280px;
	--pb-larghezza-stretta: 780px;

	--pb-transizione: 200ms cubic-bezier(0.2, 0, 0.15, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root { --pb-transizione: 0ms; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   2. Base
   ------------------------------------------------------------
   Scopate su #page-container, non su #et-boc: #et-boc NON esiste nel
   front-end — verificato. #page-container esiste, avvolge anche
   intestazione e piè di pagina, ed è anch'esso un ID: stessa specificità,
   nessuna guerra di !important con Divi.
   ============================================================ */

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

body { background-color: var(--pb-bianco); }

#page-container {
	/* `clip` e non `hidden`: hidden creerebbe un contenitore di scorrimento
	   e romperebbe la testata sticky. */
	overflow-x: clip;
	font-family: var(--pb-font-testo);
	font-size: var(--pb-t-base);
	line-height: 1.6;
	color: var(--pb-testo);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4,
#page-container h5,
#page-container h6 {
	font-family: var(--pb-font-titoli);
	color: var(--pb-nero);
	font-weight: 700;
	line-height: 1.06;
	/* Tracking negativo serrato: è metà del registro editoriale. */
	letter-spacing: -0.03em;
	text-wrap: balance;
}

#page-container h1 { font-size: var(--pb-t-3xl); }
#page-container h2 { font-size: var(--pb-t-2xl); }
#page-container h3 { font-size: var(--pb-t-l); }
#page-container h4 { font-size: var(--pb-t-m); }
#page-container h5 { font-size: var(--pb-t-base); }
#page-container h6 {
	font-size: var(--pb-t-xs);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
}

#page-container p {
	max-width: var(--pb-misura);
	text-wrap: pretty;
}

#page-container a {
	color: var(--pb-cobalto);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--pb-transizione);
}

#page-container a:hover { color: var(--pb-cobalto-scuro); }

/* Il focus visibile è l'unico modo in cui chi naviga da tastiera sa dove
   si trova. Mai rimuoverlo, solo ridisegnarlo. */
#page-container :focus-visible {
	outline: 3px solid var(--pb-cobalto);
	outline-offset: 3px;
	border-radius: var(--pb-r-s);
}

.pb-salta {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: var(--pb-s-3) var(--pb-s-5);
	background: var(--pb-nero);
	color: var(--pb-bianco);
	font-weight: 600;
	border-radius: 0 0 var(--pb-r-m) 0;
}

.pb-salta:focus { left: 0; }

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

/* Testo in gradiente. Una parola per schermata: se lo fai su tutto, non
   risalta più niente — è lo stesso principio dell'isolamento. */
.pb-grad {
	background: var(--pb-gradiente);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ============================================================
   3. Impianto
   ============================================================ */

.pb-contenitore {
	width: min(100% - 2.5rem, var(--pb-larghezza));
	margin-inline: auto;
}

.pb-contenitore--stretto {
	width: min(100% - 2.5rem, var(--pb-larghezza-stretta));
	margin-inline: auto;
}

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

.pb-sezione--tenue { background: var(--pb-fondino); }

/*
 * Un tempo era la sezione a fondo nero. La direzione approvata non vuole
 * fondi scuri: resta una sezione chiara con il filo in gradiente in cima,
 * che segna lo stacco senza spegnere la pagina.
 */
.pb-sezione--scura {
	position: relative;
	background: var(--pb-bianco);
	border-top: 1px solid var(--pb-bordo);
	border-bottom: 1px solid var(--pb-bordo);
}

.pb-sezione--scura::before {
	content: '';
	position: absolute;
	inset: -1px 0 auto 0;
	height: 3px;
	background: var(--pb-gradiente);
}

.pb-sezione--scura h1,
.pb-sezione--scura h2,
.pb-sezione--scura h3 { color: var(--pb-nero); }

.pb-sezione--scura a { color: var(--pb-cobalto); }

/* --- Accenti di sezione: ogni area del sito ha il suo colore guida --- */

/* Piani di marketing: cobalto */
.pb-accento-cobalto { --pb-accento: var(--pb-cobalto); --pb-accento-scuro: var(--pb-cobalto-scuro); --pb-accento-tenue: var(--pb-cobalto-tenue); }
/* Assistenza: viola */
.pb-accento-viola   { --pb-accento: var(--pb-viola);   --pb-accento-scuro: var(--pb-viola-scuro);   --pb-accento-tenue: var(--pb-viola-tenue); }
/* Chi siamo: nero */
.pb-accento-nero    { --pb-accento: var(--pb-nero);    --pb-accento-scuro: #000;                    --pb-accento-tenue: var(--pb-fondino); }

.pb-griglia {
	display: grid;
	gap: var(--pb-s-5);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.pb-griglia--2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
}

/* ============================================================
   4. Bottoni
   ------------------------------------------------------------
   Effetto isolamento applicato: UNA sola CTA nera piena per schermata.
   Tutto il resto è fantasma o link di testo. Se il nero comparisse due
   volte, non guiderebbe più lo sguardo da nessuna parte.
   ============================================================ */

#page-container .pb-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--pb-s-3);
	/* 52 px: legge di Fitts. Un bersaglio più piccolo si sbaglia. */
	min-height: 52px;
	padding: var(--pb-s-3) var(--pb-s-3) var(--pb-s-3) var(--pb-s-6);
	font-family: var(--pb-font-testo);
	font-size: var(--pb-t-s);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--pb-r-tonda);
	cursor: pointer;
	transition: background-color var(--pb-transizione), color var(--pb-transizione),
		border-color var(--pb-transizione);
}

/* La freccia nel cerchio in gradiente: è l'elemento grafico della CTA,
   e si sposta all'hover per confermare che è cliccabile. */
#page-container .pb-btn::after {
	content: '\f061'; /* fa-arrow-right */
	font-family: 'Font Awesome 7 Free';
	font-weight: 900;
	font-size: 0.75rem;
	display: grid;
	place-items: center;
	width: 34px; height: 34px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--pb-gradiente);
	color: var(--pb-bianco);
	transition: transform var(--pb-transizione);
}

#page-container .pb-btn:hover::after { transform: translateX(3px); }

#page-container .pb-btn--azione {
	background: var(--pb-nero);
	color: var(--pb-bianco);
}

#page-container .pb-btn--azione:hover {
	background: var(--pb-cobalto-scuro);
	color: var(--pb-bianco);
}

#page-container .pb-btn--primario {
	background: var(--pb-cobalto);
	color: var(--pb-bianco);
}

#page-container .pb-btn--primario:hover {
	background: var(--pb-cobalto-scuro);
	color: var(--pb-bianco);
}

#page-container .pb-btn--primario::after {
	background: rgba(255, 255, 255, 0.18);
}

#page-container .pb-btn--fantasma {
	background: transparent;
	color: var(--pb-nero);
	border-color: var(--pb-bordo-controllo);
}

#page-container .pb-btn--fantasma:hover {
	background: var(--pb-fondino);
	border-color: var(--pb-nero);
	color: var(--pb-nero);
}

#page-container .pb-btn--fantasma::after {
	background: transparent;
	color: var(--pb-nero);
	border: 1px solid var(--pb-bordo-controllo);
}

/* Link di testo con freccia: il pattern editoriale ricorrente. */
#page-container .pb-link {
	display: inline-flex;
	align-items: center;
	gap: var(--pb-s-2);
	min-height: 44px;
	font-weight: 600;
	font-size: var(--pb-t-s);
	color: var(--pb-nero);
	text-decoration: none;
	border-bottom: 2px solid var(--pb-nero);
	padding-bottom: 2px;
}

#page-container .pb-link:hover { color: var(--pb-cobalto); border-bottom-color: var(--pb-cobalto); }

/* ============================================================
   5. Componenti di base
   ============================================================ */

.pb-occhiello {
	display: inline-flex;
	align-items: center;
	gap: var(--pb-s-3);
	font-family: var(--pb-font-testo);
	font-size: var(--pb-t-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--pb-viola-scuro);
	margin-bottom: var(--pb-s-4);
}

.pb-occhiello::before {
	content: '';
	width: 28px; height: 2px;
	background: var(--pb-gradiente);
	flex: 0 0 auto;
}

/* Scheda a filo: nessuna ombra, il raggruppamento lo fa il bordo condiviso
   (Gestalt, regione comune). */
.pb-scheda {
	position: relative;
	background: var(--pb-bianco);
	border: 1px solid var(--pb-bordo);
	padding: var(--pb-s-6);
	display: flex;
	flex-direction: column;
	gap: var(--pb-s-3);
	height: 100%;
	transition: background var(--pb-transizione);
}

.pb-scheda::before {
	content: '';
	position: absolute;
	inset: -1px -1px auto -1px;
	height: 4px;
	background: var(--pb-gradiente);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--pb-transizione);
}

.pb-scheda:hover { background: var(--pb-cobalto-tenue); }
.pb-scheda:hover::before,
.pb-scheda:focus-within::before { transform: scaleX(1); }

.pb-scheda__icona {
	font-size: 1.5rem;
	color: var(--pb-accento, var(--pb-cobalto));
	margin-bottom: var(--pb-s-2);
}

.pb-scheda__titolo { margin: 0; font-size: var(--pb-t-l); }
.pb-scheda__titolo a { text-decoration: none; color: inherit; }
.pb-scheda__titolo a:hover { color: var(--pb-cobalto); }
.pb-scheda__testo { margin: 0; font-size: var(--pb-t-s); color: var(--pb-testo); }

.pb-numero {
	font-family: var(--pb-font-titoli);
	font-size: var(--pb-t-2xl);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
	display: block;
	background: var(--pb-gradiente);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.pb-numero__etichetta {
	display: block;
	margin-top: var(--pb-s-3);
	font-size: var(--pb-t-s);
	color: var(--pb-testo-tenue);
	max-width: 24ch;
}

/* ============================================================
   6. Moduli
   ============================================================ */

#page-container .pb-campo { display: block; margin-bottom: var(--pb-s-4); }

#page-container .pb-campo__etichetta {
	display: block;
	margin-bottom: var(--pb-s-2);
	font-size: var(--pb-t-s);
	font-weight: 600;
	color: var(--pb-nero);
}

#page-container .pb-campo input[type='text'],
#page-container .pb-campo input[type='email'],
#page-container .pb-campo input[type='tel'],
#page-container .pb-campo input[type='url'],
#page-container .pb-campo select,
#page-container .pb-campo textarea {
	width: 100%;
	min-height: 52px;
	padding: var(--pb-s-3) var(--pb-s-4);
	font-family: var(--pb-font-testo);
	font-size: var(--pb-t-base);
	color: var(--pb-nero);
	background: var(--pb-bianco);
	border: 1px solid var(--pb-bordo-controllo);
	border-radius: var(--pb-r-m);
	transition: border-color var(--pb-transizione), box-shadow var(--pb-transizione);
}

#page-container .pb-campo input:focus,
#page-container .pb-campo select:focus,
#page-container .pb-campo textarea:focus {
	border-color: var(--pb-cobalto);
	box-shadow: 0 0 0 3px rgba(11, 68, 206, 0.18);
}

/* L'errore non è affidato al solo colore: c'è icona e testo. Il colore
   da solo esclude chi non lo distingue. */
#page-container .pb-campo--errore input,
#page-container .pb-campo--errore select,
#page-container .pb-campo--errore textarea { border-color: var(--pb-rosso); }

#page-container .pb-campo__errore {
	display: flex;
	align-items: center;
	gap: var(--pb-s-2);
	margin-top: var(--pb-s-2);
	font-size: var(--pb-t-s);
	color: var(--pb-rosso);
	font-weight: 600;
}

/* Trappola anti-spam: invisibile agli umani, non nascosta con display:none
   — è un campo che un bot riempie e una persona no. */
.pb-esca {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px; overflow: hidden;
}

/* ============================================================
   7. Icone
   ------------------------------------------------------------
   Nel progetto non si usano emoji. Font Awesome self-hosted.
   Un'icona decorativa va marcata aria-hidden; se porta significato serve
   un testo alternativo accanto, in .pb-sr.
   ============================================================ */

.pb-icona {
	display: inline-block;
	width: 1em;
	text-align: center;
	line-height: inherit;
}

.pb-icona--prima { margin-right: var(--pb-s-2); }

/* ============================================================
   8. Coppie di colore VIETATE
   ------------------------------------------------------------
   Misurate, non stimate. Sono qui perché non rientrino per distrazione.
   ------------------------------------------------------------
   testo bianco su viola chiaro  -> usa --pb-viola-scuro
   testo cobalto su nero          -> su fondo scuro non c'è più nulla,
                                     ma se tornasse: 2,5:1, illeggibile
   bordo decorativo #E3E5EC come bordo di controllo -> 1,2:1,
                                     usa --pb-bordo-controllo (4,48:1)
   ============================================================ */