/*
 * VOZ IP: subpágina Insight (/insight/), secciones 1 (hero) y 2 ("El punto de partida").
 * Diseños aprobados: design/insight/01-hero.png y 02-necesidad.png (lienzo 1440 x 810; medidas ÷2 del PNG 2x).
 * Solo tokens de theme.json. El teal oscuro de números y acentos de la sección 2 es --vz-ins-teal (#1B6E6C,
 * muestreado del diseño; no existía en la paleta). Adornos decorativos (aria-hidden); el significado va en el texto.
 */
.vz-insight {
	/* Teal oscuro del diseño (números, acentos, líneas). Ahora es un token de theme.json: teal-oscuro (#1B6E6C). */
	--vz-ins-teal: var(--wp--preset--color--teal-oscuro);
	/* Menta al 50 % (tramos de cliente en la onda de la sección 4). Deriva del token menta. */
	--vz-ins-menta-50: rgba(170, 217, 205, 0.5);
}

.vz-insight > * {
	margin-block: 0;
}

/* Rótulo de sección (eyebrow). */
.vz-ins-eyebrow {
	margin: 0 0 20px !important;
	color: var(--wp--preset--color--turquesa);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.vz-ins-eyebrow--teal {
	color: var(--vz-ins-teal);
}

/* =====================================================================
 * Sección 1: Hero (fondo oscuro con foto)
 * ===================================================================== */
.vz-ins-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: min(100vh, 900px);
	/* En el lienzo 1440 el hero ocupa 810 px: se garantiza un mínimo cómodo. */
	padding-block: clamp(96px, 12vh, 160px);
	overflow: hidden;
	background-color: var(--wp--preset--color--fondo);
}

/* Foto: a sangre completa, de fondo y oscura (las capas la cubren). Posición ≈ 15% 30%, escala ≈ 150%. */
.vz-ins-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

/* El <picture> no acepta object-fit; se estira a todo el contenedor y el <img> interior recorta. */
.vz-ins-hero__foto {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.vz-ins-hero__fondo .vz-ins-hero__foto img,
.vz-ins-hero__fondo > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 15% 42%;
	transform: scale(1.5);
	transform-origin: 15% 42%;
}

/* Velo del hero. Capa 1: degradado horizontal que oscurece la izquierda (donde va el texto) y mantiene la foto
 * tenue a la derecha, como en el diseño. Capa 2: fundido inferior al fondo. Capa 3: borde superior oscuro para
 * que la foto no muestre una franja clara justo debajo del encabezado. Capa 4: oscurecido general uniforme. */
.vz-ins-hero__velo {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(14, 28, 21, 0.97) 0%, rgba(14, 28, 21, 0.9) 38%, rgba(14, 28, 21, 0.36) 58%, rgba(14, 28, 21, 0.18) 80%, rgba(14, 28, 21, 0.26) 100%),
		linear-gradient(0deg, var(--wp--preset--color--fondo) 0, rgba(14, 28, 21, 0) 220px),
		rgba(14, 28, 21, 0.12);
}

/* Borde superior oscuro del hero. Va en un ::before del propio hero (y no en el velo) porque así se ancla con
 * seguridad al borde superior de la sección; el degradado funde la foto con el encabezado y evita la franja
 * clara que, por el maquetado de bloques, aparecía justo debajo. */
.vz-ins-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 320px;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, var(--wp--preset--color--fondo) 0, var(--wp--preset--color--fondo) 120px, rgba(14, 28, 21, 0.5) 220px, rgba(14, 28, 21, 0) 100%);
}

.vz-ins-hero__contenido {
	position: relative;
	z-index: 2;
}

.vz-ins-hero__contenido > * {
	margin-block: 0;
}

.vz-insight .vz-ins-hero__titulo {
	max-width: 640px;
	color: var(--wp--preset--color--gris-claro);
	font-weight: 800;
	/* Diseño: 52 px sobre 1440 (≈3.6vw). Fluido proporcional. */
	font-size: clamp(2.125rem, 3.6vw, 3.25rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

.vz-ins-hero__subtitulo {
	max-width: 560px;
	margin-top: 24px !important;
	color: var(--wp--preset--color--gris-claro);
	/* Diseño: 17 px sobre 1440. */
	font-size: 1.0625rem;
	line-height: 1.6;
	opacity: 0.9;
}

.vz-ins-hero__botones {
	margin-top: 36px !important;
	gap: 14px;
}

.vz-ins-hero__botones .wp-block-button__link {
	padding: 15px 30px;
	font-size: 1rem;
}

/* Botón secundario (contorno): texto y borde claros sobre la foto oscura, como en el diseño. */
.vz-ins-hero__botones .is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--claro-1);
	color: var(--wp--preset--color--claro-1);
}

.vz-ins-hero__botones .is-style-outline .wp-block-button__link:hover,
.vz-ins-hero__botones .is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--claro-1);
	color: var(--wp--preset--color--fondo);
}

/* Onda inferior izquierda: barras turquesa, base alineada abajo. Arranca en el mismo margen que el texto
 * (borde de la envoltura de ancho máximo + espacio lateral ≈ 112 px sobre 1440). */
.vz-ins-hero__onda {
	position: absolute;
	left: calc(max((100vw - var(--vz-ancho-max)) / 2, 0px) + var(--vz-lateral));
	right: 0;
	bottom: 40px;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}

.vz-ins-onda {
	display: flex;
	align-items: flex-end;
	gap: 4px;
}

.vz-ins-onda i {
	flex: none;
	width: 3px;
	height: var(--h);
	border-radius: 2px;
	background: var(--wp--preset--color--turquesa);
	opacity: calc(var(--o) * 0.7);
}

/* =====================================================================
 * Sección 2: El punto de partida (fondo claro)
 * ===================================================================== */
.vz-ins-necesidad {
	background: var(--wp--preset--color--claro-1);
	color: var(--wp--preset--color--fondo);
	padding-block: clamp(64px, 8vw, 110px);
}

/* Diseño: izquierda ≈ 420 px; derecha ≈ 800 px, arranca en x≈564 sobre 1440. La izquierda se estira para que la
 * onda + leyenda queden alineadas hacia la parte baja de la sección, como en el PNG. */
.vz-ins-necesidad__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
	gap: clamp(40px, 5vw, 80px);
	align-items: stretch;
}

.vz-ins-necesidad__izq {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.vz-insight .vz-ins-necesidad__titulo {
	margin: 0 !important;
	color: var(--wp--preset--color--fondo);
	font-weight: 800;
	/* Diseño: ≈ 48 px sobre 1440. */
	font-size: clamp(2rem, 3.3vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
}

/* Onda de la columna izquierda, con leyenda. Turquesa claro. margin-top:auto la empuja al fondo de la columna
 * (que se estira a la altura de la sección), como en el diseño. */
.vz-ins-necesidad__onda {
	margin: clamp(48px, 8vw, 120px) 0 0;
	margin-top: auto;
	padding-top: clamp(48px, 8vw, 120px);
	max-width: 100%;
	overflow: hidden;
}

.vz-ins-onda--necesidad {
	max-width: 530px;
}

.vz-ins-onda--necesidad i {
	width: 4px;
	gap: 0;
	background: var(--wp--preset--color--turquesa);
	opacity: calc(var(--o) * 0.75);
}

.vz-ins-necesidad__onda figcaption {
	margin-top: 22px;
	color: var(--vz-ins-teal);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Columna derecha: tres filas separadas por una línea de 1px. */
.vz-ins-necesidad__der {
	display: flex;
	flex-direction: column;
}

/* Diseño: número ~130 px | texto ~370 px (2 líneas) | ilustración ~220 px. */
.vz-ins-item {
	display: grid;
	grid-template-columns: clamp(90px, 8.2vw, 122px) minmax(0, 1fr) clamp(132px, 14.5vw, 200px);
	column-gap: clamp(16px, 1.8vw, 26px);
	align-items: start;
	padding-block: clamp(32px, 3.6vw, 48px);
}

.vz-ins-item + .vz-ins-item {
	border-top: 1px solid #C5CFC8;
}

.vz-ins-item:first-child {
	padding-top: 0;
}

.vz-ins-item__num {
	color: var(--vz-ins-teal);
	font-weight: 800;
	/* Diseño: ≈ 105 px sobre 1440. */
	font-size: clamp(4rem, 7.3vw, 6.5rem);
	line-height: 0.9;
	letter-spacing: -0.03em;
}

.vz-ins-item__texto > * {
	margin-block: 0;
}

.vz-insight .vz-ins-item__titulo {
	margin: 0 0 10px !important;
	color: var(--wp--preset--color--fondo);
	font-weight: 800;
	font-size: clamp(1.375rem, 1.8vw, 1.625rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.vz-ins-item__texto p {
	color: #334039;
	font-size: 1rem;
	line-height: 1.6;
}

/* ---------- Ilustraciones de cada ítem (decorativas) ---------- */
.vz-ins-item__fig {
	display: block;
	flex: none;
}

/* 01: cuadrícula de 10 x 6 puntos; 3 resaltados en teal. Ocupa el ancho de la columna de ilustración. */
.vz-ins-item__fig--puntos {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: clamp(7px, 0.8vw, 10px);
	width: 100%;
	max-width: 220px;
	margin-left: auto;
}

.vz-ins-item__fig--puntos i {
	aspect-ratio: 1;
	width: 100%;
	border-radius: 50%;
	background: #C9D3CD;
}

.vz-ins-item__fig--puntos i.es-fuerte {
	background: var(--vz-ins-teal);
}

/* 02: burbuja oscura y recuadro punteado "CRM: VACÍO". */
.vz-ins-item__fig--crm {
	display: block;
	width: 100%;
	max-width: 220px;
	margin-left: auto;
}

.vz-ins-burbuja {
	display: inline-block;
	padding: 12px 18px;
	border-radius: 16px 16px 16px 4px;
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--gris-claro);
	font-size: 0.9375rem;
}

.vz-ins-crm {
	display: block;
	width: max-content;
	margin: 20px 0 0 auto;
	padding: 14px 22px;
	border: 1.5px dashed var(--vz-ins-teal);
	border-radius: 10px;
	color: var(--vz-ins-teal);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

/* 03: gráfico de línea quebrada punteada con signo "?". */
.vz-ins-item__fig--grafico {
	margin-left: auto;
}

.vz-ins-item__fig--grafico svg {
	display: block;
	width: 100%;
	max-width: 220px;
	height: auto;
}

/* =====================================================================
 * Sección 3: Cómo funciona / De la llamada a la decisión (fondo oscuro)
 * Paleta solo con tokens de theme.json: fondo, verde-profundo (tarjetas),
 * verde-azulado (icono), superficie (filas), turquesa, menta, claro-1, alerta.
 * ===================================================================== */
.vz-ins-como {
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--claro-1);
	padding-block: clamp(64px, 8vw, 110px);
}

/* Esta sección usa una banda algo más ancha que el resto (diseño: la fila de pasos ocupa ≈1312 px sobre 1440)
 * para que las descripciones caigan en dos líneas como en el PNG. */
.vz-ins-como .vz-envoltura {
	max-width: 1376px;
}

/* Cabecera: eyebrow, h2, subtítulo y la píldora "Ejemplo ilustrativo" a la derecha. */
.vz-ins-como__cabecera {
	position: relative;
	margin-bottom: clamp(48px, 6vw, 80px);
}

.vz-ins-como__cabecera > * {
	margin-block: 0;
}

.vz-insight .vz-ins-como__titulo {
	margin: 0 !important;
	color: var(--wp--preset--color--claro-1);
	font-weight: 800;
	/* Diseño: ≈ 47 px sobre 1440. */
	font-size: clamp(2rem, 3.3vw, 2.95rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.vz-ins-como__sub {
	max-width: 640px;
	margin-top: 18px !important;
	color: var(--wp--preset--color--claro-1);
	font-weight: 300;
	/* Diseño: ≈ 17 px sobre 1440. */
	font-size: 1.0625rem;
	line-height: 1.45;
	opacity: 0.95;
}

/* Píldora "Ejemplo ilustrativo", arriba a la derecha de la cabecera. */
.vz-ins-como__nota {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0 !important;
	padding: 7px 16px;
	border: 1px solid rgba(170, 217, 205, 0.55);
	border-radius: 999px;
	color: var(--wp--preset--color--claro-1);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Rejilla de 4 pasos. Tres filas compartidas (recorrido | tarjeta | título+descripción) para que las tarjetas
 * tengan la misma altura y los títulos y descripciones queden alineados entre columnas. Anchos del diseño
 * (≈338 / 296 / 299 / 299 sobre 1440). */
.vz-ins-como__pasos {
	display: grid;
	grid-template-columns: 1.13fr 0.99fr 1fr 1fr;
	gap: clamp(20px, 2.2vw, 32px);
	align-items: stretch;
}

.vz-ins-paso {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Recorrido: número en círculo + línea punteada a la derecha. */
.vz-ins-paso__recorrido {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(20px, 2.2vw, 30px);
}

.vz-ins-paso__num {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 3px solid var(--wp--preset--color--turquesa);
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--turquesa);
	font-weight: 800;
	font-size: 1.3rem;
}

.vz-ins-paso__num.es-fuerte {
	background: var(--wp--preset--color--turquesa);
	color: var(--wp--preset--color--verde-bosque);
}

.vz-ins-paso__linea {
	flex: 1;
	height: 4px;
	background-image: radial-gradient(circle, var(--wp--preset--color--turquesa) 1.6px, transparent 2.2px);
	background-size: 12px 4px;
	background-repeat: repeat-x;
	opacity: 0.8;
}

/* Tarjeta de ejemplo. Altura fija e igual en las cuatro (diseño ≈ 186 px sobre 1440) para que los títulos y
 * descripciones de debajo queden alineados. Todas las medidas internas se escalan ×0.8036 respecto a la maqueta
 * (lienzo 1792); el contenido de las tarjetas 2 y 3 se posiciona de forma absoluta con esos tops/altos para que
 * nada se recorte y quede ≈14 px de margen inferior, como en el diseño. */
.vz-ins-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: none;
	height: 186px;
	padding: 0 16px;
	border: 1px solid rgba(93, 201, 198, 0.38);
	border-radius: 18px;
	background: var(--wp--preset--color--verde-profundo);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

/* Cabecera: alto ≈45 px (diseño 56 × 0.8036) con separador inferior. */
.vz-ins-tarjeta__cab {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 45px;
	flex: none;
	border-bottom: 1px solid rgba(93, 201, 198, 0.22);
	font-weight: 600;
	/* Diseño 18.5 px × 0.8036 ≈ 15 px. */
	font-size: 0.9375rem;
}

.vz-ins-tarjeta__ic {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 29px;
	height: 29px;
	border-radius: 8px;
	background: var(--wp--preset--color--verde-azulado);
	border: 1px solid rgba(93, 201, 198, 0.35);
}

.vz-ins-tarjeta__ic svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--wp--preset--color--turquesa);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vz-ins-tarjeta__tit {
	display: block;
}

.vz-ins-tarjeta__sub {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	/* Diseño 14 px × 0.8036 ≈ 11 px. */
	font-size: 0.6875rem;
	opacity: 0.8;
}

/* --- Tarjeta 1: Conversación (reproductor). Centrado vertical en el espacio bajo el separador. --- */
.vz-ins-conv {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block: auto;
}

.vz-ins-conv__play {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wp--preset--color--turquesa);
}

.vz-ins-conv__play svg {
	width: 20px;
	height: 20px;
	fill: var(--wp--preset--color--verde-bosque);
}

.vz-ins-conv__onda {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 2.5px;
	height: 46px;
	min-width: 0;
	overflow: hidden;
}

.vz-ins-conv__onda i {
	flex: 1;
	min-width: 2px;
	max-width: 3.5px;
	height: var(--h);
	border-radius: 2px;
	background: var(--wp--preset--color--turquesa);
}

.vz-ins-conv__tiempo {
	flex: none;
	padding: 7px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--verde-azulado);
	/* Diseño 15.5 px × 0.8036 ≈ 12.5 px. */
	font-size: 0.78125rem;
	font-weight: 600;
}

/* --- Tarjeta 2: Transcripción. Dos turnos posicionados con los tops escalados del diseño, medidos desde el
 * borde superior de la tarjeta: turno 1 ≈55, turno 2 ≈126; la burbuja del agente termina en ≈172 (margen ≈14). --- */
.vz-ins-trans {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 0;
	bottom: 0;
}

.vz-ins-trans__turno {
	position: absolute;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: 27px 1fr;
	column-gap: 10px;
	/* Hueco mínimo etiqueta→burbuja (diseño ≈1-2 px) para que la burbuja del cliente no toque el turno siguiente. */
	row-gap: 2px;
}

.vz-ins-trans__turno:first-child {
	top: 52px;
}

.vz-ins-trans__turno:last-child {
	top: 123px;
}

.vz-ins-trans__av {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: var(--wp--preset--color--verde-azulado);
}

.vz-ins-trans__av svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: var(--wp--preset--color--claro-1);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vz-ins-trans__quien {
	margin: 0;
	/* Diseño 15 px × 0.8036 ≈ 12 px. */
	font-size: 0.75rem;
	font-weight: 600;
}

.vz-ins-trans__quien i {
	margin-left: 7px;
	font-style: normal;
	font-weight: 400;
	font-size: 0.6875rem;
	color: var(--wp--preset--color--menta);
	opacity: 0.75;
}

.vz-ins-trans__texto {
	margin: 0;
	/* Diseño 7-9 px × 0.8036 ≈ 5-7 px de relleno vertical. */
	padding: 5px 10px;
	border-radius: 10px;
	background: var(--wp--preset--color--superficie);
	/* Diseño 16 px × 0.8036 ≈ 13 px. */
	font-size: 0.8125rem;
	line-height: 1.3;
}

.vz-ins-trans__texto--agente {
	background: var(--wp--preset--color--verde-azulado);
	border: 1px solid rgba(93, 201, 198, 0.35);
}

/* --- Tarjeta 3: Análisis con IA. Tres filas posicionadas con los tops escalados; cada una en UNA línea. --- */
.vz-ins-analisis {
	position: absolute;
	left: 16px;
	right: 16px;
	top: 45px;
	bottom: 0;
}

.vz-ins-fila {
	position: absolute;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 9px;
	height: 32px;
	padding: 0 10px;
	border-radius: 9px;
	background: var(--wp--preset--color--superficie);
	/* Diseño 15 px × 0.8036 ≈ 12 px. */
	font-size: 0.75rem;
	white-space: nowrap;
}

/* Tops relativos al inicio del cuerpo (y=45). Diseño filas 68/121/174 → 10/52/95 px. */
.vz-ins-fila:nth-child(1) {
	top: 10px;
}

.vz-ins-fila:nth-child(2) {
	top: 52px;
}

.vz-ins-fila:nth-child(3) {
	top: 95px;
}

.vz-ins-fila__ic {
	flex: none;
	display: flex;
}

.vz-ins-fila__ic svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--wp--preset--color--turquesa);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vz-ins-fila__txt {
	min-width: 0;
}

.vz-ins-chip {
	margin-left: auto;
	flex: none;
	padding: 3px 11px;
	border-radius: 999px;
	border: 1px solid rgba(240, 96, 93, 0.65);
	background: rgba(240, 96, 93, 0.16);
	color: var(--wp--preset--color--claro-1);
	/* Diseño 14.5 px × 0.8036 ≈ 11.6 px. */
	font-size: 0.71875rem;
	font-weight: 600;
}

.vz-ins-fila__valor {
	margin-left: auto;
	flex: none;
	padding-right: 4px;
	font-weight: 600;
}

/* --- Tarjeta 4: Dashboard (barras + etiquetas en UNA fila). --- */
.vz-ins-dash {
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin-block: auto;
}

.vz-ins-dash__barras {
	display: flex;
	align-items: flex-end;
	gap: clamp(5px, 0.9vw, 9px);
	height: 67px;
}

.vz-ins-dash__barra {
	flex: 1;
	height: var(--h);
	border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, var(--wp--preset--color--turquesa), var(--vz-ins-teal));
}

.vz-ins-dash__tags {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
}

.vz-ins-dash__tag {
	flex: none;
	padding: 3px 7px;
	border: 1px solid rgba(93, 201, 198, 0.7);
	border-radius: 999px;
	color: var(--wp--preset--color--turquesa);
	/* Diseño 12 px × 0.8036 ≈ 9.6 px. */
	font-size: 0.6rem;
	white-space: nowrap;
}

/* Título y descripción de cada paso (bajo la tarjeta). */
.vz-insight .vz-ins-paso__titulo {
	margin: 18px 0 9px !important;
	color: var(--wp--preset--color--claro-1);
	font-weight: 800;
	/* Diseño ≈ 30 px × 0.8036 ≈ 24 px. */
	font-size: clamp(1.3rem, 1.6vw, 1.5rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.vz-ins-paso__desc {
	margin: 0;
	color: var(--wp--preset--color--gris-palido);
	font-weight: 300;
	/* Diseño 17 px × 0.8036 ≈ 13.7 px. */
	font-size: 0.875rem;
	line-height: 1.5;
}

/* =====================================================================
 * Sección 4: Capacidades de la plataforma (fondo claro)
 * Medidas del diseño 04-capacidades.png / referencia HTML (lienzo 1440, sin escala).
 * Paleta solo con tokens de theme.json: claro-1 (fondo), verde-profundo (tarjetas),
 * verde-azulado, superficie, turquesa, menta, teal-oscuro, alerta.
 * ===================================================================== */
.vz-ins-capac {
	background: var(--wp--preset--color--claro-1);
	color: var(--wp--preset--color--fondo);
	padding-block: clamp(64px, 8vw, 110px);
}

/* Banda algo más ancha que el resto (ancho útil del diseño 1314 px sobre 1440). */
.vz-ins-capac .vz-envoltura {
	max-width: 1378px;
}

.vz-ins-capac__cabecera {
	position: relative;
	margin-bottom: clamp(36px, 4vw, 56px);
}

.vz-ins-capac__cabecera > * {
	margin-block: 0;
}

.vz-insight .vz-ins-capac__titulo {
	margin: 4px 0 0 !important;
	color: var(--wp--preset--color--fondo);
	font-weight: 800;
	/* Diseño 46 px. */
	font-size: clamp(2rem, 3.2vw, 2.875rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
}

/* Píldora "Ejemplo ilustrativo" (igual que la sección 3 pero con el estilo del diseño de esta sección). */
.vz-ins-capac__nota {
	position: absolute;
	top: 4px;
	right: 0;
	margin: 0 !important;
	padding: 7px 15px;
	border: 1px solid rgba(93, 201, 198, 0.45);
	border-radius: 999px;
	background: var(--wp--preset--color--verde-azulado);
	color: var(--wp--preset--color--claro-1);
	font-size: 0.71875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Rejilla: 3 columnas 481|390|415, gap 14, con la banda y las áreas del diseño.
 * Alturas de fila fijas del diseño solo en escritorio (≥1200): fila 1 = 157, fila 2 = 152, fila 3 = 158, banda
 * automática (79). Transcripción ocupa filas 1–2 = 157 + 14 + 152 = 323. Fuera de ≥1200 las filas son auto. */
.vz-ins-capac__rejilla {
	display: grid;
	grid-template-columns: 481fr 390fr 415fr;
	gap: 14px;
	grid-template-areas:
		"transcripcion sentimiento intencion"
		"transcripcion calidad      oportunidades"
		"dashboards    insights     insights"
		"banda         banda        banda";
	align-items: stretch;
}

@media (min-width: 1200px) {
	.vz-ins-capac__rejilla {
		/* Alturas de fila del diseño: 157 / 152 / 158 y la banda 79. Transcripción ocupa las
		 * dos primeras filas = 157 + 14 + 152 = 323 (la referencia mide 324, dentro de ±2). */
		grid-template-rows: 157px 152px 158px 79px;
	}
}

.vz-ins-cap--transcripcion { grid-area: transcripcion; }
.vz-ins-cap--sentimiento   { grid-area: sentimiento; }
.vz-ins-cap--intencion     { grid-area: intencion; }
.vz-ins-cap--calidad       { grid-area: calidad; }
.vz-ins-cap--oportunidades { grid-area: oportunidades; }
.vz-ins-cap--dashboards    { grid-area: dashboards; }
.vz-ins-cap--insights      { grid-area: insights; }
.vz-ins-cap--banda         { grid-area: banda; }

/* Tarjeta sólida (nada translúcido). */
.vz-ins-cap {
	position: relative;
	padding: 41px 21px 14px;
	border: 1px solid rgba(93, 201, 198, 0.38);
	border-radius: 18px;
	background: var(--wp--preset--color--verde-profundo);
	box-shadow: 0 14px 30px rgba(14, 28, 21, 0.22);
	color: var(--wp--preset--color--claro-1);
	overflow: hidden;
}

/* Rótulo de tarjeta + línea separadora a 34 px del borde. */
.vz-ins-cap__rotulo {
	position: absolute;
	left: 21px;
	top: 11px;
	margin: 0;
	color: var(--wp--preset--color--turquesa);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.vz-ins-cap::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 34px;
	height: 1px;
	background: rgba(93, 201, 198, 0.22);
}

/* Icono genérico (caja 34, fondo verde-azulado). */
.vz-ins-cap__ic {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--wp--preset--color--verde-azulado);
	border: 1px solid rgba(93, 201, 198, 0.35);
}

.vz-ins-cap__ic svg,
.vz-ins-cap__sv {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: var(--wp--preset--color--turquesa);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Título y descripción comunes. */
.vz-insight .vz-ins-cap__t {
	margin: 0 !important;
	color: var(--wp--preset--color--claro-1);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.vz-ins-cap__d {
	margin: 5px 0 0;
	color: var(--wp--preset--color--gris-palido);
	font-weight: 300;
	font-size: 0.875rem;
	line-height: 1.4;
}

/* Chips reutilizables de esta sección. */
.vz-ins-chip {
	display: inline-flex;
	align-items: center;
	height: 27px;
	padding: 0 15px;
	border-radius: 999px;
	border: 1px solid rgba(93, 201, 198, 0.75);
	color: var(--wp--preset--color--turquesa);
	font-size: 0.84375rem;
	font-weight: 600;
	white-space: nowrap;
}

.vz-ins-chip--f {
	background: var(--wp--preset--color--turquesa);
	color: var(--wp--preset--color--verde-bosque);
	border-color: var(--wp--preset--color--turquesa);
}

.vz-ins-chip--r {
	border-color: rgba(240, 96, 93, 0.7);
	background: rgba(240, 96, 93, 0.16);
	color: var(--wp--preset--color--claro-1);
}

.vz-ins-chip--sm {
	height: 24px;
	padding: 0 13px;
	font-size: 0.78125rem;
}

/* ---------- Tarjeta Transcripción ---------- */
.vz-ins-cap-tr__cab {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 6px;
}

.vz-ins-cap-tr__tit {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.vz-ins-cap-tr__tit b {
	font-size: 0.84375rem;
	font-weight: 600;
}

.vz-ins-cap-tr__tit small {
	font-size: 0.71875rem;
	font-weight: 400;
	opacity: 0.8;
}

.vz-ins-cap-tr__leyenda {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	font-size: 0.78125rem;
}

.vz-ins-cap-tr__pt {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.vz-ins-cap-tr__pt--ag { background: var(--wp--preset--color--turquesa); }
.vz-ins-cap-tr__pt--cl { background: var(--wp--preset--color--menta); opacity: 0.55; margin-left: 10px; }

/* Panel interior: envuelve el reproductor y los dos mensajes (como la referencia, alto ≈192). */
.vz-ins-cap-tr__panel {
	position: relative;
	padding: 11px 14px 12px;
	border: 1px solid rgba(93, 201, 198, 0.2);
	border-radius: 12px;
	background: var(--wp--preset--color--verde-profundo);
}

/* Fila del reproductor dentro del panel (play + onda + píldora de tiempo), con marcas y controles debajo. */
.vz-ins-cap-tr__repro {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	column-gap: 15px;
	padding-bottom: 34px;
	margin-bottom: 8px;
}

.vz-ins-cap-tr__play {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--turquesa);
}

.vz-ins-cap-tr__play svg { width: 20px; height: 20px; }

.vz-ins-cap-tr__onda {
	display: flex;
	align-items: center;
	gap: 2.4px;
	height: 32px;
	overflow: hidden;
}

.vz-ins-cap-tr__onda i {
	display: block;
	width: 2px;
	border-radius: 2px;
}

.vz-ins-cap-tr__tiempo {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 86px;
	height: 30px;
	border-radius: 999px;
	background: var(--wp--preset--color--verde-azulado);
	font-size: 0.78125rem;
	font-weight: 600;
}

/* Marcas de tiempo bajo la onda (alineadas con el tramo de la onda, no con la píldora de tiempo). */
.vz-ins-cap-tr__marcas {
	position: absolute;
	left: 71px;
	right: 120px;
	top: 46px;
	display: flex;
	justify-content: space-between;
	font-size: 0.6875rem;
	opacity: 0.8;
}

/* Controles (10 s, 10 s, volumen) en su propia fila, debajo de las marcas. */
.vz-ins-cap-tr__controles {
	position: absolute;
	right: 16px;
	bottom: 2px;
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 0.71875rem;
}

.vz-ins-cap-tr__ctl {
	display: flex;
	align-items: center;
	gap: 5px;
}

.vz-ins-cap-tr__ctl .vz-ins-cap__sv { width: 13px; height: 13px; }
.vz-ins-cap-tr__ctl:last-child .vz-ins-cap__sv { width: 15px; height: 15px; }

/* Turnos (mensajes), dentro del panel. */
.vz-ins-cap-tr__turno {
	display: grid;
	grid-template-columns: 28px 1fr;
	column-gap: 15px;
	row-gap: 3px;
}

.vz-ins-cap-tr__turno + .vz-ins-cap-tr__turno { margin-top: 8px; }

.vz-ins-cap-tr__av {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--wp--preset--color--verde-azulado);
}

.vz-ins-cap-tr__av svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--wp--preset--color--claro-1);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vz-ins-cap-tr__quien {
	margin: 0;
	font-size: 0.78125rem;
	font-weight: 600;
}

.vz-ins-cap-tr__quien i {
	margin-left: 10px;
	font-style: normal;
	font-weight: 400;
	font-size: 0.71875rem;
	color: var(--wp--preset--color--menta);
	opacity: 0.75;
}

.vz-ins-cap-tr__bub {
	margin: 0;
	height: 26px;
	display: flex;
	align-items: center;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--wp--preset--color--superficie);
	font-size: 0.78125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.vz-ins-cap-tr__bub--ag {
	background: var(--wp--preset--color--verde-azulado);
	border: 1px solid rgba(93, 201, 198, 0.35);
}

/* En móvil/tableta (flujo) el título de la transcripción se separa del panel. */
.vz-ins-cap--transcripcion .vz-ins-cap__t {
	margin-top: 8px !important;
}

/* ---------- Tarjeta Sentimiento ---------- */
.vz-ins-cap-se__fila {
	display: flex;
	align-items: center;
	gap: 13px;
	height: 45px;
	padding: 0 6px 0 6px;
	border-radius: 10px;
	background: var(--wp--preset--color--superficie);
}

.vz-ins-cap-se__fila + .vz-ins-cap-se__fila { margin-top: 8px; }

.vz-ins-cap-se__txt {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.vz-ins-cap-se__txt small {
	font-size: 0.75rem;
	opacity: 0.9;
}

.vz-ins-cap-se__txt b {
	font-size: 1.0625rem;
	font-weight: 700;
}

.es-alerta { color: var(--wp--preset--color--alerta); }

.vz-ins-cap-se__barra {
	position: relative;
	width: 123px;
	height: 7px;
	margin-left: auto;
	margin-right: 6px;
	border-radius: 4px;
	background: var(--wp--preset--color--verde-azulado);
}

.vz-ins-cap-se__barra-r {
	position: absolute;
	left: 0;
	top: 0;
	width: 48px;
	height: 7px;
	border-radius: 4px;
	background: var(--wp--preset--color--alerta);
}

.vz-ins-cap-se__chip {
	margin-left: auto;
	margin-right: 4px;
	height: 28px;
}

/* ---------- Tarjeta Intención ---------- */
.vz-ins-cap-in__chips {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
}

.vz-ins-cap--intencion .vz-ins-cap__t { margin-bottom: 8px !important; }

/* ---------- Tarjeta Calidad ---------- */
.vz-ins-cap--calidad {
	display: grid;
	grid-template-columns: 86px 1fr;
	align-items: center;
	column-gap: 19px;
}

.vz-ins-cap-ca__anillo {
	position: relative;
	width: 86px;
	height: 86px;
}

.vz-ins-cap-ca__dona {
	width: 86px;
	height: 86px;
}

.vz-ins-cap-ca__pct {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
}

.vz-ins-cap-ca__txt .vz-ins-cap__d { max-width: 240px; }

/* ---------- Tarjeta Oportunidades ---------- */
.vz-ins-cap-op__caja {
	display: grid;
	grid-template-columns: 34px 1fr;
	align-items: center;
	column-gap: 12px;
	row-gap: 6px;
	padding: 6px 12px;
	border-radius: 12px;
	background: var(--wp--preset--color--verde-profundo);
	border: 1px solid rgba(93, 201, 198, 0.2);
	margin-bottom: 8px;
}

.vz-ins-cap-op__caja .vz-ins-cap__ic { grid-row: 1 / span 2; }

.vz-ins-cap-op__clave {
	font-size: 0.75rem;
	opacity: 0.9;
}

.vz-ins-cap-op__chips {
	display: flex;
	gap: 8px;
}

.vz-ins-cap__t--op { font-size: 1.15625rem; }

/* ---------- Tarjeta Dashboards ----------
 * Dos niveles a la derecha del icono: "Dashboard" arriba y las barras debajo. A la derecha, un divisor y el
 * KPI "Llamadas / 1.248" con ancho reservado para que nunca se recorte (el diseño lo pone en left:380). */
.vz-ins-cap-da__fila {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 1px 92px;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 3px;
	margin-bottom: 8px;
}

.vz-ins-cap-da__fila .vz-ins-cap__ic { grid-column: 1; grid-row: 1 / span 2; }

.vz-ins-cap-da__nom {
	grid-column: 2;
	grid-row: 1;
	font-size: 0.875rem;
	font-weight: 600;
}

.vz-ins-cap-da__barras {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: flex-end;
	gap: 7px;
	height: 44px;
}

.vz-ins-cap-da__bar {
	width: 36px;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, var(--wp--preset--color--turquesa), #1A6E6C);
}

.vz-ins-cap-da__sep {
	grid-column: 3;
	grid-row: 1 / span 2;
	justify-self: center;
	width: 1px;
	height: 44px;
	background: rgba(93, 201, 198, 0.3);
}

.vz-ins-cap-da__kpi {
	grid-column: 4;
	grid-row: 1 / span 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	line-height: 1.1;
}

.vz-ins-cap-da__kpi small { font-size: 0.78125rem; }

.vz-ins-cap-da__kpi b {
	font-size: 1.625rem;
	font-weight: 700;
	color: var(--wp--preset--color--turquesa);
	letter-spacing: -0.01em;
}

/* ---------- Tarjeta Insights con IA. Columna izquierda ≈378, derecha ≈363 (referencia). ---------- */
.vz-ins-cap-ia__cols {
	display: grid;
	grid-template-columns: 378fr 1px 363fr;
	column-gap: 18px;
}

.vz-ins-cap-ia__divisor {
	width: 1px;
	background: rgba(93, 201, 198, 0.3);
}

.vz-ins-cap-ia__cab {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	font-size: 0.90625rem;
	font-weight: 600;
}

.vz-ins-cap-ia__caja {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 9px 14px;
	border-radius: 10px;
	background: var(--wp--preset--color--superficie);
}

.vz-ins-cap-ia__item {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
	font-size: 0.71875rem;
	line-height: 1.25;
	letter-spacing: normal;
	white-space: nowrap;
}

.vz-ins-cap-ia__ck {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--wp--preset--color--turquesa);
}

.vz-ins-cap-ia__ck svg {
	width: 10px;
	height: 10px;
	fill: none;
	stroke: var(--wp--preset--color--verde-bosque);
	stroke-width: 3.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vz-ins-cap-ia__caja--accion {
	flex-direction: row;
	align-items: center;
	gap: 13px;
}

.vz-ins-cap-ia__cal {
	flex: none;
	width: 30px;
	height: 32px;
}

.vz-ins-cap-ia__accion {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.vz-ins-cap-ia__accion b {
	font-size: 0.84375rem;
	font-weight: 700;
}

.vz-ins-cap-ia__accion small {
	font-size: 0.71875rem;
	font-weight: 300;
	line-height: 1.3;
}

/* ---------- Banda Módulos comerciales ---------- */
.vz-ins-cap--banda {
	display: flex;
	align-items: center;
	gap: 36px;
	padding: 14px 28px;
}

.vz-ins-cap--banda::before { content: none; }

.vz-ins-cap-mo__rotulo {
	flex: none;
	align-self: flex-start;
	margin-top: 2px;
	color: var(--wp--preset--color--turquesa);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* El rótulo y el título van en columna a la izquierda. */
.vz-ins-cap--banda {
	display: grid;
	grid-template-columns: auto 2px 1fr;
	grid-template-rows: auto auto;
	column-gap: 34px;
	row-gap: 4px;
	align-items: center;
}

.vz-ins-cap-mo__rotulo { grid-column: 1; grid-row: 1; align-self: end; }
.vz-ins-cap-mo__titulo { grid-column: 1; grid-row: 2; align-self: start; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; }
.vz-ins-cap-mo__divisor { grid-column: 2; grid-row: 1 / span 2; width: 2px; height: 47px; background: var(--wp--preset--color--turquesa); opacity: 0.8; align-self: center; }
.vz-ins-cap-mo__texto {
	grid-column: 3;
	grid-row: 1 / span 2;
	align-self: center;
	margin: 0;
	max-width: 540px;
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.55;
	color: var(--wp--preset--color--gris-palido);
}

/* ---------- Sección 4: responsive propio (sin diseño móvil aprobado; mínimo coherente) ---------- */
/* 768–1199: dos columnas; Transcripción e Insights a ancho completo. */
@media (max-width: 1199.98px) {
	.vz-ins-capac__rejilla {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"transcripcion transcripcion"
			"sentimiento   intencion"
			"calidad       oportunidades"
			"dashboards    dashboards"
			"insights      insights"
			"banda         banda";
	}
}

/* <768: una columna; la banda pasa a vertical. */
@media (max-width: 767.98px) {
	.vz-ins-capac__rejilla {
		grid-template-columns: 1fr;
		grid-template-areas:
			"transcripcion"
			"sentimiento"
			"intencion"
			"calidad"
			"oportunidades"
			"dashboards"
			"insights"
			"banda";
	}

	/* Insights: las dos columnas se apilan y se oculta el divisor vertical. */
	.vz-ins-cap-ia__cols {
		grid-template-columns: 1fr;
		row-gap: 18px;
	}

	.vz-ins-cap-ia__divisor { display: none; }

	/* Banda en vertical. */
	.vz-ins-cap--banda {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		row-gap: 10px;
	}

	.vz-ins-cap-mo__rotulo { grid-column: 1; grid-row: 1; }
	.vz-ins-cap-mo__titulo { grid-column: 1; grid-row: 2; }
	.vz-ins-cap-mo__divisor { display: none; }
	.vz-ins-cap-mo__texto { grid-column: 1; grid-row: 3; max-width: none; }

	/* La onda de la transcripción puede ser muy ancha: que no desborde. */
	.vz-ins-cap-tr__panel { overflow: hidden; }

	/* En móvil las burbujas de la transcripción muestran el texto completo (varias líneas) en vez de truncar. */
	.vz-ins-cap-tr__bub {
		height: auto;
		min-height: 26px;
		padding: 5px 12px;
		white-space: normal;
		text-overflow: clip;
	}

	/* Los ítems de Insights pueden envolver en móvil (en escritorio van en una línea). */
	.vz-ins-cap-ia__item { white-space: normal; }
}

/* =====================================================================
 * Tablet y móvil
 * ===================================================================== */
@media (max-width: 1023.98px) {
	.vz-ins-necesidad__rejilla {
		grid-template-columns: 1fr;
		gap: clamp(32px, 6vw, 56px);
	}

	/* En una columna, la onda de la izquierda pasa al final (orden del prompt). */
	.vz-ins-necesidad__izq {
		display: contents;
	}

	.vz-ins-necesidad__izq .vz-ins-eyebrow {
		order: 1;
	}

	.vz-ins-necesidad__titulo {
		order: 2;
	}

	.vz-ins-necesidad__der {
		order: 3;
	}

	.vz-ins-necesidad__onda {
		order: 4;
		margin-top: 0 !important;
		padding-top: 0;
	}

	/* Sección 3: de 4 a 2 columnas. La línea punteada del último de cada fila se oculta. */
	.vz-ins-como__pasos {
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(28px, 5vw, 44px);
	}

	.vz-ins-paso:nth-child(2n) .vz-ins-paso__linea {
		display: none;
	}

	.vz-ins-como__nota {
		position: static;
		display: inline-block;
		margin-top: 16px !important;
	}
}

@media (max-width: 700px) {
	.vz-ins-hero {
		min-height: 0;
		padding-block: 120px 96px;
	}

	.vz-ins-hero__onda {
		bottom: 20px;
	}

	.vz-ins-hero__botones {
		flex-direction: column;
	}

	.vz-ins-hero__botones .wp-block-button,
	.vz-ins-hero__botones .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	/* Cada ítem en una columna: número, título, texto y la ilustración debajo. */
	.vz-ins-item {
		grid-template-columns: 1fr;
		row-gap: 14px;
	}

	.vz-ins-item__num {
		font-size: 3.75rem;
	}

	.vz-ins-item__fig--puntos,
	.vz-ins-item__fig--crm,
	.vz-ins-item__fig--grafico {
		width: 100%;
		max-width: 300px;
		margin-left: 0;
	}

	/* Sección 3: una sola columna; se oculta la línea punteada del recorrido. */
	.vz-ins-como__pasos {
		grid-template-columns: 1fr;
	}

	.vz-ins-paso__linea {
		display: none;
	}

	/* En móvil la tarjeta crece con su contenido (la altura fija era solo para alinear en escritorio). El cuerpo
	 * de las tarjetas 2 y 3 vuelve a flujo normal (en escritorio va posicionado de forma absoluta). */
	.vz-ins-trans,
	.vz-ins-analisis {
		position: static;
		display: flex;
		flex-direction: column;
		inset: auto;
	}

	.vz-ins-trans {
		gap: 12px;
		padding-top: 12px;
	}

	.vz-ins-analisis {
		gap: 9px;
		padding-top: 12px;
	}

	.vz-ins-trans__turno,
	.vz-ins-fila {
		position: static;
		top: auto;
	}

	.vz-ins-tarjeta {
		height: auto;
		min-height: 0;
		padding-bottom: 14px;
	}
}

/* Si alguna vez se anima la foto (escala), respetar el movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
	.vz-ins-hero__fondo .vz-ins-hero__foto,
	.vz-ins-hero__fondo img {
		transition: none;
	}
}

/* =====================================================================
 * Sección 4 en ESCRITORIO (≥1200 px): maquetación por coordenadas absolutas
 * tomadas 1:1 del HTML de referencia design/insight/04-capacidades-referencia.html
 * (lienzo 1440, cada tarjeta es el contexto de posición). Fuera de ≥1200 se
 * conserva el flujo responsive de arriba (768 y 390, ya aprobados).
 *
 * Los contenedores intermedios puramente estructurales pasan a display:contents
 * para que sus hijos anclen directamente a la tarjeta. Los paneles interiores con
 * fondo (reproductor de la transcripción, caja de palabras clave, filas de
 * sentimiento y cajas de Insights) se quedan como caja absoluta y sus hijos se
 * colocan RELATIVOS a ese panel (misma posición visual, solo cambia el origen).
 * ===================================================================== */
@media (min-width: 1200px) {

	/* La tarjeta es el lienzo: sin relleno, los hijos usan las coordenadas del diseño. */
	.vz-ins-capac__rejilla .vz-ins-cap { padding: 0; }

	/* Rótulo y separador ya están a left:21/top:11 y top:34 en las reglas base: se conservan. */

	/* ---------------- TRANSCRIPCIÓN ---------------- */
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__cab,
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__repro,
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__turno { display: contents; }

	/* Cabecera: icono (left21 top43), "Conversación" (left65 top44) y "automática" (left65 top61). */
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__cab .vz-ins-cap__ic {
		position: absolute; left: 21px; top: 43px;
	}
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__tit {
		position: absolute; left: 65px; top: 44px; display: block; line-height: 1.2;
	}
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__tit b { font-size: 13.5px; font-weight: 600; display: block; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__tit small {
		position: absolute; left: 0; top: 17px; white-space: nowrap;
		font-size: 11.5px; font-weight: 400; opacity: 0.8;
	}
	/* Leyenda Agente/Cliente (right24 top55). */
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__leyenda {
		position: absolute; right: 24px; top: 55px; margin: 0;
		display: flex; align-items: center; gap: 7px; font-size: 12.5px;
	}

	/* Panel interior (reference .in): left8 right8 top80 alto192. Sus hijos van relativos a él. */
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__panel {
		position: absolute; left: 8px; right: 8px; top: 80px; height: 192px;
		padding: 0; margin: 0; overflow: visible;
	}
	/* play left28/top90 -> panel 20/10 ; onda left83/top92 -> 75/12 ; pill left373/top94 -> 365/14 */
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__play { position: absolute; left: 20px; top: 10px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__onda { position: absolute; left: 75px; top: 12px; height: 36px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__tiempo { position: absolute; left: 365px; top: 14px; }
	/* 5 marcas (top131 -> 51). Reemplazamos el contenedor flex por posiciones puntuales. */
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__marcas {
		position: static; display: contents;
	}
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__marcas i {
		position: absolute; top: 51px; transform: translateX(-50%);
		font-size: 11px; font-style: normal; opacity: 0.8;
	}
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__marcas i:nth-child(1) { left: 79px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__marcas i:nth-child(2) { left: 162px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__marcas i:nth-child(3) { left: 241px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__marcas i:nth-child(4) { left: 328px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__marcas i:nth-child(5) { left: 422px; }
	/* controles (top151 -> 71): dos "10 s" y volumen. */
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__controles { position: static; display: contents; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__ctl {
		position: absolute; top: 71px; display: flex; align-items: center; gap: 5px; font-size: 11.5px;
	}
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__ctl:nth-child(1) { left: 302px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__ctl:nth-child(2) { left: 367px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__ctl:nth-child(3) { left: 426px; top: 70px; gap: 0; }
	/* Mensajes (relativos al panel): cliente avatar 26/98, quien 69/96, bub 69/111 (right22);
	   agente avatar 26/145, quien 69/143, bub 69/158. */
	/* El panel contiene 3 divs: __repro (1º) + __turno cliente (2º) + __turno agente (3º/último).
	   Los nombres (quien) se limitan a una línea de 14 px para no invadir la burbuja (15 px por debajo). */
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__quien { line-height: 14px; height: 14px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__turno:nth-of-type(2) .vz-ins-cap-tr__av { position: absolute; left: 26px; top: 98px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__turno:nth-of-type(2) .vz-ins-cap-tr__quien { position: absolute; left: 69px; top: 96px; margin: 0; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__turno:nth-of-type(2) .vz-ins-cap-tr__bub { position: absolute; left: 69px; right: 22px; top: 111px; margin: 0; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__turno:last-of-type .vz-ins-cap-tr__av { position: absolute; left: 26px; top: 145px; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__turno:last-of-type .vz-ins-cap-tr__quien { position: absolute; left: 69px; top: 143px; margin: 0; }
	.vz-ins-cap--transcripcion .vz-ins-cap-tr__turno:last-of-type .vz-ins-cap-tr__bub { position: absolute; left: 69px; right: 22px; top: 158px; margin: 0; }
	/* título (left21 top276) y descripción (left21 top299) directos en la tarjeta. */
	.vz-ins-cap--transcripcion .vz-ins-cap__t {
		position: absolute; left: 21px; top: 276px; margin: 0 !important; font-size: 20px; white-space: nowrap;
	}
	.vz-ins-cap--transcripcion .vz-ins-cap__d {
		position: absolute; left: 21px; top: 299px; margin: 0; font-size: 13.5px; white-space: nowrap;
	}

	/* ---------------- SENTIMIENTO ---------------- */
	/* Cada fila es su propia caja de fondo (reference .in): left14 right14, alto45; fila1 top43, fila2 top96.
	   Sus hijos se posicionan RELATIVOS a la fila (restando el origen de la caja). */
	.vz-ins-cap--sentimiento .vz-ins-cap-se__fila {
		position: absolute; left: 14px; right: 14px; height: 45px; display: block;
		margin: 0; padding: 0; border-radius: 10px; background: var(--wp--preset--color--superficie);
	}
	.vz-ins-cap--sentimiento .vz-ins-cap-se__fila:nth-of-type(1) { top: 43px; }
	.vz-ins-cap--sentimiento .vz-ins-cap-se__fila:nth-of-type(2) { top: 96px; }
	/* icono: ref left20 -> relativo a la caja left6 ; top48/top101 -> 5 dentro de la caja. */
	.vz-ins-cap--sentimiento .vz-ins-cap-se__fila .vz-ins-cap__ic { position: absolute; left: 6px; top: 5px; }
	/* textos: ref left67 -> relativo 53 ; small top48/101 -> 5 ; b +15. */
	.vz-ins-cap--sentimiento .vz-ins-cap-se__txt { position: absolute; left: 53px; top: 5px; display: block; line-height: 1.2; }
	.vz-ins-cap--sentimiento .vz-ins-cap-se__txt small { display: block; font-size: 12px; }
	.vz-ins-cap--sentimiento .vz-ins-cap-se__txt b { position: absolute; left: 0; top: 15px; font-size: 17px; white-space: nowrap; }
	/* Barra (fila 1): ref left232 top64 -> relativo left218 top21 ; pista w123 + relleno rojo w48. */
	.vz-ins-cap--sentimiento .vz-ins-cap-se__barra {
		position: absolute; left: 218px; top: 21px; width: 123px; height: 7px;
		border-radius: 4px; background: var(--wp--preset--color--verde-azulado);
	}
	.vz-ins-cap--sentimiento .vz-ins-cap-se__barra-r {
		position: absolute; left: 0; top: 0; width: 48px; height: 7px;
		border-radius: 4px; background: var(--wp--preset--color--alerta);
	}
	/* Chip "Alta" (fila 2): el diseño lo ancla a la derecha (right 26), pero fijamos el borde izquierdo
	   exacto del diseño (left 306 en la tarjeta = 292 relativo a la fila) para clavar la posición. */
	.vz-ins-cap--sentimiento .vz-ins-cap-se__chip { position: absolute; left: 292px; top: 12px; height: 28px; font-size: 13px; }

	/* ---------------- INTENCIÓN ---------------- */
	/* chips left26 top47 (gap10) ; título left26 top88 ; desc left26 top116. */
	.vz-ins-cap--intencion .vz-ins-cap-in__chips {
		position: absolute; left: 26px; top: 47px; display: flex; gap: 10px; margin: 0;
	}
	.vz-ins-cap--intencion .vz-ins-cap__t { position: absolute; left: 26px; top: 88px; margin: 0 !important; font-size: 20px; }
	.vz-ins-cap--intencion .vz-ins-cap__d { position: absolute; left: 26px; top: 116px; margin: 0; white-space: nowrap; }

	/* ---------------- CALIDAD ---------------- */
	/* dona left22 top48 (86x86) ; título left127 top56 ; desc left127 top84 (w240). */
	.vz-ins-cap--calidad .vz-ins-cap-ca__anillo { position: absolute; left: 22px; top: 48px; width: 86px; height: 86px; }
	.vz-ins-cap--calidad .vz-ins-cap-ca__txt { position: static; display: contents; }
	.vz-ins-cap--calidad .vz-ins-cap__t { position: absolute; left: 127px; top: 56px; margin: 0 !important; font-size: 20px; }
	.vz-ins-cap--calidad .vz-ins-cap__d { position: absolute; left: 127px; top: 84px; width: 240px; margin: 0; }

	/* ---------------- OPORTUNIDADES ---------------- */
	/* La caja de palabras clave es el panel de fondo (reference .in left13 right13 top41 alto100);
	   sus hijos van relativos a ella (ref left-13, top-41). El título y la descripción son hijos
	   de la tarjeta (card-relative top97/top120), por encima del panel. */
	.vz-ins-cap--oportunidades .vz-ins-cap-op__caja {
		position: absolute; left: 13px; right: 13px; top: 41px; height: 100px; display: block;
		margin: 0; padding: 0; border-radius: 12px;
		background: var(--wp--preset--color--verde-profundo);
		border: 1px solid rgba(93, 201, 198, 0.2);
	}
	.vz-ins-cap--oportunidades .vz-ins-cap-op__caja .vz-ins-cap__ic { position: absolute; left: 12px; top: 7px; }
	.vz-ins-cap--oportunidades .vz-ins-cap-op__clave { position: absolute; left: 57px; top: 7px; font-size: 12px; line-height: 14px; }
	.vz-ins-cap--oportunidades .vz-ins-cap-op__chips { position: absolute; left: 57px; top: 23px; display: flex; gap: 8px; }
	.vz-ins-cap--oportunidades .vz-ins-cap__t { position: absolute; left: 25px; top: 97px; margin: 0 !important; font-size: 18.5px; }
	.vz-ins-cap--oportunidades .vz-ins-cap__d { position: absolute; left: 25px; top: 120px; margin: 0; font-size: 13px; white-space: nowrap; }

	/* ---------------- DASHBOARDS ---------------- */
	.vz-ins-cap--dashboards .vz-ins-cap-da__fila { display: contents; }
	/* icono left25 top41 ; "Dashboard" left69 top49 ; barras left57 top58 (w292 alto44) ; divisor left364 top58 ;
	   "Llamadas" left380 top56 ; "1.248" left380 top72 ; título left21 top107 ; desc left21 top131. */
	.vz-ins-cap--dashboards .vz-ins-cap__ic { position: absolute; left: 25px; top: 41px; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__nom { position: absolute; left: 69px; top: 49px; font-size: 14px; font-weight: 600; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__barras {
		position: absolute; left: 57px; top: 58px; width: 292px; height: 44px; display: block;
	}
	.vz-ins-cap--dashboards .vz-ins-cap-da__bar { position: absolute; bottom: 0; width: 36px; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__bar:nth-child(1) { left: 0; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__bar:nth-child(2) { left: 43px; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__bar:nth-child(3) { left: 86px; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__bar:nth-child(4) { left: 129px; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__bar:nth-child(5) { left: 172px; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__bar:nth-child(6) { left: 215px; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__bar:nth-child(7) { left: 258px; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__sep {
		position: absolute; left: 364px; top: 58px; width: 1px; height: 44px; background: rgba(93, 201, 198, 0.3);
	}
	.vz-ins-cap--dashboards .vz-ins-cap-da__kpi { position: static; display: contents; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__kpi small { position: absolute; left: 380px; top: 56px; font-size: 12.5px; }
	.vz-ins-cap--dashboards .vz-ins-cap-da__kpi b {
		position: absolute; left: 380px; top: 72px; font-size: 26px; font-weight: 700;
		letter-spacing: -0.01em; color: var(--wp--preset--color--turquesa);
	}
	.vz-ins-cap--dashboards .vz-ins-cap__t { position: absolute; left: 21px; top: 107px; margin: 0 !important; font-size: 20px; }
	.vz-ins-cap--dashboards .vz-ins-cap__d { position: absolute; left: 21px; top: 131px; margin: 0; font-size: 13.5px; white-space: nowrap; }

	/* ---------------- INSIGHTS CON IA ---------------- */
	.vz-ins-cap--insights .vz-ins-cap-ia__cols,
	.vz-ins-cap--insights .vz-ins-cap-ia__col,
	.vz-ins-cap--insights .vz-ins-cap-ia__cab { display: contents; }
	/* Columna izquierda: bombilla left23 top43 ; "Recomendaciones" left67 top52 ; caja left22 top84 (w378 alto58). */
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(1) .vz-ins-cap__ic { position: absolute; left: 23px; top: 43px; }
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(1) .vz-ins-cap-ia__cab > span:not(.vz-ins-cap__ic) { position: absolute; left: 67px; top: 52px; font-size: 14.5px; font-weight: 600; }
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(1) .vz-ins-cap-ia__caja {
		position: absolute; left: 22px; top: 84px; width: 378px; height: 58px;
		background: var(--wp--preset--color--superficie); border: 0; border-radius: 12px; padding: 0;
	}
	/* ítems relativos a su caja: ck 14/12 y 14/37 ; texto 41/11 y 41/36 (ref: 36/96,63/95 y 36/121,63/120). */
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(1) .vz-ins-cap-ia__item { position: absolute; left: 41px; margin: 0; height: 16px; display: flex; align-items: center; font-size: 11.5px; white-space: nowrap; overflow: visible; }
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(1) .vz-ins-cap-ia__item:nth-of-type(1) { top: 11px; }
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(1) .vz-ins-cap-ia__item:nth-of-type(2) { top: 36px; }
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(1) .vz-ins-cap-ia__item .vz-ins-cap-ia__ck { position: absolute; left: -27px; top: 0; }
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(1) .vz-ins-cap-ia__item:nth-of-type(1) .vz-ins-cap-ia__ck { top: 0; }
	/* Divisor vertical left416 top42 alto101. */
	.vz-ins-cap--insights .vz-ins-cap-ia__divisor {
		position: absolute; left: 416px; top: 42px; width: 1px; height: 101px; background: rgba(93, 201, 198, 0.3); display: block;
	}
	/* Columna derecha: tendencia left434 top43 ; "Próxima acción" left477 top52 ; caja left434 top84 (w363 alto58). */
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(2) .vz-ins-cap__ic { position: absolute; left: 434px; top: 43px; }
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(2) .vz-ins-cap-ia__cab > span:not(.vz-ins-cap__ic) { position: absolute; left: 477px; top: 52px; font-size: 14.5px; font-weight: 600; }
	.vz-ins-cap--insights .vz-ins-cap-ia__col:nth-of-type(2) .vz-ins-cap-ia__caja--accion {
		position: absolute; left: 434px; top: 84px; width: 363px; height: 58px;
		background: var(--wp--preset--color--superficie); border: 0; border-radius: 12px; padding: 0;
	}
	/* calendario (ref left447 top97 -> caja 13/13) ; "Escalar…" (ref 492/91 -> 58/7) ; texto (ref 492/110 -> 58/26). */
	.vz-ins-cap--insights .vz-ins-cap-ia__cal { position: absolute; left: 13px; top: 13px; width: 30px; height: 32px; }
	.vz-ins-cap--insights .vz-ins-cap-ia__accion { position: absolute; left: 58px; top: 7px; display: block; }
	.vz-ins-cap--insights .vz-ins-cap-ia__accion b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
	.vz-ins-cap--insights .vz-ins-cap-ia__accion small { position: absolute; left: 0; top: 19px; width: 290px; font-size: 11.5px; font-weight: 300; line-height: 1.35; }

	/* ---------------- BANDA ---------------- */
	.vz-ins-cap--banda { display: block; }
	.vz-ins-cap--banda .vz-ins-cap-mo__rotulo { position: absolute; left: 28px; top: 16px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--turquesa); }
	.vz-ins-cap--banda .vz-ins-cap-mo__titulo { position: absolute; left: 28px; top: 36px; font-size: 24px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
	.vz-ins-cap--banda .vz-ins-cap-mo__divisor { position: absolute; left: 520px; top: 16px; width: 2px; height: 47px; background: var(--wp--preset--color--turquesa); opacity: 0.8; display: block; }
	.vz-ins-cap--banda .vz-ins-cap-mo__texto { position: absolute; left: 556px; top: 19px; width: 520px; margin: 0; font-size: 15px; font-weight: 300; line-height: 1.55; }
}

/* =====================================================================
 * Sección 5: Beneficios ("Lo que obtiene / Más control sobre lo que realmente se conversa")
 * Fondo OSCURO (alterna con la sección 4 clara). Medidas 1:1 del HTML de referencia
 * design/insight/05-beneficios-referencia.html (lienzo 1440 × 810, sin escala).
 * Paleta solo con tokens de theme.json: fondo, verde-profundo, turquesa, menta, claro-1.
 * Sin píldora "Ejemplo ilustrativo" (no es una ilustración de producto).
 *
 * Regímenes:
 *  - Base / <768: una columna; foto en banda superior (280 px) con el título encima; tarjetas apiladas.
 *  - 768–1279: foto en banda superior (360 px) con el título encima; tarjetas en 2 columnas.
 *  - ≥1280: maquetación absoluta como la referencia (foto 520×810 a la izquierda; título abajo-izquierda;
 *           rejilla de 4 tarjetas 2×2 a la derecha).
 * ===================================================================== */
.vz-ins-benef {
	position: relative;
	background: radial-gradient(1100px 600px at 85% 0%, #17382F 0%, var(--wp--preset--color--fondo) 62%);
	color: var(--wp--preset--color--claro-1);
	overflow: hidden;
}

/* WordPress añade un margen de "block gap" (≈20 px) a los hijos de un grupo de flujo que no son el primero.
 * Aquí todos los hijos de la sección se colocan por posición, así que se anula ese margen. */
.vz-ins-benef > * {
	margin-block: 0 !important;
}

/* --- Foto + velo (banda superior en el régimen de flujo) --- */
.vz-ins-benef__media {
	display: block;
	position: relative;
	width: 100%;
	height: 280px;
}

.vz-ins-benef__foto,
.vz-ins-benef__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
}

.vz-ins-benef__velo {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 280px;
	/* En flujo el degradado va en vertical (de arriba claro a abajo oscuro) para apoyar el título encima. */
	background: linear-gradient(180deg, rgba(14, 28, 21, 0.1), rgba(14, 28, 21, 0.95));
	pointer-events: none;
}

/* --- Bloque de intro (eyebrow + H2 + sub). Se ancla abajo-izquierda sobre la banda de la foto;
 * su posición exacta la fija cada régimen (media queries más abajo). --- */
.vz-ins-benef__intro {
	position: absolute;
	left: 20px;
	max-width: 420px;
}

.vz-ins-benef .vz-ins-eyebrow {
	margin: 0 0 0 !important;
	font-size: 0.75rem;         /* 12 px */
	letter-spacing: 0.18em;
	line-height: normal;        /* la referencia usa un <div> (line-height normal), no un <p> de 1.55 */
}

.vz-insight .vz-ins-benef__titulo {
	margin: 12px 0 0 !important;
	color: var(--wp--preset--color--claro-1);
	font-weight: 800;
	font-size: 2.25rem;         /* 36 px */
	letter-spacing: -0.015em;
	line-height: 1.08;
}

.vz-ins-benef__sub {
	margin: 12px 0 0 !important;
	font-size: 0.875rem;        /* 14 px */
	line-height: 1.55;
	opacity: 0.9;
}

/* --- Rejilla de tarjetas --- */
.vz-ins-benef__rejilla {
	display: grid;
	grid-template-columns: 1fr;
}

.vz-ins-benef__card {
	padding: 30px 0;
	border-top: 1px solid rgba(238, 242, 236, 0.2);
}

.vz-ins-benef__num {
	margin: 0;
	color: var(--wp--preset--color--turquesa);
	font-weight: 800;
	font-size: 3.5rem;          /* 56 px (móvil); 70 px en ≥1280 */
	letter-spacing: -0.04em;
	line-height: 0.9;
}

.vz-ins-benef__h {
	margin: 14px 0 0;
	font-weight: 700;
	font-size: 1.625rem;        /* 26 px */
	line-height: 1.15;
	/* theme.json aplica -0.025em a todos los encabezados; la referencia (h3) no lleva interletraje. */
	letter-spacing: normal;
}

.vz-ins-benef__p {
	margin: 8px 0 0;
	font-size: 0.9375rem;       /* 15 px */
	line-height: 1.55;
	opacity: 0.85;
}

/* Chips de la tarjeta 02. line-height normal como en la referencia (un <div> sin interlineado propio). */
.vz-ins-benef__chips {
	margin-top: 18px;
	line-height: normal;
}

.vz-ins-benef__chip {
	display: inline-block;
	margin-right: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--turquesa);
	color: var(--wp--preset--color--turquesa);
	font-size: 0.625rem;        /* 10 px */
	font-weight: 700;
}

.vz-ins-benef__chip--f {
	background: var(--wp--preset--color--turquesa);
	color: var(--wp--preset--color--verde-bosque);
}

/* Onda de la tarjeta 03 (34 barras). */
.vz-ins-benef__onda {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 30px;
	margin-top: 18px;
}

.vz-ins-benef__onda i {
	display: block;
	width: 4px;
	border-radius: 3px;
	background: var(--wp--preset--color--turquesa);
}

/* El bloque de intro necesita un contenedor con altura (la banda de la foto) para anclarse encima. */
/* Base/móvil (<768): la intro se ancla abajo-izquierda sobre la banda de 280 px de la foto. */
@media (max-width: 767.98px) {
	.vz-ins-benef__media,
	.vz-ins-benef__velo { height: 280px; }

	.vz-ins-benef__intro {
		position: absolute;
		left: 20px;
		top: 280px;
		transform: translateY(calc(-100% - 24px));
		max-width: calc(100% - 40px);
	}

	.vz-ins-benef__rejilla {
		padding: 0 20px 48px;
		margin-top: 24px;
	}
}

/* 768–1279: banda de 360 px con el título encima (abajo-izquierda), tarjetas en 2 columnas. */
@media (min-width: 768px) and (max-width: 1279.98px) {
	.vz-ins-benef__media,
	.vz-ins-benef__velo { height: 360px; }

	.vz-ins-benef__intro {
		position: absolute;
		left: 32px;
		top: 360px;
		transform: translateY(calc(-100% - 32px));
		max-width: 420px;
	}

	.vz-ins-benef__rejilla {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
		padding: 0 clamp(24px, 5vw, 64px) 56px;
		margin-top: 28px;
	}
}

/* <1280: las dos envolturas nuevas (columna) no existen para el flujo responsive ya aprobado: sus hijos
 * (bloque de título y rejilla) se comportan como hijos directos de la sección, igual que antes. */
@media (max-width: 1279.98px) {
	.vz-ins-benef__env,
	.vz-ins-benef__col { display: contents; }

	/* La foto de fondo del hero solo se usa en escritorio; la del hombre solo por debajo de 1280. */
	.vz-ins-benef__fondo { display: none; }
}

.vz-ins-benef__col > * { margin-block: 0 !important; }

/* ≥1280: COLUMNA FIJA con foto de fondo (referencia 05-beneficios-C-referencia.html). Medidas fijas en px.
 * - La sección ocupa el 100 % del ancho, mide 810 px y lleva de fondo la foto del hero (cover, centrada)
 *   con un velo horizontal. La foto del hombre ya no se usa aquí.
 * - El contenido va en la MISMA envoltura que la sección 4 (.vz-envoltura de 1378 px con su relleno lateral):
 *   columna de 1314 px centrada, así los márgenes laterales coinciden con los de la sección 4 a cualquier ancho.
 * - Bloque de título: left 0, bottom 70, ancho 400. Rejilla: right 0, top 140, 2 columnas de 360 + gap 50 = 770. */
@media (min-width: 1280px) {
	.vz-ins-benef {
		height: 810px;
		background: var(--wp--preset--color--fondo);
	}

	/* Foto de fondo: toda la sección. */
	.vz-ins-benef__media {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.vz-ins-benef__foto { display: none; }
	.vz-ins-benef__fondo,
	.vz-ins-benef__fondo img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	/* Velo: el del diseño, sin capas ni brillos añadidos. */
	.vz-ins-benef__velo {
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, rgba(14, 28, 21, 0.9), rgba(14, 28, 21, 0.82) 55%, rgba(14, 28, 21, 0.9));
	}

	/* Columna: la envoltura de la sección 4 (mismo ancho máximo y mismo relleno lateral). */
	.vz-ins-benef .vz-envoltura {
		position: relative;
		z-index: 2;
		max-width: 1378px;
		height: 100%;
	}
	.vz-ins-benef__col {
		position: relative;
		height: 100%;
	}

	.vz-ins-benef__intro {
		position: absolute;
		left: 0;
		top: auto;
		bottom: 70px;
		transform: none;
		width: 400px;
		max-width: none;
	}

	.vz-ins-benef__rejilla {
		position: absolute;
		left: auto;
		right: 0;
		top: 140px;
		width: 770px;
		grid-template-columns: 360px 360px;
		column-gap: 50px;
		row-gap: 0;
		padding: 0;
		margin: 0;
	}

	.vz-ins-benef__num { font-size: 4.375rem; }  /* 70 px */
}

/* =====================================================================
 * Sección F′: Perfiles + Escenarios (fondo claro). Unión de las antiguas "Perfiles" y "Escenarios".
 * Medidas 1:1 de design/insight/06-para-quien-referencia.html. Todo en px fijos: nada escala con la ventana.
 * Columna: la envoltura de la sección 4 (1378 px con su relleno lateral = 1314 px de contenido, centrada).
 * Paleta solo con tokens de theme.json; turquesa oscuro (--vz-ins-teal) en las etiquetas sobre fondo claro.
 * Interletraje explícito: theme.json aplica -0.025em a todos los encabezados y los h3 lo heredarían;
 * la referencia lleva -0.015em en los h2 y interletraje normal en los h3.
 * ===================================================================== */
.vz-ins-perf {
	background: var(--wp--preset--color--claro-1);
	color: var(--wp--preset--color--fondo);
	padding-block: 96px;
}

.vz-ins-perf .vz-envoltura {
	max-width: 1378px;
}

.vz-ins-perf .vz-ins-eyebrow {
	margin: 0 !important;
	font-size: 0.75rem;         /* 12 px */
	letter-spacing: 0.18em;
	line-height: normal;
}

.vz-insight .vz-ins-perf__titulo {
	margin: 12px 0 0 !important;
	color: var(--wp--preset--color--fondo);
	font-size: 2.25rem;         /* 36 px */
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

/* WordPress añade un margen de "block gap" (20 px) a los hijos de un grupo de flujo que no son el primero;
 * aquí cada contenedor lleva solo el margen de la referencia (el del trío, dentro de él). */
.vz-insight .vz-ins-perf__bloque {
	display: flow-root;
	margin-block: 0 !important;
}

.vz-ins-perf__trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
	margin-top: 44px;
}

/* Foto: 250 px de alto, radio de 14 px y una esquina grande de 76 px distinta en cada tarjeta. */
.vz-ins-perf__foto {
	position: relative;
	height: 250px;
	overflow: hidden;
	border-radius: 14px;
}

.vz-ins-perf__foto--r1 { border-top-right-radius: 76px; }
.vz-ins-perf__foto--r2 { border-bottom-left-radius: 76px; }
.vz-ins-perf__foto--r3 { border-top-left-radius: 76px; }

.vz-ins-perf__foto picture {
	display: block;
	width: 100%;
	height: 100%;
}

.vz-ins-perf__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.vz-ins-perf__tag {
	position: absolute;
	left: 16px;
	bottom: 16px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--turquesa);
	color: var(--wp--preset--color--verde-bosque);
	font-size: 0.6875rem;       /* 11 px */
	font-weight: 700;
	line-height: normal;
}

.vz-ins-perf__h {
	margin: 20px 0 0;
	color: var(--wp--preset--color--fondo);
	font-size: 1.375rem;        /* 22 px */
	font-weight: 700;
	letter-spacing: normal;
	line-height: normal;
}

.vz-ins-perf__p {
	max-width: 380px;
	margin: 8px 0 0;
	font-size: 0.9375rem;       /* 15 px */
	line-height: 1.55;
	opacity: 0.78;
}

.vz-insight .vz-ins-perf__crm {
	margin: 36px 0 0 !important;
	font-size: 0.875rem;        /* 14 px */
	line-height: normal;
	opacity: 0.7;
}

.vz-insight .vz-ins-perf__hr {
	height: 1px;
	margin: 72px 0 !important;
	background: rgba(14, 28, 21, 0.16);
}

/* Escenarios: línea superior, 28 px de relleno y recuadro de ícono de 56 × 56. */
.vz-ins-perf__card--esc {
	padding-top: 28px;
	border-top: 1px solid rgba(14, 28, 21, 0.2);
}

.vz-ins-perf__card--esc .vz-ins-perf__h { margin-top: 22px; }

.vz-ins-perf__ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--wp--preset--color--verde-azulado);
	border: 1px solid rgba(93, 201, 198, 0.35);
}

.vz-ins-perf__ic svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: var(--wp--preset--color--turquesa);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* <1280: perfiles en 2 columnas (tableta) y escenarios en 1; <768: todo en 1 columna. */
@media (max-width: 1279.98px) {
	.vz-ins-perf__trio {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 40px;
	}
	.vz-ins-perf__trio--esc { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
	.vz-ins-perf { padding-block: 64px; }
	.vz-ins-perf__trio { grid-template-columns: 1fr; }
	.vz-insight .vz-ins-perf__titulo { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
}

/* =====================================================================
 * Sección G′: "Por qué VOZIP" + "Preguntas frecuentes" (dos bandas oscuras). Unión de las antiguas G e I.
 * Medidas 1:1 de design/insight/07-por-que-vozip-referencia.html. En px fijos: nada escala con la ventana.
 * Columna: la envoltura de la sección 4 (1378 px con su relleno lateral = 1314 px de contenido, centrada).
 * Interletraje explícito: h2 -0.015em y h3 normal (theme.json aplica -0.025em a todos los encabezados).
 * Excepción: el diagrama de la banda 1 usa --u (1 px de diseño = 1/660 de su ancho, con tope de 660 px), así que a
 * partir de 1280 px mide exactamente 660 × 300 y solo por debajo de ese ancho se reduce entero.
 * ===================================================================== */
.vz-ins-pq__banda {
	position: relative;
	padding-block: 96px;
	color: var(--wp--preset--color--claro-1);
}

.vz-ins-pq .vz-envoltura {
	max-width: 1378px;
}

/* WordPress añade 20 px de "block gap" a los hijos de un grupo de flujo que no son el primero: se anula aquí. */
.vz-ins-pq > *,
.vz-ins-pq .vz-envoltura > *,
.vz-ins-pq__banda > *,
.vz-ins-pq__fila > *,
.vz-ins-pq__faq > *,
.vz-ins-pq__pilares {
	margin-block: 0 !important;
}

.vz-ins-pq .vz-ins-eyebrow {
	margin: 0 !important;
	font-size: 0.75rem;         /* 12 px */
	letter-spacing: 0.18em;
	line-height: normal;
}

.vz-insight .vz-ins-pq__titulo {
	margin: 12px 0 0 !important;
	color: var(--wp--preset--color--claro-1);
	font-size: 2.25rem;         /* 36 px */
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

/* ---------- Banda 1: Por qué VOZIP ---------- */
.vz-ins-pq__banda--por {
	background: radial-gradient(1100px 700px at 88% 0%, #17382F 0%, var(--wp--preset--color--fondo) 62%);
}

.vz-ins-pq__fila {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.vz-ins-pq__tx {
	flex: none;
	width: 560px;
}

/* Mide 660 px; si la columna es más estrecha (1280 → 1216 px) cede los px que sobran y el diagrama escala entero. */
.vz-ins-pq__dg {
	flex: 0 1 auto;
	min-width: 0;
	container-type: inline-size;
	width: 660px;
	max-width: 100%;
}

.vz-ins-pq__lienzo {
	--u: calc(100cqw / 660);
	position: relative;
	width: 100%;
	aspect-ratio: 660 / 300;
}

.vz-ins-pq__cables {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.vz-ins-pq__nodo {
	position: absolute;
	box-sizing: border-box;
	border-radius: calc(var(--u) * 16);
	background: var(--wp--preset--color--verde-profundo);
	border: 1px solid rgba(93, 201, 198, 0.38);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
	color: var(--wp--preset--color--claro-1);
}

.vz-ins-pq__nodo--central { left: calc(var(--u) * 40);  top: calc(var(--u) * 108); width: calc(var(--u) * 192); height: calc(var(--u) * 84); }
.vz-ins-pq__nodo--a       { left: calc(var(--u) * 366); top: calc(var(--u) * 14);  width: calc(var(--u) * 294); height: calc(var(--u) * 78); }
.vz-ins-pq__nodo--b       { left: calc(var(--u) * 366); top: calc(var(--u) * 111); width: calc(var(--u) * 294); height: calc(var(--u) * 78); }
.vz-ins-pq__nodo--c       { left: calc(var(--u) * 366); top: calc(var(--u) * 208); width: calc(var(--u) * 294); height: calc(var(--u) * 78); }

.vz-ins-pq__nl {
	display: block;
	padding: calc(var(--u) * 12) calc(var(--u) * 16) calc(var(--u) * 10);
	border-bottom: 1px solid rgba(93, 201, 198, 0.22);
	color: var(--wp--preset--color--turquesa);
	font-size: calc(var(--u) * 10);
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: normal;
	text-transform: uppercase;
}

.vz-ins-pq__nl--sola {
	padding-bottom: 0;
	border: 0;
}

.vz-ins-pq__nv {
	display: block;
	padding: calc(var(--u) * 12) calc(var(--u) * 16);
	font-size: calc(var(--u) * 14);
	line-height: normal;
	opacity: 0.9;
}

.vz-ins-pq__onda {
	display: flex;
	align-items: center;
	gap: calc(var(--u) * 3);
	height: calc(var(--u) * 34);
	margin-top: calc(var(--u) * 6);
	padding: 0 calc(var(--u) * 16);
}

.vz-ins-pq__onda i {
	display: block;
	width: calc(var(--u) * 3);
	border-radius: 2px;
	background: var(--wp--preset--color--turquesa);
}

/* Pilares: tres columnas con 40 px entre ellas, a 64 px bajo la fila. */
.vz-ins-pq__pilares { display: flow-root; }

.vz-ins-pq__trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 40px;
	margin-top: 64px;
}

.vz-ins-pq__pilar {
	padding-top: 22px;
	border-top: 2px solid var(--wp--preset--color--turquesa);
}

.vz-ins-pq__h {
	margin: 0;
	color: var(--wp--preset--color--claro-1);
	font-size: 1.375rem;        /* 22 px */
	font-weight: 700;
	letter-spacing: normal;
	line-height: normal;
}

.vz-ins-pq__p {
	max-width: 380px;
	margin: 8px 0 0;
	font-size: 0.9375rem;       /* 15 px */
	line-height: 1.55;
	opacity: 0.82;
}

/* ---------- Banda 2: Preguntas frecuentes ---------- */
.vz-ins-pq__banda--faq {
	overflow: hidden;
	background: var(--wp--preset--color--fondo);
}

/* Foto: cubre la banda de borde a borde (cover), sin máscara ni ancho fijo. */
.vz-ins-pq__foto {
	position: absolute;
	inset: 0;
}

.vz-ins-pq__pic,
.vz-ins-pq__pic img {
	display: block;
	width: 100%;
	height: 100%;
}

.vz-ins-pq__pic img {
	object-fit: cover;
	object-position: 50% 5%;   /* ancla arriba: a 2560 px se ve la mitad de la altura y las caras (3 %–54 %) quedan dentro */
}

/* Por debajo de 1280 px se conserva el comportamiento anterior: capa fija de 1800 px con borde derecho difuminado. */
@media (max-width: 1279.98px) {
	.vz-ins-pq__foto {
		right: auto;
		width: 1800px;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 260px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 260px), transparent);
	}

	.vz-ins-pq__pic img { object-position: 0 40%; }
}

/* Velo anclado al centro de la ventana (las paradas son distancias fijas desde el centro). */
.vz-ins-pq__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg,
		rgba(14, 28, 21, 0.62) calc(50% - 720px),
		rgba(14, 28, 21, 0.72) calc(50% - 259px),
		rgba(14, 28, 21, 0.9) calc(50% - 58px),
		rgba(14, 28, 21, 0.94) calc(50% + 720px));
}

.vz-ins-pq__banda--faq .vz-envoltura {
	position: relative;
	z-index: 2;
}

.vz-ins-pq__faq {
	display: flex;
	justify-content: space-between;
}

.vz-ins-pq__izq {
	flex: none;
	width: 420px;
}

.vz-ins-pq__acc {
	flex: 0 1 auto;
	min-width: 0;
	width: 820px;
	border-bottom: 1px solid rgba(238, 242, 236, 0.2);
}

.vz-ins-pq__q {
	padding: 24px 0;
	border-top: 1px solid rgba(238, 242, 236, 0.2);
}

.vz-ins-pq__qh {
	margin: 0;
	color: inherit;
	font-size: 1.25rem;         /* 20 px */
	font-weight: 700;
	letter-spacing: normal;
	line-height: normal;
}

.vz-ins-pq__btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
}

.vz-ins-pq__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--turquesa);
	outline-offset: 6px;
	border-radius: 4px;
}

/* Símbolo: "+" que rota y se funde en "–" al abrir. */
.vz-ins-pq__sim {
	position: relative;
	display: block;
	flex: none;
	width: 26px;
	height: 26px;
	color: var(--wp--preset--color--turquesa);
	font-size: 1.625rem;        /* 26 px */
	font-weight: 400;
	line-height: 1;
	text-align: right;
}

.vz-ins-pq__sim::before,
.vz-ins-pq__sim::after {
	position: absolute;
	inset: 0;
	transition: opacity 250ms ease-out, transform 250ms ease-out;
}

.vz-ins-pq__sim::before { content: "+"; }
.vz-ins-pq__sim::after  { content: "–"; opacity: 0; transform: rotate(-90deg); }

.vz-ins-pq__btn[aria-expanded="true"] .vz-ins-pq__sim::before { opacity: 0; transform: rotate(90deg); }
.vz-ins-pq__btn[aria-expanded="true"] .vz-ins-pq__sim::after  { opacity: 1; transform: none; }

/* Panel: se abre con transición de altura (grid 0fr → 1fr) y opacidad de 250 ms. */
.vz-ins-pq__panel {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	visibility: hidden;
	transition: grid-template-rows 250ms ease-out, opacity 250ms ease-out, visibility 0s linear 250ms;
}

.vz-ins-pq__panel[data-abierto="1"] {
	grid-template-rows: 1fr;
	opacity: 1;
	visibility: visible;
	transition: grid-template-rows 250ms ease-out, opacity 250ms ease-out, visibility 0s;
}

.vz-ins-pq__resp {
	min-height: 0;
	overflow: hidden;
}

.vz-ins-pq__resp p {
	max-width: 640px;
	margin: 12px 0 0;
	font-size: 0.9375rem;       /* 15 px */
	line-height: 1.6;
	opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
	.vz-ins-pq__panel,
	.vz-ins-pq__sim::before,
	.vz-ins-pq__sim::after { transition: none !important; }
}

/* ---------- <1280: diagrama bajo el título (escala entero), pilares y preguntas apilados ---------- */
@media (max-width: 1279.98px) {
	.vz-ins-pq__fila,
	.vz-ins-pq__faq {
		flex-direction: column;
		gap: 40px;
	}
	.vz-ins-pq__tx,
	.vz-ins-pq__izq { width: auto; max-width: 560px; }
	.vz-ins-pq__acc { flex: none; width: 100%; }
	.vz-ins-pq__dg { flex: none; width: 100%; max-width: 660px; }
	.vz-ins-pq__trio { grid-template-columns: 1fr; row-gap: 32px; }
	.vz-ins-pq__velo { background: rgba(14, 28, 21, 0.85); }
}

/* Tableta ancha: los tres pilares caben en tres columnas. */
@media (min-width: 900px) and (max-width: 1279.98px) {
	.vz-ins-pq__trio { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
}

@media (max-width: 767.98px) {
	.vz-ins-pq__banda { padding-block: 64px; }
	.vz-insight .vz-ins-pq__titulo { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
}

/* ---------- ≤600 px: diagrama vertical (Su central arriba, tres empresas apiladas a ancho completo) ----------
 * Mismos nodos y mismo trazo punteado turquesa (2 px, 2 de raya y 7 de hueco) con punto de 8 px en cada extremo;
 * el texto vuelve a tamaño real (1 unidad = 1 px) para que se lea. */
@media (max-width: 600px) {
	.vz-ins-pq__lienzo {
		--u: 1px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 40px;
		aspect-ratio: auto;
	}

	.vz-ins-pq__cables { display: none; }

	.vz-ins-pq__lienzo .vz-ins-pq__nodo {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		height: auto;
		border-radius: 16px;
	}

	.vz-ins-pq__lienzo .vz-ins-pq__nodo--central { width: 192px; height: 84px; }

	.vz-ins-pq__nl { font-size: 11px; }
	.vz-ins-pq__nv { font-size: 15px; }

	/* Conector vertical hacia cada empresa: tramo punteado de 40 px sobre la tarjeta y punto en su borde superior. */
	.vz-ins-pq__nodo--a::after,
	.vz-ins-pq__nodo--b::after,
	.vz-ins-pq__nodo--c::after {
		content: "";
		position: absolute;
		left: 22px;
		bottom: calc(100% + 1px);
		width: 2px;
		height: 40px;
		background: linear-gradient(to bottom, #5DC9C6 4px, transparent 4px) 0 0 / 2px 9px repeat-y;
		opacity: 0.85;
	}

	.vz-ins-pq__nodo--a::before,
	.vz-ins-pq__nodo--b::before,
	.vz-ins-pq__nodo--c::before {
		content: "";
		position: absolute;
		left: 19px;
		top: -5px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #5DC9C6;
	}
}

/* =====================================================================
 * Sección J: Cierre (fondo claro, foto a la derecha con corte diagonal)
 * Diseño aprobado: design/insight/08-cierre-referencia.png (lienzo 1440 x 810; el PNG mide 2339 x 1317, ÷1,624).
 * La foto es la del hero; el corte diagonal y la onda se miden desde el borde izquierdo de la columna de S4,
 * así la composición no depende del ancho de la ventana. Sin translucidez ni brillos.
 * ===================================================================== */
.vz-ins-cierre {
	--vz-cierre-col: max(32px, calc((100% - 1378px) / 2 + 32px));   /* borde izquierdo de la columna fija (63 px a 1440) */
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: 810px;
	padding-bottom: 59px;
	overflow: hidden;
	background: var(--wp--preset--color--claro-1);
	color: var(--wp--preset--color--fondo);
}

.vz-ins-cierre .vz-envoltura {
	max-width: 1378px;
}

/* WordPress añade 20 px de "block gap" a los hijos de un grupo de flujo: se anula. */
.vz-ins-cierre > *,
.vz-ins-cierre__contenido > * {
	margin-block: 0 !important;
}

.vz-ins-cierre__contenido {
	position: relative;
	z-index: 2;
}

.vz-ins-cierre .vz-ins-eyebrow {
	margin: 0 !important;
	font-size: 0.75rem;           /* 12 px, .18em: igual que la etiqueta de G′ */
	letter-spacing: 0.18em;
}

.vz-insight .vz-ins-cierre__titulo {
	margin: 12px 0 0 !important;
	color: var(--wp--preset--color--fondo);
	font-size: 3.96rem;           /* ≈ 63,4 px: el ancho real de la línea 2 coincide con la referencia (608 px) */
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.015em;
}

.vz-insight .vz-ins-cierre__subtitulo {
	max-width: 520px;
	margin: 22px 0 0 !important;
	color: var(--wp--preset--color--fondo);
	font-size: 1.1875rem;         /* 19 px */
	line-height: 1.58;
	opacity: 0.85;
}

.vz-ins-cierre__botones {
	margin-top: 34px !important;
}

.vz-ins-cierre__botones .wp-block-button__link {
	padding: 15.8px 35.6px;
	border-radius: 999px;
	background: var(--wp--preset--color--verde-azulado);
	color: var(--wp--preset--color--claro-1);
	font-size: 1rem;
	font-weight: 700;
}

.vz-ins-cierre__botones .wp-block-button__link:hover,
.vz-ins-cierre__botones .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--claro-1);
}

/* Foto: de la diagonal al borde derecho de la ventana y de borde a borde en vertical. La diagonal arranca en la
 * columna + 720 px arriba y + 577 px abajo (783 y 640 px a 1440). Cover limitado por la altura: no se agiganta. */
.vz-ins-cierre__foto {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: calc(var(--vz-cierre-col) + 577px);
	clip-path: polygon(143px 0, 100% 0, 100% 100%, 0 100%);
}

.vz-ins-cierre__img,
.vz-ins-cierre__pic,
.vz-ins-cierre__pic img {
	display: block;
	width: 100%;
	height: 100%;
}

.vz-ins-cierre__pic img {
	object-fit: cover;
	object-position: 17.8% 0;   /* rostro completo a 1440, 1920 y 2560 px */
}

/* Onda de voz sobre la parte baja de la foto: mismo recurso de onda (vozip_insight_onda_html), barras blancas y turquesa. */
.vz-ins-cierre__onda {
	position: absolute;
	right: 70px;
	bottom: 82px;
	width: 520px;
}

.vz-ins-onda--cierre {
	align-items: center;
	justify-content: space-between;
	gap: 0;
	height: 56px;
}

.vz-ins-onda--cierre i {
	width: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--turquesa);
	opacity: var(--o);
}

.vz-ins-onda--cierre i:nth-child(3n) {
	background: var(--wp--preset--color--claro-1);
}

/* La última sección: la curva del pie no debe montarse sobre ella. */
.vz-principal.vz-insight + .vz-pie {
	margin-block-start: 0;
}

/* Por debajo de 1280 px: la foto va arriba del texto, sin corte diagonal. */
@media (max-width: 1279.98px) {
	.vz-ins-cierre {
		justify-content: flex-start;
		min-height: 0;
		padding-bottom: 64px;
	}

	.vz-ins-cierre__foto {
		position: relative;
		left: auto;
		right: auto;
		height: 360px;
		clip-path: none;
	}

	.vz-ins-cierre__pic img { object-position: 12% 0; }

	.vz-ins-cierre__onda {
		right: 24px;
		bottom: 28px;
		left: 24px;
		width: auto;
		max-width: 520px;
		margin-left: auto;
	}

	.vz-ins-cierre__contenido { padding-top: 56px; }

	.vz-insight .vz-ins-cierre__titulo { font-size: clamp(2rem, 8.4vw, 3.75rem); }
}

@media (max-width: 600px) {
	.vz-ins-cierre__foto { height: 280px; }

	.vz-ins-cierre__contenido { padding-top: 40px; }

	.vz-ins-cierre__botones .wp-block-button,
	.vz-ins-cierre__botones .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}