/* Circuito CDI — stile principale (componenti + layout).
 * Dipendenza: tokens.css + fonts.css.
 */

/* ---------- Reset wrapper Astra: pagine CDI a tutta larghezza ---------- */

.cdi-page #content,
.cdi-page #primary,
.cdi-page .site-content,
.cdi-page .ast-container,
.cdi-page .entry-content,
.cdi-page main#main,
.cdi-page .ast-page-builder-template .entry-content,
.cdi-page article.page {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
	display: block !important;
}

.cdi-page .entry-header,
.cdi-page .ast-single-post-order,
.cdi-page .entry-title,
.cdi-page .post-thumb-img-content {
	display: none !important;
}

.cdi-page .cdi-section,
.cdi-page .cdi-hero {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	flex: none !important;
	box-sizing: border-box;
}

/* ---------- Header / logo Astra: cap dimensioni ---------- */

img.custom-logo,
.custom-logo-link img,
.site-logo-img img,
.ast-site-identity img,
.ast-header-break-point .site-branding img,
header img.custom-logo {
	max-height: 48px !important;
	max-width: 48px !important;
	width: 48px !important;
	height: 48px !important;
	object-fit: contain !important;
}

@media (min-width: 921px) {
	img.custom-logo,
	.custom-logo-link img,
	.site-logo-img img,
	.ast-site-identity img,
	header img.custom-logo {
		max-height: 56px !important;
		max-width: 56px !important;
		width: 56px !important;
		height: 56px !important;
	}
}

.custom-logo-link,
.ast-site-identity .site-logo-img {
	display: inline-flex !important;
	align-items: center !important;
	max-width: 56px !important;
	max-height: 56px !important;
}

.site-title,
.ast-site-title-wrap .site-title {
	font-family: var(--cdi-serif) !important;
	font-size: 1.15rem !important;
	line-height: 1.2 !important;
	color: var(--cdi-charcoal) !important;
}
.site-description { display: none !important; }

/* Centra meglio il main nav Astra sul desktop */
.main-header-menu > .menu-item > a {
	font-family: var(--cdi-sans) !important;
	font-weight: 500 !important;
	font-size: .95rem !important;
}

/* Header: cap larghezza e centra il contenuto come le sezioni */
.site-header .ast-container,
.site-header.ast-default-menu-enable .ast-container,
.ast-primary-header-bar .ast-container,
.ast-above-header > .ast-container,
.ast-below-header > .ast-container {
	max-width: var(--cdi-container) !important;
	padding-inline: var(--cdi-gutter) !important;
	margin-inline: auto !important;
}

.ast-primary-header-bar {
	border-bottom: 1px solid rgba(122, 110, 120, .12);
}

/* ---------- Reset di base sul tema ---------- */

body {
	font-family: var(--cdi-sans);
	color: var(--cdi-text);
	background: var(--cdi-cream);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, .cdi-display {
	font-family: var(--cdi-serif);
	color: var(--cdi-charcoal);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 .5em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); font-family: var(--cdi-sans); font-weight: 600; }

a { color: var(--cdi-magenta); text-decoration: none; }
a:hover { color: var(--cdi-magenta-2); text-decoration: underline; }

/* ---------- Container ---------- */

.cdi-container {
	max-width: var(--cdi-container);
	margin: 0 auto;
	padding-inline: var(--cdi-gutter);
}

.cdi-section {
	padding-block: var(--cdi-section-y);
}

.cdi-section--cream-2 { background: var(--cdi-cream-2); }
.cdi-section--magenta-light { background: var(--cdi-magenta-light); }
.cdi-section--charcoal {
	background: var(--cdi-charcoal);
	color: #F8F0EA;
}
.cdi-section--charcoal h1,
.cdi-section--charcoal h2,
.cdi-section--charcoal h3 { color: #FCF6F1; }

/* ---------- Bottoni ---------- */

.cdi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	font-family: var(--cdi-sans);
	font-weight: 600;
	font-size: 1rem;
	padding: .9em 1.6em;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	min-height: 48px;
	min-width: 48px;
	transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
	text-decoration: none;
}
.cdi-btn:hover { transform: translateY(-1px); text-decoration: none; }

.cdi-btn--primary {
	background: var(--cdi-magenta);
	color: #fff;
}
.cdi-btn--primary:hover {
	background: var(--cdi-magenta-2);
	color: #fff;
}

.cdi-btn--ghost {
	background: transparent;
	color: var(--cdi-magenta);
	border-color: var(--cdi-magenta);
}
.cdi-btn--ghost:hover {
	background: var(--cdi-magenta);
	color: #fff;
}

.cdi-btn--light {
	background: #fff;
	color: var(--cdi-magenta);
}
.cdi-btn--light:hover { background: var(--cdi-cream-2); color: var(--cdi-magenta-2); }

/* ---------- Hero ---------- */

.cdi-hero {
	position: relative;
	background: linear-gradient(180deg, var(--cdi-cream-2) 0%, var(--cdi-cream) 100%);
	overflow: hidden;
}

.cdi-hero__inner {
	display: grid;
	gap: clamp(24px, 4vw, 48px);
	grid-template-columns: 1fr;
	align-items: center;
	padding-block: clamp(56px, 9vw, 112px);
}

@media (min-width: 900px) {
	.cdi-hero--split .cdi-hero__inner {
		grid-template-columns: 1.05fr 1fr;
	}
}

.cdi-hero__eyebrow {
	display: inline-block;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cdi-magenta);
	font-weight: 600;
	margin-bottom: 1em;
}

.cdi-hero__title { margin-bottom: .3em; }
.cdi-hero__sub {
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	color: var(--cdi-text-muted);
	max-width: 56ch;
	margin-bottom: 2em;
}

.cdi-hero__cta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.cdi-hero__media {
	border-radius: var(--cdi-radius-lg);
	overflow: hidden;
	box-shadow: var(--cdi-shadow-card);
	aspect-ratio: 4 / 3;
	background: var(--cdi-magenta-light) center/cover no-repeat;
}

.cdi-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder gradient elegante quando la foto vera non c'è ancora */
.cdi-hero__media--placeholder {
	background:
		radial-gradient(circle at 25% 30%, rgba(255,255,255,.35) 0%, transparent 50%),
		radial-gradient(circle at 75% 70%, rgba(122, 0, 80, .25) 0%, transparent 55%),
		linear-gradient(135deg, var(--cdi-magenta-light) 0%, var(--cdi-magenta) 100%);
	position: relative;
}
.cdi-hero__media--placeholder::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='.18'><circle cx='25' cy='35' r='8' fill='%23fff'/><circle cx='55' cy='55' r='12' fill='%23fff'/><circle cx='80' cy='30' r='6' fill='%23fff'/><path d='M15 80 Q50 65 85 82 L85 100 L15 100 Z' fill='%23fff'/></svg>");
	background-size: cover;
	background-position: center;
}

/* ---------- Card servizio ---------- */

.cdi-grid-3 {
	display: grid;
	gap: clamp(16px, 2.5vw, 24px);
	grid-template-columns: 1fr;
}
@media (min-width: 600px) {
	.cdi-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.cdi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cdi-card-service {
	background: #fff;
	border-radius: var(--cdi-radius-md);
	padding: 28px 24px;
	box-shadow: var(--cdi-shadow-card);
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.cdi-card-service:hover {
	transform: translateY(-2px);
	box-shadow: var(--cdi-shadow-hover);
}

.cdi-card-service__icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--cdi-magenta-light);
	color: var(--cdi-magenta);
	display: grid;
	place-items: center;
	font-size: 1.5rem;
	margin-bottom: 4px;
}

.cdi-card-service__title {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--cdi-charcoal);
	margin: 0;
}

.cdi-card-service__desc {
	color: var(--cdi-text-muted);
	font-size: .95rem;
	margin: 0;
	flex: 1;
}

.cdi-card-service__cta {
	font-weight: 600;
	color: var(--cdi-magenta);
	font-size: .95rem;
	margin-top: 8px;
}
.cdi-card-service__cta::after { content: " →"; }

/* ---------- Pricing ---------- */

.cdi-pricing {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
	align-items: stretch;
	max-width: 1000px;
	margin: 0 auto;
}
@media (min-width: 720px) {
	.cdi-pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.cdi-plan {
	background: #fff;
	border-radius: var(--cdi-radius-md);
	padding: 32px 28px;
	box-shadow: var(--cdi-shadow-card);
	display: flex;
	flex-direction: column;
	gap: 12px;
	position: relative;
}

.cdi-plan--featured {
	border: 2px solid var(--cdi-magenta);
	transform: translateY(-4px);
}

.cdi-plan__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--cdi-magenta);
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
}

.cdi-plan__name {
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--cdi-charcoal);
}

.cdi-plan__price {
	font-family: var(--cdi-serif);
	font-size: 2.6rem;
	color: var(--cdi-magenta);
	line-height: 1;
}
.cdi-plan__price small {
	font-family: var(--cdi-sans);
	font-size: .9rem;
	color: var(--cdi-text-muted);
	font-weight: 400;
}

.cdi-plan__period {
	color: var(--cdi-text-muted);
	font-size: .9rem;
	margin-top: -8px;
}

.cdi-plan__benefits {
	list-style: none;
	margin: 12px 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cdi-plan__benefits li {
	position: relative;
	padding-left: 24px;
	font-size: .95rem;
}
.cdi-plan__benefits li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--cdi-success);
	font-weight: bold;
}

.cdi-plan__cta { margin-top: auto; }

/* ---------- Pricing switch ---------- */

.cdi-pricing-switch {
	display: inline-flex;
	background: #fff;
	border-radius: 999px;
	padding: 4px;
	margin: 0 auto 32px;
	box-shadow: var(--cdi-shadow-card);
	flex-wrap: wrap;
	justify-content: center;
}

.cdi-pricing-switch__btn {
	background: transparent;
	border: 0;
	padding: 10px 18px;
	border-radius: 999px;
	font-family: var(--cdi-sans);
	font-weight: 600;
	font-size: .9rem;
	color: var(--cdi-text-muted);
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
	min-height: 40px;
}

.cdi-pricing-switch__btn.is-active {
	background: var(--cdi-magenta);
	color: #fff;
}

.cdi-pricing-switch__save {
	display: inline-block;
	margin-left: 6px;
	font-size: .7rem;
	background: var(--cdi-warn);
	color: #fff;
	padding: 2px 6px;
	border-radius: 999px;
	font-weight: 700;
}

/* Visibilità prezzi per cadenza — preserva il grid del .cdi-pricing */
[data-cdi-cadence] { display: none !important; }
[data-cdi-cadence].is-visible { display: grid !important; }

/* ---------- Sezione FAQ ---------- */

.cdi-faq {
	max-width: 760px;
	margin: 0 auto;
}

.cdi-faq__item {
	border-bottom: 1px solid rgba(122, 110, 120, .15);
	padding: 16px 0;
}

.cdi-faq__q {
	font-weight: 600;
	color: var(--cdi-charcoal);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.cdi-faq__q::-webkit-details-marker { display: none; }
.cdi-faq__q::after {
	content: "+";
	font-size: 1.5rem;
	color: var(--cdi-magenta);
	transition: transform .2s ease;
}
.cdi-faq__item[open] .cdi-faq__q::after { transform: rotate(45deg); }

.cdi-faq__a {
	color: var(--cdi-text-muted);
	margin-top: 12px;
	line-height: 1.7;
}

/* ---------- CTA finale scura ---------- */

.cdi-cta-final {
	text-align: center;
}
.cdi-cta-final p {
	max-width: 56ch;
	margin: 0 auto 24px;
	font-size: 1.1rem;
	color: rgba(248, 240, 234, 0.85);
}

/* ---------- Testimonianze ---------- */

.cdi-quotes {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.cdi-quote {
	background: #fff;
	border-radius: var(--cdi-radius-md);
	padding: 24px;
	box-shadow: var(--cdi-shadow-card);
	font-style: italic;
	color: var(--cdi-text);
}
.cdi-quote__author {
	display: block;
	margin-top: 16px;
	font-style: normal;
	font-weight: 600;
	color: var(--cdi-magenta);
	font-size: .9rem;
}

/* ---------- Utility ---------- */

.cdi-center { text-align: center; }
.cdi-eyebrow {
	display: inline-block;
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--cdi-magenta);
	font-weight: 600;
	margin-bottom: 1em;
}
.cdi-lead {
	font-size: 1.15rem;
	color: var(--cdi-text-muted);
	max-width: 60ch;
}
.cdi-section__head {
	text-align: center;
	margin-bottom: clamp(32px, 5vw, 56px);
}
.cdi-section__head .cdi-lead { margin: 0 auto; }

/* ============================================================
   HERO video (full-bleed)
   ============================================================ */

.cdi-hero-v {
	position: relative;
	min-height: clamp(420px, 75vh, 720px);
	display: flex;
	align-items: center;
	overflow: hidden;
	color: #FCF6F1;
	isolation: isolate;
}

.cdi-hero-v__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.cdi-hero-v__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(42,32,48,.55) 0%, rgba(42,32,48,.75) 100%),
		linear-gradient(90deg, rgba(122,0,80,.45) 0%, rgba(42,32,48,0) 60%);
}

.cdi-hero-v__inner {
	position: relative;
	z-index: 2;
	padding-block: clamp(56px, 9vw, 112px);
	max-width: 820px;
}

.cdi-hero-v__eyebrow {
	display: inline-block;
	font-size: .78rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #F5E0EE;
	background: rgba(0,0,0,.25);
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 24px;
	font-weight: 600;
	backdrop-filter: blur(8px);
}

/* Tier badge — più grande, visibile, colore dedicato per piano */
.cdi-tier-badge {
	display: inline-block;
	font-family: var(--cdi-sans);
	font-size: .8rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 8px 16px;
	border-radius: 999px;
	margin-bottom: 16px;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.cdi-tier--free {
	background: var(--cdi-success);
	color: #fff;
}
.cdi-tier--prime {
	background: var(--cdi-magenta);
	color: #fff;
}
.cdi-tier--pro {
	background: var(--cdi-yellow);
	color: var(--cdi-charcoal);
}

.cdi-hero-v__title {
	font-family: var(--cdi-serif);
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	line-height: 1.05;
	color: #fff;
	margin: 0 0 18px;
	text-wrap: balance;
}
.cdi-hero-v__title em {
	font-style: italic;
	color: #F5E0EE;
}

.cdi-hero-v__big {
	display: inline-block;
	font-family: var(--cdi-sans);
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	font-weight: 600;
	color: #fff;
	background: rgba(161, 0, 108, .85);
	padding: 8px 18px;
	border-radius: 8px;
	margin-bottom: 24px;
	letter-spacing: .02em;
}

.cdi-hero-v__sub {
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	color: rgba(252, 246, 241, .92);
	line-height: 1.55;
	max-width: 60ch;
	margin: 0 0 36px;
}

.cdi-hero-v__cta {
	display: flex;
	gap: 20px;
	align-items: center;
	flex-wrap: wrap;
}

.cdi-hero-v__link {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid rgba(255,255,255,.4);
	padding-bottom: 2px;
	transition: border-color .2s ease;
}
.cdi-hero-v__link:hover {
	color: #fff;
	border-color: #fff;
	text-decoration: none;
}

.cdi-btn--lg {
	padding: 1.1em 2em;
	font-size: 1.05rem;
}

/* ============================================================
   FEATURE MATRIX — tabella confronto piani
   ============================================================ */

.cdi-matrix-wrap {
	overflow-x: auto;
	max-width: 1080px;
	margin: 0 auto;
	border-radius: var(--cdi-radius-md);
	box-shadow: var(--cdi-shadow-card);
	background: #fff;
}
.cdi-matrix {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}
.cdi-matrix th,
.cdi-matrix td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid rgba(122, 110, 120, .12);
}
.cdi-matrix thead th {
	background: var(--cdi-charcoal);
	color: #fff;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
}
.cdi-matrix thead th:first-child { text-align: left; }
.cdi-matrix tbody td {
	text-align: center;
	color: var(--cdi-charcoal);
	font-weight: 500;
}
.cdi-matrix tbody td:first-child {
	text-align: left;
	font-weight: 500;
	color: var(--cdi-text);
}
.cdi-matrix tbody tr:nth-child(even) td { background: var(--cdi-cream-2); }
.cdi-matrix tbody tr:hover td { background: var(--cdi-magenta-light); }
.cdi-matrix__free  { color: var(--cdi-success); }
.cdi-matrix__prime { color: var(--cdi-magenta); font-weight: 600 !important; background: rgba(161,6,114,.04); }
.cdi-matrix__pro   { color: var(--cdi-charcoal); font-weight: 700 !important; background: rgba(234,237,65,.18); }

/* ============================================================
   VALUE PROPOSITION — prima vs dopo (sezione di conversione)
   ============================================================ */

.cdi-valueprop {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	max-width: 1080px;
	margin: 0 auto;
}
@media (min-width: 820px) {
	.cdi-valueprop { grid-template-columns: 1fr 1fr; gap: 32px; }
}

.cdi-valueprop__col {
	background: #fff;
	border-radius: var(--cdi-radius-md);
	padding: 32px 28px;
	box-shadow: var(--cdi-shadow-card);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cdi-valueprop__col--before {
	background: linear-gradient(180deg, #fff 0%, rgba(185,28,28,.04) 100%);
}
.cdi-valueprop__col--before .cdi-valueprop__label {
	background: rgba(185,28,28,.12);
	color: var(--cdi-error);
}

.cdi-valueprop__col--after {
	background: linear-gradient(180deg, #fff 0%, rgba(161,6,114,.06) 100%);
	border: 2px solid var(--cdi-magenta);
}
.cdi-valueprop__col--after .cdi-valueprop__label {
	background: var(--cdi-magenta);
	color: #fff;
}

.cdi-valueprop__label {
	display: inline-block;
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 6px 14px;
	border-radius: 999px;
	align-self: flex-start;
}

.cdi-valueprop__lead {
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--cdi-text);
	margin: 0;
}

.cdi-valueprop__cost {
	font-size: .95rem;
	line-height: 1.55;
	color: var(--cdi-text-muted);
	margin: 0;
	padding: 14px 16px;
	background: rgba(185,28,28,.06);
	border-left: 3px solid var(--cdi-error);
	border-radius: 4px;
}
.cdi-valueprop__cost strong { color: var(--cdi-error); }

.cdi-valueprop__timeline {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
	counter-reset: cdi-step;
}
.cdi-valueprop__timeline li {
	position: relative;
	padding-left: 56px;
	min-height: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	counter-increment: cdi-step;
}
.cdi-valueprop__timeline li::before {
	content: counter(cdi-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 40px;
	height: 40px;
	background: var(--cdi-magenta);
	color: #fff;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 1.05rem;
	font-family: var(--cdi-serif);
}
.cdi-valueprop__when {
	font-size: .78rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cdi-magenta);
	margin-bottom: 2px;
}
.cdi-valueprop__what {
	font-size: .95rem;
	color: var(--cdi-text);
	line-height: 1.45;
}

/* ============================================================
   DELIVERABLES — lista granulare
   ============================================================ */

.cdi-deliverables {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 820px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cdi-deliverables li {
	background: #fff;
	border-radius: var(--cdi-radius-sm);
	padding: 18px 22px 18px 56px;
	box-shadow: var(--cdi-shadow-card);
	position: relative;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--cdi-text);
}
.cdi-deliverables li::before {
	content: "✓";
	position: absolute;
	left: 18px;
	top: 18px;
	width: 26px;
	height: 26px;
	background: var(--cdi-magenta);
	color: #fff;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: bold;
	font-size: .9rem;
	line-height: 1;
}
.cdi-deliverables li strong {
	color: var(--cdi-charcoal);
	font-weight: 700;
}

/* ============================================================
   BREADCRUMB — briciole di pane sopra l'hero
   ============================================================ */

.cdi-breadcrumb {
	background: var(--cdi-cream);
	border-bottom: 1px solid rgba(122, 110, 120, .12);
	padding-block: 12px;
	font-family: var(--cdi-sans);
}
.cdi-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: center;
	font-size: .88rem;
	color: var(--cdi-text-muted);
}
.cdi-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.cdi-breadcrumb__item a {
	color: var(--cdi-magenta);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color .15s ease;
}
.cdi-breadcrumb__item a:hover,
.cdi-breadcrumb__item a:focus-visible {
	border-bottom-color: var(--cdi-magenta);
}
.cdi-breadcrumb__item.is-current span {
	color: var(--cdi-charcoal);
	font-weight: 600;
}
.cdi-breadcrumb__sep {
	color: rgba(122, 110, 120, .55);
	font-weight: 400;
}

/* ============================================================
   OP SAVINGS — callout sconti specifici per servizi operativi
   ============================================================ */

.cdi-op-savings {
	position: relative;
}
.cdi-op-savings::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 60% at 100% 0%, rgba(234, 237, 65, .18), transparent 60%),
		radial-gradient(45% 60% at 0% 100%, rgba(161, 6, 114, .06), transparent 60%);
	pointer-events: none;
}
.cdi-op-savings .cdi-section__head { position: relative; }
.cdi-op-savings .cdi-eyebrow {
	background: var(--cdi-yellow);
	color: var(--cdi-charcoal);
	padding: 6px 14px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: .04em;
}

.cdi-op-savings__grid {
	max-width: 980px;
	margin: 32px auto 0;
	border-radius: var(--cdi-radius-md);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--cdi-shadow-card);
	position: relative;
}
.cdi-op-savings__row {
	display: grid;
	grid-template-columns: 1.7fr 1fr 1fr 1fr;
	align-items: center;
	gap: 14px;
	padding: 18px 24px;
	border-bottom: 1px solid rgba(122, 110, 120, .1);
	font-size: .95rem;
}
.cdi-op-savings__row:last-child { border-bottom: 0; }
.cdi-op-savings__row--head {
	background: var(--cdi-charcoal);
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.cdi-op-savings__row--head > div { color: #fff; }
.cdi-op-savings__what strong {
	display: block;
	color: var(--cdi-charcoal);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
}
.cdi-op-savings__what small {
	display: block;
	color: var(--cdi-text-muted);
	font-size: .82rem;
	margin-top: 4px;
	line-height: 1.4;
}
.cdi-op-savings__public {
	color: var(--cdi-text-muted);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: rgba(185, 28, 28, .55);
	font-weight: 600;
}
.cdi-op-savings__prime {
	color: var(--cdi-magenta);
	font-weight: 700;
	font-size: 1.05rem;
}
.cdi-op-savings__pro {
	color: var(--cdi-charcoal);
	font-weight: 700;
	background: var(--cdi-yellow);
	padding: 6px 12px;
	border-radius: 8px;
	display: inline-block;
	line-height: 1.2;
	justify-self: start;
}

.cdi-op-savings__roi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	max-width: 980px;
	margin: 24px auto 0;
	position: relative;
}
.cdi-op-savings__roi-card {
	background: #fff;
	border-radius: var(--cdi-radius-md);
	padding: 26px 28px;
	box-shadow: var(--cdi-shadow-card);
	display: flex;
	flex-direction: column;
	gap: 16px;
	border-top: 4px solid transparent;
}
.cdi-op-savings__roi-card--prime { border-top-color: var(--cdi-magenta); }
.cdi-op-savings__roi-card--pro   { border-top-color: var(--cdi-charcoal); }
.cdi-op-savings__roi-eyebrow {
	font-family: var(--cdi-sans);
	font-size: .76rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cdi-text-muted);
}
.cdi-op-savings__roi-card--prime .cdi-op-savings__roi-eyebrow { color: var(--cdi-magenta); }
.cdi-op-savings__roi-body p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.55;
	color: var(--cdi-text);
}
.cdi-op-savings__roi-body strong { color: var(--cdi-charcoal); }
.cdi-op-savings__roi-card .cdi-btn {
	align-self: flex-start;
	margin-top: auto;
}
.cdi-op-savings__note {
	max-width: 980px;
	margin: 18px auto 0;
	text-align: center;
	font-size: .85rem;
	color: var(--cdi-text-muted);
	font-style: italic;
	position: relative;
}

@media (max-width: 820px) {
	.cdi-op-savings__row {
		grid-template-columns: 1fr 1fr;
		row-gap: 8px;
	}
	.cdi-op-savings__row--head { display: none; }
	.cdi-op-savings__what {
		grid-column: 1 / -1;
		padding-bottom: 8px;
		border-bottom: 1px dashed rgba(122, 110, 120, .25);
	}
	.cdi-op-savings__public::before { content: "Pubblico: "; color: var(--cdi-text-muted); font-weight: 600; text-decoration: none; display: inline-block; margin-right: 4px; }
	.cdi-op-savings__prime::before  { content: "PRIME: ";    color: var(--cdi-text-muted); font-weight: 600; display: inline-block; margin-right: 4px; }
	.cdi-op-savings__pro {
		grid-column: 1 / -1;
		justify-self: start;
	}
	.cdi-op-savings__pro::before { content: "PRO: "; font-weight: 700; }
	.cdi-op-savings__roi { grid-template-columns: 1fr; }
}

/* ============================================================
   COMPARISON — tabella confronto vs mercato
   ============================================================ */

.cdi-compare {
	max-width: 920px;
	margin: 0 auto;
	border-radius: var(--cdi-radius-md);
	overflow: hidden;
	box-shadow: var(--cdi-shadow-card);
	background: #fff;
}

.cdi-compare__row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	align-items: center;
	gap: 16px;
	padding: 18px 24px;
	border-bottom: 1px solid rgba(122, 110, 120, .12);
	font-size: .95rem;
}
.cdi-compare__row:last-child { border-bottom: 0; }

.cdi-compare__row--head {
	background: var(--cdi-charcoal);
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cdi-compare__row--head .cdi-compare__them,
.cdi-compare__row--head .cdi-compare__you { color: #fff; }

.cdi-compare__row > div { line-height: 1.4; }
.cdi-compare__row strong { color: var(--cdi-charcoal); display: block; }
.cdi-compare__row small {
	display: block;
	color: var(--cdi-text-muted);
	font-size: .82rem;
	margin-top: 2px;
}

.cdi-compare__them {
	color: var(--cdi-text-muted);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: rgba(185, 28, 28, .5);
}
.cdi-compare__you {
	color: var(--cdi-magenta);
	font-weight: 600;
}

.cdi-compare__row--total {
	background: var(--cdi-magenta-light);
}
.cdi-compare__row--total .cdi-compare__them {
	text-decoration: none;
	color: var(--cdi-charcoal);
}

.cdi-compare__row--save {
	background: var(--cdi-magenta);
	color: #fff;
}
.cdi-compare__row--save .cdi-compare__you {
	color: #fff;
	font-size: 1.05rem;
}

.cdi-compare__row.is-highlighted {
	background: linear-gradient(90deg, var(--cdi-yellow) 0%, rgba(234,237,65,.15) 100%);
}
.cdi-compare__row.is-highlighted strong { color: var(--cdi-charcoal); }

.cdi-compare__badge {
	display: inline-block;
	margin-left: 8px;
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--cdi-charcoal);
	color: #fff;
	padding: 3px 8px;
	border-radius: 999px;
	font-weight: 700;
	vertical-align: middle;
}

.cdi-compare__note {
	max-width: 920px;
	margin: 14px auto 0;
	text-align: center;
	font-size: .82rem;
	color: var(--cdi-text-muted);
	font-style: italic;
}

@media (max-width: 720px) {
	.cdi-compare__row { grid-template-columns: 1fr; gap: 4px; }
	.cdi-compare__them, .cdi-compare__you { text-align: left; padding-left: 0; }
}

/* ============================================================
   PREVIEW — anteprima reale
   ============================================================ */

.cdi-preview {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
}

@media (min-width: 900px) {
	.cdi-preview { grid-template-columns: 1.3fr 1fr; }
}

.cdi-preview__copy h2 { margin-bottom: 16px; }
.cdi-preview__body {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--cdi-text);
	margin-bottom: 28px;
}
.cdi-preview__body p { margin-bottom: 1em; }
.cdi-preview__body em {
	background: #fff;
	padding: 1px 8px;
	border-radius: 4px;
	font-style: normal;
	font-weight: 600;
	color: var(--cdi-magenta);
	font-size: .95em;
}

.cdi-preview__visual {
	aspect-ratio: 1/1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, var(--cdi-yellow) 0%, var(--cdi-magenta-light) 70%);
	box-shadow: 0 20px 60px rgba(161, 6, 114, .2);
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
	max-width: 420px;
	margin: 0 auto;
}
.cdi-preview__visual::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/puppette-tondo.png") center/85% no-repeat;
}

/* Variante con immagine reale (no puppette overlay, no radial bg) */
.cdi-preview__visual--image {
	aspect-ratio: 1/1;
	border-radius: 24px;
	background: none;
	box-shadow: 0 20px 60px rgba(161, 6, 114, .25);
	overflow: hidden;
	max-width: 480px;
}
.cdi-preview__visual--image::before { display: none; }
.cdi-preview__visual--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
   STATS — banda 3 numeri scura
   ============================================================ */

.cdi-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px;
	text-align: center;
}
@media (min-width: 600px) {
	.cdi-stats { grid-template-columns: repeat(3, 1fr); }
}

.cdi-stats__num {
	font-family: var(--cdi-serif);
	font-size: clamp(2.4rem, 5vw, 4rem);
	color: #fff;
	line-height: 1;
	margin-bottom: 8px;
}
.cdi-stats__label {
	color: rgba(248, 240, 234, .75);
	font-size: .95rem;
	letter-spacing: .04em;
}

/* ============================================================
   TESTIMONIAL grande in evidenza
   ============================================================ */

.cdi-quote-big {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	border: 0;
	padding: 0;
}
.cdi-quote-big p {
	font-family: var(--cdi-serif);
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	color: var(--cdi-charcoal);
	line-height: 1.4;
	margin: 0 0 24px;
	text-wrap: balance;
}
.cdi-quote-big footer {
	color: var(--cdi-text-muted);
	font-size: .95rem;
}
.cdi-quote-big footer strong {
	color: var(--cdi-magenta);
	font-weight: 600;
	display: block;
	margin-bottom: 2px;
}
.cdi-quote-big footer span {
	font-size: .85rem;
}

/* ============================================================
   DISPATCHER — card grandi home
   ============================================================ */

.cdi-dispatch {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 600px) {
	.cdi-dispatch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
	.cdi-dispatch--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cdi-dispatch--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cdi-dispatch--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.cdi-dispatch__card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fff;
	padding: 32px 28px;
	border-radius: var(--cdi-radius-md);
	box-shadow: var(--cdi-shadow-card);
	text-decoration: none;
	color: var(--cdi-text);
	border: 2px solid transparent;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.cdi-dispatch__card:hover {
	transform: translateY(-3px);
	box-shadow: var(--cdi-shadow-hover);
	border-color: var(--cdi-magenta-light);
	text-decoration: none;
}
.cdi-dispatch__card.is-featured {
	border-color: var(--cdi-magenta);
	background: linear-gradient(180deg, var(--cdi-magenta-light) 0%, #fff 30%);
}

.cdi-dispatch__icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--cdi-magenta-light);
	color: #A10672;
	display: grid;
	place-items: center;
}
.cdi-dispatch__icon svg {
	width: 30px;
	height: 30px;
}
.cdi-dispatch__title {
	font-family: var(--cdi-serif);
	font-size: 1.5rem;
	color: var(--cdi-charcoal);
	line-height: 1.2;
}
.cdi-dispatch__desc {
	color: var(--cdi-text-muted);
	font-size: .95rem;
	line-height: 1.55;
	flex: 1;
}
.cdi-dispatch__cta {
	color: var(--cdi-magenta);
	font-weight: 600;
	font-size: .95rem;
	margin-top: 8px;
}

/* ============================================================
   CTA finale: bottone + link laterale
   ============================================================ */

.cdi-cta-final__row {
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.cdi-cta-final__link {
	color: rgba(255,255,255,.85);
}
.cdi-cta-final__link:hover { color: #fff; }

/* --- cdi-hero-v--has-image: hero con immagine brand FB (no shade scuro, layout 2-col) --- */
.cdi-hero-v--has-image {
	min-height: clamp(440px, 70vh, 680px);
	color: #2A1B2D;
	background: linear-gradient(135deg, #FFF5FA 0%, #FFE7F1 60%, #FCD3E5 100%);
}
.cdi-hero-v--has-image .cdi-hero-v__image {
	position: absolute;
	top: 0;
	right: 0;
	width: 55%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.cdi-hero-v--has-image .cdi-hero-v__shade {
	background: linear-gradient(90deg, rgba(255,245,250,1) 35%, rgba(255,245,250,0.85) 45%, rgba(255,245,250,0) 60%);
}
.cdi-hero-v--has-image .cdi-hero-v__inner {
	max-width: 50%;
	padding-right: 2rem;
}
.cdi-hero-v--has-image .cdi-hero-v__eyebrow {
	color: #A10672;
	text-transform: uppercase;
	letter-spacing: .12em;
}
.cdi-hero-v--has-image .cdi-hero-v__title {
	color: #2A1B2D;
}
.cdi-hero-v--has-image .cdi-hero-v__big {
	color: #A10672;
	background: rgba(161, 6, 114, .08);
	padding: .6rem 1rem;
	border-radius: 999px;
	display: inline-block;
}
.cdi-hero-v--has-image .cdi-hero-v__sub {
	color: #4A3B4F;
}
.cdi-hero-v--has-image .cdi-hero-v__link {
	color: #A10672;
}
@media (max-width: 900px) {
	.cdi-hero-v--has-image {
		min-height: auto;
		padding-top: 2rem;
	}
	.cdi-hero-v--has-image .cdi-hero-v__image {
		position: relative;
		width: 100%;
		height: 280px;
		margin-bottom: 1.5rem;
	}
	.cdi-hero-v--has-image .cdi-hero-v__shade {
		background: none;
	}
	.cdi-hero-v--has-image .cdi-hero-v__inner {
		max-width: 100%;
		padding-right: 0;
	}
}