/*
 * Adempimenti 360 — pagina di lancio.
 *
 * GENERATO da costruisci-landing.py partendo da web/base.html.
 * Le modifiche fatte qui si perdono alla prossima generazione:
 * si tocca base.html e si rigenera.
 */
/* =====================================================================
   ADEMPIMENTI 360 — pagina di presentazione

   L'IDEA

   Chi arriva qui è un impiantista che ha già visto dieci gestionali e non
   crede più a niente. Non lo convince un elenco di funzioni: lo convince
   vedere, nei primi tre secondi, la cosa che gli toglie il sonno — una
   data che arriva che tu l'abbia segnata o no.

   Perciò l'apertura non è una figura né una schermata finta: è uno
   scadenzario che si muove davvero, con le periodicità vere delle norme.
   Le date si calcolano nel browser, adesso. Si vede l'idea del prodotto
   senza premere niente.

   Da lì la pagina passa dal buio alla luce: il disordine di prima, poi
   l'ordine di dopo. È lo stesso arco che vive chi compra.

   LE SCELTE

   Colore    Il blu è quello del marchio. L'ambra è il colore dei nastri di
             segnalazione in cantiere e qui fa una cosa sola: le scadenze e
             l'offerta. Se comparisse altrove smetterebbe di dire
             «attenzione».
   Carattere Titillium Web è il carattere dell'amministrazione pubblica
             italiana, disegnato a Urbino: una pagina che parla di regole
             statali, scritta con le lettere dello Stato. Bricolage
             Grotesque per i titoli, che ha spigoli da disegno tecnico.
             JetBrains Mono per sigle di norma, date e importi, che sono
             dati incolonnati e come tali vanno trattati.
   ===================================================================== */

/* ---------- 1. I VALORI ------------------------------------------- */
:root {
	color-scheme: light dark;

	/* Neutri con una punta di blu: un grigio puro sembra non scelto. */
	--bdl-fondo:        #ffffff;
	--bdl-fondo-2:      #f1f5f9;
	--bdl-fondo-3:      #e3ebf3;
	--bdl-bordo:        #d3dfeb;
	--bdl-bordo-forte:  #b6c7d8;
	--bdl-testo:        #0b1622;
	--bdl-testo-2:      #45596e;
	--bdl-testo-3:      #5e738c;

	/* Il buio dell'apertura: il colore di un quadro elettrico. */
	--bdl-buio:         #0a121c;
	--bdl-buio-2:       #101d2c;
	--bdl-buio-3:       #17293c;
	--bdl-buio-bordo:   #22384f;
	--bdl-su-buio:      #e8f0f8;
	--bdl-su-buio-2:    #93a9c0;

	--bdl-blu:          #1b4f8c;
	--bdl-blu-vivo:     #2f7fc4;
	--bdl-blu-chiaro:   #6fb6e4;

	/* L'unico accento acceso. */
	--bdl-ambra:        #d98e04;
	--bdl-ambra-vivo:   #f0a92a;
	/* L'ambra quando è inchiostro e non fondo: quella viva su carta
	   bianca sta a 2,5:1 e si legge male. Misurato, non stimato. */
	--bdl-ambra-testo:  #96610a;

	--bdl-scaduto:      #bd3226;
	--bdl-regola:       #1f6b4d;

	--bdl-ombra:        0 1px 2px rgb(11 22 34 / .05), 0 8px 24px -12px rgb(11 22 34 / .18);
	--bdl-ombra-alta:   0 2px 4px rgb(11 22 34 / .06), 0 24px 48px -20px rgb(11 22 34 / .28);
	--bdl-raggio:       10px;
	--bdl-riga:         1180px;

	--bdl-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
	--bdl-corpo:   "Titillium Web", "Segoe UI", system-ui, sans-serif;
	--bdl-dati:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bdl-fondo:       #0a121c;
		--bdl-fondo-2:     #101d2c;
		--bdl-fondo-3:     #17293c;
		--bdl-bordo:       #22384f;
		--bdl-bordo-forte: #2f4a66;
		--bdl-testo:       #e8f0f8;
		--bdl-testo-2:     #a9bed3;
		--bdl-testo-3:     #7f97af;
		--bdl-blu:         #6fb6e4;
		--bdl-blu-vivo:    #8ac8ef;
		--bdl-scaduto:     #ff8a7a;
		--bdl-regola:      #6fd3a8;
		--bdl-ambra-testo: #f0b344;
		--bdl-ombra:       0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
		--bdl-ombra-alta:  0 2px 4px rgb(0 0 0 / .45), 0 24px 48px -20px rgb(0 0 0 / .7);
	}
}

:root[data-theme="dark"] {
	--bdl-fondo:       #0a121c;
	--bdl-fondo-2:     #101d2c;
	--bdl-fondo-3:     #17293c;
	--bdl-bordo:       #22384f;
	--bdl-bordo-forte: #2f4a66;
	--bdl-testo:       #e8f0f8;
	--bdl-testo-2:     #a9bed3;
	--bdl-testo-3:     #7f97af;
	--bdl-blu:         #6fb6e4;
	--bdl-blu-vivo:    #8ac8ef;
	--bdl-scaduto:     #ff8a7a;
	--bdl-regola:      #6fd3a8;
	--bdl-ambra-testo: #f0b344;
	--bdl-ombra:       0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6);
	--bdl-ombra-alta:  0 2px 4px rgb(0 0 0 / .45), 0 24px 48px -20px rgb(0 0 0 / .7);
}

/* ---------- 2. LE BASI -------------------------------------------- */
* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bdl-fondo);
	color: var(--bdl-testo);
	font-family: var(--bdl-corpo);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3 {
	font-family: var(--bdl-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.02em;
	text-wrap: balance;
	margin: 0;
}

p { margin: 0; }
a { color: inherit; }
img, video { max-width: 100%; display: block; }

.bdl-riga {
	width: 100%;
	max-width: var(--bdl-riga);
	margin-inline: auto;
	padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.bdl-sez { padding-block: clamp(3.4rem, 7.5vw, 6rem); }
.bdl-sez-testa { max-width: 68ch; margin-bottom: 2.4rem; }
.bdl-sez-testa h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: .9rem; }

.bdl-occhiello {
	font-family: var(--bdl-dati);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--bdl-blu);
	margin: 0 0 .9rem;
}

.bdl-guida { color: var(--bdl-testo-2); font-size: 1.05rem; max-width: 64ch; }

:where(a, button, summary, input):focus-visible {
	outline: 3px solid var(--bdl-ambra-vivo);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- 3. BOTTONI -------------------------------------------- */
.bdl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	font-family: var(--bdl-corpo);
	font-size: 1.02rem;
	font-weight: 700;
	line-height: 1.2;
	padding: .95rem 1.6rem;
	border-radius: var(--bdl-raggio);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.bdl-btn:hover { transform: translateY(-2px); }
.bdl-btn:active { transform: translateY(0); }

.bdl-btn-pri {
	background: linear-gradient(180deg, var(--bdl-ambra-vivo), var(--bdl-ambra));
	color: #2b1c00;
	box-shadow: 0 2px 0 rgb(0 0 0 / .12), 0 14px 30px -14px rgb(217 142 4 / .85);
}
.bdl-btn-pri:hover { box-shadow: 0 2px 0 rgb(0 0 0 / .12), 0 20px 40px -14px rgb(217 142 4 / .95); }

.bdl-btn-sec { background: transparent; color: var(--bdl-su-buio); border-color: var(--bdl-buio-bordo); }
.bdl-btn-sec:hover { background: rgb(255 255 255 / .06); }

.bdl-btn-chiaro {
	background: var(--bdl-fondo);
	color: var(--bdl-testo);
	border-color: var(--bdl-bordo-forte);
	box-shadow: var(--bdl-ombra);
}

.bdl-sotto-btn {
	font-size: .88rem;
	color: var(--bdl-su-buio-2);
	margin-top: .85rem;
	display: flex;
	/* Su telefono la frase va a tre righe: la spunta deve stare accanto
	   alla prima, non a mezz'aria in mezzo al blocco. */
	align-items: flex-start;
	gap: .45rem;
	max-width: 46ch;
}
.bdl-sotto-btn svg { margin-top: .38rem; flex: none; }
.bdl-chiusura .bdl-sotto-btn { margin-inline: auto; }

/* ---------- 4. FASCIA OFFERTA E TESTATA --------------------------- */
.bdl-offerta {
	background: linear-gradient(90deg, var(--bdl-ambra), var(--bdl-ambra-vivo) 55%, var(--bdl-ambra));
	color: #2b1c00;
	font-size: .93rem;
	font-weight: 600;
	text-align: center;
	padding: .6rem 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .3rem .7rem;
}
.bdl-offerta b { font-weight: 700; }
.bdl-offerta .bdl-posti {
	font-family: var(--bdl-dati);
	font-weight: 700;
	background: rgb(0 0 0 / .17);
	padding: .1rem .5rem;
	border-radius: 5px;
	font-variant-numeric: tabular-nums;
}

.bdl-testata {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgb(10 18 28 / .84);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--bdl-buio-bordo);
}
.bdl-testata .bdl-riga { display: flex; align-items: center; gap: 1.4rem; min-height: 66px; }
.bdl-marchio img { height: 30px; width: auto; }
.bdl-menu { display: flex; gap: 1.4rem; margin-left: auto; font-size: .94rem; font-weight: 600; }
.bdl-menu a { color: var(--bdl-su-buio-2); text-decoration: none; }
.bdl-menu a:hover { color: var(--bdl-su-buio); }
@media (max-width: 900px) { .bdl-menu { display: none; } }
.bdl-testata .bdl-btn { padding: .58rem 1.1rem; font-size: .92rem; }
@media (max-width: 560px) { .bdl-testata .bdl-btn i { display: none; font-style: normal; } }

/* ---------- 5. APERTURA ------------------------------------------- */
.bdl-apertura {
	background:
		radial-gradient(1100px 600px at 12% -10%, rgb(47 127 196 / .22), transparent 60%),
		radial-gradient(800px 500px at 92% 110%, rgb(217 142 4 / .14), transparent 60%),
		var(--bdl-buio);
	color: var(--bdl-su-buio);
	padding-block: clamp(2.8rem, 6.5vw, 5rem) clamp(3.2rem, 7vw, 5.5rem);
	position: relative;
	overflow: hidden;
}
.bdl-apertura::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgb(111 182 228 / .05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(111 182 228 / .05) 1px, transparent 1px);
	background-size: 46px 46px;
	mask-image: radial-gradient(900px 520px at 28% 18%, #000, transparent 78%);
	pointer-events: none;
}
.bdl-apertura .bdl-riga {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.16fr) minmax(0, .94fr);
	gap: clamp(2rem, 4.5vw, 3.4rem);
	align-items: center;
}
@media (max-width: 1000px) { .bdl-apertura .bdl-riga { grid-template-columns: 1fr; } }

.bdl-eyebrow-scuro {
	font-family: var(--bdl-dati);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bdl-blu-chiaro);
	margin-bottom: 1.1rem;
}

.bdl-apertura h1 { font-size: clamp(2.2rem, 4.4vw, 3.25rem); margin-bottom: 1.1rem; max-width: 17ch; }
.bdl-apertura h1 em { font-style: normal; color: var(--bdl-ambra-vivo); position: relative; white-space: nowrap; }
.bdl-apertura h1 em::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: .06em;
	height: .09em;
	background: var(--bdl-ambra);
	opacity: .55;
}

.bdl-apertura .bdl-occhio { font-size: 1.12rem; color: var(--bdl-su-buio-2); max-width: 56ch; margin-bottom: 1.5rem; }
.bdl-apertura .bdl-occhio strong { color: var(--bdl-su-buio); font-weight: 600; }

.bdl-mestieri-riga { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.8rem; }
.bdl-mestieri-riga span {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--bdl-dati);
	font-size: .74rem;
	font-weight: 500;
	color: var(--bdl-su-buio-2);
	border: 1px solid var(--bdl-buio-bordo);
	background: rgb(111 182 228 / .06);
	padding: .3rem .65rem;
	border-radius: 100px;
	white-space: nowrap;
}
.bdl-mestieri-riga svg { width: 14px; height: 14px; fill: var(--bdl-blu-chiaro); flex: none; }

.bdl-azioni { display: flex; flex-wrap: wrap; gap: .8rem; }

.bdl-fiducia {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem 1.6rem;
	margin-top: 2.2rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--bdl-buio-bordo);
}
.bdl-fiducia div { min-width: 92px; }
.bdl-fiducia b {
	display: block;
	font-family: var(--bdl-display);
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--bdl-su-buio);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.bdl-fiducia span { font-size: .81rem; color: var(--bdl-su-buio-2); line-height: 1.35; display: block; margin-top: .35rem; }

/* ---------- 6. IL CRUSCOTTO CHE SI MUOVE -------------------------- */
.bdl-cruscotto {
	background: linear-gradient(160deg, var(--bdl-buio-2), var(--bdl-buio-3));
	border: 1px solid var(--bdl-buio-bordo);
	border-radius: 16px;
	box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .03) inset;
	overflow: hidden;
}
.bdl-cruscotto-testa {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .8rem 1.05rem;
	border-bottom: 1px solid var(--bdl-buio-bordo);
	background: rgb(0 0 0 / .22);
}
.bdl-cruscotto-testa .bdl-pallini { display: flex; gap: .35rem; }
.bdl-cruscotto-testa .bdl-pallini i { width: 9px; height: 9px; border-radius: 50%; background: var(--bdl-buio-bordo); }
.bdl-cruscotto-testa h2 {
	font-family: var(--bdl-corpo);
	font-size: .87rem;
	font-weight: 600;
	color: var(--bdl-su-buio-2);
	margin-left: .3rem;
	letter-spacing: 0;
}
.bdl-dal-vivo {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--bdl-dati);
	font-size: .67rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #4fc79a;
}
.bdl-dal-vivo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.bdl-scadenze { list-style: none; margin: 0; padding: .3rem; }
.bdl-scadenze li {
	display: grid;
	grid-template-columns: 3px minmax(0, 1fr) auto;
	gap: .85rem;
	align-items: center;
	padding: .72rem .8rem;
	border-radius: 9px;
	opacity: 0;
	transform: translateY(9px);
	animation: entra .5s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes entra { to { opacity: 1; transform: none; } }
.bdl-scadenze li:hover { background: rgb(255 255 255 / .035); }
.bdl-scadenze li + li { box-shadow: 0 -1px 0 rgb(255 255 255 / .05); }

.bdl-stecca { align-self: stretch; border-radius: 3px; min-height: 38px; }
.bdl-st-scaduto .bdl-stecca { background: #ff6b57; }
.bdl-st-vicino .bdl-stecca { background: var(--bdl-ambra-vivo); }
.bdl-st-regola .bdl-stecca { background: #4fc79a; }

.bdl-scad-nome {
	font-size: .94rem;
	font-weight: 600;
	color: var(--bdl-su-buio);
	margin-bottom: .16rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bdl-scad-fonte { font-family: var(--bdl-dati); font-size: .72rem; color: var(--bdl-su-buio-2); }
.bdl-scad-quando { text-align: right; font-family: var(--bdl-dati); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bdl-scad-quando b { display: block; font-size: .93rem; font-weight: 700; line-height: 1.25; }
.bdl-scad-quando span { font-size: .69rem; color: var(--bdl-su-buio-2); }
.bdl-st-scaduto .bdl-scad-quando b { color: #ff8a7a; }
.bdl-st-vicino .bdl-scad-quando b { color: var(--bdl-ambra-vivo); }
.bdl-st-regola .bdl-scad-quando b { color: #6fd3a8; }

.bdl-cruscotto-piede {
	padding: .8rem 1.1rem;
	border-top: 1px solid var(--bdl-buio-bordo);
	background: rgb(0 0 0 / .22);
	font-size: .81rem;
	color: var(--bdl-su-buio-2);
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .7rem;
	align-items: center;
}
.bdl-cruscotto-piede b { color: var(--bdl-su-buio); font-weight: 600; }

/* ---------- 7. LA STRISCIA DEL PROBLEMA --------------------------- */
.bdl-striscia {
	position: relative;
	border-block: 1px solid var(--bdl-bordo);
	background: var(--bdl-fondo-2);
}
.bdl-striscia .bdl-riga {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
	gap: clamp(1.8rem, 4.5vw, 3.4rem);
	align-items: center;
	padding-block: clamp(2.6rem, 6vw, 4rem);
}
@media (max-width: 900px) { .bdl-striscia .bdl-riga { grid-template-columns: 1fr; } }
.bdl-striscia h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); margin-bottom: .85rem; }
.bdl-figura {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--bdl-ombra-alta);
	border: 1px solid var(--bdl-bordo);
	background: var(--bdl-fondo-3);
}
.bdl-figura img { width: 100%; height: auto; }
.bdl-figura figcaption {
	font-size: .83rem;
	color: var(--bdl-testo-3);
	padding: .65rem .9rem;
	border-top: 1px solid var(--bdl-bordo);
	background: var(--bdl-fondo);
}

/* ---------- 8. GRIGLIE DI SCHEDE ---------------------------------- */
.bdl-griglia { display: grid; gap: 1.2rem; }
.bdl-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bdl-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bdl-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1020px) { .bdl-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .bdl-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .bdl-g2, .bdl-g3, .bdl-g4 { grid-template-columns: 1fr; } }

.bdl-scheda {
	background: var(--bdl-fondo);
	border: 1px solid var(--bdl-bordo);
	border-radius: var(--bdl-raggio);
	padding: 1.4rem 1.35rem;
	box-shadow: var(--bdl-ombra);
}
.bdl-scheda h3 { font-size: 1.14rem; margin-bottom: .5rem; }
.bdl-scheda p { color: var(--bdl-testo-2); font-size: .96rem; }
.bdl-scheda .bdl-segno {
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 8px;
	background: var(--bdl-fondo-2);
	border: 1px solid var(--bdl-bordo);
	margin-bottom: .9rem;
}
.bdl-scheda .bdl-segno svg { width: 19px; height: 19px; fill: none; stroke: var(--bdl-blu); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 9. IL CANTIERE (video) -------------------------------- */
.bdl-cantiere { background: var(--bdl-buio); color: var(--bdl-su-buio); border-block: 1px solid var(--bdl-buio-bordo); }
.bdl-cantiere .bdl-riga {
	display: grid;
	grid-template-columns: minmax(0, .95fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 3.4rem);
	align-items: center;
}
@media (max-width: 940px) { .bdl-cantiere .bdl-riga { grid-template-columns: 1fr; } }
.bdl-cantiere h2 { font-size: clamp(1.75rem, 3.3vw, 2.35rem); margin-bottom: .9rem; }
.bdl-cantiere p { color: var(--bdl-su-buio-2); }
.bdl-cantiere .bdl-occhiello { color: var(--bdl-blu-chiaro); }
.bdl-telaio {
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--bdl-buio-bordo);
	box-shadow: 0 40px 70px -40px rgb(0 0 0 / .9);
	background: var(--bdl-buio-2);
}
.bdl-telaio video { width: 100%; height: auto; display: block; }

.bdl-spunte { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.bdl-spunte li { display: grid; grid-template-columns: 21px 1fr; gap: .7rem; align-items: start; font-size: .98rem; }
.bdl-spunte svg { width: 19px; height: 19px; margin-top: .24rem; fill: none; stroke: #4fc79a; stroke-width: 2.4; }

/* ---------- 10. LISTINO ------------------------------------------- */
.bdl-listino { background: var(--bdl-fondo-2); border-block: 1px solid var(--bdl-bordo); }
.bdl-piani { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
/* Con il canone unico i piani sono due, non tre: a due colonne stanno
   larghi e il confronto si legge in un colpo d'occhio. */
.bdl-piani-due { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 880px; margin-inline: auto; }
@media (max-width: 940px) { .bdl-piani, .bdl-piani-due { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

.bdl-piano {
	background: var(--bdl-fondo);
	border: 1px solid var(--bdl-bordo);
	border-radius: 14px;
	padding: 1.6rem 1.45rem 1.45rem;
	box-shadow: var(--bdl-ombra);
	display: flex;
	flex-direction: column;
	gap: .95rem;
	position: relative;
}
.bdl-piano.bdl-scelto { border-color: var(--bdl-ambra); box-shadow: 0 0 0 2px var(--bdl-ambra), var(--bdl-ombra-alta); }
.bdl-piano .bdl-bollo {
	position: absolute;
	top: -.7rem;
	left: 1.45rem;
	background: var(--bdl-ambra);
	color: #2b1c00;
	font-family: var(--bdl-dati);
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .26rem .62rem;
	border-radius: 5px;
}
.bdl-piano .bdl-etich {
	font-family: var(--bdl-dati);
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--bdl-testo-3);
}
.bdl-piano.bdl-scelto .bdl-etich { color: var(--bdl-ambra-testo); }
.bdl-piano h3 { font-size: 1.28rem; }
.bdl-piano .bdl-chi { font-size: .92rem; color: var(--bdl-testo-3); margin-top: -.5rem; }

.bdl-prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; font-family: var(--bdl-display); }
.bdl-prezzo .bdl-cifra { font-size: 2.7rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.bdl-prezzo .bdl-unita { font-family: var(--bdl-corpo); font-size: .93rem; font-weight: 600; color: var(--bdl-testo-3); }
.bdl-prezzo .bdl-barrato {
	font-family: var(--bdl-dati);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--bdl-testo-3);
	text-decoration: line-through;
	text-decoration-thickness: 1.5px;
}
.bdl-prezzo-doppio { display: grid; gap: .55rem; }
.bdl-prezzo-doppio .bdl-riga-p { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
.bdl-prezzo-doppio .bdl-cifra-piccola { font-family: var(--bdl-display); font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bdl-prezzo-nota { font-size: .84rem; color: var(--bdl-testo-3); }
/* L'importo annuale sotto al prezzo mensile.
   Va detto qui e non solo nelle note in fondo: la fattura e' annuale
   anticipata, e chi legge «49 euro al mese» e poi si trova 588 euro da
   pagare oggi si sente preso in giro anche se il conto e' giusto. */
.bdl-anno {
	font-size: .85rem;
	font-weight: 600;
	color: var(--bdl-testo-3);
	margin-top: -.35rem;
	padding-top: .1rem;
	border-top: 1px dashed var(--bdl-bordo);
}

.bdl-piano ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .94rem; }
.bdl-piano ul li { display: grid; grid-template-columns: 17px 1fr; gap: .6rem; align-items: start; color: var(--bdl-testo-2); }
.bdl-piano ul svg { width: 15px; height: 15px; margin-top: .32rem; fill: none; stroke: var(--bdl-regola); stroke-width: 2.8; }
.bdl-piano .bdl-btn { width: 100%; margin-top: auto; }

/* Visibile solo ai lettori di schermo: la didascalia dice a che cosa
   serve la tabella a chi non ne vede la forma. */
.bdl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- 11. TABELLE ------------------------------------------- */
.bdl-tabellone {
	margin-top: 2.2rem;
	border: 1px solid var(--bdl-bordo);
	border-radius: 14px;
	overflow: hidden;
	background: var(--bdl-fondo);
	box-shadow: var(--bdl-ombra);
}
.bdl-tab-avvolgi { overflow-x: auto; }
table.bdl-dati { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 620px; }
table.bdl-dati th {
	text-align: left;
	font-family: var(--bdl-dati);
	font-size: .69rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--bdl-testo-3);
	padding: .8rem 1.05rem;
	background: var(--bdl-fondo-2);
	border-bottom: 1px solid var(--bdl-bordo);
	white-space: nowrap;
}
table.bdl-dati td { padding: .8rem 1.05rem; border-bottom: 1px solid var(--bdl-bordo); vertical-align: top; }
table.bdl-dati tbody tr:last-child td { border-bottom: 0; }
table.bdl-dati .bdl-num {
	font-family: var(--bdl-dati);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}
table.bdl-dati .bdl-primo b { display: block; font-weight: 700; }
table.bdl-dati .bdl-primo span { font-size: .84rem; color: var(--bdl-testo-3); }
table.bdl-dati .bdl-lancio { color: var(--bdl-ambra-testo); font-weight: 700; }
table.bdl-dati tr.bdl-forte td { background: var(--bdl-fondo-2); }
.bdl-tab-piede {
	padding: .85rem 1.05rem;
	background: var(--bdl-fondo-2);
	font-size: .86rem;
	color: var(--bdl-testo-2);
	border-top: 1px solid var(--bdl-bordo);
}

/* ---------- 12. IL CONFRONTO -------------------------------------- */
.bdl-confronto {
	margin-top: 2.2rem;
	border-left: 3px solid var(--bdl-ambra);
	background: var(--bdl-fondo);
	border-radius: 0 var(--bdl-raggio) var(--bdl-raggio) 0;
	padding: 1.5rem 1.6rem;
	box-shadow: var(--bdl-ombra);
	max-width: 78ch;
}
.bdl-confronto h3 { font-size: 1.14rem; margin-bottom: .7rem; }
.bdl-confronto p { color: var(--bdl-testo-2); font-size: .98rem; }
.bdl-confronto p + p { margin-top: .8rem; }
.bdl-confronto .bdl-onesto { font-size: .9rem; color: var(--bdl-testo-3); border-top: 1px solid var(--bdl-bordo); padding-top: .8rem; }

/* ---------- 13. IN ARRIVO ----------------------------------------- */
/* La sezione del CRM: fondo alternato, come le altre sezioni pari, per
   staccarla dalla griglia dei mestieri che la precede. */
.bdl-crm { background: var(--bdl-fondo-2); }

/* Il riquadro del CRM: due blocchi di testo largo che aprono e chiudono
   la griglia delle schede. Servono a dire la cosa importante — perche' un
   archivio ordinato conta piu' del documento che produci — prima che uno
   si metta a leggere nove riquadri. */
.bdl-crm-punto, .bdl-crm-nota {
	max-width: 62em;
	margin: 0 auto 2.2rem;
	padding: 1.4rem 1.6rem;
	border-radius: 14px;
	/* Fondo chiaro su sezione a fondo-2: al contrario non si vedrebbe. */
	background: var(--bdl-fondo);
	border: 1px solid var(--bdl-bordo);
}
.bdl-crm-nota { margin: 2.2rem auto 0; }
.bdl-crm-punto h3, .bdl-crm-nota h3 { margin: 0 0 .6rem; font-size: 1.15rem; }
.bdl-crm-punto p, .bdl-crm-nota p { margin: 0 0 .7rem; line-height: 1.65; }
.bdl-crm-punto p:last-child, .bdl-crm-nota p:last-child { margin-bottom: 0; }

.bdl-arrivo .bdl-scheda { background: var(--bdl-fondo-2); border-style: dashed; box-shadow: none; }
.bdl-arrivo .bdl-scheda .bdl-segno { background: var(--bdl-fondo); border-style: dashed; }
.bdl-arrivo .bdl-scheda .bdl-segno svg { stroke: var(--bdl-testo-3); }

/* ---------- 14. CHIUSURA E PIEDE ---------------------------------- */
.bdl-chiusura {
	background:
		radial-gradient(900px 480px at 50% -20%, rgb(217 142 4 / .22), transparent 65%),
		var(--bdl-buio);
	color: var(--bdl-su-buio);
	text-align: center;
	border-top: 1px solid var(--bdl-buio-bordo);
}
.bdl-chiusura h2 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); margin-bottom: 1rem; }
.bdl-chiusura p { color: var(--bdl-su-buio-2); max-width: 58ch; margin-inline: auto; margin-bottom: 1.9rem; }
.bdl-chiusura .bdl-azioni { justify-content: center; }
.bdl-chiusura .bdl-sotto-btn { justify-content: center; }

.bdl-note {
	background: var(--bdl-fondo-2);
	border-top: 1px solid var(--bdl-bordo);
	font-size: .87rem;
	color: var(--bdl-testo-3);
	padding-block: 2rem;
}
.bdl-note p { max-width: 84ch; }
.bdl-note p + p { margin-top: .7rem; }

.bdl-piede {
	background: var(--bdl-buio);
	color: var(--bdl-su-buio-2);
	font-size: .9rem;
	padding-block: 2.8rem 2rem;
	border-top: 1px solid var(--bdl-buio-bordo);
}
.bdl-piede a { color: var(--bdl-su-buio-2); text-decoration: none; }
.bdl-piede a:hover { color: var(--bdl-su-buio); text-decoration: underline; }

/* Tre colonne: il prodotto, chi lo fa, come si raggiunge. Il marchio
   Bedendo sta accanto ai recapiti e non sotto il logo del prodotto,
   perché è quello che risponde al telefono. */
.bdl-piede-corpo {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 2rem 2.6rem;
	padding-bottom: 1.9rem;
	border-bottom: 1px solid var(--bdl-buio-bordo);
}
@media (max-width: 860px) { .bdl-piede-corpo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bdl-piede-corpo { grid-template-columns: 1fr; } }

.bdl-piede-corpo img { width: auto; opacity: .95; }
.bdl-piede .bdl-marchio-prodotto img { height: 34px; margin-bottom: 1rem; }
.bdl-piede .bdl-marchio-bedendo img { height: 40px; margin-bottom: .8rem; }

.bdl-piede h4 {
	font-family: var(--bdl-dati);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bdl-su-buio-2);
	opacity: .7;
	margin: 0 0 .7rem;
}
.bdl-piede .bdl-chi-nome { color: var(--bdl-su-buio); font-weight: 700; font-size: 1rem; }
.bdl-piede .bdl-chi-ruolo { font-size: .87rem; margin-bottom: .8rem; }
.bdl-piede address { font-style: normal; line-height: 1.75; }
.bdl-piede .bdl-fiscali {
	font-family: var(--bdl-dati);
	font-size: .78rem;
	letter-spacing: .01em;
	opacity: .78;
	margin-top: .8rem;
	line-height: 1.7;
}
.bdl-piede .bdl-tel { color: var(--bdl-su-buio); font-weight: 600; }

.bdl-piede-coda {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.6rem;
	align-items: center;
	padding-top: 1.3rem;
	font-size: .84rem;
	opacity: .82;
}
.bdl-piede-coda .bdl-legami { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin-left: auto; }
@media (max-width: 600px) { .bdl-piede-coda .bdl-legami { margin-left: 0; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.bdl-scadenze li { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   Solo dentro WordPress
   --------------------------------------------------------------------- */

/*
 * Il tema dichiara anche lui `body { ... }`, con la stessa specificita':
 * a parita', vince chi stampa per ultimo, e l'ordine di stampa dipende
 * da come sono accodati i fogli. Dipendere da un ordine e' dipendere da
 * una cosa che cambia al prossimo aggiornamento del tema.
 * `body.bdl-lancio` ha specificita' piu' alta e vince comunque.
 *
 * Il peso e la spaziatura delle lettere sono qui perche' il foglio della
 * pagina non li dichiarava affatto: senza dichiararli si eredita quello
 * del tema, e il testo esce piu' sottile e piu' stretto di come e' stato
 * disegnato. Misurato su Twenty Twenty-Five: peso 300 invece di 400,
 * spaziatura -0,1px invece di zero.
 */
body.bdl-lancio {
	margin: 0;
	padding: 0;
	background: var(--bdl-fondo);
	color: var(--bdl-testo);
	font-family: var(--bdl-corpo);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.62;
	letter-spacing: normal;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/*
 * La barra di amministrazione si mette in cima con `position: fixed` e
 * la nostra testata appiccicosa le finisce sotto. WordPress aggiunge la
 * classe `admin-bar` al corpo apposta perche' ce ne si possa accorgere.
 */
body.admin-bar .bdl-testata { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar .bdl-testata { top: 46px; }
}

/* ---------------------------------------------------------------------
   Le pagine per mestiere
   --------------------------------------------------------------------- */

/* Una colonna sola: le sezioni che non hanno una figura a fianco. */
.bdl-riga.bdl-riga-unica { display: block; }

/* L'avviso normativo: la novita' del momento, che e' il motivo per cui
   uno compra adesso invece che fra un anno. */
.bdl-avviso {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 1.1rem;
	align-items: start;
	max-width: 84ch;
	background: var(--bdl-fondo);
	border: 1px solid var(--bdl-bordo);
	border-left: 3px solid var(--bdl-ambra);
	border-radius: 0 var(--bdl-raggio) var(--bdl-raggio) 0;
	padding: 1.4rem 1.5rem;
	box-shadow: var(--bdl-ombra);
}
.bdl-avviso h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.bdl-avviso p { color: var(--bdl-testo-2); font-size: .99rem; }
.bdl-avviso-segno {
	width: 36px; height: 36px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--bdl-fondo-2);
	border: 1px solid var(--bdl-bordo);
	color: var(--bdl-ambra-testo);
}
.bdl-avviso-segno svg { width: 20px; height: 20px; }
@media (max-width: 620px) {
	.bdl-avviso { grid-template-columns: 1fr; }
}

/* La griglia dei mestieri: sono i collegamenti fra le pagine, e devono
   sembrare bottoni perche' sono la cosa che si clicca. */
.bdl-mestieri-griglia {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1rem;
	margin-top: 2.2rem;
}
.bdl-mestiere-carta {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: .2rem .85rem;
	align-items: center;
	text-decoration: none;
	background: var(--bdl-fondo);
	border: 1px solid var(--bdl-bordo);
	border-radius: var(--bdl-raggio);
	padding: 1.05rem 1.15rem;
	box-shadow: var(--bdl-ombra);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bdl-mestiere-carta:hover {
	transform: translateY(-2px);
	border-color: var(--bdl-blu);
	box-shadow: var(--bdl-ombra-alta);
}
.bdl-mestiere-icona {
	grid-row: 1 / span 2;
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 8px;
	background: var(--bdl-fondo-2);
	border: 1px solid var(--bdl-bordo);
}
.bdl-mestiere-icona svg { width: 18px; height: 18px; fill: var(--bdl-blu); }
.bdl-mestiere-nome { font-weight: 700; font-size: 1.01rem; color: var(--bdl-testo); }
.bdl-mestiere-stato {
	font-family: var(--bdl-dati);
	font-size: .72rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bdl-testo-3);
}

/* La pagina su cui si e' non e' un collegamento da premere: si vede che
   e' quella, e non fa finta di portare altrove. */
.bdl-mestiere-carta.bdl-qui {
	border-color: var(--bdl-blu);
	background: var(--bdl-fondo-2);
	box-shadow: none;
	pointer-events: none;
}
.bdl-mestiere-carta.bdl-qui .bdl-mestiere-stato { color: var(--bdl-blu); }

/* I titoli dei mestieri sono frasi intere, non slogan di cinque parole:
   con la misura della pagina principale andavano a cinque righe e
   spingevano i bottoni uno sotto l'altro. */
.bdl-pagina-mestiere .bdl-apertura h1 {
	font-size: clamp(1.85rem, 3.4vw, 2.55rem);
	max-width: 24ch;
}
.bdl-pagina-mestiere .bdl-apertura .bdl-occhio { max-width: 60ch; }

/* Le tre cifre sotto l'apertura: nella pagina principale sono etichette
   corte e stanno in fila da sole. Qui le etichette sono frasi («famiglie
   di impianti con periodicità proprie») e a flusso libero si mettevano
   una sotto l'altra. Tre colonne dichiarate, e la frase va a capo dentro
   la sua. */
.bdl-pagina-mestiere .bdl-fiducia {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.2rem;
}
.bdl-pagina-mestiere .bdl-fiducia div { min-width: 0; }
@media (max-width: 460px) {
	.bdl-pagina-mestiere .bdl-fiducia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bdl-sotto-listino {
	margin-top: 1.8rem;
	font-size: .96rem;
	color: var(--bdl-testo-2);
}
.bdl-sotto-listino a { color: var(--bdl-blu); font-weight: 600; }

/* ---------------------------------------------------------------------
   Le ancore del menu, sotto la testata appiccicosa
   --------------------------------------------------------------------- */

/*
 * La testata resta in cima mentre si scorre. Senza questo margine, chi
 * preme «Come si fa» arriva alla sezione con il titolo nascosto sotto la
 * testata: si vede il testo che comincia a meta' e sembra che il
 * collegamento abbia sbagliato punto. `scroll-margin-top` dice al browser
 * di fermarsi piu' in alto, e non sposta niente nella pagina.
 *
 * Con la barra di amministrazione di WordPress in cima, la testata scende
 * di 32 px e il margine deve seguirla.
 */
.bdl-lancio section[id],
.bdl-lancio [id^="bdl-"] { scroll-margin-top: 88px; }
body.admin-bar .bdl-lancio section[id],
body.admin-bar.bdl-lancio section[id] { scroll-margin-top: 120px; }
@media screen and (max-width: 782px) {
	body.admin-bar.bdl-lancio section[id] { scroll-margin-top: 134px; }
}

/* ---------------------------------------------------------------------
   Il menu a tendina dei moduli
   --------------------------------------------------------------------- */

.bdl-tendina { position: relative; }
.bdl-tendina > summary {
	list-style: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--bdl-su-buio);
	font-weight: 600;
	padding: .3rem .1rem;
	white-space: nowrap;
}
.bdl-tendina > summary::-webkit-details-marker { display: none; }
.bdl-tendina > summary svg {
	width: 14px; height: 14px;
	transition: transform .18s ease;
}
.bdl-tendina[open] > summary svg { transform: rotate(180deg); }

.bdl-tendina-corpo {
	position: absolute;
	top: calc(100% + .7rem);
	left: -.9rem;
	z-index: 50;
	min-width: 270px;
	background: var(--bdl-buio-2);
	border: 1px solid var(--bdl-buio-bordo);
	border-radius: 12px;
	box-shadow: 0 24px 50px -20px rgb(0 0 0 / .85);
	padding: .55rem;
	display: grid;
	gap: .1rem;
}
.bdl-tendina-titolo {
	font-family: var(--bdl-dati);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bdl-su-buio-2);
	opacity: .75;
	padding: .45rem .6rem .3rem;
}
.bdl-tendina-voce {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: .5rem .6rem;
	border-radius: 8px;
	text-decoration: none;
	color: var(--bdl-su-buio);
	font-size: .93rem;
	font-weight: 600;
}
.bdl-tendina-voce:hover { background: rgb(255 255 255 / .07); }
.bdl-tendina-voce.bdl-qui { background: rgb(111 182 228 / .12); color: var(--bdl-blu-chiaro); }
.bdl-tendina-icona {
	width: 26px; height: 26px;
	display: grid; place-items: center;
	border-radius: 6px;
	background: rgb(255 255 255 / .05);
	flex: none;
}
.bdl-tendina-icona svg { width: 15px; height: 15px; fill: var(--bdl-blu-chiaro); }
.bdl-tendina-tutti {
	margin-top: .3rem;
	padding: .55rem .6rem;
	border-top: 1px solid var(--bdl-buio-bordo);
	font-size: .87rem;
	font-weight: 600;
	color: var(--bdl-su-buio-2);
	text-decoration: none;
}
.bdl-tendina-tutti:hover { color: var(--bdl-su-buio); }

/* Sul telefono il menu e' nascosto: la tendina diventa la sola voce
   visibile, ed e' quella che serve di piu'. */
@media (max-width: 900px) {
	.bdl-menu { display: flex; margin-left: auto; gap: .8rem; }
	.bdl-menu > a { display: none; }
	.bdl-tendina-corpo { left: auto; right: -.9rem; }
}

/* ---------------------------------------------------------------------
   La barra per chi e' gia' dentro
   --------------------------------------------------------------------- */

.bdl-continuita {
	background: var(--bdl-buio-3);
	border-bottom: 1px solid var(--bdl-buio-bordo);
	color: var(--bdl-su-buio-2);
	font-size: .9rem;
}
.bdl-continuita .bdl-riga {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1.1rem;
	padding-block: .65rem;
}
.bdl-continuita-eti { font-weight: 600; color: var(--bdl-su-buio); }
.bdl-continuita-porte { display: flex; flex-wrap: wrap; gap: .4rem; }
.bdl-continuita-porte a {
	text-decoration: none;
	font-weight: 600;
	color: var(--bdl-su-buio-2);
	border: 1px solid var(--bdl-buio-bordo);
	border-radius: 7px;
	padding: .28rem .7rem;
}
.bdl-continuita-porte a:hover {
	color: var(--bdl-su-buio);
	background: rgb(255 255 255 / .06);
	border-color: var(--bdl-blu);
}

/* ---------------------------------------------------------------------
   Come si fa: le attivita', passo per passo
   --------------------------------------------------------------------- */

.bdl-comefa { display: grid; gap: .7rem; max-width: 82ch; }

.bdl-attivita {
	border: 1px solid var(--bdl-bordo);
	border-radius: var(--bdl-raggio);
	background: var(--bdl-fondo);
	box-shadow: var(--bdl-ombra);
	overflow: hidden;
}
.bdl-attivita > summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 20px;
	gap: .9rem;
	align-items: center;
	padding: 1rem 1.25rem;
}
.bdl-attivita > summary::-webkit-details-marker { display: none; }
.bdl-attivita > summary::after {
	content: "+";
	font-family: var(--bdl-dati);
	font-size: 1.3rem;
	line-height: 1;
	color: var(--bdl-blu);
	text-align: right;
	transition: transform .2s ease;
}
.bdl-attivita[open] > summary::after { transform: rotate(45deg); }

/* Il numero c'e' perche' l'ordine e' vero: sono i passaggi nell'ordine in
   cui si fanno, non un elenco decorato. */
.bdl-attivita-num {
	width: 30px; height: 30px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--bdl-fondo-2);
	border: 1px solid var(--bdl-bordo);
	font-family: var(--bdl-dati);
	font-size: .84rem;
	font-weight: 700;
	color: var(--bdl-blu);
}
.bdl-attivita-testa { display: grid; gap: .12rem; }
.bdl-attivita-titolo { font-weight: 700; font-size: 1.03rem; }
.bdl-attivita-quando { font-size: .87rem; color: var(--bdl-testo-3); }

.bdl-attivita-corpo { padding: 0 1.25rem 1.25rem 4.15rem; }
@media (max-width: 560px) { .bdl-attivita-corpo { padding-left: 1.25rem; } }

.bdl-passi {
	margin: 0;
	padding-left: 1.3rem;
	display: grid;
	gap: .55rem;
	color: var(--bdl-testo-2);
	font-size: .97rem;
}
.bdl-passi li::marker { color: var(--bdl-blu); font-weight: 700; }

.bdl-attivita-azione { margin-top: 1.1rem; }
.bdl-attivita-spenta { font-size: .92rem; color: var(--bdl-testo-3); }
.bdl-attivita-spenta a { color: var(--bdl-blu); font-weight: 600; }

/* Il pie' di pagina cresce di una colonna: l'elenco dei moduli. */
.bdl-piede-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.bdl-piede-elenco a { text-decoration: none; }
.bdl-piede-azioni { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.bdl-piede-cta {
	display: inline-block;
	font-size: .86rem;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--bdl-buio-bordo);
	border-radius: 7px;
	padding: .42rem .8rem;
	color: var(--bdl-su-buio-2);
}
.bdl-piede-cta:hover { color: var(--bdl-su-buio); background: rgb(255 255 255 / .06); text-decoration: none; }
@media (min-width: 861px) {
	.bdl-piede-corpo { grid-template-columns: minmax(0, 1.15fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1fr); }
}