/**
 * Configurador de Alcance B2B — Dark-Tech (LEY 4).
 * Variables CSS siempre; acento #00FF00 reservado al resultado y al CTA.
 * Sin animaciones costosas: solo transform/opacity y respeto a reduce-motion.
 */

.df-quote-calc {
	--df-qc-bg: #0A0A0A;
	--df-qc-card: rgba(18, 18, 18, 0.94);
	--df-qc-border: rgba(255, 255, 255, 0.12);
	--df-qc-accent: #00FF00;
	--df-qc-text: #EDEDED;
	--df-qc-muted: #A0A0A0;
	--df-qc-radius: 10px;
	background: var(--df-qc-bg);
	color: var(--df-qc-text);
	padding: 3.5rem 1.25rem;
	border-top: 1px solid var(--df-qc-border);
}

.df-quote-calc__head {
	max-width: 780px;
	margin: 0 auto 2rem;
	text-align: center;
}

.df-quote-calc__kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--df-qc-accent);
}

.df-quote-calc__kicker::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--df-qc-accent);
	box-shadow: 0 0 8px var(--df-qc-accent);
}

.df-quote-calc__title {
	margin: 0 0 0.6rem;
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.15;
	color: var(--df-qc-text);
}

.df-quote-calc__sub {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--df-qc-muted);
}

.df-quote-calc__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 1.25rem;
	max-width: 1080px;
	margin: 0 auto;
}

.df-quote-calc__fields,
.df-quote-calc__result {
	background: var(--df-qc-card);
	border: 1px solid var(--df-qc-border);
	border-radius: var(--df-qc-radius);
	padding: 1.5rem;
}

.df-quote-calc__field {
	margin-bottom: 1.1rem;
}

.df-quote-calc__field label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--df-qc-muted);
}

.df-quote-calc__select {
	width: 100%;
	padding: 0.72rem 0.85rem;
	font-size: 16px;
	color: var(--df-qc-text);
	background: rgba(10, 10, 10, 0.9);
	border: 1px solid var(--df-qc-border);
	border-radius: 8px;
}

.df-quote-calc__select:focus-visible {
	outline: none;
	border-color: var(--df-qc-accent);
	box-shadow: 0 0 20px rgba(0, 255, 0, 0.25);
}

.df-quote-calc__check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.df-quote-calc__check input {
	margin-top: 0.25rem;
	accent-color: var(--df-qc-accent);
}

.df-quote-calc__check label {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--df-qc-muted);
}

.df-quote-calc__result {
	display: flex;
	flex-direction: column;
}

.df-quote-calc__result-kicker {
	margin: 0 0 0.35rem;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--df-qc-muted);
}

.df-quote-calc__dias {
	margin: 0 0 1rem;
	font-size: 16px;
	color: var(--df-qc-muted);
}

.df-quote-calc__dias strong {
	display: block;
	font-size: clamp(30px, 4.6vw, 42px);
	line-height: 1.05;
	color: var(--df-qc-accent);
	text-shadow: 0 0 26px rgba(0, 255, 0, 0.28);
}

.df-quote-calc__list {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--df-qc-muted);
}

.df-quote-calc__list strong {
	color: var(--df-qc-text);
}

.df-quote-calc__note {
	margin: 0 0 1.15rem;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--df-qc-muted);
	opacity: 0.85;
}

.df-quote-calc__cta {
	width: 100%;
	margin-top: auto;
	padding: 0.9rem 1.1rem;
	font-size: 15px;
	font-weight: 700;
	color: #0A0A0A;
	background: var(--df-qc-accent);
	border: 0;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 0 25px rgba(0, 255, 0, 0.45);
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.df-quote-calc__cta:hover {
	transform: translateY(-2px);
	opacity: 0.94;
}

.df-quote-calc__cta:focus-visible {
	outline: 2px solid var(--df-qc-accent);
	outline-offset: 3px;
}

.df-quote-calc__hint {
	margin: 0.7rem 0 0;
	font-size: 13px;
	color: var(--df-qc-accent);
}

.df-quote-calc--compact {
	padding: 2rem 1rem;
}

@media (max-width: 900px) {
	.df-quote-calc__grid {
		grid-template-columns: 1fr;
	}
	.df-quote-calc {
		padding: 2.5rem 1rem;
	}
	.df-quote-calc__fields,
	.df-quote-calc__result {
		padding: 1.15rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.df-quote-calc__cta {
		transition: none;
	}
	.df-quote-calc__cta:hover {
		transform: none;
	}
}

/* ==========================================================================
   CALIBRACIÓN TIPOGRÁFICA EN PX REALES (1rem = 10px en Bricks Builder)
   ========================================================================== */
.df-quote-calc{padding:clamp(44px,5.5vw,68px) 20px;}
.df-quote-calc__head{max-width:800px;margin:0 auto 28px;}
.df-quote-calc__kicker{font-size:12px;margin:0 0 10px;}
.df-quote-calc__title{font-size:clamp(24px,3.2vw,34px);line-height:1.18;margin:0 0 10px;color:#FFFFFF;}
.df-quote-calc__sub{font-size:15.5px;line-height:1.6;color:#CBD5E1;}
.df-quote-calc__grid{gap:20px;max-width:1100px;}
.df-quote-calc__fields,.df-quote-calc__result{padding:24px;border-radius:14px;}
.df-quote-calc__field{margin-bottom:16px;}
.df-quote-calc__field label{font-size:13.5px;color:#F1F5F9;margin-bottom:6px;}
.df-quote-calc__select{font-size:15.5px;padding:11px 14px;border-radius:10px;}
.df-quote-calc__check{gap:10px;margin-top:6px;}
.df-quote-calc__check label{font-size:14px;color:#CBD5E1;}
.df-quote-calc__result-kicker{font-size:11.5px;margin:0 0 6px;}
.df-quote-calc__dias{font-size:15px;color:#CBD5E1;margin:0 0 14px;}
.df-quote-calc__dias strong{font-size:clamp(28px,4vw,38px);margin-bottom:2px;}
.df-quote-calc__list{font-size:14.5px;line-height:1.75;color:#CBD5E1;margin:0 0 14px;}
.df-quote-calc__note{font-size:12.5px;line-height:1.55;color:#94A3B8;margin:0 0 18px;}
.df-quote-calc__cta{font-size:14.5px;padding:14px 20px;border-radius:10px;}
.df-quote-calc__hint{font-size:13px;margin:10px 0 0;}