/*
 * VOZ IP: secciones del inicio.
 * T8 y T9: héroe (maqueta hibrido-v2, "hero").
 * T10: líneas de servicio (maqueta, "líneas"), al final del archivo.
 */

/* ---------- Héroe ---------- */
.vz-heroe {
	position: relative;
	z-index: 0;
	overflow-x: clip;
	/* Contiene los márgenes de sus hijos (T8): el contenido es el segundo hijo (el primero son las
	   bandas, en posición absoluta), WordPress le daba 1,25 rem de margen y ese margen atravesaba el
	   héroe y <main>, dejando una franja de 20 px sin bandas bajo el encabezado. */
	display: flow-root;
	padding-block: 0 var(--vz-corte);
	background: linear-gradient(180deg, var(--wp--preset--color--verde-bosque) 0%, var(--wp--preset--color--fondo) 100%);
}

/* Velo que funde las bandas con el fondo hacia abajo (como .hr::before de la maqueta). */
.vz-heroe::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(3, 36, 20, 0) 0, rgba(3, 36, 20, 0) 120px, rgba(3, 36, 20, 0.78) 330px, rgba(14, 28, 21, 0.94) 100%);
}

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

.vz-heroe__contenido {
	position: relative;
	z-index: 2;
	padding-top: 230px;
}

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

/* ---------- Bandas (decorativas) ---------- */
.vz-bandas {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 470px;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
}

/* Brillo turquesa de fondo y líneas de barrido, como en la maqueta. */
.vz-bandas::before {
	content: "";
	position: absolute;
	top: 10%;
	left: 55%;
	width: 46%;
	height: 70%;
	background: radial-gradient(closest-side, rgba(93, 201, 198, 0.22), transparent);
}

.vz-bandas::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0 1px, transparent 1px 3px);
}

.vz-bandas__lienzo {
	position: absolute;
	top: 0;
	left: 0;
	width: 1440px;
	height: 470px;
	transform-origin: 0 0;
}

.vz-bandas__capa {
	position: absolute;
	inset: 0;
}

.vz-b {
	position: absolute;
	top: calc(var(--y) * 1px);
	left: calc(var(--x) * 1px);
	width: 3px;
	height: calc(var(--h) * 1px);
	border-radius: 2px;
	background: currentColor;
	/* --brillo: multiplicador de opacidad (1 en escritorio; más alto en móvil por D18). */
	opacity: min(1, calc(var(--o) * var(--brillo, 1)));
	transform-origin: center;
	/* Brillo estático (nunca animado). */
	box-shadow: 0 0 8px currentColor;
}

.vz-b--turquesa {
	color: var(--wp--preset--color--turquesa);
}

.vz-b--verde {
	color: var(--wp--preset--color--verde-hoja);
}

.vz-b--menta {
	color: var(--wp--preset--color--menta);
}

.vz-b--gris {
	width: 5px;
	color: var(--wp--preset--color--gris-claro);
	box-shadow: 0 0 14px currentColor;
}

.vz-bandas__capa--media .vz-b {
	width: 4px;
}

/* Capa lejana: difuminado real como la maqueta (opción 1 aprobada por David). Esta capa nunca se anima:
   el navegador la difumina una vez y luego solo la desplaza con el ratón (transform), lo que es barato. */
.vz-bandas__capa--lejana {
	opacity: 0.7;
	filter: blur(7px);
	will-change: transform;
}

.vz-bandas__capa--lejana .vz-b {
	width: 10px;
}

/* Extensión de las barras de 1440 a 2560 px (0.3.3, inc/heroe.php): solo en pantallas de más de 1440 px.
   A 1440 px o menos el lienzo y las barras quedan como antes. */
.vz-bandas .vz-b--extra {
	display: none;
}

@media (min-width: 1440.02px) {
	.vz-bandas__lienzo {
		width: 2560px;
	}

	.vz-bandas .vz-b--extra {
		display: block;
	}
}

/* ---------- Píldora ---------- */
.vz-pildora {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 26px;
	padding: 7px 18px 7px 8px;
	border: 1px solid var(--wp--preset--color--superficie-media);
	border-radius: 999px;
	background: rgba(27, 52, 54, 0.75);
	color: var(--wp--preset--color--gris-claro);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: border-color 300ms var(--vz-curva), transform 300ms var(--vz-curva);
}

.vz-pildora:hover {
	border-color: var(--wp--preset--color--turquesa);
	transform: translateY(-2px);
}

.vz-pildora__punto {
	position: relative;
	width: 8px;
	height: 8px;
	margin-left: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--turquesa);
}

.vz-pildora__nuevo {
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--wp--preset--color--turquesa);
	color: var(--wp--preset--color--verde-bosque);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vz-pildora__flecha {
	color: var(--wp--preset--color--turquesa);
	transition: transform 350ms var(--vz-curva);
}

.vz-pildora:hover .vz-pildora__flecha {
	transform: translateX(4px);
}

/* ---------- Titular, subtítulo y botones ---------- */
.vz-heroe__titulo {
	max-width: 19em;
	font-weight: 800;
	font-size: clamp(2.25rem, 4.1vw, 3.75rem);
	line-height: 1.04;
	letter-spacing: -0.028em;
}

.vz-heroe__subtitulo {
	max-width: 30em;
	margin-top: 20px !important;
	font-weight: 300;
	font-size: 1.3125rem;
}

.vz-heroe__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px !important;
}

.vz-heroe__botones .wp-block-button__link {
	padding: 16px 30px;
	font-size: 1.03125rem;
	transition: transform 250ms var(--vz-curva);
}

.vz-heroe__botones .wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* ---------- Franja "Tecnologías que integramos" ---------- */
.vz-heroe__franja {
	position: relative;
	margin-top: 48px !important;
	padding-bottom: 6px;
}

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

.vz-heroe__rotulo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px !important;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--superficie-media);
	color: var(--wp--preset--color--menta);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* La lista es la versión accesible; la pista duplicada es la visual. */
.vz-franja__lista {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.vz-franja {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* Dos copias de las palabras; el relleno final iguala el hueco entre copias para que el bucle no salte. */
.vz-franja__pista {
	display: flex;
	align-items: center;
	gap: 34px;
	width: max-content;
	padding: 4px 34px 4px 0;
}

.vz-franja__palabra {
	color: var(--wp--preset--color--gris-claro);
	font-weight: 600;
	font-size: 1.4375rem;
	letter-spacing: -0.005em;
	white-space: nowrap;
	opacity: 0.78;
	transition: opacity 300ms, color 300ms;
}

.vz-franja__palabra:hover {
	color: var(--wp--preset--color--turquesa);
	opacity: 1;
}

.vz-franja__sep {
	color: var(--wp--preset--color--turquesa);
	font-size: 0.75rem;
	opacity: 0.7;
}

/* ---------- Móvil (maqueta: max-width 700px) ---------- */
@media (max-width: 700px) {
	.vz-bandas {
		height: 330px;
	}

	.vz-bandas__lienzo {
		transform: scale(0.3) translateX(-200px);
	}

	/* La mitad de las barras (unas 55) y más anchas para que se vean tras la escala. */
	.vz-bandas__capa .vz-b:nth-child(2n) {
		display: none;
	}

	/* D18: con la mitad de barras que la maqueta, se compensa la densidad con ancho y brillo (no con más barras).
	   La maqueta usa 7 px (unos 2 px en pantalla tras la escala de 0,3); aquí 12 px (unos 3,6 px). */
	.vz-bandas {
		--brillo: 1.35;
	}

	.vz-bandas .vz-b {
		width: 12px;
	}

	.vz-heroe::before {
		background: linear-gradient(180deg, rgba(3, 36, 20, 0) 0, rgba(3, 36, 20, 0) 40px, rgba(3, 36, 20, 0.8) 190px, rgba(14, 28, 21, 0.95) 100%);
	}

	.vz-heroe__contenido {
		padding-top: 150px;
	}

	.vz-pildora {
		gap: 8px;
		padding: 6px 12px 6px 6px;
		font-size: 0.78125rem;
	}

	.vz-pildora__nuevo {
		padding: 3px 9px;
		font-size: 0.6875rem;
	}

	.vz-heroe__titulo {
		font-size: clamp(2.125rem, 9.4vw, 2.75rem);
	}

	.vz-heroe__subtitulo {
		font-size: 1.125rem;
	}

	.vz-heroe__botones {
		flex-direction: column;
	}

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

	.vz-heroe__franja {
		margin-top: 36px !important;
	}

	.vz-franja__palabra {
		font-size: 1.1875rem;
	}

	.vz-franja__pista {
		gap: 24px;
		padding-right: 24px;
	}
}

/* ---------- Movimiento (T9): solo transform y opacity, y solo si se permite ---------- */
@keyframes vz-banda {
	from {
		transform: scaleY(0.5);
		opacity: min(1, calc(0.3 * var(--brillo, 1)));
	}

	to {
		transform: scaleY(1);
		opacity: min(1, calc(var(--o) * var(--brillo, 1)));
	}
}

@keyframes vz-pulso {
	from {
		transform: scale(1);
		opacity: 0.55;
	}

	to {
		transform: scale(2.5);
		opacity: 0;
	}
}

@keyframes vz-franja {
	to {
		transform: translateX(-50%);
	}
}

/* Halo del punto de la píldora (la maqueta anima box-shadow; aquí transform y opacity). */
.vz-pildora__punto::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--turquesa);
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	/* Capas media y cercana: alternan, con duración y retraso propios de cada barra (2,2 a 5,6 s).
	   La capa lejana no se anima (difuminado real, opción 1): solo la mueve el ratón. */
	.vz-bandas__capa--media .vz-b,
	.vz-bandas__capa--cercana .vz-b {
		animation: vz-banda var(--t) ease-in-out var(--r) infinite alternate;
	}

	.vz-pildora__punto::after {
		animation: vz-pulso 2.4s ease-out infinite;
	}

	/* Franja: siempre en movimiento; se pausa solo al pasar el puntero (D13). */
	.vz-franja__pista {
		animation: vz-franja 40s linear infinite;
	}

	.vz-franja:hover .vz-franja__pista {
		animation-play-state: paused;
	}
}

/* ---------- Movimiento reducido: todo quieto; la franja pasa a varias líneas ---------- */
@media (prefers-reduced-motion: reduce) {
	.vz-franja {
		display: none;
	}

	.vz-franja__lista {
		position: static !important;
		display: flex;
		flex-wrap: wrap;
		gap: 10px 28px;
		width: auto;
		height: auto;
		margin: 0;
		padding: 4px 0;
		overflow: visible;
		clip: auto;
		list-style: none;
		white-space: normal;
	}

	.vz-franja__lista li {
		color: var(--wp--preset--color--gris-claro);
		font-weight: 600;
		font-size: 1.1875rem;
		opacity: 0.78;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vz-pildora,
	.vz-pildora__flecha,
	.vz-heroe__botones .wp-block-button__link,
	.vz-franja__palabra {
		transition: none;
	}

	.vz-pildora:hover,
	.vz-pildora:hover .vz-pildora__flecha,
	.vz-heroe__botones .wp-block-button__link:hover {
		transform: none;
	}

	.vz-bandas .vz-b {
		opacity: calc(var(--o) * 0.9);
	}
}

/* =====================================================================
 * Líneas de servicio (T10). Maqueta: .ln, .car, .lc. Puntos de corte de la maqueta:
 * carrusel hasta 700 px, dos columnas de 701 a 1099 px y cuatro desde 1100 px.
 * ===================================================================== */
.vz-lineas > *,
.vz-lineas__arriba > *,
.vz-lineas__textos > *,
.vz-carrusel > *,
.vz-linea > *,
.vz-linea__cuerpo > * {
	margin-block: 0;
}

.vz-lineas__arriba {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px !important;
}

.vz-lineas .vz-antetitulo {
	margin-bottom: 14px !important;
}

.vz-lineas__titulo {
	font-weight: 800;
	font-size: clamp(2.5rem, 5vw, 4.5rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
}

.vz-lineas__entradilla {
	max-width: 36em;
	margin-top: 14px !important;
	color: var(--wp--preset--color--verde-azulado);
	font-size: 1.1875rem;
}

/* ---------- Pista: dos columnas en tablet, cuatro en escritorio ---------- */
.vz-carrusel {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px;
	max-width: var(--vz-ancho-max);
	margin-inline: auto;
	padding: 4px var(--vz-lateral) 24px;
}

/* ---------- Tarjeta ---------- */
.vz-linea {
	--vz-foco: var(--wp--custom--color--foco-oscuro, #5DC9C6);
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 26px;
	background-color: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--gris-claro);
	transition: transform 450ms var(--vz-curva);
}

/* Sombra y borde turquesa del hover en una capa aparte: se anima su opacidad, no box-shadow. */
.vz-linea::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	box-shadow: 0 30px 50px -28px rgba(3, 36, 20, 0.8), inset 0 0 0 1px var(--wp--preset--color--turquesa);
	opacity: 0;
	pointer-events: none;
	transition: opacity 450ms var(--vz-curva);
}

.vz-linea__imagen {
	position: relative;
	height: 340px;
	overflow: hidden;
}

.vz-linea__imagen picture,
.vz-linea__imagen img {
	width: 100%;
	height: 100%;
}

.vz-linea__imagen img {
	object-fit: cover;
	transition: transform 800ms var(--vz-curva);
}

.vz-linea__flecha {
	position: absolute;
	right: 18px;
	bottom: 18px;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--wp--preset--color--turquesa);
	color: var(--wp--preset--color--verde-bosque) !important;
	font-weight: 700;
	font-size: 1.375rem;
	text-decoration: none;
	transition: transform 300ms var(--vz-curva);
}

.vz-linea__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 12px;
	padding: 26px 28px 30px;
}

.vz-linea__etiquetas {
	color: var(--wp--preset--color--menta);
	font-weight: 700;
	font-size: 0.71875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vz-lineas .vz-linea__titulo {
	color: var(--wp--preset--color--gris-claro);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.vz-linea__descripcion {
	color: var(--wp--preset--color--gris-palido);
	font-size: 1rem;
}

.vz-linea__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px !important;
	padding: 0;
	list-style: none;
}

.vz-linea__chips li {
	margin: 0;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--superficie-media);
	border-radius: 999px;
	color: var(--wp--preset--color--menta);
	font-weight: 600;
	font-size: 0.8125rem;
}

.vz-linea__insight {
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--superficie);
	font-weight: 700;
	font-size: 0.875rem;
}

.vz-lineas .vz-linea__insight a {
	color: var(--wp--preset--color--turquesa);
	text-decoration: none;
}

.vz-linea__enlace {
	margin-top: auto !important;
	padding-top: 6px;
	font-weight: 700;
}

.vz-lineas .vz-linea__enlace a {
	color: var(--wp--preset--color--menta);
	text-decoration: none;
	transition: color 200ms;
}

.vz-lineas .vz-linea__enlace a:hover,
.vz-lineas .vz-linea__insight a:hover {
	color: var(--wp--preset--color--turquesa);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Hover y foco (R3.6): tarjeta −6 px, imagen ×1,05 y flecha 4 px ×1,06 ---------- */
@media (prefers-reduced-motion: no-preference) {
	.vz-linea:hover,
	.vz-linea:focus-within {
		transform: translateY(-6px);
	}

	.vz-linea:hover .vz-linea__imagen img,
	.vz-linea:focus-within .vz-linea__imagen img {
		transform: scale(1.05);
	}

	.vz-linea:hover .vz-linea__flecha,
	.vz-linea:focus-within .vz-linea__flecha {
		transform: translateX(4px) scale(1.06);
	}
}

.vz-linea:hover::after,
.vz-linea:focus-within::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.vz-linea,
	.vz-linea::after,
	.vz-linea__imagen img,
	.vz-linea__flecha,
	.vz-carrusel__flecha {
		transition: none;
	}
}

/* ---------- Controles del carrusel (solo móvil; carrusel.js quita hidden) ---------- */
.vz-carrusel__controles {
	display: flex;
	align-items: center;
	gap: 10px;
}

.vz-carrusel__controles[hidden] {
	display: none;
}

.vz-carrusel__flecha {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1.5px solid var(--wp--preset--color--verde-azulado);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--verde-azulado);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 200ms, color 200ms, transform 250ms var(--vz-curva);
}

.vz-carrusel__flecha:hover {
	background: var(--wp--preset--color--verde-azulado);
	color: var(--wp--preset--color--gris-claro);
	transform: scale(1.06);
}

/* En el extremo la flecha sigue enfocable (no se pierde el foco) pero se ve inactiva. */
.vz-carrusel__flecha[aria-disabled="true"] {
	opacity: 0.45;
	cursor: default;
}

.vz-carrusel__flecha[aria-disabled="true"]:hover {
	background: transparent;
	color: var(--wp--preset--color--verde-azulado);
	transform: none;
}

.vz-carrusel__contador {
	min-width: 4.5em;
	color: var(--wp--preset--color--verde-azulado);
	font-weight: 700;
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	text-align: center;
}

/* ---------- Escritorio: cuatro en una fila, sin scroll ---------- */
@media (min-width: 1100px) {
	.vz-carrusel {
		grid-template-columns: repeat(4, 1fr);
		gap: 18px;
	}

	.vz-linea__imagen {
		height: 250px;
	}

	.vz-linea__cuerpo {
		gap: 10px;
		padding: 22px 22px 26px;
	}

	.vz-lineas .vz-linea__titulo {
		font-size: 1.5625rem;
	}

	.vz-linea__descripcion {
		font-size: 0.90625rem;
		line-height: 1.5;
	}

	.vz-linea__etiquetas {
		font-size: 0.65625rem;
	}

	.vz-linea__chips li {
		padding: 5px 11px;
		font-size: 0.75rem;
	}

	.vz-linea__flecha {
		right: 14px;
		bottom: 14px;
		width: 44px;
		height: 44px;
		font-size: 1.1875rem;
	}

	.vz-linea__insight {
		font-size: 0.8125rem;
	}
}

/* ---------- Móvil: carrusel con scroll-snap (el scroll vertical sigue libre) ---------- */
@media (max-width: 700px) {
	.vz-lineas__arriba {
		flex-direction: column;
		align-items: flex-start;
	}

	.vz-lineas__titulo {
		font-size: 2.375rem;
	}

	.vz-carrusel {
		display: flex;
		gap: 16px;
		max-width: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-left: var(--vz-lateral);
		padding: 4px 32px 24px var(--vz-lateral);
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--verde-azulado) transparent;
	}

	.vz-linea {
		flex: 0 0 84vw;
		scroll-snap-align: start;
	}

	.vz-linea__imagen {
		height: 270px;
	}

	.vz-linea__cuerpo {
		padding: 22px 22px 26px;
	}

	.vz-lineas .vz-linea__titulo {
		font-size: 1.75rem;
	}
}

/* =====================================================================
 * VOZ IP Insight AI (T11 y T12). Maqueta: .is, .vid y .vtx.
 * Desde 1100 px el texto va sobre la escena, en las mismas posiciones que el texto del video de la
 * maqueta (lienzo de 1280 x 720), con medidas en cqw para que escale con la escena. Por debajo de
 * 1100 px va debajo de la escena (decisión de David, T12); hasta 700 px la escena se recorta al teléfono (4:5).
 * El recorrido (assets/css/insight-recorrido.css) lo inserta insight.js al acercarse a la sección.
 * ===================================================================== */
.vz-insight {
	border-top: 1px solid var(--wp--preset--color--superficie);
}

.vz-insight .vz-envoltura > *,
.vz-insight__pista > *,
.vz-insight__escena > *,
.vz-insight__texto > * {
	margin-block: 0;
}

.vz-insight__rotulo {
	width: fit-content;
	margin-bottom: 28px !important;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--superficie-media);
	border-radius: 999px;
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--turquesa);
	font-weight: 700;
	font-size: 0.78125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vz-insight__escena {
	position: relative;
	container-type: inline-size;
}

.vz-insight__marco {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--superficie-media);
	border-radius: 28px;
	background: var(--wp--preset--color--fondo);
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), 0 0 120px rgba(93, 201, 198, 0.08);
}

.vz-insight__poster,
.vz-insight__poster img,
.vz-insight__recorrido,
.vz-insight__marco video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.vz-insight__poster img,
.vz-insight__marco video {
	object-fit: cover;
}

.vz-insight__recorrido {
	overflow: hidden;
}

/* "Ejemplo ilustrativo": siempre visible (R4.4), en la esquina como en la maqueta. */
.vz-insight__ejemplo {
	position: absolute;
	top: 5cqw;
	left: 5.47cqw;
	z-index: 2;
	padding: 0.47cqw 0.94cqw;
	border: 1px solid var(--wp--preset--color--superficie-media);
	border-radius: 999px;
	color: var(--wp--preset--color--menta);
	font-size: 0.9375cqw;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* ---------- Texto sobre la escena (desde 701 px) ---------- */
.vz-insight__texto {
	position: absolute;
	top: 12.5cqw;
	left: 5.47cqw;
	z-index: 2;
	width: 43.75cqw;
}

.vz-insight__antetitulo {
	color: var(--wp--preset--color--turquesa);
	font-weight: 700;
	font-size: 1.0156cqw;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.vz-insight .vz-insight__titulo {
	margin: 1.09cqw 0 1.41cqw !important;
	color: var(--wp--preset--color--gris-claro);
	font-weight: 800;
	font-size: 4.22cqw;
	line-height: 1.05;
	letter-spacing: -0.02em;
}

.vz-insight__entradilla {
	max-width: 30em;
	margin-bottom: 2.03cqw !important;
	font-weight: 300;
	font-size: 1.64cqw;
	line-height: 1.45;
}

.vz-insight__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.78cqw;
	margin-bottom: 0.63cqw !important;
	padding: 0;
	list-style: none;
}

.vz-insight__chips li {
	margin: 0;
	padding: 0.7cqw 1.56cqw;
	border: 1px solid var(--wp--preset--color--superficie-media);
	border-radius: 999px;
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--gris-claro);
	font-weight: 700;
	font-size: 1.21cqw;
}

.vz-insight__nota {
	margin-bottom: 2.34cqw !important;
	color: var(--wp--preset--color--menta);
	font-size: 0.9cqw;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.vz-insight__botones {
	display: flex;
	flex-wrap: nowrap;
	gap: 1.09cqw;
}

.vz-insight__botones .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.78cqw;
	height: 4.22cqw;
	padding: 0 2.19cqw;
	font-size: 1.29cqw;
	white-space: nowrap;
	transition: transform 250ms var(--vz-curva);
}

.vz-insight__botones .is-style-outline .wp-block-button__link {
	border-width: 1.5px;
}

.vz-insight__botones .wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* ---------- Reproducción (insight.js, solo con movimiento permitido) ----------
 * Preparado: el recorrido ya está insertado y en su primer fotograma; el texto espera oculto, como en la
 * fuente, y aparece escalonado a partir de 5,1 s. Si el foco llega a un botón, el texto se muestra ya. */
@keyframes vz-insight-rv {
	from {
		opacity: 0;
		transform: translateY(22px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
	.vz-insight__escena.is-preparado:not(.es-video) .vz-insight__texto > * {
		opacity: 0;
	}

	.vz-insight__escena.is-reproduciendo:not(.es-video) .vz-insight__texto > * {
		animation: vz-insight-rv 0.9s var(--vz-curva) var(--vz-t, 5.1s) both;
	}

	.vz-insight__texto > :nth-child(1) {
		--vz-t: 5.1s;
	}

	.vz-insight__texto > :nth-child(2) {
		--vz-t: 5.25s;
	}

	.vz-insight__texto > :nth-child(3) {
		--vz-t: 5.4s;
	}

	.vz-insight__texto > :nth-child(4) {
		--vz-t: 5.6s;
	}

	.vz-insight__texto > :nth-child(5) {
		--vz-t: 5.7s;
	}

	.vz-insight__texto > :nth-child(6) {
		--vz-t: 5.9s;
	}

	.vz-insight__escena.is-preparado .vz-insight__texto:focus-within > * {
		opacity: 1;
		animation: none;
	}
}

/* Sin sticky ni pausa en escritorio (decisión de David, T12): el scroll nunca se fija; el recorrido se
   reproduce una vez mientras la escena está en pantalla. */

/* ---------- Móvil: escena recortada al teléfono (como .vid de la maqueta) ---------- */
@media (max-width: 700px) {
	.vz-insight__rotulo {
		margin-bottom: 20px !important;
	}

	.vz-insight__marco {
		aspect-ratio: 4 / 5;
		border-radius: 18px;
	}

	.vz-insight__poster img,
	.vz-insight__marco video {
		object-position: 100% 50%;
	}
}

/* ---------- Por debajo de 1100 px: texto debajo de la escena (como .vtx de la maqueta en móvil) ----------
 * Decisión de David (T12): en tablet el texto escalado con la escena quedaba de 6 a 9 px y no crecía con el zoom. */
@media (max-width: 1099px) {
	.vz-insight__ejemplo {
		top: 14px;
		left: 14px;
		padding: 5px 10px;
		background: rgba(14, 28, 21, 0.72);
		font-size: 0.6875rem;
	}

	.vz-insight__texto {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 14px;
		width: auto;
		margin-top: 26px !important;
	}

	.vz-insight__antetitulo {
		font-size: 0.75rem;
		letter-spacing: 0.14em;
	}

	.vz-insight .vz-insight__titulo {
		margin: 0 !important;
		font-size: 2.375rem;
	}

	.vz-insight__entradilla {
		margin: 0 !important;
		font-size: 1.0625rem;
		line-height: 1.55;
	}

	.vz-insight__chips {
		gap: 8px;
		margin: 2px 0 0 !important;
	}

	.vz-insight__chips li {
		padding: 6px 14px;
		background: transparent;
		color: var(--wp--preset--color--menta);
		font-weight: 600;
		font-size: 0.8125rem;
	}

	.vz-insight__nota {
		margin: 0 !important;
		color: var(--wp--preset--color--gris-verde);
		font-size: 0.75rem;
		letter-spacing: 0.1em;
	}

	.vz-insight__botones {
		flex-direction: column;
		gap: 12px;
		margin-top: 6px !important;
	}

	.vz-insight__botones .wp-block-button,
	.vz-insight__botones .wp-block-button__link {
		width: 100%;
	}

	.vz-insight__botones .wp-block-button__link {
		justify-content: center;
		height: auto;
		padding: 15px 24px;
		font-size: 1rem;
	}
}

/* Tablet (701 a 1099 px): texto debajo, con los botones en fila y una medida de línea cómoda. */
@media (min-width: 701px) and (max-width: 1099px) {
	.vz-insight__texto {
		max-width: 40em;
	}

	.vz-insight__botones {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.vz-insight__botones .wp-block-button,
	.vz-insight__botones .wp-block-button__link {
		width: auto;
	}
}

/* Respaldo en video (desde 1100 px): el texto pasa debajo, porque el video ya lo trae dibujado. */
@media (min-width: 1100px) {
	.vz-insight__escena.es-video .vz-insight__texto {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 14px;
		width: auto;
		margin-top: 26px !important;
	}

	.vz-insight__escena.es-video .vz-insight__texto * {
		font-size: 1rem;
	}

	.vz-insight__escena.es-video .vz-insight__titulo {
		font-size: 2.375rem !important;
	}

	.vz-insight__escena.es-video .vz-insight__botones .wp-block-button__link {
		height: auto;
		padding: 15px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vz-insight__botones .wp-block-button__link {
		transition: none;
	}

	.vz-insight__botones .wp-block-button__link:hover {
		transform: none;
	}
}

/* =====================================================================
 * Pilares: "Cómo elevamos tu empresa" (T13). Maqueta: .pl, .pg, .pc, .seal, .bdg y .cta.
 * HTML en orden 01 a 04 (D20). Desde 1001 px, la lista usa la rejilla de la sección (subgrid) con
 * grid-auto-flow: column: 01 y 02 en la primera columna, 03 y 04 en la segunda, como la maqueta.
 * Hasta 1000 px, una columna (corte de la maqueta).
 * ===================================================================== */
.vz-pilares {
	padding-block: clamp(4.5rem, 8.5vw, 7rem) clamp(6.875rem, 11vw, 9.75rem);
}

.vz-pilares__rejilla > *,
.vz-pilares__intro > *,
.vz-pilares__lista > *,
.vz-pilar > *,
.vz-pilar__rotulos > * {
	margin-block: 0;
}

.vz-pilares__rejilla {
	display: grid;
	grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr) minmax(0, 1.5fr);
	grid-template-rows: auto auto auto;
	gap: 34px 30px;
}

.vz-pilares__intro {
	display: flex;
	grid-row: 1 / 3;
	flex-direction: column;
	gap: 26px;
	padding-right: 20px;
}

.vz-pilares__intro .vz-antetitulo {
	margin-bottom: -6px !important;
}

.vz-pilares .vz-pilares__titulo {
	font-weight: 800;
	font-size: clamp(2rem, 3.3vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
}

/* "tu empresa" resaltado: franja turquesa detrás del texto (#1A3F3E sobre #5DC9C6: 5,7:1). */
.vz-pilares__resaltado {
	padding: 0 2px;
	background: linear-gradient(180deg, transparent 62%, var(--wp--preset--color--turquesa) 62%, var(--wp--preset--color--turquesa) 92%, transparent 92%);
	color: inherit;
	white-space: nowrap;
}

.vz-pilares__entradilla {
	max-width: 20em;
	color: var(--wp--preset--color--verde-azulado);
	font-size: 1.1875rem;
}

.vz-pilares__entradilla strong {
	font-weight: 700;
}

/* La lista ocupa las columnas 2 y 3 y las filas 1 y 2 de la sección; sus tarjetas, por columnas. */
.vz-pilares__lista {
	display: grid;
	grid-column: 2 / 4;
	grid-row: 1 / 3;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr);
	grid-template-rows: auto auto;
	grid-auto-flow: column;
	gap: 34px 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@supports (grid-template-columns: subgrid) {
	.vz-pilares__lista {
		grid-template-columns: subgrid;
		grid-template-rows: subgrid;
	}
}

/* ---------- Tarjeta ---------- */
.vz-pilar {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 28px 28px;
	border: 1px solid var(--wp--preset--color--borde-tarjeta);
	border-radius: 10px;
	background: var(--wp--preset--color--blanco);
	color: var(--wp--preset--color--fondo);
	transition: transform 450ms var(--vz-curva);
}

/* Hover: borde y sombra en una capa aparte; se anima su opacidad. */
.vz-pilar::after {
	content: "";
	position: absolute;
	inset: -1px;
	border: 1px solid var(--wp--preset--color--verde-azulado);
	border-radius: inherit;
	box-shadow: 0 26px 40px -30px rgba(3, 36, 20, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 300ms;
}

.vz-pilar:hover::after {
	opacity: 1;
}

.vz-pilar--oscuro {
	--vz-foco: var(--wp--custom--color--foco-oscuro, #5DC9C6);
	border-color: var(--wp--preset--color--verde-bosque);
	background: linear-gradient(160deg, var(--wp--preset--color--verde-profundo), var(--wp--preset--color--verde-bosque));
	color: var(--wp--preset--color--gris-claro);
}

.vz-pilar__rotulos {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: flex-start;
	gap: 8px;
}

.vz-pilar__paso {
	padding: 7px 12px;
	border-left: 3px solid var(--wp--preset--color--turquesa);
	background: var(--wp--preset--color--claro-rotulo);
	color: var(--wp--preset--color--verde-azulado);
	font-weight: 700;
	font-size: 0.71875rem;
	letter-spacing: 0.14em;
}

.vz-pilar--oscuro .vz-pilar__paso {
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--menta);
}

.vz-pilar--oscuro .vz-pilar__paso--meta {
	border-color: var(--wp--preset--color--menta);
	color: var(--wp--preset--color--gris-claro);
}

.vz-pilares .vz-pilar__titulo {
	margin-top: 8px !important;
	color: var(--wp--preset--color--verde-azulado);
	font-weight: 800;
	font-size: clamp(2rem, 3.2vw, 2.875rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
}

.vz-pilares .vz-pilar--oscuro .vz-pilar__titulo {
	color: var(--wp--preset--color--turquesa);
}

.vz-pilar__frase {
	color: var(--wp--preset--color--verde-hoja);
	font-weight: 700;
	font-size: 1.03125rem;
}

.vz-pilar--oscuro .vz-pilar__frase {
	color: var(--wp--preset--color--menta);
}

.vz-pilar__puntos {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px !important;
	padding: 0;
	list-style: none;
}

.vz-pilar__puntos li {
	display: flex;
	gap: 12px;
	margin: 0;
	font-size: 1rem;
	line-height: 1.4;
}

/* Flecha de cada punto: decorativa (texto alternativo vacío para lectores de pantalla). */
.vz-pilar__puntos li::before {
	content: "→";
	content: "→" / "";
	flex: none;
	color: var(--wp--preset--color--verde-hoja);
	font-weight: 700;
}

.vz-pilar--oscuro .vz-pilar__puntos li::before {
	color: var(--wp--preset--color--turquesa);
}

/* ---------- Flechas guía 01→02→03→04 (decorativas, solo con la rejilla de dos columnas) ---------- */
.vz-pilar--01::before,
.vz-pilar--02::before,
.vz-pilar--03::before {
	position: absolute;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--turquesa);
	box-shadow: 0 0 0 6px var(--wp--preset--color--claro-aro);
	color: var(--wp--preset--color--verde-bosque);
	font-weight: 800;
	font-size: 1.125rem;
}

/* 01 → 02 y 03 → 04: hacia abajo, centradas en el hueco entre filas. */
.vz-pilar--01::before,
.vz-pilar--03::before {
	content: "↓";
	content: "↓" / "";
	bottom: -37px;
	left: 50%;
	transform: translateX(-50%);
}

/* 02 → 03: hacia arriba a la derecha, en el cruce entre columnas. */
.vz-pilar--02::before {
	content: "↗";
	content: "↗" / "";
	top: -37px;
	right: -35px;
}

/* ---------- Sello giratorio de Implementar (decorativo) ---------- */
.vz-pilar__sello {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 104px;
	height: 104px;
	color: var(--wp--preset--color--verde-azulado);
	pointer-events: none;
}

/* ---------- Botón ancho hacia contacto ---------- */
.vz-pilares__cta {
	grid-column: 2 / 4;
}

.vz-pilares .vz-pilares__cta a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px 36px;
	border-radius: 10px;
	background: var(--wp--preset--color--verde-azulado);
	color: var(--wp--preset--color--gris-claro);
	font-weight: 800;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: transform 350ms var(--vz-curva), background-color 300ms;
}

.vz-pilares .vz-pilares__cta a:hover {
	background: var(--wp--preset--color--verde-bosque);
	transform: translateY(-3px);
}

.vz-pilares__cta-flecha {
	display: grid;
	flex: none;
	place-items: center;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: var(--wp--preset--color--turquesa);
	color: var(--wp--preset--color--verde-bosque);
	font-size: 1.75rem;
}

/* ---------- Movimiento ---------- */
@keyframes vz-giro {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.vz-pilar:hover {
		transform: translateY(-4px);
	}

	.vz-pilar__sello {
		animation: vz-giro 28s linear infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vz-pilar,
	.vz-pilar::after,
	.vz-pilares .vz-pilares__cta a {
		transition: none;
	}

	.vz-pilares .vz-pilares__cta a:hover {
		transform: none;
	}
}

/* ---------- De 1001 a 1099 px: la columna de Implementar es estrecha y el sello de la maqueta tapaba
   el final del título (medido a 1024 px). Mismo arreglo que en móvil (T5): sello de 88 px arriba a la
   derecha y la fila de rótulos reserva su alto, así el título empieza debajo. ---------- */
@media (min-width: 1001px) and (max-width: 1099px) {
	.vz-pilar__sello {
		top: 10px;
		right: 10px;
		width: 88px;
		height: 88px;
	}

	.vz-pilar--03 .vz-pilar__rotulos {
		min-height: 60px;
		padding-right: 96px;
	}
}

/* ---------- Hasta 1000 px: una columna, en orden 01 a 04 y sin flechas guía ---------- */
@media (max-width: 1000px) {
	.vz-pilares__rejilla {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.vz-pilares__intro {
		grid-row: auto;
		padding-right: 0;
	}

	.vz-pilares__lista {
		display: flex;
		grid-column: auto;
		grid-row: auto;
		flex-direction: column;
		gap: 34px;
	}

	.vz-pilar--01::before,
	.vz-pilar--02::before,
	.vz-pilar--03::before {
		display: none;
	}

	.vz-pilares__cta {
		grid-column: auto;
	}
}

/* ---------- Móvil (maqueta ≤700 px, con los ajustes de T5) ---------- */
@media (max-width: 700px) {
	.vz-pilares__rejilla {
		gap: 18px;
	}

	.vz-pilares__intro {
		gap: 18px;
	}

	.vz-pilares .vz-pilares__titulo {
		font-size: 2.25rem;
	}

	.vz-pilares__lista {
		gap: 18px;
	}

	.vz-pilar {
		padding: 22px 20px;
	}

	.vz-pilares .vz-pilar__titulo {
		font-size: 2.125rem;
	}

	/* T5: sello de 88 px en la esquina superior derecha, a la altura del rótulo "PASO 03". La fila de
	   rótulos de Implementar reserva su alto, así el título empieza debajo del sello y nunca lo toca. */
	.vz-pilar__sello {
		top: 10px;
		right: 10px;
		width: 88px;
		height: 88px;
	}

	.vz-pilar--03 .vz-pilar__rotulos {
		min-height: 64px;
		padding-right: 96px;
	}

	.vz-pilares .vz-pilares__cta a {
		padding: 22px;
		font-size: 1.375rem;
	}

	/* T5: la flecha no se aplasta (flex: none) y es un círculo de 52 x 52 px. */
	.vz-pilares__cta-flecha {
		width: 52px;
		height: 52px;
		font-size: 1.375rem;
	}
}

/* =====================================================================
 * Cierre: "De la necesidad a la solución" (T14a). Maqueta: .cl, .ph2, .gr, .lf, .rp y .ch.
 * La foto ocupa todo el ancho y se funde hacia el oscuro; debajo, el texto a la izquierda y la lista
 * en un panel que llega al borde derecho. El margen izquierdo es el de la envoltura común (T5: 20 px en
 * móvil), calculado sobre el ancho de la sección (cqw) y no de la ventana, para no contar la barra de scroll.
 * Hasta 1000 px, una columna (corte de la maqueta).
 * ===================================================================== */
.vz-cierre {
	container-type: inline-size;
	padding-block: 0 44px;
}

.vz-cierre > *,
.vz-cierre__rejilla > *,
.vz-cierre__texto > *,
.vz-cierre__panel > * {
	margin-block: 0;
}

/* ---------- Foto ---------- */
.vz-cierre__foto {
	position: relative;
	height: min(520px, 38vw);
	min-height: 300px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--vz-corte) var(--vz-corte) 0 0;
	-webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
}

.vz-cierre__foto picture,
.vz-cierre__foto img {
	width: 100%;
	height: 100%;
}

.vz-cierre__foto img {
	object-fit: cover;
	object-position: 50% 28%;
	transform: scale(1.04);
}

/* Velo hacia el verde, como .ph2::after de la maqueta. */
.vz-cierre__foto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(3, 36, 20, 0.55) 0%, rgba(3, 36, 20, 0.12) 45%, rgba(3, 36, 20, 0.35) 100%),
		linear-gradient(180deg, rgba(14, 28, 21, 0.55) 0%, transparent 28%);
}

@keyframes vz-zoom-lento {
	from {
		transform: scale(1.04);
	}

	to {
		transform: scale(1.1) translateX(-1%);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.vz-cierre__foto img {
		animation: vz-zoom-lento 22s ease-in-out infinite alternate;
	}
}

/* ---------- Texto y panel ---------- */
.vz-cierre__rejilla {
	--vz-margen: max(var(--vz-lateral), calc((100cqw - var(--vz-ancho-max)) / 2 + var(--vz-lateral)));
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 560px;
	margin-top: -90px !important;
}

.vz-cierre__texto {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 22px;
	padding: 70px 56px 80px var(--vz-margen);
}

.vz-cierre .vz-cierre__titulo {
	color: var(--wp--preset--color--gris-claro);
	font-weight: 800;
	font-size: clamp(3.25rem, 6.4vw, 6.25rem);
	line-height: 1;
	letter-spacing: -0.035em;
}

.vz-cierre__titulo em {
	color: var(--wp--preset--color--turquesa);
	font-style: normal;
}

.vz-cierre__frase-1 {
	color: var(--wp--preset--color--gris-claro);
	font-size: 1.3125rem;
}

.vz-cierre__frase-2 {
	margin-top: -10px !important;
	color: var(--wp--preset--color--gris-verde);
	font-size: 1.1875rem;
}

.vz-cierre__botones .wp-block-button__link {
	padding: 16px 30px;
	font-size: 1.0625rem;
	transition: transform 250ms var(--vz-curva);
}

.vz-cierre__botones .wp-block-button__link:hover {
	transform: translateY(-2px);
}

.vz-cierre__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 72px var(--vz-margen) 64px 56px;
	border-top: 1px solid var(--wp--preset--color--superficie-media);
	border-left: 1px solid var(--wp--preset--color--superficie-media);
	border-radius: 44px 0 0 0;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		radial-gradient(560px 340px at 88% 0%, rgba(93, 201, 198, 0.2), transparent 70%),
		linear-gradient(160deg, var(--wp--preset--color--verde-azulado) 0%, var(--wp--preset--color--verde-profundo) 55%, var(--wp--preset--color--verde-bosque) 100%);
}

/* ---------- Lista de siete frases ---------- */
.vz-cierre__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vz-cierre__lista li {
	margin: 0;
	border-bottom: 1px solid rgba(170, 217, 205, 0.18);
}

.vz-cierre__lista li:first-child {
	border-top: 1px solid rgba(170, 217, 205, 0.18);
}

.vz-cierre .vz-cierre__lista a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 21px 4px;
	color: var(--wp--preset--color--gris-claro);
	font-weight: 500;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.vz-cierre__frase strong {
	color: var(--wp--preset--color--turquesa);
	font-weight: 700;
}

.vz-cierre__flecha {
	flex: none;
	color: var(--wp--preset--color--turquesa);
	font-size: 1.375rem;
}

@media (prefers-reduced-motion: no-preference) {
	.vz-cierre__frase,
	.vz-cierre__flecha {
		transition: transform 350ms var(--vz-curva);
	}

	.vz-cierre__lista a:hover .vz-cierre__frase,
	.vz-cierre__lista a:focus-visible .vz-cierre__frase {
		transform: translateX(8px);
	}

	.vz-cierre__lista a:hover .vz-cierre__flecha,
	.vz-cierre__lista a:focus-visible .vz-cierre__flecha {
		transform: translateX(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vz-cierre__botones .wp-block-button__link {
		transition: none;
	}

	.vz-cierre__botones .wp-block-button__link:hover {
		transform: none;
	}
}

/* ---------- Hasta 1000 px: una columna ---------- */
@media (max-width: 1000px) {
	.vz-cierre__rejilla {
		grid-template-columns: minmax(0, 1fr);
	}

	.vz-cierre__texto {
		padding: 72px var(--vz-margen) 48px;
	}

	.vz-cierre__panel {
		padding-left: var(--vz-margen);
		border-radius: 44px 44px 0 0;
	}
}

/* ---------- Móvil ---------- */
@media (max-width: 700px) {
	.vz-cierre {
		padding-bottom: 28px;
	}

	.vz-cierre__foto {
		height: 260px;
		min-height: 0;
	}

	.vz-cierre__foto img {
		object-position: 38% 30%;
	}

	.vz-cierre__rejilla {
		min-height: 0;
		margin-top: -50px !important;
	}

	.vz-cierre .vz-cierre__titulo {
		font-size: 3rem;
	}

	.vz-cierre__frase-1 {
		font-size: 1.1875rem;
	}

	.vz-cierre__panel {
		padding: 36px var(--vz-margen) 40px;
		border-radius: var(--vz-corte) var(--vz-corte) 0 0;
	}

	.vz-cierre .vz-cierre__lista a {
		padding: 18px 2px;
		font-size: 1.25rem;
	}
}

/* =====================================================================
 * Contacto (T14b, vista). Maqueta: .fm, .gr2, form, .rd, .ck, .si, .ch2 e .ic.
 * Bordes de campos y radios en #365D52 (aprobado en T3, en lugar del #B4C4B9 de la maqueta); el foco
 * nunca se quita: anillo de 2 + 2 px (T4) además del cambio de borde.
 * ===================================================================== */
.vz-contacto {
	padding-block: clamp(4.5rem, 8.5vw, 7rem);
}

.vz-contacto__rejilla > *,
.vz-contacto__formulario > *,
.vz-contacto__canales > * {
	margin-block: 0;
}

.vz-contacto__rejilla {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 32px;
}

/* ---------- Tarjeta blanca ---------- */
.vz-contacto__formulario {
	display: flex;
	flex: 3 1 520px;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
	padding: 40px;
	border: 1px solid var(--wp--preset--color--borde-tarjeta);
	border-radius: 26px;
	box-shadow: 0 30px 50px -36px rgba(3, 36, 20, 0.45);
}

.vz-contacto__formulario .vz-antetitulo {
	margin-bottom: -6px !important;
}

.vz-contacto .vz-contacto__titulo {
	color: var(--wp--preset--color--verde-azulado);
	font-weight: 800;
	font-size: clamp(1.75rem, 3.4vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.vz-formulario {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.vz-formulario {
	position: relative;
}

.vz-formulario > *,
.vz-formulario p {
	margin: 0;
}

/* Regiones anunciadas (estado y error): siempre en el documento, aunque vacías, para que los lectores de
   pantalla las anuncien al llenarse. */
.vz-formulario__regiones {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vz-formulario__fila {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.vz-formulario__fila .vz-campo {
	flex: 1 1 220px;
}

.vz-campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.vz-campo label,
.vz-formulario__linea legend {
	color: var(--wp--preset--color--verde-azulado);
	font-weight: 600;
	font-size: 0.90625rem;
}

.vz-campo input,
.vz-campo textarea {
	width: 100%;
	min-height: 48px;
	padding: 13px 14px;
	border: 1.5px solid var(--wp--custom--color--borde-campo, #365D52);
	border-radius: 12px;
	background: var(--wp--preset--color--campo);
	color: var(--wp--preset--color--fondo);
	font-size: 1rem;
	transition: border-color 200ms, background-color 200ms;
}

.vz-campo textarea {
	resize: vertical;
}

.vz-campo input:focus,
.vz-campo textarea:focus {
	border-color: var(--wp--preset--color--verde-azulado);
	background: var(--wp--preset--color--blanco);
}

/* Línea de interés: radios como botones; el radio real sigue en su sitio (invisible) para teclado y lector. */
.vz-formulario__linea {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
}

.vz-formulario__linea legend {
	margin-bottom: 10px;
	padding: 0;
}

.vz-opcion {
	position: relative;
	display: flex;
	cursor: pointer;
}

.vz-opcion input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.vz-opcion span {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	border: 1.5px solid var(--wp--custom--color--borde-campo, #365D52);
	border-radius: 999px;
	color: var(--wp--preset--color--verde-azulado);
	font-weight: 700;
	font-size: 0.875rem;
	transition: background-color 200ms, color 200ms, border-color 200ms;
}

.vz-opcion:hover span {
	border-color: var(--wp--preset--color--verde-azulado);
}

.vz-opcion input:checked + span {
	border-color: var(--wp--preset--color--verde-azulado);
	background: var(--wp--preset--color--verde-azulado);
	color: var(--wp--preset--color--blanco);
}

.vz-opcion input:focus-visible + span {
	outline: 2px solid var(--vz-foco);
	outline-offset: 2px;
}

.vz-formulario__acepto {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--wp--preset--color--fondo);
	font-size: 0.9375rem;
}

.vz-formulario__acepto input {
	flex: none;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--verde-azulado);
}

.vz-formulario__enviar {
	min-height: 48px;
	padding: 16px 34px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--verde-azulado);
	color: var(--wp--preset--color--gris-claro);
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer;
	transition: transform 250ms var(--vz-curva), background-color 200ms;
}

.vz-formulario__enviar:not(:disabled):hover {
	background: var(--wp--preset--color--verde-bosque);
	transform: translateY(-2px);
}

/* ---------- Estados del formulario (T16) ----------
 * La paleta no tiene un rojo apto para fondos claros (el #F0605D es solo para Insight sobre oscuro), así
 * que el error no depende del color: texto propio en negrita, icono y borde grueso del campo. */
.vz-formulario__nota {
	color: var(--wp--preset--color--verde-azulado);
	font-size: 0.875rem;
}

.vz-campo__obligatorio {
	color: var(--wp--preset--color--verde-hoja);
	font-weight: 700;
}

/* Campo trampa: fuera de la vista y del orden de Tab; lo llenan los robots, no las personas. */
.vz-formulario__trampa {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.vz-campo [aria-invalid="true"],
.vz-formulario__acepto [aria-invalid="true"] {
	border-width: 2.5px;
	border-color: var(--wp--preset--color--fondo);
}

.vz-campo__error {
	display: flex;
	gap: 6px;
	margin: 6px 0 0 !important;
	color: var(--wp--preset--color--fondo);
	font-weight: 700;
	font-size: 0.875rem;
}

.vz-campo__error::before {
	content: "⚠";
	content: "⚠" / "";
	flex: none;
}

.vz-formulario__resumen,
.vz-formulario__error:not(:empty),
.vz-formulario__estado:not(:empty) {
	padding: 14px 18px;
	border-left: 4px solid var(--wp--preset--color--verde-azulado);
	border-radius: 8px;
	background: var(--wp--preset--color--claro-1);
	color: var(--wp--preset--color--fondo);
}

.vz-formulario__resumen[hidden] {
	display: none;
}

.vz-formulario__resumen-titulo {
	font-weight: 700;
}

.vz-formulario__resumen ul {
	margin: 6px 0 0;
	padding-left: 20px;
}

.vz-formulario__resumen a,
.vz-formulario__error a,
.vz-formulario__sinjs a {
	color: var(--wp--preset--color--verde-azulado);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vz-formulario__estado:not(:empty) {
	border-left-color: var(--wp--preset--color--verde-hoja);
	font-weight: 700;
}

.vz-formulario__error > * + *,
.vz-formulario__sinjs > * + * {
	margin-top: 8px !important;
}

/* "Continuar por WhatsApp" tras un envío correcto: mismo estilo que "Enviar" (gris claro sobre verde azulado). */
.vz-formulario__continuar {
	margin: 0;
}

.vz-formulario__continuar-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 30px;
	border-radius: 999px;
	background: var(--wp--preset--color--verde-azulado);
	color: var(--wp--preset--color--gris-claro);
	font-weight: 800;
	font-size: 1rem;
	text-decoration: none;
	transition: transform 250ms var(--vz-curva), background-color 200ms;
}

.vz-formulario__continuar-boton:hover {
	background: var(--wp--preset--color--verde-bosque);
	color: var(--wp--preset--color--gris-claro);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.vz-formulario__continuar-boton {
		transition: none;
	}

	.vz-formulario__continuar-boton:hover {
		transform: none;
	}
}

/* Enlaces de alternativa con objetivo táctil de 44 px. */
.vz-formulario__alternativas a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-right: 14px;
}

.vz-formulario__sinjs {
	padding: 18px 20px;
	border-left: 4px solid var(--wp--preset--color--verde-azulado);
	border-radius: 8px;
	background: var(--wp--preset--color--claro-1);
	color: var(--wp--preset--color--fondo);
}

.vz-formulario__acepto a {
	color: var(--wp--preset--color--verde-azulado);
	text-decoration: underline;
}

/* Hasta T16 el envío está desactivado (T7b): el botón se ve inactivo y un aviso remite a WhatsApp y teléfono. */
.vz-formulario__enviar:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.vz-formulario__aviso {
	color: var(--wp--preset--color--verde-azulado);
	font-size: 0.9375rem;
}

/* ---------- Tarjeta oscura de canales ---------- */
.vz-contacto__canales {
	display: flex;
	flex: 2 1 320px;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 36px 32px;
	border: 1px solid var(--wp--preset--color--superficie-media);
	border-radius: 26px;
	background:
		radial-gradient(420px 260px at 100% 0%, rgba(93, 201, 198, 0.2), transparent 70%),
		linear-gradient(160deg, var(--wp--preset--color--verde-azulado) 0%, var(--wp--preset--color--verde-profundo) 55%, var(--wp--preset--color--verde-bosque) 100%);
	box-shadow: 0 30px 50px -36px rgba(3, 36, 20, 0.6);
}

.vz-contacto .vz-contacto__canales-titulo {
	margin-bottom: 6px !important;
	color: var(--wp--preset--color--gris-claro);
	font-weight: 800;
	font-size: 1.75rem;
	letter-spacing: -0.01em;
}

.vz-canales {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vz-canales li {
	margin: 0;
}

.vz-contacto .vz-canales a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border: 1px solid rgba(170, 217, 205, 0.2);
	border-radius: 16px;
	color: var(--wp--preset--color--gris-claro);
	font-weight: 700;
	font-size: 1.0625rem;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: border-color 250ms, background-color 250ms, transform 350ms var(--vz-curva);
}

.vz-contacto .vz-canales a:hover {
	border-color: var(--wp--preset--color--turquesa);
	background: rgba(93, 201, 198, 0.08);
}

.vz-canal__icono {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--wp--preset--color--turquesa);
	border-radius: 50%;
	color: var(--wp--preset--color--turquesa);
}

.vz-canal__nombre {
	display: block;
	color: var(--wp--preset--color--menta);
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.vz-contacto__logo {
	align-self: flex-start;
	width: auto;
	height: 54px;
	margin-top: auto !important;
	opacity: 0.95;
}

@media (prefers-reduced-motion: no-preference) {
	.vz-contacto .vz-canales a:hover {
		transform: translateX(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vz-campo input,
	.vz-campo textarea,
	.vz-opcion span,
	.vz-formulario__enviar,
	.vz-contacto .vz-canales a {
		transition: none;
	}

	.vz-formulario__enviar:hover {
		transform: none;
	}
}

@media (max-width: 700px) {
	.vz-contacto {
		padding-block: 72px 70px;
	}

	.vz-contacto__formulario {
		padding: 24px 20px;
		border-radius: 20px;
	}

	.vz-contacto .vz-contacto__titulo {
		font-size: 1.875rem;
	}

	.vz-contacto__canales {
		padding: 26px 20px;
		border-radius: 20px;
	}

	.vz-contacto .vz-contacto__canales-titulo {
		font-size: 1.5rem;
	}

	.vz-contacto .vz-canales a {
		padding: 12px 14px;
		font-size: 1rem;
	}
}

/* =====================================================================
 * Revelado al entrar en pantalla (revelado.js; design.md 4.1 y R9.3).
 * Bloques con la clase `vz-revela` y filas de las listas `vz-revelar-lista`. El estado oculto solo existe
 * con la clase `is-espera`, que pone el script a lo que aún está fuera de la pantalla: sin JavaScript, si
 * tarda, con movimiento reducido o al imprimir, todo se ve. Solo opacity y transform (no mueve el diseño).
 * No se aplica al héroe, a Insight ni a las tarjetas del carrusel, que tienen su propio movimiento.
 * ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.vz-revela.is-espera,
	.vz-revelar-lista.is-espera > li {
		opacity: 0;
		transform: translateY(26px);
	}

	/* La transición solo dura lo que dura el revelado; luego el script la quita para no pisar el hover. */
	.vz-revela.is-revelando,
	.vz-revelar-lista.is-revelando > li {
		transition: opacity 700ms var(--vz-curva), transform 700ms var(--vz-curva);
		transition-delay: calc(var(--vz-i, 0) * 90ms);
	}
}

@media print {
	.vz-revela.is-espera,
	.vz-revelar-lista.is-espera > li {
		opacity: 1 !important;
		transform: none !important;
	}
}