/* =========================================================================
   Dal Click al Check-in — foglio di stile principale
   Struttura: token, reset, tipografia, utility, componenti, sezioni, blog.
   ========================================================================= */

/* --- 1. Token ---------------------------------------------------------- */

:root {
	/* Colori di brand */
	--blu: #2150ad;
	--blu-scuro: #16367a;
	--blu-profondo: #0f2755;
	--blu-tenue: #eef2fb;
	--arancio: #e87f2f;
	--arancio-scuro: #cc6a1e;
	--arancio-tenue: #fdf1e6;

	/* Neutri */
	--bianco: #ffffff;
	--inchiostro: #16202f;
	--testo: #3a4657;
	--testo-tenue: #6b7789;
	--sfondo: #f6f8fc;
	--bordo: #e2e8f4;
	--bordo-scuro: rgba(255, 255, 255, 0.18);

	/* Tipografia */
	--font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--font-testo: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	/* Scala tipografica fluida */
	--t-xs: 0.8125rem;
	--t-sm: 0.9375rem;
	--t-base: 1.0625rem;
	--t-md: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
	--t-lg: clamp(1.375rem, 1vw + 1rem, 1.75rem);
	--t-xl: clamp(1.75rem, 2vw + 1rem, 2.5rem);
	--t-2xl: clamp(2.125rem, 3.4vw + 1rem, 3.5rem);
	--t-3xl: clamp(2.5rem, 5vw + 1rem, 4.25rem);

	/* Spaziature */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	/* Forme */
	--r-sm: 8px;
	--r-md: 14px;
	--r-lg: 24px;
	--r-xl: 32px;
	--r-pill: 999px;

	--ombra-sm: 0 2px 8px rgba(15, 39, 85, 0.06);
	--ombra-md: 0 12px 32px rgba(15, 39, 85, 0.10);
	--ombra-lg: 0 28px 70px rgba(15, 39, 85, 0.18);

	--larghezza: 1180px;
	--larghezza-stretta: 760px;
}

/* --- 2. Reset ---------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 90px;
}

body {
	margin: 0;
	background: var(--bianco);
	color: var(--testo);
	font-family: var(--font-testo);
	font-size: var(--t-base);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--blu);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	color: var(--arancio-scuro);
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--inchiostro);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 var(--sp-4);
	font-weight: 800;
}

p {
	margin: 0 0 var(--sp-4);
}

ul, ol {
	margin: 0 0 var(--sp-4);
	padding-left: 1.2em;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* --- 3. Utility -------------------------------------------------------- */

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

.wrap--stretto {
	width: min(100% - 2.5rem, var(--larghezza-stretta));
}

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

.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--sp-3) var(--sp-4);
	background: var(--inchiostro);
	color: var(--bianco);
	border-radius: 0 0 var(--r-sm) 0;
}

.skip-link:focus {
	left: 0;
	top: 0;
	color: var(--bianco);
}

:where(a, button, input, select, textarea, summary, details):focus-visible {
	outline: 3px solid var(--arancio);
	outline-offset: 2px;
	border-radius: var(--r-sm);
}

.occhiello {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--arancio);
	margin-bottom: var(--sp-3);
}

.evidenza {
	color: var(--arancio);
}

.sezione--scura .occhiello,
.sezione--accento .occhiello,
.hero .occhiello {
	color: var(--arancio);
}

/* --- 4. Bottoni -------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	padding: 0.85rem 1.6rem;
	border: 2px solid transparent;
	border-radius: var(--r-pill);
	background: var(--blu);
	color: var(--bianco);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-sm);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
	color: var(--bianco);
	transform: translateY(-2px);
	box-shadow: var(--ombra-md);
}

.btn--accent {
	background: var(--arancio);
	box-shadow: 0 8px 20px rgba(232, 127, 47, 0.32);
}

.btn--accent:hover {
	background: var(--arancio-scuro);
}

.btn--scuro {
	background: var(--inchiostro);
}

.btn--chiaro {
	background: var(--bianco);
	color: var(--blu);
}

.btn--chiaro:hover {
	color: var(--blu-scuro);
}

.btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: var(--blu);
}

.btn--ghost:hover {
	background: var(--blu);
	color: var(--bianco);
}

.sezione--scura .btn--ghost,
.hero .btn--ghost {
	color: var(--bianco);
}

.sezione--scura .btn--ghost:hover,
.hero .btn--ghost:hover {
	background: var(--bianco);
	color: var(--blu);
}

.hero__card .btn--ghost {
	color: var(--blu);
}

.hero__card .btn--ghost:hover {
	background: var(--blu);
	color: var(--bianco);
}

.btn--lg {
	padding: 1.05rem 2.1rem;
	font-size: var(--t-base);
}

.btn--sm {
	padding: 0.6rem 1.15rem;
	font-size: var(--t-xs);
}

.btn--block {
	display: flex;
	width: 100%;
}

/* --- 5. Testata -------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--bordo);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	min-height: 74px;
}

.site-header__brand {
	margin: 0;
}

.site-header__brand a {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	line-height: 1.15;
}

.brand-nome {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.125rem;
	color: var(--inchiostro);
	letter-spacing: -0.02em;
}

.brand-ruolo {
	font-size: var(--t-xs);
	color: var(--testo-tenue);
	letter-spacing: 0.04em;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: var(--sp-6);
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	font-size: var(--t-sm);
	font-weight: 500;
	color: var(--inchiostro);
	text-decoration: none;
}

.site-nav__list a:hover {
	color: var(--blu);
}

.nav-toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.nav-toggle__box {
	position: relative;
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto;
	background: var(--inchiostro);
}

.nav-toggle__box::before,
.nav-toggle__box::after {
	content: "";
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: var(--inchiostro);
	transition: transform 0.2s ease, top 0.2s ease;
}

.nav-toggle__box::before { top: -7px; }
.nav-toggle__box::after { top: 7px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__box {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box::before {
	top: 0;
	transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__box::after {
	top: 0;
	transform: rotate(-45deg);
}

@media (max-width: 900px) {
	.nav-toggle {
		display: block;
	}

	.site-nav {
		position: absolute;
		inset: 100% 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-4);
		padding: var(--sp-5) 1.25rem var(--sp-6);
		background: var(--bianco);
		border-bottom: 1px solid var(--bordo);
		box-shadow: var(--ombra-md);
		display: none;
	}

	.site-nav.aperto {
		display: flex;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: var(--sp-4);
	}

	.site-nav__list a {
		display: block;
		padding: var(--sp-2) 0;
		font-size: var(--t-md);
	}
}

/* --- 6. Hero ----------------------------------------------------------- */

.hero {
	position: relative;
	padding: var(--sp-7) 0 var(--sp-8);
	background: linear-gradient(165deg, var(--blu) 0%, var(--blu-profondo) 100%);
}

.hero__card {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--sp-6);
	align-items: end;
	padding: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: 0;
	background: var(--bianco);
	border-radius: var(--r-xl);
	box-shadow: var(--ombra-lg);
	overflow: hidden;
}

.hero__testo {
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hero__titolo {
	font-size: var(--t-3xl);
	margin-bottom: var(--sp-5);
}

.hero__sommario {
	font-size: var(--t-md);
	color: var(--testo);
	max-width: 34em;
}

.hero__lista {
	margin: var(--sp-5) 0 var(--sp-6);
}

.hero__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.hero__nota {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	margin: var(--sp-4) 0 0;
	font-size: var(--t-sm);
	color: var(--testo-tenue);
}

.hero__prezzo {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--inchiostro);
}

.hero__ritratto {
	position: relative;
	align-self: end;
}

.hero__ritratto-img {
	width: 100%;
	max-width: 460px;
	margin-left: auto;
}

/* Scontorno: la figura sborda dalla card, senza contenitore visibile. */
.hero__card--scontorno .hero__ritratto-img {
	filter: drop-shadow(0 24px 40px rgba(15, 39, 85, 0.22));
}

/* Cornice: per foto su fondo pieno, che senza contenitore mostrerebbero
   lo stacco fra il bianco della card e il bianco dello scatto. */
.hero__card--cornice .hero__ritratto {
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}

.hero__card--cornice .hero__ritratto-img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 22%;
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-md);
}

.hero__cover {
	position: absolute;
	left: 0;
	bottom: var(--sp-6);
	width: 38%;
	max-width: 170px;
	margin: 0;
	transform: rotate(-6deg);
}

.hero__cover-img {
	border-radius: 4px;
	box-shadow: var(--ombra-lg);
}

@media (max-width: 900px) {
	.hero__card {
		grid-template-columns: 1fr;
		padding-bottom: 0;
	}

	.hero__testo {
		padding-bottom: var(--sp-5);
	}

	.hero__ritratto {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: var(--sp-4);
	}

	.hero__ritratto-img {
		max-width: 280px;
		margin: 0;
	}

	.hero__cover {
		position: static;
		width: 130px;
		transform: rotate(-4deg);
		margin-bottom: var(--sp-6);
	}
}

/* --- 7. Sezioni generiche ---------------------------------------------- */

.sezione {
	padding: var(--sp-9) 0;
}

.sezione--scura {
	background: linear-gradient(165deg, var(--blu) 0%, var(--blu-profondo) 100%);
	color: rgba(255, 255, 255, 0.86);
}

.sezione--scura h2,
.sezione--scura h3,
.sezione--scura dt,
.sezione--scura strong {
	color: var(--bianco);
}

.sezione--accento {
	background: var(--blu-tenue);
}

.sezione__intro {
	max-width: 44rem;
	margin-bottom: var(--sp-7);
}

.sezione__titolo {
	font-size: var(--t-2xl);
}

.sezione__sommario {
	font-size: var(--t-md);
}

.sezione__chiusura {
	margin-top: var(--sp-6);
	font-size: var(--t-md);
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--inchiostro);
}

.griglia {
	display: grid;
	gap: var(--sp-5);
}

.griglia--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.griglia--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* --- 8. Liste con spunta ------------------------------------------------ */

.lista-check {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}

.lista-check--due {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.lista-check li {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: var(--sp-3);
	align-items: start;
	font-size: var(--t-sm);
}

.ico-check {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.2rem;
	color: var(--arancio);
	flex-shrink: 0;
}

/* --- 9. Card ------------------------------------------------------------ */

.card {
	position: relative;
	padding: var(--sp-6);
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-sm);
}

.sezione--scura .card {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--bordo-scuro);
	color: rgba(255, 255, 255, 0.86);
}

.card__numero {
	display: block;
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	color: var(--arancio-tenue);
	margin-bottom: var(--sp-3);
}

.card__eyebrow {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--arancio);
	margin-bottom: var(--sp-2);
}

.card__titolo {
	font-size: var(--t-lg);
	margin-bottom: var(--sp-3);
}

.card__testo {
	font-size: var(--t-sm);
	margin-bottom: 0;
}

.card__capitoli {
	margin: var(--sp-4) 0 0;
	padding-left: 1.1em;
	font-size: var(--t-sm);
	color: var(--testo-tenue);
}

.sezione--scura .card__capitoli {
	color: rgba(255, 255, 255, 0.72);
}

.card__capitoli li + li {
	margin-top: var(--sp-2);
}

/* --- 10. Clienti -------------------------------------------------------- */

.clienti {
	padding: var(--sp-7) 0;
	background: var(--sfondo);
	border-bottom: 1px solid var(--bordo);
}

.clienti__titolo {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-align: center;
	color: var(--testo-tenue);
	margin-bottom: var(--sp-5);
}

.clienti__lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-4) var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.clienti__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-md);
}

.clienti__nome {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-sm);
	color: var(--inchiostro);
	letter-spacing: -0.01em;
}

.clienti__luogo {
	font-size: var(--t-xs);
	color: var(--testo-tenue);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- 11. Libro ---------------------------------------------------------- */

.libro__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: var(--sp-8);
	align-items: start;
}

.libro__cover {
	margin: 0 0 var(--sp-5);
}

.libro__cover-img {
	border-radius: var(--r-sm);
	box-shadow: var(--ombra-lg);
}

.libro__dati {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: var(--sp-5);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid var(--bordo-scuro);
	border-radius: var(--r-md);
	font-size: var(--t-sm);
}

.libro__dati div {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
}

.libro__dati dt {
	font-weight: 600;
}

.libro__dati dd {
	margin: 0;
	text-align: right;
	color: rgba(255, 255, 255, 0.72);
}

.libro__sottotitolo {
	font-family: var(--font-display);
	font-size: var(--t-lg);
	font-weight: 600;
	color: var(--arancio);
	margin-top: -0.5rem;
	margin-bottom: var(--sp-5);
}

.libro__sottotitolo-lista {
	font-size: var(--t-md);
	margin-top: var(--sp-6);
}

.libro__azioni {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

@media (max-width: 860px) {
	.libro__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}

	.libro__cover-img {
		max-width: 260px;
	}
}

/* --- 12. Metodo --------------------------------------------------------- */

.metodo__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: metodo;
}

.metodo__step {
	position: relative;
	padding-top: var(--sp-5);
	border-top: 3px solid var(--arancio);
}

.metodo__numero {
	font-family: var(--font-display);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--arancio);
}

.metodo__titolo {
	font-size: var(--t-lg);
	margin: var(--sp-2) 0 var(--sp-3);
}

/* --- 13. Autore --------------------------------------------------------- */

.autore__grid {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: var(--sp-8);
	align-items: center;
}

.autore__foto {
	position: relative;
	border-radius: var(--r-lg);
	background: linear-gradient(165deg, var(--blu) 0%, var(--blu-profondo) 100%);
	overflow: hidden;
}

.autore__foto-img {
	width: 100%;
	mix-blend-mode: normal;
}

.autore__ruolo {
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--arancio);
	margin-top: -0.5rem;
	margin-bottom: var(--sp-5);
}

.citazione {
	margin: var(--sp-6) 0 0;
	padding: var(--sp-5) var(--sp-6);
	background: var(--blu-tenue);
	border-left: 4px solid var(--arancio);
	border-radius: 0 var(--r-md) var(--r-md) 0;
}

.citazione blockquote {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--inchiostro);
	line-height: 1.4;
}

.citazione blockquote p {
	margin: 0;
}

.citazione figcaption {
	margin-top: var(--sp-3);
	font-size: var(--t-sm);
	color: var(--testo-tenue);
}

.citazione figcaption strong {
	display: block;
	color: var(--inchiostro);
}

@media (max-width: 860px) {
	.autore__grid {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}
}

/* --- 13b. Testimonianze ------------------------------------------------- */

.testimonianze {
	background: var(--sfondo);
}

.testimonianze__griglia {
	align-items: start;
}

.testimonianza {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	padding: var(--sp-6);
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-sm);
}

.testimonianza__stelle {
	display: flex;
	gap: 2px;
	margin: 0 0 var(--sp-4);
	color: var(--arancio);
}

.testimonianza__stelle span[aria-hidden] {
	display: inline-flex;
	gap: 2px;
}

.testimonianza__testo {
	flex: 1;
	margin: 0;
	font-size: var(--t-sm);
	color: var(--testo);
	quotes: "\201C" "\201D";
}

.testimonianza__testo p {
	margin: 0 0 var(--sp-3);
}

.testimonianza__testo p:first-child::before {
	content: open-quote;
	color: var(--arancio);
}

.testimonianza__testo p:last-child {
	margin-bottom: 0;
}

.testimonianza__testo p:last-child::after {
	content: close-quote;
	color: var(--arancio);
}

.testimonianza__traduzione {
	margin: var(--sp-4) 0 0;
	padding-top: var(--sp-3);
	border-top: 1px dashed var(--bordo);
	font-size: var(--t-xs);
	color: var(--testo-tenue);
}

.testimonianza__traduzione-flag {
	display: block;
	margin-bottom: var(--sp-1);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--blu);
}

.testimonianza__firma {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--bordo);
	font-size: var(--t-xs);
	color: var(--testo-tenue);
}

.testimonianza__firma strong {
	display: block;
	font-family: var(--font-display);
	font-size: var(--t-sm);
	color: var(--inchiostro);
}

.testimonianza__luogo::after {
	content: " \00B7 ";
}

.testimonianza__fonte {
	font-weight: 600;
	color: var(--blu);
}


.testimonianze__schede {
	margin: var(--sp-6) 0 0;
	text-align: center;
	font-size: var(--t-sm);
	color: var(--testo-tenue);
}

.testimonianze__schede a {
	font-weight: 600;
}

.ico-star {
	width: 1.1rem;
	height: 1.1rem;
}

/* --- 15. Consulenza gratuita (lead magnet) ------------------------------ */

.capitolo,
.consulenza-gratuita {
	background: var(--sfondo);
}

.capitolo__box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-8);
	align-items: center;
}

@media (max-width: 860px) {
	.capitolo__box {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}
}

/* --- 16. Form ----------------------------------------------------------- */

.form-box {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-md);
}

.form-box__titolo {
	font-size: var(--t-lg);
	margin-bottom: var(--sp-2);
}

.form-box__sommario {
	font-size: var(--t-sm);
	color: var(--testo-tenue);
	margin-bottom: var(--sp-5);
}

.capitolo__form .form-lead {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-md);
}

.form-lead__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-lead__campi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}

.campo {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin: 0;
}

.campo--full {
	grid-column: 1 / -1;
}

.campo label {
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--inchiostro);
}

.campo__obbligatorio {
	color: var(--arancio);
}

.campo input,
.campo select,
.campo textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	background: var(--bianco);
	border: 1.5px solid var(--bordo);
	border-radius: var(--r-sm);
	font-size: var(--t-sm);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
	border-color: var(--blu);
	box-shadow: 0 0 0 3px rgba(33, 80, 173, 0.14);
	outline: none;
}

.campo textarea {
	resize: vertical;
	min-height: 7rem;
}

.campo--consenso {
	margin-bottom: var(--sp-4);
}

.campo--consenso label {
	display: grid;
	grid-template-columns: 1.25rem 1fr;
	gap: var(--sp-3);
	align-items: start;
	font-weight: 400;
	font-size: var(--t-xs);
	color: var(--testo-tenue);
	line-height: 1.5;
}

.campo--consenso input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--blu);
}

.form-lead__azioni {
	margin: 0;
}

.form-lead__esito:empty {
	display: none;
}

.messaggio {
	margin: var(--sp-4) 0 0;
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--r-sm);
	font-size: var(--t-sm);
}

.messaggio--ok {
	background: #e8f6ee;
	border: 1px solid #a8dcc0;
	color: #14663c;
}

.messaggio--ko {
	background: #fdecec;
	border: 1px solid #f2b8b8;
	color: #96201f;
}

.form-cerca {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
}

.form-cerca input {
	flex: 1;
	padding: 0.7rem 0.9rem;
	border: 1.5px solid var(--bordo);
	border-radius: var(--r-sm);
}

/* --- 17. Acquisto ------------------------------------------------------- */

.acquisto .sezione__intro {
	max-width: none;
	text-align: center;
	margin-inline: auto;
}

.acquisto__prezzo {
	font-family: var(--font-display);
	font-size: var(--t-xl);
	font-weight: 800;
	color: var(--blu);
	margin: 0;
}

.acquisto__opzioni {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-5);
	max-width: 800px;
	margin-inline: auto;
}

.acquisto__card {
	display: flex;
	flex-direction: column;
	padding: var(--sp-6);
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-sm);
}

.acquisto__card--evidenza {
	border: 2px solid var(--arancio);
	box-shadow: var(--ombra-md);
}

.acquisto__flag {
	align-self: flex-start;
	padding: 0.3rem 0.8rem;
	margin-bottom: var(--sp-3);
	background: var(--arancio-tenue);
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--arancio-scuro);
}

.acquisto__card-titolo {
	font-size: var(--t-lg);
}

.acquisto__card p {
	font-size: var(--t-sm);
}

.acquisto__card .btn {
	margin-top: auto;
}

.acquisto__nota {
	margin: var(--sp-3) 0 0;
	font-size: var(--t-xs);
	color: var(--testo-tenue);
	text-align: center;
}

/* --- 17b. Pre-lancio: lista d'attesa ------------------------------------ */

.prelancio {
	max-width: 640px;
	margin-inline: auto;
	text-align: center;
}

.prelancio .sezione__intro {
	max-width: none;
	margin-bottom: var(--sp-6);
}

.prelancio__conto {
	display: inline-flex;
	align-items: baseline;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
	padding: 0.4rem 1.1rem;
	background: var(--arancio);
	border-radius: var(--r-pill);
	color: var(--bianco);
	font-family: var(--font-display);
	font-weight: 700;
}

.prelancio__conto-numero {
	font-size: 1.5rem;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.prelancio__conto-etichetta {
	font-size: var(--t-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.prelancio__form .form-lead {
	padding: clamp(1.5rem, 3vw, 2.25rem);
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-md);
	text-align: left;
}

.prelancio__form .btn {
	width: 100%;
}

/* --- 18. FAQ ------------------------------------------------------------ */

.faq__lista {
	display: grid;
	gap: var(--sp-3);
}

.faq__item {
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--r-md);
	overflow: hidden;
}

.faq__item[open] {
	border-color: var(--blu);
	box-shadow: var(--ombra-sm);
}

.faq__domanda {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-base);
	color: var(--inchiostro);
	cursor: pointer;
	list-style: none;
}

.faq__domanda::-webkit-details-marker {
	display: none;
}

.faq__domanda::after {
	content: "+";
	flex-shrink: 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--arancio);
	transition: transform 0.2s ease;
}

.faq__item[open] .faq__domanda::after {
	transform: rotate(45deg);
}

.faq__risposta {
	padding: 0 var(--sp-5) var(--sp-5);
	font-size: var(--t-sm);
}

.faq__risposta p {
	margin: 0;
}

/* --- 19. CTA finale ----------------------------------------------------- */

.cta-finale {
	text-align: center;
}

.cta-finale__titolo {
	font-size: var(--t-2xl);
}

.cta-finale__testo {
	font-size: var(--t-md);
	max-width: 40em;
	margin-inline: auto;
}

.cta-finale__bonus {
	max-width: 42em;
	margin: var(--sp-6) auto;
	padding: var(--sp-5);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--bordo-scuro);
	border-radius: var(--r-md);
	font-size: var(--t-sm);
}

.cta-finale__bonus p:last-child {
	margin-bottom: 0;
}

.cta-finale__bonus-flag {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	margin-bottom: var(--sp-3);
	background: var(--arancio);
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bianco);
}

.cta-finale__azioni {
	margin: 0;
}

/* --- 20. Pagina consulenza --------------------------------------------- */

.consulenza-hero {
	padding: var(--sp-8) 0 var(--sp-9);
	background: linear-gradient(165deg, var(--blu) 0%, var(--blu-profondo) 100%);
	color: rgba(255, 255, 255, 0.88);
}

.consulenza-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-8);
	align-items: start;
}

.consulenza-hero h1,
.consulenza-hero h2 {
	color: var(--bianco);
}

.consulenza-hero .hero__titolo {
	font-size: var(--t-2xl);
}

.consulenza-hero .ico-check {
	color: var(--arancio);
}

.consulenza-hero__bonus {
	margin-top: var(--sp-6);
	padding: var(--sp-5);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid var(--bordo-scuro);
	border-radius: var(--r-md);
	font-size: var(--t-sm);
}

.consulenza-hero__bonus p:last-child {
	margin-bottom: 0;
}

.consulenza__ritratto {
	margin-top: var(--sp-6);
}

.consulenza__ritratto-img {
	max-width: 300px;
	filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.3));
}

@media (max-width: 900px) {
	.consulenza-hero__grid {
		grid-template-columns: 1fr;
	}

	.consulenza__ritratto {
		display: none;
	}
}

/* --- 21. Articoli e testo lungo ---------------------------------------- */

.articolo__testata {
	padding: var(--sp-8) 0 var(--sp-5);
	background: var(--sfondo);
	border-bottom: 1px solid var(--bordo);
}

.pagina__testata {
	padding: var(--sp-8) 0 var(--sp-5);
}

.articolo__badge {
	display: inline-block;
	padding: 0.3rem 0.85rem;
	margin-bottom: var(--sp-4);
	background: var(--arancio-tenue);
	border-radius: var(--r-pill);
	color: var(--arancio-scuro);
}

.articolo__titolo {
	font-size: var(--t-2xl);
}

.articolo__sommario {
	font-size: var(--t-md);
	color: var(--testo);
	max-width: 40em;
}

.articolo__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: var(--sp-4) 0 0;
	font-size: var(--t-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--testo-tenue);
}

.articolo__copertina {
	margin: 0;
	padding: var(--sp-6) 0 0;
}

.articolo__copertina img {
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-md);
}

.testo-lungo {
	padding: var(--sp-7) 0;
	font-size: var(--t-md);
}

.testo-lungo > *:first-child {
	margin-top: 0;
}

.testo-lungo h2 {
	font-size: var(--t-xl);
	margin-top: var(--sp-7);
}

.testo-lungo h3 {
	font-size: var(--t-lg);
	margin-top: var(--sp-6);
}

.testo-lungo ul,
.testo-lungo ol {
	margin-bottom: var(--sp-5);
	padding-left: 1.4em;
}

.testo-lungo li + li {
	margin-top: var(--sp-2);
}

.testo-lungo blockquote {
	margin: var(--sp-6) 0;
	padding: var(--sp-5) var(--sp-6);
	background: var(--blu-tenue);
	border-left: 4px solid var(--arancio);
	border-radius: 0 var(--r-md) var(--r-md) 0;
	font-family: var(--font-display);
	font-size: var(--t-md);
	font-weight: 600;
	color: var(--inchiostro);
}

.testo-lungo blockquote p:last-child {
	margin-bottom: 0;
}

.testo-lungo img {
	border-radius: var(--r-md);
	margin: var(--sp-6) 0;
}

.testo-lungo table {
	width: 100%;
	border-collapse: collapse;
	margin: var(--sp-6) 0;
	font-size: var(--t-sm);
}

.testo-lungo th,
.testo-lungo td {
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--bordo);
	text-align: left;
	vertical-align: top;
}

.testo-lungo th {
	background: var(--blu-tenue);
	font-family: var(--font-display);
	color: var(--inchiostro);
}

/* --- 22. Card articolo -------------------------------------------------- */

.card--articolo {
	padding: 0;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card--articolo:hover {
	transform: translateY(-4px);
	box-shadow: var(--ombra-md);
}

.card--articolo__link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.card--articolo__media {
	margin: 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--blu-tenue);
}

.card--articolo__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card--articolo__corpo {
	padding: var(--sp-5);
}

.card--articolo__cta {
	display: inline-block;
	margin-top: var(--sp-4);
	font-family: var(--font-display);
	font-size: var(--t-sm);
	font-weight: 700;
	color: var(--blu);
}

.card--articolo:hover .card--articolo__cta {
	color: var(--arancio-scuro);
}

/* --- 23. Paginazione ---------------------------------------------------- */

.pagination {
	margin-top: var(--sp-7);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--r-sm);
	font-size: var(--t-sm);
	font-weight: 600;
	text-decoration: none;
}

.page-numbers.current {
	background: var(--blu);
	border-color: var(--blu);
	color: var(--bianco);
}

/* --- 24. Footer --------------------------------------------------------- */

.site-footer {
	padding: var(--sp-8) 0 var(--sp-5);
	background: var(--inchiostro);
	color: rgba(255, 255, 255, 0.7);
	font-size: var(--t-sm);
}

.site-footer a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--arancio);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--sp-6);
	padding-bottom: var(--sp-6);
}

.site-footer .brand-nome {
	color: var(--bianco);
	font-size: 1.25rem;
}

.site-footer__claim {
	max-width: 28em;
	margin-top: var(--sp-3);
}

.site-footer__social {
	display: flex;
	gap: var(--sp-4);
	margin: 0;
}

.site-footer__titolo {
	font-size: var(--t-xs);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bianco);
	margin-bottom: var(--sp-4);
}

.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--sp-2);
}

.site-footer__legale {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-top: var(--sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--t-xs);
}

.site-footer__legale p {
	margin: 0;
}

.site-footer__legale-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- 25. WhatsApp ------------------------------------------------------- */

.whatsapp-fab {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	background: #25d366;
	border-radius: 50%;
	color: var(--bianco);
	box-shadow: var(--ombra-md);
	transition: transform 0.15s ease;
}

.whatsapp-fab:hover {
	transform: scale(1.06);
	color: var(--bianco);
}

.whatsapp-fab svg {
	width: 30px;
	height: 30px;
}

/* --- 26. Varie ---------------------------------------------------------- */

.errore-404__lista {
	margin: var(--sp-6) 0;
}

.archivio__vuoto {
	font-size: var(--t-md);
}

@media print {
	.site-header,
	.site-footer,
	.whatsapp-fab,
	.cta-finale,
	.form-lead {
		display: none !important;
	}
}

/* =========================================================================
   PAGINE ELEMENTOR — vocabolario autonomo
   =========================================================================
   Le regole qui sotto non condividono nulla con i componenti del tema.
   Motivo: riusare le classi del tema sui widget significa portarsi dietro
   decisioni prese per un altro markup (colori pensati per una card bianca,
   griglie che confliggono col flex dei contenitori). E' successo tre volte.
   Qui ogni classe e' definita da zero e vale solo dentro Elementor.

   Due regole ricavate misurando il DOM del sito, non dalla documentazione:
   - Elementor conserva _element_id sui contenitori e SCARTA _css_classes:
     le sezioni si agganciano per ID, i widget per classe.
   - Il widget di testo non ha .elementor-widget-container: il contenuto e'
     figlio diretto dell'elemento che porta la classe.
   ========================================================================= */

/* --- Tipografia -------------------------------------------------------- */

.dcci-occhiello .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-size: var(--t-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	color: var(--arancio) !important;
}

.dcci-etichetta .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-size: var(--t-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--testo-tenue) !important;
	text-align: center;
}

.dcci-titolo-hero .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-size: var(--t-3xl) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
}

.dcci-titolo .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-size: var(--t-2xl) !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
}

.dcci-titolo-card .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-size: var(--t-lg) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}

.dcci-numero .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-size: 2.5rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -0.02em !important;
	color: var(--arancio-tenue) !important;
}

.dcci-passo .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-size: var(--t-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	color: var(--arancio) !important;
}

/* Widget di testo: la classe sta sull'elemento, il testo nei figli. */

.dcci-sommario,
.dcci-sommario p {
	font-family: var(--font-testo) !important;
	font-size: var(--t-md) !important;
	line-height: 1.65 !important;
	letter-spacing: normal !important;
}

.dcci-testo-piccolo,
.dcci-testo-piccolo p,
.dcci-testo-piccolo li {
	font-family: var(--font-testo) !important;
	font-size: var(--t-sm) !important;
	line-height: 1.6 !important;
	letter-spacing: normal !important;
}

.dcci-nota,
.dcci-nota p {
	font-family: var(--font-testo) !important;
	font-size: var(--t-sm) !important;
	line-height: 1.6 !important;
	color: var(--testo-tenue);
}

.dcci-tenue,
.dcci-tenue p,
.dcci-tenue li {
	color: var(--testo-tenue);
}

.dcci-sottotitolo,
.dcci-sottotitolo p {
	font-family: var(--font-display) !important;
	font-size: var(--t-lg) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	color: var(--arancio) !important;
}

.dcci-ruolo,
.dcci-ruolo p {
	font-family: var(--font-display) !important;
	font-size: var(--t-md) !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	color: var(--arancio) !important;
}

.dcci-chiusura,
.dcci-chiusura p {
	font-family: var(--font-display) !important;
	font-size: var(--t-md) !important;
	font-weight: 600 !important;
	color: var(--inchiostro) !important;
}

/* --- Colori sui fondi blu ---------------------------------------------- */

.dcci-su-blu,
.dcci-su-blu p,
.dcci-su-blu li,
.dcci-su-blu .elementor-icon-list-text {
	color: rgba(255, 255, 255, 0.86) !important;
}

.dcci-su-blu .elementor-heading-title {
	color: #fff !important;
}

.dcci-su-blu.dcci-sottotitolo,
.dcci-su-blu.dcci-sottotitolo p,
.dcci-su-blu.dcci-ruolo,
.dcci-su-blu.dcci-ruolo p,
.dcci-su-blu .evidenza {
	color: var(--arancio) !important;
}

/* Card chiare annidate in una sezione blu: il testo torna scuro. */
#dcci-hero-card .dcci-lista .elementor-icon-list-text,
#dcci-hero-card p:not(.elementor-heading-title),
#dcci-form-box p:not(.elementor-heading-title) {
	color: var(--testo) !important;
}

#dcci-form-box {
	background-color: var(--bianco) !important;
}

#dcci-form-box .elementor-heading-title {
	color: var(--inchiostro);
}

/* --- Sezioni con fondo blu, agganciate per ID -------------------------- */

#hero,
#libro,
#metodo,
#consulenza,
#dcci-sez-consulenza {
	background-image: linear-gradient(165deg, var(--blu) 0%, var(--blu-profondo) 100%) !important;
}

#dcci-hero-card {
	background-color: var(--bianco) !important;
}

/* --- Colonne: la variabile che usa Elementor --------------------------- */

[id^="dcci-riga-"],
[id^="dcci-griglia-"],
#dcci-hero-card {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start;
}

[id^="dcci-riga-"] > .elementor-element { --width: 48%; }
[id^="dcci-griglia-"] > .elementor-element { --width: 31%; }
#dcci-griglia-indice > .elementor-element { --width: 47%; }

#dcci-riga-libro > .elementor-element:first-child,
#dcci-riga-autore > .elementor-element:first-child { --width: 34%; }

#dcci-riga-libro > .elementor-element:last-child,
#dcci-riga-autore > .elementor-element:last-child { --width: 60%; }

/* La figura scontornata occupa il 69% della sua larghezza: con una colonna
   stretta il ritaglio a tutta altezza le taglierebbe braccio e libro. */
#dcci-hero-card > .elementor-element:first-child { --width: 49%; }
#dcci-hero-card > .elementor-element:last-child { --width: 47%; }

/* --- Elenchi puntati ---------------------------------------------------- */

.dcci-lista .elementor-icon-list-icon i,
.dcci-lista .elementor-icon-list-icon svg {
	color: var(--arancio) !important;
	fill: var(--arancio) !important;
}

.dcci-lista .elementor-icon-list-text {
	font-size: var(--t-sm) !important;
	line-height: 1.5 !important;
}

.dcci-lista:not(.dcci-su-blu) .elementor-icon-list-text {
	color: var(--testo) !important;
}

.dcci-lista--due .elementor-icon-list-items {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--sp-5);
	row-gap: var(--sp-3);
}

.dcci-lista--due .elementor-icon-list-item {
	margin: 0 !important;
	align-items: flex-start;
}

/* --- Immagini ----------------------------------------------------------- */

.dcci-ritratto img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 22%;
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-md);
	width: 100%;
}

.dcci-cover img {
	max-width: 300px;
	border-radius: var(--r-sm);
	box-shadow: var(--ombra-lg);
}

/* Foto scontornata: poggia su un pannello, cosi' l'ombra e il raggio hanno
   un bordo vero da seguire. Ancorata in basso, esce dal bordo inferiore. */
.dcci-foto-autore img {
	aspect-ratio: 7 / 10;
	object-fit: contain;
	object-position: bottom center;
	padding: 2rem 1.5rem 0;
	background-color: var(--blu-tenue);
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-md);
	width: 100%;
}

.dcci-ritratto img[src*="placeholder"],
.dcci-foto-autore img[src*="placeholder"] {
	background: var(--blu-tenue);
	border: 2px dashed #b9c7e4;
	object-fit: contain;
	padding: 2rem;
}

/* --- Dati editoriali sotto la copertina --------------------------------- */

.dcci-dati {
	display: grid;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
	padding: var(--sp-5);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--r-md);
	font-size: var(--t-sm);
}

.dcci-dati > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
}

.dcci-dati span:first-child {
	font-weight: 600;
	white-space: nowrap;
}

.dcci-dati span:last-child {
	text-align: right;
	color: rgba(255, 255, 255, 0.74) !important;
}

/* --- FAQ: l'accordion con l'aspetto del tema ---------------------------- */

.elementor-widget-accordion .elementor-accordion {
	display: grid;
	gap: var(--sp-3);
	border: 0;
}

.elementor-widget-accordion .elementor-accordion-item {
	background: var(--bianco);
	border: 1px solid var(--bordo) !important;
	border-radius: var(--r-md);
	overflow: hidden;
}

.elementor-widget-accordion .elementor-accordion-item:has(.elementor-active) {
	border-color: var(--blu) !important;
	box-shadow: var(--ombra-sm);
}

.elementor-widget-accordion .elementor-tab-title {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5) !important;
	border: 0 !important;
	background: transparent !important;
	cursor: pointer;
}

.elementor-widget-accordion .elementor-accordion-title {
	font-family: var(--font-display) !important;
	font-size: var(--t-base) !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--inchiostro) !important;
	text-decoration: none !important;
	margin: 0;
	flex: 1;
}

.elementor-widget-accordion .elementor-accordion-icon {
	display: none !important;
}

.elementor-widget-accordion .elementor-tab-title::after {
	content: "+";
	flex-shrink: 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--arancio);
	transition: transform 0.2s ease;
}

.elementor-widget-accordion .elementor-tab-title.elementor-active::after {
	transform: rotate(45deg);
}

.elementor-widget-accordion .elementor-tab-content {
	padding: 0 var(--sp-5) var(--sp-5) !important;
	border: 0 !important;
	background: transparent !important;
}

.elementor-widget-accordion .elementor-tab-content p {
	margin: 0;
	font-size: var(--t-sm);
	color: var(--testo);
	max-width: 70ch;
}

/* --- Testimonianze rese dallo shortcode --------------------------------- */

.dcci-testimonianze {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-5);
	text-align: left;
}

.dcci-testimonianza {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--sp-6);
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--r-lg);
	box-shadow: var(--ombra-sm);
}

.dcci-testimonianza__voto {
	margin: 0 0 var(--sp-4);
	font-size: 1.05rem;
	letter-spacing: 2px;
	color: var(--arancio);
}

.dcci-testimonianza blockquote {
	flex: 1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.dcci-testimonianza blockquote p {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-testo);
	font-size: var(--t-sm) !important;
	font-weight: 400;
	line-height: 1.6 !important;
	color: var(--testo) !important;
}

.dcci-testimonianza blockquote p:last-child {
	margin-bottom: 0;
}

.dcci-testimonianza__traduzione {
	margin: var(--sp-4) 0 0;
	padding-top: var(--sp-3);
	border-top: 1px dashed var(--bordo);
	font-size: var(--t-xs) !important;
	line-height: 1.5;
	color: var(--testo-tenue) !important;
}

.dcci-testimonianza__traduzione span {
	display: block;
	margin-bottom: var(--sp-1);
	font-family: var(--font-display);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--blu);
}

.dcci-testimonianza figcaption {
	margin-top: var(--sp-5);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--bordo);
	font-size: var(--t-xs);
	color: var(--testo-tenue);
}

.dcci-testimonianza figcaption strong {
	display: block;
	font-family: var(--font-display);
	font-size: var(--t-sm);
	color: var(--inchiostro);
}

.dcci-testimonianza figcaption span::after {
	content: " \00B7 ";
}

.dcci-testimonianza figcaption em {
	font-style: normal;
	font-weight: 600;
	color: var(--blu);
}

.dcci-testimonianze__schede {
	margin: var(--sp-6) 0 0;
	text-align: center;
	font-size: var(--t-sm);
	color: var(--testo-tenue);
}

.dcci-testimonianze__schede a {
	font-weight: 600;
}

/* --- Approfondimenti resi dallo shortcode ------------------------------- */

.dcci-approfondimenti {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--sp-5);
}

.dcci-approfondimento {
	background: var(--bianco);
	border: 1px solid var(--bordo);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--ombra-sm);
}

.dcci-approfondimento > a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.dcci-approfondimento figure {
	margin: 0;
	aspect-ratio: 3 / 2;
	background: var(--blu-tenue);
}

.dcci-approfondimento figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dcci-approfondimento__corpo {
	padding: var(--sp-5);
}

.dcci-approfondimento__corpo h3 {
	font-family: var(--font-display);
	font-size: var(--t-lg);
	margin-bottom: var(--sp-3);
}

.dcci-approfondimento__corpo p {
	font-size: var(--t-sm);
	margin-bottom: var(--sp-4);
}

.dcci-approfondimento__cta {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--t-sm);
	color: var(--blu);
}

.dcci-approfondimenti__tutti {
	margin-top: var(--sp-6);
	text-align: center;
}

/* --- Consensi nei moduli ------------------------------------------------ */

.elementor-field-type-acceptance .elementor-field-option label {
	font-size: var(--t-xs);
	line-height: 1.5;
	color: var(--testo-tenue);
}

.elementor-field-type-acceptance a {
	font-weight: 600;
}

/* --- Pagina Elementor: il tema non impone larghezze --------------------- */

.pagina--elementor {
	width: 100%;
}

/* --- Adattamento a schermi stretti -------------------------------------- */

@media (max-width: 860px) {
	/* Le regole con ID qui sopra hanno specificita' piu' alta di un selettore
	   di attributo, e le media query non ne aggiungono: vanno ripetute una per
	   una, altrimenti le colonne non si impilano mai sul telefono. */
	[id^="dcci-riga-"] > .elementor-element,
	[id^="dcci-griglia-"] > .elementor-element,
	#dcci-griglia-indice > .elementor-element,
	#dcci-riga-libro > .elementor-element:first-child,
	#dcci-riga-libro > .elementor-element:last-child,
	#dcci-riga-autore > .elementor-element:first-child,
	#dcci-riga-autore > .elementor-element:last-child,
	#dcci-hero-card > .elementor-element,
	#dcci-hero-card > .elementor-element:first-child,
	#dcci-hero-card > .elementor-element:last-child {
		--width: 100%;
	}

	/* Testata compatta: marchio e panino sulla stessa riga. Il bottone vive
	   dentro il menu, come nella demo: qui occuperebbe la riga da solo. */
	#dcci-header > .e-con-inner {
		flex-wrap: nowrap !important;
		gap: var(--sp-4);
	}

	#dcci-header-nav {
		--width: auto;
		flex: 0 0 auto !important;
	}

	#dcci-header-nav .dcci-btn-accento {
		display: none;
	}

	#dcci-header .dcci-header__menu {
		display: none;
	}

	#dcci-header .elementor-menu-toggle {
		display: none !important;
	}

	#dcci-header .dcci-panino {
		display: block;
	}

	/* Sul telefono le sezioni arrivavano a filo dello schermo: il contenitore
	   "boxed" di Elementor ha i lati a zero quando non c'e' larghezza massima. */
	.e-con-boxed > .e-con-inner {
		padding-left: var(--sp-5) !important;
		padding-right: var(--sp-5) !important;
	}

	/* 48px di padding su uno schermo da 375 lasciano poco al contenuto. */
	#dcci-hero-card {
		padding: var(--sp-6) var(--sp-5) 0 !important;
	}

	/* Pulsanti a tutta larghezza: a 375px la misura del
	   desktop mandava il testo a capo tre volte. */
	#dcci-hero-azioni .elementor-shortcode {
		flex-direction: column;
		align-items: stretch;
	}

	#dcci-hero-azioni .btn {
		width: 100%;
		justify-content: center;
		padding: 0.9rem 1.25rem;
		font-size: 15px;
	}

	/* La foto scontornata a tutta larghezza sarebbe sproporzionata. */
	.dcci-foto-autore img {
		display: block;
		max-width: 20rem;
		margin-inline: auto;
	}
}

@media (max-width: 780px) {
	.dcci-lista--due .elementor-icon-list-items {
		grid-template-columns: 1fr;
	}
}


/* --- Popup del menu per telefono ---------------------------------------- */

/* Il riquadro di Elementor sparisce: comanda il contenitore qui sotto. */
.elementor-popup-modal .dialog-widget-content {
	background-color: transparent !important;
	box-shadow: none !important;
}

.elementor-popup-modal .dialog-message {
	padding: 0 !important;
	max-height: none !important;
}

#dcci-menu-popup {
	min-height: 100vh;
	justify-content: center !important;
	gap: var(--sp-6);
	background-image: linear-gradient(165deg, var(--blu) 0%, var(--blu-profondo) 100%) !important;
}

/* La X nativa di Elementor e' 15px: troppo piccola per un dito. Si allarga
   l'area cliccabile, non solo il segno. */
.elementor-popup-modal .dialog-close-button {
	top: 1rem;
	right: 1rem;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bianco);
	opacity: 0.85;
}

.elementor-popup-modal .dialog-close-button:hover {
	opacity: 1;
}

.elementor-popup-modal .dialog-close-button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.dcci-menu-popup__logo img {
	width: 200px;
	max-width: 70%;
	height: auto;
	margin-inline: auto;
	display: block;
}

.dcci-menu-popup__voci .elementor-nav-menu a {
	font-family: var(--font-display);
	font-size: 1.5rem !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	color: var(--bianco) !important;
	padding: 0.6rem 0 !important;
	justify-content: center;
}

.dcci-menu-popup__voci .elementor-nav-menu a:hover,
.dcci-menu-popup__voci .elementor-nav-menu a.elementor-item-active {
	color: var(--arancio) !important;
}

.dcci-menu-popup__social .elementor-social-icon {
	background-color: rgba(255, 255, 255, 0.12) !important;
}

.dcci-menu-popup__social .elementor-social-icon:hover {
	background-color: var(--arancio) !important;
}

/* L'icona del panino compare solo quando il menu orizzontale si ritira. */
.dcci-panino {
	display: none;
}


/* --- Loghi delle strutture ---------------------------------------------- */

/* Le schede bianche servono a due cose: normalizzano proporzioni molto
   diverse fra loro e fanno sparire il fondo bianco dei due loghi che non
   hanno trasparenza. Grigio di riposo, colore al passaggio del mouse. */
.dcci-loghi {
	list-style: none;
	margin: var(--sp-6) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-5);
}

.dcci-loghi__voce {
	display: grid;
	gap: var(--sp-3);
	justify-items: center;
	margin: 0;
}

.dcci-loghi__scheda {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 124px;
	/* Poco margine sopra e sotto: l'unico logo verticale ha bisogno di tutta
	   l'altezza disponibile per non risultare minuscolo accanto agli altri. */
	padding: 1rem 2rem;
	background-color: var(--bianco);
	border-radius: var(--r-md);
	box-shadow: 0 6px 18px rgba(15, 39, 85, 0.06);
}

.dcci-loghi__scheda img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.72;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.dcci-loghi__voce:hover .dcci-loghi__scheda img {
	filter: none;
	opacity: 1;
}

.dcci-loghi__luogo {
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--testo-tenue);
}

@media (max-width: 860px) {
	.dcci-loghi {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-4);
	}

	.dcci-loghi__scheda {
		height: 88px;
		padding: 1rem 1.25rem;
	}
}


/* --- Hero: la foto accompagna l'altezza del testo ----------------------- */

/* Solo da tablet in su: sotto gli 860px le colonne si impilano e allungare
   la foto non avrebbe senso. Il ritaglio laterale toglie il 42% di larghezza,
   che qui e' solo fondo grigio: volto e libro restano interi. */
@media (min-width: 861px) {
	#dcci-hero-card {
		align-items: stretch !important;
	}

	#dcci-hero-card > .elementor-element:last-child {
		display: flex;
	}

	/* Elementor fissa "flex: 0 1 auto" sui widget con un selettore piu'
	   specifico di una classe sola: serve passare per l'ID della card. */
	#dcci-hero-card .dcci-ritratto {
		flex: 1 1 auto;
		display: flex;
	}

	#dcci-hero-card .dcci-ritratto img {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		object-fit: cover;
		object-position: 50% 30%;
	}
}


/* --- Barra fissa in fondo, solo telefono -------------------------------- */

/* Su desktop non serve: la testata appiccicata tiene gia' il bottone della
   consulenza sempre a schermo. Qui sarebbe la seconda copia dello stesso
   invito, e finirebbe sopra il pulsante WhatsApp. */
.dcci-barra-mobile {
	display: none;
}

@media (max-width: 860px) {
	.dcci-barra-mobile {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		padding: 0.7rem 1rem;
		padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
		background-color: rgba(255, 255, 255, 0.97);
		border-top: 1px solid var(--bordo);
		box-shadow: 0 -6px 24px rgba(15, 39, 85, 0.08);
		transform: translateY(120%);
		transition: transform 0.28s ease;
	}

	.dcci-scorso .dcci-barra-mobile {
		transform: translateY(0);
	}

	.dcci-barra-mobile__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		border-radius: var(--r-pill);
		background-color: var(--arancio);
		color: var(--bianco);
		font-family: var(--font-display);
		font-size: 15px;
		font-weight: 700;
		letter-spacing: 0.01em;
		text-decoration: none;
	}

	/* Senza questo la barra coprirebbe le ultime righe del footer, cioe'
	   proprio i dati fiscali. */
	.dcci-ha-barra {
		padding-bottom: 84px;
	}

	/* Il pulsante WhatsApp sale sopra la barra invece di finirci sotto. */
	.dcci-ha-barra .whatsapp-fab {
		bottom: calc(84px + 0.75rem);
	}
}


/* --- Correzioni di impaginazione ---------------------------------------- */
/* I tre passi del metodo portano una linea arancione sopra il numero. */
#dcci-griglia-metodo > .elementor-element {
	padding-top: var(--sp-5);
	border-top: 3px solid var(--arancio);
}

/* I due pulsanti della hero stanno dentro un solo widget, separati da un
   semplice spazio: andando a capo finivano attaccati. Stessa regola della
   demo, applicata al contenitore che li ospita davvero. */
#dcci-hero-azioni .elementor-shortcode {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}


/* Testata: il blocco del marchio cresceva fino a meta' barra e schiacciava
   il menu, che andava a capo. Deve occupare solo il suo ingombro. */
#dcci-header > .e-con-inner > .elementor-element:first-child {
	--width: auto;
	flex: 0 0 auto;
}

#dcci-header-nav {
	--width: auto;
}

#dcci-header .elementor-nav-menu--main {
	flex-wrap: nowrap;
}

/* Chiamata finale: nella demo e' tutta centrata. Le classi del tema che la
   centravano stavano sul contenitore, e Elementor le scarta: serve l'ID. */
#consulenza {
	text-align: center;
}

#consulenza .dcci-sommario,
#consulenza .dcci-sommario p {
	max-width: 46rem;
	margin-inline: auto;
}

/* Prelancio: blocco centrato, modulo dentro una scheda bianca come in demo. */
#acquista {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

#acquista .dcci-sommario strong {
	display: inline-block;
	margin-top: var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--t-xl);
	font-weight: 800;
	color: var(--blu);
}

#acquista .elementor-widget-form {
	padding: 1.65rem;
	background-color: var(--bianco);
	border-radius: 1.5rem;
	box-shadow: 0 18px 40px rgba(15, 32, 71, 0.10);
	text-align: left;
}

#acquista .elementor-button[type="submit"] {
	width: 100%;
	justify-content: center;
	background-color: var(--arancio) !important;
	color: var(--bianco) !important;
}

#acquista .elementor-button[type="submit"]:hover {
	background-color: var(--arancio-scuro) !important;
}


/* Sopra il punto di rottura le righe a due colonne non vanno mai a capo:
   48% + 48% piu' il divario supera il 100%, e la seconda colonna scendeva. */
@media (min-width: 861px) {
	[id^="dcci-riga-"] {
		flex-wrap: nowrap !important;
	}
}


/* --- Header e footer costruiti nel Theme Builder ------------------------ */

/* Stessa logica del resto: classi dedicate, nessuna condivisione col tema. */

/* Lo sticky va sul contenitore della posizione, non sul container di
   Elementor: quest'ultimo e' alto quanto il suo genitore, non ha spazio per
   scorrere dentro di esso e quindi non si ancora mai. */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
	transition: box-shadow 0.25s ease;
}

/* Dopo i primi 80px di scorrimento la barra si accorcia: su un telefono
   una testata piena occuperebbe un decimo dello schermo per sempre. */
.dcci-scorso .elementor-location-header {
	box-shadow: 0 6px 24px rgba(15, 39, 85, 0.10);
}

.dcci-scorso .dcci-marchio-logo img {
	width: 150px;
}

.dcci-marchio-logo img {
	transition: width 0.25s ease;
}

#dcci-header {
	border-bottom: 1px solid var(--bordo);
}

/* Il logo e' un blocco largo (rapporto 4,3:1): si dimensiona sulla
   larghezza, cosi' l'altezza della barra non dipende dall'immagine. */
.dcci-marchio-logo img {
	width: 190px;
	max-width: 100%;
	height: auto;
	display: block;
}

@media (max-width: 860px) {
	.dcci-marchio-logo img { width: 150px; }
}

/* Nei container "boxed" i figli stanno dentro .e-con-inner: e' li' che
   vanno le regole di allineamento, non sul contenitore esterno. */
#dcci-header > .e-con-inner {
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: var(--sp-5);
}

#dcci-header-nav {
	flex: 1 1 auto;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: var(--sp-5);
}

.dcci-header__menu .elementor-nav-menu a {
	font-family: var(--font-testo) !important;
	font-size: var(--t-sm) !important;
	font-weight: 500 !important;
	color: var(--inchiostro) !important;
	padding: 0.5rem 0.75rem !important;
}

.dcci-header__menu .elementor-nav-menu a:hover,
.dcci-header__menu .elementor-nav-menu a.elementor-item-active {
	color: var(--blu) !important;
}

.dcci-btn-accento .elementor-button {
	background-color: var(--arancio) !important;
	border-radius: var(--r-pill) !important;
	padding: 0.7rem 1.4rem !important;
	font-family: var(--font-display) !important;
	font-size: var(--t-xs) !important;
	font-weight: 700 !important;
	color: var(--bianco) !important;
	box-shadow: 0 8px 20px rgba(232, 127, 47, 0.32);
}

.dcci-btn-accento .elementor-button:hover {
	background-color: var(--arancio-scuro) !important;
}

/* Con la testata appiccicata il salto di ancora finirebbe sotto la barra:
   si lascia sopra ogni sezione lo spazio che la barra occupa. */
#hero, #libro, #indice, #metodo, #autore,
#consulenza, #approfondimenti, #consulenza-gratuita, #acquista {
	scroll-margin-top: 7.5rem;
}

@media (max-width: 900px) {
	#hero, #libro, #indice, #metodo, #autore,
	#consulenza, #approfondimenti, #consulenza-gratuita, #acquista {
		scroll-margin-top: 5rem;
	}
}

/* --- Footer -------------------------------------------------------------- */

#dcci-footer {
	color: rgba(255, 255, 255, 0.7);
}

.dcci-footer__marchio img {
	width: 190px;
	max-width: 100%;
	height: auto;
}

.dcci-footer__claim, .dcci-footer__claim p {
	font-size: var(--t-sm) !important;
	line-height: 1.6 !important;
	color: rgba(255, 255, 255, 0.7) !important;
	max-width: 28em;
}

.dcci-footer__titolo .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-size: var(--t-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--bianco) !important;
}

.dcci-footer__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-2);
}

.dcci-footer__social {
	display: flex;
	gap: var(--sp-4);
	margin: var(--sp-4) 0 0;
}

.dcci-footer__voci a {
	font-size: var(--t-sm);
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.dcci-footer__voci a:hover {
	color: var(--arancio);
}

.dcci-footer__legale {
	margin: 0;
	line-height: 1.7;
	padding-top: var(--sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--t-xs);
	color: rgba(255, 255, 255, 0.7);
}

#dcci-footer-colonne {
	gap: var(--sp-6);
	padding-bottom: var(--sp-6);
}

#dcci-footer-colonne > .elementor-element { --width: 22%; }
#dcci-footer-colonne > .elementor-element:first-child { --width: 30%; }

@media (max-width: 900px) {
	#dcci-footer-colonne > .elementor-element,
	#dcci-footer-colonne > .elementor-element:first-child { --width: 100%; }

	/* La testata resta appiccicata anche sul telefono: si compatta e basta. */

	#dcci-header-nav { justify-content: flex-start !important; flex-wrap: wrap; }
}

/* =========================================================================
   COMPATIBILITA' TEMPORANEA — da rimuovere dopo il reimport
   =========================================================================
   I template pubblicati prima della separazione usano ancora i nomi delle
   classi del tema. Questo blocco li fa comportare come le nuove classi, per
   non lasciare la pagina rotta nel frattempo.

   Si cancella quando /home/ e /consulenza/ montano i template aggiornati:
   basta verificare che nel DOM non compaia piu' nessuna classe con "__".
   ========================================================================= */

.occhiello .elementor-heading-title,
.card__eyebrow .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-size: var(--t-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	line-height: 1.4 !important;
	text-transform: uppercase !important;
	color: var(--arancio) !important;
}

.clienti__titolo .elementor-heading-title {
	font-size: var(--t-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--testo-tenue) !important;
	text-align: center;
}

.hero__titolo .elementor-heading-title {
	font-size: var(--t-3xl) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
}

.sezione__titolo .elementor-heading-title,
.cta-finale__titolo .elementor-heading-title {
	font-size: var(--t-2xl) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em !important;
}

.card__titolo .elementor-heading-title,
.metodo__titolo .elementor-heading-title,
.form-box__titolo .elementor-heading-title {
	font-size: var(--t-lg) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
}

.card__numero .elementor-heading-title {
	font-size: 2.5rem !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	color: var(--arancio-tenue) !important;
}

.metodo__numero .elementor-heading-title {
	font-size: var(--t-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.2em !important;
	color: var(--arancio) !important;
}

.elementor-page .hero__sommario,
.elementor-page .hero__sommario p,
.sezione__sommario, .sezione__sommario p,
.cta-finale__testo, .cta-finale__testo p {
	font-size: var(--t-md) !important;
	line-height: 1.65 !important;
	letter-spacing: normal !important;
	color: inherit;
}

.card__testo, .card__testo p,
.card__capitoli, .card__capitoli p, .card__capitoli li,
.form-box__sommario, .form-box__sommario p {
	font-size: var(--t-sm) !important;
	line-height: 1.6 !important;
	letter-spacing: normal !important;
}

.libro__sottotitolo, .libro__sottotitolo p {
	font-family: var(--font-display) !important;
	font-size: var(--t-lg) !important;
	font-weight: 600 !important;
	color: var(--arancio) !important;
}

.autore__ruolo, .autore__ruolo p {
	font-family: var(--font-display) !important;
	font-size: var(--t-md) !important;
	font-weight: 600 !important;
	color: var(--arancio) !important;
}

.sezione__chiusura, .sezione__chiusura p {
	font-family: var(--font-display) !important;
	font-size: var(--t-md) !important;
	font-weight: 600 !important;
	color: var(--inchiostro) !important;
}

/* La hero blu della consulenza, finche' il template non porta i marcatori. */
#dcci-sez-consulenza .hero__sommario,
#dcci-sez-consulenza .hero__sommario p {
	color: rgba(255, 255, 255, 0.86) !important;
}