/* ==========================================================================
   DIABETCENTRO — homepage section polish (page id 22 only; enqueued via
   is_front_page()). Selectors are keyed to the page's Elementor element IDs;
   same override convention as style.css: Elementor's selector + `body` prefix.

   Section map:
   49e6cddc hero · 4fa3016e info strip · 4528b182 services intro ·
   1f9999b0 service tiles · 54c58e45 team · 6008826f process intro ·
   3f4077f4 process steps · 2989d3b2 results/counters · 18214210 dudas
   accordion (JS-assisted — assets/js/home.js) · 65053d69 aprende más cards
   (card system lives site-wide in style.css §3) · 41985430 final CTA
   ========================================================================== */

/* -- 1. HERO: white 0.1 veil → spruce gradient scrim, light type ---------- */

body .elementor-22 .elementor-element.elementor-element-49e6cddc > .elementor-background-overlay {
	background-color: transparent;
	background-image: linear-gradient(100deg,
		rgba(0, 74, 72, 0.88) 0%,
		rgba(0, 74, 72, 0.55) 48%,
		rgba(0, 74, 72, 0.08) 78%);
	opacity: 1;
	overflow: hidden; /* contains the ::before sweep panel */
}
/* ≥768px: the smooth scrim hardens into a diagonal spruce panel — content
   sits on solid ground, the photo gets a crisp angled edge traced by a
   mint hairline (the outlined-drop motif from the logo). */
@media (min-width: 768px) {
	body .elementor-22 .elementor-element.elementor-element-49e6cddc > .elementor-background-overlay {
		background-image: linear-gradient(105deg,
			rgba(0, 74, 72, 0.96) 0%,
			rgba(0, 74, 72, 0.95) 46%,
			rgba(47, 167, 159, 0.9) 46%,
			rgba(47, 167, 159, 0.9) 46.35%,
			rgba(0, 74, 72, 0.42) 46.35%,
			rgba(0, 74, 72, 0.1) 62%,
			rgba(0, 74, 72, 0.04) 78%);
	}
	/* entrance: a skewed spruce panel sweeps off to the right, revealing the
	   photo along the same diagonal (translate of the inspiration's
	   clip-path reveal; transform-only, sits under the section content). */
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-22 .elementor-element.elementor-element-49e6cddc > .elementor-background-overlay::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: -20%;
			width: 140%;
			background: rgba(0, 74, 72, 0.97);
			transform: skewX(-15deg);
			animation: dc-hero-sweep 1.1s cubic-bezier(0.08, 0.82, 0.17, 1) 0.15s forwards;
		}
	}
}
@keyframes dc-hero-sweep {
	to { transform: skewX(-15deg) translateX(112%); }
}
@media (max-width: 767px) {
	body .elementor-22 .elementor-element.elementor-element-49e6cddc > .elementor-background-overlay {
		background-image: linear-gradient(160deg,
			rgba(0, 74, 72, 0.92) 0%,
			rgba(0, 74, 72, 0.72) 55%,
			rgba(0, 74, 72, 0.45) 100%);
	}
}

/* Safe inset for the hero content: Elementor's desktop padding on the text
   column is `0 50% 0 0` — zero left inset, so type sat flush against the
   viewport edge. Keep the load-bearing 50% right (it holds text off the
   photo), add a fluid left inset. Scoped ≥1025px so the kit's tablet/mobile
   paddings (which already inset) keep winning below that. */
@media (min-width: 1025px) {
	body .elementor-22 .elementor-element.elementor-element-5d30c236 > .elementor-element-populated {
		padding: 0 50% 0 clamp(32px, 6vw, 120px);
	}
}

/* Photo composition: with `cover / top center` the subject lands at viewport
   center — i.e. ON the diagonal edge, not centered in the visible photo
   region (46%→100%, whose center is ~73%). Oversizing to 135% and anchoring
   left shifts the subject to ~74% of the viewport at every landscape width
   (scale-invariant: 0.55 subject × 1.35 = 0.74). `left top` preserves the
   original vertical framing; spruce backstop hides any edge-case gap.
   TUNED TO dr-8.jpg (subject at ~55% of frame) — retune both values when
   the punch-list photo swap lands. */
@media (min-width: 1025px) {
	body .elementor-22 .elementor-element.elementor-element-49e6cddc:not(.elementor-motion-effects-element-type-background) {
		background-size: 135% auto;
		background-position: left top;
		background-color: var(--dc-color-spruce-deep);
	}
}
/* WebP hero (58 KB vs 113 KB jpeg): the bg is CSS, so the media plugin's
   HTML rewriting never reaches it. image-set keeps the jpeg fallback.
   UPDATE with DC_HERO_BG_PATH/WEBP in functions.php when the punch-list
   photo swap lands. */
body .elementor-22 .elementor-element.elementor-element-49e6cddc:not(.elementor-motion-effects-element-type-background) {
	background-image: image-set(
		url("../../../../uploads-webpc/uploads/2026/04/dr-8.jpg.webp") type("image/webp"),
		url("../../../../uploads/2026/04/dr-8.jpg") type("image/jpeg")
	);
}

/* Divider under the hero title: crimson head + teal body, the logo drop's
   two colors in one 4px stroke (inspiration's accent bar, brand-translated). */
body .elementor-22 .elementor-element.elementor-element-49e6cddc .qodef-qi-animated-text .qodef-m-title::after {
	content: "";
	display: block;
	margin-top: 18px;
	width: 76px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg,
		var(--dc-color-drop) 0 20px,
		var(--e-global-color-secondary) 20px);
}
body .elementor-22 .elementor-element.elementor-element-49e6cddc .qodef-qi-animated-text .qodef-m-title,
body .elementor-22 .elementor-element.elementor-element-49e6cddc .qodef-qi-animated-text .qodef-m-title .qodef-e-word,
body .elementor-22 .elementor-element.elementor-element-49e6cddc h1 {
	color: #ffffff;
}
body .elementor-22 .elementor-element.elementor-element-49e6cddc .elementor-widget-text-editor {
	color: rgba(255, 255, 255, 0.88);
}

/* Hero CTAs: primary teal (was black), secondary ghost-on-photo (was mint) */
body .elementor-22 .elementor-element.elementor-element-337e790a .elementor-button {
	background-color: var(--e-global-color-secondary);
	color: #ffffff;
	fill: #ffffff;
}
body .elementor-22 .elementor-element.elementor-element-337e790a .elementor-button:hover,
body .elementor-22 .elementor-element.elementor-element-337e790a .elementor-button:focus {
	background-color: var(--dc-color-spruce-deep);
	color: #ffffff;
}
body .elementor-22 .elementor-element.elementor-element-346b9afc .elementor-button {
	background-color: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.75);
	color: #ffffff;
	fill: #ffffff;
	box-shadow: none;
}
body .elementor-22 .elementor-element.elementor-element-346b9afc .elementor-button:hover,
body .elementor-22 .elementor-element.elementor-element-346b9afc .elementor-button:focus {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: #ffffff;
	color: #ffffff;
}

/* -- 2. INFO STRIP: labeled contact data over the hero base ---------------- */

body .elementor-22 .elementor-element.elementor-element-4fa3016e,
body .elementor-22 .elementor-element.elementor-element-4fa3016e .elementor-icon-list-text {
	color: var(--e-global-color-accent);
}
/* ≥768px: the strip floats as a rounded card overlapping the hero's base —
   the contact-info row anchored to the hero (from the inspiration), in our
   card language. Mobile keeps the flat full-width strip. */
@media (min-width: 768px) {
	body .elementor-22 .elementor-element.elementor-element-4fa3016e {
		position: relative;
		z-index: 5;
		max-width: min(1140px, calc(100% - 48px));
		margin: -44px auto 0;
		border-radius: var(--dc-radius-card);
		box-shadow: var(--dc-shadow-soft);
		/* Elementor set 30px section padding; with the columns' own block
		   padding that stacked to 52px above/below the content — too tall.
		   Trim the outer frame so the card hugs its data. */
		padding-block: 10px;
	}
}

/* Each item gets data anatomy instead of a centered text blob: icon chip
   spanning two text rows — a small tracked LABEL over the left-aligned
   value. The DOM is a bare icon-list (single li per widget, dead "#"
   links — punch list: Waze/tel/cita links); labels are theme-supplied
   ::before text so screen readers announce them too. */
body .elementor-22 :is(
	.elementor-element.elementor-element-61b50aae,
	.elementor-element.elementor-element-1530d1fc,
	.elementor-element.elementor-element-1b6189c4) .elementor-icon-list-item > a {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: 14px;
	row-gap: 3px;
	/* top-anchor everything: centering keyed each chip to its OWN block
	   height, so the one-line phone chip rode higher than its two-line
	   siblings — and any breakpoint that rewraps a value would re-skew it */
	align-items: start;
	text-align: left;
}
/* left-align each group at a shared inset (override the widget's own
   elementor-align-center): in equal thirds this lands the three icons on an
   identical left edge, so icon-to-icon spacing is genuinely equal instead of
   each short group floating to its own cell's center */
body .elementor-22 :is(
	.elementor-element.elementor-element-61b50aae,
	.elementor-element.elementor-element-1530d1fc,
	.elementor-element.elementor-element-1b6189c4) .elementor-icon-list-items {
	justify-content: flex-start;
}
body .elementor-22 :is(
	.elementor-element.elementor-element-61b50aae,
	.elementor-element.elementor-element-1530d1fc,
	.elementor-element.elementor-element-1b6189c4) .elementor-icon-list-icon {
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0; /* Elementor's 12px icon-to-text padding skewed the glyph off-center */
	background-color: #ffffff;
	border: 1px solid rgba(0, 109, 107, 0.1);
	border-radius: 50%;
	transition: background-color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 :is(
	.elementor-element.elementor-element-61b50aae,
	.elementor-element.elementor-element-1530d1fc,
	.elementor-element.elementor-element-1b6189c4) .elementor-icon-list-icon svg {
	/* fixed 16×16 box: FA icons letterbox via xMidYMid, so the tall map-pin
	   (288×512) centers at 9×16 instead of towering at 16×28 */
	width: 16px;
	height: 16px;
	transition: fill var(--dc-speed) var(--dc-ease);
}
/* hover: the chip blooms teal (items become real links via punch list) */
body .elementor-22 :is(
	.elementor-element.elementor-element-61b50aae,
	.elementor-element.elementor-element-1530d1fc,
	.elementor-element.elementor-element-1b6189c4) .elementor-icon-list-item > a:hover .elementor-icon-list-icon {
	background-color: var(--e-global-color-secondary);
	border-color: var(--e-global-color-secondary);
}
body .elementor-22 :is(
	.elementor-element.elementor-element-61b50aae,
	.elementor-element.elementor-element-1530d1fc,
	.elementor-element.elementor-element-1b6189c4) .elementor-icon-list-item > a:hover .elementor-icon-list-icon svg {
	fill: #ffffff;
}
body .elementor-22 :is(
	.elementor-element.elementor-element-61b50aae,
	.elementor-element.elementor-element-1530d1fc,
	.elementor-element.elementor-element-1b6189c4) .elementor-icon-list-item > a::before {
	grid-column: 2;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 700;
	font-size: 0.72rem;
	line-height: 1.2;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dc-color-teal-text);
}
body .elementor-22 .elementor-element.elementor-element-61b50aae .elementor-icon-list-item > a::before { content: "Dirección"; }
body .elementor-22 .elementor-element.elementor-element-1530d1fc .elementor-icon-list-item > a::before { content: "Horario"; }
body .elementor-22 .elementor-element.elementor-element-1b6189c4 .elementor-icon-list-item > a::before { content: "Teléfono"; }
body .elementor-22 :is(
	.elementor-element.elementor-element-61b50aae,
	.elementor-element.elementor-element-1530d1fc,
	.elementor-element.elementor-element-1b6189c4) .elementor-icon-list-text {
	grid-column: 2;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}
/* hairline separators between the three data columns; top-align the columns
   so the label row reads as one line across the strip. EQUAL THIRDS: the old
   40/30/30 let the widget's center-alignment float the short phone group with
   lopsided dead space (icons landed at 0 / 43% / 73% — uneven gaps). Equal
   columns make the per-column centering read as one even rhythm; each group
   sits balanced in its own third, dividers ride the boundaries = exactly
   midway between the two groups they separate. */
@media (min-width: 768px) {
	body .elementor-22 .elementor-element.elementor-element-4fa3016e .elementor-column.elementor-element-2ad060c1,
	body .elementor-22 .elementor-element.elementor-element-4fa3016e .elementor-column.elementor-element-5f1bb7e6,
	body .elementor-22 .elementor-element.elementor-element-4fa3016e .elementor-column.elementor-element-2f9d089f { width: 33.333%; }
	body .elementor-22 .elementor-element.elementor-element-1b6189c4 .elementor-icon-list-text {
		white-space: nowrap; /* a phone number never breaks */
	}
	body .elementor-22 .elementor-element.elementor-element-4fa3016e .elementor-column > .elementor-widget-wrap {
		align-content: start;
		padding-block: 14px; /* tighter card — paired with the section frame trim above */
		padding-inline: 28px; /* even breathing room both card edges + clears dividers */
	}
	body .elementor-22 :is(
		.elementor-element.elementor-element-5f1bb7e6,
		.elementor-element.elementor-element-2f9d089f) > .elementor-widget-wrap {
		border-left: 1px solid rgba(0, 109, 107, 0.12);
	}
}
/* <768px: flat strip stacks — separator becomes a row hairline */
@media (max-width: 767px) {
	body .elementor-22 .elementor-element.elementor-element-4fa3016e .elementor-column > .elementor-widget-wrap {
		padding-block: 14px;
	}
	body .elementor-22 :is(
		.elementor-element.elementor-element-5f1bb7e6,
		.elementor-element.elementor-element-2f9d089f) > .elementor-widget-wrap {
		border-top: 1px solid rgba(0, 109, 107, 0.12);
	}
}

/* entrance: the card docks into the hero's base after the sweep settles,
   then the three data blocks rise in a stagger. Time-based (the strip is
   in the first viewport) and desktop-only — mobile's flat strip arrives
   on scroll via Elementor's own item fades. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
	body .elementor-22 .elementor-element.elementor-element-4fa3016e {
		animation: dc-strip-dock 0.7s var(--dc-ease) 0.5s both;
	}
	body .elementor-22 .elementor-element.elementor-element-4fa3016e .elementor-column {
		animation: dc-strip-item 0.55s var(--dc-ease) both;
	}
	body .elementor-22 .elementor-element.elementor-element-4fa3016e .elementor-column.elementor-element-2ad060c1 { animation-delay: 0.85s; }
	body .elementor-22 .elementor-element.elementor-element-4fa3016e .elementor-column.elementor-element-5f1bb7e6 { animation-delay: 0.97s; }
	body .elementor-22 .elementor-element.elementor-element-4fa3016e .elementor-column.elementor-element-2f9d089f { animation-delay: 1.09s; }
}
@keyframes dc-strip-dock {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}
@keyframes dc-strip-item {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* -- 3. SERVICES PANEL ------------------------------------------------------ */
/* One boxed, rounded deep-spruce component (feature-carousel inspiration,
   brand-translated): services stack as glass "chip" cards on the left —
   hover inverts a card to white, the inspiration's active-chip state — and
   the portrait bleeds full-height into the right half behind a soft spruce
   seam. Completes the page's panel family: hero panel → this → CTA panel. */

/* -- 2b. INTRO → PANEL handoff --------------------------------------------- */
/* Center the intro's two columns against each other, tighten the gap, and
   let the panel slide up over the intro's base while the intro gently
   recedes (scroll-driven, Chromium; elsewhere the overlap alone carries it). */
body .elementor-22 .elementor-element.elementor-element-4528b182 > .elementor-container {
	align-items: center;
}
body .elementor-22 .elementor-element.elementor-element-4528b182 {
	padding-bottom: 96px; /* room for the panel's -44px overlap to eat into */
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-22 .elementor-element.elementor-element-4528b182 {
			animation: dc-intro-recede linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 75%;
			transform-origin: center bottom;
		}
	}
}
@keyframes dc-intro-recede {
	to { transform: scale(0.965) translateY(10px); opacity: 0.3; }
}

/* -- 2c. INTRO right column → the "Centro especializado" FEATURE CARD -------- */
/* The left statement stays the section's display headline. The right column was
   a quiet 24px teal subhead over two plain paragraphs — too small beside the
   headline. Promote it to the house feature card (salud-visual recipe: white
   ground, hairline, radius-card, soft shadow) with a mint icon-chip header, a
   confident spruce heading, a lead paragraph, and the arrow link docked as a
   card footer. A clean feature moment that balances the big flip headline. */
body .elementor-22 .elementor-element.elementor-element-57a54231 .qodef-m-title {
	font-size: clamp(2.6rem, 1.95rem + 2.7vw, 4.125rem); /* 42 → 66px display */
	line-height: 1.08;
	letter-spacing: -0.02em;
}
/* the card chrome on the text-editor widget itself */
body .elementor-22 .elementor-element.elementor-element-2c462d26 {
	background: #ffffff;
	border: var(--dc-border);
	border-radius: var(--dc-radius-card);
	box-shadow: var(--dc-shadow-soft);
	padding: clamp(26px, 2.6vw, 40px);
}
/* header: mint icon chip (shield-check = specialized, trusted care) + a
   confident spruce heading — the promotion from the old 24px teal subhead */
body .elementor-22 .elementor-element.elementor-element-2c462d26 h2 {
	position: relative;
	min-height: 48px;
	margin: 0 0 18px;
	padding-left: 66px;
	display: flex;
	align-items: center;
	font-size: clamp(1.5rem, 1.28rem + 0.9vw, 2rem); /* 24 → 32px */
	line-height: 1.15;
	letter-spacing: -0.015em;
	font-weight: 700;
	color: var(--e-global-color-accent);
}
body .elementor-22 .elementor-element.elementor-element-2c462d26 h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background-color: var(--e-global-color-primary);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 25px 25px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23006D6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.6-3 8.2-7 9-4-.8-7-4.4-7-9V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
/* body copy: readable, spruce-cast; first paragraph reads as a lead */
body .elementor-22 .elementor-element.elementor-element-2c462d26 p {
	color: var(--e-global-color-text);
	line-height: 1.6;
	margin-bottom: 14px;
}
body .elementor-22 .elementor-element.elementor-element-2c462d26 p:first-of-type {
	font-size: 1.0625rem; /* 17px lead */
	color: var(--e-global-color-text);
}
/* arrow link docks as a card footer, lifted off the body by a hairline */
body .elementor-22 .elementor-element.elementor-element-2c462d26 p:last-child {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: var(--dc-border);
}
body .elementor-22 .elementor-element.elementor-element-2c462d26 p a {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 600;
	color: var(--dc-color-teal-text);
	text-decoration: none;
	border-bottom: 2px solid var(--e-global-color-primary);
	padding-bottom: 2px;
	transition: color var(--dc-speed) var(--dc-ease), border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-2c462d26 p a::after {
	content: " \2192"; /* → */
	display: inline-block;
	transition: transform var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-2c462d26 p a:hover {
	color: var(--e-global-color-accent);
	border-color: var(--dc-color-drop);
}
body .elementor-22 .elementor-element.elementor-element-2c462d26 p a:hover::after {
	transform: translateX(4px);
}

/* -- 2d. FLIP WORD: the headline's emotional word cycles ------------------- */
/* "Manejar la diabetes te da [seguridad]" — the last word slot cycles
   seguridad → libertad → confianza → tranquilidad with the FlipWords-style
   blur-rise. The real DOM word stays for SEO; visibility:hidden removes it
   from the accessibility tree so screen readers hear only the pseudo word.
   `content` keyframes are Chromium/Safari; the view-timeline @supports gate
   keeps non-supporting browsers on the static teal word. NOTE: tuned to the
   current copy — if the headline text changes in Elementor, update the
   ::after word list here. */
body .elementor-22 .elementor-element.elementor-element-57a54231 .qodef-m-title .qodef-e-word:last-child {
	position: relative;
	visibility: hidden;
}
body .elementor-22 .elementor-element.elementor-element-57a54231 .qodef-m-title .qodef-e-word:last-child::after {
	content: "seguridad";
	visibility: visible;
	position: absolute;
	left: 0;
	top: 0;
	white-space: nowrap;
	color: var(--e-global-color-secondary);
	text-decoration: underline;
	text-decoration-color: var(--e-global-color-primary);
	text-decoration-thickness: 3px;
	text-underline-offset: 7px;
}
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-22 .elementor-element.elementor-element-57a54231 .qodef-m-title .qodef-e-word:last-child::after {
			animation: dc-flip-words 14s infinite;
		}
	}
}
/* 4 words × 3.5s. Each quarter: blur-rise in (4%), hold, blur-out (last 3%). */
@keyframes dc-flip-words {
	0%      { content: "seguridad"; opacity: 0; filter: blur(8px); transform: translateY(10px); }
	4%      { opacity: 1; filter: blur(0); transform: none; }
	22%     { opacity: 1; filter: blur(0); transform: none; }
	25%     { content: "seguridad"; opacity: 0; filter: blur(8px); transform: translateY(-12px); }
	25.01%  { content: "libertad"; opacity: 0; filter: blur(8px); transform: translateY(10px); }
	29%     { opacity: 1; filter: blur(0); transform: none; }
	47%     { opacity: 1; filter: blur(0); transform: none; }
	50%     { content: "libertad"; opacity: 0; filter: blur(8px); transform: translateY(-12px); }
	50.01%  { content: "confianza"; opacity: 0; filter: blur(8px); transform: translateY(10px); }
	54%     { opacity: 1; filter: blur(0); transform: none; }
	72%     { opacity: 1; filter: blur(0); transform: none; }
	75%     { content: "confianza"; opacity: 0; filter: blur(8px); transform: translateY(-12px); }
	75.01%  { content: "tranquilidad"; opacity: 0; filter: blur(8px); transform: translateY(10px); }
	79%     { opacity: 1; filter: blur(0); transform: none; }
	97%     { opacity: 1; filter: blur(0); transform: none; }
	100%    { content: "tranquilidad"; opacity: 0; filter: blur(8px); transform: translateY(-12px); }
}

/* the panel itself. The team section below overlaps upward (negative margin
   + 270px top padding) and would paint over the panel's bottom band —
   z-index keeps the panel on top, floating over the next section's ground.
   NO overflow:hidden here: it would break position:sticky for the card deck
   inside — every child clips itself instead. */
body .elementor-22 .elementor-element.elementor-element-1f9999b0 {
	background-color: var(--e-global-color-accent);
	max-width: min(1200px, calc(100% - 32px));
	margin-inline: auto;
	margin-top: -44px; /* the deck arrives over the intro */
	border-radius: var(--dc-radius-media);
	position: relative;
	z-index: 2;
	box-shadow: var(--dc-shadow-soft);
}
/* chips left, photo right (DOM order is photo-first — reverse it on desktop;
   mobile keeps the stack: portrait on top, cards below) */
@media (min-width: 768px) {
	body .elementor-22 .elementor-element.elementor-element-1f9999b0 > .elementor-container {
		flex-direction: row-reverse;
	}
}

/* tiles column becomes the "chips" panel */
body .elementor-22 .elementor-element.elementor-element-5f3612a4 > .elementor-widget-wrap {
	padding: clamp(28px, 4vw, 56px) clamp(20px, 3.5vw, 48px);
}

/* each service = one full-width glass card row. The tiles are WIDGETS whose
   Elementor width rule is `width: var(--container-widget-width, 50%);
   max-width: 50%` — override all three knobs or the flex row never wraps.
   The tile background sits on the inner .qodef-qi-info-cards div. */
body .elementor-22 :is(
	.elementor-element.elementor-element-5fba2367,
	.elementor-element.elementor-element-7c5eab32,
	.elementor-element.elementor-element-4c55e607,
	.elementor-element.elementor-element-12f8c4c3) {
	--container-widget-width: 100%;
	width: 100%;
	max-width: 100%;
	margin-bottom: 14px;
}
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) .qodef-qi-info-cards {
	/* opaque equivalent of white/6 over spruce — cards must not show through
	   each other when the deck stacks */
	background-color: var(--dc-panel-card);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
	padding: 22px 24px;
	transition: background-color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease),
		transform var(--dc-speed) var(--dc-ease),
		box-shadow var(--dc-speed) var(--dc-ease);
}

/* -- the deck: cards pin and stack over each other as the panel scrolls ---- */
/* position:sticky inside the tiles column (its parent box bounds the pin, so
   the deck releases exactly when the panel ends). Staggered tops reproduce
   the inspiration's `top: index * 22px` layering; DOM order stacks later
   cards on top. Desktop only — pinned cards on small screens are hostile. */
@media (min-width: 768px) {
	/* all four cards pin with staggered tops. Uniform card heights make the
	   deck geometry deterministic (and match the inspiration's even deck).
	   Release math: a pinned card's lowest position is wrapBottom minus its
	   own margin-bottom — so ALL cards carry the same 76px (identical limits
	   = they align exactly behind the last card, nothing pokes out below,
	   and the CTA's limit of wrapBottom − ~53px stays clear underneath).
	   Negative top-margins pull the visual gaps back to 14px; they don't
	   participate in the bottom constraint. */
	body .elementor-22 :is(
		.elementor-element.elementor-element-5fba2367,
		.elementor-element.elementor-element-7c5eab32,
		.elementor-element.elementor-element-4c55e607,
		.elementor-element.elementor-element-12f8c4c3) {
		position: sticky;
		margin-bottom: 76px;
	}
	body .elementor-22 :is(
		.elementor-element.elementor-element-7c5eab32,
		.elementor-element.elementor-element-4c55e607,
		.elementor-element.elementor-element-12f8c4c3) {
		margin-top: -62px;
	}
	body .elementor-22 .elementor-element.elementor-element-5fba2367 { top: 104px; z-index: 1; }
	body .elementor-22 .elementor-element.elementor-element-7c5eab32 { top: 120px; z-index: 2; }
	body .elementor-22 .elementor-element.elementor-element-4c55e607 { top: 136px; z-index: 3; }
	body .elementor-22 .elementor-element.elementor-element-12f8c4c3 { top: 152px; z-index: 4; }
	/* uniform deck heights, content vertically centered */
	body .elementor-22 .elementor-element:is(
		.elementor-element-5fba2367,
		.elementor-element-7c5eab32,
		.elementor-element-4c55e607,
		.elementor-element-12f8c4c3) .qodef-qi-info-cards {
		min-height: 232px;
		align-content: center;
	}
	/* the CTA joins the deck, pinned below the last card (232px card + 24px gap) */
	body .elementor-22 .elementor-element.elementor-element-3ac2306 {
		position: sticky;
		top: 408px;
	}
}
@media (min-width: 1200px) {
	body .elementor-22 .elementor-element:is(
		.elementor-element-5fba2367,
		.elementor-element-7c5eab32,
		.elementor-element-4c55e607,
		.elementor-element-12f8c4c3) .qodef-qi-info-cards {
		min-height: 184px;
	}
	body .elementor-22 .elementor-element.elementor-element-3ac2306 {
		top: 360px;
	}
	/* covered cards recede a touch so the stack reads as depth */
	body .elementor-22 :is(
		.elementor-element.elementor-element-5fba2367,
		.elementor-element.elementor-element-7c5eab32,
		.elementor-element.elementor-element-4c55e607,
		.elementor-element.elementor-element-12f8c4c3) .qodef-qi-info-cards {
		box-shadow: 0 -6px 24px -8px rgba(0, 54, 52, 0.28);
	}
}
body .elementor-22 :is(
	.elementor-element.elementor-element-5fba2367,
	.elementor-element.elementor-element-7c5eab32,
	.elementor-element.elementor-element-4c55e607,
	.elementor-element.elementor-element-12f8c4c3):hover .qodef-qi-info-cards {
	background-color: #ffffff;
	border-color: #ffffff;
	transform: translateY(-3px);
	box-shadow: var(--dc-shadow-lift);
}

/* card internals: icon left, content + link right (chip row anatomy) */
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) .qodef-qi-info-cards.qodef-m {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 20px;
	row-gap: 4px;
	align-items: start;
	text-align: left;
}
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) .qodef-m-icon-wrapper {
	grid-column: 1;
	grid-row: 1 / span 2;
	margin: 0;
}
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) .qodef-m-content {
	grid-column: 2;
}
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) .qodef-m-button {
	grid-column: 2;
}

/* card voice on spruce → inverted voice on white (hover) */
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) .qodef-qi-info-cards.qodef--icon-pack .qodef-m-icon-holder {
	font-size: clamp(38px, 3vw, 48px);
	line-height: 1;
}
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) .qodef-qi-info-cards .qodef-m-icon-holder,
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) .qodef-qi-info-cards .qodef-m-icon-holder a {
	color: var(--e-global-color-primary);
	transition: color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) :is(.qodef-m-title, .qodef-m-title a) {
	color: #ffffff;
	transition: color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) .qodef-m-text {
	color: rgba(255, 255, 255, 0.88);
	transition: color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element:is(
	.elementor-element-5fba2367,
	.elementor-element-7c5eab32,
	.elementor-element-4c55e607,
	.elementor-element-12f8c4c3) .qodef-m-button .qodef-qi-button {
	color: var(--e-global-color-primary);
	font-weight: 600;
	transition: color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 :is(
	.elementor-element.elementor-element-5fba2367,
	.elementor-element.elementor-element-7c5eab32,
	.elementor-element.elementor-element-4c55e607,
	.elementor-element.elementor-element-12f8c4c3):hover :is(.qodef-m-title, .qodef-m-title a) {
	color: var(--e-global-color-accent);
}
body .elementor-22 :is(
	.elementor-element.elementor-element-5fba2367,
	.elementor-element.elementor-element-7c5eab32,
	.elementor-element.elementor-element-4c55e607,
	.elementor-element.elementor-element-12f8c4c3):hover .qodef-m-text {
	color: var(--dc-text-muted);
}
body .elementor-22 :is(
	.elementor-element.elementor-element-5fba2367,
	.elementor-element.elementor-element-7c5eab32,
	.elementor-element.elementor-element-4c55e607,
	.elementor-element.elementor-element-12f8c4c3):hover :is(.qodef-m-icon-holder, .qodef-m-icon-holder a, .qodef-m-button .qodef-qi-button) {
	color: var(--dc-color-teal-text);
}

/* scroll-staggered entrance: cards rise into place one after another as the
   panel scrolls in (the CSS cousin of the inspiration's cycling motion) */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-22 :is(
			.elementor-element.elementor-element-5fba2367,
			.elementor-element.elementor-element-7c5eab32,
			.elementor-element.elementor-element-4c55e607,
			.elementor-element.elementor-element-12f8c4c3) {
			animation: dc-card-rise linear both;
			animation-timeline: view();
		}
		body .elementor-22 .elementor-element.elementor-element-5fba2367 { animation-range: entry 0% entry 55%; }
		body .elementor-22 .elementor-element.elementor-element-7c5eab32 { animation-range: entry 10% entry 65%; }
		body .elementor-22 .elementor-element.elementor-element-4c55e607 { animation-range: entry 20% entry 75%; }
		body .elementor-22 .elementor-element.elementor-element-12f8c4c3 { animation-range: entry 30% entry 85%; }
	}
}
/* dc-card-rise keyframes: shared house entrance, defined in style.css §5 */

/* -- 3c. SERVICES PHOTO: full-bleed portrait in the panel's right half ----- */
/* Elementor 4 optimized DOM: the <img> sits directly inside the widget div
   (no .elementor-widget-container) — the widget element hosts clip + seam. */
@media (min-width: 768px) {
	body .elementor-22 .elementor-element.elementor-element-577c356e {
		position: relative;
		min-height: 480px;
	}
	body .elementor-22 .elementor-element.elementor-element-577c356e > .elementor-widget-wrap {
		padding: 0;
	}
	/* absolute fill: the widget-wrap is a flex ROW, so flex-grow can never
	   give the image height — pin the widget to the column instead. The
	   panel no longer clips (overflow would kill the deck's sticky), so the
	   photo rounds its own outer corners to match the panel radius. */
	body .elementor-22 .elementor-element.elementor-element-21b12e37.elementor-widget-image {
		position: absolute;
		/* seat his head on the FIRST service card's top line (~84px in from the
		   panel top) — raised from a taller inset so he no longer floats low by
		   the 2nd card. Safe against the sticky header: wherever that first card
		   is readable the panel top already sits below the header, so his head
		   (level with it) is visible too; the only overlap is the transient
		   scroll-past that hides the card as well. */
		inset: clamp(44px, 5vw, 72px) 0 0 0;
		border-radius: 0 var(--dc-radius-media) var(--dc-radius-media) 0;
	}
	/* the portrait is now a TRANSPARENT cutout (Dr. Nitsis keyed off white,
	   att 11268) — `contain` shows the whole standing figure and the spruce
	   panel reads straight through the alpha, so he blends onto the ground
	   instead of sitting in a photo rectangle. Bottom-anchored so he stands on
	   the panel floor; the cutout's own aspect (~0.49) nearly matches the
	   column, so he fills it head-to-hem with only a hair of side air. */
	body .elementor-22 .elementor-element.elementor-element-21b12e37.elementor-widget-image img {
		height: 100%;
		object-fit: contain;
		object-position: center bottom;
	}
	/* ground the cropped hem: a low spruce rise dissolves his bottom edge into
	   the panel floor (replaces the old rectangle-hiding left+bottom seam —
	   a cutout has no hard edges to mask, only a hem to seat). */
	body .elementor-22 .elementor-element.elementor-element-21b12e37.elementor-widget-image::before {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(0deg,
			var(--e-global-color-accent) 0%,
			rgba(0, 109, 107, 0.55) 6%,
			rgba(0, 109, 107, 0) 15%);
		pointer-events: none;
		z-index: 1;
	}
}
body .elementor-22 .elementor-element.elementor-element-21b12e37.elementor-widget-image {
	/* no position here — it would override the ≥768px absolute-fill below
	   at equal specificity (this rule sits later in the file) */
	overflow: hidden;
}
@media (max-width: 767px) {
	/* stacked layout: photo tops the panel — round its own upper corners
	   (the panel no longer clips children) + a little spruce headroom so his
	   head clears the tall mobile header at more scroll positions */
	body .elementor-22 .elementor-element.elementor-element-21b12e37.elementor-widget-image {
		border-radius: var(--dc-radius-media) var(--dc-radius-media) 0 0;
		margin-top: clamp(16px, 5vw, 32px);
	}
	/* the cutout's full-length aspect (~0.49) would run ~800px tall at phone
	   width and bury the cards. Cap it to a face-forward portrait (cover from
	   the top = head + crossed arms), then dissolve the hem into the spruce
	   panel with a bottom mask so there is no hard photo cut. */
	body .elementor-22 .elementor-element.elementor-element-21b12e37.elementor-widget-image img {
		height: clamp(400px, 70vw, 500px);
		object-fit: cover;
		object-position: center top;
		-webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
	}
}
body .elementor-22 .elementor-element.elementor-element-21b12e37.elementor-widget-image img {
	border-radius: 0; /* the panel owns every corner */
	display: block;
	width: 100%;
}
/* NB: no dc-photo-drift on this portrait. Parallax drift suited the old
   full-bleed `cover` photo (which overflowed its box, so the drift just slid
   the overflow). On the `contain` cutout the image fits its box, so drifting it
   up exposes a gap AND pushes his head up under the sticky header. Held still. */

/* -- 4. PHOTOGRAPHY: generous media radius across content sections --------- */

/* (1f9999b0 excluded: its portrait is full-bleed inside the services panel) */
body .elementor-22 :is(
	.elementor-element.elementor-element-4528b182,
	.elementor-element.elementor-element-54c58e45,
	.elementor-element.elementor-element-3f4077f4,
	.elementor-element.elementor-element-2989d3b2) .elementor-widget-image img {
	border-radius: var(--dc-radius-media);
}

/* -- 5. PROCESS: editorial hover-list with photo swap ----------------------- */
/* Project-showcase inspiration: the three steps become minimal list rows
   (hairline separators, hover highlight, animated title underline, arrow
   slide-in, number as right-side badge), and the photo panel swaps to a
   REAL team photo per hovered step via :has() across the sibling columns —
   the CSS translation of the cursor-following preview. Falls back to a
   static photo + plain rows where :has()/pseudo layers are unsupported. */

/* intro joins the left-aligned editorial voice, H2 at display scale */
body .elementor-22 .elementor-element.elementor-element-4ba80899,
body .elementor-22 .elementor-element.elementor-element-39ec7e {
	text-align: left;
}
body .elementor-22 .elementor-element.elementor-element-712c89fd .qodef-m-title {
	font-size: clamp(2.4rem, 1.88rem + 2.2vw, 3.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}
body .elementor-22 .elementor-element.elementor-element-712c89fd .qodef-qi-animated-text.qodef--alignment-center {
	text-align: left;
}

/* rows */
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-process-item .qodef-e-inner {
	border-top: 1px solid var(--e-global-color-d59e8a8);
	padding: 22px 14px;
	border-radius: 12px;
	transition: background-color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-process-item:last-child .qodef-e-inner {
	border-bottom: 1px solid var(--e-global-color-d59e8a8);
}
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-process-item:hover .qodef-e-inner {
	background-color: rgba(191, 227, 223, 0.35);
}
/* number becomes the right-side badge (year-badge analog); connector hidden */
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-e-content {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-e-icon-holder {
	order: 2;
	margin-left: auto;
}
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-e-line {
	display: none;
}
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-e-item-icon-text {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: var(--dc-color-teal-text);
	font-variant-numeric: tabular-nums;
}
/* title: growing underline + arrow slide-in */
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-e-title {
	display: inline-block;
	background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 2px;
	transition: background-size var(--dc-speed) var(--dc-ease), color var(--dc-speed) var(--dc-ease);
	padding-bottom: 2px;
}
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-process-item:hover .qodef-e-title {
	background-size: 100% 2px;
	color: var(--e-global-color-accent);
}
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-e-title::after {
	content: " \2197";
	display: inline-block;
	opacity: 0;
	transform: translate(-6px, 6px);
	transition: opacity var(--dc-speed) var(--dc-ease), transform var(--dc-speed) var(--dc-ease);
	color: var(--dc-color-teal-text);
}
body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-process-item:hover .qodef-e-title::after {
	opacity: 1;
	transform: none;
}

/* photo panel: one photo per step, theme-owned under assets/img (David's
   picks — Unsplash: NCI / Vitaly Gariev / nappy). ::before permanently shows
   step 1's photo (visually retiring the widget's stock image — punch list
   still swaps it in Elementor, after which ::before can go); ::after
   crossfades to the hovered step's photo. URLs are relative to this CSS
   file. To change a photo: overwrite the file, keep the name. */
body .elementor-22 .elementor-element.elementor-element-1d0618f1.elementor-widget-image {
	position: relative;
	overflow: hidden;
	border-radius: var(--dc-radius-media);
}
body .elementor-22 .elementor-element.elementor-element-1d0618f1.elementor-widget-image::before,
body .elementor-22 .elementor-element.elementor-element-1d0618f1.elementor-widget-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: center top / cover no-repeat;
	transition: opacity 0.35s var(--dc-ease), transform 0.5s var(--dc-ease);
}
/* image-set: the .webp siblings are 1200w q80 re-encodes shipped in the
   theme (101 KB for all three vs 450 KB of jpg — CSS backgrounds never get
   the Converter-for-Media treatment, so the webp leg must be authored).
   Regenerate on a photo swap: PHP GD imagescale(1200) + imagewebp(80). */
body .elementor-22 .elementor-element.elementor-element-1d0618f1.elementor-widget-image::before {
	background-image: url("../img/proceso-1.jpg");
	background-image: image-set(
		url("../img/proceso-1.webp") type("image/webp"),
		url("../img/proceso-1.jpg") type("image/jpeg"));
	z-index: 1;
}
body .elementor-22 .elementor-element.elementor-element-1d0618f1.elementor-widget-image::after {
	background-image: url("../img/proceso-2.jpg");
	background-image: image-set(
		url("../img/proceso-2.webp") type("image/webp"),
		url("../img/proceso-2.jpg") type("image/jpeg"));
	z-index: 2;
	opacity: 0;
	transform: scale(1.06);
}
body .elementor-22 .elementor-element.elementor-element-3f4077f4:has(.qodef-process-item:nth-child(2):hover) .elementor-element-1d0618f1.elementor-widget-image::after {
	opacity: 1;
	transform: scale(1);
}
body .elementor-22 .elementor-element.elementor-element-3f4077f4:has(.qodef-process-item:nth-child(3):hover) .elementor-element-1d0618f1.elementor-widget-image::after {
	background-image: url("../img/proceso-3.jpg");
	background-image: image-set(
		url("../img/proceso-3.webp") type("image/webp"),
		url("../img/proceso-3.jpg") type("image/jpeg"));
	opacity: 1;
	transform: scale(1);
}

/* -- 6. RESULTS / COUNTERS: data chips docked on the photo ------------------ */
/* Same design logic as the hero's info strip: the counters are two matching
   mint data chips that dock onto the portrait's base (the strip's card-over-
   hero move), with eyebrow-voice labels under display numbers. The kit gave
   them -140px margins, a -80px mutual overlap, and mismatched widths — all
   neutralized here. */

body .elementor-22 :is(
	.elementor-element.elementor-element-22da5cb8,
	.elementor-element.elementor-element-7ccc46cc) {
	background-color: var(--e-global-color-primary);
	border: none; /* the kit's border-right was the old slab's separator */
	border-radius: var(--dc-radius-card);
	box-shadow: var(--dc-shadow-soft);
	padding: 24px 16px 20px;
	text-align: center;
	z-index: 2;
}
/* photo is 74% of the column — the chip pair (6% + 30% + 4% + 30% = 64%
   band, centered at 37%) docks centered on the photo's bottom edge */
@media (min-width: 768px) {
	body .elementor-22 .elementor-element.elementor-element-22da5cb8 {
		width: 30%;
		max-width: 30%;
		margin: -52px 0 0 6%;
	}
	body .elementor-22 .elementor-element.elementor-element-7ccc46cc {
		width: 30%;
		max-width: 30%;
		margin: -52px 0 0 4%;
	}
}
@media (max-width: 767px) {
	/* photo is narrower on mobile — chips sit flush below it, side by side */
	body .elementor-22 .elementor-element.elementor-element-22da5cb8 {
		width: calc(50% - 6px);
		max-width: calc(50% - 6px);
		margin: 12px 0 0;
	}
	body .elementor-22 .elementor-element.elementor-element-7ccc46cc {
		width: calc(50% - 6px);
		max-width: calc(50% - 6px);
		margin: 12px 0 0 12px;
	}
}
body .elementor-22 .elementor-element.elementor-element-2989d3b2 .elementor-counter-number-wrapper {
	color: var(--e-global-color-accent);
	font-size: clamp(2rem, 1.7rem + 1.3vw, 2.75rem);
	line-height: 1.1;
	justify-content: center;
}
/* label joins the eyebrow voice (the strip's DIRECCIÓN/HORARIO register) */
body .elementor-22 .elementor-element.elementor-element-2989d3b2 .elementor-counter-title {
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 700;
	font-size: 0.72rem;
	line-height: 1.3;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--dc-color-teal-text);
}
/* entrance: the chips rise into their dock as the section scrolls in */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-22 :is(
			.elementor-element.elementor-element-22da5cb8,
			.elementor-element.elementor-element-7ccc46cc) {
			animation: dc-card-rise linear both;
			animation-timeline: view();
		}
		body .elementor-22 .elementor-element.elementor-element-22da5cb8 { animation-range: entry 0% entry 55%; }
		body .elementor-22 .elementor-element.elementor-element-7ccc46cc { animation-range: entry 12% entry 67%; }
	}
}
/* the ElementsKit "Play Video" popup chip is retired from the design —
   hidden here; punch list: delete the widget in Elementor (its JS/CSS still
   enqueue while the element exists) */
body .elementor-22 .elementor-element.elementor-element-4eb5ed38 {
	display: none;
}

/* -- 6b. TEAM & RESULTS: editorial hierarchy + depth-gallery imagery -------- */
/* Same voice logic as the intro: one display headline per section, teal
   supporting subhead, working links instead of bold stacks. Imagery gets the
   infinite-gallery treatment translated to CSS: images arrive from depth
   (blur-focus on entry), drift on an ambient float, and parallax at
   different rates per layer (near faster than far). */

/* display headlines — a step under the intro's so the page keeps one #1 voice */
body .elementor-22 .elementor-element:is(
	.elementor-element-2f540cdc,
	.elementor-element-33b68608) .qodef-m-title {
	font-size: clamp(2.4rem, 1.88rem + 2.2vw, 3.75rem); /* 38 → 60px */
	line-height: 1.1;
	letter-spacing: -0.02em;
}
/* the results H2 widget is authored at width:124.997% — a desktop trick to
   span the headline into the photo gutter. Below desktop the column is
   full-width, so the overflow crowds the right edge — cap it. */
@media (max-width: 1024px) {
	body .elementor-22 .elementor-element.elementor-element-33b68608 {
		width: 100%;
		max-width: 100%;
	}
}

/* team subhead: "Conoce a nuestro equipo de profesionales" */
body .elementor-22 .elementor-element.elementor-element-76aadb51 p:first-of-type {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.35;
	font-weight: 600;
	color: var(--dc-color-teal-text);
}
body .elementor-22 .elementor-element.elementor-element-76aadb51 p:first-of-type a {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid var(--e-global-color-primary);
	transition: color var(--dc-speed) var(--dc-ease), border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-76aadb51 p:first-of-type a:hover {
	color: var(--e-global-color-accent);
	border-color: var(--dc-color-drop);
}

/* results: bold-paragraph pile → tidy arrow-link index */
body .elementor-22 .elementor-element.elementor-element-479e778f p {
	margin: 0;
	border-bottom: 1px solid var(--e-global-color-d59e8a8);
}
body .elementor-22 .elementor-element.elementor-element-479e778f p a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 13px 2px;
	color: var(--dc-color-teal-text);
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 600;
	text-decoration: none;
	transition: color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-479e778f p a::after {
	content: "\2192";
	transition: transform var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-479e778f p a:hover {
	color: var(--e-global-color-accent);
}
body .elementor-22 .elementor-element.elementor-element-479e778f p a:hover::after {
	transform: translateX(4px);
}

/* collage (Qi parallax-images): radius + per-layer shadows */
body .elementor-22 .qodef-qi-parallax-images img {
	border-radius: var(--dc-radius-media);
}
body .elementor-22 .qodef-qi-parallax-images .qodef-e-main-image img {
	box-shadow: var(--dc-shadow-soft);
}
body .elementor-22 .qodef-qi-parallax-images .qodef-e-parallax-image img {
	box-shadow: var(--dc-shadow-lift);
}
body .elementor-22 .elementor-element.elementor-element-560614c img {
	box-shadow: var(--dc-shadow-soft);
}

/* motion: ambient float (time-based) + depth arrival & parallax (scroll) */
@media (prefers-reduced-motion: no-preference) {
	body .elementor-22 .qodef-qi-parallax-images .qodef-e-main-image {
		animation: dc-float-far 9s ease-in-out infinite;
	}
	body .elementor-22 .qodef-qi-parallax-images .qodef-e-parallax-image img {
		animation: dc-float-near 7s ease-in-out infinite;
	}
	body .elementor-22 .elementor-element.elementor-element-560614c img {
		animation: dc-float-far 10s ease-in-out infinite;
	}
	@supports (animation-timeline: view()) {
		/* arrive from depth: blur-focus while entering the viewport */
		body .elementor-22 .qodef-qi-parallax-images .qodef-e-main-image-zoom-holder,
		body .elementor-22 .elementor-element.elementor-element-560614c {
			animation: dc-focus-in linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 45%;
		}
		/* per-layer parallax: near travels against far */
		body .elementor-22 .qodef-qi-parallax-images .qodef-e-main-image-holder {
			animation: dc-parallax-far linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
		body .elementor-22 .qodef-qi-parallax-images .qodef-e-parallax-image {
			animation: dc-focus-in linear both, dc-parallax-near linear both;
			animation-timeline: view(), view();
			animation-range: entry 0% entry 45%, entry 0% exit 100%;
		}
	}
}
/* dc-focus-in / dc-float-far / dc-float-near: shared house entrances,
   defined in style.css §5 (moved 2026-07-10 for reuse by page modules) */
/* dc-parallax-far/near keyframes: shared house ambient, defined in style.css §5 */

/* -- 6c. DUDAS FRECUENTES: single-open accordion + figure panel -------------- */
/* FAQ-section inspiration translated onto the Qi slider DOM: home.js retires
   Swiper and flags the widget .dc-faq-mode — every rule below is gated on
   that class, so without JS the widget remains a stock Qi slider. Questions
   stack as bordered cards speaking the site FAQ language (style.css §3:
   white card, mint open ground); each duda's image escapes its card into a
   shared figure panel on the right that crossfades on open (the process
   section's swap pattern, click-driven). JS enforces exactly one open duda,
   so the panel is never empty. Header keeps the left editorial voice. */

/* full double-class mirror: the widgets' own text-align:center is (0,4,0) */
body .elementor-22 .elementor-element.elementor-element-6ec95e63,
body .elementor-22 .elementor-element.elementor-element-46884ab8 {
	text-align: left;
}
/* the H2 is a Qi animated-text (not a heading widget) with its own
   qodef--alignment-center class — mirror both to win */
body .elementor-22 .elementor-element.elementor-element-46884ab8 .qodef-m-title {
	font-size: clamp(2.4rem, 1.88rem + 2.2vw, 3.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}
body .elementor-22 .elementor-element.elementor-element-46884ab8 .qodef-qi-animated-text.qodef--alignment-center {
	text-align: left;
}

/* layout: the shortcode div anchors the figure panel; slides stack as cards */
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-qi-testimonials-slider {
	position: relative;
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-wrapper {
	/* swiper core sets relative + translate3d — both would become the
	   containing block for the escaped figures */
	position: static;
	transform: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: auto;
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide {
	position: static; /* swiper core sets relative — figures must anchor to the shortcode box */
	width: auto;
	height: auto;
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-swiper-together-nav {
	display: none; /* slider arrows retired with the slider */
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-quote {
	display: none; /* dudas are informational figures, not quotes */
}

/* card chrome — the site FAQ language (style.css §3) */
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-inner {
	position: static; /* Qi sets relative — the figure must anchor to the shortcode box, not the card */
	display: flex;
	flex-direction: column;
	border: var(--dc-border);
	border-radius: 12px;
	background-color: #ffffff;
	padding: 18px 20px;
	transition: background-color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide:not(.dc-open):hover .qodef-e-inner {
	background-color: rgba(191, 227, 223, 0.35);
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide.dc-open .qodef-e-inner {
	background-color: var(--e-global-color-cff305b);
	border-color: var(--e-global-color-primary);
}

/* question row: flex title + chevron chip (home.js adds role=button/tabindex,
   so the global :focus-visible outline applies) */
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	font-size: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); /* kit h3 is display-scale */
	line-height: 1.35;
	color: var(--dc-text-muted);
	cursor: pointer;
	transition: color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide.dc-open .qodef-e-title {
	color: var(--e-global-color-accent);
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-title::after {
	content: "";
	flex: none;
	width: 30px;
	height: 30px;
	border: 1.5px solid var(--e-global-color-d59e8a8);
	border-radius: 50%;
	background-color: #ffffff;
	/* teal chevron-down (stroke #006D6B = --dc-color-teal-text) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5l4 4 4-4' fill='none' stroke='%23006D6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-position: center;
	background-size: 14px;
	background-repeat: no-repeat;
	transition: transform 0.25s var(--dc-ease),
		background-color var(--dc-speed) var(--dc-ease),
		border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-title:hover::after {
	border-color: var(--e-global-color-secondary);
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide.dc-open .qodef-e-title::after {
	transform: rotate(180deg);
	background-color: var(--e-global-color-secondary);
	border-color: var(--e-global-color-secondary);
	/* white chevron on the teal chip */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* answer: grid-rows collapse (auto title row, 0fr→1fr text row) */
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-content {
	display: grid;
	grid-template-rows: auto 0fr;
	transition: grid-template-rows 0.3s var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide.dc-open .qodef-e-content {
	grid-template-rows: auto 1fr;
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-text {
	overflow: hidden;
	min-height: 0;
	margin: 0;
	padding-top: 10px; /* clipped with the 0fr row while closed */
	max-width: 58ch;
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	line-height: 1.6;
	color: var(--dc-text-muted);
	opacity: 0;
	transition: opacity 0.25s var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide.dc-open .qodef-e-text {
	opacity: 1;
	transition-delay: 0.1s;
}

/* figure panel ≥768px: each duda's image escapes its card and crossfades
   over a shared white panel on the right (white ground so the mixed
   white-background PNGs sit seamlessly; object-fit contain — the smallest
   source is 177px and must not be upscale-cropped) */
@media (min-width: 768px) {
	body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-wrapper {
		width: 55%;
	}
	body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-qi-testimonials-slider {
		min-height: 440px;
	}
	body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-qi-testimonials-slider::before {
		content: "";
		position: absolute;
		inset: 0 0 0 calc(55% + 32px);
		background-color: #ffffff;
		border: var(--dc-border);
		border-radius: var(--dc-radius-media);
		box-shadow: var(--dc-shadow-soft);
	}
	body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-side {
		position: absolute;
		inset: 0 0 0 calc(55% + 32px);
		/* Qi's side-with-image layout: width 290px, max-width 30%, margin 6% —
		   all three would clamp the escaped figure to a narrow strip */
		width: auto;
		max-width: none;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: clamp(24px, 3vw, 44px);
		opacity: 0;
		filter: blur(6px);
		transform: scale(1.04);
		transition: opacity 0.35s var(--dc-ease),
			filter 0.35s var(--dc-ease),
			transform 0.45s var(--dc-ease);
		pointer-events: none;
	}
	body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide.dc-open .qodef-e-side {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-media-image {
	width: 100%;
	height: 100%;
	overflow: visible; /* Qi sets overflow:auto — its scrollbars were painting corner marks */
	border-radius: 0;  /* Qi's 10% radius; the letterboxed img box wouldn't hug it anyway */
	line-height: normal;
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-media-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain; /* mixed charts/photos/icons — never crop */
}
/* metas.png is only 177px — hold it at natural size instead of upscaling
   to mush; the centered icon-plate look suits a goals graphic */
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .elementor-repeater-item-ba6eebf .qodef-e-media-image {
	display: flex;
	align-items: center;
	justify-content: center;
}
body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .elementor-repeater-item-ba6eebf .qodef-e-media-image img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
/* <768px: the figure rides inside the open card, after the answer */
@media (max-width: 767px) {
	body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .qodef-e-side {
		display: none;
		order: 2;
	}
	body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide.dc-open .qodef-e-side {
		display: block;
		width: 100%; /* Qi's side-with-image layout gives the side a column width */
		padding-top: 12px;
	}
}

/* entrance: cards fade in a stagger as the section scrolls in. Opacity ONLY —
   a transform or filter keyframe on the slides (even at identity/blur(0))
   would create a containing block and re-trap the escaped figures. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide {
			animation: dc-duda-fade linear both;
			animation-timeline: view();
		}
		body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide:nth-child(1) { animation-range: entry 0% entry 50%; }
		body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide:nth-child(2) { animation-range: entry 8% entry 58%; }
		body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide:nth-child(3) { animation-range: entry 16% entry 66%; }
		body .elementor-22 .elementor-element.elementor-element-1daaa40.dc-faq-mode .swiper-slide:nth-child(4) { animation-range: entry 24% entry 74%; }
	}
}
@keyframes dc-duda-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* -- 6d. APRENDE MÁS: editorial header + card grid --------------------------- */
/* The blog strip joins the page voice: left editorial header (eyebrow +
   display H2 + teal subhead) over the site card system (style.css §3).
   The section has no h6 eyebrow widget — a ::before supplies it visually;
   punch list: add the real h6 in Elementor, then drop that rule. */

body .elementor-22 .elementor-element.elementor-element-6451d62a,
body .elementor-22 .elementor-element.elementor-element-535fbd49 {
	text-align: left;
}
/* the kit padded the subhead for the old centered composition (200px/80px
   per breakpoint) — flush left with the headline */
body .elementor-22 .elementor-element.elementor-element-535fbd49 {
	padding-inline: 0;
}
body .elementor-22 .elementor-element.elementor-element-6451d62a .qodef-qi-animated-text.qodef--alignment-center {
	text-align: left;
}
body .elementor-22 .elementor-element.elementor-element-6451d62a .qodef-qi-animated-text::before {
	content: "Blog";
	display: block;
	margin-bottom: 10px;
	font-family: var(--e-global-typography-accent-font-family), sans-serif;
	font-weight: 700;
	font-size: var(--dc-fs-eyebrow);
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dc-color-teal-text);
}
body .elementor-22 .elementor-element.elementor-element-6451d62a .qodef-m-title {
	font-size: clamp(2.4rem, 1.88rem + 2.2vw, 3.75rem); /* the section display scale */
	line-height: 1.1;
	letter-spacing: -0.02em;
}
/* subhead voice, matching the team subhead pattern (link inherits, mint
   underline, crimson accent on hover) */
body .elementor-22 .elementor-element.elementor-element-535fbd49 p {
	font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
	line-height: 1.35;
	font-weight: 600;
	color: var(--dc-color-teal-text);
	margin-bottom: 34px;
}
body .elementor-22 .elementor-element.elementor-element-535fbd49 p a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
	border-bottom: 2px solid var(--e-global-color-primary);
	transition: color var(--dc-speed) var(--dc-ease), border-color var(--dc-speed) var(--dc-ease);
}
body .elementor-22 .elementor-element.elementor-element-535fbd49 p a:hover {
	color: var(--e-global-color-accent);
	border-color: var(--dc-color-drop);
}
/* home strip: evergreen pages-as-posts — the date/category row is noise
   here (the archive keeps its dates via style.css) */
body .elementor-22 .elementor-element.elementor-element-6f2f3dbb .qodef-e-info.qodef-info--top {
	display: none;
}
/* entrance: cards rise in a stagger (house pattern; keyframes in §3 services) */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-22 .elementor-element.elementor-element-6f2f3dbb .qodef-blog-item {
			animation: dc-card-rise linear both;
			animation-timeline: view();
		}
		body .elementor-22 .elementor-element.elementor-element-6f2f3dbb .qodef-blog-item:nth-child(1) { animation-range: entry 0% entry 50%; }
		body .elementor-22 .elementor-element.elementor-element-6f2f3dbb .qodef-blog-item:nth-child(2) { animation-range: entry 10% entry 60%; }
		body .elementor-22 .elementor-element.elementor-element-6f2f3dbb .qodef-blog-item:nth-child(3) { animation-range: entry 20% entry 70%; }
	}
}
/* the view-all button sits under the grid with a touch more air */
body .elementor-22 .elementor-element.elementor-element-cf9a7fe {
	margin-top: 18px;
}

/* -- 6e. MOBILE QA (<768px) — formatting/alignment corrections -------------- */

@media (max-width: 767px) {
	/* PROCESS: the widget's spacing control pads the number badge 160px
	   bottom to house the step connector line (which this design hides) —
	   it hollowed every row. Full kit-selector mirror: the generated rule
	   carries 8 classes. */
	body .elementor-22 .elementor-element.elementor-element-4adc3279 .qodef-qi-process.qodef-item-layout--vertical .qodef-process-item:not(:last-child) .qodef-e-icon-holder {
		padding-bottom: 0;
	}
	/* SERVICES: the kit leaves a mobile-only 1px divider under card 2 —
	   a stray hairline floating between the glass cards */
	body .elementor-22 .elementor-element.elementor-element-7c5eab32 > .elementor-widget-container {
		border: none;
	}
	/* TEAM: the kit centers this section's text on mobile, breaking the
	   page's left-editorial voice (every sibling section stays left) */
	body .elementor-22 .elementor-element.elementor-element-54c58e45 .elementor-element {
		text-align: left;
	}
	body .elementor-22 .elementor-element.elementor-element-54c58e45 .qodef-qi-animated-text {
		text-align: left;
	}
	/* TEAM collage: the Qi widget composes a 103.846%-wide portrait with a
	   140px photo absolutely escaped over its bottom-left corner. On a 350px
	   column (measured 2026-07-19) that reads as two mismatched fragments —
	   the portrait renders 363px, hanging 13px past the column edge, and the
	   inset 140x219 sits 50px BELOW the widget box. The widget simply never
	   got the mobile reset its sibling results photo (560614c) has.
	   Flatten the collage into a 50/50 pair: same aspect, radius and shadow,
	   tops aligned — house mobile grammar (floating cards go flat). */
	body .elementor-22 .elementor-element.elementor-element-5e4979f8 {
		--container-widget-width: 100%;
		width: 100%;
		max-width: 100%;
	}
	body .elementor-22 .qodef-qi-parallax-images .qodef-m-images {
		display: grid; /* plugin default is inline-block */
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 14px;
		width: 100%;
	}
	/* de-escape the inset: position:absolute is the plugin's, the 140px /
	   bottom:-50px the kit's — mirror BOTH selectors so it becomes a plain
	   grid cell */
	body .elementor-22 .elementor-element.elementor-element-5e4979f8 .elementor-repeater-item-00b66fe,
	body .elementor-22 .elementor-element.elementor-element-5e4979f8 .elementor-repeater-item-00b66fe.qodef-position--bottom-left {
		position: static;
		inset: auto;
		width: 100%;
	}
	/* the holder chain must fill its cell for the portrait to size off the grid */
	body .elementor-22 .qodef-qi-parallax-images .qodef-e-main-image-holder,
	body .elementor-22 .qodef-qi-parallax-images .qodef-e-main-image-zoom-holder,
	body .elementor-22 .qodef-qi-parallax-images .qodef-e-main-image {
		display: block;
		width: 100%;
	}
	/* ONE treatment for both photos — the inset carried shadow-lift to sell
	   its lift off the portrait, which has nothing to lift off of now */
	body .elementor-22 .qodef-qi-parallax-images .qodef-e-main-image img,
	body .elementor-22 .qodef-qi-parallax-images .qodef-e-parallax-image img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 4;
		object-fit: cover;
		border-radius: var(--dc-radius-media);
		box-shadow: var(--dc-shadow-soft);
	}
	/* ambient float + per-layer parallax exist to sell depth in the overlap;
	   side by side, two desynced drifts just read as jitter. Both cells keep
	   the focus-in arrival, together. */
	@media (prefers-reduced-motion: no-preference) {
		body .elementor-22 .qodef-qi-parallax-images .qodef-e-main-image,
		body .elementor-22 .qodef-qi-parallax-images .qodef-e-parallax-image img {
			animation: none;
		}
		@supports (animation-timeline: view()) {
			body .elementor-22 .qodef-qi-parallax-images .qodef-e-main-image-holder {
				animation: none;
			}
			body .elementor-22 .qodef-qi-parallax-images .qodef-e-parallax-image {
				animation: dc-focus-in linear both;
				animation-timeline: view();
				animation-range: entry 0% entry 45%;
			}
		}
	}
	/* RESULTS: full-width photo so the counter chips below align flush with
	   its edges (the kit's 74% left an off-axis gap on the right) */
	body .elementor-22 .elementor-element.elementor-element-560614c {
		width: 100%;
		max-width: 100%;
	}
	/* FINAL CTA: reverse-mobile stacks the photo column (a background image
	   with a spacer) above the spruce panel — round the pair into ONE card:
	   photo takes the top corners, panel the bottom ones */
	body .elementor-22 .elementor-element.elementor-element-497f2501,
	body .elementor-22 .elementor-element.elementor-element-497f2501 > .elementor-widget-wrap {
		border-radius: var(--dc-radius-media) var(--dc-radius-media) 0 0;
		overflow: hidden;
	}
	body .elementor-22 .elementor-element.elementor-element-3a4742be:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap {
		border-radius: 0 0 var(--dc-radius-media) var(--dc-radius-media);
	}
}

/* -- 7. FINAL CTA: neutral card → deep spruce closing panel ----------------- */

/* SEAM → footer: the closing panel is spruce and the footer directly below is
   ALSO spruce (§6). Flush, the two dark grounds merge into one block with no
   readable end to the page. Float the panel clear with a white breathing band
   below it. Home-only: every other page closes on a light section, so their
   contrast already separates panel from footer. */
body .elementor-22 .elementor-element.elementor-element-41985430 {
	padding-bottom: clamp(52px, 6vw, 96px);
}

/* bg lives on the legacy column's widget-wrap with a :not() suffix — mirror it */
body .elementor-22 .elementor-element.elementor-element-3a4742be:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap {
	background-color: var(--e-global-color-accent);
	border-radius: var(--dc-radius-media);
	overflow: hidden;
}
body .elementor-22 .elementor-element.elementor-element-3a4742be {
	color: rgba(255, 255, 255, 0.85);
}
body .elementor-22 .elementor-element.elementor-element-3a4742be :is(h1, h2, h3, h4, h5, .qodef-m-title, .qodef-e-word) {
	color: #ffffff;
}
body .elementor-22 .elementor-element.elementor-element-3a4742be h6 {
	color: var(--e-global-color-primary);
}
body .elementor-22 .elementor-element.elementor-element-3a4742be .elementor-widget-text-editor {
	color: rgba(255, 255, 255, 0.85);
}
body .elementor-22 .elementor-element.elementor-element-3a4742be a:not(.elementor-button) {
	color: var(--e-global-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}
body .elementor-22 .elementor-element.elementor-element-3a4742be a:not(.elementor-button):hover {
	color: #ffffff;
}