/* Carrusel Flip para Elementor (sobre Swiper) */

.vfce {
	/* Valores por defecto; Elementor / el render los sobre-escriben. */
	--vfce-per-view: 2.5;
	--vfce-card-h: 220px;
	--vfce-gap: 16px;
	--vfce-radius: 14px;
	--vfce-align: center;
	--vfce-text-align: center;
	--vfce-img-fit: cover;
	--vfce-img-w: 100%;

	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	/* Corta cualquier desborde lateral (coverflow/rueda/cards y la media tarjeta
	   de "per view" decimal) para que NUNCA genere scroll horizontal en la
	   página. Solo el eje X: el eje Y queda libre para que el arco de la "rueda"
	   pueda bajar sin recortarse. */
	overflow-x: clip;
}

.vfce *,
.vfce *::before,
.vfce *::after {
	box-sizing: border-box;
}

/* El contenedor de Swiper. Sin overflow propio: lo maneja Swiper (así el
   modo “cards” puede mostrar el mazo apilado). */
.vfce-main {
	position: relative;
}

.vfce-swiper-el {
	width: 100%;
}

/* Alto según orientación. */
.vfce-horizontal .vfce-swiper-el {
	height: var(--vfce-card-h);
}

.vfce-vertical .vfce-swiper-el {
	height: calc(
		var(--vfce-per-view) * var(--vfce-card-h) +
		(var(--vfce-per-view) - 1) * var(--vfce-gap)
	);
}

/* Efectos de una tarjeta a la vez: siempre el alto de una tarjeta. */
.vfce-fade .vfce-swiper-el,
.vfce-cube .vfce-swiper-el,
.vfce-cards .vfce-swiper-el,
.vfce-flip .vfce-swiper-el {
	height: var(--vfce-card-h);
}

/* Rueda (arco): dejamos que las tarjetas de los lados bajen por la curva sin
   recortarse, y suavizamos el render de las transformaciones. */
.vfce-wheel .vfce-swiper-el {
	overflow: visible;
}

.vfce-wheel .swiper-slide {
	will-change: transform, opacity;
}

/* Alto base de cada tarjeta. En vertical Swiper lo recalcula (inline) según
   las tarjetas visibles; este valor evita que se colapsen si Swiper tarda. */
.vfce-slide {
	height: var(--vfce-card-h);
}

/* Apilado vertical incluso antes de que Swiper añada su clase. */
.vfce-vertical .swiper-wrapper {
	flex-direction: column;
}

/* ─────────────── Móvil: sin carrusel (todas las tarjetas a la vista) ───────────────
   El JS pone .vfce-stacked y NO instancia Swiper. Aquí deshacemos todo lo que
   asume un carrusel: alto fijo, recorte, transformaciones de los modos 3D,
   flechas, paginación y miniaturas. Los !important son necesarios porque
   compiten con estilos en línea de Swiper (si quedaron) y con los efectos. */
.vfce-stacked .vfce-swiper-el {
	height: auto !important;
	overflow: visible !important;
}

.vfce-stacked .swiper-wrapper {
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
	transform: none !important;
}

.vfce-stacked .swiper-slide,
.vfce-stacked .vfce-slide {
	width: 100% !important;
	height: var(--vfce-card-h) !important;
	margin: 0 0 var(--vfce-gap) 0 !important;
	transform: none !important;
	opacity: 1 !important;
	z-index: auto !important;
}

.vfce-stacked .swiper-slide:last-child {
	margin-bottom: 0 !important;
}

/* La info y el "scrim" solo se ven en la activa; apilado no hay activa. */
.vfce-stacked .vfce-front-info,
.vfce-stacked .vfce-scrim {
	opacity: 1 !important;
	transform: none !important;
}

/* Controles que no tienen sentido sin carrusel. */
.vfce-stacked .vfce-nav,
.vfce-stacked .vfce-pagination,
.vfce-stacked .vfce-thumbs-el {
	display: none !important;
}

/* ─────────────── Tarjeta ─────────────── */
.vfce-card {
	position: relative;
	height: 100%;
}

.vfce-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.vfce-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: var(--vfce-valign, center);
	align-items: var(--vfce-align);
	text-align: var(--vfce-text-align);
	border-radius: var(--vfce-radius);
	overflow: hidden;
}

.vfce-face-front {
	background-color: #ffffff;
}

/* Cara "hover" (antes "reverso"): fondo, título y texto los define Elementor
   (pestaña Hover en Tarjeta/Título/Texto). Estos son los valores por defecto.
   Se sube la especificidad (.vfce …) para que el blanco por defecto gane al
   color normal del título/texto, que comparten la misma clase. */
.vfce-face-back {
	background-color: #6d28d9;
	gap: 4px;
}

.vfce .vfce-face-back .vfce-icon {
	color: #ffffff;
}

.vfce .vfce-face-back .vfce-icon svg {
	fill: #ffffff;
}

.vfce .vfce-face-back .vfce-title {
	color: #ffffff;
}

.vfce .vfce-face-back .vfce-text {
	color: rgba(255, 255, 255, 0.88);
}

.vfce-face-back .vfce-btn {
	margin-top: 10px;
}

/* ── Animación GIRAR (3D) ── */
.vfce-flipfx-flip .vfce-card {
	perspective: 1200px;
}

.vfce-flipfx-flip .vfce-card-inner {
	transform-style: preserve-3d;
	transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.vfce-flipfx-flip .vfce-face {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.vfce-flipfx-flip .vfce-face-front {
	transform: rotateY(0deg);
}

.vfce-flipfx-flip .vfce-face-back {
	transform: rotateY(180deg);
}

.vfce-flipfx-flip:not(.vfce-trigger-click) .vfce-has-flip:hover .vfce-card-inner,
.vfce-flipfx-flip:not(.vfce-trigger-click) .vfce-has-flip:focus-within .vfce-card-inner {
	transform: rotateY(180deg);
}

/* Auto-flip: la tarjeta ACTIVA se gira sola (sin pasar el mouse). */
.vfce-autoflip.vfce-flipfx-flip .swiper-slide-active .vfce-has-flip .vfce-card-inner {
	transform: rotateY(180deg);
}

/* ── Animaciones SIN girar (la cara hover aparece encima del frente) ── */
.vfce-flipfx-fade .vfce-face-back,
.vfce-flipfx-zoom .vfce-face-back,
.vfce-flipfx-slide .vfce-face-back {
	z-index: 3;
	opacity: 0;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.vfce-flipfx-zoom .vfce-face-back {
	transform: scale(0.9);
}

.vfce-flipfx-slide .vfce-card-inner {
	overflow: hidden;
	border-radius: var(--vfce-radius);
}

.vfce-flipfx-slide .vfce-face-back {
	transform: translateY(100%);
}

.vfce-flipfx-fade:not(.vfce-trigger-click) .vfce-has-flip:hover .vfce-face-back,
.vfce-flipfx-fade:not(.vfce-trigger-click) .vfce-has-flip:focus-within .vfce-face-back,
.vfce-flipfx-zoom:not(.vfce-trigger-click) .vfce-has-flip:hover .vfce-face-back,
.vfce-flipfx-zoom:not(.vfce-trigger-click) .vfce-has-flip:focus-within .vfce-face-back,
.vfce-flipfx-slide:not(.vfce-trigger-click) .vfce-has-flip:hover .vfce-face-back,
.vfce-flipfx-slide:not(.vfce-trigger-click) .vfce-has-flip:focus-within .vfce-face-back {
	opacity: 1;
	transform: none;
}

/* Auto-flip: la tarjeta ACTIVA revela sola su cara hover (sin girar). */
.vfce-autoflip.vfce-flipfx-fade .swiper-slide-active .vfce-has-flip .vfce-face-back,
.vfce-autoflip.vfce-flipfx-zoom .swiper-slide-active .vfce-has-flip .vfce-face-back,
.vfce-autoflip.vfce-flipfx-slide .swiper-slide-active .vfce-has-flip .vfce-face-back {
	opacity: 1;
	transform: none;
}

/* ─────────────── Frente ─────────────── */
.vfce-icon {
	display: inline-flex;
	line-height: 1;
	color: #6d28d9;
	font-size: 40px;
}

.vfce-icon svg {
	width: 40px;
	height: 40px;
}

.vfce-title {
	margin: 0;
	color: #1f2937;
	font-size: 1.15em;
	line-height: 1.25;
}

.vfce-text {
	margin: 0;
	color: #6b7280;
	font-size: 0.92em;
	line-height: 1.45;
}

.vfce-text p {
	margin: 0;
}

/* Envoltura de la info (título + texto) para poder mostrarla/ocultarla. */
.vfce-front-info {
	position: relative;
	z-index: 2;
}

/* Envoltorio del contenido (título + texto + botón) — permite darle un padding
   propio desde Estilo → Tarjeta. */
.vfce-content {
	width: 100%;
	text-align: var( --vfce-text-align );
}

/* En el flipbox (cara "hover") el contenido se reparte en vertical según
   "Orientación del contenido": el grupo de arriba (ícono/título/texto) y el
   botón se separan al elegir "Espacio al medio". */
.vfce-face-back .vfce-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	align-items: var( --vfce-align );
}

.vfce-fb-top {
	width: 100%;
	text-align: var( --vfce-text-align );
}

/* ─────────────── Imagen principal ─────────────── */
.vfce-img {
	display: block;
	max-width: 100%;
}

/* Modo “Cubrir”: la imagen llena la tarjeta y el texto va encima abajo.
   La especificidad extra (.vfce-face.vfce-face-cover) gana al padding que
   inyecta Elementor sobre .vfce-face. */
.vfce-imgmode-cover .vfce-face.vfce-face-cover {
	justify-content: var(--vfce-valign, flex-end);
	padding: 0;
}

.vfce-imgmode-cover .vfce-face-cover .vfce-front-info {
	padding: 18px;
	width: 100%;
}

.vfce-imgmode-cover .vfce-face-cover .vfce-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var( --vfce-img-fit, cover );
	z-index: 0;
}

.vfce-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.62 ), rgba( 0, 0, 0, 0.12 ) 45%, rgba( 0, 0, 0, 0 ) 72% );
}

/* Modo “Arriba”: la imagen va arriba y el texto debajo. */
.vfce-imgmode-inline .vfce-img {
	position: relative;
	z-index: 0;
	width: var( --vfce-img-w, 100% );
	height: var( --vfce-img-h, 120px );
	object-fit: var( --vfce-img-fit, cover );
	border-radius: var( --vfce-img-radius, calc( var( --vfce-radius ) * 0.7 ) );
	margin-bottom: 12px;
}

/* Mostrar la info solo en la tarjeta activa (centro). */
.vfce-info-active-only .vfce-front-info,
.vfce-info-active-only .vfce-scrim {
	opacity: 0;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.vfce-info-active-only .vfce-front-info {
	transform: translateY( 8px );
}

.vfce-info-active-only .swiper-slide-active .vfce-front-info,
.vfce-info-active-only .swiper-slide-active .vfce-scrim {
	opacity: 1;
	transform: none;
}

/* ─────────────── Botón (flipbox) ─────────────── */
.vfce-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: 30px;
	background-color: #ffffff;
	color: #6d28d9;
	font-size: 0.9em;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.vfce-btn:hover,
.vfce-btn:focus {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.20);
}

/* Ícono del botón. */
.vfce-btn-ic {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.vfce-btn-ic svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.vfce-btn-ic i {
	font-size: 1em;
	line-height: 1;
}

/* Ícono a la derecha del texto. */
.vfce-btnic-right .vfce-btn {
	flex-direction: row-reverse;
}

/* ─────────────── Modo NORMAL: tarjeta activa resaltada ───────────────
   Las tarjetas que no están al centro se encogen y se atenúan; ese encogido
   deja un espacio alrededor (parece un “margen”). Solo se aplica si está
   activo "Resaltar la tarjeta del centro" (clase .vfce-emphasis). */
.vfce-emphasis.vfce-normal .swiper-slide {
	transition: transform 0.45s ease, opacity 0.45s ease;
	opacity: 0.5;
	transform: scale(0.88);
}

.vfce-emphasis.vfce-normal .swiper-slide-active {
	opacity: 1;
	transform: scale(1);
}

/* ─────────────── Modo INFINITO: velocidad lineal (marquee) ─────────────── */
.vfce-infinite .swiper-wrapper {
	transition-timing-function: linear !important;
}

/* ─────────────── Flechas ─────────────── */
.vfce-nav {
	position: absolute;
	z-index: 6;
	display: flex;
	gap: 10px;
	pointer-events: none;
}

.vfce-arrow {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* border-box con !important: si el tema fuerza content-box + padding, el
	   botón crecería y se ovalaría; con border-box el padding queda dentro. */
	box-sizing: border-box !important;
	/* Nunca encoger ni crecer dentro del flex del .vfce-nav (si no, el ancho se
	   reduce y el botón queda ovalado / "aplastado"). */
	flex: 0 0 auto;
	/* Anular con !important cualquier min-width/min-height que el tema ponga a
	   los <button> (muchos temas los fijan con !important; si no, al bajar el
	   "Tamaño del botón" el ancho queda atascado en ese mínimo y se aplasta). */
	min-width: 0 !important;
	min-height: 0 !important;
	width: 42px;
	height: 42px;
	/* Refuerzo: si por lo que sea solo se fija una dimensión, mantener cuadrado. */
	aspect-ratio: 1 / 1;
	/* Padding propio con !important (por defecto 0) para anular el padding que el
	   tema mete a los <button> con !important, que ensancha el botón y lo aplasta.
	   El control "Espacio interior" escribe la variable --vfce-arrow-pad. */
	padding: var( --vfce-arrow-pad, 0px ) !important;
	border: none;
	border-radius: 50%;
	background-color: #6d28d9;
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
	font-size: 18px;
	transition: opacity 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
}

/* Flecha por defecto (SVG hijo directo). */
.vfce-arrow > svg {
	width: 55%;
	height: 55%;
}

/* Las flechas por defecto apuntan según el eje del carrusel. */
.vfce-vertical .vfce-arrow > svg {
	transform: rotate(90deg);
}

/* Ícono personalizado de la flecha (no se rota; lo elige la usuaria). */
.vfce-arrow-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.vfce-arrow-ic svg {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
}

.vfce-arrow-ic i {
	font-size: 1.15em;
	line-height: 1;
}

.vfce-arrow:hover {
	filter: brightness(1.08);
}

.vfce-arrow.vfce-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

/* ── Posición AUTOMÁTICA: las flechas se separan a los extremos ── */
.vfce-arrows-auto.vfce-horizontal .vfce-nav {
	inset: 0;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0 8px;
}

.vfce-arrows-auto.vfce-vertical .vfce-nav {
	inset: 0;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
}

/* ── Posición PERSONALIZADA: cada flecha se ancla y se desplaza por su cuenta ──
   Anclaje (izq/centro/der · arriba/centro/abajo) + posición (offset) por flecha,
   vía las vars --vfce-ahx (horizontal) y --vfce-avy (vertical) de cada botón. */
.vfce-arrows-custom .vfce-nav {
	position: absolute;
	inset: 0;
	display: block;
	padding: 0;
}

.vfce-arrows-custom .vfce-arrow {
	position: absolute;
}

/* Anclaje horizontal + offset. */
.vfce-arrows-custom .vfce-arrow.vfce-ah-left {
	left: var( --vfce-ahx, 0px );
	right: auto;
}

.vfce-arrows-custom .vfce-arrow.vfce-ah-right {
	right: var( --vfce-ahx, 0px );
	left: auto;
}

.vfce-arrows-custom .vfce-arrow.vfce-ah-center {
	left: 50%;
	right: auto;
}

/* Anclaje vertical + offset. */
.vfce-arrows-custom .vfce-arrow.vfce-av-top {
	top: var( --vfce-avy, 0px );
	bottom: auto;
}

.vfce-arrows-custom .vfce-arrow.vfce-av-bottom {
	bottom: var( --vfce-avy, 0px );
	top: auto;
}

.vfce-arrows-custom .vfce-arrow.vfce-av-middle {
	top: 50%;
	bottom: auto;
}

/* Cuando un eje va "centrado", su offset entra en el translate. */
.vfce-arrows-custom .vfce-arrow.vfce-ah-center.vfce-av-top,
.vfce-arrows-custom .vfce-arrow.vfce-ah-center.vfce-av-bottom {
	transform: translateX( calc( -50% + var( --vfce-ahx, 0px ) ) );
}

.vfce-arrows-custom .vfce-arrow.vfce-av-middle.vfce-ah-left,
.vfce-arrows-custom .vfce-arrow.vfce-av-middle.vfce-ah-right {
	transform: translateY( calc( -50% + var( --vfce-avy, 0px ) ) );
}

.vfce-arrows-custom .vfce-arrow.vfce-ah-center.vfce-av-middle {
	transform: translate( calc( -50% + var( --vfce-ahx, 0px ) ), calc( -50% + var( --vfce-avy, 0px ) ) );
}

/* ─────────────── Paginación ─────────────── */
.vfce-pagination {
	position: relative;
	left: auto;
	right: auto;
	top: auto;
	bottom: auto;
	width: 100%;
	margin-top: 14px;
	text-align: center;
	line-height: 1;
}

/* Puntitos siempre en fila, aunque el carrusel sea vertical. */
.vfce-pagination.swiper-pagination-bullets .swiper-pagination-bullet {
	display: inline-block;
	margin: 0 4px;
}

.vfce-pagination .swiper-pagination-bullet {
	background: rgba( 109, 40, 217, 0.35 );
	opacity: 1;
}

.vfce-pagination .swiper-pagination-bullet-active {
	background: #6d28d9;
}

/* Barra de progreso: en flujo, no absoluta sobre el carrusel. */
.vfce-pagination.swiper-pagination-progressbar {
	position: relative;
	height: 4px;
	border-radius: 4px;
	background: rgba( 109, 40, 217, 0.2 );
}

.vfce-pagination.swiper-pagination-fraction {
	font-weight: 600;
	color: #6d28d9;
}

/* ─────────────── Miniaturas ─────────────── */
.vfce-thumbs-el {
	width: 100%;
}

.vfce-thumbs-bottom .vfce-thumbs-el {
	margin-top: 12px;
}

.vfce-thumbs-top .vfce-thumbs-el {
	margin-bottom: 12px;
}

.vfce-thumb {
	height: var( --vfce-thumb-h, 70px );
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 8px;
	background: #f3f4f6;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.25s ease, outline-color 0.25s ease;
	outline: 2px solid transparent;
	outline-offset: -2px;
}

.vfce-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vfce-thumb-label {
	padding: 4px 8px;
	font-size: 0.8em;
	font-weight: 600;
	color: #374151;
	text-align: center;
}

.vfce-thumbs-el .swiper-slide-thumb-active {
	opacity: 1;
	outline-color: #6d28d9;
}

/* ─────────────── Aviso vacío ─────────────── */
.vfce-empty {
	padding: 24px;
	text-align: center;
	color: #6b7280;
	background: #f3f4f6;
	border: 1px dashed #d1d5db;
	border-radius: 12px;
}

/* ─────────────── Abrir la info con un botón (clic) ─────────────── */

/* Botón "Ver información" sobre el frente (solo en modo clic). Su color,
   fondo, redondeo, padding y distancia inferior se ajustan desde
   Estilo → Botón "Ver información". */
.vfce-info-btn {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 22px;
	border: none;
	border-radius: 30px;
	background-color: #6d28d9;
	color: #ffffff;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	transition: transform 0.2s ease, filter 0.2s ease, opacity 0.25s ease, background-color 0.2s ease;
}

.vfce-info-btn:hover,
.vfce-info-btn:focus {
	transform: translateX(-50%) translateY(-2px);
	filter: brightness(1.06);
}

.vfce-info-btn-ic {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.vfce-info-btn-ic svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.vfce-info-btn-ic i {
	font-size: 1em;
	line-height: 1;
}

/* Con la info abierta, el botón del frente se oculta (en los modos sin giro
   la cara de info tapa el frente, pero el botón iría por encima). */
.vfce-has-flip.vfce-flipped .vfce-info-btn {
	opacity: 0;
	pointer-events: none;
}

/* Botón de cerrar (×) en la cara de la información. */
.vfce-info-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	color: #ffffff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.vfce-info-close:hover {
	background: rgba(255, 255, 255, 0.4);
}

/* La clase .vfce-flipped (que agrega el clic) revela la info igual que el
   hover, para cada animación. */
.vfce-flipfx-flip .vfce-has-flip.vfce-flipped .vfce-card-inner {
	transform: rotateY(180deg);
}

.vfce-flipfx-fade .vfce-has-flip.vfce-flipped .vfce-face-back,
.vfce-flipfx-zoom .vfce-has-flip.vfce-flipped .vfce-face-back,
.vfce-flipfx-slide .vfce-has-flip.vfce-flipped .vfce-face-back {
	opacity: 1;
	transform: none;
}

/* ─────────── Mazo al costado (efecto "creative") ───────────
   La tarjeta activa va al frente y las de atrás asoman como tiras a un lado.
   El alto es el de una tarjeta y dejamos overflow visible para que las tiras
   del mazo no se recorten; el padding en .vfce-main les da aire dentro de
   .vfce (que recorta el desborde lateral con overflow-x: clip). */
.vfce-stack .vfce-swiper-el {
	height: var(--vfce-card-h);
	overflow: visible;
}

/* El margen va SOLO del lado por donde asoma el mazo (no en ambos), para que
   el otro lado no quede con espacio vacío. */
.vfce-stack-right .vfce-main {
	padding-right: 44px;
}

.vfce-stack-left .vfce-main {
	padding-left: 44px;
}