/* ==========================================================================
   Identidad corporativa Vitalnet (manual de marca)
   Paleta: #0d0c38 · #332d7a · #5e58dc · #ffffff · acento verde #19844f → #98bf8e
   Tipografía: Manrope (200–800)
   ========================================================================== */

/* --- Tipografía ----------------------------------------------------------
   Manrope variable, servida desde el tema hijo (subconjunto latino: incluye
   tildes y ñ). El tema padre fija "GTWalsheimPro", "Public Sans" y "Barlow"
   en cientos de reglas (varias con !important); en lugar de reescribirlas,
   esos nombres de familia se redefinen aquí para que apunten a Manrope.
   Los @font-face de GTWalsheimPro repiten los mismos pesos del tema padre
   para que, al cargarse después, sustituyan a los originales.
   ------------------------------------------------------------------------- */
@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-variable-latin.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face { font-family: "GTWalsheimPro"; src: url("../fonts/manrope-variable-latin.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "GTWalsheimPro"; src: url("../fonts/manrope-variable-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GTWalsheimPro"; src: url("../fonts/manrope-variable-latin.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GTWalsheimPro"; src: url("../fonts/manrope-variable-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "GTWalsheimPro"; src: url("../fonts/manrope-variable-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "GTWalsheimPro"; src: url("../fonts/manrope-variable-latin.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

@font-face {
	font-family: "Public Sans";
	src: url("../fonts/manrope-variable-latin.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Barlow";
	src: url("../fonts/manrope-variable-latin.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* --- Tokens de marca ----------------------------------------------------- */
:root {
	--vn-noche: #0d0c38;
	--vn-morado-profundo: #332d7a;
	--vn-morado: #5e58dc;
	--vn-blanco: #ffffff;
	--vn-verde: #19844f;
	--vn-verde-claro: #98bf8e;
	--vn-degradado: linear-gradient(135deg, var(--vn-morado-profundo) 0%, var(--vn-morado) 100%);
	--vn-degradado-verde: linear-gradient(90deg, var(--vn-verde) 0%, var(--vn-verde-claro) 100%);
	--vn-fuente: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body,
button,
input,
select,
textarea {
	font-family: var(--vn-fuente);
}

/* --- Botón de acento (verde) -----------------------------------------------
   El manual usa el degradado verde en los llamados a la acción. Con texto
   blanco, el verde claro (#98bf8e) no tiene contraste suficiente, así que el
   botón usa el verde oscuro de base y el degradado solo aparece al pasar el
   cursor. Uso: añadir la clase "vn-cta-verde" al botón en Elementor.
   ------------------------------------------------------------------------- */
.vn-cta-verde .btn,
.vn-cta-verde .elementor-button,
a.vn-cta-verde,
button.vn-cta-verde {
	background: var(--vn-verde) !important;
	color: var(--vn-blanco) !important;
	border-color: transparent !important;
	transition: background-position .3s ease;
}

.vn-cta-verde .btn:hover,
.vn-cta-verde .elementor-button:hover,
a.vn-cta-verde:hover,
button.vn-cta-verde:hover {
	background: var(--vn-verde) var(--vn-degradado-verde) !important;
	color: var(--vn-blanco) !important;
}

/* Selección de texto y foco con los colores de marca. */
::selection {
	background: var(--vn-morado);
	color: var(--vn-blanco);
}

:focus-visible {
	outline: 2px solid var(--vn-morado);
	outline-offset: 2px;
}

/* ==========================================================================
   Rediseño (fase 4): estética moderna y sobria sobre los widgets del tema.
   ========================================================================== */
:root {
	--vn-tinta: #1d1b45;
	--vn-texto: #55536f;
	--vn-borde: rgba(51, 45, 122, .1);
	--vn-tinte: #f3f2fd;
	--vn-radio: 16px;
	--vn-radio-sm: 10px;
	--vn-sombra: 0 1px 2px rgba(13, 12, 56, .04), 0 8px 24px -8px rgba(13, 12, 56, .1);
	--vn-sombra-alta: 0 2px 4px rgba(13, 12, 56, .04), 0 24px 48px -16px rgba(51, 45, 122, .25);
	--vn-curva: cubic-bezier(.2, .7, .2, 1);
}

body {
	color: var(--vn-texto);
}

/* --- Cabecera de escritorio ---------------------------------------------
   Una sola fila (logo | menú | acciones) que queda fija al hacer scroll y
   pasa a fondo translúcido con desenfoque (clase body.vn-scrolled).
   ------------------------------------------------------------------------- */
#pxl-header-elementor {
	position: sticky;
	top: 0;
	z-index: 999;
}

.admin-bar #pxl-header-elementor {
	top: 32px;
}

#pxl-header-elementor .vn-header {
	background: rgba(255, 255, 255, .96) !important;
	border-bottom: 1px solid transparent;
	transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.vn-scrolled #pxl-header-elementor .vn-header {
	background: rgba(255, 255, 255, .82) !important;
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom-color: var(--vn-borde);
	box-shadow: 0 10px 30px -18px rgba(13, 12, 56, .35);
}

/* La sección venía con overflow oculto, que recortaba el desplegable. */
.vn-header,
.vn-header .vn-header-bar,
.vn-header .vn-h-nav {
	overflow: visible !important;
}

.vn-header .vn-header-bar > .elementor-container {
	min-height: 84px;
	align-items: center;
	padding: 0 24px;
}

.vn-header .vn-header-bar > .elementor-container > .elementor-column > .elementor-widget-wrap {
	align-items: center;
	align-content: center;
	padding-top: 0;
	padding-bottom: 0;
}

.vn-header .vn-h-logo .pxl-logo img {
	max-height: 44px;
	width: auto;
}

.vn-header .vn-h-nav > .elementor-widget-wrap {
	justify-content: center;
}

/* La columna del menú ocupa el espacio que dejan el logo y los botones (Elementor le fija un % que,
   en algunos anchos, partía los textos del menú en varias líneas). */
.vn-header .elementor-section.vn-header-bar {
	padding-left: 0;
	padding-right: 0;
}

.vn-header .vn-header-bar > .elementor-container {
	max-width: min(1400px, calc(100% - 48px));
}

.vn-header .vn-header-bar > .elementor-container > .elementor-column.vn-h-nav {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.vn-header .vn-header-bar > .elementor-container > .elementor-column.vn-h-logo,
.vn-header .vn-header-bar > .elementor-container > .elementor-column.vn-h-actions {
	flex: 0 0 auto;
	width: auto;
}

.vn-header .vn-h-actions > .elementor-widget-wrap {
	justify-content: flex-end;
	gap: 14px;
	flex-wrap: nowrap;
}

.vn-header .vn-h-actions .elementor-widget {
	margin-bottom: 0 !important;
}

/* Menú principal: texto compacto con subrayado en degradado. */
.vn-header .pxl-nav-menu .pxl-menu-primary {
	display: flex;
	align-items: center;
	gap: 6px;
}

.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li {
	margin: 0;
}

.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li > a {
	position: relative;
	line-height: 84px;
	padding: 0 12px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -.01em;
	white-space: nowrap;
	color: var(--vn-tinta);
	transition: color .2s ease;
}

@media (min-width: 1200px) and (max-width: 1440px) {
	.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li > a {
		padding: 0 9px;
		font-size: 14.5px;
	}
}

.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li > a:before {
	top: auto;
	bottom: 24px;
	left: 12px;
	right: 12px;
	width: auto;
	height: 2px;
	border-radius: 2px;
	background: var(--vn-degradado);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s var(--vn-curva);
}

.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li:hover > a,
.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li.current-menu-item > a,
.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li.current-menu-ancestor > a {
	color: var(--vn-morado);
}

.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li:hover > a:before,
.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li.current-menu-item > a:before,
.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li.current-menu-ancestor > a:before,
.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li.current_page_item > a:before,
.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li.current_page_ancestor > a:before {
	width: auto;
	transform: scaleX(1);
}

/* El llamado a la acción del menú solo se muestra en el menú móvil. */
.vn-header .vn-menu-cta {
	display: none !important;
}

/* Flecha en los elementos con submenú. */
.vn-header .pxl-menu-primary > li.menu-item-has-children > a .pxl-menu-item-text:after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 0 3px 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .3s var(--vn-curva), margin .3s var(--vn-curva);
}

.vn-header .pxl-menu-primary > li.menu-item-has-children:hover > a .pxl-menu-item-text:after {
	transform: rotate(-135deg);
	margin-bottom: -1px;
}

/* Desplegable de Soluciones: tarjeta con icono, título y descripción. */
.vn-header .pxl-menu-primary > li > .sub-menu {
	left: 50%;
	min-width: 360px;
	padding: 10px;
	margin-top: 14px;
	border: 1px solid var(--vn-borde);
	border-radius: var(--vn-radio);
	background: #fff;
	box-shadow: var(--vn-sombra-alta);
	transform: translate(-50%, 0);
	transition: opacity .25s ease, visibility .25s ease, margin .3s var(--vn-curva);
}

.vn-header .pxl-menu-primary > li > .sub-menu:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -16px;
	height: 16px;
}

.vn-header .pxl-menu-primary > li:hover > .sub-menu {
	margin-top: 0;
	transform: translate(-50%, 0) !important;
}

.vn-header .pxl-menu-primary .sub-menu li a {
	display: flex !important;
	align-items: center;
	gap: 14px;
	padding: 12px 14px !important;
	border-radius: var(--vn-radio-sm);
	transition: background-color .2s ease;
}

.vn-header .pxl-menu-primary .sub-menu li a:hover,
.vn-header .pxl-menu-primary .sub-menu li.current-menu-item > a {
	background: var(--vn-tinte);
}

.vn-header .pxl-menu-primary .sub-menu .link-icon {
	flex: 0 0 42px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin: 0 !important;
	border-radius: 12px;
	background: var(--vn-tinte);
	color: var(--vn-morado);
	font-size: 18px;
	transition: background .25s ease, color .25s ease;
}

.vn-header .pxl-menu-primary .sub-menu li a:hover .link-icon {
	background: var(--vn-degradado);
	color: #fff;
}

.vn-header .pxl-menu-primary .sub-menu li a .pxl-menu-item-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 0 !important;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--vn-tinta) !important;
}

.vn-header .pxl-menu-primary .sub-menu li a .pxl-menu-item-text:before {
	display: none;
}

.vn-menu-desc {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	color: var(--vn-texto);
}

/* Botón de la cabecera y botón del panel lateral. */
.vn-header .vn-h-actions .pxl-button .btn {
	line-height: 46px;
	padding: 0 22px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	white-space: nowrap;
}

.vn-header .pxl-anchor-button {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--vn-tinte);
	color: var(--vn-morado-profundo);
	transition: background .25s ease, color .25s ease;
}

.vn-header .pxl-anchor-button .pxl-anchor-divider span {
	background-color: currentColor !important;
}

.vn-header .pxl-anchor-button:hover {
	background: var(--vn-morado-profundo);
	color: #fff;
}

@media (min-width: 1200px) and (max-width: 1365px) {
	.vn-header .pxl-nav-menu.fr-horizontal-divider .pxl-menu-primary > li > a {
		padding: 0 8px;
		font-size: 14px;
	}

	.vn-header .vn-h-actions .pxl-button .btn {
		padding: 0 16px;
	}
}

/* --- Cabecera móvil ------------------------------------------------------ */
#pxl-header-mobile .pxl-header-main {
	background: rgba(255, 255, 255, .9);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--vn-borde);
}

#pxl-header-mobile .pxl-header-branding img {
	max-height: 30px;
	width: auto;
}

/* Botón del menú: área táctil de 44 px con fondo suave y tres líneas alineadas a la izquierda;
   la última, más corta, se alarga al tocar o pasar el cursor. */
#pxl-header-mobile .pxl-nav-mobile-button {
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--vn-tinte);
	box-shadow: inset 0 0 0 1px var(--vn-borde);
	cursor: pointer;
	transition: background-color .2s ease, box-shadow .2s ease;
}

#pxl-header-mobile .pxl-nav-mobile-button .pxl-icon-line {
	position: absolute;
	left: 12px;
	right: auto;
	width: 20px;
	height: 2px;
	margin: 0;
	border-radius: 2px;
	background-color: var(--vn-morado-profundo);
	transform: none;
	transition: width .25s ease, background-color .2s ease;
}

#pxl-header-mobile .pxl-nav-mobile-button .pxl-icon-line1 { top: 15px; }
#pxl-header-mobile .pxl-nav-mobile-button .pxl-icon-line2 { top: 21px; }
#pxl-header-mobile .pxl-nav-mobile-button .pxl-icon-line3 { top: 27px; width: 12px; }

#pxl-header-mobile .pxl-nav-mobile-button:hover,
#pxl-header-mobile .pxl-nav-mobile-button:focus-visible {
	background: var(--vn-morado);
	box-shadow: 0 8px 18px -6px rgba(94, 88, 220, .6);
	outline: none;
}

#pxl-header-mobile .pxl-nav-mobile-button:hover .pxl-icon-line,
#pxl-header-mobile .pxl-nav-mobile-button:focus-visible .pxl-icon-line {
	background-color: #fff;
}

#pxl-header-mobile .pxl-nav-mobile-button:hover .pxl-icon-line3,
#pxl-header-mobile .pxl-nav-mobile-button:focus-visible .pxl-icon-line3 {
	width: 20px;
}

@media (max-width: 1199px) {
	#pxl-header-mobile .pxl-header-menu {
		background: #fff;
	}

	#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li > a {
		font-size: 17px;
		font-weight: 700;
		letter-spacing: -.01em;
		color: var(--vn-tinta);
	}

	#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li {
		border-bottom: 1px solid var(--vn-borde);
	}

	#pxl-header-mobile .pxl-header-menu .sub-menu li a {
		display: flex !important;
		align-items: center;
		gap: 12px;
		padding: 10px 0 10px 4px !important;
	}

	#pxl-header-mobile .pxl-header-menu .sub-menu .link-icon {
		flex: 0 0 36px;
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		margin: 0 !important;
		border-radius: 10px;
		background: var(--vn-tinte);
		color: var(--vn-morado);
		font-size: 16px;
	}

	#pxl-header-mobile .pxl-header-menu .sub-menu a > span:not(.link-icon) {
		display: flex;
		flex-direction: column;
		gap: 2px;
		font-weight: 700;
		line-height: 1.35;
		color: var(--vn-tinta);
	}

	#pxl-header-mobile .pxl-header-menu .sub-menu a > span:not(.link-icon):before {
		display: none;
	}

	#pxl-header-mobile .vn-menu-desc {
		display: block;
		font-size: 12.5px;
		font-weight: 500;
		line-height: 1.4;
	}

	#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li.vn-menu-cta {
		border-bottom: 0;
		padding-top: 24px;
	}

	#pxl-header-mobile .pxl-header-menu .pxl-menu-primary > li.vn-menu-cta > a {
		display: block;
		padding: 0 20px;
		border-radius: 999px;
		background: var(--vn-verde);
		color: #fff;
		font-size: 15px;
		line-height: 52px;
		text-align: center;
	}

	#pxl-header-mobile .pxl-header-mobile-search .search-field {
		border-radius: 12px;
		border: 1px solid var(--vn-borde);
		background: var(--vn-tinte);
	}
}

/* --- Botones ------------------------------------------------------------- */
.pxl-button .btn,
.elementor-button,
button[type="submit"],
input[type="submit"] {
	border-radius: 999px !important;
	font-weight: 700;
	letter-spacing: 0 !important;
	transition: transform .25s var(--vn-curva), box-shadow .25s var(--vn-curva), background-color .25s ease, color .25s ease !important;
}

.pxl-button .btn:hover,
.elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(51, 45, 122, .55);
}

.vn-cta-verde .btn:hover,
.vn-header .vn-h-actions .pxl-button .btn:hover {
	box-shadow: 0 12px 24px -10px rgba(25, 132, 79, .55);
}

/* --- Titulares ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	letter-spacing: -.02em;
}

.pxl-heading .pxl-item--title {
	font-weight: 700 !important;
	letter-spacing: -.03em !important;
	line-height: 1.12 !important;
	text-wrap: balance;
}

/* Etiqueta sobre los titulares: píldora suave en lugar del bloque sólido. */
.pxl-heading .pxl-item--subtitle.px-sub-title-box {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px !important;
	border-radius: 999px !important;
	background: var(--vn-tinte) !important;
	color: var(--vn-morado) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase;
}

.pxl-heading .pxl-item--subtitle.px-sub-title-box:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--vn-verde);
	flex: none;
}

/* --- Tarjetas con icono ---------------------------------------------------- */
.pxl-icon-box3.style-1 {
	height: 100%;
	padding: 30px 28px !important;
	border-radius: var(--vn-radio) !important;
	background: #fff;
	border: 1px solid var(--vn-borde);
	box-shadow: var(--vn-sombra);
	transition: transform .35s var(--vn-curva), box-shadow .35s var(--vn-curva), border-color .35s ease;
}

/* Rejilla de módulos: icono arriba y tarjetas de igual altura. */
.vn-cards .pxl-icon-box3.style-1 {
	flex-direction: column;
	align-items: flex-start;
}

.vn-cards .pxl-icon-box3.style-1 .pxl-item--icon {
	margin-right: 0 !important;
}

.vn-cards .e-con > .elementor-widget:has(.pxl-icon-box3) {
	align-self: stretch;
	flex-grow: 1;
}

.vn-cards .elementor-widget:has(.pxl-icon-box3) > .elementor-widget-container {
	height: 100%;
}

.pxl-icon-box3.style-1:hover {
	transform: translateY(-6px);
	border-color: rgba(94, 88, 220, .3);
	box-shadow: var(--vn-sombra-alta);
}

.pxl-icon-box3.style-1 .pxl-item--icon {
	display: inline-grid;
	place-items: center;
	width: 60px;
	height: 60px;
	margin-bottom: 20px;
	border-radius: 16px;
	background: var(--vn-tinte);
	color: var(--vn-morado);
	transition: background .3s ease, color .3s ease;
}

.pxl-icon-box3.style-1 .pxl-item--icon i {
	font-size: 28px;
	color: inherit !important;
}

.pxl-icon-box3.style-1:hover .pxl-item--icon {
	background: var(--vn-degradado);
	color: #fff;
}

.pxl-icon-box3.style-1 .pxl-item--title {
	font-size: 19px !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
	color: var(--vn-tinta) !important;
}

.pxl-icon-box3.style-1 .pxl-item--description {
	font-size: 15px;
	line-height: 1.6;
	color: var(--vn-texto) !important;
}

/* --- Secciones de las páginas de Soluciones -------------------------------- */
.vn-panel {
	position: relative;
	overflow: hidden;
	border-radius: 24px !important;
	background-image: var(--vn-degradado) !important;
}

.vn-panel:after {
	content: "";
	position: absolute;
	right: -80px;
	bottom: -80px;
	width: 320px;
	height: 320px;
	background: url("../img/recurso-circulolinea.svg") no-repeat center / contain;
	opacity: .14;
	pointer-events: none;
}

.vn-cta > .elementor-container {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	box-shadow: var(--vn-sombra-alta);
}

.vn-cta > .elementor-container:before {
	content: "";
	position: absolute;
	left: -60px;
	top: -60px;
	width: 260px;
	height: 260px;
	background: url("../img/recurso-semicirculolinea.svg") no-repeat center / contain;
	opacity: .18;
	pointer-events: none;
}

.vn-split img {
	border-radius: 24px;
	box-shadow: var(--vn-sombra-alta);
}

/* Encabezado de página: velo con el degradado de marca sobre la foto para dar contraste al título. */
.page-title-section > .elementor-background-overlay {
	background: linear-gradient(100deg, rgba(13, 12, 56, .92) 0%, rgba(51, 45, 122, .78) 45%, rgba(94, 88, 220, .25) 100%) !important;
	opacity: 1 !important;
}

.page-title-section {
	filter: none !important;
}

/* Portada: mismo velo, más oscuro a la izquierda donde va el titular. */
.elementor-92 .elementor-element-444a1de:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(95deg, rgba(13, 12, 56, .9) 0%, rgba(13, 12, 56, .65) 40%, rgba(51, 45, 122, .1) 75%);
	pointer-events: none;
}

.elementor-92 .elementor-element-444a1de > .elementor-container {
	position: relative;
	z-index: 1;
}

/* Bajada del titular: el texto venía a 24 px con interlineado fijo de 26 px. */
.elementor-92 .elementor-element-63bbc05 * {
	font-size: 20px !important;
	line-height: 1.5 !important;
}

@media (max-width: 767px) {
	.elementor-92 .elementor-element-63bbc05 * {
		font-size: 17px !important;
	}
}

/* Textura de ruido del tema: muy sutil, para que no lave el velo morado. */
.page-title-section:before {
	opacity: .12 !important;
	z-index: 1;
	pointer-events: none;
}

.page-title-section .pxl-item--title {
	letter-spacing: -.035em !important;
}

/* --- Páginas de módulo ----------------------------------------------------
   Hero sin foto: degradado de marca, recurso gráfico del manual distinto por
   módulo (clase vn-hero--<recurso>) e icono grande del módulo a la derecha.
   ------------------------------------------------------------------------- */
.page-title-section.vn-hero {
	background: radial-gradient(900px 480px at 85% 20%, rgba(94, 88, 220, .55), transparent 65%), linear-gradient(120deg, var(--vn-noche) 0%, var(--vn-morado-profundo) 100%) !important;
}

.vn-hero > .elementor-background-overlay {
	display: none;
}

.vn-hero:after {
	content: "";
	position: absolute;
	right: -120px;
	bottom: -160px;
	width: 520px;
	height: 520px;
	background: url("../img/recurso-circulolinea.svg") no-repeat center / contain;
	opacity: .16;
	pointer-events: none;
}

.vn-hero--ovalolinea:after { background-image: url("../img/recurso-ovalolinea.svg"); }
.vn-hero--semicirculolinea:after { background-image: url("../img/recurso-semicirculolinea.svg"); }
.vn-hero--circulogrueso:after { background-image: url("../img/recurso-circulogrueso.svg"); }

.vn-hero > .elementor-container {
	position: relative;
	z-index: 1;
}

.vn-hero .pxl-item--title {
	max-width: 620px;
}

.vn-hero .pxl-text-editor,
.vn-hero .pxl-text-editor p {
	max-width: 560px;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .85) !important;
}

.vn-hero .pxl_circle,
.vn-hero .elementor-widget-pxl_circle {
	display: none;
}

.vn-hero-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.vn-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	transition: transform .25s var(--vn-curva), box-shadow .25s var(--vn-curva), background-color .25s ease, color .25s ease;
}

.vn-btn:hover {
	transform: translateY(-2px);
}

.vn-btn--verde {
	background: var(--vn-verde);
	color: #fff !important;
}

.vn-btn--verde:hover {
	background: var(--vn-verde) var(--vn-degradado-verde);
	box-shadow: 0 12px 24px -10px rgba(25, 132, 79, .7);
}

.vn-btn--claro {
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff !important;
}

.vn-btn--claro:hover {
	background: #fff;
	color: var(--vn-morado-profundo) !important;
}

.vn-hero-icono {
	position: absolute;
	top: 50%;
	right: 6%;
	display: grid;
	place-items: center;
	width: 220px;
	height: 220px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 48px;
	background: rgba(255, 255, 255, .08);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
	color: #fff;
	font-size: 96px;
	transform: translateY(-50%) rotate(-6deg);
}

.vn-hero-icono i {
	background: linear-gradient(160deg, #fff 30%, var(--vn-verde-claro) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@media (max-width: 1199px) {
	.vn-hero-icono {
		width: 160px;
		height: 160px;
		border-radius: 36px;
		font-size: 68px;
		right: 4%;
	}
}

@media (max-width: 991px) {
	.vn-hero-icono {
		display: none;
	}
}

#funciones {
	scroll-margin-top: 100px;
}

/* Preguntas frecuentes (acordeón del tema). */
.pxl-accordion1 .pxl--item {
	margin-bottom: 12px;
	overflow: hidden;
	border: 1px solid var(--vn-borde);
	border-radius: var(--vn-radio);
	background: #fff;
	transition: box-shadow .3s ease, border-color .3s ease;
}

.pxl-accordion1 .pxl--item.active {
	border-color: rgba(94, 88, 220, .35);
	box-shadow: var(--vn-sombra);
}

.pxl-accordion1 .pxl-accordion--title {
	padding: 20px 24px !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	color: var(--vn-tinta) !important;
	background: transparent !important;
	border: 0 !important;
}

.pxl-accordion1 .pxl-accordion--content {
	padding: 0 24px 22px !important;
	font-size: 15px;
	line-height: 1.65;
	color: var(--vn-texto);
}

/* Portada: tarjeta "Para una demo gratuita" con el formulario, centrada en el hero. */
.vn-demo {
	align-items: center;
}

.vn-demo > .elementor-widget-wrap {
	flex: 0 0 auto;
	height: auto;
	margin: 40px 24px 96px 0;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45);
}

.vn-demo .elementor-inner-section,
.vn-demo .elementor-inner-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
	background: transparent !important;
	border-radius: 0 !important;
}

.vn-demo .elementor-inner-section:first-child > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 36px 36px 8px !important;
}

.vn-demo .elementor-inner-section:last-child > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 12px 36px 32px !important;
}

.vn-demo .pxl-heading .pxl-item--title {
	margin: 0;
	font-size: 26px !important;
	line-height: 1.2 !important;
	color: var(--vn-tinta) !important;
}

.vn-demo .pxl-heading .pxl-item--title * {
	color: inherit !important;
}

.vn-demo .elementor-widget {
	margin-bottom: 0 !important;
}

/* Con el desplegable de módulos abierto, el hero pasa por encima de la tarjeta de cifras,
   que si no tapaba las últimas opciones. */
.elementor-92 .elementor-element-444a1de > .elementor-container:has(.pxl-select-higthlight.active) {
	z-index: 5;
}

.vn-form-demo p {
	margin: 0;
}

.vn-form-demo br {
	display: none;
}

.vn-form-demo .wpcf7-form-control-wrap {
	display: block;
	margin-bottom: 12px;
}

.vn-form-demo input,
.vn-form-demo select {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	border: 1px solid var(--vn-borde) !important;
	background: #f8f8fd;
	color: var(--vn-tinta);
	font-family: var(--vn-fuente);
	font-size: 15px;
}

.vn-form-demo select {
	appearance: none;
	background: #f8f8fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23332d7a' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;
	color: var(--vn-texto);
}

.vn-form-demo .vn-form-enviar {
	width: 100%;
	height: 52px;
	margin-top: 4px;
	border: 0;
	background: var(--vn-verde);
	color: #fff;
	font-family: var(--vn-fuente);
	font-size: 15px;
	cursor: pointer;
}

.vn-form-demo .vn-form-enviar:hover {
	background: var(--vn-verde) var(--vn-degradado-verde);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(25, 132, 79, .55);
}

.vn-form-demo .vn-form-nota {
	margin-top: 12px;
	font-size: 13px;
	text-align: center;
	color: var(--vn-texto);
}

/* Contacto: títulos de los datos sin mayúscula en cada palabra ("Teléfono y WhatsApp"). */
.elementor-237 .pxl-icon-box .pxl-item--title {
	text-transform: none !important;
}

/* Contacto en tableta y móvil: la esfera decorativa bajo el formulario solo dejaba un hueco vacío. */
@media (max-width: 1024px) {
	.elementor-237 .elementor-element-7d0c891 {
		display: none;
	}

	.elementor-237 .elementor-element-fcc67bd > .elementor-widget-wrap {
		padding-top: 56px !important;
		padding-bottom: 40px !important;
	}

	.elementor-237 .elementor-element-58beb62 > .elementor-widget-wrap {
		padding-bottom: 48px !important;
	}
}

/* Formulario de Contacto: mismos campos que el de la demo, más el mensaje. */
.vn-form-contacto textarea {
	width: 100%;
	height: 140px;
	padding: 14px 16px;
	border: 1px solid var(--vn-borde) !important;
	border-radius: 16px;
	background: #fff;
	color: var(--vn-tinta);
	font-family: var(--vn-fuente);
	font-size: 15px;
	resize: vertical;
}

.vn-form-contacto input,
.vn-form-contacto select {
	background-color: #fff;
}

.vn-demo .wpcf7-response-output {
	margin: 12px 0 0 !important;
	border-radius: 12px;
	font-size: 14px;
}

@media (max-width: 1024px) {
	.vn-demo > .elementor-widget-wrap {
		width: calc(100% - 32px) !important;
		margin: 0 16px 40px;
	}

	.vn-demo .elementor-inner-section:first-child > .elementor-container > .elementor-column > .elementor-widget-wrap,
	.vn-demo .elementor-inner-section:last-child > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-left: 22px !important;
		padding-right: 22px !important;
	}
}

/* Portada: tarjeta de cifras que se monta sobre el borde inferior del hero. */
.vn-proof-wrap {
	position: relative;
	z-index: 3;
	width: calc(100% - 48px);
	max-width: 1240px;
	margin: -56px auto 0;
}

.vn-proof {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow: hidden;
	border: 1px solid var(--vn-borde);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--vn-sombra-alta);
}

.vn-proof li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 26px 28px;
}

.vn-proof li + li {
	border-left: 1px solid var(--vn-borde);
}

.vn-proof strong {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
	background: var(--vn-degradado);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.vn-proof span {
	font-size: 14px;
	line-height: 1.5;
	color: var(--vn-texto);
}

@media (max-width: 1024px) {
	.vn-proof {
		grid-template-columns: repeat(2, 1fr);
	}

	.vn-proof li:nth-child(3) {
		border-left: 0;
	}

	.vn-proof li:nth-child(n + 3) {
		border-top: 1px solid var(--vn-borde);
	}
}

@media (max-width: 575px) {
	.vn-proof-wrap {
		margin-top: 24px;
	}

	.vn-proof {
		grid-template-columns: 1fr;
	}

	.vn-proof li + li {
		border-left: 0;
		border-top: 1px solid var(--vn-borde);
	}

	.vn-proof li {
		padding: 20px 22px;
	}
}

/* Nosotros: espaciador pensado para una cabecera superpuesta; con la cabecera fija solo deja una franja blanca. */
.elementor-3413 .elementor-element-bad2367 {
	display: none;
}

/* Encabezado de páginas internas hecho con un contenedor (Nosotros): márgenes laterales alineados
   con el resto del sitio, velo de marca sobre la foto y texto a un ancho cómodo de lectura. */
.e-con.vn-hero-pagina {
	position: relative;
	padding-left: max(24px, calc((100% - 1240px) / 2)) !important;
	padding-right: max(24px, calc((100% - 1240px) / 2)) !important;
}

.e-con.vn-hero-pagina:after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(13, 12, 56, .92) 0%, rgba(51, 45, 122, .78) 50%, rgba(51, 45, 122, .25) 100%);
	pointer-events: none;
}

.e-con.vn-hero-pagina > * {
	position: relative;
	z-index: 1;
}

.vn-hero-pagina .elementor-widget-pxl_heading,
.vn-hero-pagina .elementor-widget-pxl_text_editor,
.vn-hero-pagina .elementor-widget-html {
	max-width: 680px;
}

.vn-hero-pagina h1.pxl-item--title {
	font-size: clamp(38px, 6vw, 64px) !important;
	line-height: 1.08 !important;
}

.vn-hero-pagina .elementor-widget-pxl_text_editor p {
	font-family: var(--vn-fuente);
	font-size: 19px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
}

.vn-hero-pagina .vn-hero-acciones {
	margin-top: 8px;
}

/* Lista con marcas de verificación para textos dentro del editor. */
.vn-checklist {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vn-checklist li {
	position: relative;
	padding-left: 34px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--vn-tinta);
}

.vn-checklist li:before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--vn-degradado-verde);
	-webkit-mask: none;
}

.vn-checklist li:after {
	content: "";
	position: absolute;
	left: 8px;
	top: 6px;
	width: 6px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Portada: tarjetas de "Sectores que atendemos", cada una lleva a su módulo. */
.vn-sectores {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	max-width: 1240px;
	margin: 48px auto 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.vn-sectores a {
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
	padding: 28px 26px;
	border: 1px solid var(--vn-borde);
	border-radius: 20px;
	background: rgba(255, 255, 255, .85);
	box-shadow: var(--vn-sombra);
	color: var(--vn-texto);
	transition: transform .25s var(--vn-curva), box-shadow .25s var(--vn-curva), border-color .25s;
}

.vn-sectores a:hover {
	transform: translateY(-4px);
	border-color: rgba(94, 88, 220, .35);
	box-shadow: var(--vn-sombra-alta);
	color: var(--vn-texto);
}

.vn-sectores-icono {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 6px;
	border-radius: 14px;
	background: var(--vn-degradado);
	color: #fff;
	font-size: 22px;
}

.vn-sectores strong {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--vn-tinta);
}

.vn-sectores span:not(.vn-sectores-icono) {
	flex: 1;
	font-size: 15px;
	line-height: 1.55;
}

.vn-sectores em {
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	color: var(--vn-morado);
}

.vn-sectores em:after {
	content: " →";
	transition: margin .2s;
}

.vn-sectores a:hover em:after {
	margin-left: 4px;
}

@media (max-width: 1024px) {
	.vn-sectores {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575px) {
	.vn-sectores {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-top: 32px;
	}

	.vn-sectores a {
		padding: 22px;
	}
}

/* Planes de precios: distintivo en el plan destacado. */
.pxl-pricing1.popular {
	position: relative;
}

.pxl-pricing1.popular:before {
	content: "Más elegido";
	position: absolute;
	top: -14px;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--vn-verde);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	box-shadow: 0 8px 18px -8px rgba(25, 132, 79, .6);
}

/* --- Formularios ------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select {
	border-radius: 12px !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	border-color: var(--vn-morado) !important;
	box-shadow: 0 0 0 4px rgba(94, 88, 220, .15);
}

/* --- Pie de página ------------------------------------------------------------ */
#pxl-footer-elementor a {
	transition: color .2s ease, opacity .2s ease;
}

/* Las columnas del pie suman más del 100 %: se permite que se encojan para no salirse de la pantalla. */
#pxl-footer-elementor .e-con.e-parent > .e-con {
	flex-shrink: 1;
	min-width: 0;
}

#pxl-footer-elementor .e-con.e-parent > .e-con:last-child {
	overflow-wrap: anywhere;
}

#pxl-footer-elementor .pxl-link a:hover {
	color: var(--vn-verde-claro) !important;
}

/* Franja inferior del pie: apoyos, copyright y redes en una sola línea, centrados verticalmente. */
#pxl-footer-elementor .elementor-element-077d9df > .elementor-container {
	align-items: center;
}

#pxl-footer-elementor .elementor-element-077d9df .elementor-widget-wrap {
	align-content: center;
}

#pxl-footer-elementor .elementor-element-ab459aa p {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, .7);
}

/* Redes: botones circulares con el nombre solo para lectores de pantalla. */
.vn-pie-redes .pxl-icon-list {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
}

.vn-pie-redes .pxl-icon-item {
	margin: 0 !important;
	padding: 0 !important;
}

.vn-pie-redes .pxl-icon-item a {
	display: grid !important;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: #fff !important;
	transition: background .2s, border-color .2s, transform .2s;
}

.vn-pie-redes .pxl-icon-item a:hover {
	transform: translateY(-2px);
	border-color: var(--vn-verde);
	background: var(--vn-verde);
}

.vn-pie-redes .pxl-icon-item i {
	position: static !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	margin: 0 !important;
	font-size: 17px !important;
	color: inherit !important;
}

.vn-pie-redes .pxl-icon-label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.vn-pie-redes .pxl-icon-item a {
	margin: 0 !important;
}

@media (max-width: 1024px) {
	.vn-pie-redes .pxl-icon-list {
		justify-content: center;
	}
}

/* En móvil, espacio al final del pie para que los botones flotantes no tapen las redes. */
@media (max-width: 767px) {
	#pxl-footer-elementor {
		padding-bottom: 84px;
	}
}

/* --- Blog: tarjetas en rejilla de dos columnas ------------------------------ */
.pxl-post-list.layout-post-1 .pxl-list-inner {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

.pxl-post-list.layout-post-1 .list-item {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.pxl-post-list.layout-post-1 .grid-item-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0 !important;
	overflow: hidden;
	border: 1px solid var(--vn-borde);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--vn-sombra);
	transition: transform .35s var(--vn-curva), box-shadow .35s var(--vn-curva);
}

.pxl-post-list.layout-post-1 .grid-item-inner:hover {
	transform: translateY(-6px);
	box-shadow: var(--vn-sombra-alta);
}

.pxl-post-list.layout-post-1 .grid-item-inner > [class*="col-"] {
	flex: none;
	width: 100%;
	max-width: 100%;
	padding: 0;
}

.pxl-post-list.layout-post-1 .post-image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 0 !important;
}

.pxl-post-list.layout-post-1 .post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--vn-curva);
}

.pxl-post-list.layout-post-1 .grid-item-inner:hover .post-image img {
	transform: scale(1.05);
}

.pxl-post-list.layout-post-1 .pxl-item--date {
	top: 16px !important;
	left: 16px !important;
	right: auto !important;
	bottom: auto !important;
	padding: 8px 12px !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, .92) !important;
	color: var(--vn-tinta) !important;
	line-height: 1.1;
	text-align: center;
	box-shadow: var(--vn-sombra);
}

.pxl-post-list.layout-post-1 .pxl-item--date span {
	display: block;
	color: inherit !important;
}

.pxl-post-list.layout-post-1 .pxl-item--date-day {
	font-size: 20px !important;
	font-weight: 800;
}

.pxl-post-list.layout-post-1 .pxl-item--date-month {
	font-size: 12px !important;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--vn-texto) !important;
}

.pxl-post-list.layout-post-1 .wrap-item-content {
	display: flex;
	flex: 1 1 auto !important;
}

.pxl-post-list.layout-post-1 .item-content {
	display: flex;
	flex-direction: column;
	padding: 24px 28px 28px !important;
}

.pxl-post-list.layout-post-1 .pxl-blog-meta {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

.pxl-post-list.layout-post-1 .pxl-blog-meta-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-size: 13px;
	color: var(--vn-texto);
}

.pxl-post-list.layout-post-1 .pxl-item--author {
	display: none;
}

.pxl-post-list.layout-post-1 .pxl-item--category .icon-post {
	display: none;
}

.pxl-post-list.layout-post-1 .pxl-item--category a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--vn-tinte);
	color: var(--vn-morado) !important;
	font-size: 12px;
	font-weight: 700;
}

.pxl-post-list.layout-post-1 .pxl-item--title {
	margin: 14px 0 10px !important;
	font-size: 21px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: -.015em;
}

.pxl-post-list.layout-post-1 .pxl-item--title a {
	color: var(--vn-tinta) !important;
	background: none !important;
}

.pxl-post-list.layout-post-1 .pxl-item--title a:hover {
	color: var(--vn-morado) !important;
}

.pxl-post-list.layout-post-1 .item-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--vn-texto);
}

.pxl-post-list.layout-post-1 .blog-post-footer {
	margin-top: auto;
}

/* "Continuar leyendo" como enlace con flecha en lugar de botón. */
.pxl-post-list.layout-post-1 .post-readmore .btn {
	height: auto;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--vn-morado) !important;
	font-size: 15px;
	line-height: 1.4 !important;
}

.pxl-post-list.layout-post-1 .post-readmore .btn:after {
	content: "→";
	display: inline-block;
	margin-left: 8px;
	transition: transform .25s var(--vn-curva);
}

.pxl-post-list.layout-post-1 .post-readmore .btn:hover {
	transform: none;
}

.pxl-post-list.layout-post-1 .post-readmore .btn:hover:after {
	transform: translateX(4px);
}

@media (max-width: 767px) {
	.pxl-post-list.layout-post-1 .pxl-list-inner {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.pxl-post-list.layout-post-1 .item-content {
		padding: 20px 22px 24px !important;
	}
}

/* --- Artículo del blog --------------------------------------------------------- */
/* Título del encabezado: el de la plantilla está pensado para títulos cortos (60 px). */
body.single-post .page-title-section .pxl-item--title {
	max-width: 900px;
	font-size: clamp(30px, 4.2vw, 50px) !important;
	line-height: 1.12 !important;
}

/* La miga de pan repetía el título largo: se recorta a una línea. */
body.single-post .page-title-section .pxl-breadcrumb li:last-child,
body.single-post .page-title-section .pxl-breadcrumb li:last-child span {
	display: inline-block;
	max-width: 46ch;
	overflow: hidden;
	vertical-align: bottom;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Columna de lectura: unos 70 caracteres por línea. */
.vn-articulo,
.vn-relacionados {
	max-width: 780px;
	margin-left: auto;
	margin-right: auto;
}

.vn-articulo {
	padding-top: 0;
}

body.single-post #pxl-main {
	padding-top: 64px;
	padding-bottom: 0;
}

.vn-articulo-datos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--vn-borde);
	font-size: 14px;
	color: var(--vn-texto);
}

.vn-articulo-datos i {
	margin-right: 4px;
	color: var(--vn-morado);
}

.vn-articulo-categoria {
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--vn-tinte);
	color: var(--vn-morado-profundo);
	font-size: 13px;
	font-weight: 700;
}

.vn-articulo-categoria:hover {
	background: var(--vn-morado);
	color: #fff;
}

.vn-articulo-cuerpo .elementor-section-boxed > .elementor-container,
.vn-articulo-cuerpo .elementor-column > .elementor-widget-wrap {
	max-width: 100%;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.vn-articulo-cuerpo,
.vn-articulo-cuerpo p,
.vn-articulo-cuerpo li {
	font-size: 18px;
	line-height: 1.75;
	color: #3d3b5c;
}

.vn-articulo-cuerpo p {
	margin-bottom: 1.2em;
}

.vn-articulo-cuerpo h2,
.vn-articulo-cuerpo h3,
.vn-articulo-cuerpo h4 {
	margin: 1.8em 0 .6em;
	color: var(--vn-tinta);
	scroll-margin-top: 110px;
}

.vn-articulo-cuerpo h2 {
	font-size: clamp(26px, 3vw, 32px);
}

.vn-articulo-cuerpo h3 {
	font-size: clamp(21px, 2.4vw, 24px);
}

.vn-articulo-cuerpo .elementor-widget:first-child .pxl-item--title {
	margin-top: 0;
}

.vn-articulo-cuerpo a:not(.btn):not(.vn-btn) {
	color: var(--vn-morado);
	text-decoration: underline;
	text-decoration-color: rgba(94, 88, 220, .35);
	text-underline-offset: 3px;
}

.vn-articulo-cuerpo a:not(.btn):not(.vn-btn):hover {
	text-decoration-color: currentColor;
}

.vn-articulo-cuerpo ul,
.vn-articulo-cuerpo ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

.vn-articulo-cuerpo li {
	margin-bottom: .4em;
}

.vn-articulo-cuerpo li::marker {
	color: var(--vn-morado);
	font-weight: 700;
}

.vn-articulo-cuerpo img {
	height: auto;
	border-radius: 18px;
}

.vn-articulo-cuerpo .elementor-widget-pxl_image {
	margin: 12px 0 32px;
}

.vn-articulo-cuerpo blockquote {
	margin: 1.6em 0;
	padding: 20px 24px;
	border-left: 4px solid var(--vn-morado);
	border-radius: 0 16px 16px 0;
	background: var(--vn-tinte);
	font-size: 19px;
	color: var(--vn-tinta);
}

.vn-articulo-cuerpo table {
	width: 100%;
	margin-bottom: 1.6em;
	border-collapse: collapse;
	font-size: 15px;
}

.vn-articulo-cuerpo th,
.vn-articulo-cuerpo td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--vn-borde);
	text-align: left;
}

/* Compartir y llamado a la acción. */
.vn-articulo-pie {
	margin-top: 40px;
}

.vn-compartir {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 20px 0;
	border-top: 1px solid var(--vn-borde);
	border-bottom: 1px solid var(--vn-borde);
}

.vn-compartir-titulo {
	margin-right: 6px;
	font-size: 14px;
	font-weight: 700;
	color: var(--vn-tinta);
}

.vn-compartir a,
.vn-compartir-copiar {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--vn-borde);
	border-radius: 50%;
	background: #fff;
	color: var(--vn-morado-profundo);
	font-size: 16px;
	transition: background .2s, color .2s, transform .2s;
}

.vn-compartir a:hover,
.vn-compartir-copiar:hover {
	transform: translateY(-2px);
	background: var(--vn-morado);
	color: #fff;
}

.vn-compartir-copiar {
	display: inline-flex;
	gap: 8px;
	width: auto;
	height: 42px !important;
	padding: 0 16px !important;
	border: 1px solid var(--vn-borde) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--vn-morado-profundo) !important;
	line-height: 1 !important;
	font-family: var(--vn-fuente);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.vn-compartir-copiar:hover {
	background: var(--vn-morado) !important;
	color: #fff !important;
}

.vn-compartir-copiar.is-copiado {
	border-color: var(--vn-verde) !important;
	background: var(--vn-verde) !important;
	color: #fff !important;
}

.vn-articulo-cta {
	position: relative;
	display: flex;
	gap: 24px;
	margin-top: 40px;
	padding: 36px;
	overflow: hidden;
	border-radius: 24px;
	background: radial-gradient(circle at 100% 0, rgba(94, 88, 220, .55), transparent 55%), var(--vn-noche);
	color: rgba(255, 255, 255, .82);
}

.vn-articulo-cta > img {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
}

.vn-articulo-cta h3 {
	margin: 0 0 8px;
	font-size: 26px;
	color: #fff;
}

.vn-articulo-cta p {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.6;
}

/* Artículos relacionados. */
.vn-relacionados {
	max-width: 1240px;
	padding: 72px 0 96px;
}

.vn-relacionados h2 {
	margin-bottom: 28px;
	font-size: 32px;
}

.vn-relacionados ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vn-relacionados a {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--vn-borde);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--vn-sombra);
	transition: transform .25s var(--vn-curva), box-shadow .25s var(--vn-curva);
}

.vn-relacionados a:hover {
	transform: translateY(-4px);
	box-shadow: var(--vn-sombra-alta);
}

.vn-relacionados-imagen {
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--vn-degradado);
}

.vn-relacionados-imagen img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s var(--vn-curva);
}

.vn-relacionados a:hover .vn-relacionados-imagen img {
	transform: scale(1.04);
}

.vn-relacionados-imagen .vn-relacionados-simbolo {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.vn-relacionados-texto {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 24px;
}

.vn-relacionados-texto small {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--vn-morado);
}

.vn-relacionados-texto strong {
	flex: 1;
	font-size: 17px;
	line-height: 1.4;
	color: var(--vn-tinta);
}

.vn-relacionados-texto em {
	font-size: 13px;
	font-style: normal;
	color: var(--vn-texto);
}

/* Barra de progreso de lectura bajo la cabecera. */
.vn-progreso {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1001;
	height: 3px;
	pointer-events: none;
}

.vn-progreso span {
	display: block;
	height: 100%;
	background: var(--vn-degradado-verde);
	transform: scaleX(0);
	transform-origin: left;
}

@media (max-width: 991px) {
	.vn-relacionados ul {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	body.single-post #pxl-main {
		padding-top: 40px;
	}

	.vn-articulo-cuerpo,
	.vn-articulo-cuerpo p,
	.vn-articulo-cuerpo li {
		font-size: 17px;
	}

	.vn-articulo-cta {
		flex-direction: column;
		gap: 16px;
		padding: 28px 22px;
	}

	.vn-articulo-cta h3 {
		font-size: 22px;
	}

	.vn-relacionados {
		padding: 56px 0 72px;
	}

	.vn-relacionados ul {
		grid-template-columns: 1fr;
	}

	body.single-post .page-title-section .pxl-breadcrumb li:last-child,
	body.single-post .page-title-section .pxl-breadcrumb li:last-child span {
		max-width: 22ch;
	}
}

/* --- Páginas legales (aviso legal, cookies, datos personales, privacidad) ------- */
/* El texto llegaba al borde de la pantalla, con títulos de 48 px: se lleva a una columna de lectura. */
:is(.page-id-14542, .page-id-14490, .page-id-14483, .page-id-14079) #pxl-main .elementor > .e-con {
	max-width: 840px;
	margin: 0 auto;
	padding: 64px 24px 96px !important;
}

:is(.page-id-14542, .page-id-14490, .page-id-14483, .page-id-14079) .elementor-widget-text-editor {
	color: #3d3b5c;
	font-size: 17px;
	line-height: 1.75;
}

:is(.page-id-14542, .page-id-14490, .page-id-14483, .page-id-14079) .elementor-widget-text-editor :is(h1, h2) {
	margin: 2em 0 .6em;
	font-size: clamp(24px, 2.6vw, 30px) !important;
	font-weight: 700 !important;
	line-height: 1.25;
	color: var(--vn-tinta);
}

:is(.page-id-14542, .page-id-14490, .page-id-14483, .page-id-14079) .elementor-widget-text-editor > :first-child,
:is(.page-id-14542, .page-id-14490, .page-id-14483, .page-id-14079) .elementor-widget-text-editor :is(h1, h2):first-child {
	margin-top: 0;
}

:is(.page-id-14542, .page-id-14490, .page-id-14483, .page-id-14079) .elementor-widget-text-editor :is(h3, h4) {
	margin: 1.6em 0 .5em;
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--vn-tinta);
}

:is(.page-id-14542, .page-id-14490, .page-id-14483, .page-id-14079) .elementor-widget-text-editor :is(ul, ol) {
	margin: 0 0 1.3em;
	padding-left: 1.3em;
}

:is(.page-id-14542, .page-id-14490, .page-id-14483, .page-id-14079) .elementor-widget-text-editor li::marker {
	color: var(--vn-morado);
}

:is(.page-id-14542, .page-id-14490, .page-id-14483, .page-id-14079) .elementor-widget-text-editor a {
	color: var(--vn-morado);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Nuestro equipo: las redes de cada persona apuntaban a "#" (de la demo); se ocultan hasta tener enlaces reales. */
.pxl-team-grid a[href="#"],
.pxl-team-grid a[href=""] {
	display: none !important;
}

/* --- Página 404 ------------------------------------------------------------- */
/* El tema padre oculta cabecera y pie en la 404 y fuerza 600 px de alto a todas las imágenes. */
body.error404 #pxl-header-elementor,
body.error404 #pxl-footer-elementor {
	display: block !important;
}

body.error404 #pxl-main {
	height: auto;
}

body.error404 img {
	height: auto;
}

.vn-404 {
	padding: 80px 0 100px;
}

.vn-404-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
	position: relative;
	overflow: hidden;
	padding: 64px;
	border-radius: 32px;
	background: radial-gradient(700px 360px at 90% 10%, rgba(94, 88, 220, .5), transparent 65%), linear-gradient(120deg, var(--vn-noche) 0%, var(--vn-morado-profundo) 100%);
	color: #fff;
}

.vn-404-hero:after {
	content: "";
	position: absolute;
	right: -100px;
	bottom: -140px;
	width: 420px;
	height: 420px;
	background: url("../img/recurso-circulolinea.svg") no-repeat center / contain;
	opacity: .14;
	pointer-events: none;
}

.vn-404-codigo {
	margin: 0 0 8px;
	font-size: clamp(88px, 14vw, 160px);
	font-weight: 800;
	line-height: .9;
	letter-spacing: -.06em;
	background: linear-gradient(160deg, #fff 30%, var(--vn-verde-claro) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.vn-404-titulo {
	margin: 0 0 14px;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 700;
	color: #fff !important;
}

.vn-404-descripcion {
	max-width: 520px;
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .85);
}

.vn-404-buscar {
	max-width: 480px;
	margin-bottom: 24px;
}

.vn-404-buscar .searchform-wrap {
	position: relative;
}

.vn-404-buscar .search-field {
	width: 100%;
	height: 54px;
	padding: 0 56px 0 20px;
	border: 1px solid rgba(255, 255, 255, .25) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .1) !important;
	color: #fff !important;
}

.vn-404-buscar .search-field::placeholder {
	color: rgba(255, 255, 255, .7);
}

.vn-404-buscar .search-submit {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--vn-morado-profundo) !important;
}

.vn-btn--morado {
	background: #fff;
	color: var(--vn-morado-profundo) !important;
}

.vn-btn--borde {
	border: 1px solid rgba(255, 255, 255, .35);
	color: #fff !important;
}

.vn-btn--borde:hover {
	background: var(--vn-verde);
	border-color: var(--vn-verde);
}

.vn-404-simbolo {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
}

.vn-404-simbolo img {
	width: min(240px, 100%);
	height: auto;
	padding: 40px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 48px;
	background: #fff;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6);
	transform: rotate(-6deg);
}

.vn-404-sugerencias {
	margin-top: 56px;
}

.vn-404-subtitulo {
	margin: 0 0 20px;
	font-size: 24px;
	font-weight: 700;
}

.vn-404-lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vn-404-lista a {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 100%;
	padding: 18px;
	border: 1px solid var(--vn-borde);
	border-radius: var(--vn-radio);
	background: #fff;
	transition: transform .3s var(--vn-curva), box-shadow .3s var(--vn-curva), border-color .3s ease;
}

.vn-404-lista a:hover {
	transform: translateY(-4px);
	border-color: rgba(94, 88, 220, .3);
	box-shadow: var(--vn-sombra-alta);
}

.vn-404-icono {
	flex: 0 0 46px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--vn-tinte);
	color: var(--vn-morado);
	font-size: 20px;
}

.vn-404-enlace {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vn-404-enlace strong {
	font-size: 16px;
	color: var(--vn-tinta);
}

.vn-404-enlace small {
	font-size: 13px;
	color: var(--vn-texto);
}

@media (max-width: 991px) {
	.vn-404 {
		padding: 40px 16px 64px;
	}

	.vn-404-hero {
		grid-template-columns: 1fr;
		padding: 40px 28px;
		border-radius: 24px;
	}

	.vn-404-simbolo {
		display: none;
	}

	.vn-404-lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575px) {
	.vn-404-lista {
		grid-template-columns: 1fr;
	}
}

/* --- Botón flotante de WhatsApp ----------------------------------------------
   Siempre visible, en la esquina inferior izquierda: la derecha la ocupan el chat
   de Kommo, el distintivo de reCAPTCHA y el botón "volver arriba".
   ------------------------------------------------------------------------- */
.vn-whatsapp {
	position: fixed;
	left: 24px;
	bottom: 60px; /* por encima de la pestaña de cookies, que sube al pasar el cursor */
	z-index: 998;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 60px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--vn-verde);
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 16px 32px -12px rgba(25, 132, 79, .7);
	transition: transform .3s var(--vn-curva), box-shadow .3s var(--vn-curva), background .3s ease;
}

.vn-whatsapp:hover {
	background: var(--vn-verde) var(--vn-degradado-verde);
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -12px rgba(25, 132, 79, .8);
}

.vn-whatsapp:before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--vn-verde);
	animation: vn-pulso 2.6s ease-out infinite;
}

@keyframes vn-pulso {
	0% { transform: scale(1); opacity: .5; }
	70%, 100% { transform: scale(1.35); opacity: 0; }
}

.vn-whatsapp-texto {
	padding-right: 4px;
}

@media (max-width: 767px) {
	.vn-whatsapp {
		left: 16px;
		bottom: 56px;
		width: 56px;
		height: 56px;
		justify-content: center;
		padding: 0;
	}

	.vn-whatsapp-texto {
		display: none;
	}
}

/* Pestaña "Gestionar consentimiento" (Complianz). */
.cmplz-btn.cmplz-manage-consent {
	border: 1px solid var(--vn-borde) !important;
	border-radius: 12px 12px 0 0 !important;
	background: #fff !important;
	color: var(--vn-morado-profundo) !important;
	font-family: var(--vn-fuente) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	box-shadow: var(--vn-sombra) !important;
}

/* --- Animaciones al hacer scroll ---------------------------------------------- */
/* Aparecer suave, una sola vez (ver vitalnet_animaciones_script en functions.php). */
.vn-revela {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s var(--vn-curva), transform .7s var(--vn-curva);
}

.vn-revela.is-visible {
	opacity: 1;
	transform: none;
}

/* Animación del tema (WOW): recorrido más corto y salida más suave que los 45 px / 1,2 s originales. */
@keyframes PXLfadeInUp {
	0% {
		opacity: 0;
		transform: translate3d(0, 24px, 0);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

.wow.PXLfadeInUp.animated {
	animation-duration: .8s !important;
	animation-timing-function: cubic-bezier(.2, .7, .2, 1) !important;
}

/* Respeta la preferencia de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
	.wow {
		visibility: visible !important;
		animation: none !important;
	}

	*,
	*:before,
	*:after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.pxl-button .btn:hover,
	.elementor-button:hover,
	.pxl-icon-box3.style-1:hover {
		transform: none;
	}
}

/* ==========================================================================
   Módulos: capturas reales del sistema ("En pantalla")
   ========================================================================== */
.e-con.vn-capturas-seccion {
	padding: 40px max(24px, calc((100% - 1240px) / 2)) 96px;
}

.vn-capturas-destacada {
	max-width: 1080px;
	margin: 0 auto 32px;
}

.vn-capturas-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.vn-capturas-grid:has(> :nth-child(2):last-child),
.vn-capturas-grid:has(> :nth-child(4):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vn-capturas-grupo + .vn-capturas-grupo {
	margin-top: 56px;
}

.vn-capturas-grupo h3 {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--vn-tinta);
}

.vn-capturas-grupo h3::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--vn-borde);
}

.vn-captura {
	margin: 0;
}

.vn-captura a {
	display: block;
	overflow: hidden;
	background: var(--vn-blanco);
	border: 1px solid var(--vn-borde);
	border-radius: var(--vn-radio);
	box-shadow: var(--vn-sombra);
	transition: transform .35s var(--vn-curva), box-shadow .35s var(--vn-curva);
	cursor: zoom-in;
}

.vn-captura a:hover {
	transform: translateY(-4px);
	box-shadow: var(--vn-sombra-alta);
}

.vn-captura-marco {
	display: flex;
	gap: 6px;
	padding: 10px 14px;
	background: var(--vn-tinte);
	border-bottom: 1px solid var(--vn-borde);
}

.vn-captura-marco i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(51, 45, 122, .18);
}

.vn-captura img {
	display: block;
	width: 100%;
	height: auto;
}

.vn-capturas-grid .vn-captura img {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: left top;
}

.vn-captura figcaption {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--vn-texto);
}

.vn-capturas-destacada figcaption {
	text-align: center;
	font-size: 16px;
}

.vn-capturas-nota {
	margin: 36px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--vn-texto);
	opacity: .8;
}

@media (max-width: 1024px) {
	.vn-capturas-grid,
	.vn-capturas-grid:has(> :nth-child(2):last-child),
	.vn-capturas-grid:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 767px) {
	.e-con.vn-capturas-seccion {
		padding-bottom: 64px;
	}

	.vn-capturas-grid,
	.vn-capturas-grid:has(> :nth-child(2):last-child),
	.vn-capturas-grid:has(> :nth-child(4):last-child) {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vn-captura a,
	.vn-captura a:hover {
		transition: none;
		transform: none;
	}
}

/* ==========================================================================
   Portada: collage de capturas en "Nuestros proyectos destacados"
   ========================================================================== */
.vn-collage {
	position: relative;
	width: min(1180px, calc(100% - 48px));
	height: 600px;
	margin: 64px auto 0;
}

.elementor-92 .elementor-element-607c948 > .elementor-widget-wrap:has(.vn-collage) {
	padding-bottom: 104px;
}

.vn-collage-item {
	position: absolute;
	margin: 0;
	overflow: hidden;
	background: var(--vn-blanco);
	border-radius: 14px;
	box-shadow: 0 30px 60px -20px rgba(5, 4, 30, .6), 0 0 0 1px rgba(255, 255, 255, .08);
	transition: transform .5s var(--vn-curva), box-shadow .5s var(--vn-curva);
}

.vn-collage-item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: left top;
}

/* Cada captura con su posición, tamaño y giro: una composición escalonada, no una cuadrícula. */
.vn-collage-item--1 { left: 0; top: 6%; width: 52%; transform: rotate(-4deg); z-index: 2; }
.vn-collage-item--2 { right: 0; top: 0; width: 46%; transform: rotate(3deg); z-index: 3; }
.vn-collage-item--3 { left: 27%; top: 38%; width: 44%; transform: rotate(-1deg); z-index: 5; }
.vn-collage-item--4 { right: 2%; top: 55%; width: 38%; transform: rotate(4deg); z-index: 4; }
.vn-collage-item--5 { left: 3%; top: 60%; width: 30%; transform: rotate(-6deg); z-index: 1; }

.vn-collage-item:hover {
	transform: rotate(0) scale(1.04);
	z-index: 6;
	box-shadow: 0 40px 80px -24px rgba(5, 4, 30, .75), 0 0 0 1px rgba(255, 255, 255, .15);
}

/* Las capturas del fondo quedan con un velo morado para dar profundidad. */
.vn-collage-item--1::after,
.vn-collage-item--5::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(94, 88, 220, .28), rgba(13, 12, 56, .35));
	pointer-events: none;
	transition: opacity .5s var(--vn-curva);
}

.vn-collage-item:hover::after {
	opacity: 0;
}

.vn-collage-anillo {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 560px;
	height: 560px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.vn-collage-anillo--2 {
	width: 380px;
	height: 380px;
	border-color: rgba(152, 191, 142, .35);
	transform: translate(-30%, -60%);
}

.vn-collage-sello {
	position: absolute;
	left: 50%;
	bottom: -18px;
	z-index: 7;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--vn-blanco);
	white-space: nowrap;
	background: var(--vn-verde) var(--vn-degradado-verde);
	border-radius: 999px;
	box-shadow: 0 12px 24px -8px rgba(25, 132, 79, .6);
	transform: translateX(-50%);
}

@media (max-width: 1024px) {
	.vn-collage {
		height: 480px;
	}

	.vn-collage-anillo {
		width: 420px;
		height: 420px;
	}
}

/* En celular, cuatro capturas en dos columnas con un giro leve. */
@media (max-width: 767px) {
	.vn-collage {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
		height: auto;
		margin-top: 40px;
		padding-bottom: 36px;
	}

	.vn-collage-item {
		position: relative;
		inset: auto;
		width: auto;
	}

	.vn-collage-item--1 { transform: rotate(-2deg); }
	.vn-collage-item--2 { transform: rotate(2deg); }
	.vn-collage-item--3 { transform: rotate(1.5deg); }
	.vn-collage-item--4 { transform: rotate(-1.5deg); }
	.vn-collage-item--5,
	.vn-collage-anillo {
		display: none;
	}

	.vn-collage-sello {
		bottom: 0;
		font-size: 13px;
	}

	.elementor-92 .elementor-element-607c948 > .elementor-widget-wrap:has(.vn-collage) {
		padding-bottom: 56px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vn-collage-item,
	.vn-collage-item:hover {
		transition: none;
	}
}

/* Portada: anuncio "Próximamente: asistente de IA", debajo de la tarjeta de cifras. */
/* Mismo ancho y alineación que la tarjeta de cifras (.vn-proof-wrap). */
.e-con.vn-ia-wrap {
	--padding-top: 40px;
	--padding-bottom: 8px;
	width: calc(100% - 48px);
	max-width: 100%;
	margin: 0 auto;
}

.vn-ia {
	position: relative;
	display: flex;
	align-items: center;
	gap: 28px;
	padding: 32px 36px;
	overflow: hidden;
	border-radius: 20px;
	background: radial-gradient(120% 140% at 100% 0%, rgba(94, 88, 220, .55) 0%, rgba(94, 88, 220, 0) 55%), var(--vn-noche);
	box-shadow: var(--vn-sombra-alta);
	color: #fff;
}

.vn-ia::after {
	content: "";
	position: absolute;
	right: -70px;
	bottom: -90px;
	width: 240px;
	height: 240px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 50%;
	pointer-events: none;
}

.vn-ia-icono {
	flex: none;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 18px;
	background: var(--vn-degradado);
	box-shadow: 0 0 0 6px rgba(94, 88, 220, .18);
	font-size: 32px;
}

.vn-ia-texto {
	flex: 1;
	min-width: 0;
}

.vn-ia-etiqueta {
	display: inline-block;
	margin-bottom: 8px;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--vn-degradado-verde);
	color: var(--vn-noche);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.vn-ia h2 {
	margin: 0 0 6px;
	color: #fff;
	font-size: 24px;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.vn-ia p {
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: 16px;
	line-height: 1.6;
}

.vn-ia-boton {
	position: relative;
	z-index: 1;
	flex: none;
	padding: 14px 24px;
	border-radius: 999px;
	background: #fff;
	color: var(--vn-noche);
	font-weight: 700;
	white-space: nowrap;
	transition: transform .2s ease, box-shadow .2s ease;
}

.vn-ia-boton:hover,
.vn-ia-boton:focus-visible {
	color: var(--vn-noche);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

@media (max-width: 1024px) {
	.vn-ia {
		flex-wrap: wrap;
	}

	.vn-ia-boton {
		margin-left: 100px;
	}
}

@media (max-width: 767px) {
	.e-con.vn-ia-wrap {
		--padding-top: 24px;
	}

	.vn-ia {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
		padding: 28px 24px;
	}

	.vn-ia-icono {
		width: 56px;
		height: 56px;
		font-size: 26px;
	}

	.vn-ia h2 {
		font-size: 21px;
	}

	.vn-ia-boton {
		margin-left: 0;
		white-space: normal;
	}
}

.vn-ia-boton i {
	margin-right: 6px;
	color: var(--vn-verde);
	font-size: 1.15em;
	vertical-align: -2px;
}