/* ==========================================================================
   Metodología — sección con caja bordeada y lista de ítems con íconos
   ========================================================================== */

.vts-met {
	position: relative;
	border: 1px solid #FF2730;
	padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 52px);
	/* Espacio extra arriba para que el label no tape el primer ítem */
	padding-top: calc(clamp(28px, 4vw, 52px) + 36px);
}

/* ── Label "METODOLOGÍA" ──────────────────────────────────────────────────── */

.vts-met__titulo {
	position: absolute;
	top: -1px;   /* solapa el borde superior */
	left: -1px;  /* solapa el borde izquierdo */
	display: inline-block;
	background: #FF2730;
	color: #FFFFFF;
	font-family: 'Inter Tight', sans-serif;
	font-size: clamp(17px, 1.65vw + 5.24px, 29px);
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	padding: 9px clamp(16px, 2vw, 28px);
	line-height: 1;
}

/* ── Párrafo intro ────────────────────────────────────────────────────────── */

.vts-met__intro {
	font-family: 'Inter Tight', sans-serif;
	font-size: clamp(15px, 0.97vw + 6.1px, 20px);
	font-weight: 400;
	line-height: calc(28 / 20 * 1em);
	color: #000000;
	margin: 0 0 clamp(16px, 2.5vw, 32px);
	/* br dentro del intro genera el salto de línea visible */
}

/* ── Lista de ítems ───────────────────────────────────────────────────────── */

.vts-met__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vts-met__item {
	display: flex;
	align-items: flex-start;
	gap: clamp(20px, 3vw, 40px);
	padding: clamp(20px, 3vw, 36px) 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* ── Ícono ────────────────────────────────────────────────────────────────── */

.vts-met__icon {
	flex-shrink: 0;
	width: clamp(48px, 5vw, 68px);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* SVG renderizado inline: fill controlable por CSS */
.vts-met__icon-svg {
	width: 100%;
	height: auto;
	fill: #FF2730;
	/* Para SVGs de tipo stroke, forzar el color de trazo también */
	stroke: currentColor;
	color: #FF2730;
}

/* Fallback para imágenes no SVG */
.vts-met__icon-img {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Contenido del ítem ───────────────────────────────────────────────────── */

.vts-met__content {
	flex: 1;
	min-width: 0;
	padding-top: 4px;
}

/* Título del ítem — 24px Extra Bold */
.vts-met__item-titulo {
	font-family: 'Inter Tight', sans-serif;
	font-size: clamp(18px, 1.16vw + 7.3px, 24px);
	font-weight: 800;
	line-height: calc(30 / 24 * 1em);
	color: #000000;
	margin: 0 0 6px;
}

/* Descripción — 18px Light */
.vts-met__item-desc {
	font-family: 'Inter Tight', sans-serif;
	font-size: clamp(13px, 0.96vw + 4.15px, 18px);
	font-weight: 300;
	line-height: calc(26 / 18 * 1em);
	color: rgba(0, 0, 0, 0.75);
	margin: 0;
}

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

@media (max-width: 480px) {
	.vts-met__item {
		flex-direction: column;
		gap: 12px;
	}

	.vts-met__icon {
		width: 48px;
	}
}