/* ============================================================================
 * VIKIPOS — Secciones genéricas
 * Cards, features grid, pasos, testimonios, comparativa
 * ============================================================================ */

/* --- Arquetipos (dos tarjetas grandes Retail / Resto) --- */
.vk-arquetipos {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.vk-arquetipos { grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
.vk-arquetipo {
	position: relative;
	padding: 40px;
	border-radius: var(--radius-xl);
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.vk-arquetipo::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--color-accent-primary);
}
.vk-arquetipo--retail::before { background: var(--color-gradient-retail); }
.vk-arquetipo--resto::before  { background: var(--color-gradient-resto); }
.vk-arquetipo:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.14); }
.vk-arquetipo h3 {
	font-family: var(--font-display);
	font-size: var(--fs-2xl);
	margin: 0;
}
.vk-arquetipo ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	color: var(--color-text-muted);
	font-size: var(--fs-md);
}
.vk-arquetipo ul li::before {
	content: "→";
	display: inline-block;
	width: 1.25em;
	color: var(--color-accent-primary);
}
.vk-arquetipo--retail ul li::before { color: var(--color-accent-retail); }
.vk-arquetipo--resto  ul li::before { color: var(--color-accent-resto); }
.vk-arquetipo a.vk-link {
	margin-top: auto;
	color: var(--color-text);
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}
.vk-arquetipo a.vk-link::after { content: "→"; transition: transform var(--dur-base) var(--ease); }
.vk-arquetipo a.vk-link:hover::after { transform: translateX(4px); }

/* --- Features grid con icono --- */
.vk-features {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .vk-features { grid-template-columns: repeat(2, 1fr); } }

.vk-feature {
	padding: 24px;
	border-radius: var(--radius-lg);
	background: var(--color-bg-soft);
	border: 1px solid #eee;
}
.vk-dark .vk-feature {
	background: var(--color-surface);
	border-color: var(--color-border);
}
.vk-feature__icon {
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	background: rgba(108, 99, 255, 0.1);
	color: var(--color-accent-primary);
	margin-bottom: 1rem;
}
.vk-feature__icon svg { width: 20px; height: 20px; }
.vk-feature h3 {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	margin: 0 0 0.5rem;
}
.vk-feature p {
	margin: 0;
	color: var(--color-text-dark-muted);
	font-size: var(--fs-md);
}
.vk-dark .vk-feature p { color: var(--color-text-muted); }

/* --- Pasos horizontales (Cómo funciona) --- */
.vk-steps {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
	counter-reset: vk-step;
}
@media (min-width: 768px) {
	.vk-steps { grid-template-columns: repeat(3, 1fr); }
}
.vk-step {
	counter-increment: vk-step;
	padding-left: 56px;
	position: relative;
}
.vk-step::before {
	content: counter(vk-step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	font-family: var(--font-mono);
	font-size: var(--fs-lg);
	color: var(--color-accent-primary);
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-accent-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
}
.vk-step h3 { font-family: var(--font-display); font-size: var(--fs-xl); margin: 0 0 0.5rem; }
.vk-step p { margin: 0; color: var(--color-text-dark-muted); }
.vk-dark .vk-step p { color: var(--color-text-muted); }

/* --- Testimonios --- */
.vk-testimonials {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.vk-testimonials { grid-template-columns: repeat(3, 1fr); }
}
.vk-testimonial {
	padding: 32px;
	border-radius: var(--radius-lg);
	background: var(--color-bg-light);
	border: 1px solid #eef0f5;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}
.vk-testimonial__quote {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	line-height: 1.45;
	margin: 0;
	color: var(--color-text-dark);
}
.vk-testimonial__quote::before { content: "“"; color: var(--color-accent-primary); font-size: 2em; line-height: 0.1; vertical-align: -0.25em; margin-right: 0.1em; }
.vk-testimonial__author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
}
.vk-testimonial__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-bg-soft);
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
}
.vk-testimonial__who { font-size: var(--fs-sm); line-height: 1.4; }
.vk-testimonial__who strong { display: block; color: var(--color-text-dark); font-family: var(--font-body); font-weight: 600; }
.vk-testimonial__who span { color: var(--color-text-dark-muted); }

/* --- Comparativa tabla 2 cols --- */
.vk-compare {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid #eef0f5;
	background: var(--color-bg-light);
}
.vk-compare__row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 16px 24px;
	border-bottom: 1px solid #eef0f5;
	align-items: center;
	gap: 16px;
}
.vk-compare__row:last-child { border-bottom: 0; }
.vk-compare__row--head {
	background: var(--color-bg-soft);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-md);
}
.vk-compare__row--head > div:nth-child(3) { color: var(--color-accent-primary); }
.vk-compare__label { color: var(--color-text-dark); font-weight: 500; }
.vk-compare__row .no  { color: #c93a3a; font-weight: 600; }
.vk-compare__row .yes { color: var(--color-success); font-weight: 600; }

/* --- Listado de casos --- */
.vk-cases {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}
@media (min-width: 768px) { .vk-cases { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .vk-cases { grid-template-columns: repeat(3, 1fr); } }
.vk-case {
	border-radius: var(--radius-lg);
	border: 1px solid #eef0f5;
	background: var(--color-bg-light);
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.vk-case__metric { font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--color-accent-primary); }
.vk-case h3 { font-family: var(--font-display); font-size: var(--fs-xl); margin: 0; }
.vk-case p { margin: 0; color: var(--color-text-dark-muted); }