/* Accent-matched LED treatment for editable FIX ARRAY editorial cards. */
.fixarray-action-cards--editorial .fixarray-action-card {
	--fax-editorial-led-color: transparent;
	--fax-editorial-led-opacity: 0;
	--fax-editorial-led-intensity: 46%;
	--fax-editorial-led-blur: 16px;
	transition-property: transform, box-shadow, border-color, background-color, color, filter;
}

@supports (color: color-mix(in srgb, red, transparent)) {
	.fixarray-action-cards--editorial .fixarray-action-card {
		filter: drop-shadow(
			0 0 var(--fax-editorial-led-blur)
			color-mix(in srgb, var(--fax-editorial-led-color) var(--fax-editorial-led-intensity), transparent)
		);
	}

	.fixarray-action-cards--editorial .fixarray-action-card::before {
		content: "";
		position: absolute;
		z-index: 5;
		inset: 0;
		border: 1px solid color-mix(in srgb, var(--fax-editorial-led-color) 76%, transparent);
		border-radius: inherit;
		box-shadow:
			inset 0 0 10px color-mix(in srgb, var(--fax-editorial-led-color) 22%, transparent),
			inset 0 0 2px color-mix(in srgb, var(--fax-editorial-led-color) 72%, transparent);
		opacity: var(--fax-editorial-led-opacity);
		pointer-events: none;
		transition:
			opacity var(--fax-hover-duration, 280ms) ease,
			border-color var(--fax-hover-duration, 280ms) ease,
			box-shadow var(--fax-hover-duration, 280ms) ease;
	}

	.fixarray-action-cards--editorial .fixarray-action-card:hover,
	.fixarray-action-cards--editorial .fixarray-action-card:focus-visible {
		filter: drop-shadow(
			0 0 calc(var(--fax-editorial-led-blur) + 5px)
			color-mix(in srgb, var(--fax-editorial-led-color) 68%, transparent)
		);
	}

	.fixarray-action-cards--editorial .fixarray-action-card:hover::before,
	.fixarray-action-cards--editorial .fixarray-action-card:focus-visible::before {
		border-color: color-mix(in srgb, var(--fax-editorial-led-color) 92%, #ffffff 8%);
		box-shadow:
			inset 0 0 14px color-mix(in srgb, var(--fax-editorial-led-color) 34%, transparent),
			inset 0 0 3px color-mix(in srgb, var(--fax-editorial-led-color) 88%, transparent);
	}
}

/* Home 918 — “Nuestras áreas principales”.
 * Premium 45/55 photographic treatment, centred heading, section-colour CTA buttons
 * and accent-matched LED hover. Scoped to this section so other Action Cards stay untouched.
 */
body.page-id-918 #servicios .fixarray-action-cards__header {
	max-width: min(var(--fax-cards-header-max, 1100px), 1100px);
	margin-right: auto;
	margin-left: auto;
	padding-left: 0;
	text-align: center;
}
body.page-id-918 #servicios .fixarray-action-cards__header::before {
	display: none;
}
body.page-id-918 #servicios .fixarray-action-cards__eyebrow,
body.page-id-918 #servicios .fixarray-action-cards__heading,
body.page-id-918 #servicios .fixarray-action-cards__intro {
	text-align: center;
}
body.page-id-918 #servicios .fixarray-action-cards__intro {
	margin-right: auto;
	margin-left: auto;
	max-width: 900px;
}

/* 3:2 at the current seven-column width gives roughly 45% photo / 55% content. */
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__media {
	aspect-ratio: 3 / 2;
}
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__media img {
	object-fit: cover;
	object-position: center center;
}

/* Compact typography and vertical rhythm so all seven cards align cleanly. */
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__body {
	align-items: center;
	padding: 16px 14px 18px;
	text-align: center;
}
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	font-size: 17px;
	line-height: 1.22;
	text-wrap: balance;
}
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__description {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 76px;
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.5;
	text-wrap: pretty;
}

/* Replace the arrow treatment with a real visual CTA pill while retaining the whole-card link. */
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__footer {
	justify-content: center;
	margin-top: auto;
	padding-top: 12px;
	text-align: center;
}
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__footer svg {
	display: none;
}
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__footer span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 15px;
	border: 1px solid var(--fax-accent);
	border-radius: 9px;
	background: var(--fax-accent);
	box-shadow: 0 10px 22px -16px rgba(4,17,38,.55);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	line-height: 1.1;
	transition: background-color .26s ease,border-color .26s ease,color .26s ease,box-shadow .26s ease,transform .26s ease;
}
body.page-id-918 #servicios .fixarray-action-card.fixarray-accent--cyan .fixarray-action-card__footer span {
	color: #071b43;
}

/* Each accent gets a deliberately different hover colour. */
body.page-id-918 #servicios .fixarray-action-card.fixarray-accent--orange { --fax-area-button-hover:#51ADE5; --fax-area-button-hover-text:#071B43; }
body.page-id-918 #servicios .fixarray-action-card.fixarray-accent--blue { --fax-area-button-hover:#F68712; --fax-area-button-hover-text:#FFFFFF; }
body.page-id-918 #servicios .fixarray-action-card.fixarray-accent--cyan { --fax-area-button-hover:#071B43; --fax-area-button-hover-text:#FFFFFF; }
body.page-id-918 #servicios .fixarray-action-card.fixarray-accent--navy { --fax-area-button-hover:#51ADE5; --fax-area-button-hover-text:#071B43; }
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card:hover .fixarray-action-card__footer span,
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card:focus-visible .fixarray-action-card__footer span {
	border-color: var(--fax-area-button-hover);
	background: var(--fax-area-button-hover);
	color: var(--fax-area-button-hover-text);
	box-shadow: 0 12px 26px -15px rgba(4,17,38,.68);
	transform: translateY(-1px);
}

/* LED halo in the native accent colour of each card. */
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card {
	transition: transform var(--fax-hover-duration,280ms) cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease,filter .28s ease;
}
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card:hover,
body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card:focus-visible {
	border-color: var(--fax-accent);
	box-shadow: 0 0 0 1px rgba(var(--fax-accent-rgb),.88),0 0 18px rgba(var(--fax-accent-rgb),.58),0 0 38px rgba(var(--fax-accent-rgb),.28),0 22px 44px -26px rgba(2,13,32,.82);
	filter: saturate(1.04);
}

@media (max-width:1024px) {
	body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__title {
		min-height: 0;
		font-size: 18px;
	}
	body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__description {
		min-height: 0;
		font-size: 13.5px;
	}
}

@media (max-width:767px) {
	body.page-id-918 #servicios .fixarray-action-cards__header {
		padding-left: 0;
	}
	body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__body {
		padding: 18px 20px 20px;
	}
	body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__footer span {
		min-height: 40px;
		padding: 0 17px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fixarray-action-cards--editorial .fixarray-action-card,
	.fixarray-action-cards--editorial .fixarray-action-card::before,
	body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card,
	body.page-id-918 #servicios .fixarray-action-cards--panoramic .fixarray-action-card__footer span {
		transition-duration: .001ms !important;
	}
}

/* Definitive Home 918 header authority — 2026-08-26.
 * The screenshot confirmed that the previous max-width header was centring its text
 * inside a left-positioned 1100px box. Stretch the header across the whole inner grid
 * so the copy is centred relative to the seven cards, and neutralise the legacy stripe.
 * The !important declarations are deliberately limited to this exact draft section.
 */
body.page-id-918 #servicios .fixarray-action-cards .fixarray-action-cards__inner > .fixarray-action-cards__header {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 auto 28px !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	text-align: center !important;
}
body.page-id-918 #servicios .fixarray-action-cards .fixarray-action-cards__inner > .fixarray-action-cards__header::before {
	content: none !important;
	display: none !important;
	visibility: hidden !important;
	width: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
body.page-id-918 #servicios .fixarray-action-cards .fixarray-action-cards__eyebrow,
body.page-id-918 #servicios .fixarray-action-cards .fixarray-action-cards__heading,
body.page-id-918 #servicios .fixarray-action-cards .fixarray-action-cards__intro {
	width: 100% !important;
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	text-align: center !important;
}
body.page-id-918 #servicios .fixarray-action-cards .fixarray-action-cards__intro {
	max-width: 980px;
}

/* Premium top-edge LED for the “Cómo trabajamos” technology/process cards.
 * Activation is controlled entirely by Elementor through --fdw-tech-led-color.
 * When the LED switch is off that variable remains transparent, so the premium
 * glow disappears while the normal assigned accent line remains visible.
 */
.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card {
	--fdw-tech-led-glint-opacity: 0;
	isolation: isolate;
	transition:
		transform var(--fax-hover-duration, 280ms) cubic-bezier(.2,.8,.2,1),
		box-shadow var(--fax-hover-duration, 280ms) ease,
		border-color var(--fax-hover-duration, 280ms) ease,
		filter var(--fax-hover-duration, 280ms) ease;
}

.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 0;
	right: 0;
	top: 0;
	height: 78px;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--fdw-tech-led-color, transparent) 24%, transparent) 0%,
		color-mix(in srgb, var(--fdw-tech-led-color, transparent) 9%, transparent) 48%,
		transparent 100%
	);
	opacity: .28;
	pointer-events: none;
	transition: opacity var(--fax-hover-duration, 280ms) ease;
}

.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card-line {
	z-index: 4;
	height: var(--fdw-tech-top-led-height, 5px);
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--fdw-tech-accent) 86%, #ffffff 14%) 0%,
		var(--fdw-tech-accent) 18%,
		color-mix(in srgb, var(--fdw-tech-accent) 66%, #ffffff 34%) 50%,
		var(--fdw-tech-accent) 82%,
		color-mix(in srgb, var(--fdw-tech-accent) 86%, #ffffff 14%) 100%
	);
	box-shadow:
		0 0 2px color-mix(in srgb, var(--fdw-tech-led-color, transparent) 62%, transparent),
		0 3px 9px color-mix(in srgb, var(--fdw-tech-led-color, transparent) 22%, transparent);
	filter: saturate(1.08) brightness(1.03);
	transform-origin: center top;
	transition:
		box-shadow var(--fax-hover-duration, 280ms) ease,
		filter var(--fax-hover-duration, 280ms) ease,
		transform var(--fax-hover-duration, 280ms) ease,
		height var(--fax-hover-duration, 280ms) ease;
}

.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255,255,255,0) 34%,
		rgba(255,255,255,.92) 50%,
		rgba(255,255,255,0) 66%,
		transparent 100%
	);
	opacity: 0;
	transform: translateX(-42%);
	pointer-events: none;
	transition:
		opacity 220ms ease,
		transform 560ms cubic-bezier(.2,.75,.2,1);
}

@supports (color: color-mix(in srgb, red, transparent)) {
	@media (hover: hover) and (pointer: fine) {
		.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card:hover {
			border-color: color-mix(in srgb, var(--fdw-tech-accent) 72%, #d7e5ec);
			box-shadow:
				0 -7px calc(var(--fdw-tech-top-led-blur, 24px) + 8px) -9px color-mix(in srgb, var(--fdw-tech-led-color, transparent) 74%, transparent),
				0 0 0 var(--fdw-tech-led-spread, 1px) color-mix(in srgb, var(--fdw-tech-led-color, transparent) 88%, transparent),
				0 0 var(--fdw-tech-led-blur, 28px) color-mix(in srgb, var(--fdw-tech-led-color, transparent) var(--fdw-tech-led-intensity, 68%), transparent),
				0 0 calc(var(--fdw-tech-led-blur, 28px) + 18px) color-mix(in srgb, var(--fdw-tech-led-color, transparent) 30%, transparent),
				inset 0 10px calc(var(--fdw-tech-top-led-blur, 24px) + 6px) -15px color-mix(in srgb, var(--fdw-tech-led-color, transparent) 58%, transparent),
				0 24px 50px -30px rgba(11,47,75,.30);
			filter: saturate(1.055);
		}

		.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card:hover::before {
			opacity: .95;
		}

		.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card:hover .fixarray-digital-technology-stack__card-line {
			box-shadow:
				0 0 2px color-mix(in srgb, var(--fdw-tech-led-color, transparent) 94%, #ffffff 6%),
				0 0 calc(var(--fdw-tech-top-led-blur, 24px) - 8px) color-mix(in srgb, var(--fdw-tech-led-color, transparent) var(--fdw-tech-top-led-intensity, 92%), transparent),
				0 5px var(--fdw-tech-top-led-blur, 24px) color-mix(in srgb, var(--fdw-tech-led-color, transparent) 68%, transparent),
				0 10px calc(var(--fdw-tech-top-led-blur, 24px) + 12px) color-mix(in srgb, var(--fdw-tech-led-color, transparent) 34%, transparent);
			filter: saturate(1.22) brightness(1.28);
			transform: scaleX(1.012);
		}

		.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card:hover .fixarray-digital-technology-stack__card-line::after {
			opacity: var(--fdw-tech-led-glint-opacity, 0);
			transform: translateX(42%);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card,
	.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card::before,
	.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card-line,
	.fixarray-digital-technology-stack .fixarray-digital-technology-stack__card-line::after {
		transition-duration: .001ms !important;
	}
}