/* ==========================================================================
   Categoría Sueroterapias — secciones propias
   Prefijo: vit-cat-sueroterapias-*
   Cargado condicionalmente en is_tax('product_cat', 'sueroterapias').
   Depende de cat-global.css (hero, cats, info, destacados, cta, faqs).
   ========================================================================== */

/* ========== Override del listado de filtros (destacados global) ========== */
.vit-cat-sueroterapias-filters-list {
	max-width: 750px !important;
}

/* ==========================================================================
   ¿Cómo funcionan? — Sección exclusiva de Sueroterapias
   Prefijo: vit-cat-sueroterapias-como
   ========================================================================== */

.vit-cat-sueroterapias-como {
	background: var(--vit-dark);
	padding: 64px 0;
	overflow: hidden;
}

.vit-cat-sueroterapias-como__inner {
	max-width: var(--mwm-max-width);
	margin: 0 auto;
	padding: 0 var(--mwm-padding-x);
	display: flex;
	flex-direction: column;
	gap: 64px;
}

/* ── Header centrado ──────────────────────────────────────────────────────── */

.vit-cat-sueroterapias-como__header {
	color: var(--Verde-esencia,#AAE3DB);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 554px;
	margin: 0 auto;
	text-align: center;
}

.vit-cat-sueroterapias-como__titulo-intro {
	font-family: var(--vit-font-heading);
	font-size: var(--mwm-h3);  /* 40px */
	font-weight: 400;
	color: var(--vit-bg);
	margin: 0;
}

.vit-cat-sueroterapias-como__desc-intro {
	font-family: var(--vit-font-body);
	font-size: 16px;
	line-height: 1.2;
	color: var(--vit-mint);
	margin: 0;
}

/* ── Wrap de pasos (título izquierda + fila de cards) ─────────────────────── */

.vit-cat-sueroterapias-como__pasos-wrap {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.vit-cat-sueroterapias-como__titulo-pasos {
	font-family: var(--vit-font-heading);
	font-size: var(--mwm-h3);  /* 40px */
	font-weight: 400;
	color: var(--vit-bg);
	max-width: 430px;
	margin: 0;
}

/* ── Fila de cards ────────────────────────────────────────────────────────── */

.vit-cat-sueroterapias-como__pasos {
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

.vit-cat-sueroterapias-como__paso {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 17px;
}

/* ── Icono imagen ─────────────────────────────────────────────────────────── */

.vit-cat-sueroterapias-como__paso-icon {
	flex-shrink: 0;
}

.vit-cat-sueroterapias-como__paso-img {
	width: 86px;
	height: 86px;
	object-fit: contain;
	object-position: center;
	display: block;
}

/* ── Textos del paso ──────────────────────────────────────────────────────── */

.vit-cat-sueroterapias-como__paso-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.vit-cat-sueroterapias-como__paso-titulo {
	font-family: var(--vit-font-heading);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	color: var(--vit-teal);
	margin: 0;
}

.vit-cat-sueroterapias-como__paso-desc {
	font-family: var(--vit-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--vit-bg);
	margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.vit-cat-sueroterapias-como__pasos {
		flex-wrap: wrap;
	}

	.vit-cat-sueroterapias-como__paso {
		flex: 0 0 calc(50% - 20px);
	}
}

@media (max-width: 600px) {
	.vit-cat-sueroterapias-como__inner {
		gap: 40px;
	}

	.vit-cat-sueroterapias-como__paso {
		flex: 0 0 100%;
	}

	.vit-cat-sueroterapias-como__titulo-intro,
	.vit-cat-sueroterapias-como__titulo-pasos {
		font-size: 28px;
	}
}