/**
 * Wideum Core — legacy stylesheet.
 * Only the parts the migrated site still needs:
 *  (a) the theme :root design tokens,
 *  (b) the component classes the conserved JS drives (.logo-row*, .hm-products*, .features*),
 *  (c) the full pricing family (.prc-products*),
 *  (d) small utilities (.w-pretitle, .w-shadow, .w-gradient-1..4).
 * Image url()s were repointed to this plugin's assets/images/ copies.
 */

/******************** (a) VARIABLES / DESIGN TOKENS ***********************/
:root {
	/* COLORS */
	--black: #000;
	--white: #fff;
	--light-gray: #F7F8FA;
	--dark-blue: #00175C;
	--indigo-blue: #00007D;
	--main-blue: #1CA3B5;

	--turquoise: #4ADBC4;

	--gradient-light: linear-gradient(114.35deg, #5D3ABA 1.67%, #6A7AE7 26.9%, #46DBCA 60.86%, #C7F956 94.82%);
	--gradient-dark: linear-gradient(114.35deg, #5D3ABA 1.67%, #6A7AE7 26.9%, #46DBCA 60.86%, #CCE537 94.82%);
	--gradient-cold: linear-gradient(322.21deg, #7BA3FF 43.33%, #7793F4 48.3%, #6657CD 67.51%, #5F3FBD 76.05%, #5D38B8 88.85%, #5A2DB1 114.46%);
	--gradient-warm: linear-gradient(90deg, #3B919D -50.65%, #49D4C1 33.97%, #AAF16F 85.07%, #B8F25C 88.26%, #D4F438 96.24%, #E6F621 102.63%, #ECF619 105.82%);


	/*FONTS*/
	--primary-font-family: "museo-sans-rounded", sans-serif;

	/* FONT-WEIGHTS */
	--bold: 700;
	--medium: 500;
	--regular: 300;

	/* FONT-SIZES + FONT-SPACING */
	--title-large-size: 60px;
	--title-large-lineheight: 66px;
	--title-regular-size: 48px;
	--title-regular-lineheight: 53px;
	--title-small-size: 32px;
	--title-small-lineheight: 35px;

	--text-large-size: 24px;
	--text-large-lineheight: 34px;
	--text-regular-size: 18px;
	--text-regular-lineheight: 25px;
	--text-small-size: 16px;
	--text-small-lineheight: 22px;
	--text-extrasmall-size: 13px;
	--text-extrasmall-lineheight: 19px;

	/* SPACING */
	--container: 1800px;
	--container-fit: 900px;
	--section-spacing: 70px;
	--margin-section-large: 60px;
	--margin-section-medium: 45px;
	--margin-section-regular: 30px;
	--margin-section-small: 15px;
	--margin-section-extrasmall: 5px;

	/* OTHERS */
	--box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.05);;
	--border-radius: 10px;
}
@media (max-width: 600px) {
	:root {
		--section-spacing: 45px;
	}
}

/******************** (b) LOGO ROW ***********************/
.logo-row {
	padding: calc(var(--section-spacing)/4) 0px;
	background: white;
	margin: auto;
	overflow: hidden;
	position: relative;
	width: 100%;
}
.logo-row__container {
	display: flex;
	width: 100%;
	gap: var(--margin-section-large);
}
.logo-row:not(.logo-row--scrolled) .logo-row__container {
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--margin-section-regular);
}
.logo-row__logo-container {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: max-content;
	max-width: 210px;
}
.logo-row__logo {
	width: 100%;
	height: auto;
	object-fit: contain;
	max-height: 70px;
	filter: brightness(0);
	opacity: 0.3;
}
@media(max-width: 600px) {
	section.logo-row {
		padding-top: var(--margin-section-regular) !important;
	}
}

/* Logo carousel: native Elementor Image Carousel (Swiper) replacing the JS
   marquee. The free widget has no image-filter control and custom_css is Pro,
   so the grayscale/opacity treatment (matching the original faded logos) plus
   consistent sizing and vertical centering are applied here via the
   'w-logo-carousel' class the mapper puts on the widget wrapper. */
.w-logo-carousel .swiper-slide-image {
	filter: grayscale(1);
	opacity: 0.6;
	max-height: 70px;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
	object-fit: contain;
}
.w-logo-carousel .swiper-slide,
.w-logo-carousel .swiper-slide-inner {
	display: flex;
	align-items: center;
	justify-content: center;
}
.w-logo-carousel .elementor-image-carousel.swiper-wrapper { align-items: center; }
.w-logo-carousel-section { background: white; overflow: hidden; }

/******************** (b) HOME PRODUCTS ***********************/
.hm-products,
.section-bg-container + .container {
	position: relative;
}
.section-bg-container {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	top: 0;
	left: 0;
}
.section-bg {
	width: 96%;
	height: 100%;
	background-color: var(--light-gray);
	border-radius: var(--border-radius);
	max-width: 1550px;
}
@media(min-width: 2000px) {
	.section-bg {
		width: calc(100% - var(--margin-section-large)*2);
		max-width: var(--container);
	}
}
.section-bg.section-bg--image {
	background-position: calc(100% + 80px);
	background-size: 56%;
	background-repeat: no-repeat;
}
.hm-products__product {
	width: 32%;
}
.hm-products__card {
	width: 100%;
	padding: var(--margin-section-medium);
	box-sizing: border-box;
	height: 100%;
	border-radius: var(--border-radius);
	position: relative;
	cursor: pointer;
}
.hm-products__product.active .hm-products__card {
	background: var(--gradient-light);
}
.hm-products__product.active .hm-products__card-border {
	content: "";
	position: absolute;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	top: 3px;
	left: 3px;
	background: var(--white);
	border-radius: var(--border-radius);
}
.hm-products__icon-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: max-content;
	margin-bottom: var(--margin-section-regular);
	position: relative;
}
.hm-products__icon {
	width: 100%;
	height: auto;
	object-fit: contain;
	max-height: 50px;
}
.hm-products__text {
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	color: var(--dark-blue);
	margin-bottom: var(--margin-section-regular);
	position: relative;
}
.hm-products__link {
	position: relative;
	width: max-content;
	margin: 0;
}
.hm-products__images-container {
	margin-top: var(--section-spacing);
}
.hm-products__image-container:not(.active) {
	visibility: hidden;
}
.hm-products__image-container {
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: visible;
}
.hm-products__image {
	width: 100%;
	height: auto;
	object-fit: contain;
}
@media(max-width: 1050px) {
	.hm-products__card {
		padding: var(--margin-section-regular);
	}
}
@media(max-width: 800px) {
	.hm-products__product {
		width: 100%;
	}
	.hm-products__images-container {
		display: none;
	}
	.hm-products__responsive-image-container {
		display: block;
		margin: var(--margin-section-regular) 0 0;
	}
	.hm-products__cards-container {
		gap: var(--margin-section-large);
		margin-top: var(--margin-section-large);
	}
	.hm-products__card {
		height: auto;
		padding: 0;
		cursor: default;
	}
	.hm-products__product.active .hm-products__card-border {
		display: none;
	}
	.hm-products__product.active .hm-products__card {
		background: no-repeat;
	}
	.hm-products__text {
		margin-bottom: var(--margin-section-small);
	}
}

/******************** (b) FEATURES ***********************/
.features__text-container {
	width: 45%;
}
.features__image-container {
	width: 50%;
	display: flex;
}
.features__item-box {
	border-radius: var(--border-radius);
	padding: 15px;
	position: relative;
	cursor: pointer;
}
.features__item-container.active .features__item-box {
	background: var(--gradient-light);
	cursor: default;
}
.features__item-container:not(.active) .features__item-box {
	opacity: 0.6;
}
.features__item-container.active .features__item-box-border {
	content: "";
	position: absolute;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	top: 2px;
	left: 2px;
	background: var(--white);
	border-radius: var(--border-radius);
}
.features__item-title {
	position: relative;
	font-weight: var(--medium);
	color: var(--dark-blue);
	padding-left: 40px;
	margin-bottom: var(--margin-section-extrasmall);
}
.features__item-title-icon-container {
	position: absolute;
	content: "";
	width: 30px;
	height: 30px;
	top: -2px;
	left: 0;
	overflow: hidden;
}
.features__item-title-icon {
	position: absolute;
	content: "";
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	top: 0;
	left: 0;
}
.features__item-container:not(.active) .features__item-title-icon {
	filter: drop-shadow(25px 25px var(--dark-blue));
	top: -25px;
	left: -25px;
}
.features__item-text {
	position: relative;
	font-size: var(--text-extrasmall-size);
	line-height: var(--text-extrasmall-lineheight);
	margin: 0;
	color: var(--dark-blue);
	opacity: 0.8;
}
.features__item-container:not(:last-child) {
	margin-bottom: var(--margin-section-small);
}
.features__item-image-container {
	display: flex;
	justify-content: center;
	align-items: center;
}
.features__item-image-container:not(.active) {
	visibility: hidden;
	position: absolute;
}
@media(max-width: 1050px) {
	.features__item-container.active .features__item-image-container {
		display: block !important;
		visibility: visible !important;
		position: relative !important;
		margin-top: var(--margin-section-small);
	}
	.features__text-container {
		width: 100%;
		max-width: 550px;
		margin: 0 auto;
	}
	.features__image-container {
		display: none;
	}
}

/******************** (c) PRICING ***********************/
.simple-heading + .prc-products {
	margin-top: -50px;
}
.prc-products__products {
	gap: var(--margin-section-regular) var(--margin-section-small);
}
.prc-products__product-card {
	width: calc(33% - 12px);
	padding: var(--margin-section-regular);
	box-sizing: border-box;
	border-radius: var(--border-radius);
	position: relative;
	min-width: 180px;
	cursor: pointer;
}
.prc-products__product-card.active,
.prc-products__product-card.active .prc-products__tag {
	background: var(--gradient-light);
	cursor: default;
}
.prc-products__product-card.active .prc-products__card-border {
	border: unset;
}
.prc-products__card-border,
.prc-products__tag-border {
	content: "";
	position: absolute;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	top: 3px;
	left: 3px;
	background: var(--white);
	border-radius: var(--border-radius);
	border: 1px solid #DEDEDE;
	box-sizing: border-box;
}
.prc-products__tag-container {
	position: absolute;
	top: -12px;
	width: 100%;
	left: 0;
	display: flex;
	justify-content: center;
}
.prc-products__tag {
	width: max-content;
	position: relative;
	border-radius: var(--border-radius);
}
.prc-products__tag-text {
	font-size: var(--text-extrasmall-size);
	line-height: var(--text-extrasmall-lineheight);
	font-weight: var(--medium);
	position: relative;
	margin: 0;
	opacity: 0.6;
	padding: 7px 12px;
}
.prc-products__heading {
	display: flex;
	align-items: center;
	gap: 0 var(--margin-section-small);
	margin-bottom: var(--margin-section-small);
	position: relative;
}
.prc-products__name {
	font-size: var(--title-small-size);
	line-height: var(--title-small-lineheight);
	margin: 0;
	font-weight: var(--bold);
	color: var(--dark-blue);
}
.prc-products__icon-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: max-content;
	max-width: 150px;
}
.prc-products__icon {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.prc-products__text {
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	position: relative;
	color: var(--dark-blue);
	opacity: 0.8;
}
.prc-products__features {
	position: relative;
	margin-bottom: var(--margin-section-small);
}
.prc-products__feature {
	font-size: var(--text-extrasmall-size);
	line-height: var(--text-extrasmall-lineheight);
	padding-left: 17px;
	background-image: url(../images/icon-check-blue.svg);
	background-repeat: no-repeat;
	background-size: 13px;
	background-position: 0 2px;
	box-sizing: border-box;
	color: var(--dark-blue);
	margin-bottom: 10px;
}
.prc-products__compatibility {
	display: flex;
	justify-content: space-around;
	gap: var(--margin-section-extrasmall);
	flex-wrap: wrap;
	position: relative;
}
.prc-products__compatibility-title {
	width: 100%;
	text-align: center;
	font-size: var(--text-extrasmall-size);
	line-height: var(--text-extrasmall-lineheight);
	font-weight: var(--medium);
	color: var(--dark-blue);
	margin-bottom: var(--margin-section-extrasmall);
}
.prc-products__compatibility-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: max-content;
	max-width: 70px;
}
.prc-products__compatibility-icon img {
	width: 100%;
	height: auto;
	object-fit: contain;
	max-height: 80px;
	height: 45px;
}
.prc-products__button {
	margin: var(--margin-section-small) 0 0;
}
.prc-products__product-card:not(.active):hover .prc-products__button {
	background-color: #6EE2D0;
}
.prc-products__product-card:not(.active):hover .prc-products__button.button--blue {
	background-color: #1D3377;
}
.prc-products__product-card.inactive .prc-products__card-border {
	background-color: transparent;
}
.prc-products__product-card.inactive .prc-products__tag-border {
	background-color: #f7f8fa;
}
.prc-products__product-card.inactive .prc-products__tag-text,
.prc-products__product-card.inactive .prc-products__icon-container,
.prc-products__product-card.inactive .prc-products__name,
.prc-products__product-card.inactive .prc-products__text,
.prc-products__product-card.inactive .prc-products__features,
.prc-products__product-card.inactive .prc-products__compatibility {
	filter: grayscale(0.6);
	opacity: 0.3;
}
.prc-products__plans,
.prc-products__plan-container {
	display: none;
}
.prc-products__plan-container.active {
	display: flex;
}
.prc-products__plan-container {
	justify-content: center;
	gap: var(--margin-section-regular);
	width: max-content;
	margin: 0 auto;
	max-width: 100%;
	position: relative;
}
.prc-products__plan-container--selector {
	padding-top: 55px;
}
.prc-products__currency-selector-container {
	position: absolute;
	top: 0;
	right: 0;
}
.prc-products__currency-selector-container:after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	right: 12px;
	background-size: contain;
	background-image: url(../images/menu-arrow-icon.svg);
	background-repeat: no-repeat;
	top: calc(50% - 2px);
	filter: invert(100%);
	opacity: 0.5;
}
.prc-products__currency-selector {
	font-size: var(--text-extrasmall-size);
	line-height: var(--text-extrasmall-lineheight);
	font-family: var(--primary-font-family);
	appearance: none;
	padding: 10px 25px 10px 10px;
	background: #FFFFFF;
	border: 1px solid #E5E8EF;
	border-radius: 3px;
	cursor: pointer;
	color: #99A2BE;
}
.prc-products__plans {
	background-color: var(--white);
	border-radius: var(--border-radius);
	margin-top: var(--margin-section-large);
	padding: var(--margin-section-large);
}
.prc-products__plan-card {
	width: 100%;
	border: 1px solid #E5E8EF;
	border-radius: var(--border-radius);
	box-sizing: border-box;
	color: var(--dark-blue);
	max-width: 380px;
}
.prc-products__plan-logo {
	display: flex;
	justify-content: center;
	align-items: center;
	width: max-content;
	margin-bottom: var(--margin-section-small);
}
.prc-products__plan-logo img {
	width: 100%;
	height: auto;
	object-fit: contain;
}
.prc-products__plan-price {
	margin-bottom: var(--margin-section-extrasmall);
}
.prc-products__plan-price span[currency="$"] {
	display: none;
}
.prc-products__price-subtext {
	font-size: var(--text-extrasmall-size);
	line-height: var(--text-extrasmall-lineheight);
	font-weight: var(--medium);
	opacity: 0.6;
}
.prc-products__plan-button {
	display: block;
}
.prc-products__plan-info, .prc-products__plan-features-container {
	padding: var(--margin-section-regular);
}
.prc-products__plan-features-container {
	background-color: #F7F9FA;
}
.prc-products__plan-features-title {
	font-size: var(--text-extrasmall-size);
	line-height: var(--text-extrasmall-lineheight);
	opacity: 0.6;
}
.prc-products__plan-feature {
	font-size: var(--text-extrasmall-size);
	line-height: var(--text-extrasmall-lineheight);
	opacity: 0.6;
	padding-left: 20px;
	background-image: url(../images/icon-check.svg);
	background-repeat: no-repeat;
	background-size: 14px;
	background-position: 0 2px;
	box-sizing: border-box;
}
.prc-products__plan-feature--not-checked {
	background-image: url(../images/icon-cross-red.svg);
}
@media(max-width: 1050px) {
	.prc-products__product-card {
		width: calc(33% - 12px);
	}
}
@media(max-width: 800px) {
	.prc-products__product-card {
		width: calc(50% - 12px);
	}
	.prc-products__plans {
		padding: 10px;
	}
	.prc-products__plan-container {
		flex-wrap: wrap;
		width: 100%;
		max-width: 410px;
	}
	.prc-products__plan-card {
		width: 100%;
		min-width: unset;
	}
}

/******************** (d) UTILITIES ***********************/
/* Pretitle: indigo, small caps-ish label (matches the theme pretitle styling). */
.w-pretitle {
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	color: var(--indigo-blue);
	font-weight: var(--medium);
	margin-bottom: var(--margin-section-extrasmall);
}
@media(min-width: 1050px) {
	.w-pretitle {
		font-size: var(--text-regular-size);
		line-height: var(--text-regular-lineheight);
	}
}

/* Standard theme box shadow. */
.w-shadow {
	box-shadow: var(--box-shadow);
}

/* The four theme gradients as background helpers. */
.w-gradient-1 {
	background: var(--gradient-light);
}
.w-gradient-2 {
	background: var(--gradient-dark);
}
.w-gradient-3 {
	background: var(--gradient-cold);
}
.w-gradient-4 {
	background: var(--gradient-warm);
}

/******************** (e) FLEX / LAYOUT UTILITIES ***********************/
/* Theme flex helpers the mappers emit alongside the Elementor containers. */
.flex-row { display: flex; }
.flex-row--space { justify-content: space-around; }
.flex-row--even { justify-content: space-evenly; }
.flex-row--around { justify-content: space-around; }
.flex-row--center { justify-content: center; }
.flex-row--reverse { flex-direction: row-reverse; }
.flex-row--right { justify-content: flex-end; }
.flex-column--center,
.flex-row--vcenter { align-items: center; }
.flex-row--vtop { align-items: flex-start; }
.flex-row--vbottom { align-items: flex-end; }
.flex-row--wrap { flex-wrap: wrap; }
.flex-column { display: flex; flex-direction: column; }
.flex-column--left { align-items: flex-start; }
.flex-grow { flex-grow: 1; }
.align-center { text-align: center; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.no-margin { margin: 0; }

/******************** (f) SECTION TITLES / HEADINGS ***********************/
/* Section-level headings (section-title, page-title, subsection-title, pretitle).
   The mapper puts these classes on the Elementor heading/text WRAPPER, so we style
   both the wrapper and the inner Elementor title/description so the value wins. */
.pre-title,
.pre-title .elementor-heading-title {
	font-weight: var(--medium);
	color: var(--indigo-blue);
}
.pre-title { margin-bottom: var(--margin-section-regular); }

.page-title,
.page-title .elementor-heading-title {
	font-size: var(--title-large-size);
	line-height: var(--title-large-lineheight);
	font-weight: var(--bold);
	color: var(--dark-blue);
}
.page-title { margin-bottom: var(--margin-section-medium); }
.page-subtitle,
.page-subtitle .elementor-widget-container,
.page-subtitle p {
	font-size: var(--text-regular-size);
	line-height: var(--text-regular-lineheight);
	font-weight: var(--regular);
}
.page-subtitle { margin: var(--margin-section-regular) 0; }
.page-title.align-center,
.page-subtitle.align-center {
	max-width: 850px;
	margin-inline: auto;
}

.section-title,
.section-title .elementor-heading-title {
	font-size: var(--title-regular-size);
	line-height: var(--title-regular-lineheight);
	font-weight: var(--bold);
	color: var(--dark-blue);
}
.section-title { margin-bottom: var(--margin-section-large); }
.section-subtitle,
.section-subtitle .elementor-widget-container,
.section-subtitle p {
	font-size: var(--text-regular-size);
	line-height: var(--text-regular-lineheight);
	font-weight: var(--regular);
}
.section-subtitle { margin: var(--margin-section-small) 0 var(--margin-section-large); }
.section-title.align-center { max-width: 1080px; margin-inline: auto; }
.section-subtitle.align-center { max-width: 930px; margin-inline: auto; }

.subsection-title,
.subsection-title .elementor-heading-title {
	font-size: var(--title-small-size);
	line-height: var(--title-small-lineheight);
	font-weight: var(--bold);
	color: var(--dark-blue);
}
.subsection-title { margin-bottom: var(--margin-section-small); }
.subsection-title-small,
.subsection-title-small .elementor-heading-title {
	font-size: var(--text-large-size);
	line-height: var(--text-large-lineheight);
	font-weight: var(--bold);
	color: var(--dark-blue);
}
.subsection-title-small { margin-bottom: var(--margin-section-small); }

.button-container { gap: var(--margin-section-small) var(--margin-section-regular); }

@media(max-width: 600px) {
	.page-title,
	.page-title .elementor-heading-title {
		font-size: var(--title-small-size);
		line-height: var(--title-small-lineheight);
	}
	.section-title,
	.section-title .elementor-heading-title {
		font-size: var(--title-small-size);
		line-height: var(--title-small-lineheight);
		margin-bottom: var(--margin-section-regular);
	}
	.section-subtitle,
	.section-subtitle p {
		font-size: var(--text-small-size);
		line-height: var(--text-small-lineheight);
	}
	.subsection-title,
	.subsection-title .elementor-heading-title {
		font-size: var(--text-large-size);
		line-height: var(--text-large-lineheight);
	}
}

/******************** (f) BUTTONS ***********************/
/* Legacy .button family: used by [H] headings and some card CTAs even though
   Elementor has its own buttons. Kept for visual parity with the original theme. */
.button {
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	font-weight: var(--bold);
	text-align: center;
	padding: 13px 26px;
	color: #fff;
	background-color: var(--turquoise);
	transition: all 0.2s linear;
	display: inline-block;
	cursor: pointer;
	border-radius: var(--border-radius);
	position: relative;
}
.button:hover { background-color: #6EE2D0; }
.button:active { background-color: #43c5b0; }
.button.button--transparent {
	border: 2px solid var(--turquoise);
	padding: 11px 24px;
	background-color: transparent;
	color: var(--turquoise);
}
.button.button--transparent:hover { background-color: rgba(255, 255, 255, 0.25); }
.button.button--transparent:active { background-color: rgba(255, 255, 255, 0.15); }
.button--blue { background-color: var(--dark-blue); }
.button--blue:hover { background-color: #1D3377; }
.button:disabled,
.button--blue:disabled,
.button.disabled,
.button--blue.disabled {
	background-color: #cccce5;
	color: #9999CB;
	cursor: default;
}

/******************** (f) LINKS / ARROW LINKS ***********************/
.link,
.link .elementor-heading-title {
	font-size: var(--text-regular-size);
	line-height: var(--text-regular-lineheight);
	font-weight: var(--bold);
	color: var(--main-blue);
	cursor: pointer;
}
.link:hover {
	border-bottom: 2px solid var(--main-blue);
	transition: none;
}
.link.link--arrow {
	position: relative;
	padding-right: 18px;
	background-image: url(../images/link-arrow.svg);
	background-position: right 6px;
	background-repeat: no-repeat;
	background-size: 11px;
	width: max-content;
}
/* Arrow link when placed on an Elementor button/heading wrapper. */
.link--arrow .elementor-button-text,
.link--arrow .elementor-heading-title { display: inline; }

/******************** (g) THEME-BUILDER HEADER (.wideum-header) ***********************/
/* The Elementor header template carries the .wideum-header class. It floats
   transparently over the hero and turns solid white + shadowed when sticky
   (.elementor-sticky--active), mirroring the original .main-header behaviour. */
.wideum-header {
	background-color: transparent;
	transition: background-color .3s linear, box-shadow .3s linear;
	z-index: 99990;
}
.wideum-header.elementor-sticky--active,
.wideum-header.elementor-sticky--effects {
	background-color: #fff;
	box-shadow: var(--box-shadow);
}
/* Nav Menu (.e-n-menu) link appearance to match the original menu. */
.wideum-header .e-n-menu-title-text,
.wideum-header .e-n-menu-heading .e-n-menu-title-text {
	font-family: var(--primary-font-family);
	font-weight: var(--medium);
	color: var(--dark-blue);
	transition: color .15s linear;
}
.wideum-header .e-n-menu-item > a:hover .e-n-menu-title-text,
.wideum-header .e-n-menu-item.e-current .e-n-menu-title-text,
.wideum-header .e-n-menu-item:hover .e-n-menu-title-text {
	color: var(--turquoise);
}
.wideum-header .e-n-menu-dropdown-icon svg,
.wideum-header .e-n-menu-dropdown-icon i { color: var(--dark-blue); }
/* Dropdown panels (.e-n-menu-content) styled like the original .sub-menu. */
.wideum-header .e-n-menu-content {
	background-color: var(--white);
	box-shadow: var(--box-shadow);
	border: 1px solid #CCD1DF;
	border-radius: var(--border-radius);
	padding: var(--margin-section-medium);
}
/* Header buttons: reuse the legacy pill button styling. */
.wideum-header .elementor-button {
	border-radius: var(--border-radius);
	font-weight: var(--bold);
}

/******************** (g) THEME-BUILDER FOOTER (.elementor-location-footer) ***********************/
/* Footer template appearance approximating the original .footer + banner. */
.elementor-location-footer { position: relative; }
.elementor-location-footer a { color: var(--dark-blue); transition: color .15s linear; }
.elementor-location-footer a:hover { color: var(--turquoise); }
/* Footer banner box (dark-blue rounded CTA) if rebuilt in the footer. */
.footer-banner__box,
.elementor-location-footer .w-footer-banner {
	background-color: var(--dark-blue);
	color: var(--white);
	text-align: center;
	padding: calc(var(--margin-section-large)*1.5) var(--margin-section-large);
	border-radius: var(--border-radius);
}
.elementor-location-footer .w-footer-banner .elementor-heading-title { color: var(--white); }

/******************** (h) HERO SECTIONS (.w-hero) ***********************/
/* Hero container: two-column row layout and gradient-title support from the
   original hero-shot. The old doubled top padding (section-spacing*2) existed to
   clear the ORIGINAL transparent OVERLAY header; the Elementor theme-builder
   header is now a solid, in-flow bar that already occupies its own height, so the
   hero only needs normal section spacing on top — otherwise a ~140px empty white
   band ("franja") appears between the header and the hero content. */
.w-hero {
	padding-top: 40px;
	padding-bottom: calc(var(--section-spacing)*1.5);
	position: relative;
	overflow: hidden;
}
.w-hero.w-hero-extra-slide { padding-top: var(--section-spacing); }
/* White-text variant when the hero sits on a dark/image background.
   Doubled-up selectors (.w-hero.w-hero--white ...) so they OUT-SPECIFY the
   Elementor kit/document rules (.elementor-widget-heading .elementor-heading-title
   { color: var(--e-global-color-primary) }), which tie at (0,2,0) but load later. */
.w-hero--white,
.w-hero.w-hero--white .elementor-widget-heading .elementor-heading-title,
.w-hero.w-hero--white .elementor-widget-text-editor,
.w-hero.w-hero--white p { color: var(--white); }
.w-hero .w-pretitle { margin-bottom: var(--margin-section-small); }
/* Gradient hero title helper (was .hero-shot__title--gradient). */
.w-hero__title--gradient .elementor-heading-title,
.hero-shot__title--gradient {
	background: var(--gradient-light);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
@media(max-width: 800px) {
	.w-hero { flex-direction: column; }
	.w-hero > .elementor-element { width: 100% !important; }
}

/******************** (i) GENERIC CARD GRIDS (w-* families) ***********************/
/* The mappers wrap Elementor Icon Box / Image Box widgets in containers with the
   w-* grid classes; the card class sits on the widget wrapper. These rules give the
   cards the theme's radius / border / shadow / padding that the widgets don't add. */

/* Shared card shell (white rounded box with soft border + shadow). */
.w-card,
.w-large-card,
.w-benefit-card,
.w-why-card,
.w-team-card,
.w-progressive-card,
.w-case-study-card,
.w-featured-product,
.video-cards__item,
.product-cards__product-card {
	background: var(--white);
	border: 1px solid #E5E8EF;
	box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
	box-sizing: border-box;
	height: 100%;
}
/* Icon-box internals: icon on top, spacing between icon / title / text. */
.w-card .elementor-icon-box-icon,
.w-large-card .elementor-icon-box-icon,
.w-benefit-card .elementor-icon-box-icon,
.w-why-card .elementor-icon-box-icon,
.w-col .elementor-icon-box-icon,
.w-value-item .elementor-icon-box-icon,
.w-progressive-card .elementor-icon-box-icon {
	margin-bottom: var(--margin-section-small);
}
.w-card .elementor-icon-box-title,
.w-large-card .elementor-icon-box-title,
.w-benefit-card .elementor-icon-box-title,
.w-why-card .elementor-icon-box-title,
.w-col .elementor-icon-box-title,
.w-progressive-card .elementor-icon-box-title {
	color: var(--dark-blue);
	font-weight: var(--bold);
	margin-bottom: 10px;
}
.w-card .elementor-icon-box-description,
.w-large-card .elementor-icon-box-description,
.w-benefit-card .elementor-icon-box-description,
.w-why-card .elementor-icon-box-description,
.w-progressive-card .elementor-icon-box-description {
	color: var(--dark-blue);
	opacity: 0.6;
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	margin: 0;
}

/* --- w-cards (from .cards) --- */
.w-cards-grid { gap: var(--margin-section-small); flex-wrap: wrap; }
.w-card {
	flex: 0 1 calc(33.333% - var(--margin-section-small));
	min-width: 300px;
	padding: var(--margin-section-medium) var(--margin-section-regular);
	display: flex;
	flex-direction: column;
}
.w-card.link--arrow { position: relative; }

/* --- w-large-cards (from .large-cards) --- */
.w-large-cards-grid { gap: var(--margin-section-small); flex-wrap: wrap; }
.w-large-card {
	flex: 0 1 calc(33.333% - var(--margin-section-small));
	min-width: 300px;
	padding: var(--margin-section-medium) var(--margin-section-regular);
	display: flex;
	flex-direction: column;
}
.w-large-card .elementor-icon-box-icon {
	background-color: var(--light-gray);
	border-radius: var(--border-radius);
	padding: var(--margin-section-small);
	box-sizing: border-box;
	margin-bottom: var(--margin-section-regular);
}
.w-large-card .elementor-icon-box-description { color: #707070; opacity: 1; }

/* --- w-benefits (from .benefits) --- */
.w-benefits-grid { gap: var(--margin-section-regular); flex-wrap: wrap; }
.w-benefit-card {
	flex: 0 1 calc(25% - var(--margin-section-regular));
	min-width: 250px;
	padding: var(--margin-section-regular);
	border-color: rgba(222, 222, 222, 0.8);
}
.w-benefits-grid.threeColumns .w-benefit-card,
.w-benefits-grid.w-cols-3 .w-benefit-card { flex-basis: calc(30% - var(--margin-section-regular)); }
/* fiveColumns: a producció les 5 cards (~250px) es reparteixen 4 per fila + 1
   centrada a sota (no hi caben 5 a l'amplada boxed). ~22% → 4 per fila; la fila
   es centra via .w-benefits-grid > .e-con-inner{justify-content:center}. */
.w-benefits-grid.fiveColumns .w-benefit-card,
.w-benefits-grid.w-cols-5 .w-benefit-card { flex-basis: calc(22% - var(--margin-section-regular)); }
.w-benefit-card .elementor-icon-box-title {
	font-size: var(--title-regular-size);
	line-height: var(--title-regular-lineheight);
}

/* --- w-why (from .hm-why) --- */
.w-why-grid { gap: var(--margin-section-regular); flex-wrap: wrap; }
.w-why-card {
	flex: 0 1 32%;
	min-width: 260px;
	padding: var(--margin-section-regular);
	border-color: rgba(222, 222, 222, 0.8);
}
.w-why-card .elementor-icon-box-title {
	font-size: var(--title-large-size);
	line-height: var(--title-large-lineheight);
}

/* --- w-columns (from .columns) — no card box, just centred icon + small text --- */
.w-columns-grid { gap: var(--margin-section-regular); flex-wrap: wrap; }
.w-col {
	flex: 0 1 30%;
	min-width: 220px;
	max-width: 300px;
}
.w-col .elementor-icon-box-title {
	font-weight: var(--bold);
	color: var(--dark-blue);
	margin-bottom: 10px;
}
.w-col .elementor-icon-box-description {
	font-size: var(--text-extrasmall-size);
	line-height: var(--text-extrasmall-lineheight);
	color: var(--dark-blue);
	opacity: 0.6;
}

/* --- w-values (from .values) --- */
.w-values-grid {
	gap: var(--margin-section-large) var(--margin-section-small);
	flex-wrap: wrap;
}
.w-value-item {
	flex: 0 1 45%;
	min-width: 240px;
}
.w-value-item .elementor-icon-box-title {
	font-weight: var(--bold);
	color: var(--dark-blue);
}
.w-value-item .elementor-icon-box-description {
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	color: var(--dark-blue);
	opacity: 0.6;
}

/* --- w-team (from .team) — Elementor Image Box widgets --- */
.w-team-grid { gap: var(--margin-section-large) var(--margin-section-small); flex-wrap: wrap; }
.w-team-card {
	flex: 0 1 22%;
	min-width: 200px;
	padding: var(--margin-section-medium);
	text-align: center;
	color: var(--dark-blue);
}
.w-team-card .elementor-image-box-img {
	border-radius: var(--border-radius);
	overflow: hidden;
	margin-bottom: var(--margin-section-regular);
}
.w-team-card .elementor-image-box-title { font-weight: var(--bold); }
.w-team-card .elementor-image-box-description { opacity: 0.6; margin: 0; }

/* --- w-offices (from .offices) --- */
.w-offices { gap: var(--margin-section-regular); flex-wrap: wrap; }
.w-office-item,
.w-office-item .elementor-widget-container {
	padding-left: 37px;
	color: var(--black);
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	background-image: url(../images/icon-location.svg);
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: left -2px;
}
.w-office-item + .w-office-item { margin-top: var(--margin-section-regular); }
.w-office-item strong,
.w-office-item a { font-weight: var(--medium); color: var(--dark-blue); }
.w-office-item a { color: var(--turquoise); }
.w-office-item a:hover { text-decoration: underline; }

/* --- w-mision-vision (from .mision-vision) --- */
.w-mision-vision { gap: var(--margin-section-large); flex-wrap: wrap; }
.w-mv-item { flex: 0 1 45%; min-width: 260px; }
.w-mv-item .elementor-icon-box-title {
	font-weight: var(--bold);
	color: var(--dark-blue);
}

/* --- w-progressive-cards (from .progressive-cards) --- */
.w-progressive-cards .w-progressive-card,
.w-progressive-card {
	padding: var(--margin-section-medium) var(--margin-section-regular);
	display: flex;
	flex-direction: column;
}

/* --- w-case-studies (from .case-studies) --- */
.w-case-study-card {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--margin-section-large);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.w-case-study-card .elementor-heading-title { color: var(--dark-blue); }

/* --- w-featured-product (from .featured-product) --- */
.w-featured-product {
	padding: var(--margin-section-large);
	display: flex;
	flex-wrap: wrap;
	gap: var(--margin-section-large);
	align-items: center;
}

/* --- w-info-card / w-info-challenge (from .info-challenge) --- */
.w-info-card { padding: var(--margin-section-medium); }
.w-info-challenge { gap: var(--margin-section-large); flex-wrap: wrap; }
.info-challenge__company-name,
.info-challenge__company-name .elementor-heading-title {
	font-weight: var(--bold);
	color: var(--dark-blue);
	margin-bottom: var(--margin-section-extrasmall);
}

/* --- w-quotes / w-testimonials (from .quotes / .testimonials) --- */
.w-quotes .w-quote-card,
.w-testimonials .w-testimonial-card {
	background: #FFFFFF;
	border: 1px solid rgba(222, 222, 222, 0.8);
	box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
	padding: var(--margin-section-large);
	max-width: 1100px;
	margin: 0 auto;
}

/* --- w-new-feature (from .new-feature) — gradient promo box --- */
.w-new-feature {
	border-radius: var(--border-radius);
	background: var(--gradient-cold);
	box-shadow: var(--box-shadow);
	color: #fff;
	padding: var(--margin-section-large);
}
.w-new-feature .elementor-heading-title,
.w-new-feature p,
.w-new-feature li { color: #fff; }
.w-tag,
.w-tag .elementor-heading-title {
	display: inline-block;
	border-radius: 100px;
	background: var(--gradient-warm);
	padding: var(--margin-section-extrasmall) var(--margin-section-small);
	color: #000;
	font-weight: var(--bold);
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
}

/* --- w-image-content / w-text-image / w-text-video (two-column content rows) --- */
.w-image-content-row,
.w-text-image,
.w-text-video {
	gap: var(--margin-section-large);
	flex-wrap: wrap;
	align-items: center;
}
.w-image-content-head { margin-bottom: calc(var(--section-spacing)*1.3); }

@media(max-width: 1050px) {
	.w-card,
	.w-large-card { flex-basis: calc(50% - var(--margin-section-small)); }
	.w-benefit-card,
	.w-why-card { flex-basis: calc(50% - var(--margin-section-regular)); }
	.w-team-card { flex-basis: calc(50% - var(--margin-section-small)); }
}
@media(max-width: 800px) {
	.w-card,
	.w-large-card,
	.w-benefit-card,
	.w-why-card,
	.w-col,
	.w-value-item,
	.w-team-card,
	.w-mv-item { flex-basis: 100%; min-width: 0; }
}

/******************** (j) THEME-ORIGINAL SECTIONS PORTED VERBATIM ***********************/
/* These families keep their original theme class names in the mappers, so the
   theme CSS applies almost directly (classes land on Elementor wrappers). */

/* --- Simple heading --- */
.simple-heading__icon-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: max-content;
	margin: 0 auto var(--margin-section-small);
	min-width: 100px;
}
.simple-heading__icon { width: 100%; height: auto; object-fit: contain; }

/* --- Product cards --- */
.product-cards__container { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.product-cards__product { flex: 0 1 calc(25% - 10px); max-width: calc(25% - 10px); }
.product-cards__container--threeCols .product-cards__product { flex-basis: calc(33.3% - 10px); max-width: calc(33.3% - 10px); }
.product-cards__product-card {
	padding: var(--margin-section-regular);
	position: relative;
	display: flex;
	flex-direction: column;
}
.product-cards__logo-container { width: max-content; min-width: 55px; margin-bottom: var(--margin-section-small); }
.product-cards__logo { width: 100%; height: auto; object-fit: contain; max-height: 45px; }
.product-cards__image-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: var(--margin-section-small);
}
.product-cards__image { width: 100%; height: auto; object-fit: contain; }
.product-cards__text,
.product-cards__text p {
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	color: #707070;
	opacity: 0.8;
	flex-grow: 1;
}
.product-cards__link { display: inline-block; width: max-content; margin-top: var(--margin-section-regular); }
.product-cards__specs-container p { color: var(--dark-blue); }
.product-cards__button-container { margin-top: var(--margin-section-large); }
@media(max-width: 1050px) {
	.product-cards__product,
	.product-cards__container--threeCols .product-cards__product { flex-basis: calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media(max-width: 700px) {
	.product-cards__product,
	.product-cards__container--threeCols .product-cards__product { flex-basis: 100%; max-width: 100%; }
}

/* --- Video cards --- */
.video-cards__container { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--margin-section-regular) var(--margin-section-small); }
.video-cards__item {
	flex: 0 1 48%;
	min-width: 280px;
	border-color: rgba(222, 222, 222, 0.8);
	padding: var(--margin-section-regular);
}
.video-cards__video-container { margin-bottom: var(--margin-section-regular); }
.video-cards__text,
.video-cards__text p {
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	color: #707070;
}

/* --- FAQs (accordion styled like the original) --- */
.faqs__question { position: relative; }
.faqs__question-title,
.faqs__question-title .elementor-heading-title {
	font-weight: var(--medium);
	color: var(--dark-blue);
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	padding-right: var(--margin-section-medium);
	cursor: pointer;
}
.faqs__question--active .faqs__question-title { color: var(--turquoise); }
.faqs__question-text,
.faqs__question-text p {
	background-color: #F4FAFB;
	border-radius: var(--border-radius);
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	color: var(--dark-blue);
	opacity: 0.5;
}
.faqs__question-text { padding: 20px; margin-top: 20px; }

/* --- Map --- */
.map__title { max-width: 1100px !important; }
.map__container {
	border-radius: var(--border-radius);
	width: calc(100% - var(--margin-section-large)*2);
	margin: 0 auto;
	max-width: 1400px;
	overflow: hidden;
}

/* --- Careers (accordion list) --- */
.careers__item {
	padding: 20px 0 var(--margin-section-small);
	border-bottom: 1px solid var(--dark-blue);
	position: relative;
}
.careers__item-title-container {
	font-weight: var(--medium);
	color: var(--dark-blue);
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	padding-right: var(--margin-section-medium);
	cursor: pointer;
	position: relative;
}
.careers__item-tag,
.careers__item-tag .elementor-heading-title {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 100px;
	font-size: var(--text-extrasmall-size);
	line-height: var(--text-small-lineheight);
	color: var(--white);
}
.careers__item-pretitle,
.careers__item-pretitle .elementor-heading-title {
	font-size: var(--text-small-size);
	line-height: var(--text-small-lineheight);
	opacity: 0.4;
	margin-bottom: var(--margin-section-extrasmall);
}
.careers__item-title,
.careers__item-title .elementor-heading-title { font-weight: var(--medium); margin: 0; }
.careers__item-text {
	margin-top: 20px;
	background-color: #F4FAFB;
	padding: var(--margin-section-medium);
	border-radius: var(--border-radius);
}
.careers__item-text p { font-size: var(--text-small-size); line-height: var(--text-small-lineheight); color: #66749D; }
.careers__item-text .link { margin-top: var(--margin-section-regular); display: block; width: max-content; }

/* --- Progressive cards subtitle helper --- */
.progressive-cards__subtitle { color: var(--dark-blue); opacity: 0.6; }

/******************** (k) HOME PRODUCTS / FEATURES CONTAINERS ***********************/
/* Container-level spacing for the interactive home sections (JS already ported). */
.w-home-products { position: relative; }
.w-features { position: relative; }

/******************** (l) MEGA MENU — .wideum-header COMPAT ***********************/
/*
 * The wideum-megamenu widget renders the original menu markup
 * (.main-header__menu-container > .main-menu > .sub-menu) INSIDE Elementor's
 * header container .wideum-header, NOT inside the original <header
 * class="main-header">. Every menu/dropdown rule in wideum-theme.css already
 * matches without a .main-header ancestor (.main-menu, .sub-menu,
 * .main-header__menu-container, .responsive-menu, the mega-panel white bg /
 * radius / shadow / turquoise hover, and the <1280px hamburger switch), EXCEPT
 * the five rules below whose selectors are prefixed with ".main-header " — the
 * mega panels for .menu-product / .menu-industries and the sub-menu--open hover
 * padding. They are re-declared here also scoped to .wideum-header so the widget
 * reaches full parity inside the Elementor header. Values cloned verbatim from
 * wideum-theme.css (lines 571-574, 612-624).
 */
.wideum-header .main-menu > li.menu-item-has-children.sub-menu--open {
	padding-inline: 35px;
	margin: 0 -10px -25px -35px;
}
.wideum-header .main-menu > li.menu-product > .sub-menu {
	left: -100px;
}
.wideum-header .main-menu > li.menu-product > .sub-menu:before {
	left: 160px;
}
.wideum-header .main-menu > li.menu-industries > .sub-menu {
	left: -170px;
}
.wideum-header .main-menu > li.menu-industries > .sub-menu:before {
	left: 240px;
}

/******************** (m) CTA VARIANTS ***********************/
/*
 * Els mappers d'Elementor emeten classes utilitàries al WRAPPER del widget
 * botó (.w-btn-outline, .w-btn-blue, .w-btn-purple, .w-btn). El Kit d'Elementor
 * ja pinta el botó SÒLID per defecte igual que l'original .button (turquesa
 * #4ADBC4, radius 10, padding 13/26, blanc 700/16, hover #6EE2D0) via
 * `.elementor-kit-XXXX .elementor-button` (especificitat 0,2,0). Aquí definim
 * NOMÉS les variants que el Kit no cobreix, calcades del tema original
 * (wideum-theme.css: .button--transparent, .button--blue). Escopim els
 * selectors amb DUES classes al wrapper (.w-btn-*.elementor-widget-button) →
 * especificitat 0,3,0, que guanya el Kit independentment de l'ordre de càrrega.
 */

/* --- .w-btn-outline  ==  .button.button--transparent (outline turquesa) --- */
.w-btn-outline.elementor-widget-button .elementor-button,
.w-btn-outline .elementor-button.elementor-button {
	background-color: transparent;
	color: var(--turquoise, #4ADBC4);
	border: 2px solid var(--turquoise, #4ADBC4);
	/* 13/26 del sòlid menys els 2px de vora → mateixa petjada visual */
	padding: 11px 24px;
}
.w-btn-outline.elementor-widget-button .elementor-button:hover,
.w-btn-outline.elementor-widget-button .elementor-button:focus {
	background-color: rgba(255, 255, 255, 0.25);
	color: var(--turquoise, #4ADBC4);
}
.w-btn-outline.elementor-widget-button .elementor-button:active {
	background-color: rgba(255, 255, 255, 0.15);
	color: var(--turquoise, #4ADBC4);
}

/* --- .w-btn-blue  ==  .button--blue (sòlid blau fosc) --- */
.w-btn-blue.elementor-widget-button .elementor-button {
	background-color: var(--dark-blue, #00175C);
	color: #fff;
}
.w-btn-blue.elementor-widget-button .elementor-button:hover,
.w-btn-blue.elementor-widget-button .elementor-button:focus {
	background-color: #1D3377;
	color: #fff;
}

/* --- .w-btn  ==  botó sòlid per defecte (turquesa). El Kit ja ho fa; ho
 *     re-afirmem per si l'ordre de càrrega o una mida d'Elementor l'anul·la. --- */
.w-btn.elementor-widget-button .elementor-button {
	background-color: var(--turquoise, #4ADBC4);
	color: #fff;
}
.w-btn.elementor-widget-button .elementor-button:hover,
.w-btn.elementor-widget-button .elementor-button:focus {
	background-color: #6EE2D0;
	color: #fff;
}

/* --- .w-btn-purple  ==  píndola lila amb icona (CTA "calculate your
 *     Footprint" / "download the White Paper"). NOTA: a la home aquestes
 *     píndoles són GIFs incrustats dins el WYSIWYG (no widgets botó), per la
 *     qual cosa cap mapper emet encara .w-btn-purple. Deixem la utilitat
 *     preparada amb el gradient de marca (indigo→lila) i forma de píndola per
 *     si algun mapper la fa servir en el futur. L'espai per a la icona el
 *     gestiona la pròpia icona del widget botó d'Elementor. --- */
.w-btn-purple.elementor-widget-button .elementor-button {
	background: linear-gradient(135deg, #5D3ABA 0%, #6A7AE7 100%);
	color: #fff;
	border: 0;
	border-radius: 999px; /* píndola */
	padding: 12px 28px;
}
.w-btn-purple.elementor-widget-button .elementor-button:hover,
.w-btn-purple.elementor-widget-button .elementor-button:focus {
	background: linear-gradient(135deg, #52339F 0%, #5C6BD6 100%);
	color: #fff;
}
.w-btn-purple.elementor-widget-button .elementor-button .elementor-button-icon {
	display: inline-flex;
	align-items: center;
}

/* ============================================================
   (n) FOOTER — llistes de columnes sense pics + legal en línia
   ============================================================ */
.wideum-fcol-links { list-style: none; margin: 0; padding: 0; }
.wideum-fcol-links li { margin: 0 0 10px; }
.wideum-fcol-links a { color: rgba(0, 23, 92, 0.75); font-size: 14px; }
.wideum-fcol-links a:hover { color: var(--turquoise, #4ADBC4); }
.wideum-legal-menu a { display: inline-block; margin-right: 22px; color: #00175C; font-size: 13px; }

/******************** (m) FLEX UTILITIES vs ELEMENTOR CONTAINERS ***********************/
/*
 * Several converted sections carry the theme's flex utility classes on Elementor
 * containers (.e-con). Elementor lays out .e-con from its own CSS variables
 * (--justify-content etc.), which beat the theme utility rules by load order.
 * Re-declare the utilities through those variables so they win cleanly.
 */
.e-con.flex-row--center,
.e-con.e-con-inner.flex-row--center {
	--justify-content: center;
	justify-content: center;
}
.e-con.flex-row--space,
.e-con.e-con-inner.flex-row--space {
	--justify-content: space-between;
	justify-content: space-between;
}
.e-con.flex-row--vcenter,
.e-con.e-con-inner.flex-row--vcenter {
	--align-items: center;
	align-items: center;
}
/* Marquee logo strip: the theme's .logo-row{overflow:hidden} loses to Elementor's
   .e-con{overflow:var(--overflow)} (defaults to visible) by load order, so the
   3x-repeated logo ribbon widened the whole page (~5000px). Pin it via the variable. */
.e-con.logo-row {
	--overflow: hidden;
	overflow: hidden;
}
/* Footer banner: the converter gives it 40px side margins, but the container
   keeps Elementor's default --width:100%, so it overflowed the viewport by 80px
   (horizontal page scroll on every page with the banner). Subtract the margins. */
.e-con.w-footer-banner {
	--width: calc(100% - 80px);
}
/* Benefits section: 2% side margins + default --width:100% overflowed the page
   by ~32px on remote-atex / realwear / moziware. Same fix as the footer banner. */
.e-con.w-benefits {
	--width: calc(100% - 4%);
}
/* Title + subtitle pairs: the theme's `.section-title + .section-subtitle
   { margin-top:-35px }` compensated the original h2's big bottom margin. On
   converted pages both classes sit on Elementor WIDGET wrappers (whose inner
   headings have no such margin), so the -35px pulled the subtitle over the
   title (e.g. "Wideum is creating" on About). Neutralize it for widgets. */
.elementor-widget.section-title + .elementor-widget.section-subtitle {
	margin-top: 0;
}

/* ============================================================
   (o) WIDGETS CUSTOM — neutralitza el .container intern
   Dins d'Elementor el widget ja viu en un contenidor boxed (1280);
   el .container original (padding 0 10%) hi afegia una SEGONA
   restricció i les seccions quedaven massa estretes.
   ============================================================ */
.elementor-widget-wideum-features .container,
.elementor-widget-wideum-products-showcase .container,
.elementor-widget-wideum-pricing .container,
.elementor-widget-wideum-megamenu .container {
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
	width: 100%;
}

/* ============================================================
   (p) SUPER-REVISIÓ ESPAIATS/ALINEACIÓ — igualació amb producció
   Els grids de cards renderitzen la fila REAL a `.<grid> > .e-con-inner`
   (Elementor embolcalla els widgets dins .e-con-inner). Les regles de
   gap/wrap/justify/align s'han d'aplicar allà, no a la classe externa.
   ============================================================ */

/* --- (p.1) Cards de la MATEIXA fila totes IGUAL D'ALÇADA -------------------
   El height:100% del shell (secció i) es tractava com a cross-size definit i
   DESACTIVAVA l'estirament (align-items:stretch). Estirem el contenidor real i
   deixem que l'ítem creixi fins a l'alçada de la fila (height:auto). El shell,
   com que ÉS l'ítem flex, ja omple tota l'alçada estirada. */
.w-large-cards-grid > .e-con-inner,
.w-benefits-grid > .e-con-inner,
.cards__container > .e-con-inner,
.w-why-grid > .e-con-inner,
.w-cards-grid > .e-con-inner {
	align-items: stretch;
}
.w-large-cards-grid > .e-con-inner > .elementor-element,
.w-benefits-grid > .e-con-inner > .elementor-element,
.w-why-grid > .e-con-inner > .elementor-element,
.w-cards-grid > .e-con-inner > .elementor-element {
	height: auto;
}
/* Cards HTML: ARA les cards es renderitzen com a fills DIRECTES reals de
   `.cards__container` (un sol widget HTML per graella, com el bloc del tema),
   no com a widgets Elementor per card. Per tant NO cal encadenar height:100%
   pels wrappers Elementor (ja no existeixen) i el `.cards__card` ha de tenir
   height:auto perquè l'`align-items:stretch` natural del flex iguali l'alçada
   de totes les cards d'una fila (height:100% ho desactivava en resoldre's
   contra un contenidor d'alçada auto). */
.cards__card {
	height: auto;
	box-sizing: border-box;
}
.cards__card .cards__title { color: var(--dark-blue); }

/* --- (p.2) ELEMENTS (large_cards) ----------------------------------------- */
/* Capçalera a dues columnes: títol 40% / subtítol 60% (original
   .large-cards__title-container). */
.w-large-cards-head > .e-con-inner {
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--margin-section-regular);
}
.w-large-cards-head .elementor-widget.section-title { width: 40%; margin: 0; }
.w-large-cards-head .elementor-widget.section-subtitle { width: 60%; margin: 0; }
.w-large-cards-head .elementor-widget.section-subtitle .elementor-widget-container { margin: 0; }
@media (max-width: 767px) {
	.w-large-cards-head > .e-con-inner { flex-wrap: wrap; }
	.w-large-cards-head .elementor-widget.section-title,
	.w-large-cards-head .elementor-widget.section-subtitle { width: 100%; }
}
/* Contingut de la card alineat a l'ESQUERRA (prod) i icona GRAN dins la caixa
   grisa que ocupa tota l'amplada de la card. */
.w-large-card .elementor-icon-box-wrapper {
	text-align: left;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.w-large-card .elementor-icon-box-icon {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--light-gray);
	border-radius: var(--border-radius);
	padding: var(--margin-section-medium);
	margin-bottom: var(--margin-section-regular);
	box-sizing: border-box;
}
.w-large-card .elementor-icon-box-icon .elementor-icon { width: auto; }
.w-large-card .elementor-icon-box-icon svg,
.w-large-card .elementor-icon-box-icon img {
	width: auto;
	height: 90px;
	max-width: 100%;
}
.w-large-card .elementor-icon-box-content,
.w-large-card .elementor-icon-box-title,
.w-large-card .elementor-icon-box-description { text-align: left; }

/* --- (p.3) BENEFITS ------------------------------------------------------- */
/* Fila centrada: amb 5 cards a ~22% en caben 4 i la 5a queda centrada a sota
   (com prod). Cards de la mateixa alçada (stretch, dalt). */
.w-benefits-grid > .e-con-inner {
	justify-content: center;
}
/* Contingut alineat a l'ESQUERRA (icona max-content a l'esquerra, número i text
   a l'esquerra) — original .benefits__card. */
.w-benefit-card .elementor-icon-box-wrapper { text-align: left; }
.w-benefit-card .elementor-icon-box-icon { text-align: left; justify-content: flex-start; }
.w-benefit-card .elementor-icon-box-title,
.w-benefit-card .elementor-icon-box-description { text-align: left; }
/* CTA centrat sota les cards. */
.w-benefits .w-btn .elementor-button-wrapper,
.w-benefits .elementor-widget-button.w-btn { text-align: center; }
.w-benefits .w-btn { width: 100%; }

/* --- (p.4) HERO: logo de producte sobre el títol -------------------------- */
/* Mida natural limitada per alçada (~40px) i alineat a l'ESQUERRA, com prod
   (.hero-shot__icon-container width:max-content; .hero-shot__icon width:100%).
   Abans es forçava width:60px i sortia il·legible/centrat. */
.w-hero-icon { text-align: left; margin-bottom: var(--margin-section-regular); }
.w-hero-icon .elementor-widget-container { text-align: left; }
.w-hero-icon img {
	width: auto;
	height: auto;
	max-height: 42px;
	max-width: 220px;
	display: inline-block;
}

/* --- (p.5) Panell gris info_image: evita desbordament pel marge lateral 2% -- */
.e-con.w-info-image { --width: calc(100% - 4%); }

/* --- (p.6) DOTS de carrusel (hero nested + galeria d'imatges) -------------- */
/* Igual que els .slick-dots originals: rodonetes 15px turquesa, inactiva
   opacity .4, activa opacity 1, centrades sota, sense fletxes. */
.w-hero .swiper-pagination,
.elementor-widget-image-carousel .swiper-pagination {
	position: relative;
	margin-top: var(--margin-section-medium);
	line-height: 0;
}
.w-hero .swiper-pagination-bullet,
.elementor-widget-image-carousel .swiper-pagination-bullet {
	width: 15px;
	height: 15px;
	background-color: var(--turquoise);
	opacity: 0.4;
	border-radius: 100%;
	margin: 0 5px !important;
	transform: none;
}
.w-hero .swiper-pagination-bullet-active,
.elementor-widget-image-carousel .swiper-pagination-bullet-active {
	opacity: 1;
	background-color: var(--turquoise);
}
/* Sense fletxes al hero ni a la galeria. */
.w-hero .elementor-swiper-button,
.w-hero .swiper-button-next,
.w-hero .swiper-button-prev,
.elementor-widget-image-carousel .elementor-swiper-button {
	display: none !important;
}

/* ============================================================
   (q) PRODUCT-CARDS — banda grisa, alçades iguals, "See more" enllaç
   ============================================================ */
/* Panell gris 96%: evita desbordament lateral pel marge 2% (com benefits/info-image). */
.e-con.product-cards--visibleInfo { --width: calc(100% - 4%); }

/* Totes les cards de la fila IGUAL D'ALÇADA (la caixa blanca omple l'ítem estirat). */
.product-cards__container > .e-con-inner { align-items: stretch; }
.product-cards__container > .e-con-inner > .product-cards__product { height: auto; }
.product-cards__product > .e-con-inner { height: 100%; }
.product-cards__product-card { height: 100%; }

/* "See more" = enllaç de text amb fletxa (original .product-cards__link.link.link--arrow),
   NO un botó ple. Neutralitzem l'estil del widget botó d'Elementor. */
.product-cards__link .elementor-button,
.product-cards__link.elementor-widget-button .elementor-button {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--main-blue) !important;
	padding: 0 18px 0 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-size: var(--text-regular-size);
	line-height: var(--text-regular-lineheight);
	font-weight: var(--bold);
	background-image: url(../../../../themes/wideum/images/link-arrow.svg) !important;
	background-position: right 6px !important;
	background-repeat: no-repeat !important;
	background-size: 11px !important;
}
.product-cards__link .elementor-button-content-wrapper { justify-content: flex-start; }
.product-cards__link .elementor-button-icon { display: none; }
.product-cards__link .elementor-button:hover { text-decoration: none; }
.product-cards__link { text-align: left; }
.product-cards__link .elementor-widget-container { text-align: left; }

/* ============================================================
   (r) RESPONSIVE — correccions d'overflow i apilat mòbil
   ============================================================ */
/* (r.1) Cap desbordament horitzontal del document per panells off-canvas
   (menú responsive del megamenu posicionat fora de pantalla). overflow-x:clip
   no crea contenidor de scroll ni trenca position:sticky. */
html { overflow-x: clip; }
/* body també (com fa producció amb overflow-x:hidden): tanca el scrollWidth
   fantasma de +8/+30px que el panell off-canvas i les marquees deixaven. */
body { overflow-x: clip; }

/* (r.2) Menú hamburguesa: sempre 100vw i el switcher d'idioma no l'eixampla. */
@media (max-width: 1024px) {
	.responsive-menu {
		width: 100vw !important;
		max-width: 100vw !important;
		box-sizing: border-box;
	}
	.responsive-menu .main-header__language,
	.responsive-menu .main-header__language--mobile {
		max-width: 100%;
		flex-wrap: wrap;
	}
	/* El header (doc Theme Builder) té sub-contenidors que a mòbil es posicionen
	   fora de pantalla (menú desktop/altmenu ocult) i inflaven el scrollWidth del
	   document (+106px). A mòbil no hi ha mega-menús desplegables horitzontals, així
	   que retallem l'overflow-x del header. */
	.wideum-header,
	.elementor-location-header { overflow-x: clip; }
}

/* (r.3) Hero: el carrusel no ha de vessar horitzontalment i mostra 1 slide. */
.w-hero .elementor-widget-n-carousel,
.w-hero .swiper,
.w-hero .elementor-image-carousel-wrapper { overflow: hidden; }

/* (r.4) Pricing: a mòbil les cards de producte s'apilen a 1 columna. */
@media (max-width: 768px) {
	.prc-products__products { flex-direction: column; align-items: center; }
	.prc-products__product-card { width: 100% !important; max-width: 420px; }
	.prc-products__plans { flex-wrap: wrap; justify-content: center; }
}

/* (r.5) Paddings verticals de secció reduïts en mòbil (original --section-spacing
   passa de 70px a 45px < 600px → seccions ~105px baixen a ~68px). Reduïm el
   padding 105px que els mappers fixen a desktop perquè l'alçada mòbil no s'infli. */
@media (max-width: 600px) {
	.w-hero, .w-large-cards, .w-cards, .w-benefits, .w-info-image, .w-info-challenge,
	.w-features, .w-columns, .w-values, .w-team, .w-why, .w-text-video, .w-image-content,
	.product-cards, .case-studies, .w-testimonials, .w-mv, .w-quotes, .w-faqs,
	.w-progressive-cards, .w-simple-heading, .w-map, .w-offices {
		padding-top: 68px !important;
		padding-bottom: 68px !important;
	}
}

/* Panells grisos features/columns(product): amplada 96% sense desbordar (marge 2%). */
.e-con.w-features,
.e-con.w-columns:not(.w-columns--partners) { --width: calc(100% - 4%); }

/* ============================================================
   (s) FLAGS ACF PER PÀGINA (body_class des de wideum-core)
   ============================================================ */
/* hide_top_bar (p.ex. pàgines de trial): amaga la barra navy superior, com prod.
   El header és un doc Theme Builder d'Elementor: la barra és el contenidor
   .wideum-topbar (no el .top-bar del markup original del tema). */
body.w-hide-topbar .wideum-topbar,
body.w-hide-topbar .top-bar { display: none !important; }
/* hide_header_menu: amaga el menú principal del header. */
body.w-hide-header-menu .main-header__menu-container,
body.w-hide-header-menu .main-header__altmenu-container .alternative-menu,
body.w-hide-header-menu .responsive-menu-button { display: none !important; }

/* ============================================================
   (t) UNIFORMITAT DE CARDS NIADES — igualació d'alçada i espaiats vs producció
   [agent: nested-padding/uniformitat de blocs]
   Complementa la secció (p). Els blocs `cards` i `product_cards` ara es
   converteixen en mode FIDELITAT (una sola graella HTML amb fills directes
   reals, com el tema) → amplada/gap/alçada idèntics a prod pel CSS del tema.
   Aquí només queden els grids de contenidors NATIUS d'Elementor que encara
   no s'estiraven i els gaps que el mapper fixava diferent de producció.
   ============================================================ */

/* (t.1) Grids natius (card = contenidor Elementor .e-con dins .e-con-inner):
   estirem la fila real i deixem que cada card creixi fins a l'alçada de la
   fila (com fa (p.1) per large-cards/benefits/why/cards). Faltaven aquests: */
.w-progressive-grid > .e-con-inner,
.w-team-grid > .e-con-inner {
	align-items: stretch;
}
.w-progressive-grid > .e-con-inner > .elementor-element,
.w-team-grid > .e-con-inner > .elementor-element {
	height: auto;
	align-self: stretch;
}
/* Redundància defensiva: la card mai no ha de fixar una alçada que desactivi
   l'estirament de la fila. */
.w-progressive-card,
.w-team-card {
	height: auto;
}

/* (t.2) Gaps entre cards iguals a producció (el mapper posava 20px a tots).
   large-cards → 15px (--margin-section-small); benefits → 30px. */
.w-large-cards-grid > .e-con-inner { gap: 15px !important; }
.w-benefits-grid > .e-con-inner { gap: 30px !important; }

/* (t.3) product_cards (mode fidelitat): el tema espaia les cards amb MARGES
   (.product-cards__container{margin:-5px -10px}; .product-cards__product{margin:0 5px 10px}),
   NO amb gap. Una regla legacy (per a l'antiga estructura de widgets Elementor)
   afegia `gap:10px` al contenidor; sumat als marges del tema, 3 cards ja no hi
   cabien i wrappejaven a 2+1. L'anul·lem perquè, com a producció, 3 cards
   càpiguen en una sola fila. */
.product-cards__container { gap: 0 !important; }

/* (t.4) logo-row (marquee de logos de partners): el mapper fixava padding:0 al
   contenidor, però el tema li dona padding vertical calc(--section-spacing/4)
   (=17.5px a desktop) → a producció la banda de logos té ~35px d'aire total
   (dalt+baix). El restaurem (responsiu via la variable) perquè l'espai sobre i
   sota del carrusel coincideixi amb prod. */
.e-con.logo-row {
	padding-top: calc(var(--section-spacing) / 4) !important;
	padding-bottom: calc(var(--section-spacing) / 4) !important;
}

/* (t.5) CASE STUDIES (loop-carousel fidelitat vs slider slick de producció).
   La targeta gran de case-study ha de coincidir amb prod: ampla màx 1100px
   centrada, imatge limitada a 480px d'alt, títol blanc a dalt sobre el fons de
   color, dots turquesa i SENSE fletxes. */
.w-loop-case-study {
	max-width: 1100px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Imatge del cas: no pot desbordar en alçada (theme .case-studies__image
   max-height:480px). */
.w-loop-cs__image img {
	max-height: 480px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
}
/* Títol a dalt: blanc sobre el fons de color, centrat, amplada completa. */
.w-loop-cs__title,
.w-loop-cs__title * {
	color: #ffffff !important;
	text-align: center;
	width: 100%;
}
/* Logo del partner dins la card gris: monocrom subtil com l'original
   (.case-studies__logo-container filter brightness(0) opacity .5; max-width 130). */
.w-loop-cs__card .w-loop-cs__logo img {
	max-width: 130px;
	filter: brightness(0);
	opacity: 0.5;
}
/* Botó "READ THE CASE STUDY": estil botó turquesa del tema. */
/* Dots turquesa (ja ho són per defecte del Kit) i fletxes AMAGADES,
   com l'slider slick original (només dots). */
.w-case-studies-loop .elementor-swiper-button,
.w-case-studies-loop .swiper-button-next,
.w-case-studies-loop .swiper-button-prev {
	display: none !important;
}